2015年10月18日 星期日

Cordova 安裝與開發流程

安裝Cordova

Cordova是個跨平台行動應用程式設計的解決方案，主要色是使用HTML, JavaScript, CSS等常見的Web技術來製作App。首先介紹如何安裝，這邊以官方提供的標準安裝方法來進行，依照以下步驟完成(適用Windows)：
  1. 至Node.js官方 (https://nodejs.org/) 下載Node.js並安裝。
  2. 開啟「cmd」或「Node.js command prompt」，會出現命令列視窗。
  3. 輸入指令「npm install -g cordova」，將會自動完成Cordova的下載與安裝。

npm install -g cordova


開發前置準備


 為使後續開發能順利進行，還需要進行以下設定，各平台可能不太一樣。這邊以Android為例，需先安裝Android SDK，並設定「環境變數」內的「系統變數」，包含：
  1. 新增ANDROID_HOME變數，值為Android SDK的安裝路徑，例如D:\Android\sdk，依你實際安裝路徑為主。
  2. 調整path變數，新增以下兩者，記得用分號「;」隔開：
%ANDROID_HOME%/tools
%ANDROID_HOME%/platform-tools

 建立Cordova專案

安裝好Cordova，即可利用指令的方式建立專案，其指令相當簡單，不需使用其他工具來完成。

  1. 開啟「cmd」或「Node.js command prompt」，利用「cd」指令移到你想建立專案的目錄下。
  2. 使用指令建立專案，參數ProjectName請自行代換為專案名稱，它會作為整個專案的資料夾，且建立在目前的位置上。
    3. cordova create PROJECT_DIR APP_ID APP_NAME
    這邊的 APP_ID 即對應到 Android 的 Package Name 與 iOS 的 Bundle Identifier。
  3. 使用指令移至剛才建立的專案目錄內。
    4. cd PROJECT_DIR
  4. 依你的需求，將專案加入平台，平台指的是你的App之後要執行在哪，以Android為例，使用指令完成。
    5. cordova platform add android


開始撰寫程式

Cordova是個跨平台解決方案，還記得在前面我們用「cordova platform add」指令加入了Android平台嗎？你的App最終可能要執行在Android, iOS, WP8, BlackBerry等平台，既然是跨平台，當然希望「寫一次」程式就可以執行在各個平台上，為了實現這個需求，你可以編輯的資源僅限於「www」資料夾內的檔案。

 那麼之前在platforms\android\assets\www中看到的檔案呢？若你直接異動它，再透過對應的IDE還是可以產出可執行的App，但無法兼顧其他平台，既然選擇Cordova，最好不要這樣處理。

 另外有關App的基本資訊，Cordova為了兼顧多平台，統一將設定放在專案根目錄中的config.xml檔案，若欲調整App名稱與版本等資料請編輯該檔。

編譯與打包

在完成程式的新增與編輯之後(記得，僅存取\www內的資源)，於Node.js command prompt執行以下指令即可，執行前請確認有完成「開發前置準備」裡面提到的環境變數設定。
cordova build

值得注意，這個build指令會自動把\www內的東西copy至個平台中的\assets\www，並且依各平台不同特性加入與修正必要檔案，為確保整個流程正確，這部分請不要手動完成。

 但是！若你不想要使用這種命令方式來打包成apk檔案，可以借用其他IDE來完成，若你有這個打算，請不要直接執行build，而改用以下指令(不同平台請自行抽換參數)：
cordova prepare android


prepare會把相關檔案copy至正確的地方，但不進行編譯與打包之動作。實際上執行前面說的build，它也是自動幫你在背後執行prepare與compile兩個指令。
 

使用Android Studio編譯與打包

基本上透過Cordova CLI可以完成整個開發流程，包括撰寫程式與編譯，但實際上，熟悉Android Studio者，或想以圖形操作介面包完成打包的人，可以將Cordova的Android專案以Android Studio來維護。

 個人偏好以這樣的方式進行開發，可以直接執行到實機、觀察Log，而簽署apk時圖形化介面也比較友善。

 若前面有將Cordova專案加入Android平台的話，在專案根目錄下，應會產生platforms\android，我們直接使用Android Studio開啟這個目錄，具體的操作方式：

 開啟Android Studio，選擇「Import project (Eclipse ADT, Gradle, etc…)」把專案載入，請記得要載入的是Cordova專案中platforms\android目錄。
Δ 選擇「Import project (Eclipse ADT, Gradle, etc…)」把專案載入 

Δ 載入Cordova專案中platforms\android目錄

若Android Studio有提示Android Gradle plugin需要更新，請按下「Fix plugin version and sync project」讓它自動完成即可。

 開啟後就依以往的方式把apk檔案打包出來，直接接上實機也可以執行，如同開發原生程式一般。
特別提醒！使用 Android Studio 可以方便的將程式執行到實機，但每次更改程式後，在透過 AS 執行前記得先執行 cordova prepare 指令，否則執行到裝置上的的 App 會是先前的版本。


後記

Cordova版本持續更新，本文撰寫於2015/10，使用的Cordova版本為5.3.3。(要查版本可以下cordova -v指令)。未來新版本難保會有不同的處理流程，屆時請大家自行注意。

 本文皆以個人經驗撰寫，部分資料來自官方文件，若讀者有更好的解決方案歡迎提供！

 下期預告「安裝Cordova Plugin」。

延伸閱讀

  1. APACHE CORDOVA: The Command-Line Interface,
    http://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html
  2. Tiger-Workshop Blog: PhoneGap 與 Cordova 的實際差異，
    http://blog.tiger-workshop.com/difference-between-phonegap-and-cordova/
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)