2017年10月24日 星期二

使用Ionic framework開發手機程式簡易範例

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/binplateform-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,直接建置後會安裝到手機上(記得先將手機設定為開發人員模式



相關連結