[技術探討] Cordova 的起手式

Cordova
Cordova

因應先前「改變,從PowerNAS開始」提到PowerNAS所屬的手機APP-PowerCloud從原本的Android原生語言換到了 Apache Cordova 的環境,就算你還不認識Cordova,也很難不清楚HTML5的竄起。如果今天我們不談數據,以個人經驗到生活週遭的觀察來說,想必多數人可以少了電腦卻不能失去手機,那麼HTML5的來臨,又怎麼可以單純使用在網頁的瀏覽。當然我清楚有部分Native APP起家的開發人員,聽到HTML寫出來的網頁,想到的是那個傳說中的Web APP,執行速度的遲鈍、硬體功能的不給力或我不想離開我愛的APP…等的聲音。但HTML只是 Cordova 的一部分,他包含了Web APP加上Native APP的結合,名符其實的跨平台Hybrid APP。


在正式探討Cordova之前,我必須說明Hybrid = Web + Native這個比例,因為在生活中可以聽見許多聲音,指向HTML5的來臨對於Web開發人員要轉移到APP開發的工作是多麼的容易,除非這個所謂的APP開發是介面取向或者類似Web APP的網頁程式,畢竟APP的重點還是原生語言。不過反向操作的話,從原生語言到 Cordova 確實在跨平台上有很大的助力,也靈活了設計佈局,最重要的是你還是可以盡情的回去修改你的原生語言,使APP達到最佳的狀態。
接下來,我們參考Apache Cordova的官方文件,帶各位逐步認識Cordova。當然,為了達到跨平台的開發效果,原生的開發環境是免不了的:
Ÿ iOS (Mac)
Ÿ Amazon Fire OS (Mac, Linux, Windows)
Ÿ Android (Mac, Linux, Windows)
Ÿ BlackBerry 10 (Mac, Linux, Windows)
Ÿ Windows Phone 8 (Windows)
Ÿ Windows (Windows)
Ÿ Firefox OS (Mac, Linux, Windows)

以上是官方提供的各個行動作業系統及電腦作業系統的對照表,大致上重點只有一個,就是在沒有虛擬機器的情況下-iOS一定要在Mac完成建置、模擬及發佈;相反地,Windows Phone則要在Windows電腦的作業系統完成。

有了原生開發環境,就差一步即可安裝Cordova,那就是Node.js!另外選配的部分為git client,如果沒有git的需求則可以不用安裝。在順利安裝完Node.js後,則可以在命令列介面使用npm來下載及安裝Cordova:
Ÿ OS X 與 Linux:
$ sudo npm install -g cordova
Ÿ Windows:
C:\>npm install -g cordova

完成後,就可以試試Cordova的指令來建立一個專案!
$ cordova create yoPath com.example.watuwant firstTest
舉例來說,使用cordova create的指令在命令列介面當下的路徑新建或選擇yoPath的子路徑(資料夾)建立一個firstTest的專案,com.example.watuwant則是像人的身份證字號一樣,APP的唯一辨識碼,通常使用反向域名風格來訂定。
建立好專案後,使用cd指令切換至專案目錄,接著新增開發目標的行動平台:
Ÿ $ cordova platform add ios
Ÿ $ cordova platform add amazon-fireos
Ÿ $ cordova platform add android
Ÿ $ cordova platform add blackberry10
Ÿ $ cordova platform add firefoxos
Ÿ $ cordova platform add wp8
Ÿ $ cordova platform add windows

如果想確認目前加入了哪些平台,可使用$ cordova platforms ls進行查詢,移除則是使用$ cordova platform remove 或$ cordova platform rm 接上對應的平台名稱(同上方的新增平台列表)。
此時,可以使用$ cordova build來建置所有平台,又或者$ cordova build 對應的平台名稱,最後可使用$ cordova emulate對應的平台名稱開啟各平台的模擬器,或使用$ cordova run對應的平台名稱 –device透過USB偵錯功能進行測試的工作。
到目前為止,已完成了一個基本的Cordova安裝作業,下一次我們將繼續了解如何進行基本的專案修改且介紹套件的使用,讓我們下次見!


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料