跨越行動網頁與原生軟體的隔閡 – PhoneGap

隨著行動運算的市場規模成長，許多Web開發者也紛紛的對行動平台感到興。然而，為了能夠在iPhone或Android上推出自己的軟體，就必須得花上不少時間先學會這兩個平台上的相關開發技術，讓許多Web開發者遲遲無法跨入這個領域，選擇用網頁技術開發行動版網頁作為替代，而PhoneGap便是可以解決這個問題的最佳選擇！

8/15更新！
JetPlurk的作者Irvin提供了他們在Coscup上Lightning Talk時展示的範例程式碼，讓有興趣的朋友可以參考。

跨平台間的共同開發環境

除了Android、iPhone兩大陣營之外，國外最大的Blackberry和透過Mameo展開反擊的Nokia也都佔有一定的市場。而每個不同的平台均有不同的開發工具、開發環境，對於行動開發者而言會是很大的負擔。

然而，在這些平台中，其實是有著共同的標準，也就是網頁標準HTML、CSS與JavaSript，且由於HTML的快速發展，一些新的技術像是HTML5或是CSS3的出現，讓網頁可以突破傳統的限制，成為功能完整的應用程式。更重要的是，這些行動網頁的軟體大多都可以幾乎不用修改、或是透過很少的修改便移植到不同的平台。

原生軟體的優點
由於是透過瀏覽器作為軟體的入口，所以仍然與一般的apps有明顯差異。更重要的是，這些網頁軟體沒有辦法像其他原生開發的軟體一般，透過軟體銷售平台獲利，而是必須在行動網頁中自行加入付費的會員機制或是廣告。

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

PhoneGap


PhoneGap便是為了要解決這個問題而誕生了！

這套開放原始碼的解決方案，便是提供了iPhone、Android、Palm和Blackberry平台的原生包裝軟體（wrapper），讓行動網頁可以被包裝成原生軟體的樣子，而不需透過瀏覽器作為入口。

背後的原理也沒有很複雜，PhotoGap所提供的其實是一個只有瀏覽器的軟體程式碼和幾個已經預設建立好的資料夾，而我們所要做的事情便是將寫好的網頁應用程式，包含HTML、CSS和JavaScript放到指定的資料夾中，便可以完成一隻以假亂真的原生應用軟體了！

以iPhone為例
就讓我們以iPhone平台作為例子，做一個簡單的介紹吧！

PhoneGap的安裝步驟以比較複雜，大概如下：

安裝好iPhone SDK（可以由蘋果的開發網站下載）
下載PhoneGap的最新版本
打開終端機並切換到剛剛下載的資料夾下，進入phonegap-iphone子目錄並且輸入make建立安裝檔
執行剛剛建立出來的安裝檔叫做PhoneGapLibInstaller.pkg進行安裝
接下來我們就可以開始建立第一個PhoneGap軟體了！
打開Xcode並且建立專案，你會發現在側欄中多了PhoneGap的選項，選擇建立一個新的PhoneGap專案後Xcode便會自動生成大多數的檔案。



我們會在專案目錄中看到其中有一個www資料夾，這個資料夾中便可以讓我們放置軟體中所需要用到的HTML以及CSS和圖像等檔案：



在我們加入適當的網頁內容後，另外需要設定BaseSDK以便讓Xcode編譯時可以使用最新版的iOS 4.0 SDK來進行編譯，我們在專案的項目上面按右鍵選擇Get Info：


接下來在選項中找到Base SDK，選擇iPhone Device 4.0即可：


最後則是在Xcode左上角選單中選擇Simulator，然後編譯就可以在模擬器中看到成果囉！


進階玩法
除了基礎的網頁之外，我們可以透過PhoneGap所提供的其他一些JavaScript API來與原生的UI元件做連結，像是加速器、攝影機等等，在官方網站的文件中都有記載相關的使用方式。

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

摘自：http://www.inside.com.tw/08/15/phonegap-eliminates-the-gap-between-mobile-web-and-native-apps