PhoneGap 2.x包裝HTML文件為Android App

PhoneGap是一個行動開發框架
目的是讓開發者使用HTML5技術開發應用程式後，就能快速的部署到各平台
使開發者能專注在程式本身及減少學習上的成本
HTML5應用程式經過PhoneGap轉換後會變成原生應用程式
網頁本身會使用平台核心的瀏覽器功能讀取，例如：android.webkit.WebView
而透過呼叫PhoneGap的API，應用程式就能使用平台原生的相機功能、影片、音樂等

PhoneGap的官網：http://phonegap.com/
教學引導

在被Adobe買下後，PhoneGap的核心被捐贈給Apache基金會，並改名為Apache Cordova專案
本篇文章僅示範PhoneGap在Android平台的簡單使用
以Eclipse IDE為示範進行開發，建議先參考Android SDK開發環境設定
以下為開發工具版本，對於2.x版應該都適用
Eclipse：4.2 Juno
PhoneGap：2.5.0

首先在Eclipse中新建立 Android Application Project，大部分先設定預設值即可

建立後的專案畫面

在專案按右鍵進入屬性設定 -> [Run/Debug Settings]，編輯目前的專案

在Targets裡調整為 “Always prompts to pick device”
如此對於用Android實體手機進行開發/測試比較方便

在專案的assets目錄裡建立www目錄，並放入HTML相關檔案
接著解壓縮PhoneGap
在phonegap-2.5.0\lib\android目錄底下可以找到cordova-2.5.0.js和cordova-2.5.0.jar

cordova-2.5.0.jar放到剛才建立的project的libs目錄下
可以在專案屬性設定的Java Build Path -> Libraries -> Android Dependencies中看到檔案被引用了

cordova-2.5.0.js則放入www目錄，並記得在HTML檔案中引用
<script src="cordova-2.5.0.js"></script>
在專案的res目錄下新增xml資料夾，並複製phonegap-2.5.0\lib\android\xml下的config.xml於其中
此config.xml底下包含了常用的PhoneGap plugin引用設定
例如要透過PhoneGap API操作手機的相機、震動等功能前，均要確定是否有在config.xml引入
注意專案的res目錄裡的目錄、檔案命名及放置位置須遵守規範，否則會引發錯誤

參考phonegap-2.5.0\lib\android\example裡的AndroidManifest.xml設定
專案目錄下的AndroidManifest.xml修改為
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ragic"
android:windowSoftInputMode="adjustPan"
    android:versionCode="1"
    android:versionName="1.0"
android:hardwareAccelerated="true">

<supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

<uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
android:hardwareAccelerated="true">
        <activity
            android:name="com.ragic.MainActivity"
            android:label="@string/app_name"
android:theme="@style/AppTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

最後修改專案裡的MainActivity.java
修改的地方有 import org.apache.cordova.DroidGap;
MainActivity 繼承的類別改為DroidGap
然後onCreate裡改為直接讀取網頁super.loadUrl("file:///android_asset/www/index.html");
而不使用原本的setContentView(R.layout….);
這樣就完成了PhoneGap的使用設定

如果要用實體手機進行除錯的話，須確定除錯模式有開啟
USB除錯模式 – [設定] -> [開發] -> [USB除錯模式]
通常預設已經開啟了，直接將手機連結到電腦即可

執行 [Run as] -> [Android application]
選擇提示面板的第一個選項是用實體手機開發
第二選項則是模擬手機(在Android AVD Manager中設定)
選擇後按start即可看到發開的成果

最後提到PhoneGap的Debug
我們無法在一般介面上測試手機獨有的功能
所以用PhoneGap API的麻煩之一是除錯的需求
幸好PhoneGap官方提供了一個測試用的網址

輸入完測試用的帳號名稱後
會自動在網頁中的 step2、step3產生相對應的連結
將step2中產生的<script>插入HTML中，重新啟動Android application

接著點選step3的連結，在開啟的頁面中就可以透過console測試PhoneGap API的結果了

注意將App上架前一定要將Debug時插入的<script>拿掉

另外有一些效能優化上的建議( from PhoneGap台灣社群)，英文原文

1. 開啟 CSS 硬體加速 (不是萬靈丹，千萬不要過度濫用)

2. 小心瀏覽器 Reflow 帶來的影響
    DOM 盡量保持簡潔、可以用 CSS 處理的動畫、轉場效果就盡量不要用 JavaScript 做、
    盡量固定 DOM 的寬高等等...

3. 用 touch event 取代滑鼠事件

4. JavaScript 優化