前言

據市場研究機構Canalys研究報告指出，全球智慧型手機於2011年Q3出貨量已經達到1.204億支，前三大OS分別為Android、Symbian、iOS，約佔80%的市佔率；目前智慧型手機的OS除了這三大陣營外，Blackberry的手機生產商RIM、Microsoft的Windows Mobile及三星自家推出的作業系統Bada也各占有一部分的市場；每個不同的平台均提供不同開發工具與程式環境，但是各個開發工具與程式環境大不相同，要開發適合各個平台使用的應用程式，對於行動開發者而言會是很大的負擔，同時也提高手機程式開發的進入門檻。

在不同的手機平台中，其實具有共同的標準，也就是網頁標準HTML、CSS與JavaScript，加上HTML5、CSS3等新技術的出現，讓網頁可以突破傳統的限制，成為功能完整的應用程式。更重要的是，這些行動網頁的軟體大多都可以不用修改、或是透過很少的修改便移植到不同的平台。

由於透過瀏覽器作為軟體的入口，所以仍然與一般的APP有明顯差異。加上這些網頁軟體沒有辦法像其他原生開發的軟體一般，透過軟體銷售平台（Android Market、App Store等…）獲利，取而代之只能在自家的行動網頁中加入付費會員機制或是廣告；另一瓶頸則是目前網頁軟體在安全性的考量上，不太可能直接或完全取得使用者的手機裝置的存取權限並使用其功能，這些限制也大大侷限了網頁軟體在手機應用的發展性。

這些困境造成了網頁開發者的兩難局面：雖然開發行動網頁作為軟體是容易且跨平台的，但最終成品與原生應用相比仍有明顯的差異，學習原生的開發卻又必須花費許多時間成本。

PhoneGap簡介

PhoneGap 最初是由「Nitobi」這間位於加拿大的公司在2008年8月所發起，到2010年中IBM也開始參與投入研發。它是一套能選擇採用「New BSD」或「MIT」license﹝註1﹞的開放原始碼的手持裝置框架解決方案，它主要的目的在於能讓開發人員透過一些Web技術﹝HTML + JavaScript﹞來存取行動裝置的Native API，而且它支援了目前各家大宗智慧型手機的作業系統平台的支援，包括iPhone、Android、Windows Phone、WebOS和Blackberry平台的原生包裝軟體（wrapper），讓行動網頁可以被包裝成原生軟體的樣子，而不需透過瀏覽器作為入口。

以下是目前PhoneGap對各家手機平台OS與行動裝置設備的支援。

開發人員只需要透過撰寫HTML + JavaScript的程式，就可以在這些平台上存取這些行動裝置所提供的功能，如：Camera、 Compass、Contacts等…，應用此框架解決了現階段一般的網頁應用程式無法直接或完全取得這些手機裝置的存取權限並使用其功能的問題，雖然W3C正針對行動裝置制定標準的Device APIs，不過現階段仍無法透過Web來存取照相機或相簿等功能，即使未來 Web可以直接存取手機的Native APIs，當發生一致性或相容性等問題時，PhoneGap仍然可以做為另一種替代方案，如同HTML5與Flash現階段的情況。



PhoneGap背後的應用原理並不複雜，他提供的其實是一個只有瀏覽器的軟體程式碼和幾個已經預設建立好的資料夾，而開發者只要將寫好的網頁應用程式，包含HTML、CSS和JavaScript放到指定的資料夾中，便可以完成幾乎如同原生的應用軟體。

PhoneGap的優缺點

一、優點

• 容易使用
  
  對程式開發人員而言，是網頁開發者所熟悉的HTML、JavaScript及CSS所構成，透過使用Framework將設備的整合盡量簡單化，可專注於應用程序的建構，PhoneGap目的就是通過Web設備的功能與本機的開放標準來解決設備的整合問題。


• 硬體的整合
  
  內建的Javascript Library已經建立好與各平台硬體的溝通、處理管道，使這些設備整合在一個一致的平台中，不管是啟動相機、呼叫羅盤或GPS定位皆呼叫PhotoGap的API即可，避免開發者必須以多個不同的軟體開發模式來實做邏輯。


• 跨平台的特性
  
  使用完全開放的網頁標準，只要符合PhoneGap支援的HTML5網頁標準，可以很方便的佈署在各種平台上面，達到Write once & Run anywhere。

二、缺點

• 效能較差
  
  利用PhotoGap來開發應用程式，因為本身多一層處理程序，因此會比原生的語言寫出來的App執行效能差。


• 客製化限制
  
  由於是使用框架來產生程式碼，因未必定會受限框架涵蓋的內容，無法百分百支援。

由於PhoneGap是利用網頁語言撰寫，因此也支援jQuery Mobile的使用。在手機上除了瀏覽器不同，OS 的差異也比 PC更加嚴重，jQuery 推出 jQuery Mobile版本，提供行動裝置跨平台的使用者介面的Library，只要使用這個簡單易用的 Framework，可以便利地製作各種Mobile App UI 及其事件，輕易做出跨裝置的Mobile Application。

一個jQuery Mobile的網頁主要以page為單位組成，每個page又可以分成header、content與footer三個區域，如下圖所示：



jQuery Mobile 採用HTML5的客製化資料屬性﹝data-*﹞，例如data-role 是用來標示每一個div﹝division﹞的角色﹝page/header/content/footer﹞。在一個HTML檔案中可以放多個pages，不過每次只會顯示一個page。

裝置操作API

除了基礎的網頁之外，我們可以透過PhoneGap所提供的其他一些JavaScript API來與原生的UI元件做連結，像是加速器、攝影機等等，詳細API如下。



PhoneGap開發環境需求

不同行動裝置的部署會需要不同的開發環境配置。

• iOS: Mac OS X (Intel-based) + XCode
• Android: JDK + Eclipse 3.4 + Android SDK
• BlackBerry: Windows + JDK + BlackBerry WebWorks SDK
• Symbian: Windows(cygwin) or OS X or Linux + S60 SDK

實際操作《For Android執行環境》

• 需先安裝Eclipse 3.4以上版本


• 安裝Android SDK + PhoneGap


• 開啟Eclipse，新增>其他>Android Project



《圖五》


• 建立一個專案[HelloProject]，輸入以下參數
  Application Name：HelloProject
  Package Name：com.phonegap.HelloProject
  Create Activity：app


• 在新建項目的根目錄下，新建兩個目錄
  /libs
  /assets/www


• 解壓縮PhoneGap檔，複製phonegap.js文件到/assets/www目錄下，複製phonegap.jar文件到libs目錄下


• 需對Eclipse下src\app.java進行配置
  • 加入import com.phonegap.*;
  
  
  • 修改繼承的類別，將Activity修改為DroiGap
  
  
  • 將setContentView();修改為super.loadUrl("file:///android_asset/www/index.html");


• 點選AndroidManifest.xml，選擇以Text Editor編輯


• 貼上以下程式授權訊息至版本名稱後面﹝如下圖﹞



《圖六》


• 新增一個index.html檔案至/assets/www目錄下


• 複製下面代碼至index.html文件中



《圖七》


• 如果看到頁面顯示「Hello World!」，就代表執行成功。

評估是否需使用PhoneGap

由於行動裝置應用開發還在發展初期，所以各家平台將會持續有大改版出現，PhoneGap要解決這種跨越平台及版本的即時同步並不容易，可能較不適合作為重要或大型應用程式的基礎﹝特別是準備要上架當作商品的專案﹞。

對於新的應用程式，若使用Web就能達到目的，不需要用到手機照相或定位等裝置內建功能，其實可考慮例如jQuery Mobile或jQtouch這種純網頁技術的解決方案即可。

若是真的需要開發裝置原生的應用程式，特別是準備做為商品上架販售，需要考慮為主流平台﹝如iOS或Android﹞客製化專屬的原生應用程式，某些功能也許可以搭配Web Services方式發佈，因為行動裝置的應用程式應該要強調節省系統資源、避免不必要的效能消耗。

但如果手邊的專案本身是以網頁為主，而行動版本只是提供給使用者瀏覽便利，還未考慮開發正式的行動專用版，嘗試使用PhoneGap製作雛形就是不錯的選擇。因為很容易就能讓Android及iOS都能試用，作為未來行動版本發展的評估。而且對既有的網站開發人員來說，只要熟悉HTML5及JavaScript技術就能開始進行，相較原生應用程式的開發，門檻比較低。

結論

利用PhoneGap開發的應用程式在App Store、Android Market中其實已有相當多的案例，像是JetPlurk這套流行的噗浪軟體便是透過PhoneGap所完成的。未來隨著行動市場的普及化，將會有越來越多網路業者和開發者投入行動市場，這一類的應用程式框架將會越來越受到重視、功能也將會變得更為完善。

註1：軟體授權條款包含MIT授權條款（The MIT License）、GNU 通用公眾授權條款（GNU General Public License）、GNU較寬鬆公共許可證（GNU Lesser General Public License）、BSD授權條款（Berkeley Software Distribution license），其中MIT是相對較寬鬆的軟體授權條款。

參考文獻

1.越行動網頁與原生軟體的隔閡 – PhoneGap
2.honeGap 跨平台的行動應用程式開發框架
3.平台手機服務開發 jQuery Mobile
4.業科技資訊室
5.oneGap官方網站