第185期 / March 5, 2013

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

以Web技術建立跨行動平台APP

作者/高易中

[發表日期:2013/3/5]

由於行動上網裝置(如智慧手機、平板)的快速普及,各類軟體工具為因應廣大且加速擴張的行動應用人口,近期逐漸趨向於小螢幕與觸控操作等特性的開發走向,製作出專屬於行動上網裝置的應用程式(統稱為APP)。但在目前市面上行動作業系統如此繁多的情況下,開發者是否真要為了製作某單一行動系統的APP, 就花費龐大時間去學習專屬開發語言呢? 且若此APP需要同時發佈於多個行動作業平台時,除了重新以別種語言全部改寫外,是否有其他更為便利的平台轉換方式呢?有鑒於此,本文共包含兩個部分,首先將介紹並教學要如何利用功能越來越強大的Web技術,撰寫出可通用於各類行動平台的Web APP。再來將進一步說明如何利用PhoneGap套件,封裝Web製作出可於七種行動作業平台正式上架,供使用者購買安裝的Hybrid APP。

行動作業系統趨勢

趕上行動潮流開發APP總是令人趨之若鶩,但目前市面上的行動作業系統種類實在過於繁多,常讓開發者一時不知從何下手,根據今年新的市佔率與成長率(如表一與圖一所示)。


《表一》IDC Worldwide Mobile Phone Tracker, August 8, 2012



《圖一》各行動平台出貨年增率 DIGTIMES , 2012/8


目前智慧型手機的市占已經明顯分流於Google Android與Apple iOS為兩大作業系統,而BlackBerry OS 、Symbian 等系統,則明顯由於不符合市場期待,導致原開發商停止持續更新或下放到低階機種而逐漸式微。此外由於APP市集的軟體總數與成長幅度,同樣是行動作業平台是否被開發者與市場看好的重要指標。正因如此目前APP開發量成長幅度最高,同時手機出貨年增率成長旺盛的Microsoft Windows phone,即使在市占率不高的情況下,仍然成為第三個被開發者重視的APP開發平台。

常被低估的APP開發門檻

為配合行動裝置的不同,APP通常還是會有所限制與區分,雖然近期多提倡可一版兼容於不同螢幕大小與解析度的APP開發規範,但部分廠商為能給予消費者更適用於各裝置的使用者體驗 ,還是會將APP分為平板與手機等不同版本。此外隨著行動平台的差異,各家APP在開發上都有自己的門檻與限制(如表二所示)。


《表二》三大行動平台相關開發資訊


iOS通常對於APP開發者來說,門檻算是較高的,需要具備Mac OS之電腦與Xcode開發環境,想要進行開發根據需求不同要另外支付99或299美金的開發/上架年費,但由於iOS擁有不低的手機市佔與優異的平板佔有率,且自家產品線單一的緣故,無論是手機或平板App都有相當高的支援度,故仍然是眾多App開發者的第一優先選擇。但要求的程式語言卻是專屬的Objective-C,對於一般開發者來說學習相對地大。

Android則完全採取自由開放的模式,開發者只要安裝JDK、Android SDK、Eclipse等免費開發工具於任何電腦上即可,更不必負擔任何開發/上架費用(除註冊費),但開發者仍需要具備一定程度的JAVA語言能力,且由於Android裝置的規格過於自由開放,須注意硬體規格不合(如螢幕解析度等)或作業系統版本不同的支援性差異。

而Windows Phone(以之前WP7而言)整體策略與iOS非常相似,雖然目前市佔很低但由於Microsoft的大力推廣並給予開發者獎勵(如開發競賽與獎金),目前App數量上的確有所進展且快速成長中。雖然硬體製造商眾多,但由於各種規格事先定義嚴格,故App(WP 7)支援度有著可媲美iOS的支援度,但若基於WP8環境開發的APP將為未來將僅WP8可使用且不向下支援 。與iOS一樣開發者需付出99美金的開發/上架年費(企業模式費用另計),並使用Windows Vista SP2 / Windows 7以上的作業系統,搭配Windows Phone SDK進行開發,且開發者須具備C#或VB.NET相關程式基礎。

綜合上述分析不難發現,除了軟體需求、硬體需求( 如iOS開發需Mac主機) 、開發/上架費用外,最令開發者感到頭痛的,就是需要學習自己可能完全不熟悉的新程式語言,因一般開發幾乎不可能同時精通三種以上語言,勢必要有所取捨其一或其二行動平台進行開發。更重要的是,當此APP大受好評銷售量驚人,為擴大市場與市占要轉換到其他行動平台發佈上架時,等於要將整個APP用另一語言重寫一次。更不能保證介面完全一致給予使用者絕對相同的操作特性,故造成開發者相當大的負擔,且若是Android行動平台可能還要另外考慮硬體規格差異過大,而需要撰寫不同版本或是偵測規格進行調整。

Web APP以跨瀏覽器取代跨平台

那麼是否有什麼方式可以不易受作業系統與硬體規格影響呢?這裡直覺就想到了Web技術,只要裝置具備瀏覽器與上網功能,就一定能夠支援Web的瀏覽,但是Web應該不管在運行效率、可用功能、硬體調用權限都遠不及APP不是嗎?事實上在HTML5以及CSS3等新技術規範的導入下,此種生態定律開始發生變化,尤其在各家廠商(如Apple、Google)逐漸捨棄對Flash Player的支援,改採取HTML5方案的情況下。雖然整體速度上還是有差異,但Web已經慢慢可以做到許多不遜於應用軟體的功能與炫目特效,透過Web GL幫助甚至連一些3D畫面都能直接由Web實作出來。另一方面透過新穎套件的推出,現在的Web更可以做到跟APP幾乎一致的畫面與操作模式,只是需要透過瀏覽器運行,此即是前陣子非常熱門的Web APP如圖2。而傳統需要專屬語言開發的APP,現在則多稱為Native APP。當然近期結合兩種特性逐漸發展的Hybrid App也成為第三種主流(過去Facebook與百度都有採用此類技術)。如表三所示。


《圖二》Google Voice與Google Gmail是Web APP的設計典範



《表三》三大APP形態比較表


對於開發者而言,Web App抬頭的最大優勢,就是技術的通用與延續性。且不考慮伺服端撰寫語言,Web開發技術幾乎是一體適用的,不容易受到作業系統或裝置硬體的限制,或需要用別種程式語言與開發環境(就算記事本都能開發)重新撰寫,尤其對原本就主攻Web的開發者來說,更是繼承原有技術輕易上手,這也是為何許多廠商選擇直接開發Web APP而非Native APP的主要原因。但當然也不會如此完美,雖不易受作業平台等環境影響,但由於Web技術始終沒有強力的統一規範(尤其是HTML5與CSS3),各家瀏覽器對於Web的解析與支援也不盡完全相同(如圖三、圖四所示),因此近期Web開發者通常需要克服的最大挑戰就是設計出能兼容於各家瀏覽器的Web頁面。但是對於Web APP而言難度相對較低,畢竟行動平台上瀏覽器選擇其實有限,且支援度最令人頭痛的舊版IE(6、7、8)也絕對不會出現。


《圖三》各瀏覽器對HTML5 API支援度比較表



《圖四》各瀏覽器對CSS3 attribute支援度比較表


分層實現HTML5與跨瀏覽器

依據W3C之標準一個Web Page可以劃分為4層架構(如下圖五所示)。本文將以ASP.NET為例,逐步分層介紹如何實現HTML5與CSS3等新技術,並達到兼容不同瀏覽器的目的。


《圖五》W3C Page Schema


一、Building

ASP.NET的IDE開發工具如Microsoft Visual Studio 2010預設是不支援HTML5格式的(VS 2012開始支援),故開發者須先將其升級至VS 2010 SP1(如圖六), 並使用擴充管理員(Extension Manager)額外安裝Web Standard Update for Microsoft Visual Studio 2010 SP1(如圖七),此套件將提供VS 2010辨識更多W3C標準的能力, 同時包含了HTML5與CSS3的驗證。


《圖六》下載安裝VS 2010 SP1升級套件



《圖七》以內建擴充管理員安裝Web Standard Update for Microsoft Visual Studio 2010 SP1


開發者只要將文件格式設定為HTML5(如圖八), 並撰寫正確的HTML5定義宣告,Building時VS 2010就能提供更完善的HTML5提示與建議,並可大幅減低原本因為不認識HTML5而出現的大量警告與錯誤訊息。


《圖八》將文件格式改為HTML5


且為了能確實支援多瀏覽器,並盡可能減少各瀏覽器在呈現上的差異,Reset的動作在此階段就顯得格外重要,如圖9所示Reset Definition區域的設置就是用於集中放置這須事先定義多瀏覽器差別的程式碼 ,防止瀏覽器繼續執行文件內容時產生錯誤 。如可加上判斷讓無法支援HTML 5的瀏覽器環境可以識別HTML 5標籤防止執行出錯。再來則是為了最小化不同瀏覽器對樣式表在渲染方法上的差異 ,進行的樣式歸零動作也就是CSS Reset(如圖十)。


《圖九》在頁面中加入Reset Definition區域



《圖十》CSS Reset 範例


二、Structure

根據W3C標準規範,所有需在頁面建構的HTML標籤都必須撰寫在body標籤內,而採用HTML 5架構撰寫與傳統HTML 4.01其實並無太多差異,只是多出了許多可使用的新標籤與特殊API,不過在一些觀念與習慣上必須做出調適,而這些習慣在於往後撰寫符合標準的標籤會更得心應手。如:W3C規定所有標籤必須小寫;HTML 5利用article與section標籤替換過多的div標籤來排版等。但由於HTML 5的主流標準格式目前尚未全面普及化,所以還是有可能遇到一些不被其他瀏覽器支援的問題,然而解決方法其實很單純,除了透過特殊判斷針對不同瀏覽器進行對應處理,或是引用一些幫助辨識HTML標籤的Java Script函示庫外,對於某些真的無法支援的HTML 5標籤,再轉而使用HTML 4.01的標籤或Java Script做替代方案即可。


《圖十一》將頁面建構的標籤放在body標籤內並符合撰寫標準


三、Performance

在安裝了Web Standards Update for Visual Studio 2010 SP1後,開發者在撰寫樣式表時可直接選用CSS 3.0的驗證標準,如圖12所示。利用CSS 3.0驗證標準可提供VS 2010在開發時辨識更多CSS 函式,並防止偵錯視窗出現錯誤訊息,提供更貼近W3C標準的開發環境。


《圖十二》將驗證標準設為CSS 3.0


另外使用CSS 3.0時有些指令目前在瀏覽器下是被設為選擇性使用的,必須使用如 -webkit-等CSS Properties,才能被開啟使用。如圖十三所示。


《圖十三》CSS Properties


最後如果僅開發Web APP可不用考慮,但若開發者希望其也可被電腦正常瀏覽,就必須要再設計IE Hack與CSS Hack(如圖十四、十五所示),藉由只有Internet Explore才能辨識的註解標籤,來讓電腦上的舊版IE可以執行不同的程式碼或樣式表內容。防止錯誤的發生並盡可能達成相似的顯示效果,即使使用者意外在電腦上使用舊版IE來瀏覽,也能達到一定的網站效果與功能。


《圖十四》IE Hack範例



《圖十五》CSS Hack範例


四、Activities

此層為目前瀏覽器競爭最激烈的部分,目前最多被使用的語言為EMCA-262,俗名稱為Java Script。由於各家瀏覽器不斷優化自己的Java Script Engine,造成有不同版本的EMCA-262標準在不同瀏覽器間使用,如:Internet Explore 6使用第三版EMCA-262標準;Chrome 17使用第五版EMCA-262標準。然而即使是同一版EMCA-262標準在不同品牌瀏覽器上也有許多差異的實作方法。

要克服此問題通常有兩種解決辦法,傳統做法就是利用函式偵測瀏覽器類別來做不同的措施,使得同一動作必須配合各品牌瀏覽器有許多套的程式碼內容。但這樣費工費時又不保證長久通用的作法並不建議,在此推薦第二種近期較為普遍的方式,即是將Java Script再架高一層成為跨瀏覽器的函式庫,使得撰寫內容可以支援多瀏覽器環境。依照之前w3tech 的調查,JQuery 是最為主流的函示庫(如表四所示),在前一百萬網站中達到44.9%的使用率,且在Java Script函式庫擁有85.2%市占率。故盡量使用JQuery 函示庫取代一般自行撰寫的Java Script,不僅可更簡單有效率地達成功能,更兼具了瀏覽器通用性的優勢。


《表四》JavaScript 函式庫佔有率 From w3tech 2012.2


創造媲美APP的畫面與特效

在完成跨瀏覽器的HTML5規格基礎後,再來要真正進入Web APP開發的重頭戲,那就是創造有如APP般的介面與特效。前述的各種規範所開發出的Web確實可被各種行動裝置正常瀏覽,但傳統給電腦觀看的Web畫面,對於小螢幕並以觸控操作的行動裝置來說, 使用上是相當吃力與不便的,為此開發者需要創造專屬於此的檢閱與操作畫面。

實際上可在Web中創造小型行動裝置或觸控螢幕專用畫面的工具非常地多,但本文主要將針對主流趨勢走向與易上手度作為評估,選擇目前最為熱門並且相容於現有Web技術,讓開發者運用上較為容易的jQuery Mobile作為介紹。

jQuery Mobile函示庫是繼承在JQuery 函示庫核心之上,但不同的是其主要功能為以部分Html5與CSS3等技術繪製出有如APP的操作畫面與專屬控制項(Layout Framework),並可自動針對螢幕大小與解析度做出縮放與重新編排(如圖16),此外透過Ajax動態載入方式,甚至連一些APP特有的動態特效與動畫都可自由呈現(如圖十七)。其具備以下特性:

1.可兼容目前所有主流行動平台和行動瀏覽器,甚至是各類新版的桌面瀏覽器。(詳細可參考http://jQuery mobile.com/gbs/ )
2.有效整合原先複雜的觸控與滑鼠事件。
3.繼承jQuery 核心語法,學習難度較低。
4.利用部分Html5與CSS3新技術,大量減低開發者需要的Script認識與撰寫量。
5.以特有的處理模式減低整理傳輸或運行大小,增加行動裝置瀏覽效率。


《圖十六》JQuery Mobile可創建出有如APP的畫面



《圖十七》JQuery Mobile連視窗翻轉與飛旋等動態特效都能快速達成


jQuery Mobile的使用方式,主要有三個基本步驟:(如圖十八)

1.宣告頁面為HTML5 document。(可參考上述跨瀏覽器規範)
2.include 必備的jQuery Mobile CSS、jQuery Mobile Library,可直接使用官方線上版網址,或是自行下載檔案。如果是ASP.NET可使用Microsoft CDN線上版網址以在IDE上獲得更多開發提示,但其通常版本更新較慢。
3.以jQuery Mobile所定義的語法,例如data-role等格式來定義各種structure。所有基本Web控件在瀏覽時,即會被轉為jQuery Mobile所定義的專屬控件規格。


《圖十八》JQuery Mobile基本使用方式


當然jQuery Mobile還提供了各種特殊的控件與特效,如:List View、Navigation Bar、Popup等。更可以利用類似於jQuery 的方式,以Java Script調用jQuery Mobile各種API,達到更多進階的客制化效果。

總體而言,只要確實遵守上述的HTML5與跨瀏覽器規範,並有效使用jQuery Mobile函式庫繪製出如APP般的操作方式,開發者即可無需學習多種程式語言與開發環境,直接藉由新型的Web技術,開發出可通用於所有行動平台的Web APP。

但jQuery Mobile的Ajax動態載入換頁就像一把雙面刃,雖然可給予使用者無刷新頁面感與3D絢麗的換頁特效,卻也因執行架構問題(實際上是把下一頁HTML內容直接載入現有頁面來顯示),導致下一頁的CSS與Java Script,甚至是純HTML因遺失或ID重複問題而無法正確運行,故開發者需特別注意來避免此問題,並適度地使用非Ajax動態載入的傳統整頁刷新方式進行換頁。

另外要注意的是,Web APP實際上就如同純Web頁面的存在,無法直接透過應用商店上架讓使用者下載與安裝,一定要經由手機瀏覽器進行連結與檢視,也代表了其運行多半必須要有網路的支援,離線運作是極難達成的。此外若開發者的APP功能涉及到一些進階的硬體調用,如攝影鏡頭,水平儀等,基本上以現有的純WEB APP技術是難以實現的,這也就是為何會有Hybrid App模式誕生的主要原因。

因此若開發者不只以Web APP為最終的實作成果,本文將接續介紹如何以PhoneGap等套件 ,有效將開發者的Web APP進一步封裝成可正式於應用商店上架供使用者安裝,並且可利用JavaScript間接調用各種行動裝置硬體API,做到各種更完整APP功能與效率的Hybrid App。

建立支援AJAX的Service

但要注意的是,Hybrid App之所以可以正常於各行動平台上架,卻又無需重新撰寫或修正,其最大的主因就在於僅HTML檔的轉移,也就是除了HTML、CSS、Java Script等Client端語言外,開發者在Hybrid App主體雖仍是Web開發,但需要捨棄所有的Server端語言,才能真正達到完全跨平台封包化。

那麼許多Web APP中以Server端語言撰寫,考量到商業邏輯安全性或無法由Client端語言達成的功能,若要實作成Hybrid App時該如何應對呢?我們可以先直接用Web開發思維來著手,這時就要動用到外部的Web Service技術,無論開發Service的Server端語言為何,只要手機有網路的存取,就能達到跨平台的服務呼叫,當然也支援Hybrid App的調用。

不過另一方面,也由於Web架構只剩下Client端語言,故Hybrid App需要以AJAX的方式來呼叫Web Service,故Service也需要支援對應的設定才行。以ASP.NET的WCF為例,就需要創建AJAX-enabled WCF Service的服務模式(如圖十九),此時預設資料傳遞模式即改為Json,除了可有效降低整體資料傳遞量外,更有助於Java Script的解析。此外若考慮到跨網域或是安全性問題,則可再加入JSONP (JSON with Padding)與SSL驗證模式。


《圖十九》加入AJAX-enabled WCF Service


將Web封裝成Hybrid App

其實Hybrid App只是一個統稱,並沒有一定的強制開發模式,甚至在Native App框架中直接嵌入Web View都是一種建置方式。另外如Facebook等公司都有自成一格的Native APP開發方案,故本文僅針對目前主流趨勢以及開發上手度,選擇最為熱門普及並適用於多數Web技術延伸,且讓小型的個別開發者能輕易上手並跨越多個行動平台的PhoneGap做為介紹。

PhoneGap是近期非常熱門的open source framework,主要是利用附加套件的模式,加在原生APP的IDE之上,進而作為原生API與Java Script的Interface,藉此達到快速build各種不同平台上APP (using HTML5, Java script and CSS)之目的 (如圖二十)。目前PhoneGap已提供iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada、Symbian等七大行動平台的支援。


《圖二十a》PhoneGap


但也因如此,開發者要先有一個觀念,那就是雖能確實以同一套程式碼製作不同行動平台的APP。但利用PhoneGap來實際build時,都需先安裝與建置該平台的Native App開發環境,也就是說舉例來說,若要創建出iOS APP,開發者仍需有Mac電腦才能進行build的動作(當然可先撰寫好WEB直接複製程式碼過去)。當然開發者也可以繳交年費的方式,採用近期新推出的PhoneGap Build雲端服務,讓撰寫好的程式碼直接透過遠端build的方式,快速製作出不同行動平台的APP。


《圖二十b》PhoneGap Build


另一方面附屬於Native App環境的模式,其實代表了開發者亦可自行加入Native Code的輔助,這給予了PhoneGap Hybrid App更大的變化性,也就是除了HTML5+JQuery Mobile的Web APP功能,以及PhoneGap API所提供的進階功能 (如相機、水平儀、震動)外,若有特殊需求或效能考量,開發者甚至可直接撰寫Native Code核心來大幅強化APP功能,但這當然與跨平台性是相違背的 (Native Code不能用在其他行動平台)。故要如何設計就要看開發者的實際取捨。

在此本文將以Windows Phone 7.5開發為例,說明如何利用PhoneGap有效整合至VS 2010,直接利用WEB架構開發出可正常上架,供使用購買、下載、安裝的Windows Phone Hybrid App,其步驟如下:

1.確認Windows Phone Native App軟硬體環境。達到Windows Phone 7.5的標準開發環境,如: Windows Vista SP2以上、Visual Studio 2010 SP1、Windows Phone SDK (如圖二十一)。



《圖二十一》在VS 2010安裝Windows Phone SDK


2.下載與佈署PhoneGap套件。至官網 (http://phonegap.com/ )下載最新版的PhoneGap (如圖22),將目錄 lib\ windows資料夾下的Starter.zip複製 (如圖23),在VS 2010 ProjectTemplates目錄 (預設為C:\Users\使用者名稱\Documents\Visual Studio 2010\Templates\ProjectTemplates)下創建Silverlight for Windows Phone資料夾,並將Starter.zip放置其中 (如圖二十四)。


《圖二十二》下載最新版PhoneGap



《圖二十三》複製Starter.zip



《圖二十四》將Starter.zip放置在VS 2010 ProjectTemplates目錄下


完成上述步驟後,在VS2010中點選新增專案,於C# .jpg'> Silverlight for Windows Phone中若能選擇PhoneGap (Cordova)專案,即代表佈署正式完成(如圖二十五)。


《圖二十五》測試是否能新增PhoneGap (Cordova)專案


3.在PhoneGap(Cordova)專案下以WEB APP架構build出Hybrid App。開啟或建立PhoneGap專案,在WWW資料夾下加入新項目(如圖二十六),選擇文字檔並將副檔名設為html(如圖二十七)。


《圖二十六a》在WWW資料夾下加入新項目



《圖二十六b》選擇文字檔並將副檔名設為html


完成上述步驟後,只要以標準Client端網頁撰寫方式(依循前面的HTML5跨瀏覽器規範),或是把之前以JQuery Mobile撰寫的Web APP,在去除Server端語言並改用AJAX呼叫Service後,轉移至WWW資料夾中,直接按下Play按鈕後,即可看到原本以Web架構的撰寫程式碼,如同Native App般可直接在Windows Phone Device或Windows Phone Emulator上運行 (如圖二十七),並可在成為APP後正常上架、販賣、下載、安裝。此外開發者更可透過調用PhoneGap專案專屬的JS檔,使用各類的PhoneGap API來強化APP整體功能,達到更接近Native App功能性的真正Hybrid App。



《圖二十七》Web頁面可直接被Windows Phone Emulator作為APP執行


結語

有鑑於市面上過於繁多種類行動平台所造成的開發障礙與轉移難度,本文首先引薦了最新的Web技術,介紹如何以ASP.NET為例,利用跨瀏覽器的HTML5撰寫標準有效克服不同瀏覽器的呈現差異,並使用JQuery Mobile製作出有如Native App般操作介面與特效,只要以瀏覽器檢視,就可通用於各種行動平台的Web APP。

接著進一步把Web APP的Server端語言邏輯切割為支援AJAX的遠端Service,將Client端語言的HTML,以Windows Phone 7.5為例,透過PhoneGap Framework整合進Native APP開發環境,build出以Web架構撰寫,卻可正常於七大行動平台上架、販賣、下載、安裝、更新的Hybrid APP,甚至可透過PhoneGap API的調用,完成各種原來只有Native App可達成的功能 (如相機、水平儀、震動)。確實為開發者指引了一條更具通用、技術繼承、快速開發以及搭配多樣性的新穎開發道路,並提供更易於上手的行動平台APP設計途徑給予剛入門者進行選擇。

參考資料

W3C (World Wide Web Consortium)
W3Techs (World Wide Web Technology Surveys)
jQuery Mobile官方網站
PhoneGap官方網站
Microsoft MSDN -使用 jQuery Mobile 及 ASP.NET 開發跨行動裝置網站
jquery/jquery-mobile ‧ GitHub

本文轉載自RUN!PC