Hybrid Apps開發系列之1：Ionic/Cordova框架環境設定

Ionic Framework簡介

Ionic Framework (http://ionicframework.com/) 是一個「混合式Apps」 (Hybrid Apps) 的HTML 5開發框架。該框架延伸Google的AngularJS (https://angularjs.org/) 開發框架－擴充了許多製作頁面的功能，而與Apache Cordova搭配，則成為開發混合式Apps的利器。簡言之，Ionic / AngularJS 讓mobile apps的開發更接近以HTML 5製作網頁的方式，免去一些撰寫JavaScript / HTML製作頁面的苦工。

Ionic專案開發環境

此處以Windows環境、並以製作Android版的Apps為例，如要開發其他如iOS、Windows Phone等版本，則必須將Android SDK換成其他行動作業系統版本的SDK。



首先安裝下列工具，並設定對應的環境變數：

1. JDK最新版本（http://www.oracle.com/technetwork/java/javase/downloads/index.html ）：JDK通常安裝於"Program Files\Java"下，例如
   

   C:\Program Files\Java\jdk1.8.0_31

   此為環境變數JAVA_HOME的值。
2. Apache Ant（http://ant.apache.org/bindownload.cgi）：下載後解壓縮，並記下路徑，例如：
   

   C:\Program Files\apache-ant-1.9.4
   

   此為環境變數ANT_HOME的值。
3. Android SDK（https://developer.android.com/intl/zh-tw/sdk/installing/index.html）：只需要SDK，故選擇Stand-alone SDK Tools下載即可。安裝時記下安裝路徑，例如：

   C:\Program Files (x86)\Android\android-sdk

   此為環境變數ANDROID_HOME的值。

其次，根據安裝路徑，新增下列三個環境變數：

1. ANT_HOME
2. JAVA_HOME
3. ANDROID_HOME

並修改path變數，加入下列路徑：

1. %ANT_HOME%\bin
2. %JAVA_HOME%\bin
3. %ANDROID_HOME%\platforms
4. %ANDROID_HOME%\platform-tools

%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools

設定好之後便可進行Ionic/AngularJS與Apache Cordova的安裝程序。由於兩者都需透過node.js安裝，故必須先安裝node.js（https://nodejs.org/）。由於node.js安裝過程會自動修改path環境變數，故直接安裝，不需做任何設定即可。

node.js安裝完畢，開啟cmd.exe，安裝Ionic/AngularJS與Cordova。而為了所有路徑都可以使用安裝的套件，故需加上參數-g

npm install -g cordova
npm install -g ionic

兩者成功安裝之後，便可開始建立Ionic專案。