[Cordova Hybrid APP] (二) 跨平台開發基礎認識

NET Developer有極大的比例都跟網頁開發相關,但目前市場主流都關注在行動裝置的開發,一般網頁設計師要轉各平台的APP原生程式開發勢必得付出不小的成本,PhoneGap(Cordova前身,下文一律稱為Cordova)已經在市場上行之有年,但以往都必須要另外安裝其它IDE開發工具,如Eclipse等工具來協助快速開發,今年微軟像是佛心來的,正積極的將Cordova收納到開發工具擴展套件中。

要學習Hybird APP,首先必須要先簡單的了解一下目前三種較常見的手機開發模式,Web APP、Hybrid APP、Native APP。


Web APP (網頁應用程式) :
此種該發模式其實就是一般的網頁程式,開發者運用HTML5、CSS3等相關技術,讓行動裝置在瀏覽網頁的時候,自動將網頁的內容調整成適合閱讀(不須縮放)的介面,Bootstrap框架就是一個常見的設計方式,因此不需要學習額外的技術就可以快速的開發,但畢竟是網頁程式,因此無法離線使用,也無法上架至各APP商城。
Native APP(原生應用程式) :
各平台手機的原生應用程式,顧名思義就是必須要學習多種平台的開發語言,因此必須付出相對較大的學習成本,不同於Web APP必須連線,且無法控制手機硬體,其最大的優勢是可以操作手機內建軟硬體資訊、提供最良好的UI用戶體驗

Hybrid APP(混合式應用程式) : 
市場上同時擁有多種平台開發技術的人才短缺,所以有人就想到若可以使用Web的跨平台開發方式,同時又可以控制手機提供的硬體該有多好,因此整合上述兩種開發模式優點的Hybrid APP就產生了,Hybrid APP使用Web為開發基礎再透過各平台APP平台的SDK建置後,所產出的檔案和原生程式一樣,因此允許上架。

儘管Cordova提供了控制硬體介面,但筆者個人認為,若你要開發的應用程式需要大量與手機進行互動的話,就必須謹慎的考慮開發方式,畢竟還是基於Web的開發基礎,載入和UI介面的反應都比原生的程式慢,如Game可能就不適合。

Cordova是一個建立在JavaScript為基礎的一套Hybrid APP Framework,它提供了JavaScript API來控制各平台手機的硬體,搭配HTML5+CSS3等相關UI框架,讓Web開發者可以不需要學習各平台的語言,就可以快速開發出多平台的APP。因此要學跨平台混合式APP,必須要先學會這些技術,本文不會特別針對網頁語言特別說明,主要的目的是要跟大家分享一下Hybrid APP。

在開始開發之前,必須要先選擇要搭配的UI框架,目前主要可分為JavaScript和CSS為主的兩種UI框架,筆者本人對於CSS的熟悉度比較沒有那個高,因此也沒有辦法特別分析CSS UI框架的優缺點,如果你希望使用CSS的UI框架來開發的話,可以選擇與MVC相同的bootstrap來當作視覺設計的部分。JavaScriptUI框架的部分,選擇的類型就比較多了,jQuery Mobile、Intel App Framework(前身是jqMobi)、jQTouch、Sencha Touch等等,網路上有有很多範例的網站以及效能評估的報告有興趣的可自行Google一下。

另外視覺化設計工具的部分,在此版本的Visual Studio並沒有特別收納哪種類型的UI Framework,因此暫時沒有此功能,雖然筆者長期不使用Design Mode的介面,但若你對於HTML5 Tag並不熟悉,可以使用第三方的設計工具來輔助,這裡推薦兩套視覺化開發工具可以協助產生相關語法,EZoAPP(中X公司開發的、中文化介面,使用jQuery Mobile)、Intel XDK(英文介面),但不建議直接使用透過該工具產出的語法所有語法,這兩套工具都有引用一些私有的JavaScript檔,筆者個人的開發習慣不喜歡引用一些不明的檔案,而且這裡建議使用,是因為不熟HTML5的新手們可以透過拖拉及設定所產生的語法來快速學習,但一個有經驗的Programmer應具備直接調整語法的能力,而不該只會使用精靈來寫程式。

筆者搜尋市面上各式各樣的Css Framework & JS Framework,JS和CSS框架的效能評比不在這裡的討論範圍(目前很多CSS框架都是基於RWD來設計的理論上效能應該會叫卓越),最後選擇了jQuery Mobile來當作UI框架,JQM不是效能最佳的,會選擇的主要原因是因為JQM所提供的UI介面是比較貼近原生APP的樣式(自己對於jQuery相對的也比較熟悉),另外一個重要的原是~~~~~~~

若你只是要開發Android程式大概沒有什麼問題(Google上架原則上是沒有在審核的),但是若你想要開發可以在iOS上架的應用程式,請特別注意功能性及使用者體驗,Adobe也曾明確的警告開發者,由於基於Corodva框架開發的程式可能會由於太慢或體驗起來不夠「原生」,而被蘋果應用商店拒絕上架。這個就很重要了,因為JQM的目的是希望可以取代原生的APP,而Bootstrap的目的是要將網站直接搬到行動裝置上(Web APP),因此在UI的設計上就比較不像原生的APP。

但遺憾的是,JQM雖然很像原生APP,但卻有一個萬惡的閃頻問題,有解決的方式,但就尙失了動畫的效果,後續筆者若找效能較佳的UI Framework在分享給大家。

下圖為Intel XDK工具的操作畫面

下圖為EZoApp工具的操作畫面


參考網站
使用者體驗教學,建議有興趣開發iOS Hybrid App的人也拜讀一下。
PhoneGap应用开发对策:如何通过苹果审核?
利用PhoneGap & HTML5 開發手機應用程式
Web App 被看衰,Hybrid App 才是新王道
Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

留言