×

《十日谈》第0天:技术选型、环境配置

96
Airing
2017.07.25 15:26* 字数 1861

第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.jianshu.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 上架

大家加油加油!

安灵编程录
Web note ad 1