本課是在旅程繼續(xù)進行之前的一些準備工作知允。我們要生成應(yīng)用练湿，設(shè)置所有組件和需要用到的Cordova插件番枚。完成本課之后我們應(yīng)該有一個萬事俱備的項目骨架，可以接著進行編碼工作村砂。
開始新項目的第一準則是確保使用的是最新版的Ionic和Cordova烂斋，如果最近沒有更新過的話可以運行如下命令：

npm install -g ionic cordova

或者

sudo npm install -g ionic cordova

如果在安裝Ionic或者生產(chǎn)新項目的時候遇到任何問題的話，檢查下是否安裝了最新版的Node础废。安裝完之后汛骂，再次安裝ionic之前請運行：

npm uninstall -g ionic npm cache clean

生成新應(yīng)用

本應(yīng)用將使用空白初始模板，跟名字說的一樣色迂，就是個空的Ionic項目香缺。但是會有一個內(nèi)置的頁面名為home，我們下節(jié)課中將用作列表顯示頁歇僧。
> 運行如下命令生成新項目：

ionic start snapaday blank --v2

> 運行如下命令將新生成的項目作為當前目錄：

cd snapaday

現(xiàn)在可以在你中意的編輯器中打開這個項目了图张。通過以下命令可以預(yù)覽創(chuàng)建的應(yīng)用：

ionic serve

看起來是這樣的：

空白應(yīng)用

創(chuàng)建需要的組件

應(yīng)用的架構(gòu)很簡單锋拖，我們會有兩個頁面：主頁含有照片和一個展示頁。我們已經(jīng)有了一個home組件用作列表頁祸轮，所以我們只要創(chuàng)建一個Slideshow頁面就可以了兽埃。
> 運行如下命令生成 Slideshow 頁面：

ionic g page Slideshow

創(chuàng)建需求的服務(wù)

跟我們的兩個頁面一樣，我們需要創(chuàng)建一個數(shù)據(jù)服務(wù)來存儲和獲取照片适袜，由于我們在應(yīng)用中有很多警告信息柄错，所以我們也需要創(chuàng)建一個服務(wù)來更方便的處理他們。
> 運行如下命令生成 Data 提供者：

ionic g provider Data

> 運行如下命令生成 Alert 提供者：

ionic g provider SimpleAlert

我們還需要創(chuàng)建自定義的Pipe來講拍照日期轉(zhuǎn)換成更友好的內(nèi)容苦酱，例如‘5 天前’售貌。
> 運行如下命令生成 DaysAgo 管道：

ionic g pipe DaysAgo

創(chuàng)建數(shù)據(jù)模型

我們將為我們的照片創(chuàng)建一個數(shù)據(jù)模型用于更簡單的創(chuàng)建和更新他們。不幸的是疫萤，沒有現(xiàn)有命令用來生成颂跨，所以我們要手動創(chuàng)建。
> 在 src 文件夾內(nèi)創(chuàng)建一個新的文件夾名為models：
> 在 models 文件夾內(nèi)創(chuàng)建一個新的文件名為 photo-model.ts：

在App Module中添加頁面和服務(wù)

為了能夠在項目里面可以使用這些頁面和服務(wù)扯饶，我們需要將它們添加到app.module.ts文件里恒削。所有我們自己創(chuàng)建的頁面都需要添加到declarations數(shù)組和entryComponents數(shù)組里，所有我們創(chuàng)建的數(shù)據(jù)提供者都需要添加到providers數(shù)組尾序，其他自定義組件或者管道（pipe）只需要添加到declarations數(shù)組即可钓丰。我們的數(shù)據(jù)模型只是一個簡單的類，我們需要在任何地方使用每币，所以不用在模組里面設(shè)置携丁。
> 修改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 { DaysAgo } from '../pipes/days-ago';
import { SlideshowPage } from '../pages/slideshow/slideshow';
import { SimpleAlert } from '../providers/simple-alert';
import { Data } from '../providers/data';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        SlideshowPage,
        DaysAgo
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        SlideshowPage
    ],
    providers: [Storage, Data, SimpleAlert]
})
export class AppModule {}

注意，我們除了自己創(chuàng)建的Data提供者之外脯爪，我們還加入了一個Storage则北。Storage是Ionic提供的，可以通過它保存和獲取數(shù)據(jù) -- 我們后續(xù)會用到痕慢。

添加需要的平臺

在給指定平臺制作應(yīng)用之前，你需要將它們添加到你的項目涌矢。
> 運行以下命令添加iOS平臺：

ionic platform add ios

> 運行以下命令添加Android平臺：

ionic platform add android

添加需要的Cordova插件

這個應(yīng)用將會用到不同的Cordova插件掖举。記住，Cordova插件只能在真實設(shè)備上運行娜庇。我將在添加他們的時候解釋塔次。
> 運行以下命令添加SQLite插件：

ionic plugin add cordova-sqlite-storage

這個插件讓你可以訪問本地存儲SQLite數(shù)據(jù)庫。我們在此應(yīng)用中添加他的原因是Ionic本地存儲服務(wù)可以使用插件提供的穩(wěn)定輸出存儲名秀。
> 運行以下命令添加本地通知插件：

ionic plugin add de.appplant.cordova.plugin.local-notification

這個插件允許我們?yōu)閼?yīng)用創(chuàng)建本地通知励负。和推送通知不一樣，本地通知是完全在用戶設(shè)備上處理的匕得，不需要外部服務(wù)继榆。
> 運行以下命令添加Camera插件：

ionic plugin add cordova-plugin-camera

這個插件給你訪問用戶相機和返回照片的能力巾表。提供相機訪問權(quán)限的同時，也允許你從用戶照片庫中獲取照片略吨。
> 運行以下命令添加File插件：

ionic plugin add cordova-plugin-file

File插件允許你和設(shè)備文件系統(tǒng)交互集币，我們將用來移動應(yīng)用來照的照片到其他地方。
> 運行以下命令添加Social Sharing插件：

ionic plugin add cordova-plugin-x-socialsharing

社交分享插件是一個通用插件翠忠，允許用戶分享到大量不同平臺（像是社交媒體鞠苟，郵件，SMS等等）或者是觸發(fā)特定平臺的分享秽之。
> 運行以下命令添加Status Bar插件：

ionic plugin add cordova-plugin-statusbar

我們給所有項目添加此插件用來在應(yīng)用中控制狀態(tài)欄（設(shè)備屏幕頂部的狀態(tài)條当娱，包括時間，電池信息等等）考榨。
> 運行以下命令添加Splash Screen插件：

ionic plugin add cordova-plugin-splashscreen

此插件允許我們控制閃屏（打開應(yīng)用的時候的全屏畫面）跨细。
> 運行以下命令添加Keyboard插件：

ionic plugin add ionic-plugin-keyboard

這個插件允許我們控制軟鍵盤。
> 運行以下命令添加Whitelist插件：

ionic plugin add cordova-plugin-whitelist

所有應(yīng)用會用到這個插件董虱，他定義了應(yīng)用里可以加載什么樣的資源扼鞋。沒有他的話，你嘗試加載的資源都會不成功愤诱。
添加了這個插件后云头，你也需要到index.html中定一個一個“Content Security Policy”。我們將添加一個非常寬松的策略實際上允許我們加載任何資源淫半±；保基于你的應(yīng)用，你可以提供一個更嚴格的策略科吭，但是對于開發(fā)而言開放性策略就可以了昏滴。
> 修改 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

這個另一個每個應(yīng)用都要添加的插件对人，但是你也可以先不添加谣殊。添加了這個插件后，在你編譯Android的時候?qū)褂谩癈rosswalk”牺弄。Android有很多問題姻几，特別是老設(shè)備，因為有太多不同的團建版本势告，不同的版本有不同的瀏覽器（記住蛇捌，鑒于我們是制作HTML5應(yīng)用，他實際上就是一個搭載的瀏覽器用來運行我們的應(yīng)用）咱台。Crosswalk做的是將一個現(xiàn)代的瀏覽器打包到應(yīng)用中络拌，這樣一來應(yīng)用無論是運行在什么設(shè)備上，都會使用相同的瀏覽器來運行回溺，并且Crosswalk瀏覽器可以很好改善執(zhí)行效率春贸。
唯一的不足之處就是你的應(yīng)用尺寸明顯的變大了很多混萝。總體上祥诽，我覺得這很值得，我也建議你使用他雄坪，如果你接受不了的話厘熟，也可以不用。更多關(guān)于Crosswalk Project的信息维哈，請參考網(wǎng)站：https://crosswalk-project.org/

設(shè)置圖片

制作此應(yīng)用的時候绳姨，會用到一些圖片。你下載的包里面已經(jīng)包含了這些圖片阔挠，但是你需要去生成的項目里面設(shè)置好他們飘庄。
> 將下載包 src/assets文件夾下面的images文件夾復(fù)制到應(yīng)用里的 src/assets下面

總結(jié)

就這樣！我們設(shè)置好了购撼，準備好繼續(xù)前幾跪削，現(xiàn)在我們開始進入到有趣的部分了。