本课是在旅程继续进行之前的一些准备工作。我们要生成应用，设置所有组件和需要用到的Cordova插件。完成本课之后我们应该有一个万事俱备的项目骨架，可以接着进行编码工作。
开始新项目的第一准则是确保使用的是最新版的Ionic和Cordova，如果最近没有更新过的话可以运行如下命令：

npm install -g ionic cordova

或者

sudo npm install -g ionic cordova

如果在安装Ionic或者生产新项目的时候遇到任何问题的话，检查下是否安装了最新版的Node。安装完之后，再次安装ionic之前请运行：

npm uninstall -g ionic npm cache clean

生成新应用

本应用将使用空白初始模板，跟名字说的一样，就是个空的Ionic项目。但是会有一个内置的页面名为home，我们下节课中将用作列表显示页。
> 运行如下命令生成新项目：

ionic start campermate blank --v2

> 运行如下命令将新生成的项目作为当前目录：

cd campermate

现在可以在你中意的编辑器中打开这个项目了。通过以下命令可以预览创建的应用：

ionic serve

看起来是这样的：

3.2.1.jpg

创建需要的组件

我们来创建本应用的一些页面，我们需要重用到自动生成的home页面来创建我们的标签页布局（允许页面之间来回切换），但是我们还是需要添加一些其他的页面：location，个人细节以及营地细节三个标签页。
> 运行如下命令生成 Location 页面：

ionic g page Location

> 运行如下命令生成 My Details 页面：

ionic g page MyDetails

> 运行如下命令生成 Camp Details 页面：

ionic g page CampDetails

创建需求的服务

跟标签页一样，我们同时也需要去创建一些服务。我们将创建一个数据服务来保存和获取数据，一个Google Map服务用来负责整合Google Maps，一个Connectivity服务用来检查用户是否在线。
> 运行如下命令生成 Data 提供者：

ionic g provider Data

> 运行如下命令生成 Google Maps 提供者：

ionic g provider GoogleMaps

> 运行如下命令生成 Connectivity 提供者：

ionic g provider Connectivity

往App Module里面添加页面与服务

为了能够在项目里面可以使用这些页面和服务，我们需要将它们添加到app.module.ts文件里。所有我们自己创建的页面都需要添加到declarations数组和entryComponents数组里，所有我们创建的数据提供者都需要添加到providers数组，其他自定义组件或者管道（pipe）只需要添加到declarations数组即可。我们的数据模型只是一个简单的类，我们需要在任何地方使用，所以不用在模组里面设置。
> 修改src/app/app.module.ts到以下：

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Storage } from '@ionic/storage';
import { HomePage } from '../pages/home/home';
import { LocationPage } from '../pages/location/location';
import { MyDetailsPage } from '../pages/my-details/my-details';
import { CampDetailsPage } from '../pages/camp-details/camp-details';
import { GoogleMaps } from '../providers/google-maps';
import { Connectivity } from '../providers/connectivity';
import { Data } from '../providers/data';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        LocationPage,
        MyDetailsPage,
        CampDetailsPage
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        LocationPage,
        MyDetailsPage,
        CampDetailsPage
    ],
    providers: [Storage, Data, GoogleMaps, Connectivity]
})
export class AppModule {}

注意，我们除了自己创建的Data提供者之外，我们还加入了一个Storage。Storage是Ionic提供的，可以通过它保存和获取数据 -- 我们后续会用到。

添加需要的平台

在给指定平台制作应用之前，你需要将它们添加到你的项目。
> 运行以下命令添加iOS平台：

ionic platform add ios

> 运行以下命令添加Android平台：

ionic platform add android

添加需要的Cordova插件

这个应用将会用到一些不同的Cordova插件。记住，Cordova插件只能在真机上使用。我会在添加他们的时候解释他们的用途。
> 运行以下命令添加Geolocation插件：

ionic plugin add cordova-plugin-geolocation

Geolocation插件允许我们获取用户当前位置，同时他也提供了长时间追踪用户位置的能力。

> 运行以下命令添加Network插件：

ionic plugin add cordova-plugin-network-information

这个插件可以让我们知道用户的当前网络信息，例如当前的连接类型。这让我们可以更精确的指导用户当前是否有可以激活的互联网连接。
> 运行以下命令添加SQLite插件：

ionic plugin add cordova-sqlite-storage

这个插件让你可以访问本地存储SQLite数据库。我们在此应用中添加他的原因是Ionic本地存储服务可以使用插件提供的稳定输出存储。

> 运行以下命令添加App Browser插件：

ionic plugin add cordova-plugin-inappbrowser

这个插件让我们可以通过他提供的webview来从外部网站。
> 运行以下命令添加Status Bar插件：

ionic plugin add cordova-plugin-statusbar

我们给所有项目添加此插件用来在应用中控制状态栏（设备屏幕顶部的状态条，包括时间，电池信息等等）。
> 运行以下命令添加Splash Screen插件：

ionic plugin add cordova-plugin-splashscreen

此插件允许我们控制闪屏（打开应用的时候的全屏画面）。

> 运行以下命令添加Whitelist插件：

ionic plugin add cordova-plugin-whitelist

所有应用会用到这个插件，他定义了应用里可以加载什么样的资源。没有他的话，你尝试加载的资源都会不成功。
添加了这个插件后，你也需要到index.html中定一个一个“Content Security Policy”。我们将添加一个非常宽松的策略实际上允许我们加载任何资源。基于你的应用，你可以提供一个更严格的策略，但是对于开发而言开放性策略就可以了。
> 修改 src/index.html文件，添加一下meta标签：

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:;
img-src * data:; default-src gap://ready file://* *; script-src 'self'
'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">

> 运行以下命令添加Crosswalk插件：

ionic plugin add cordova-plugin-crosswalk-webview

这个另一个每个应用都要添加的插件，但是你也可以先不添加。添加了这个插件后，在你编译Android的时候将会使用“Crosswalk”。Android有很多问题，特别是老设备，因为有太多不同的团建版本，不同的版本有不同的浏览器（记住，鉴于我们是制作HTML5应用，他实际上就是一个搭载的浏览器用来运行我们的应用）。Crosswalk做的是将一个现代的浏览器打包到应用中，这样一来应用无论是运行在什么设备上，都会使用相同的浏览器来运行，并且Crosswalk浏览器可以很好改善执行效率。
唯一的不足之处就是你的应用尺寸明显的变大了很多。总体上，我觉得这很值得，我也建议你使用他，如果你接受不了的话，也可以不用。更多关于Crosswalk Project的信息，请参考网站：https://crosswalk-project.org/

设置图片

制作此应用的时候，会用到一些图片。你下载的包里面已经包含了这些图片，但是你需要去生成的项目里面设置好他们。
> 将下载包 src/assets文件夹下面的images文件夹复制到应用里的 src/assets下面

总结

就这样！我们设置好了，准备好继续前几，现在我们开始进入到有趣的部分了。