用PhoneGap把網頁做成應用程式 HTML to APP

為了把加菲貓漫畫的網頁離線版本做成手機應用程式,採用PhoneGap的工具來完成!

成果作品:
加菲貓漫畫倉庫APP(漫畫離線閱讀):說明及下載頁面、手機直接連結到Google Play下載頁面

這是一個真正免費,而且不會有惱人廣告的作法喔!!

如果想做電子書的應用程式,最簡單的方法應該就是寫成網頁(HTML)格式。利用PhoneGap這個工具,你只要會寫網頁,就可以把他做成應用程式APP。簡單中的簡單方式,就是利用PhoneGap Build的線上服務,直接把所有的網頁資料打包上傳,應用程式就做好了,簡單吧!硬要把步驟寫得複雜一點的話是這樣:

1.把網頁檔案準備好,要有個index.html當首頁;
2.準備一個設定檔config.xml,在這裡有範例及說明;
3.把前面兩個步驟的網頁檔案跟設定檔壓縮到同一個zip壓縮檔裡面,記得不要把index.html和config.xml放到子目錄裡面去;
4.到PhoneGap Build的網站,需要先註冊一個Adobe的帳號;
5.把壓縮檔案上傳,應用程式就做好了!!
*如果檔案要上傳到google play上頭,記得要先做一個簽名認證的檔案,參閱相關說明

注意可能出錯事項:
1.在config.xml中的id可以用英文、英文數字混合,但是用純數字好像不行;
2.如果要上傳google play,在config.xml中的id不可以和別人重複;
3.如果要上傳google play,每更新一次要改一次versionCode和version;
4.上傳檔案的大小限制是15mb。

以上的步驟真的很簡單,成功率也很高,甚至你還可以同時開發Windows Phone、iPhone等其他不同版本的應用程式。但是15mb的限制對我來說是致命的,因為我要做加菲貓漫畫的離線版本,一年的檔案量就要20mb,所以我不得不選擇下面這個比較麻煩的方式。

以下是利用標準的Android應用程式開發工具加PhoneGap來完成,步驟如下(詳細流程與圖片可參閱:Android 4.0 SDK 下載安裝中文教學課程講義):
1.下載JAVA SDK,目前版本好像是8,很簡單,一直按下一步就可以;
2.下載Eclipse,這是JAVA應用程式的開發環境(選Eclipse IDE for Java Developers那個);
3.解壓縮上個步驟下載的檔案,不用安裝,直接打開資料夾中的Eclipse執行檔就可以執行;
4.執行Eclipse,在Help下面有Install New Software,輸入「https://dl-ssl.google.com/android/eclipse/」安裝ADT Plugin for Eclipse;
*2015.02.01更新
今天重新安裝以上步驟,重開Eclipse時出現「location of the android sdk has not been setup in the preferences windows」錯誤訊息,依照網路上的所有說明都沒辦法解決,也找不到adt安裝的位置,最後在stackoverflow找到一則零分的解決方法,解決了我的問題。這個解法是去google同時下載Eclipse和adt,然後直接解壓縮就可以使用,我懷疑是不是新版Eclipse的問題,總之暫時先解決了。

5.完成上個步驟後,重新開啟Eclipse應該會出現Install new SDK的歡迎畫面,記得要安裝最新的SDK和2.1或2.2版的SDK,這樣程式可以相容於更多機器;
6.如果上個步驟沒有自動跳出歡迎畫面,可以在Eclipse的window的android sdk manager處選擇下載;
7.到Eclipse的window的android sdk manager處按一下install packages,主要是要安裝build tools,安裝完重開Eclipse;

接著是安裝PhoneGap的步驟:
1.下載PhoneGap,建議下載2.2.0版,下載後解壓縮;
2.接下來的流程可以參閱官方說明文件
3.在上述步驟中,有個把Activity改成DroidGap的地方,這一行程式的開頭原本是protected,請改成public;
4.依照官方文件的說明,把你的網頁檔案都丟進asset/www的裡面之後,就可以把專案編譯成APK檔給平板安裝使用了。

要幫程式加入歡迎畫面:
1.參考官方說明文件

要讓程式預設安裝在SD卡:
1.修改AndroidManifest.xml檔,在 manifest 標籤中加入一個「android:installLocation」屬性(參考資料來源)。

修改應用程式的名字:
1.修改在res/value/string.xml中的app_name。

在〈用PhoneGap把網頁做成應用程式 HTML to APP〉中有 4 則留言

  1. owen

    強哥好 ^_^
    看到這篇 PhoneGap 的文章,其實還滿感動的!
    早期我也是有在使用 PhoneGap,
    後來企業開始使用 EZoApp 這套也是用 html+js+css 開發app的工具後,就開始使用 EZoApp,
    其實 EZoApp 也是利用 Cordova(PhoneGap) 來進行匯出或包裝的動作,可以發佈成 html 或 apk~ ^_^
    推薦給強哥參考看看!

    網站:http://www.ezoui.com/app/
    工具:http://jqmdesigner.appspot.com/
    影片:http://youtu.be/wzaubtL5az8

    回覆
  2. leo

    能否請教一開始測試都能正常顯示

    現在測試安裝畫面都是白的
    我是用

    來轉址包裝原本的網頁

    第一次使用沒問題,現在上傳後不管是掃描QR還是直接下載~安裝進入的畫面都是白的@@

    網路上找不到相關問題的處理XD

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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