1. 安裝Ionic 3 / Cordova
2. 建立第一個App: Tabs版型
3. 預覽執行: ionic serve
4. App佈署
5. 除錯(Debugging)
安裝Ionic 3 / Cordova
以Windows環境為例
- 先行安裝node.js,以便能以npm安裝ionic與cordova。安裝過程需注意 (1) node.js執行檔是否有加入Path環境(安裝時預設值便會加入),(2) 是否能從命令列(cmd.exe)執行node.js指令(也是預設選項)。
- 開啟cmd,安裝cordova與ionic:
npm install -g ionic cordova
建立第一個App: Tabs版型
ionic start為建置專案指令。Ionic 3專案預設將會產生typescript版本,如需建立Ionic 1的舊版專案,則必須在參數加上--type=ionic1。新專案應使用typescript版本:
ionic start tabExample tabs此指令將建立tabExample專案,並以tabs template為版型,故在專案名稱後加入tabs。而建立專案過程中,必須回答幾個問題,可視情況選擇之:
- Would you like to integrate your new app with Cordova to target native iOS and Android?(是否整合Cordova)
- Install the free Ionic Pro SDK and connect your app?(是否安裝Ionic Pro SDK?)
除了tabs版型外,Ionic提供了blank(空白)、sidemenu(側欄選單)、super(提供14種預設頁面設計)等版型,例如:
ionic start myApp sidemenu ionic start mySuperApp super預覽執行: ionic serve
使用ionic serve指令可開啟瀏覽器(建議以chrome開啟),預覽執行畫面,如下圖:
圖1 Tabs版型之Ionic App。 |
App佈署則取決於所要佈署之平台,而要做不同的準備工作。此處以Android 7.0平板為例,如要建置Android版App,必須:
- 安裝Java SE 8(JDK版,版本為8U162,另請勿安裝最新版本JDK 9,因Android Studio尚未支援JDK 9),並設定環境變數JAVA_HOME,指向JDK所在目錄。
- 安裝Android Studio,並使用其SDK Manager工具,將App佈署所需之編譯工具與平台安裝至電腦中。
環境變數設定JAVA_HOME變數方式如下圖(Windows 10作業系統):控制台/系統及安全性/系統,點選「進階系統設定」/「環境變數」;然後在系統變數下新增JAVA_HOME,如"C:\Program Files\Java\jdk1.8.0_162"。
圖2 JAVA_HOME環境變數 |
而Android Studio安裝好之後,如下圖,開啟SDK Manager:
圖3 啟動SDK Manager |
接著根據所要佈署的手機或平板,選擇適當的版本,例如Android 7.0,SDK Manager會一併下載額外所需工具。
圖4 選擇合適之SDK平台版本。 |
ionic cordova run android --device最後,如要發布正式上線版本,則改用--prod --release:
ionic cordova run android --prod --release # 或是 ionic cordova build android --prod --release除錯(Debugging)
開發過程中如需除錯,在連接上手機後,可使用chrome瀏覽器檢視裝置的功能。在瀏覽器列輸入:
chrome://Inspect/#devices
即可檢視目前連接上的手機裝置,如下圖:
圖5 Chrome檢視裝置功能 |
點選手機裝置代號(圖5的P00A)下inspect連結,便可同步檢視手機執行畫面,並看到開發人員工具的console等功能,如下圖:
圖6 手機同步畫面與chrome之開發人員工具。 |
沒有留言:
張貼留言