這是我寫的一系列文章中的第一篇關于如何利用Web開發技術為iOS和Android系統構建混合應用程序（Hybrid App）

毫無疑問，用戶在移動應用上花費了比瀏覽器上更多的時間。考慮到這一點，制作一款屬于你自己的apps就成為了機會。但是如何開始呢？能不能利用一些你已經掌握的開發技術呢？直到目前，如果你想要為目前最流行的兩款手機操作系統（iOS和Android）制作一款移動應用。一種方法是通過利用不同系統相應的SDK制作原生的App，這種方式意味著你需要為兩個不同系統制作兩款不同版本的應用程序。如果你是一個獨立開發者，你可能不會對兩種開發技術都很熟練。

有時，開發者會選擇iOS或者Android中的其中一種，然而大的公司一般有兩個開發部門，一個部門對應一個系統平臺。現在，通過利用ionic框架（或者其他諸如PhoneGap,MUI,Bootstrap,OnsenUI,Famo.us等框架）和已經掌握的開發技術你可以只制作一套代碼庫，通過不同的打包方式打包成App發布在iOS和Android 市場上（App store和安卓市場）。

制作移動應用（app）的方法

有三種方式可以為手機制作移動應用：

－原生應用（Native app）

－手機網站（Mobile website）

－混合應用（Hybrid app）

原生應用（Native APP）

如上述，你可以根據不同系統平臺指定SDK制作對應系統平臺下的移動應用，如果你想要為iOS系統創建一款應用，你需要：

擁有一臺蘋果Mac電腦，當然其他方法也可以，但是我不推薦。作為初學者，一臺廉價的Mac Mimi就可以了。

從App store下載Xcode

購買蘋果開發者許可證（Apple Developer license）99刀￥一年（如果你想要在App store上發布應用）

你可以利用Swift語言或者它的前輩ObjectiveC語言創建App，Swift 語言在沉重的ObjectiveC語言上做出了巨大改進，如果你決定開發原生app，相比利用ObjectiveC開發原生app，Swift更容易上手，特別是當你有Web開發的背景時。 ? ?

如果你想要為Android系統創建一款原生應用，你需要：

擁有一臺電腦

下載合適的SDKs（后面將會講到）

購買谷歌開發者許可證（Google Developer license）25刀￥（如果你想要在Google Play Store上發布應用）

利用原生開發技術開發的應用具有速度快和直接利用原生API的優勢（你不需要像開發混合應用一樣【Hybrid App】作任何中間封裝），缺點是，你需要為不同手機系統平臺開發不同版本的移動應用。（撰寫多套代碼）

手機網站（mobile website）

通過手機瀏覽器可以訪問手機網站，手機網站可以根據手機屏幕大小自適應。由于手機網站比較難以維護，一種叫做響應式網站設計（responsive website design）的方法被使用，通過這種方法你擁有一套HTML代碼庫，你可以通過使用媒體查詢（Media queries）根據不同設備不同分辨率（resolutions）改變他們的網站外觀。jQuery mobile 是一種出色的移動框架。使用它你可以制作一款移動版本的Web應用程序。移動網站一個顯著的優勢就是你可以根據需要實時更新他們的內容，而不用去等待蘋果Apple或者谷歌Google的審核，劣勢則包括低耦合，更少的特征。

混合app（Hybrid app）

混合應用基本上是一款手機應用，它和撰寫網站的程序語言基本相同，唯一不同的就是他們包含在一個孤立的瀏覽器中（WebView）， 原生應用通過WebView運行Web應用，混合應用可以調用手機攝像頭、GPS等，通過利用插件，混合應用可以調用手機其它的硬件功能，你可以利用開發Web應用的技術開發混合應用。然而，WebView有速度的限制， 制作成熟的3D圖像游戲可能不是最好的選擇。

Ionic是什么 (為什么它如此優秀?)

Ionic 不僅僅是一個UI框架。它允許你：?

－通過使用單一命令 ionic resources為所有不同大小設備生成圖標和啟動屏幕

－通過使用ionic run --livereload命令可以把改變的代碼立即應用到app上，即使app正在手機上運行。

－通過使用ionic serve --lab命令可以邊構建和邊測試iOS和Android版本應用，同事觀察它們的變化

－通過ionic share命令你可以和世界各地的客戶、顧客、測試者分享你的ionic apps，而不用通過App store

－通過ngCordova可以輕松的獲取手機全部的原生功能

同時,Drifty(ionic framework開發團隊) 正在為ionic app構建一種全棧后端服務和工具，譬如部署（不經過apple 的review程序就可以部署一個新的版本）。ionic命令行接口（CLI）在后端使用Cordova并允許你為iOS和Android構建apps（僅僅使用ionic build iOS和ionic build android 命令）。Ionic使用angular作為前端框架，如果你對angular熟悉就再好不過了。ionic對于angular 2.0也有很好的支持。

現在，讓我們安裝所有開發ionic需要的工具軟件然后使用ionic開發吧！

安裝必備的工具（對于Mac和Windows平臺）

為了同時安裝ionic和Cordova我們需要安裝Node.js和Git。如果你已經安裝了這些工具，你可以跳過這個部分直接安裝ionic。

安裝Node.js

到nodejs官網http://nodejs.org/download/下載Node.js，在Windows上和Mac上安裝非常簡單，下載并運行安裝即可。如果你的Mac安裝了brew，你也可以通過brew安裝Node.js。

兩種方式下，Node Pakcege Manager（NPM）都會在安裝Node.js時同時安裝其它的包，為了檢驗Node.js是否在Windows上安裝成功，在終端上運行下面的命令：

node -v

你會獲得類似下面的版本信息：

v0.12.7

為了驗證是否在Mac上安裝成功，同樣在終端運行上面的命令，你會獲得類似上面的版本信息，即代表安裝成功。

安裝Git

為了安裝Git，請前往here，在Windows和Mac上安裝Git和安裝Node.js同樣簡單。你僅僅需要下載和運行它，根據相應的指引安裝即可。?為了驗證你是否在Windows/Mac上安裝Git成功，在終端運行下面的命令行：

git

你會獲得如下輸出：

常用的git命令如下：

同時，git help -a 和 git help -g list 或 git help<concept> 命令可以幫助理解關于一個特定的子命令和概念。

不用擔心，如果你不知道如何使用Git命令，你可能不需要直接用到它（NPM使用它下載包），然而，如果你不想學，看看這個CodeSchool出的交互式教程（this interactive tutorial）。

安裝ionic

如果你已經安裝了git和Node.js，為了安裝ionic（Mac和Windows相同），你只需要運行如下命令：npm install ionic cordova -g，ionic在后臺使用Cordova，所以它需要它。在這里我們使用-g便簽是為了全局安裝Cordova，為了驗證ionic是否安裝成功（Mac和Windows平臺），你只需要在終端鍵入下面命令：

ionic -v

1.6.4

為了驗證Cordova是否安裝成功（Mac和Windows平臺），你只要在終端鍵入下面的命令：

cordova -v

你會獲得類似下面的輸出：

4.2.0

如果你之前安裝了Node.js但是沒怎么用它，你可能會報出下面的錯誤：

為了解決這個錯誤，你只需要更新你的Node.js，要么重新下載它（Windows平臺）要么執行下面的更新命令（在Mac上）：

brew update; brew upgrade node

使用Ionic CLI

如果你在你的終端/cmd運行ionic命令，你會獲得如下的輸出：

?使用ionic -help 或者-h可以獲取更多信息

通過使用ionic CLI同時閱讀上面的幫助文檔，你可以對ionic 命令行接口獲得大概的理解。如果你在想CLI是什么，他只是個Command Line Interface的首字母縮寫，就ionic而言，他只是一個創建、打包、運行和模擬的命令行工具。下面的教程我們將會講到當中的大部分命令，現在我們暫時不講。

使用已經存在的模板創建項目

Ionic CLI 允許你通過使用ionic start 命令創建和初始化你的項目，如果你看過官方文檔（official documentation），你將會看到對它的如下定義：ionic start appname [template].

如果你僅僅只運行ionic start appname 命令，Ionic CLI將會構建一個bootstrap應用（所有需要的構建都會在appname文件夾里面），伴隨著空的模板，這兒有其他三個模板包括blank（空模板），sidemenu（側邊欄）和tabs（底部導航欄），除此之外，你可以使用Github repo starters和Codepen URL starters等模塊，為了獲得更多的starter apps模塊，你可以訪問這邊文章（this post），在我們的例子中，我們將會使用sidemenu（側板欄）模板，在終端運行下面的命令：

ionic start Ionic_1stTutorial sidemenu

你會看到如下輸出:（Windows平臺下）

你的ionic項目就已經構建成功了! 下面是一些技巧:

-通過cd命令進入你的項目:$ cd Ionic_1stTutorial

-設置項目使用Sass:ionic setup sass

-在瀏覽器中實時開發:ionic serve

-添加一個系統平臺 (ios or Android):ionic platform add iOS [Android]

-注意: iOS 開發需要OS X系統

-參見詳細的Android平臺開發指南 :Android installation instructions

-編譯你的app:ionic build

-在模擬器上運行你的app:ionic emulate

-在真機上運行你的apps:ionic run

-使用ionic打包服務打包一個app:ionic package

更多關于使用ionic 幫助和ionic文檔的，請訪問Ionic docs，你也可以使用Ionic Push(alpha).為ionic app添加推送通知。

運行ionic 應用

既然我們已經基于側邊欄構建和初始化了我們的ionic應用，為了看到ionic CLI產生了什么我們必須運行它，首先進入我們創建項目名的目錄，在我們的實例中如下：

Ionic_1stTutorial

C:\Users\Nikola\Desktop\IonicTesting>cd Ionic_1stTutorial

C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>

在接下來的章節中，我們將花更多的時間在www文件夾，正因為ionic是基于angularJS 框架，你需要知道他的一些基本知識。下面是一些可以運行ionic應用的辦法：

-ionic serve- 在本地瀏覽器運行

-ionic emulate android- 在Android模擬器上運行 (這個例子使用Android; 你也可以使用iOS如果你有一臺Mac電腦且安裝了上述條件)

-ionic run android- 安裝應用到插入電腦的Android手機上

-ionic build android- 創建.apk文件，你可以復制這個文件到你的Android手機并運行它。（對于iOS，你必須通過Xcode運行到真機。下一章節我將會講到）

接下來，在終端運行如下命令：

ionic serve

你可以看到類似如下的輸出:

當然，你也可以直接在瀏覽器中輸入地址http://localhost:8100/#/app/playlistsAlso,一旦你自動設定了實時重載的功能，一旦你修改代碼，應用就會自動重新被加載到瀏覽器里。如果你喜歡，你可以到Github上獲取此項目。

其他的資源

下面是一些我在學習ionic時不可獲缺的資源:

為了快速了解框架，我建議閱讀官方文檔（official documentation）

如果你正在找一本關于ionic的好書，我推薦Ionic in Action: Hybrid Mobile Apps with Ionic and AngularJS

與編程相關的最好的咨詢問題的資源就是StackOverflow. 你可以查看關于ionic對應問題標簽的答案，然而我建議你查看StackOverflow幫助頁，如果你是StackOverflow新手。

學習 AngluarJS, 請點擊這里here.

注意：npm install -g ionic cordova （此處安裝很費勁，，，，如果安裝不上，請直接使用國內鏡像），也可以安裝cnpm，這樣就容易裝cordova和ionic

npm install -g cordova --registry https://registry.npm.taobao.org

npm install -g ionic --registry https://registry.npm.taobao.org

下面是下一篇文章的鏈接 ---（未完待續）

本文原出處 https://www.pluralsight.com/blog/software-development/ionic-framework-on-mac-and-windows

如有錯誤，歡迎批評和修正！