使用 PhoneGap 開發 Andorid APP

PhoneGap 是讓開發者，可以使用 HTML 和 JavaScript 開發跨平台 APP 的工具。雖然開發時，是使用 HTML 和 JavaScript 做出想要功能，但發佈成 APP 時，還是要透過原開發平台的工具才能分別產生各平台的 APP，或是上傳到 https://build.phonegap.com/ 官網產生各平台的 APP，只是從官網線上免費的話只能發佈一個APP。

這裡則是介紹，如何在原本的 Android APP 開發環境，開發使用 PhoneGap 的 Andriod APP。

步驟：

1. 到 http://phonegap.com/download/ 下載 PhoneGap，我下載的是 phonegap-2.5.0.zip
2. 解縮壓備用，例如解壓縮到 D:\phonegap-2.5.0
3. 在 Eclipse 新開一個 android 專案。此時目錄結構如下圖。
   
4. 複製 D:\phonegap-2.5.0\lib\android\cordova-2.5.0.jar 到 android 專案的 libs 資料夾底下。
   在 libs 資料夾上按右鍵，選「Build Path」->「Configure Build Path...」開啟設定視窗。按「Add JARs」，選擇 cordova-2.5.0.jar 加進去。
   
5. 在andriod 專案的 assets 目錄底下，建立 www 目錄，此目錄即是用來放網頁的地方，
   複製 D:\phonegap-2.5.0\lib\android\cordova-2.5.0.js 到 assets\www 目錄底下。
6. 複製 D:\phonegap-2.5.0\lib\android\xml 資料夾 到 android 專案的 res 資料夾底下。
   進行到這裡，此時目錄結構應該如下圖。
   
7. 修改 AndroidManifest.xml 檔。可比較 D:\phonegap-2.5.0\lib\android\example\AndroidManifest.xml 和 andriod 專案產生的 AndroidManifest.xml 檔案，進行以下修改。
   (註：19~34 行的 APP 權限設定，若開發的 APP 沒使用這麼多功能，沒用到的權限設定可以刪除)
   

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.example.mytest"
       android:versionCode="1"
       android:versionName="1.0" >
   
       <uses-sdk
           android:minSdkVersion="8"
           android:targetSdkVersion="17" />
   
       <supports-screens
           android:anyDensity="true"
           android:largeScreens="true"
           android:normalScreens="true"
           android:resizeable="true"
           android:smallScreens="true"
           android:xlargeScreens="true" />
   
       <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:theme="@style/AppTheme" >
           <activity
               android:name="com.example.mytest.MainActivity"
               android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
               android:label="@string/app_name" >
               <intent-filter>
                   <action android:name="android.intent.action.MAIN" />
   
                   <category android:name="android.intent.category.LAUNCHER" />
               </intent-filter>
           </activity>
       </application>
   
   </manifest>
     

8. 修改 MainActivity.java，讓程式執行時，是經由 PhoneGap 去執行 assets/www/ 底下的網頁。
   

   package com.example.mytest;
   
   import android.os.Bundle;
   import org.apache.cordova.*;//新增此行
   
   public class MainActivity extends DroidGap {// extends Activity 改成 extends DroidGap
   
    @Override
    public void onCreate(Bundle savedInstanceState) {// protected void 改成 public void
     super.onCreate(savedInstanceState);
     // setContentView(R.layout.activity_main);//沒用到，註解
     super.loadUrl("file:///android_asset/www/index.html");// 新增此行
    }
   }
   

9. 此時，設定的部份已經告一段落。
   下面的範例，是用網頁寫一個簡單的彈出訊息視窗。
   在 android_asset/www/ 資料夾底下新增一個 index.html 檔，內容如下：
   第 7 行：引入 PhoneGap 的 JS 檔
   第 9 行：確保 PhoneGap 已準備就緒，才執行 function onDeviceReady(){} 的程式碼，不過此例中，沒用到。
   第 15~20 行：使用 PhoneGap API，彈出 Notification.alert 視窗。
   http://docs.phonegap.com/en/2.5.0/cordova_notification_notification.md.html#notification.alert
   

   <!DOCTYPE HTML>
   <html>
       <head>
       <meta charset="utf-8"/>
       <title>test</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
       <script type="text/javascript">
       document.addEventListener("deviceready", onDeviceReady, false);
       function onDeviceReady() {
   
       }
   
       function showAlert() {
           navigator.notification.alert(
               '訊息...',
               function(){},
               '標題',
               '按鈕'
           );
       }
       </script>
     </head>
     <body>
       <p><a href="#" onclick="showAlert(); return false;">訊息視窗</a></p>
     </body>
   
   </html>
   

10. 執行結果
    

備註：

• 如果要畫面看起來更像一般的手機 APP，可以使用 jQuery Mobile 來做網頁，預設的一些樣式、效果， 看起來更符合手機。
• 雖然用 PhoneGap 可以將網頁包成 APP，但 PhoneGap API 沒提供的手機功能，便要看有無其他人寫的 Plugin，不然就要自己寫了。
• 某些情況，可能用HTML和JS達不到。例如我為了使用 GCM 推播訊息，找了Plugin https://github.com/marknutter/GCM-Cordova。我想在訊息來時有響鈴和震動，所以在 JS 寫了"navigator.notification.beep(2);" 和 "navigator.notification.vibrate(2000);"，一般情況都正常，但重開機後，雖然有收到通知訊息(通知訊息我另外寫在JAVA裡)，卻沒音效和震動。
  後來發現是掛在 GCMPlugin:sendJavascript  javascript:null 這裡，原來是，推播訊息來了，雖然Plugin的JAVA部份有正常執行，但要送給JS部份執行"navigator.notification.beep(2);" 和 "navigator.notification.vibrate(2000);"時，就失敗了。原因是，重開機後，APP沒有開啟，當然JS沒辦法執行。後來我的震動、響鈴，就都改寫到 JAVA 了。
• PhoneGap 1.9 之後，可以使用 CordovaWebView 方式，取代 DroidGap 方式執行。
  但我看官方的CordovaWebView說明文件，似乎有點簡略，例如官方寫前前兩個步驟
  「1.Use bin/create to fetch the commons-codec-1.6.jar」
  「2.cd into /framework and run ant jar to build the cordova jar (it will create the .jar file in the form cordova-x.x.x.jar in the /framework folder)」
  看不到framework資料夾在哪，後來才發現是要到 http://cordova.apache.org/ 下載source code。
  而執行 bin/create.bat 要安裝 JDK、Android SDK、Apache ant，JDK、Android SDK應該都有裝好了。Apache ant也不難裝，解壓縮，設環境變數即可。
怪的是 bin/create.bat 少什麼東西，它不會詳細跟你說，每次都說少了 JDK、Android SDK、Apache ant 其中之一。但我明明都裝了，還是不行。只好看 bin/create.bat怎麼寫，原來是判斷有沒有 JAVA_HOME 環境變數，有沒有java.exe javac.exe ant.bat android.bat 4個指令。把這些執行檔路徑、環境變數設好，就可以編譯了。
編譯完，才知道這兩個步驟只是要產生 cordova-2.5.0.jar、cordova-2.5.0.js、example...這些東西。
  後來又遇到一些怪問題，官網找不到，google後，雖然一一解決，簡單的APP也可跑，但看LogCat有出現一些錯誤訊息，暫時沒時間研究，所以目前我還是先用 DroidGap 的方式。