安裝Cordova Plugin

前篇「Cordova 安裝與開發流程」講述Cordova開發環境的準備及基本的使用教學，而本篇則是要說明如何在Cordova專案加入Plugin，讓你的專案具有使用相機、GPS、麥克風等諸多行動裝置硬體設備之能力。

以下就以裝載Camera的Plugin為例，在Cordova專案中裝載該插件：

取得與安裝Plugin

1. 連線至Cordova官方提供的Plugin Search頁面 (https://cordova.apache.org/plugins/)，輸入你想查找的關鍵字即可。我們在此輸入「camera」，馬上可以看到對應的Plugin已顯示。

   

   Codrova Plugins 搜尋頁面

   
   

   
   

   
   

   
   

   

   cordova-plugin-camera

   
   

   
   

   
   

2. 使用指令 cordova plugin add cordova-plugin-camera，將會把camera插件下載並裝到Project/platforms目錄下的所有平台。

安裝原理簡述

執行plugin add 指令後，系統已在背後悄悄的完成許多異動，例如：

1. 將Plugin檔案下載至Project/plugins目錄。
2. 將已下載的「cordova-plugin-camera」安裝至各平台，這邊以Android為例，即為Project\platforms\android\assets\www\plugins 目錄。
3. 依安裝的plugin 更新 Project\platforms\android\assets\www 目錄下的「cordova_plugins.js」。
4. Project\platforms\android中的「AndroidManifest.xml」權限異動。
5. android\src 目錄，新增「org.apache.cordova.camera」Package與所屬java檔。

雖然這些異動有跡可尋，但仍不建議自行修正，照著正規的方法來處理比較妥當。

檢視現有的 Plugin

使用指令 cordova plugin ls 即可。

移除 Plugin

使用指令 cordova plugin rm [plugin_name]，例如要移除 Camera Plugin，則下 cordova plugin rm cordova-plugin-camera。若你忘了Plugin的全名，可由前面的 ls 命令找到。

延伸閱讀

Apache Cordova Documentation - Camera, https://cordova.apache.org/docs/en/3.3.0/cordova/camera/camera.html

IoT App 開發工具 Evothings 介紹

以下內文已於 2016/4 針對正式釋出的 2.0 版進行微調。

Evothings是一套針對物聯網(IoT)相關行動App開發工具，開發技術採用Cordova。它內建了不少相關範例程式(BLE/Beacon、Arduino、LinkIt One，甚至是ESP8266等相關應用)。

Evothings主要分為2大部分：執行在PC上的Evothings Workbench與執行在行動裝置上的Evothings Viewer (小於2.0版的是使用Evothings Client)。以下內文內容以Evothings 2.0 為基準。

Evothings提供的Viewer程式已事先裝載了相關Plugin，透過Workbench可將你的開發環境(PC)與Viewer(Mobile)串接，優點是每次變更程式時，不需手動編譯與打包，更動的結果會即時反應在行動端。目前Evothings不能完成打包的動作，主要用途是用於快速開發原型(prototype)與實驗目前的想法是否可行。

接著開始看看如何使用Evothings：

下載Evothings Workbench

至官方網站下載即可，本文以Evothings Workbench 2.0 為介紹對象。
https://evothings.com/

執行Workbench

以Windows平台而言，下載後解壓縮即可，執行其中的「EvothingsWorkbench.exe」即可啟動，需無進行安裝動作。

安裝Evothings Viewer

記得這邊談的是2.0以上版本，請在行動裝置安裝Evothings Viewer。若是使用較早的Workbench搭配的是Evothings Client。在Apple App Store或Google Play搜尋Evothings即可找到相應App，將其安裝即可。

Workbench與Viewer連線

2.0版本可以透過外網連線，也因此會有KEY的產生與登入之功能，在2.0以前是Workbench與Viewer都是區網的情況下才可使用。
切換至Workbench的Connect頁籤，按下「GET KEY」即可產生金鑰，並在Viewer中輸入金鑰即可連線。 (實際使用時有遇過timeout的情況，再多試幾次即可)。

範例程式的使用

前面有提到，Evothings內建了不少IoT相關應用範例，這些範例都可以在Workbench的Examples頁籤中找到。2.0版與先前版本的差異是，在使用這些範例要先按下「COPY」把它複製到你的開發目錄(依你的習慣設定即可)，完成複製的專案可以在My Apps頁籤中找到。早期版本是直接修正範例檔，若沒有事先備份可能會回不去。

修改範例程式並執行

在Workbench中切換至My Apps頁籤，在想要修改的專案中按下「CODE」即會開啟放置原始碼的目錄，使用你習慣的程式碼編輯器開啟相關檔案即可。這邊用Notepad++打開index.html。在此時你可以修正這些檔案的內容，包含html、js與css等，一經修正並存檔，即會自動把結果反應至行動裝置。若你發現修正後行動裝置並沒有跟著改變，可能是Workbench與Viewer之間的連線中斷了，請檢查看看。

打包釋出

如同前述，目前Evothings沒有提供這個功能，但由於專案骨子裡是Cordova，因此可以用Cordova自己的打包流程來產出最終結果。這部分可以先參考本Blog的文章「Cordova 安裝與開發流程」會較有概念。

其他功能

若你有原本的Cordova專案，可以直接把專案中的主html檔拖拉至My App頁籤，即可透過Evothings幫你快速執行至實機。

而在Viewer右上角的選單可以打開「Info」頁面，即可查詢目前包含的Plugin，可以發現有battery、camera、geolocation等常用Plugin，以及特定用途的像是ble與beacon。

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請自行代換為專案名稱，它會作為整個專案的資料夾，且建立在目前的位置上。

cordova create PROJECT_DIR APP_ID APP_NAME

這邊的 APP_ID 即對應到 Android 的 Package Name 與 iOS 的 Bundle Identifier。
3. 使用指令移至剛才建立的專案目錄內。

cd PROJECT_DIR

4. 依你的需求，將專案加入平台，平台指的是你的App之後要執行在哪，以Android為例，使用指令完成。

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/