第0天：技術選型、環境配置

1. 寫在開始之前

大家好，我是 Airing 。有近一年沒有寫過教程了，因為考研等種種原因，也許久沒有寫過博文。不過這段時間組建了一個興趣開發團隊 （Oh~Bear! 零熊：https://oh-bear.github.io），也開發并上架了一些 APP 產品。所以就想到了為社會服務，能不能編寫一個教程，教會零基礎的童鞋用最短的時間和最少的精力去學會開發一款 APP，用專業的開發流程和簡單的技術，全棧去開發一款完整的 APP。

其實，APP 開發很簡單，只是技術繽紛讓人眼花繚亂，而且沒有一個系統的教程，所以才會使人產生 APP 開發很困難的假象。未來可能會出配套的視頻教程吧~

本教程將從零開始，設計一個簡單的 APP，然后走一個完成的開發流程，從后端到前端，完整地開發一款可上架的 Android 與 iOS 雙平臺 APP。雖然這個 APP 很簡單，但是具備了通常服務端的需要的增刪改查的完整功能，也用到了最常見的前端開發控件，作為教學而言，實用性不可估量。

既然這篇教程將會持續十天，那么，這款 APP 就叫十日吧。

注：本項目在 GitHub 上開源（https://github.com/airingursb/10days）

2. 基本要求

本教程雖說是零基礎，但必須至少有 JavaScript 編程語言基礎，否則繼續跟進教程只能是單純地照葫蘆畫瓢，學不到東西。如果沒有 JavaScript 基礎的童鞋，可以看看我之前寫的一本教程《Before Coding》（電子書地址：https://www.gitbook.com/book/airingursb/before-coding/details）。

因此學習本教程的必備知識有：

• 熟悉 JavaScript
• 使用過 HTML + CSS
• 了解 HTTP 的基本原理

除此之外你最好還要有：

• 知道 Linux 的基本命令
• 了解過 ORM 框架
• 了解 Git 的使用
• 至少體驗過一次完成的開發流程
• 一臺MacBook（iOS開發與上架必須）

3. 技術選型

正如書名所示，前端將使用當下最火的移動端開發框架 React Native，后端將使用當下大行其道的 NodeJs 技術，具體后端框架將使用其中最簡單的 Express + Sequelize。所有的開發將使用 JavaScript 語言，況且 js 本身就屬于比較簡單的語言，所以童鞋們不必有畏難情緒，開發流程會意想不到的順利和簡單。

注：前提是請鎖定教程中使用的庫的版本號。

4. 環境配置

本書使用過的軟件有（按出現先后順序）：

• OmniPlan：需求與任務規劃
• Balsamiq Mockups：原型設計
• Sketch：UI設計
• Sublime Text：JavaScript 代碼編輯器
• Chrome：瀏覽器
• Paw：接口調試
• Sequel Pro：MySQL 數據庫 GUI 工具

以上軟件中，沒有必須強制安裝的，如果你沒有自己的編輯器，推薦使用 Sublime Text 或 WebStorm 來寫 JavaScript。另外，如果你是 Windows 系統，Paw 請使用 Postman 代替（那就必須下載 Chrome 了），Sequel Pro 請使用 Navicat for MySQL 代替。如果你還不知道這些軟件具體怎樣使用，沒有關系，等后續教程用到再安裝研究也不遲。

本教程中涉及的環境如下：

• 開發環境：MacOS + Nodejs + MySQL
• 生產環境：Ubuntu14.04 + Nodejs + Nginx + MySQL（阿里云平臺）

所以必須安裝的環境有：

1. Nodejs：直接去官網安裝即可。
2. MySQL：Windows 系統直接下載 msi 文件安裝即可，Linux 系統使用對應的包管理工具直接安裝即可。

另外，如果你使用 Windows 系統，推薦安裝 GitBash 使用 linux 命令行操作，這樣才能緊貼教程。如果你是 Windows 系統，且不想購買阿里云的服務器進行線上部署，又想體驗完整的教程，那么推薦你使用 Virtual Box + Vagrant + GitBash。至于 Vagrant 的安裝教程，可以參考我以前的一篇博文：http://www.lxweimin.com/p/3c3f35436c05

注：GitBash 是 Git 的附屬工具之一，你可以百度搜索 Git，下載安裝即可使用。

綜上，必須安裝的只有 Nodejs 與 MySQL，安裝過程相對來說很簡單，這里就不再給出安裝教程了，安裝過程中如果遇到問題請積極問度娘。未來出了視頻教程，會在視頻中演示如何安裝。另，在教程的最后，也會給予大家一個配好了所有環境并部署了代碼的 Linux 虛擬機，若有需要自行下載即可。

5. 開發進度安排

既然說了零基礎10天開發，那么就得有一個恰當的開發計劃。完整的最小開發團隊里，需要有產品經理、UI設計師、前端開發工程師、后端開發工程師，而本教程里，我們將一個人頂四個人用，并且為了教學的方便，所以前后端串行開發，先進行后端開發，后進行前端開發（實際開發中，前后端可并行開發）。

“十日”開發計劃

十日概覽

• 產品經理需要進行原型設計，并提供給團隊需求文檔，給 UI 設計師原型稿。
• UI 設計師需要進行 UI 設計，提供前端工程師標注圖和素材。
• 后端開發工程師需要進行后端開發與線上部署，提供給前端工程師接口文檔。
• 前端開發工程師需要進行前端開發與產品上架。

看看，我們10天里，將會1個人去做一個完整團隊里4個的工作，開發一個完整的 APP 并上架，是不是很有成就感呢？

注：在實際開發過程中，團隊里的 Soyeah 同學擔當了 UI 設計的工作，提供了本產品的 UI 設計、切圖與標注。

十日任務報告

十日資源報告

十日甘特圖

綜上，大體上分為這七個流程進行，前端需要一半的周期，后端需要30%。具體開發計劃如下：

1. 第0天：技術選型、環境配置
2. 第1天：需求分析、原型設計、UI設計
3. 第2天：接口設計與簡單的 demo
4. 第3天：登錄與注冊接口開發及其深度探討
5. 第4天：服務端的實現
6. 第5天：React Native 初體驗
7. 第6天：登錄注冊頁面開發（UI 實現、邏輯處理與接口對接）
8. 第7天：主頁開發（state 與 props 的使用）
9. 第8天：列表頁開發（ListView 的數據綁定與使用）
10. 第9天：編輯頁開發（圖片上傳與七牛云存儲）
11. 第10天：服務端部署與 App 上架

大家加油加油！