我本身是 Native App Development 崇尚者(雖然沒啥開發經驗),理由很簡單,我樂於學習新的開發環境,想要 app 的效能最快,過去也曾探問過一些人的意見,有些大老闆就是力推 Native App ,理由就是要給使用者最好的使用經驗。然而,我的強者同事一直推薦 PhoneGap 的架構,他的理念是希望可以用一套固定且可延續性的學習經驗,應用在任何 mobile app 開發情境,這時就完全屬於 PhoneGap/HTML 的絕對領域!我也能體會在某個情境下並不太需要高效能的追求,這時候就可以好好善用 PhoneGap 所提供的便利性,只要是 Web Programmer 背景,會 HTML + JS + CSS 即可,剩下的只是安裝 app develpment 環境並看著 PhoneGap 使用手冊,也就行啦!

由於沒啥動力,就找了台北市政府九月才提供的公開資料(Open Data)當作範例,剛好可以透過 Javascript API 取得資料,再加上這類屬於查詢及資料呈列功能,不會有多嚴重的效率,所以,衝一發!

首先不厭其煩還是要裝一下 Android 開發環境,需要的可以逛一下 :Android & Eclipse 開發環境 - 第一次安裝筆記

接著從 Eclipse 建立一個 Project ,在此命名為 MyOpenData:

Application name: MyOpenData
Package name: tw.taipei.opendata
Create Activity: MyOpenDataActivity
Min SDK Version: 10 

接著從 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 。
    • add_libs_phonegap
  4. 更新 AndroidManifes.xml:
    • <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" />
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    • <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
      <intent-filter> </intent-filter> 
      </activity>
    • 如此圖:
      androidmanifest_phonegap
  5. 在 /assets/www 目錄中,新增想要的資料即可,如 index.html 
    • <!DOCTYPE HTML>
      <html>
      <head>
      <title>PhoneGap</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      </head>
      <body>
      <h1>changyy.pixnet.net</h1>
      </body>
      </html>
  6. 目錄結構
    • project_phonegap
  7. 成果:
    • phonegap result

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

  1. 下載 Javascript 函式庫和 CSS,加入 /assets/www 裡 (此例沒用到,改用外部資源)
  2. 更改 HTML 檔案,此例為 index.html
    • <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
  3. 新增 header、table 和 footer 效果
    • <!DOCTYPE HTML>
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <title>changyy.pixnet.net</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
      </head>
      <body>
      <div data-role="page">
      <div data-role="header">
      <h1>Page Title</h1>
      </div><!-- /header -->
      <div data-role="content">
      <p>Page content goes here.</p>
      </div><!-- /content -->
      <ul data-role="listview" data-theme="g">
      <li data-role="list-divider">changyy.pixnet.net</li>
      <li><a href="ios.html">iOS</a></li>
      <li><a href="android.html">Android</a></li>
      </ul>
      <ul data-role="listview" data-theme="g">
      <li data-role="list-divider">MyOpenData</li>
      <li><a href="1.html">PhoneGap</a></li>
      <li><a href="2.html">jQuery Mobile</a></li>
      <li><a href="3.html">Data.Taipei</a></li>
      </ul>
      <div data-role="footer">
      <h4>Page Footer</h4>
      </div><!-- /footer -->
      </div><!-- /page -->
      </body>
      </html>
  4. 成果圖:
    • phonegap_result2

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

  1. 目前 2011-09-03 共有 131 項資料可使用,在此挑選 "臺北市健保特約藥局"
  2. 成果:
    • 健保特約藥局_1
      健保特約藥局_2
  3. HTML 程式碼:
    • <!DOCTYPE HTML>
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
      <title>changyy.pixnet.net</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
      <script language="Javascript">
      $(document).ready(function(){
      $.ajax({
      type: "POST",
      url: "http://taipeicityopendata.cloudapp.net/v1/TaipeiOGDI/G67AHAMEDICATION10007/",
      data: "format=json&callback=yourCallback",
      dataType: 'jsonp' ,
      });
      });
      var regionTitle = new Array();
      var regionData = new Array();
      var regionHash = [];
      function yourCallback(data)
      {
      //console.log(data);
      var container = $('#output');
      regionTitle = new Array();
      regionData = new Array();
      regionHash = [];
      for( var i=0 ,cnt=data['d'].length ; i<cnt ; ++i )
      {
      var getRegion = data['d'][i]['地址'].substring(0,data['d'][i]['地址'].indexOf('區',0)+1);
      if( regionHash[getRegion] == undefined )
      {
      regionHash[getRegion] = regionData.length;
      regionData.push(new Array());
      regionTitle[regionHash[getRegion]] = getRegion;
      }
      regionData[regionHash[getRegion]].push(data['d'][i]);
      }
      container.empty();
      for( var i=0 ,cnt=regionData.length ; i<cnt ; ++i )
      {
      //console.log( '@'+i+',Title:'+regionTitle[i]+',Cnt:'+regionData[i].length );
      container.append( '<li><a href="#'+regionTitle[i]+'">'+regionTitle[i]+'藥局資料<span>'+regionData[i].length+'</span></a></li>' );

      var subpage = '';
      for( var j=0,subCnt=regionData[i].length ; j<subCnt ; ++j )
      {
      //container.append( '<li><h3>'+regionData[i][j]['機構名稱']+'</h3><p>'+regionData[i][j]['地址']+'</p></li>' );
      subpage += '<li><h3>'+regionData[i][j]['機構名稱']+'</h3><p>'+regionData[i][j]['地址']+'</p></li>';
      }
      $('body').append(
      '<div data-role="page" data-url="'+regionTitle[i]+'">'+
      '<div data-role="header" data-position="fixed">'+
      '<h1>'+regionTitle[i]+'</h1>'+
      '</div>' +
      '<ul data-role="listview" data-theme="g">'+
      subpage +
      '</ul>' +
      '<div data-role="footer" data-position="fixed">' + 
      '<h4><a href="#home">Back</a></h4>' +
      '</div>' +
      '</div>'
      );
      }
      $('ul').listview('refresh');
      }
      </script>
      </head>
      <body>
      <div data-role="page" id="home">
      <div data-role="header" data-position="fixed">
      <h1>健保特約藥局</h1>
      </div><!-- /header -->
      <ul id="output" data-role="listview" data-theme="g"><center><h3>Loading...</h3></center></ul>
      </div><!-- /page -->
      </body>
      </html>

心得:

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 了。


    changyy 發表在 痞客邦 留言(4) 人氣()