第二章 ionic 开发环境 工具和工作流程介绍

本章节，我们将会学到运行一个Inoic项目需要哪些技能。你将会安装基础的构建模块，学习如何使用Ionic命令行工具(cli)初始化一个项目，学习如何添加不同的平台和插件及如何在本地浏览器，仿真器和真实的设备上进行测试。
```    

##安装必备工具:Node.js和Git

Ionic使用功能强大的模块管理工具Node.js,Node.js 是一个Javascript基础平台，通过它可以很容易的进行web应用的构建。由于Node.js的无处不在和其包管理特性，使用ionic的安装和部署非常简单。

##安装Node.js

Node.js通过下载安装器安装在windows上或到[这里](http://nodejs.org/down-load/)下载针对于OS X的安装程序。在OS X上也可以通过Homebrew进行安装。另外，你可以执行下面命令进行安装。

```javascript
$ brew install node 

安装完后，你可以打一个命令行，输入下面命令进行测试：

$ node

它会打开一个控制台。它就像是浏览器中的javascript控制台一样。你可以在这个控制台中编写合法的javascript代码。如：

> console.info('Hello World');
Hello World
undefined

按两次CTRL+C就可以退出Node.js控制台

##安装Git

NPM是Node.js的依赖管理，bower是browser的依赖管理。由于ionic是基于html5的移动混合应用开发工具和服务套件。bower只是安装和依赖管理。有一些bower模块需要Git,因此在开始之前你必须要先安装Git.

可以在 git-scm.com/downloads下载各个平台的Git安装程序。

一旦你安装了Git,打开终端，输入：

$ git version
git version 2.3.2 (Apple Git-55)

##安装Installing Ionic
现在你已经安装了Node.js和Git,安装Ionic就变的非常容易了。打开终端，输入：

$ npm install -g cordova ionic

这行命令就是让NPM安装cordova和ionic包，和他们所依赖的模块。加上-g这个选项，意味着NPM在全局中安装它他们，因此你就可以在所有项目中使用它们。

一旦NPM选择完，就会输出一个安装汇总。下面你可以验证安装。

##Cordova

下面花一些时间去讲解Cordova是什么，是非常值得的，因为他是Ionic为什么如此强大的最重要的原因。

Cordova 是一个社区驱动的开源项目，它是HTML和手机原生功能之间的桥梁。它使开发者能够构建一个html应用，这个应用可以直接使用手机原生的功能，如何像机，地理位置，设备的方向等。另外，Cordova目的是创建一些跨平台的接口，使你创建html应用而不用关心是iphone应用还是在android应用。

你可以在这里了解决更多关于Cordova的知识。

##Ionic命令行 （CLI)

为了使你能更方便的使用Ionic，Ionic提供了命令行接口。

• 创建一个新的工程
• 添加平台
• 添加插件
• 编译和在仿真器中运行你的工程
• 在设备上运行你的
• 打包应用和发布

##创建一个新的工程
让我们创建一个新的应用。打开终端，定位到你想把本书涉及到的代码存放的位置。在这目录下面输入下面的创建应用的命令。

$ ionic start trendicity tabs

这个ionic start命令可以让你指定一个模版用来初始化Ionic应用的结构。上面这个例子，你指定了tabs模版。开箱即用的，Ionic支持空白模版（不指定模版，默认就是空白的），tabs和 sidemenu。另外,如何你想提供一个自定义模版，你可以指定一个CodePen URL.

一旦上面那个命令执行完，你就已经配置好了一个Ionic工程，就会看到下面信息：

Your Ionic project is read to go ! Some quick tips:

 * cd into your project: $ cd trendicity

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: http://ionicframework.com/docs


New! Add push notifications to your Ionic app with Ionic Push (alpha)!
https://apps.ionic.io/signup
+---------------------------------------------------------+
+ New Ionic Updates for August 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+

同时你会看到一些快捷提示。你可以随时查看这些提示，通过下面这个命令：

$ ionic --help

这个将会输出一个Ionic命令行支持的指今列表

看一下刚才那个命令为你创建了哪些东西

$ cd trendicity
$ ls -F
total 40
-rw-r--r--  1 Aaron  staff   118  8 30 16:03 bower.json
-rw-r--r--  1 Aaron  staff   864  8 30 16:04 config.xml
-rw-r--r--  1 Aaron  staff  1388  8 30 16:03 gulpfile.js
drwxr-xr-x  4 Aaron  staff   136  8 30 16:03 hooks/
-rw-r--r--  1 Aaron  staff    42  8 30 16:04 ionic.project
-rw-r--r--  1 Aaron  staff   581  8 30 16:04 package.json
drwxr-xr-x  4 Aaron  staff   136  8 30 16:04 platforms/
drwxr-xr-x  9 Aaron  staff   306  8 30 16:04 plugins/
drwxr-xr-x  3 Aaron  staff   102  8 30 16:03 scss/
drwxr-xr-x  8 Aaron  staff   272  8 30 16:04 www/

bower.json:管理你的Bower依赖

gulpfile.js:Gulp是一个构建工具。更多的信息可参在这里找到。这个文件管理构建的流程。

ionic.project:ionic工程配置文件。

plugins/:Ionic插件文件放在此目录下。稍后你会了解更多关于这插件的信息。

www/:你的应用文件放在此目录下。

config.xml:Cordova的配置文件。

hooks/:Cordova的hooks 这里面有一个说明文件，我可以根据此文件来创建一系列的目录，这些目录里面可以创建一些脚本，这些脚本分别在ionic运行的不同时期进行执行。

package.json :管理Node.js依赖的文件

scss/: SASS 文件。

好，现在，我们把重点放在 www 目录。

localhost:trendicity Aaron$ cd www
localhost:www Aaron$ ls -F
total 8
drwxr-xr-x  3 Aaron  staff  102  8 30 16:04 css/
drwxr-xr-x  3 Aaron  staff  102  8 30 16:04 img/
-rw-r--r--  1 Aaron  staff  858  8 30 16:04 index.html
drwxr-xr-x  4 Aaron  staff  136  8 30 16:04 js/
drwxr-xr-x  3 Aaron  staff  102  8 30 16:03 lib/
drwxr-xr-x  8 Aaron  staff  272  8 30 16:04 templates/

css/:你的应用的CSS文件
img/:你的应用中用到的图片
index.html:你的应用的入口
js/:你的javascript代码
lib/:第三方库和Ionic库
templates/:你的应用的HTML模版

在js引以为文件夹中会发现有三个文件：

localhost:js Aaron$ ls -F
total 16
-rw-r--r--  1 Aaron  staff  1916  8 30 16:04 app.js
-rw-r--r--  1 Aaron  staff  1544  8 30 16:04 controllers.js
-rw-r--r--  1 Aaron  staff  1542  8 30 16:04 services.js

若没有发现services.js文件，你可以自己创建一个。

app.js:你的应用的入口，它包括路由信息。
controllers.js:包括例子应用的所有的控制器。
services.js:应用的可重用的服务。

值得注意的是，这是一个简化的项目结构，随着你的项目的增长，你需要去完善它。

##在浏览器上部署

刚开始时，与通过仿真器测试相比，在浏览器中进行测试是最快的方式。它是可以在浏览器中进行测试的，因为Ionic是一个基于html5的平台。另外，Ionic现有的内置功能让其变得更加简单。在你的命令行中的工程目录下，输入以下命令。

$ ionic serve
******************************************************
 Upgrade warning - for the CLI to run correctly,      
 it is highly suggested to upgrade the following:     

 Please update your Node runtime to version  >=0.12.x

******************************************************
Running live reload server: http://192.168.1.7:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Running dev server: http://192.168.1.7:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

上面的命令执行完成后，将会打开一个浏览器窗口并且访问你的应用。恭喜你，你的应用已经成功运行！

如何浏览器窗口没有自动打开， Ionic通知你在浏览器中打开这个应用。你上面你会看到

http://192.168.1.7:35729

这个命令将会监视你的工程文件的变化，因此当你改变工程中的文件时，视图也会自动刷新。你可以通过修改工程的一个文件并注意着浏览器的重新加载来进行测试。打开./www/templates/tab-dash.html 文件并且修改：

<h1>Dash</Dash>

修改为：

<h1>Trendicity</h1>

保存后，浏览器会立即发生刷新，你就会看到刚才修改文件后的变化。

##代理

当你的应用需要访问不允许跨域访问的资源的APIs时，在浏览器测试时，你将会遇到问题。幸运的是Ionic团队已经 通过代理请求的方式来解决上面的问题。

在你应用的根目录下打开ionic.project。

cat ionic.project 
{
  "name": "trendicity",
  "app_id": ""
}

添加代理数据到你的文件中：

cat ionic.project 
{
  "name": "trendicity",
  "app_id": "",
  "proxies": {
    "path":"/proxied/resources",
    "proxyUrl":'https://api.somesite.com/resources'
  }
  
}

在这个例子中的path是你本地想被代理的路径，这个proxyUrl是真正的你想被请求的API.在你的应用中，你现在可以请求http://localhost:8100/proxied/resources其实是访问的https://api.somesite.com/resources.

注意，代理的配置仅在浏览器中进行测试时需要用到。在设备上和仿真器中不需要用这个配置文件。

##添加平台

当你发布之前，或者在你构建一个应用时，你需要决定你想将此应用部署到哪些平台上。然后告诉给Ionic,通过CLI,安装构建成这此平台的应用时所必须的先决条件。让我们来添加IOS平台。

$ ionic platform ios

它将会安装一些必须的依赖并准备将你的工程构建成IOS平台的应用。注意，如何你不是在Apple电脑上，你是不能够添加iOS平台的。

或，你可以添加Android平台：

$ ionic platform android

Android平台与iOS相比，需要安装一些额外的东西 当你都是在Apple电脑上执行上面的命令时。在稍后的章节中你会了解到更多关于Android安装的信息。

如何你决定选择在Android平台上进行测试，建议你不要使用Android默认的仿真器。因为它太慢了。你可以安装使用Geny-mogion仿真器，它比默认访真器要快一些。你可以在这里了解更多的内容。

##构建应用

用Ionic构建应用是容易的。构建一个iOS平台的应用，通过如下命令：

$ ionic build ios

一旦构建成功，你会看到输出下面信息：

** BUILD SUCCEEDED

##编译和在仿真器中运行你的工程
Ionic支持直接通过CLI加载设备仿真器。加载你的编译文件到iOS仿真器(确保你已经安装了ios-sim)。

$ ionic emulate ios

如何你之前没有进行编译，Ionic会创建iOS平台的编译文件。执行这个命令之后，iOS 仿真器将会加载，并且你的应用将会在其中加载。

像是在浏览器中测试一样，你可以修改你的应用文件时，让仿真器中的应用自动刷新。执行下面的命令，等待仿真器加载你的应用，然后修改应用的文件进行观察仿真器中应用的变化。

$ ionic emulate ios -livereload

第一次修改工程，都会花大量的时间去编译和加载到仿真器。

##在设备上运行

仿真器是非常强大的，但是在发布之前，你仍然想在真实的设备上测试你的应用。

###iOS
在iOS设备上部署，需要有一个iOS开发帐户，在Apple设备上运行XCode。iOS开发者账户是收费的。你可以在developer.apple.com/programs/了解更多。

你可以在这里下载Xcode:(developer.apple.com/xcode/downloads/)[https://developer.apple.com/xcode/downloads/]

一旦你正确安装了XCode和拥有你自己的开发者账户，在XCode中打开你工程的/platform/ios文件夹，然后进行测试。

###Android

到目前为止，我们主要集中在构建、模拟和运行iOS应用程序。原因是，如果你在Apple电脑上进行开发，启动和运行都是非常容易的，但是它避免了使用Ionic进遇到的最大的一件事情。你编写一次应用，可以编译成两个平台的版本。让我们花一点时间看一下在Android平台上启动和运行时的一些选项。

###Android SDK安装

第一件事就是下载和安装Android SDK.可以在这里下载：developer.android.com/sdk/。可以在这里找到安装步骤：developer.android.com/sdk/installing/。

###Ionic box

很多人发现安装Android SDK是比较困难的过程。由于这个原因，Ionic小组已经创建了一个Vagrant box来帮助你简化这个过程。如何你对Vagrant不是很熟悉的话，它是一个创建虚拟机的平台，主要是创建开发环境。你可以在这里了解更多:www.vagrantup.com。你可以使用不同的虚拟机运行器，但是最常用的是VirtualBox。

为了使用Vagrant box,你首先安装VirtualBox,或者别的被Vagrant支付的虚拟机运行器。VirtualBox是免费的，你可以在这里进行下载:www.virtualbox.org/wiki/Downloads。一旦安装好了VirtualBox，下载并安装Vagrant:www.vagrantup.com/downloads.html。

一旦你安装好了VirtualBox和Vagrant，进入到你的工程目录下面，克隆Ionic box资源，并且启动它。

$ cd ..
$ git clone https://github.com/driftyco/ionic-box
$ cd ionic-box
$ vagrant up

你第一次执行时，可能要花费几分钟，因为Vagrant需要下载一个虚拟机镜像文件。在你在Ionic box上编译你的应用前，你需要将你的项目代码目录与虚拟机共享。在你的编译器中打开ionic-box/Vagrantfile。找到下面这行：

# config.vm.synced_folder "../data", "/vagrant_data"

修改为：

config.vm.synced_folder "../trendicity", "/home/vagrant/trendicity"

保存这个文件并重新加载你的Vagrant实例：

$vagrant reload

现在让我们为vagrant实例添加SSH,并针对Android进行构建。

$ vagrant ssh
vagrant@ionic-android:~$ cd trendicity/
vagrant@ionic-android:~/trendicity$ ionic platform android

现在将你的Android设备通过USB连接到你的电脑。你可以通过下面的命令确认你的设备已经连接上。

vagrant@ionic-android:~/trendicity$ sudo /home/vagrant/android-sdk-linux/platform-tools/adb devices

确认你的设备已经连接上，然后通过下面的命令在你设备上启动应用：

vagrant@ionic-android:~/trendicity$ ionic run android

当你看到下面的信息，就证明上面的命令执行成功了：

Installing app on device ...
Lanuching application ...
LAUNCH SUCCESS  

恭喜！你已经成功在android设备上运行了你的应用。

上面看上去在你的设备上运行应用程序是很多麻烦，同时它证明了android sdk安装是多么的困难，以及ionic团队如何使它些困难变的简单易用。

##添加插件

Ionic和Cordova是非常强大的工具，但是为了提高性能和最小化你的就应用，你可能不希望默认安装所有东西。你可能添加别的功能通过添加插件的方式。让我们给将要使用地理定位功能的应用添加地理位置插件。

在你的项目根目录，输入以下命令。注意，你可以在本地命令行中执行下面命令，也可以在ionic box 的命令行中输入以下命令：

$ ionic plugin add org.apache.cordova.geolocation

Ionic将会安装一些必须的组件，使你的应用程序可以使用地理定位功能。稍后，当你深入到本书例子 Trendicity应用 的细节时，你会看到如何使用这个地理定位插件。

你也要以自动在这里plugins.cordova.io/了解一下别的插件，以备将来更好的使用到自己的项目中。

##最佳源代码控制实践

因为Ionic和Cordova安装的文件对不同的平台是不一样的，这些文件是没有必要加入版本控制的。让我们看一下，哪些东西要存放到我们的版本控制中，还有哪些不用存放。

###Git和模版化应用

如何你使用Git(本书的作者们强烈推荐使用Git),和如何通过Ionic命令行创建你的应用，你可能注意到它创建了一个.gitignore文件，它里面包含一些你不需要版本控制的文件引用。你可以选择跳过本章剩余的部分而直接查看这个文件.gitignore，下面是它的内容：

$ cat .gitignore 
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore

node_modules/
platforms/
plugins/

###根目录下面的文件

根目录下所有的文件，你就都应该加入版本控制。它们包含了项目的配置信息，没有它们，你的项目将无法正确编译。

###包含的目录
./hooks,./scss,和最重要的./www 都应该加入到你的版本控制。

###不需要包含的目录

./node_modules,./platforms, 和 ./plugins 都不需要加入版本控制。他们包含了许多二进制文件和一些额外的编译时生成的文件，这些文件在部署时都会重新生成。也都会在你在新的机器上检出代码时自动生成。

##总结

你现在准备开始创建你的应用。你拥有了创建一个应用需要的所有工具：你可以通过浏览器或者仿真器进行测试，你可以通过添加插件的方式去访问一些高级的功能，并可以让你的应用在真实的设备上进行运行。