【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 人力也可因此集中火力，專注技術於 HTML、CSS 和 JavaScript(這也是目前最熱門的 HTML5)，寫一次就可以佈署到各式平台。

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

在 D:\phonegap 下主要有 doc 和 lib 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 的最小需求