文/張志禎

移動(dòng)學(xué)習(xí)應(yīng)用有望成為學(xué)習(xí)者通向數(shù)字學(xué)習(xí)世界的首要入口，而移動(dòng)設(shè)備的碎片化決定了教育機(jī)構(gòu)通常需要支持多個(gè)移動(dòng)平臺(tái)。對(duì)教育機(jī)構(gòu)而言，移動(dòng)學(xué)習(xí)應(yīng)用的類(lèi)型以及開(kāi)發(fā)技術(shù)路線的選擇是戰(zhàn)略層面的決策，跨平臺(tái)開(kāi)發(fā)技術(shù)的現(xiàn)狀與發(fā)展趨勢(shì)是影響這一決策的重要因素。

隨著云計(jì)算、無(wú)線網(wǎng)絡(luò)和移動(dòng)設(shè)備（尤其是智能手機(jī)和平板電腦）等技術(shù)的發(fā)展，移動(dòng)學(xué)習(xí)在各級(jí)各類(lèi)教育中的應(yīng)用日益普及。移動(dòng)學(xué)習(xí)應(yīng)用已經(jīng)成為日益動(dòng)態(tài)、開(kāi)放、智能化和移動(dòng)化的教育信息化生態(tài)系統(tǒng)的重要“物種”，其重要性將日益凸顯：它有望成為學(xué)習(xí)者通向數(shù)字化學(xué)習(xí)世界的首要入口。

移動(dòng)學(xué)習(xí)應(yīng)用可分為資源型和工具型。資源型應(yīng)用包含特定知識(shí)點(diǎn)的學(xué)習(xí)材料，僅支持固定內(nèi)容的學(xué)習(xí)活動(dòng)，如幼兒識(shí)字、背單詞應(yīng)用等；工具型應(yīng)用則側(cè)重于幫助學(xué)習(xí)者開(kāi)展不局限于特定學(xué)習(xí)內(nèi)容的學(xué)習(xí)活動(dòng)，如訪問(wèn)學(xué)習(xí)平臺(tái)、閱讀電子書(shū)、做批注、繪制思維導(dǎo)圖等。由于以上不同應(yīng)用平臺(tái)的界面風(fēng)格、交互方式、編程語(yǔ)言和編程接口等諸方面都存在差異，跨平臺(tái)支持的成本很高。為應(yīng)對(duì)這一問(wèn)題而涌現(xiàn)的移動(dòng)應(yīng)用跨平臺(tái)開(kāi)發(fā)技術(shù)受到了普遍的關(guān)注。本文將對(duì)目前常見(jiàn)的跨平臺(tái)開(kāi)發(fā)技術(shù)進(jìn)行比較，以期為教育機(jī)構(gòu)跨平臺(tái)移動(dòng)學(xué)習(xí)應(yīng)用的技術(shù)選型提供參考。

圖 1 三種類(lèi)型移動(dòng)應(yīng)用的運(yùn)行機(jī)制

三類(lèi)移動(dòng)學(xué)習(xí)應(yīng)用的比較

目前存在三種開(kāi)發(fā)方式和運(yùn)行機(jī)制迥異的移動(dòng)應(yīng)用，即原生應(yīng)用（Native App）、移動(dòng)Web應(yīng)用（Mobile Web App）和混合應(yīng)用（Hybrid App），三者運(yùn)行機(jī)制差異見(jiàn)圖 1。

原生應(yīng)用是直接運(yùn)行在移動(dòng)設(shè)備操作系統(tǒng)中的應(yīng)用程序。它可以通過(guò)操作系統(tǒng)直接訪問(wèn)移動(dòng)設(shè)備的服務(wù)和硬件，受到的限制最少，運(yùn)行性能最高，因此其用戶(hù)體驗(yàn)也最好。但由于不同平臺(tái)原生應(yīng)用的開(kāi)發(fā)工具、編程語(yǔ)言、編程接口及其背后的概念體系和設(shè)計(jì)理念存在很大差異，不同平臺(tái)間應(yīng)用開(kāi)發(fā)的知識(shí)經(jīng)驗(yàn)難以共享，造成跨平臺(tái)原生應(yīng)用開(kāi)發(fā)的成本高昂。

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

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

圖 1中原生應(yīng)用和混合應(yīng)用用虛線框，表示它可以直接調(diào)用操作系統(tǒng)的功能，而混合應(yīng)用中的Web代碼也可以透過(guò)特定API訪問(wèn)操作系統(tǒng)的功能。移動(dòng)Web應(yīng)用的運(yùn)行環(huán)境——獨(dú)立瀏覽器，用實(shí)線框，表示其運(yùn)行環(huán)境是受限的“安全沙箱”。表 1概括呈現(xiàn)了三種移動(dòng)應(yīng)用的優(yōu)勢(shì)和不足。

表 1 三類(lèi)移動(dòng)應(yīng)用的優(yōu)勢(shì)和不足

移動(dòng)學(xué)習(xí)應(yīng)用跨平臺(tái)開(kāi)發(fā)技術(shù)分析

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

原生應(yīng)用的跨平臺(tái)開(kāi)發(fā)技術(shù)

相對(duì)移動(dòng)Web應(yīng)用、混合應(yīng)用而言，支持原生應(yīng)用開(kāi)發(fā)的框架相對(duì)較少。選擇Adobe AIR和Titanium Mobile的原因是：AIR可以將Flash動(dòng)畫(huà)轉(zhuǎn)換為跨平臺(tái)的移動(dòng)應(yīng)用，由于大量學(xué)習(xí)資源是用Flash開(kāi)發(fā)的，這對(duì)于移動(dòng)學(xué)習(xí)應(yīng)用的開(kāi)發(fā)意義重大；Titanium支持上述三種應(yīng)用的開(kāi)發(fā)，尤其是可以將JavaScript代碼編譯、打包為本地應(yīng)用，不但能夠大幅度提高應(yīng)用性能，而且可提高代碼重用率：據(jù)統(tǒng)計(jì)，用Titanium開(kāi)發(fā)iOS和安卓應(yīng)用，可共享80%的代碼。

Appcelerator Titanium Mobile是一個(gè)基于JavaScript的移動(dòng)應(yīng)用編程框架，目前支持iOS和安卓應(yīng)用開(kāi)發(fā)，Blackberry支持尚在測(cè)試中且僅對(duì)付費(fèi)用戶(hù)開(kāi)放。其API包括用戶(hù)界面、數(shù)據(jù)存儲(chǔ)（本地文件系統(tǒng)和內(nèi)嵌的SQLite數(shù)據(jù)庫(kù)）、遠(yuǎn)程數(shù)據(jù)訪問(wèn)、媒體（聲音、視頻、圖像、相冊(cè)和照相機(jī)）、位置服務(wù)等。Titanium Studio是它的集成開(kāi)發(fā)環(huán)境，可實(shí)現(xiàn)本地測(cè)試（需Android SDK和Xcode的模擬器），但打包需連接Appcelerator的云服務(wù)。

Adobe集成運(yùn)行環(huán)境（Adobe Integrated Runtime）是一個(gè)跨平臺(tái)的應(yīng)用程序運(yùn)行環(huán)境，支持用Flash、Flex等技術(shù)開(kāi)發(fā)跨平臺(tái)應(yīng)用。AIR將Flash播放器器作為其運(yùn)行環(huán)境，ActionScript3是其唯一的編程語(yǔ)言。為了調(diào)用AIR運(yùn)行時(shí)的額外功能，如文件系統(tǒng)訪問(wèn)、原生窗口和任務(wù)欄集成、本地?cái)?shù)據(jù)存取、加速計(jì)和GPS等硬件設(shè)備，F(xiàn)lash應(yīng)用需要調(diào)用專(zhuān)門(mén)的API。Adobe提供免費(fèi)的AIR SDK用于AIR應(yīng)用打包；同時(shí)，AIR應(yīng)用打包也集成到了Flash CS5+中，這大大提高了應(yīng)用開(kāi)發(fā)的效率。AIR最新版本是3.8，支持iOS4.3+、安卓2.3+以及BlackBerry Tablet OS。利用AIR的另外一個(gè)好處是：它還支持Windows、Mac OS等桌面環(huán)境，提高了桌面、移動(dòng)應(yīng)用代碼統(tǒng)一、重用的可能性。

移動(dòng)Web應(yīng)用的跨平臺(tái)開(kāi)發(fā)技術(shù)

HTML5是近年最炙手可熱的概念之一，廣義上說(shuō)它包含HTML、CSS和JavaScript等一套Web應(yīng)用開(kāi)發(fā)技術(shù)，三者分別負(fù)責(zé)Web應(yīng)用的結(jié)構(gòu)、外觀和行為，三者相互配合可方便地集成多媒體信息、創(chuàng)建復(fù)雜交互，降低乃至消除瀏覽器對(duì)第三方插件的依賴(lài)。

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

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

jQM基于成熟穩(wěn)定的JavaScript框架jQuery，是一個(gè)輕量級(jí)的開(kāi)源框架。它與HTML/CSS結(jié)合緊密，可增強(qiáng)HTML元素的外觀和行為，使界面風(fēng)格與交互方式與平臺(tái)原生控件相近，大大提高了Web頁(yè)面在移動(dòng)設(shè)備上的可用性。jQM應(yīng)用的外觀和行為容易定制，具備jQuery和HTML/CSS基礎(chǔ)的開(kāi)發(fā)者可以快速上手。jQM支持常見(jiàn)的移動(dòng)瀏覽器。

圖 2 跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)

圖 3 jQuery Mobile和Sencha Touch的對(duì)比

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

圖 3是jQM和ST的對(duì)比，宏觀地看jQM是“自下而上”的，開(kāi)發(fā)時(shí)需要編寫(xiě)HTML代碼，jQM將其增強(qiáng)為移動(dòng)界面組件，如按鈕、列表視圖等；ST是“自上而下”的，框架負(fù)責(zé)將與Java Swing類(lèi)似的界面組件轉(zhuǎn)換為HTML/CSS。jQM小巧、性能和跨瀏覽器支持均表現(xiàn)優(yōu)異，更適合靜態(tài)內(nèi)容較多的資源型移動(dòng)學(xué)習(xí)應(yīng)用；而ST不僅是界面組件，更是一個(gè)完整的MVC（Model-View-Controller，即模型視圖控制器）客戶(hù)端編程框架，更“笨重”，更適合動(dòng)態(tài)內(nèi)容較多的工具型應(yīng)用。

混合應(yīng)用的跨平臺(tái)開(kāi)發(fā)技術(shù)

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

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

Titanium也可以用于打包Web應(yīng)用，它對(duì)iOS和安卓提供了完善的支持。Titanium還提供了集成開(kāi)發(fā)環(huán)境（Titanium Studio）、應(yīng)用商店和打包云服務(wù)。Titanium的優(yōu)勢(shì)還在于它同時(shí)支持原生應(yīng)用和混合應(yīng)用，即可以將原生應(yīng)用和混合應(yīng)用“混合”，以最大限度提高應(yīng)用的性能。

圖 4 利用PhoneGap開(kāi)發(fā)的混合應(yīng)用實(shí)例——Moodle Mobile

移動(dòng)學(xué)習(xí)迫切需要移動(dòng)應(yīng)用的跨平臺(tái)開(kāi)發(fā)

跨平臺(tái)開(kāi)發(fā)技術(shù)的選擇

移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)的發(fā)展趨勢(shì)是決策不可忽視的重要因素。綜合以上分析，可得到如下結(jié)論：

第一，Web技術(shù)（HTML5）是移動(dòng)學(xué)習(xí)跨平臺(tái)開(kāi)發(fā)的未來(lái)。Web技術(shù)天生的開(kāi)放性使其具有無(wú)與倫比的活力。對(duì)移動(dòng)學(xué)習(xí)機(jī)構(gòu)而言，Web開(kāi)發(fā)的核心在于提高設(shè)計(jì)和開(kāi)發(fā)人員對(duì)于HTML/CSS/JavaScript這套基本技術(shù)和jQuery/jQuery Mobile/Sencha Touch等JavaScript編程框架的深入理解，——這些是移動(dòng)Web應(yīng)用和混合應(yīng)用核心。此外，Nielsen和Budiu基于長(zhǎng)期的移動(dòng)可用性研究，認(rèn)為從可用性和開(kāi)發(fā)成本的角度看，在未來(lái)的某個(gè)時(shí)間點(diǎn)，最佳的移動(dòng)策略將從原生或混合應(yīng)用變?yōu)橐苿?dòng)Web應(yīng)用，即當(dāng)前應(yīng)選擇原生或混合應(yīng)用，但未來(lái)應(yīng)屬于移動(dòng)Web應(yīng)用。

第二，Adobe AIR特別適合在Flash技術(shù)上已有豐富積累的機(jī)構(gòu)快速實(shí)現(xiàn)“移動(dòng)化”。鑒于Flash在教育領(lǐng)域的廣泛應(yīng)用，機(jī)構(gòu)積累的不僅僅是大量的Flash資源，而且還有設(shè)計(jì)和開(kāi)發(fā)人員的知識(shí)經(jīng)驗(yàn)，AIR使得這些資源和經(jīng)驗(yàn)可以繼續(xù)在移動(dòng)平臺(tái)上發(fā)揮作用。

第三，對(duì)于資源型移動(dòng)學(xué)習(xí)應(yīng)用，開(kāi)發(fā)技術(shù)的低難度、高效率至關(guān)重要，因此Flash+AIR和移動(dòng)Web（jQuery Mobile）通常是最佳選擇。AIR和Web相比，Web的優(yōu)勢(shì)在于其開(kāi)放性，而且HTML5資源更易轉(zhuǎn)換為標(biāo)準(zhǔn)格式的電子書(shū)。

第四，對(duì)于工具型移動(dòng)學(xué)習(xí)應(yīng)用，應(yīng)用類(lèi)型和開(kāi)發(fā)技術(shù)的選擇取決于工具的功能特點(diǎn)。在內(nèi)置瀏覽器中運(yùn)行的JavaScript代碼的執(zhí)行效率顯然低于直接運(yùn)行在操作系統(tǒng)中的原生代碼，因此若工具需要大量計(jì)算或執(zhí)行較多底層操作，則最好選擇平臺(tái)專(zhuān)用語(yǔ)言和工具開(kāi)發(fā)原生應(yīng)用（當(dāng)然Titanium也是可行的）。對(duì)一般性的移動(dòng)學(xué)習(xí)工具，如學(xué)習(xí)平臺(tái)的移動(dòng)客戶(hù)端，混合應(yīng)用是非常理想的選擇。根據(jù)目標(biāo)平臺(tái)的定位，若僅需支持iOS和安卓，則Titanium是很好的選擇；若需支持的平臺(tái)眾多，則PhoneGap更好。由于兩者都只是打包工具，還需要選擇一個(gè)編程框架，如jQuery Mobile、Sencha Touch、或者兩者的組合，都是不錯(cuò)的選擇。

[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] 劉君芝. 大學(xué)生移動(dòng)英語(yǔ)學(xué)習(xí)的現(xiàn)狀調(diào)查——以北京師范大學(xué)為例[D]. 北京師范大學(xué)教育技術(shù)學(xué)院，本科學(xué)位論文，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.