本課是在旅程繼續(xù)進(jìn)行之前的一些準(zhǔn)備工作产禾。我們要生成應(yīng)用潦闲，設(shè)置所有組件和需要用到的Cordova插件倡缠。完成本課之后我們應(yīng)該有一個(gè)萬事俱備的項(xiàng)目骨架哨免，可以接著進(jìn)行編碼工作。
開始新項(xiàng)目的第一準(zhǔn)則是確保使用的是最新版的Ionic和Cordova昙沦，如果最近沒有更新過的話可以運(yùn)行如下命令：
npm install -g ionic cordova
或者
sudo npm install -g ionic cordova
如果在安裝Ionic或者生產(chǎn)新項(xiàng)目的時(shí)候遇到任何問題的話琢唾，檢查下是否安裝了最新版的Node。安裝完之后盾饮，再次安裝ionic之前請(qǐng)運(yùn)行：
npm uninstall -g ionic npm cache clean
生成新應(yīng)用
本應(yīng)用將使用空白初始模板采桃，跟名字說的一樣，就是個(gè)空的Ionic項(xiàng)目丘损。但是會(huì)有一個(gè)內(nèi)置的頁面名為home普办，我們下節(jié)課中將用作列表顯示頁。
> 運(yùn)行如下命令生成新項(xiàng)目：
ionic start camperchat blank --v2
> 運(yùn)行如下命令將新生成的項(xiàng)目作為當(dāng)前目錄：
cd camperchat
現(xiàn)在可以在你中意的編輯器中打開這個(gè)項(xiàng)目了号俐。通過以下命令可以預(yù)覽創(chuàng)建的應(yīng)用：
ionic serve
看起來是這樣的：
創(chuàng)建需要的組件
這個(gè)應(yīng)用會(huì)有幾個(gè)頁面泌豆，我們需要用到登錄頁，主頁吏饿，關(guān)于頁踪危。主頁已經(jīng)自動(dòng)生成，我們只需要?jiǎng)?chuàng)建登錄頁和關(guān)于頁就可以了猪落。
> 運(yùn)行如下命令生成 Login 頁面：
ionic g page Login
> 運(yùn)行如下命令生成 About 頁面：
ionic g page About
創(chuàng)建需求的服務(wù)
跟標(biāo)簽頁一樣贞远，我們同時(shí)也需要去創(chuàng)建一些服務(wù)。我們將創(chuàng)建一個(gè)數(shù)據(jù)服務(wù)來保存和獲取信息數(shù)據(jù)笨忌，以及一些從Facebook API獲取的數(shù)據(jù)蓝仲。
> 運(yùn)行如下命令生成 Data 提供者：
ionic g provider Data
將頁面和服務(wù)添加到App Module
為了能夠在項(xiàng)目里面可以使用這些頁面和服務(wù)，我們需要將它們添加到app.module.ts文件里官疲。所有我們自己創(chuàng)建的頁面都需要添加到declarations數(shù)組和entryComponents數(shù)組里袱结，所有我們創(chuàng)建的數(shù)據(jù)提供者都需要添加到providers數(shù)組，其他自定義組件或者管道（pipe）只需要添加到declarations數(shù)組即可途凫。我們的數(shù)據(jù)模型只是一個(gè)簡單的類垢夹，我們需要在任何地方使用，所以不用在模組里面設(shè)置维费。
> 修改src/app/app.module.ts到以下：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { AboutPage } from '../pages/about/about';
import { Data } from '../providers/data';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
AboutPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
AboutPage
],
providers: [Data]
})
export class AppModule {}
添加需要的平臺(tái)
在給指定平臺(tái)制作應(yīng)用之前果元，你需要將它們添加到你的項(xiàng)目促王。
> 運(yùn)行以下命令添加iOS平臺(tái)：
ionic platform add ios
> 運(yùn)行以下命令添加Android平臺(tái)：
ionic platform add android
安裝PouchDB
由于我們會(huì)在項(xiàng)目中用到PouchDB，所以我們需要先安裝他而晒。跟安裝Ionic Native一樣蝇狼，你只需要簡單的運(yùn)行如下命令就可以了：
npm install pouchdb --save
我們也要給PouchDB安裝“typings”這樣TypeScript編譯器就不會(huì)抱怨了（因?yàn)樗恢繮ouchDB是什么）。
> 運(yùn)行如下命令按鈕PouchDB的types
npm install @types/pouchdb --save --save-exact
添加需要的Cordova插件
這個(gè)應(yīng)用將會(huì)用到不同的Cordova插件倡怎。記住迅耘，Cordova插件只能在真實(shí)設(shè)備上運(yùn)行。我將在添加他們的時(shí)候解釋监署。
> 運(yùn)行以下命令添加SQLite插件：
ionic plugin add cordova-sqlite-storage
這個(gè)插件讓你可以訪問本地存儲(chǔ)SQLite數(shù)據(jù)庫豹障。我們?cè)诖藨?yīng)用中添加他的原因是Ionic本地存儲(chǔ)服務(wù)可以使用插件提供的穩(wěn)定輸出存儲(chǔ)。
> 運(yùn)行以下命令添加App Browser插件：
ionic plugin add cordova-plugin-inappbrowser
這個(gè)插件讓我們可以啟動(dòng)外部網(wǎng)站焦匈。我們會(huì)用這個(gè)插件來給Facebook插件使用血公。添加Facebook插件本事實(shí)際上需要做更多的工作而不是運(yùn)行一個(gè)命令就夠了的，所以我們稍后在做這個(gè)缓熟。
> 運(yùn)行以下命令添加Status Bar插件：
ionic plugin add cordova-plugin-statusbar
我們給所有項(xiàng)目添加此插件用來在應(yīng)用中控制狀態(tài)欄（設(shè)備屏幕頂部的狀態(tài)條累魔，包括時(shí)間，電池信息等等）够滑。
> 運(yùn)行以下命令添加Splash Screen插件：
ionic plugin add cordova-plugin-splashscreen
此插件允許我們控制閃屏（打開應(yīng)用的時(shí)候的全屏畫面）垦写。
> 運(yùn)行以下命令添加Keyboard插件：
ionic plugin add ionic-plugin-keyboard
這個(gè)插件允許我們控制軟鍵盤。
> 運(yùn)行以下命令添加Whitelist插件：
ionic plugin add cordova-plugin-whitelist
所有應(yīng)用會(huì)用到這個(gè)插件彰触，他定義了應(yīng)用里可以加載什么樣的資源梯投。沒有他的話，你嘗試加載的資源都會(huì)不成功况毅。
添加了這個(gè)插件后分蓖，你也需要到index.html中定一個(gè)一個(gè)“Content Security Policy”。我們將添加一個(gè)非常寬松的策略實(shí)際上允許我們加載任何資源尔许∶春祝基于你的應(yīng)用，你可以提供一個(gè)更嚴(yán)格的策略味廊，但是對(duì)于開發(fā)而言開放性策略就可以了蒸甜。
> 修改 src/index.html文件，添加一下meta標(biāo)簽：
<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' *">
> 運(yùn)行以下命令添加Crosswalk插件：
ionic plugin add cordova-plugin-crosswalk-webview
這個(gè)另一個(gè)每個(gè)應(yīng)用都要添加的插件余佛，但是你也可以先不添加柠新。添加了這個(gè)插件后，在你編譯Android的時(shí)候?qū)?huì)使用“Crosswalk”辉巡。Android有很多問題恨憎，特別是老設(shè)備，因?yàn)橛刑嗖煌膱F(tuán)建版本红氯，不同的版本有不同的瀏覽器（記住框咙，鑒于我們是制作HTML5應(yīng)用，他實(shí)際上就是一個(gè)搭載的瀏覽器用來運(yùn)行我們的應(yīng)用）痢甘。Crosswalk做的是將一個(gè)現(xiàn)代的瀏覽器打包到應(yīng)用中喇嘱，這樣一來應(yīng)用無論是運(yùn)行在什么設(shè)備上，都會(huì)使用相同的瀏覽器來運(yùn)行塞栅，并且Crosswalk瀏覽器可以很好改善執(zhí)行效率者铜。
唯一的不足之處就是你的應(yīng)用尺寸明顯的變大了很多》乓總體上作烟，我覺得這很值得，我也建議你使用他砾医，如果你接受不了的話拿撩，也可以不用。更多關(guān)于Crosswalk Project的信息如蚜，請(qǐng)參考網(wǎng)站：https://crosswalk-project.org/
設(shè)置圖片
制作此應(yīng)用的時(shí)候压恒，會(huì)用到一些圖片。你下載的包里面已經(jīng)包含了這些圖片错邦，但是你需要去生成的項(xiàng)目里面設(shè)置好他們探赫。
> 將下載包 src/assets文件夾下面的images文件夾復(fù)制到應(yīng)用里的 src/assets下面
總結(jié)
就這樣！我們?cè)O(shè)置好了撬呢，準(zhǔn)備好繼續(xù)前幾伦吠，現(xiàn)在我們開始進(jìn)入到有趣的部分了。
