使用 PhoneGap、jQuery Mobile 與台北市政府開放資料(Open Data)

以下文章轉貼自這裡，先備份一份，有稍微節錄一下

從 PhoneGap 官網下載相關檔案，並依照使用手冊安裝：

1. 建立 /libs、/assets/www 目錄，將 phonegap-1.0.0.js 複製到 /assets/www，將 phonegap-1.0.0.jar 複製到 /libs，將 xml 複製到 /res 目錄中。
2. 更新 MyOpenDataActivity.java
   
   • package tw.taipei.opendata;
     
     import com.phonegap.*;
     //import android.app.Activity;
     import android.os.Bundle;
     
     public class MyOpenDataActivity extends DroidGap {
         /** Called when the activity is first created. */
         @Override
         public void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             //setContentView(R.layout.main);
             super.loadUrl("file:///android_asset/www/index.html");
         }
     }
3. 在 /libs 目錄按右鍵> Build Path > Configure Build Path > Libraries > Add JARs > 選 phonegap-1.0.0.jar 。
   • 
4. 更新 AndroidManifes.xml：
   • android:largeScreens="true"
     android:normalScreens="true"
     android:smallScreens="true"
     android:resizeable="true"
     android:anyDensity="true"
     />
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
   • 
      
   • 如此圖：
     
5. 在 /assets/www 目錄中，新增想要的資料即可，如 index.html 
   
   • 
     
     
     
     
     
     

     changyy.pixnet.net

6. 目錄結構
   • 
7. 成果：
   • 

接著來使用 jQuery Mobile ，透過這可以很便利地製作 Mobile App UI 及其事件操作，例如仿 iOS UITableViewController 等：

1. 下載 Javascript 函式庫和 CSS，加入 /assets/www 裡 (此例沒用到，改用外部資源)
   
   • jquery.mobile-1.0b2.min.js
   • jquery.mobile-1.0b2.min.css
2. 更改 HTML 檔案，此例為 index.html
   • 
     
     
3. 新增 header、table 和 footer 效果
   • 
     
     
      
     
     
     
     
     
     
     
     
     

     
     

     Page Title

     
     

     
     Page content goes here.
     

     
     

     
     
     • changyy.pixnet.net
     
     
     • iOS
     
     
     • Android

     
     

     
     
     • MyOpenData
     
     
     • PhoneGap
     
     
     • jQuery Mobile
     
     
     • Data.Taipei

     
     

     
     

     Page Footer

4. 成果圖：
   • 

接著使用 台北市政府開放資料 所提供的 Open Data API：

1. 目前 2011-09-03 共有 131 項資料可使用，在此挑選 "臺北市健保特約藥局"
   • API 資訊：http://data.taipei.gov.tw/ct.asp?xItem=3453096&ctNode=45112&mp=datataipei
2. 成果：
   • 
     
3. HTML 程式碼：
   • 
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     
     

     健保特約藥局

     
     

     Loading...

心得：

PhoneGap 的原理就是把開發者寫的 HTML + JS + CSS 用 Web 元件跑起來，在 Android 稱作 WebView ，在 iOS 稱作 UIWebView，因此，你也可以不需要 PhoneGap ，自行學樣包起來也沒問題。

使用 HTML 最大的優點是 UI 方面可以由 jQuery Mobile 包辦，這樣就算沒有像 iOS 漂亮的開發介面，也可以輕輕鬆鬆在 Android 或其他 mobile 平台達成。並且 UI 刻制對熟悉 CSS 的人來說，更是如魚得水啊。

最大缺點：

由於程式操作狀態從 Native app 移至 Web 元件上頭，當 native app 狀態改變時，不見得能對應到 Web 元件的狀態，例如偵測網路狀態或切換程式的動作等，有時希望每次一啟用程式，無論是從背景運作或是暫停模式中起來，都想要恢復至到一個畫面時，這時候 Web 元件就不見得會聽話。解法應該也是有的，只是解來解去會變成寫 native app 了。

[Android]資料庫更新

一個App寫好後，通常過了一段時間後突然發現有些功能不太夠用，要寫新功能，但左思右想，這個新功能需要在原本的資料庫增加欄位，這時候就比較麻煩了...

最快的作法是把舊的資料表刪除，然後重新建新的資料表，可是當我已經有廣大的使用者族群的時候，刪除舊資料對使用者來說是個災難性的體驗，所以這個方案在已經上線的app不太適用...
但如果再刪除之前，先把資料都存起來，這樣好像也滿複雜的，我只是想要把其中一個資料表增加欄位啊...

這裡查到一個不錯的作法，記錄於此備份一下，這裡的方法利用資料庫Transaction的功能。作法如下：

1. 修改DBHelpler裡的資料庫版本，若原本是1，就要+1修改成2
   
2. 一樣在onCreate()把最初建立的資料庫欄位做調整，程式碼範例：
   

   //輔助類建立時運行該方法    @Override    public void onCreate(SQLiteDatabase db) {    String DATABASE_CREATE_TABLE =           "create table newMemorandum("  + "_ID INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL,"         + "date VARCHAR,"         + "note VARCHAR,"         + "pw VARCHAR,"         + "reminder INT,"//新增欄位         + "type VARCHAR,"//新增欄位         + "memo VARCHAR"//新增欄位         + ")";        db.execSQL(DATABASE_CREATE_TABLE); }

3.  Overide函數 onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion)，程式碼範例如下：
   
   @Override
   public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
     //oldVersion=舊的資料庫版本；newVersion=新的資料庫版本
    
     if (newVersion > oldVersion) {
      db.beginTransaction();//建立交易
        
       boolean success = false;//判斷參數
           
       //由之前不用的版本，可做不同的動作    
       switch (oldVersion) {
       case 1:          
         db.execSQL("ALTER TABLE newMemorandum ADD COLUMN reminder integer DEFAULT 0");
         db.execSQL("ALTER TABLE newMemorandum ADD COLUMN type VARCHAR");
         db.execSQL("ALTER TABLE newMemorandum ADD COLUMN memo VARCHAR");
         oldVersion++;
                
        success = true;
        break;
       }
                   
        if (success) {
          db.setTransactionSuccessful();//正確交易才成功
         }
       db.endTransaction();
     }
     else {
       onCreate(db);
     }  
   }

完成以上 內容後，程式就會自動判斷資料庫的版本再進行Upgrade的動作。