Ionic framework開發手機程式簡易範例
這是ionic framework在Windows 7作業系統下建置Android手機app的範例1) 先安裝NodeJS
2) 開啟命令列視窗後輸入: npm install -g ionic cordova
3) 建立專案: ionic start MyFirstIonic

接下來會問你是要用什麼範本建立這個專案( ex. tabs, blank, sidemenu....),用鍵盤上下鍵來選擇範本,這邊就選tabs吧

專案建立好後會詢問是否把該專案加入Ionic的儀表板(dashboard),這些填 N 就好
4) 切換到專案目錄 cd MyFirstIonic
5) 我們可以用瀏灠器來測試專案: ionic serve

執行該指令後會自動開啟瀏灠器,若沒有自動開啟可自行於瀏灠器輸入http://localhost:8100
要結束server運行的話,該命令視窗以ctrl + C 便可結束

6) 要建置Android app須在電腦上安Android SDK或是安裝Android Studio
可參考Cordova Android Platform Guide:
說明如下:
a) 安裝 Java JDK 8以上
b) 設定環境變數 JAVA_HOME

c) 安裝 Android Studio 來取Android SDK
d) 依所要建置的 Android 目標版本下載並新增SDK Package
開啟Android Studio --> Tools --> SDK Manager --> SDK Platforms 勾選要安裝的版本


e) 設定環境變數 ANDROID_HOME 並且將 android SDK路徑下的 tools/bin、 plateform-tools 加至PATH中


7) 執行 ionic cordova platform add android

8) 檢查ionic建置android 是否符合要求: ionic cordova requirements

9) 開始建置 ionic cordova build android
10) 建置完成後會產生android-debug.apk,這個 apk 就可以傳到手機上安裝了


11) 也可用adb(android debug bridge)的方法來建置佈署,手機以USB連接後先在命令列上下 adb devices 確認裝置是否已備妥
接著下 ionic cordova run android,直接建置後會安裝到手機上(記得先將手機設定為開發人員模式

相關連結: