第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(阿里云平台)
所以必须安装的环境有:
- Nodejs:直接去官网安装即可。
- 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%。具体开发计划如下:
- 第0天:技术选型、环境配置
- 第1天:需求分析、原型设计、UI设计
- 第2天:接口设计与简单的 demo
- 第3天:登录与注册接口开发及其深度探讨
- 第4天:服务端的实现
- 第5天:React Native 初体验
- 第6天:登录注册页面开发(UI 实现、逻辑处理与接口对接)
- 第7天:主页开发(state 与 props 的使用)
- 第8天:列表页开发(ListView 的数据绑定与使用)
- 第9天:编辑页开发(图片上传与七牛云存储)
- 第10天:服务端部署与 App 上架
大家加油加油!