魯學(xué)亮，陳金燾，孫秋瑞，劉 臻

(北京師范大學(xué) 信息網(wǎng)絡(luò)中心，北京100875)

一、移動(dòng)應(yīng)用發(fā)展現(xiàn)狀

移動(dòng)智能終端的快速發(fā)展與普及在全球智能手機(jī)強(qiáng)勁發(fā)展的形勢(shì)帶動(dòng)下，普通功能機(jī)正在被智能終端逐步替代。根據(jù)艾媒咨詢?nèi)涨鞍l(fā)布的數(shù)據(jù)顯示，2011年中國(guó)手機(jī)用戶數(shù)將超過(guò)9億，達(dá)到9.3億，年增長(zhǎng)率為8.1%。數(shù)據(jù)還顯示，中國(guó)市場(chǎng)手機(jī)用戶存量數(shù)據(jù)中，功能手機(jī)用戶由2010年第四季度市場(chǎng)占比88.0%下滑到2011年第三季的80.5%；相反智能手機(jī)則呈現(xiàn)猛烈增長(zhǎng)趨勢(shì)，由2010年12.0%的用戶市場(chǎng)占比，增長(zhǎng)到2011年第三季度的19.5%，預(yù)計(jì)2011年第四季度中國(guó)智能手機(jī)用戶市場(chǎng)占比將達(dá)24.0%。 隨著智能手機(jī)的快速普及，基于智能終端的應(yīng)用的需求也越來(lái)越大，現(xiàn)有的基于PC的各種應(yīng)用開(kāi)始向智能終端平臺(tái)轉(zhuǎn)移。移動(dòng)數(shù)據(jù)分析公司Flurry曾發(fā)布多份關(guān)于App的發(fā)展趨勢(shì)報(bào)告，這些報(bào)告顯示出移動(dòng)App正對(duì)很多行業(yè)產(chǎn)生影響，報(bào)告顯示2011年以來(lái)，人們花費(fèi)在App上的時(shí)間已經(jīng)超過(guò)網(wǎng)頁(yè)，而且勢(shì)頭不減。因此各大互聯(lián)網(wǎng)公司紛紛推出自己應(yīng)用的移動(dòng)版本，傳統(tǒng)PC上的應(yīng)用幾乎都能在智能終端上實(shí)現(xiàn)。雖然移動(dòng)應(yīng)用數(shù)量在快速增加，但基于高校校園，服務(wù)于師生學(xué)習(xí)、生活的移動(dòng)應(yīng)用卻非常少，現(xiàn)有的校園移動(dòng)應(yīng)用也主要是以發(fā)布新聞資訊類為主，主要代表有復(fù)旦大學(xué)推出基于IOS的“i復(fù)旦”、中山大學(xué)推出的“iSYSU”等。從內(nèi)容上看主要以校內(nèi)新聞、黃頁(yè)、通知、日歷等資訊為主。

移動(dòng)應(yīng)用產(chǎn)品眾多，因此常常要考慮多個(gè)平臺(tái)的支持，單一平臺(tái)很難保證應(yīng)用的覆蓋面或者換句話說(shuō)就是用戶群體的量和持續(xù)的活躍性上從長(zhǎng)期的角度而言往往存在短板。另外從開(kāi)發(fā)的角度而言，多平臺(tái)的支持往往需要建立不同的技術(shù)團(tuán)隊(duì)，而平臺(tái)之間開(kāi)發(fā)技術(shù)也是完全迥異的。開(kāi)發(fā)一個(gè)具有相同業(yè)務(wù)的本地應(yīng)用程序（native App）需要使用到不同平臺(tái)的框架和開(kāi)發(fā)語(yǔ)言，其中Sym bian使用 C/C++語(yǔ)言、IOS使用 Object C以及Android使用Java應(yīng)用開(kāi)發(fā)技術(shù)，幾乎是完全無(wú)法融合的，PhoneGap等跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架應(yīng)運(yùn)而生[2]，Phonegap簡(jiǎn)單來(lái)說(shuō)是一個(gè)中間件，為移動(dòng)前端提供訪問(wèn)移動(dòng)終端設(shè)備及資源的接口。采用統(tǒng)一的標(biāo)準(zhǔn)的html、javascript、css等Web技術(shù)開(kāi)發(fā)，通過(guò)不同平臺(tái)的瀏覽器訪問(wèn)來(lái)實(shí)現(xiàn)跨平臺(tái)。開(kāi)發(fā)人員可以根據(jù)具體需求選擇是Native App或者是Web App還是以PhoneGap框架為代表的Hybrid App。

二、Web App與Native App的比較

根據(jù)“2011開(kāi)發(fā)者經(jīng)濟(jì)調(diào)查報(bào)告”[1]中的數(shù)據(jù)可以觀察手機(jī)各平臺(tái)的開(kāi)發(fā)現(xiàn)狀。其中手機(jī)平臺(tái)有 Android、Blackberry、IOS（iPhone）、Java ME、Mobile Web、Symbian、Windows Phone。其中平臺(tái)使用的比例67%的開(kāi)發(fā)者使用Android平臺(tái)，比2010年上漲 8%。59%的開(kāi)發(fā)者使用IOS（iPhone）平臺(tái)，比 2010年上漲 9%。56% 的開(kāi)發(fā)者使用Mobile Web。比2010年上漲16%。46%的開(kāi)發(fā)者使用 Java ME，比 2010年下降 4%。45%的開(kāi)發(fā)者使用黑莓平臺(tái)，比 2010年上漲5%。38%的開(kāi)發(fā)者使用Symbian，比 2010年下降 8%。36% 的開(kāi)發(fā)者使用 Windows Phone，比 2010年下降 3%。對(duì)比圖例如下圖所示。

從圖1可以看出Mobile Web的使用有了令人驚訝的轉(zhuǎn)變，在開(kāi)發(fā)者的意愿中已經(jīng)占據(jù)了第三位?？梢?jiàn)，跨平臺(tái)的需求正在快速增長(zhǎng)，這是一個(gè)非常值得關(guān)注的趨勢(shì)。移動(dòng)應(yīng)用程序分為三類：Native App，基于智能終端平臺(tái)開(kāi)發(fā)的本地應(yīng)用程序，不具備跨平臺(tái)；Web App，利用Web技術(shù)，能夠做出超越傳統(tǒng)理解網(wǎng)站的功能，讓它更具有交互體驗(yàn)，讓這個(gè)App看起來(lái)和用起來(lái)更像Native App；第三類叫Hybrid App，它雖然看上去是一個(gè)Native App，但只有一個(gè)UI WebView，通過(guò)調(diào)用移動(dòng)終端的內(nèi)置瀏覽器訪問(wèn)Web應(yīng)用，用戶在體驗(yàn)上更像客戶端，更高效。

圖1 平臺(tái)使用比例分布圖

三種App中Native App的用戶體驗(yàn)最好，但不能移植到其它不同的平臺(tái)，開(kāi)發(fā)者必須同時(shí)維護(hù)多個(gè)版本且開(kāi)發(fā)成本較高。Web App開(kāi)發(fā)成本低，跨平臺(tái)和終端，但由于受到網(wǎng)速等因素的限制，用戶體驗(yàn)無(wú)法超越原生應(yīng)用，但隨著HTML5的推廣和應(yīng)用，Web App的用戶體驗(yàn)將越來(lái)越好。在系統(tǒng)更新方面，Web App使開(kāi)發(fā)者有更強(qiáng)的對(duì)產(chǎn)品的控制力，可以方便的對(duì)應(yīng)用進(jìn)行更新，并不涉及到客戶程序，而native App則完全由使用者來(lái)控制，如果用戶不人為的進(jìn)行或者同意服務(wù)器端推送更新，開(kāi)發(fā)者則無(wú)能為力。由于Native App的開(kāi)發(fā)成本較高，為了能使Web App的體驗(yàn)和功能更趨近于Native App，大量的移動(dòng)應(yīng)用開(kāi)發(fā)框架的出現(xiàn)為開(kāi)發(fā)者提供了更多的便利。其中比較流行的有 Jquery mobile、phonegap、Sencha Touch同時(shí)也有以HTML5+Native加殼方式的App。在“掌上師大”的開(kāi)發(fā)中，采用Web App加客戶端的設(shè)計(jì)方式，將更多的工作放在服務(wù)器端，針對(duì)不同的智能終端平臺(tái)開(kāi)發(fā)簡(jiǎn)單的“殼”的方式實(shí)現(xiàn)。

三、移動(dòng)校園應(yīng)用客戶端設(shè)計(jì)與實(shí)現(xiàn)

移動(dòng)應(yīng)用在教育領(lǐng)域得到了快速的發(fā)展。近年來(lái)，配備智能手機(jī)和平板電腦到高校報(bào)到的學(xué)生越來(lái)越多，他們期望能夠用移動(dòng)應(yīng)用實(shí)現(xiàn)校園資源導(dǎo)航、使用校園服務(wù)。高校教師也想通過(guò)移動(dòng)終端改變現(xiàn)有的教學(xué)模式，給學(xué)生無(wú)處不在的學(xué)習(xí)環(huán)境?！罢粕蠋煷蟆币苿?dòng)應(yīng)用項(xiàng)目正是服務(wù)于學(xué)校師生的跨平臺(tái)的智能終端應(yīng)用程序?！罢粕蠋煷蟆币苿?dòng)應(yīng)用項(xiàng)目一期的功能設(shè)計(jì)包含了校內(nèi)快訊、學(xué)校通知和公告、學(xué)術(shù)活動(dòng)、地圖服務(wù)、校園卡業(yè)務(wù)辦理、校內(nèi)黃頁(yè)和個(gè)人信息綜合查詢等功能。項(xiàng)目推出了Android、IOS、Windows Phone等版本。 圖 2所示為“掌上師大”的系統(tǒng)架構(gòu)示意圖，本文將介紹不同的智能終端平臺(tái)的客戶端的設(shè)計(jì)與實(shí)現(xiàn)。圖3所示為Android版的應(yīng)用主界面示意圖。

1.Android客戶端的設(shè)計(jì)與實(shí)現(xiàn)

Android提供了內(nèi)置的瀏覽器，該瀏覽器使用了開(kāi)源的WebKit引擎。在Android中使用瀏覽器需要通過(guò)WebView視圖組件來(lái)實(shí)現(xiàn)。在Android客戶的開(kāi)發(fā)中，使用WebView調(diào)用WebKit引擎實(shí)現(xiàn)對(duì)URL的訪問(wèn)。在項(xiàng)目中主要應(yīng)用WebView以下幾個(gè)定制點(diǎn)：設(shè)置WebView back鍵響應(yīng)、控制網(wǎng)頁(yè)的鏈接仍在WebView中跳轉(zhuǎn)、實(shí)現(xiàn)頁(yè)面緩存、顯示頁(yè)面加載進(jìn)度、處理錯(cuò)誤請(qǐng)求等，同時(shí)結(jié)合系統(tǒng)的功能，檢測(cè)網(wǎng)絡(luò)情況、重置菜單、設(shè)置程序啟動(dòng)畫(huà)面等。

在用戶開(kāi)啟客戶端后，檢測(cè)網(wǎng)絡(luò)是否正常，如果沒(méi)有檢測(cè)到網(wǎng)絡(luò)，則提示用戶并自動(dòng)退出，代碼如下所示。

圖2 系統(tǒng)結(jié)構(gòu)圖

圖3 應(yīng)用Android主界面

客戶端程序在啟動(dòng)過(guò)程中會(huì)因?yàn)榫W(wǎng)絡(luò)質(zhì)量和機(jī)器性能的好壞導(dǎo)致用戶訪問(wèn)速度的不同，為給用戶更人性化的體驗(yàn)，在設(shè)計(jì)中使用進(jìn)度條來(lái)告知程序的訪問(wèn)進(jìn)度。下面代碼實(shí)現(xiàn)功能為在程序啟動(dòng)過(guò)程中，在標(biāo)題欄以百分比顯示加載進(jìn)度如圖4左圖所示。

Android手機(jī)上都會(huì)有“回退”按鈕，并且大多數(shù)用戶習(xí)慣于去使用這個(gè)按鈕。正常情況下的“回退”按鈕默認(rèn)為關(guān)閉應(yīng)用程序，而用戶往往希望“回退”按鈕能實(shí)現(xiàn)返回前一個(gè)訪問(wèn)頁(yè)面的功能，因此在項(xiàng)目中需要重寫(xiě) “回退”按鈕功能，實(shí)現(xiàn)回退代碼如下所示。

程序從打開(kāi)到正常顯示需要一個(gè)過(guò)程序，在這個(gè)過(guò)程中往往不希望程序呈現(xiàn)給用戶一個(gè)空白頁(yè)面直到訪問(wèn)的頁(yè)面出現(xiàn)，客戶端通過(guò)onPageFinished函數(shù)實(shí)現(xiàn)程序啟動(dòng)完成時(shí)結(jié)束啟動(dòng)畫(huà)面進(jìn)入程序主界面，效果如圖4左圖所示啟動(dòng)頁(yè)面。當(dāng)用戶訪問(wèn)的URL無(wú)法正常顯示時(shí)，程序默認(rèn)會(huì)給出報(bào)錯(cuò)頁(yè)面，但系統(tǒng)管理者不希望用戶看到這些錯(cuò)誤信息，因此需要定義錯(cuò)誤提示或說(shuō)明，在程序中通過(guò)onReceivedError函數(shù)實(shí)現(xiàn)錯(cuò)誤處理。

“MENU”按鈕同“回退”按鈕一樣，是Android手機(jī)的一個(gè)重要按鈕，用戶大多習(xí)慣使用手機(jī)上“menu”，因此在程序中，需要屏蔽系統(tǒng)菜單,并重新設(shè)計(jì)符合應(yīng)用程序風(fēng)格的“menu”菜單，實(shí)現(xiàn)效果如圖4所示。

圖4 Android啟動(dòng)畫(huà)面及菜單

由于程序所有數(shù)據(jù)需要向服務(wù)器端請(qǐng)求，因此造成程序訪問(wèn)速度慢，用戶體驗(yàn)不好。在項(xiàng)目中我們通過(guò)客戶端和服務(wù)器設(shè)置緩存來(lái)實(shí)現(xiàn)。Android2.1及以下對(duì)緩存支持不好，因此項(xiàng)目只支持Android2.2及以上版本的緩存。

2.IPhone和Windows phone客戶端的設(shè)計(jì)與實(shí)現(xiàn)

對(duì)于iPhone和Windows Phone客戶端的設(shè)計(jì)，通過(guò)使用phonegap的childbrower插件實(shí)現(xiàn)客戶端的開(kāi)發(fā)，其中包括啟動(dòng)畫(huà)面等功能。phonegap是一個(gè)基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它完全做到了“written once,run everywhere”。Phonegap實(shí)現(xiàn)的API能調(diào)用智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等。PhoneGap能實(shí)現(xiàn)跨平臺(tái)，使用相同的代碼便可以在iphone和WP運(yùn)行。分別在IOS和WP開(kāi)發(fā)環(huán)境中導(dǎo)入phonegap框架并創(chuàng)建項(xiàng)目，將以下代碼拷入“index.html”文件中，然后根據(jù)不同的平臺(tái)進(jìn)行部分優(yōu)化和個(gè)性化設(shè)計(jì)。

圖5 IPhone和windows Phone客戶端界面

四、總結(jié)

本文介紹了“掌上師大”項(xiàng)目跨平臺(tái)的客戶端的設(shè)計(jì)與實(shí)現(xiàn)，項(xiàng)目采用Web App方式實(shí)現(xiàn)，通過(guò)客戶端方式給用戶以native App的體驗(yàn)，并通過(guò)客戶端和服務(wù)器端的緩存設(shè)置提高訪問(wèn)速度，很大程度上改善了用戶體驗(yàn)。

[1]Developer Economics 2011[R].2011,9-12.

[2]phoneGap 可行性分析［EB/OL］.http://my.oschina.net/chier/blog/49174.