PhoneGap學習文件

PhoneGap是一套可以用HTML5 + JavaScript開發手機應用程式的開放原始碼SDK,以下是如何開發Android APP的安裝設定及基礎使用

/********************************************************************************************************/
//    Android PhoneGap安裝設定說明文件
//    撰寫人:Matis Hsiao
//    撰寫日期:2011/07/14
//
/********************************************************************************************************/
1.Android開發環境設定:
    1.下載安裝最新版JAVA JDK,安裝Android SDK會先確認電腦的JavaSDK是不是符合需求
    2.下載最新版Google android開發SDK:
        2-1.安裝android SDK請注意安裝目錄不能有空白及中文或特殊符號   
        2-2.安裝完成後,開啟Android SDK and AVD Manager(SDK setup.exe),選擇Setting勾選Force https://…sources to be fetched using http://….
        2-3.SDK Manager可以做SDK更新或是下載新版的SDK
    3.下載安裝Eclipse:
        3-1.開啟Eclipse,選擇工具列Help中的Install New Software
        3-2.選擇Add,Name的欄位可自行輸入,該欄位是做為辨識Software用,Location請輸入http://dl-ssl.google.com/android/eclipse,選擇OK
        3-3.Eclipse會自動跟http://dl-ssl.google.com/android/eclipse取得工具目錄清單,可能會花1~2分鐘
        3-4.接著會出現Developer Tools的清單，把所有Checkbox都打勾後按下Next,之後只需一直按Next再來按Accept再按下Select All最後按下OK,便會開始自動下載更新
        3-5.選擇工具列Window-> Preferences
        3-6.打開Android標籤,在SDK Location中輸入你剛剛解壓縮Android SDK的位置後按下OK
        3-7.選擇工具列Window-> Android SDK and AVD Manager
        3-8.選擇Installed Packages標籤接著按下 Update All
        3-9.按下Accept後就可以Install,此時會花一點時間下載更新SDK
    4.建立模擬器環境:
        4-1.開啟Eclipse,選擇工具列Window-> Android SDK and AVD Manager,選擇Virtual Devices標籤,按下New建立模擬器
        4-2.Name欄位可以任意輸入英文的模擬器名稱
        4-3.Target欄位是選擇你需要的Android版本
        4-4.可以設定SD Card和螢幕外觀等詳細設定,接著按下Create AVD
        4-5.建立完成後,可以點選你剛才設定好的模擬器，按下Start->Launch,測試模擬器是否可以運作
   
2.PhoneGap開發設定:
    1.建立Android專案
    2.設定PhoneGap函式庫及網頁根目錄
      2-1.在Android專案下建立libs目錄及在assets目錄下建立www作為網頁根目錄         
        2-2.解開PhoneGap函式庫壓縮檔，選擇Android目錄，並做以下複製動作
            2-2-1.將phonegap.js複製到/assets/www/下 ,原檔名可能為phonegap.x.x.x.js,請把它改名為phonegap.js
            2-2-2.將phonegap.jar複製到/libs/下
            2-2-3.[匯入函式庫]:從Eclipse點選專案目錄右鍵更新目錄,再右鍵點選libs/phonegap.jar，選擇[Build Path」-> [Add to Bulid Path]
    3.設定Android專案使用PhoneGap為主要開發設定
        3-1.開啟android專案內的src/專案package/app.java檔案
          3-1-1.在程式碼上方加入 import com.phonegap.*; //匯入phoneGap函式庫
          3-1-2.將程式碼第7行 Class extends 名稱從Activity 改成 DroidGap
        3-1-3.將程式碼第12行 setContentView(R.layout.main);改成 super.loadUrl("file:///android_asset/www/index.html");
    4.設定AndroidMainifest.xml檔,加入欲使用的硬體功能
      4-1.右鍵點選專案中的AndroidManifest.xml，並選擇Open With -> Text Editor
      4-2.將以下的XML參數複製到<manifest xmlns:android="http://schemas.android.com/apk/res/android" .... android:versionName="1.0">之後
      <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="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.READ_PHONE_STATE" />
      <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.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" />
      4-3.將android:configChanges="orientation|keyboardHidden"加到activity屬性內的android:label="@string/app_name"之後,如以下xml設定
          <activity android:name=".AppActivity"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
3.PhoneGap開發:
        1.網頁存放位置為/assets/www/ 可將該目錄視為網頁根目錄
        2.Hello World範例:
            <!DOCTYPE HTML>
            <html>
            <head>
            <title>Hello Inside</title>
            <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
            </head>
            <body>
            <h1>Hello World</h1>
            </body>
            </html>
        3.執行模擬器操作,右鍵點選專案選擇Run As ->Android Application,就可模擬程式           
Q&A:
        Q1.如何使用Android手機實際操作?
            A:只要電腦可以抓到Android手機驅動,則Eclipse執行模擬器時會自動將App.apk安裝到你的手機裡
        Q2.為什麼模擬器效能不好?
            A:由於模擬器是依存在Eclipse,而Eclipse本身會吃記憶體,所以模擬器模擬出來的效能會比一般Android手機來的差,建議使用Android手機實際操作
        Q3.執行模擬器發生錯誤訊息
            A:請確認Android SDK是否有設定完成
           
           
           
參考網址:
        1.Android環境建置: http://www.inside.com.tw/2010/06/17/android-setup
        2.PhoneGap環境建置:http://www.inside.com.tw/2011/01/29/hello-inside-phonegap
          備註:PhoneGap環境建置的設定參數請注意"符號,該作者的參數是用”符號,或造成設定錯誤