[Ionic 初心者筆記] 官方教學 - Ch 2 安裝
本文章參考 Ionic 官方教學，希望讓初學者對於如何用 Ionic Framework 開發跨平台的 HTML5 mobile apps 有初步的概念。
Chapter 1: All About Ionic
Chapter 2: Installation
Chapter 3: Starting your app
Chapter 4: Testing your app
Chapter 5: Building out your app
Chapter 6: Publishing your app
Chapter 2: Installation
一、跨平台環境設定
經過上一個章節，我們知道 Ionic 是一個使用 HTML5/CSS3/JS 開發類 Native Mobile App 體驗的好工具（目前主要適用於iOS 6+、Android 4.0+，Android 2.3 應該也可以），在這一個章節，我們將開始安裝 Ionic 開發上會用到的工具，建構出完整的開發環境。
在開始安裝前請先確認自己使用的開發作業系統（不管是 Mac、Linux 或是 Windows都可以，不過如果是以開發者為職志的話，有台 Mac 電腦會方便許多啦）。因為開發上需要使用到 command line 指令，如果你使用的是 Windows 作業系統，必須要事先安裝 Git for Windows，此外若想要有更方便的指令工具的話，可以安裝 Console2。如果都確認沒問題，請再確認自己的電腦是否有安裝 Node.js。接下來我們將運用 NPM 的方式安裝 Apache Cordova。
1. 安裝 cordova（-g 是全域安裝）
$ sudo npm install -g cordova
2. 由於 Ionic 開發的 App 可以在 iOS 和 Android 平台上運行，所以必須針對不同平台安裝特定的開發環境（其中 iOS 需使用 Mac OS 當做開發平台所以若想開發 iOS 應用，建議還是能準備一下），若您已經安裝好開發環境這部份就可以省略。
(1) Mac 作業系統
a. 在 Java JDK官方網站安裝最新版的 Java JDK
b. 安裝 Apache Ant
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew install ant
c. 安裝 Android SDK
現在可以安裝 Android Studio 或是單獨安裝 sdk，並在 ~/.bash_profile 文件最後加入以下指令（注意使用者名稱和資料夾名稱需依自身狀況做調整），讓可以系統可以找到 sdk 位置
export ANDROID_HOME=/Users/your_user_name/android-sdks
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
$ sudo apt-get install ia32-libs
$ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0
# 若有更動到環境變數，請記得要重新啟動 terminal。
二、安裝 Ionic
一般 Ionic 框架會使用 command line 作操作，以下指令為安裝 Ionic
$ sudo npm install -g ionic
三、創建新的 Ionic 專案
透過指令我們可以開啟一個名為 todo 的空白專案（預設有blank、tabs、sidemenu可以做選擇）
$ ionic start todo blank
$ cd todo && ls
// 專案資料檔案結構
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.
四、設定平台參數
根據你想開發的 App 類型加入平台參數（請注意只有 Mac OS 電腦才可以開發 iOS 的應用程式）
$ ionic platform add ios
$ ionic platform add android
按：若你在 Mac OS 加入 Android 錯誤[Error: ERROR : Make sure JAVA_HOME is set, as well as paths to your JDK and JRE for java.]，請先執行以下指令$ export JAVA_HOME=$(/usr/libexec/java_home)
五、測試你的 App
經過了一番辛苦，終於可以測試自己精心製作的 App能否運行，順利的話就可以看到自己的啦！（注意 Android 可以替換成為 iOS）
$ ionic build Android
$ ionic emulate Android若是接上 Android 實體機器則是使用 run（建議多用實體機測試）
$ ionic build Android
$ ionic run Android
按：若實體機偵測不到可以試試看以下指令：
$ adb kill-server
$ adb start-server
$ adb devices
由於預設 Android 模擬器（AVD）在運行速度上相對較慢且無法代表真實的設備，所以若要使用虛擬機的話建議使用 Genymotion 當做替代，會快上許多（它會在你的電腦中將 Android 設備當做一個虛擬機來運行），因此使用 Genymotion 的話將使用 ionic run 而非 ionic emulate，因為 Genymotion 是視為電腦的物理設備。
花了不少功夫，終於把環境設定好啦，接下來就開始我們第一個 App 吧！
參考文件：
1. The Ionic Book
2. ionic book 簡中
3. Android ADB device offline, can't issue commands
Share story
