【Android】將 web app 移植至行動裝置,成為原生 app

PhoneGap 是一組開源碼的中介 API,可將您的 web app 移植到幾乎目前市場上的所有行動裝置,讓您的 web app 變身成為原生 app,進一步資訊請至 http://zh.wikipedia.org/wiki/Phonegap,官方網站為 www.phonegap.com 和 cordova.apache.org(開源碼)。

目前 survey 的感想是別想以 PhoneGap 取代各種平台的原生 app,倒是企業可以考慮,針對自己公司需求開發 app,IT 人力也可因此集中火力,專注技術於 HTMLCSSJavaScript(這也是目前最熱門的 HTML5),寫一次就可以佈署到各式平台。

先到官網(您也可以到 cordova.apache.org,不過檔案略有不同,似乎是含原始碼的樣子...,而且好像沒有下面的 example 範例程式) 下載至您的電腦,目前的版本是 v2.7.0,下載的檔名為 phonegap-2.7.0.zip,我將它解壓至 D:\phonegap

在 D:\phonegap 下主要有 doclib 2 個資料夾和一些檔案,再進 lib 資料夾,就可看到各式支援的平台的資料夾,本文的目標是建立 Android 的 app,故再進 android 資料夾,可看到在 D:\phonegap\lib\android\ 下有個 example 資料夾,這裡就有個範例程式,拿這個來實驗。

啟動 ADT(Android Developer Tools,其實就是整合的開發 Android 用的 Eclipse),按功能表 File ==> New ==> Project...


選擇 Android Project from Existing Code,按 Next



Browse...




選取要滙入的專案所在位置 D:\phonegap\lib\android\example\


Finish 鈕,就滙入完成了,不過一滙入,馬上就出現專案有錯誤的 叉叉警告


開啟 AndroidManifest.xml 來修改
......
......

manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:windowSoftInputMode="adjustPan"
    package="org.apache.cordova.example"
    android:versionName="1.0"
    android:versionCode="1"
    android:hardwareAccelerated="true"
......
......
supports-screens

        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
......
......

application
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:hardwareAccelerated="true"
        android:debuggable="true"
......
......

activity
            android:name="example"
            android:label="@string/app_name"
                android:theme="@android:style/Theme.Black.NoTitleBar"
                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"



將上面刪除線的那幾段文字自 AndroidManifest.xml 真正刪除,因為範例的 Project properties 目標裝置定在 Android API level 7,而上述的 attribute 都是在 level 7 後才制定的。

執行 RUN,顯示的是很陽春的程式,只是單純展示這支程式可在 Android 上執行。





接下來, 自己新建一個專案試試

* 新建一個專案,專案名稱為:Test_phonegap

* 複製 D:\phonegap\lib\android\cordova-2.7.0.jar 到 Test_phonegap 專案目錄下的 libs 資料夾內

* 打開 Package Explorer,在 /libs/cordova-2.7.0.jar 按滑鼠右鍵
==> Build Path
==> Add to Build Path



* 在 /assets/ 下新建一個 www 資料夾,這裡就當是 web server 的根目錄,在這放置 web app。

* 複製 D:\phonegap\lib\android\cordova-2.7.0.js 到 Test_phonegap 專案\assets\www 資料夾內

* 複製 D:\phonegap\lib\android\xml 目錄 到 Test_phonegap 專案目錄下的 res 資料夾內


* 在 /assets/www/ 下新建一個 index.html,內容如下:



* 開啟 MainActivity.java,修改成如下:

import android.os.Bundle;
import org.apache.cordova.*;

// 繼承自 DroidGap
public class MainActivity extends DroidGap 
{
@Override
// 注意這裡是 public
public void onCreate(Bundle savedInstanceState) 
{
super.onCreate(savedInstanceState);
super.loadUrl(Config.getStartUrl());
}
}


* 修改 AndroidManifest.xml

這就是 web app 利用 phonegap 移植成行動裝置原生 app 的最小需求