2018年2月10日 星期六

【Ionic 3】建立第一個Tabs版型App

Ionic 3 App開發的入門介紹,內容包括:

  1. 安裝Ionic 3 / Cordova
  2. 建立第一個App: Tabs版型
  3. 預覽執行: ionic serve
  4. App佈署
  5. 除錯(Debugging)

安裝Ionic 3 / Cordova
以Windows環境為例
  1. 先行安裝node.js,以便能以npm安裝ionic與cordova。安裝過程需注意 (1) node.js執行檔是否有加入Path環境(安裝時預設值便會加入),(2) 是否能從命令列(cmd.exe)執行node.js指令(也是預設選項)。
  2. 開啟cmd,安裝cordova與ionic:
  3. npm install -g ionic cordova
最新版本(2018/1)是cordova 8.0.0, ionic 3.19.1。

建立第一個App: Tabs版型 
ionic start為建置專案指令。Ionic 3專案預設將會產生typescript版本,如需建立Ionic 1的舊版專案,則必須在參數加上--type=ionic1。新專案應使用typescript版本:
ionic start tabExample tabs
此指令將建立tabExample專案,並以tabs template為版型,故在專案名稱後加入tabs。而建立專案過程中,必須回答幾個問題,可視情況選擇之:
  1. Would you like to integrate your new app with Cordova to target native iOS and Android?(是否整合Cordova)
  2. Install the free Ionic Pro SDK and connect your app?(是否安裝Ionic Pro SDK?)
其中,Cordova為介接函式庫,提供App與手機功能如相機等、或其他外掛之間的介接,因此通常會使用。而Ionic Pro SDK則是為了使用Ionic官方提供的多種開發、測試服務,故可在建立專案後再進行設定。

除了tabs版型外,Ionic提供了blank(空白)、sidemenu(側欄選單)、super(提供14種預設頁面設計)等版型,例如:
ionic start myApp sidemenu
ionic start mySuperApp super
預覽執行: ionic serve
使用ionic serve指令可開啟瀏覽器(建議以chrome開啟),預覽執行畫面,如下圖:
圖1 Tabs版型之Ionic App。
App佈署
App佈署則取決於所要佈署之平台,而要做不同的準備工作。此處以Android 7.0平板為例,如要建置Android版App,必須:
  1. 安裝Java SE 8(JDK版,版本為8U162,另請勿安裝最新版本JDK 9,因Android Studio尚未支援JDK 9),並設定環境變數JAVA_HOME,指向JDK所在目錄。
  2. 安裝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平台版本。
下載完畢,將Android手機接上,便可建置帶有除錯訊息的App,並佈署到手機上,指令如下:
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檢視裝置功能
若看不到連接的手機,則必須檢視usb driver是否成功安裝,以及手機本身是否尚未開啟「開發人員選項」。
點選手機裝置代號(圖5的P00A)下inspect連結,便可同步檢視手機執行畫面,並看到開發人員工具的console等功能,如下圖:
圖6 手機同步畫面與chrome之開發人員工具。

沒有留言:

張貼留言