使用cordova / phonegap 開發 app 好處是可以跨平台,以及使用比較令人熟悉的 HTML5 + javascript 開發 UI 介面及相關邏輯層應用。 Cordova / phonegap 可以使用 javascript call java library ,所以這邊我們順便先建立起cordova 的開發環境。 (你可以打開 cordova 官網參考,但我發現官方的指引不完整,所以重新整理這篇資訊)
cordova 環境建立有一些設定上容易發生的誤區,以下會一步一步描述:
假設,讀者有參考 Day1 的指引,成功建立 VAD 裝置,並 push sample project 成功建立
到 apache ant 專案,下載最新版本的 ant 套件,解壓縮放到你喜歡的位置即可
我們先安裝 node
.js , windows 環境請到 node.js 官網下載 *.msi 包裝的安裝檔 ,linux / mac 環境請直接找套件庫安裝方式 ex yum / apt-get / homebrew ... etc
安裝完成後檢查開啟命令提示字元 / 終端機 :鍵入 npm install -g cordova , 把cordova 安裝掛 -g 參數供全部使用者使用
完成安裝 ant / nodejs / cordova 以及昨天day1 已經安裝的 JDK 後 (JDK 是必要的,如果沒有跑過昨天的流程,請重新看一次,JDK + Android SDK 是本次工作必要的前置任務)
先不要急著執行 cordova , 我們要先檢查環境變數部分,cordova 內建的building tools 需要參照 JDK / ant / android SDK 位置
如果你是windows user 參考以下設定:
JAVA_HOME = C:\Program Files\Java\jdk1
.8.0_20
ANT_HOME =D:\Program Files\apache-ant-1.9.4
ANDROID_HOME = D:\Program Files\android\sdk
PATH = C:\ProgramData\Oracle\Java\javapath;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;D:\Program Files\nodejs\;C:\Program Files\Java\jdk1.8.0_20\bin;D:\Program Files\apache-ant-1.9.4\bin;D:\Program Files\eclipse\sdk\tools;D:\Program Files\eclipse\sdk\platform-tools
注意上方這段粗體部分,你要改成你相對應的套件放置位置。
如果你是 linux user 參考以下設定:(編輯 $HOME/
.bashrc 檔案)
export ANDROID_HOME="$HOME/android-bundle/sdk/tools"
export ANDROID_PLATFORM_TOOLS="$HOME/android-bundle/sdk/platform-tools"
export PATH="$ANDROID_HOME:$ANDROID_PLATFORM_TOOLS:$PATH"
export ANT_HOME="$HOME/ant"
export PATH="$PATH:$ANT_HOME/bin"
當然你要改成你套件的對應位置
修改完成後,請重新開機,或是重新登入以確保套用環境變數
重新開啟終端機輸入:
java -version
ant -version
adb version
emulator -version
cordova -version
檢查是否都有正確跳出版本資訊,到此才能確定先前的作業成功無誤
到你想要放置專案的位置,開啟終端機,鍵入:
cordova create MyApp
cd MyApp
cordova platform add android
cordova run
16. 到這邊 cordova 會 build sample project 然後呼叫 adb 使用 VAD 測試這個 sample project , 或是在你有插入 android 裝置並開啟usb 偵錯模式時,會藉由 sdb 安裝到你的裝置中。
17. 完成!
以上是今天的環境建置指引。我們明天見,來試著抓出一些感應器來看看吧!