PhoneGap:用HTML5製作APP

這年頭APP盛行,無論程式新手老手都想寫APP。對老手來說可能還算容易,但是對新手來說就不是那麼的親民。好家在 Android 平台有麻省理工學院(MIT)開發的 AppInventor 線上堆積木寫程式系統,讓程式苦手用簡單的方塊就能堆出基本的APP程式,使APP的開發門檻大大的降低。不過,堆積木的方式雖然簡單方便,卻也導致很多進階功能無法實行:使用者無法自訂物件。對於有比較複雜需求的人來說,AppInventor 顯然是一條行不通的道路。

HTML5 之所以受人矚目,就在於它跨平台的特性:無論手機、平板、電腦,都可以執行。我們可以不必學好幾種程式語言;想讓我們的程式在不同平台上執行,只要一套 HTML5 就搞定。現在想要學APP程式,只要用 HTML5 就能夠在 Android、iOS 以及 Windows Phone 上面執行了。HTML5 不是寫網頁程式嗎?是的,所以我們需要透過 Adobe PhoneGap 幫我們把 HTML5 的程式轉成可以安裝、上架的 APP。雖然 HTML5 APP 的效能會受到部份人士的質疑,畢竟它不是原生程式,但它很適合推薦給想進階學習的程式新手。另一方面,如果程式有寫好,HTML5 的效能也不會輸給原生程式。HTML5 已經不是當年簡單的網頁程式了,它可以很簡單,也可以很複雜。透過 HTML5 可以完成大部份 APP 的需求,我想大概只有遊戲等級的 APP 用 HTML5 比較難寫吧(只是難寫不是寫不出來,畢竟用記事本是要寫得多複雜?事實上二百年前就有神人用 HTML5 寫遊戲了,例如 Cut the Rope 是先有 HTML5 網頁才有 APP),不過開發遊戲的話還是用遊戲引擎比較快。

使用 PhoneGap API

雖然我們寫的程式是 HTML5,但是必須透過 PhoneGap 才能轉成 APP,所以這個系列的文章會用「PhoneGap(程式)」來取代 HTML5 的字眼。因為並非所有的 HTML5 程式都能順利轉成 APP,也就是說瀏覽器能跑,不代表 APP 能執行。我們必須要撰寫 PhoneGap 看得懂的程式才行。因此僅管 PhoneGap 只算是一個軟體,我們還是會把它作程式語言稱呼。

撰寫 PhoneGap 程式基本上和一般的 HTML5 沒有什麼不同,不過如果你需要使用 PhoneGap API,必須在 之前加入下面的程式碼。什麼樣的情況會使用到 PhoneGap API 呢?就是當我們使用手機平板上的裝置的時候,例如攝影機、檔案存取、GPS…等等,或是使用一些第三方別人寫好的程式,例如與 Facebook 連接等等。phonegap.js 這個檔案會在我們程式上傳編譯的時候加到根目錄中,所以如果你的 .html 檔在其它目錄下,記得調整它的相對路徑


製作 HTML5 APP:編寫 config.xml

在我們撰寫好的 HTML5 要上傳之前,必須在根目錄加上 config.xml 的設定檔。設定檔的細節可以參考官方文件。基本格式如下:

<widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id      = "tw.moke.testing"
        versionCode = "10" 
        version     = "0.2.0" >

    <name>專案名稱</name>

    <description>
        專案描述
    </description>

    <author href="作者網頁" email="作者信箱">
        作者名稱
    </author>

    


    <preference name="phonegap-version" value="3.5.0" />
    


    <preference name="orientation" value="landscape" />
    


</widget>

首先第 4 行的 id 是我們可以自己取的,它必須是唯一值,每個專案都不同。id 建議取反向的 Domain Name 風格,例如:com.yourcompany.yourapp。第 5 行是給 Android 裝置使用的 versionCode,它是一個內部的版本編號(詳見Android文件)。第 6 行的 version 則是使用者可以看見的版本。第 19、21 行是選擇性加入的參數,19 行指定了 PhoneGap 運行的版本,21 行則是指定 APP 執行的水平垂直畫面(不指定則是根據裝置來決定)。後續我們會談到 PhoneGap Plugin 的使用,如果有使用 Plugin,也必須在 config.xml 裡加入相對的設定。

使用雲端 PhoneGap

PhoneGap 它是一套軟體,所以你可以下載回來安裝使用,不過我建議大家用它的雲端服務,可以省去很多麻煩。無論你是安裝或用雲端,在沒有付費的情況下一次都只能編譯一個 APP,所以不會因為使用雲端而比較吃虧。雲端的使用方式很簡單,只要把你的 HTML5 程式連同 config.xml 打包成 ZIP 檔後上傳即可。下面一步步做說明。

一、開啟 Adobe PhoneGap Build 網站,按下”Get started!“。

二、選擇”Free”帳戶(必須使用 Adobe 帳號登入,如果沒有請先去申請一個)。

三、選擇公開或私人專案後,上傳 ZIP 檔(後面可以修改)。

四、確認 APP 的資訊,無誤時按下”Ready to build”。

五、等待左下角裝置的編譯,可按”Update code”重新上傳。點選 APP 名稱可進行進階設定。

六、APP 的進階設定頁。右上角的 QR code 可以直接掃描下載程式,不過通常要等數分鐘後才會更新,若有即時的需求可以直接點選下方的下載按鈕。

編譯 iOS 必須要先輸入開發人員的 key (需繳費),由於我目前沒有,所以就先不教大家怎麼輸入了,等我自己有弄過再來分享。如果你的 config.xml 裡面有 plugins 的設定,在這裡 Plugins 的選項裡就可以看到你設定的內容。Collaborators 可以增加協作者。Settings 則是一些 config.xml 裡的設定,並且可以刪除此 APP。比較特別的是 Enable debugging 這個選項,是幫助大家 debug 用的,開啟這個選項的專案會在 “Update code” 旁邊多一個 “Debug” 按鈕,按下後開啟一個類似 Chrome 開發人員工具的網頁。當我們用手機或平板執行 APP 的時候,這個網頁就會產生相對應的數據(例如console)。不過我自己用過是覺得不太好用,可能連線上的問題導致很多時候沒有東西跑出來,反倒不如用 alert() 來確認,大家可以斟酌使用。