移動學習的跨平臺開發技術

文/張志禎

移動學習應用有望成為學習者通向數字學習世界的首要入口，而移動設備的碎片化決定了教育機構通常需要支持多個移動平臺。對教育機構而言，移動學習應用的類型以及開發技術路線的選擇是戰略層面的決策，跨平臺開發技術的現狀與發展趨勢是影響這一決策的重要因素。

隨著云計算、無線網絡和移動設備（尤其是智能手機和平板電腦）等技術的發展，移動學習在各級各類教育中的應用日益普及。移動學習應用已經成為日益動態、開放、智能化和移動化的教育信息化生態系統的重要“物種”，其重要性將日益凸顯：它有望成為學習者通向數字化學習世界的首要入口。

移動學習應用可分為資源型和工具型。資源型應用包含特定知識點的學習材料，僅支持固定內容的學習活動，如幼兒識字、背單詞應用等；工具型應用則側重于幫助學習者開展不局限于特定學習內容的學習活動，如訪問學習平臺、閱讀電子書、做批注、繪制思維導圖等。由于以上不同應用平臺的界面風格、交互方式、編程語言和編程接口等諸方面都存在差異，跨平臺支持的成本很高。為應對這一問題而涌現的移動應用跨平臺開發技術受到了普遍的關注。本文將對目前常見的跨平臺開發技術進行比較，以期為教育機構跨平臺移動學習應用的技術選型提供參考。

圖 1 三種類型移動應用的運行機制

三類移動學習應用的比較

目前存在三種開發方式和運行機制迥異的移動應用，即原生應用（Native App）、移動Web應用（Mobile Web App）和混合應用（Hybrid App），三者運行機制差異見圖 1。

原生應用是直接運行在移動設備操作系統中的應用程序。它可以通過操作系統直接訪問移動設備的服務和硬件，受到的限制最少，運行性能最高，因此其用戶體驗也最好。但由于不同平臺原生應用的開發工具、編程語言、編程接口及其背后的概念體系和設計理念存在很大差異，不同平臺間應用開發的知識經驗難以共享，造成跨平臺原生應用開發的成本高昂。

移動Web應用是運行在移動設備Web瀏覽器中、利用標準Web技術，即HTML/CSS/JavaScript，構造的Web應用。自Web2.0應用和理念被廣泛接受以來，隨著瀏覽器對Ajax技術的普遍支持、CSS規范和JavaScript引擎的增強、JavaScript客戶端框架的成熟，Web頁面不僅是“文檔”，更是“應用”的觀念已經深入人心。HTML5規范的提出和逐步完善將移動Web應用推向新的高度。目前移動Web應用的功能和性能已有大幅度提升，已經成為移動應用的現實選擇。移動Web應用不是直接運行在操作系統，而是運行在設備的獨立瀏覽器中，出于安全考慮，移動Web通常無法訪問相機、聯系人、本地存儲等資源。同時，雖然對移動Web應用的限制在日益放寬，但不同平臺、瀏覽器的支持還存在相當大的差異，若移動學習應用需要大量的離線存儲空間、需訪問設備硬件或需執行大量計算，則移動Web并不是很好的選擇。

混合應用實際是一種特殊的原生應用：它直接運行在操作系統中，因此是原生應用；但其大部分應用邏輯和界面元素采用Web技術實現，即大部分邏輯是由內嵌Web瀏覽器（如iOS的UIWebView和安卓的WebView）執行HTML/CSS/JavaScript代碼實現的。由于可以采用Web技術實現絕大多數功能的開發，因此可以大大提高開發效率，降低開發難度。同時，由于程序運行在操作系統，可以突破移動Web應用所受的限制，可訪問設備的各種硬件與基礎服務。

圖 1中原生應用和混合應用用虛線框，表示它可以直接調用操作系統的功能，而混合應用中的Web代碼也可以透過特定API訪問操作系統的功能。移動Web應用的運行環境——獨立瀏覽器，用實線框，表示其運行環境是受限的“安全沙箱”。表 1概括呈現了三種移動應用的優勢和不足。

表 1 三類移動應用的優勢和不足

移動學習應用跨平臺開發技術分析

移動應用跨平臺開發的需求廣泛而迫切，這催生了大量的跨平臺開發框架。圖 2呈現了典型的跨平臺開發技術。Adobe AIR支持用Flash/ActionScript開發跨平臺原生應用，Appcelerator Titanium支持用HTML/CSS/JavaScript開發跨平臺原生應用；移動Web應用可借助jQuery Mobile、Sencha Touch等框架提高跨平臺開發的效率；利用PhoneGap、Appcelerator Titanium等打包工具，可以將移動Web應用轉換為跨平臺的混合應用，而不同打包工具支持的平臺、功能和編程接口會存在較大差異。

原生應用的跨平臺開發技術

相對移動Web應用、混合應用而言，支持原生應用開發的框架相對較少。選擇Adobe AIR和Titanium Mobile的原因是：AIR可以將Flash動畫轉換為跨平臺的移動應用，由于大量學習資源是用Flash開發的，這對于移動學習應用的開發意義重大；Titanium支持上述三種應用的開發，尤其是可以將JavaScript代碼編譯、打包為本地應用，不但能夠大幅度提高應用性能，而且可提高代碼重用率：據統計，用Titanium開發iOS和安卓應用，可共享80%的代碼。

Appcelerator Titanium Mobile是一個基于JavaScript的移動應用編程框架，目前支持iOS和安卓應用開發，Blackberry支持尚在測試中且僅對付費用戶開放。其API包括用戶界面、數據存儲（本地文件系統和內嵌的SQLite數據庫）、遠程數據訪問、媒體（聲音、視頻、圖像、相冊和照相機）、位置服務等。Titanium Studio是它的集成開發環境，可實現本地測試（需Android SDK和Xcode的模擬器），但打包需連接Appcelerator的云服務。

Adobe集成運行環境（Adobe Integrated Runtime）是一個跨平臺的應用程序運行環境，支持用Flash、Flex等技術開發跨平臺應用。AIR將Flash播放器器作為其運行環境，ActionScript3是其唯一的編程語言。為了調用AIR運行時的額外功能，如文件系統訪問、原生窗口和任務欄集成、本地數據存取、加速計和GPS等硬件設備，Flash應用需要調用專門的API。Adobe提供免費的AIR SDK用于AIR應用打包；同時，AIR應用打包也集成到了Flash CS5+中，這大大提高了應用開發的效率。AIR最新版本是3.8，支持iOS4.3+、安卓2.3+以及BlackBerry Tablet OS。利用AIR的另外一個好處是：它還支持Windows、Mac OS等桌面環境，提高了桌面、移動應用代碼統一、重用的可能性。

移動Web應用的跨平臺開發技術

HTML5是近年最炙手可熱的概念之一，廣義上說它包含HTML、CSS和JavaScript等一套Web應用開發技術，三者分別負責Web應用的結構、外觀和行為，三者相互配合可方便地集成多媒體信息、創建復雜交互，降低乃至消除瀏覽器對第三方插件的依賴。

HTML5中新增的HTML標簽主要有多媒體集成標簽，如audio、video；更具語義特性且能提高多設備適應能力的文檔結構標簽，如footer、nav、section等；同時，取消了應由CSS實現的格式化標簽，如font、center等。CSS的當前版本是CSS2，正在開發中的CSS3主要提供了更靈活的布局、元素視覺效果和選擇器。在編程接口方面，除了原先的DOM接口，HTML5中新增了諸如即時二維繪圖（Canvas）、離線數據存儲、編輯、拖放、跨文檔通信、媒體播放等編程接口。

由于當前的Web應用通常有大量前端JavaScript代碼，而且DOM接口繁瑣笨拙，因此今天幾乎任何正式的Web項目都會基于一個或多個JavaScript庫。這里介紹兩個最常用移動Web的框架：jQuery Mobile（jQM）和Sencha Touch（ST）。

jQM基于成熟穩定的JavaScript框架jQuery，是一個輕量級的開源框架。它與HTML/CSS結合緊密，可增強HTML元素的外觀和行為，使界面風格與交互方式與平臺原生控件相近，大大提高了Web頁面在移動設備上的可用性。jQM應用的外觀和行為容易定制，具備jQuery和HTML/CSS基礎的開發者可以快速上手。jQM支持常見的移動瀏覽器。

圖 2 跨平臺移動應用開發技術

圖 3 jQuery Mobile和Sencha Touch的對比

ST同樣基于成熟的桌面Web框架：Ext JS，但它是重量級框架，提供了豐富的GUI組件庫、轉換效果和完善的事件處理機制。它較好地封裝了HTML/CSS等“底層技術”，可以用與桌面GUI庫（如Java的Swing）類似的概念進行開發。相比而言，它需要的學習時間更長，界面的定制更加復雜。它支持iOS、Android、BlackBerry、Bada、Kindle Fire等設備的瀏覽器。

圖 3是jQM和ST的對比，宏觀地看jQM是“自下而上”的，開發時需要編寫HTML代碼，jQM將其增強為移動界面組件，如按鈕、列表視圖等；ST是“自上而下”的，框架負責將與Java Swing類似的界面組件轉換為HTML/CSS。jQM小巧、性能和跨瀏覽器支持均表現優異，更適合靜態內容較多的資源型移動學習應用；而ST不僅是界面組件，更是一個完整的MVC（Model-View-Controller，即模型視圖控制器）客戶端編程框架，更“笨重”，更適合動態內容較多的工具型應用。

混合應用的跨平臺開發技術

從圖 2可以看出混合應用是借助打包工具將移動Web應用打包而得到的特殊原生應用。打包是將整個移動Web應用封裝到原生應用內嵌的Web瀏覽器中，Web應用的代碼可以調用打包工具提供的API突破獨立瀏覽器的安全限制，訪問設備的硬件和服務。當前已有大量的打包工具，而PhongGap和Titanium是比較有代表性的。

PhoneGap，即Apache Cordova，其優勢是對移動平臺的廣泛支持，它支持iOS、安卓、Bada、BlackBerry、Symbian OS、Tizen、webOS以及Windows Phone。PhoneGap為加速計、相機、聯系人、文件、地理位置、媒體、網絡、通知、存儲等服務提供了JavaScript 接口。PhoneGap混合應用可借助平臺開發工具（如Xcode、Android SDK）或Adobe PhoneGap Build云服務打包。開源學習管理系統Moodle的“官方”客戶端就是采用它打包的。該應用在iPad mini上的運行界面見圖 4，左圖為中圖虛線框部分放大，從中可以看出它允許上傳照片（照片庫中選擇或拍照）和聲音（錄音）。

Titanium也可以用于打包Web應用，它對iOS和安卓提供了完善的支持。Titanium還提供了集成開發環境（Titanium Studio）、應用商店和打包云服務。Titanium的優勢還在于它同時支持原生應用和混合應用，即可以將原生應用和混合應用“混合”，以最大限度提高應用的性能。

圖 4 利用PhoneGap開發的混合應用實例——Moodle Mobile

移動學習迫切需要移動應用的跨平臺開發

跨平臺開發技術的選擇

移動應用開發技術的發展趨勢是決策不可忽視的重要因素。綜合以上分析，可得到如下結論：

第一，Web技術（HTML5）是移動學習跨平臺開發的未來。Web技術天生的開放性使其具有無與倫比的活力。對移動學習機構而言，Web開發的核心在于提高設計和開發人員對于HTML/CSS/JavaScript這套基本技術和jQuery/jQuery Mobile/Sencha Touch等JavaScript編程框架的深入理解，——這些是移動Web應用和混合應用核心。此外，Nielsen和Budiu基于長期的移動可用性研究，認為從可用性和開發成本的角度看，在未來的某個時間點，最佳的移動策略將從原生或混合應用變為移動Web應用，即當前應選擇原生或混合應用，但未來應屬于移動Web應用。

第二，Adobe AIR特別適合在Flash技術上已有豐富積累的機構快速實現“移動化”。鑒于Flash在教育領域的廣泛應用，機構積累的不僅僅是大量的Flash資源，而且還有設計和開發人員的知識經驗，AIR使得這些資源和經驗可以繼續在移動平臺上發揮作用。

第三，對于資源型移動學習應用，開發技術的低難度、高效率至關重要，因此Flash+AIR和移動Web（jQuery Mobile）通常是最佳選擇。AIR和Web相比，Web的優勢在于其開放性，而且HTML5資源更易轉換為標準格式的電子書。

第四，對于工具型移動學習應用，應用類型和開發技術的選擇取決于工具的功能特點。在內置瀏覽器中運行的JavaScript代碼的執行效率顯然低于直接運行在操作系統中的原生代碼，因此若工具需要大量計算或執行較多底層操作，則最好選擇平臺專用語言和工具開發原生應用（當然Titanium也是可行的）。對一般性的移動學習工具，如學習平臺的移動客戶端，混合應用是非常理想的選擇。根據目標平臺的定位，若僅需支持iOS和安卓，則Titanium是很好的選擇；若需支持的平臺眾多，則PhoneGap更好。由于兩者都只是打包工具，還需要選擇一個編程框架，如jQuery Mobile、Sencha Touch、或者兩者的組合，都是不錯的選擇。

[1] NMC Horizon Project. NMC Horizon Project Preview 2013 K-12 Edition [EB/OL]. http://www.nmc.org/pdf/2013-horizon-k12-preview.pdf, 2013-05-16.

[2] 148Apps.biz. App Store Metrics [EB/OL]. http://148apps.biz/app-store-metrics/?mpage=catcount,2013-05-17.

[3] Nelson, R. Google Play for Education takes Android into the classroom [EB/OL]. http://androidcommunity.com/google-play-for-education-takes-android-into-the-classroom-20130515/, 2013-05-15/2013-05-17.

[4] 劉君芝. 大學生移動英語學習的現狀調查——以北京師范大學為例[D]. 北京師范大學教育技術學院，本科學位論文，2013-05.

[5] ADL Mobile Learning Team. Mobile Learning Handbook[EB/OL]. http://www.adlnet.org/wp-content/uploads/2011/08/MLHandbook20110809.pdf

[6] Wikipedia. Multiple phone web-based application framework [EB/OL]. http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework, 2013-05-16.

[7] Poulsen, T., Whinnery, K., Lukasavage, T. & Dowsett, P. Building Mobile Apps with Titanium [EB/OL]. http://assets.appcelerator.com.s3.amazonaws.com/app_u/bnapp.mobi, 2013-05-15.

[8] Wikipedia. Appcelerator Titanium[EB/OL]. http://en.wikipedia.org/wiki/Appcelerator_Titanium,2013-05-16.

[9] Wikipedia. Adobe Integrated Runtime. http://en.wikipedia.org/wiki/Adobe_AIR, 2013-05-16.

[10] W3C. HTML5 [EB/OL]. http://www.w3.org/TR/html51/, 2013-05-10.

[11] The jQuery Foundation. jQuery Mobile Introduction[EB/OL]. http://view.jquerymobile.com/1.3.1/dist/demos/intro/, 2013-05-15.

[12] Sencha. Sencha Touch Build Mobile Web Apps with HTML5 [EB/OL]. http://www.sencha.com/products/touch/features/, 2013-05-15.

[13] Moodle. Moodle Mobile [EB/OL]. http://docs.moodle.org/dev/Moodle_Mobile, 2013-05-16.

[14] Nielsen, J. & Budiu, R. Mobile Usability [M]. Berkeley: New Riders, 2012, pp33-36.

[15] Kleinfeld, S. HTML5 for Publishers [M]. Sebastopol: O’Reilly Media, Inc., 2011, pp. 41-43.