ipad_sdk_overview_hero_20120610  

下一個劃時代的程式語言是什麼?以最近的趨勢來看HTML5呼聲似乎是最高的。

一方面因為它是更為新穎先進的網頁語法,另一方面也因為以網頁語法開發行動平台App的技術漸趨成熟所致;這也無法避免的在開發者間引發了網頁App對決原生App的戰爭。

目前來說以HTML5為主的網頁App特色在於入門門檻較低以及可輕易達成跨平台需求,而各平台原生App則是以完整的配套功能及較高的效能勝出。

無論你是哪一派的支持者,身為一個App開發者,廣泛的涉獵各個方向的開發技術不失是個提升自己的好辦法。

基於這個原則,我們就要來看看以PhoneGap製作iOS程式的簡單範例。

 

什麼是PhoneGap?

一般對於網頁App的理解,狹義一點可解釋為:以App平台內建的網頁元件讀取並呈現客製的互動性網頁內容。

許多的App正是透過這樣的架構將網頁設計成App的尺寸再以簡單的原生元件加以包裹上架。

其好處在於大大的降低開發的門檻,讓網頁設計的高手們也可以輕鬆產出App作品;缺點就是往往用到較少的裝置內建功能,而在iOS平台上送審時甚至可能被Apple以使用太少原生元件為由而退件。

PhoneGap最大的好處就在於他包括了完整的函式庫可針對iOS、Android等各平台去運用裝置的內建硬體,實作出跟原生App一樣的功能性;再搭配網頁App原本可輕易跨平台的特性,帶給App開發者另一種更為快速便利的選擇。

 ipad_sdk_overview_hero_20120610

 

 

 

 

PhoneGap/iOS App的製作如下:

  1. 作業系統需求:Mac OS X Lion (10.7.4)或以上
  2. 安裝Xcode4.5及iOS 6 SDK
  3. 安裝Xcode Commnd Line Tools (XCode Menu > Perference > Downloads > Command Line Tools)    
    001_cmd    
  4. PhoneGap官網下載頁面下載PhoneGap SDK,目前版本為2.7.0
    01_download  
  5. 解壓縮至任何一個資料夾,這裡使用Macintosh HD > demo
    02_extract  
  6. 移至Macintosh HD > demo,iOS SDK就在 phonegap-2.7.0 > lib > ios 資料夾之中
    03_ios_folder  
  7. PhoneGap新增專案需使用命令列工具,例如OS X的終端機。開啟終端機並移至iOS SDK所在資料夾底下的bin資料夾
    04_bin  
  8. 新增專案需輸入專案路徑、封包名稱及專案名稱三組資料。這裡將專案新增至demo資料夾之下的projects資料夾,封包名稱為com.demo.helloWorld,專案名稱就叫做HelloWorld;在bin資料夾下輸入以下指令執行:
    ./create /demo/projects/HelloWorld/ com.demo.HelloWorld HelloWorld
    05_create
     
  9. 專案新增完成,用Finder打開demo > projects >HelloWorld即可看到包括Xcode專案執行檔在內的幾個新增的檔案及資料夾
    06_success  
  10. 用XCode開啟剛剛新增的專案執行檔HelloWorld.xcodeproj
    07_xcode  
  11. 執行iPhone模擬器就可以看到可愛的PhoneGap機器人出現在模擬器畫面上及APACHE CORDOVA(PhoneGap的底層軟體)字樣
    08_simu  

以上就是用使用PhoneGap製作基礎iOS App的方法。稍微研究一下專案檔的內容就會發現大部份的程式碼是圍繞著其中的www資料夾及其內容作發展;這跟常見的網頁結構極為類似。Android版本的製作除了初期安裝設定的流程有所出入外其餘也如出一撤,頗符合跨平台開發的需求。

本次介紹就到此為止,下此有機會再來談談jQuery Mobile的使用;這是一款特製的jQuery函式庫,用來模仿製作類似iOS跟Android常見的介面形態有著不錯的效果。下次見。

 

參考資料:

  1. PhoneGap官網iOS新手導引
  2. PhoneGap維基百科

 

 

 

 

創作者介紹
創作者 AppNote 的頭像
AppNote

Fun I Phone 我的手機派對!

AppNote 發表在 痞客邦 留言(3) 人氣()