实战部分明天开始，加油啊！地毯式实战，保证知识点可以融会贯通。
时间: 2018年04月11日
用时: 2 小时
1. 基础环境的准备
NVM（node version manager）: node的版本管理。安装node时，首先安装NVM，然后再安装对应node，相关的命令如下：
> curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 安装NVM
> nvm --version 查看安装的版本
> nvm install v8.0.0 安装node，也可以安装node其他版本
> node --version 查看node版本号
> node list 查看已安装的所有的node版本
> node 进入node环境 ; control + 两次 C 退出node环境
> nvm use 6.4.0 可以选择已安装的node的其中一个版本
基础环境准备完成，拓展的node知识可以参考GitHub的项目。
2. 什么是webapp？
Webapp到底是什么？webapp是近年来比较流行的词。
相信大家对于网站都很熟悉，我们每天都在浏览网页。网站技术从最早的静态网页发展到可交互的动态网页，在以前只能通过PC浏览器浏览网页，现在还可以使用手里浏览，甚至有的手机app内置了浏览器内核，通过手机App也可以访问网页。
说到手机，大家每天用的微信称为NativeApp。NativeApp是一种基于手机操作系统的IOS，Android来开发的应用程序。NativeApp一般在下载后，在没有网络的情况下，也可以在手机上独立的运行，计算，比如计算机、音视频播放器，日历、单机版的游戏等等。NativeApp有独立的安装包。相对于网站，网页并没有安装包，通过浏览器并输入网址，这个过程是浏览器发了一个请求给服务器并从府区前获得网址对应的页面，网页绝对依赖于网络。
网页就是HTML页面，传统的HTML的页面只能在PC浏览器上运行，在手机上运行显示会出现格式问题。但是，现在CSS技术的发展足以保证HTML页面无论是在PC浏览器还是会手机浏览器上都能正常的显示，加上手机浏览器的手势操作，在手机上操作网页变得非常的简单。
网页在手机上NativeApp一样显示和操作，从用户的角度网页和NativeApp页面似乎没有太多的差异，更像一个APP。但是光从网页显示形态和手势操作两点并不能增强网页的能力。如今，浏览器技术的发展非常快，通过浏览器提供的能力，网页还能获得设备操作系统很多权限，比如：文件系统权限，摄像头访问权限，音频访问权限，传感器设备权限等等。有了这些操作权限，网页才能像NativeApp一样发挥更多的作用，所以我们把这种Web技术的应用成为WebApp。
下面比较一下NativeApp和WebApp之间的特点。
1- NativeApp 和WebApp都能在手机上完美显示，但是NativeApp使用操作系统提供的UI框架构建页面，WebApp使用HTML 和CSS技术来构建页面。
2-NativeApp的运行依赖的是设备操作系统，WebApp依赖浏览器运行。
3-NativeAPP有独立的安装包，WebAPP的页面需要从服务器获取并在浏览器运行。
4-NativeAPP在无网络的情况下也可以单机来运行，WebAPP没有网络页面都打不开。
5-NativeAPP不一定需要Server的支持，WebAPP一定需要一个Server来提供页面和数据。
从开发WebAPP的角度，WebAPP包含两个部分，Client端和Server端。Client端提供用户可见的部分——HTML页面，Server端提供用户不可见的部分——数据。在技术圈常听到的前端和后端分离的概念，其实指的是 Client 端和 Server 端的分离，但不管怎么分离，Client 端一定需要一个 Server 来提供页面，还要有一个 Server 端为Client 端来提供数据。所以，Client端 和Server 端分离只是把提供数据的 Server 分离出来而已。
Client 端需要一个 Server 来提供页面这种行为，还可以利用其它的一些技术，比如：利用Nginx直接返回 HTML 文件，Apache 也可以做到，部署到 CDN 上也可以做到。这三种技术都比自己运行 Server 页面要更快。但是弊端就是不够灵活，需要人工手动更新。一般各个公司的主页为了加载更快都采用了CDN技术。
前后端分离并不是唯一的技术选择，在一些中小型项目前后端还是可以一体的，怎么进行技术选型完全需要看项目具体的情况而定。
当你想独自开发一款WebAPP，不管采用哪种技术，所有事情都是你自己干。那开发一个WebAPP都需要干些什么事情呢？
1- 处理路由的能力。一个网站都会提供多个地址的访问的能力，比如如 https://xinshengdaxue.com 可以访问新生大学的主页，https://web.xinshengdaxue.com/home/lessons 可以访问所有课程页面。一个地址代表一个访问路径，一般称为路由，WebAPP 必须具备分析不同路由的能力。
2- 构建页面的能力。WebAPP 提供页面时是最基本的能力。构建HTML 就是开发中最重要的工作，也是最烦重的工作。正因为繁重，在技术上会采用前后端分离的开发模式 ，提供HTML 页面的 Client 端由前端工程师完成，提供数据的 Server 端由后端服务端工程师完成。
3- 操作浏览器的能力。浏览器提供了很多功能，常见的有 Cookie 和 Storage 。 Cookie 和 Storage 都是浏览器的存储技术，利用这些技术可以在浏览器端缓存一些必要的信息。这些技术都可以通过查阅 Web API 文档来获得。
4- 提供页面和数据能力。如果前后端一体化开发时，WebAPP 的 Server 端必须提供页面和数据，以供 Client 端可以构建丰富的页面，以及存储用户操作带来的变化数据。
5- 持久化数据能力。Server 端存储数据是基本能力，一般采用第三方数据库来完成。常用的数据库有 mysql，sqlite，mongdb等。开发中小型项目，选择一个最熟悉的数据库即可。
如果想要学习开发WebAPP，以上的 5 点将是学习的主要的方向，至于采取什么形式来构建 WebAPP 就无所谓了，选择一门感兴趣的技术即可。
3. 基于Express 来构建 WebApp
安装Express，全局安装
npm install -g express-generator@4
创建并进入一个文件夹
mkdir first-app cd first-app
在当前目录执行express来创建一个基于Express的WebApp
express --view=ejs
安装first-app的依赖包，安装所有 package.json 中的依赖包。
npm install
运行 first-app
$ DEBUG=first-app:* npm start | or npm start | or node ./bin/www
预览结果
浏览器打开 localhost:3000
退出 first-app
ctrol + C 退出即可。
4. 配置执行项目的脚本
当修改了first-app 的代码后，总是需要先停止项目然后再重新启动 first-app
在终端输入快捷组合键入 ctrol + c 停止运行 first - app 服务，在执行运行指令运行服务。
> 输入 Ctrl + c
> $ DEBUG = first-app:* npm start
以上的这种方式是正常的做法，但是很麻烦。我们可以利用 supervisor 来监听文件被修改后自动重新启动。
全局配置与卸载 supervisor
npm install -g supervisor -- 安装
npm uninstall --global supervisor -- 卸载
安装supervisor模块，一般采用全局安装，这样可以保证在终端的任何地方都可以直接使用supervisor。
项目中安装 supervisor
$ cd first-app
$ supervisor DEBUG= first-app:* node ./bin/www
相比于全局安装，我更建议你在项目中安装 supervisor，有两个原因：
不同的项目可以有不同版本的supervisor。当你下载了一个很老的项目，可能它依赖更早的supervisor的版本，如果此时用了全局安装的supervisor 会有问题。
每个项目的依赖环境越独立，这个项目就更安全、执行更方便。
在项目中配置 supervisor 脚本
$ cd first-app
$ npm install -- save supervisor
通过npm install 安装 supervisor 时带上 -- save 参数，会把supervisor 配置到package.json 中。这时可以去 package.json 中检查dependencis中是否有了如下属性。
"supervisor": "^0.12.0"
然后在package.json 的script 字段中添加一个 auto-start 的脚本
"scripts": {
"start": "node ./bin/www",
"auto-start": "./node_modules/.bin/node-supervisor node ./bin/www"
},
以上执行成功之后，往后只要执行下面的指令就可以自动重启项目了。
npm run auto-start