基于Hybrid的校園卡APP設(shè)計(jì)與開發(fā)

葉鎰娟+徐鋒+洪波+謝宇威

摘 要：根據(jù)校園卡隨時(shí)隨地的服務(wù)需求以及高校移動門戶現(xiàn)有成果，在分析手機(jī)APP三種開發(fā)技術(shù)特點(diǎn)基礎(chǔ)上，提出基于Hybrid的校園卡APP架構(gòu)模型，設(shè)計(jì)APP客戶端九宮格UI界面，采用NET Framework4開發(fā)環(huán)境和MVC框架模式的Native技術(shù)手段開發(fā)手機(jī)服務(wù)端，在Android和iOS4兩類手機(jī)客戶端下實(shí)現(xiàn)校園卡查詢、轉(zhuǎn)賬、支付等功能，并與以中間件模式開發(fā)的校園移動門戶融合，用實(shí)踐探求校園卡APP開發(fā)應(yīng)用。

關(guān)鍵詞：校園卡；手機(jī)APP；Native；Hybrid；Android；iOS

中圖分類號：TP311.5 文獻(xiàn)標(biāo)志碼：A 文章編號：1673-8454（2015）21-0061-03

一、引言

當(dāng)前，移動終端完全融入人們生活，時(shí)間和興趣的“碎片化”[1]需要有產(chǎn)品提供隨時(shí)隨地的事件處理和信息獲取能力[2]。智能手機(jī)、手持終端等移動設(shè)備接入互聯(lián)網(wǎng)后擁有無可比擬的優(yōu)勢，為“碎片化”需求提供了最佳載體，而移動APP的出現(xiàn)，以其低成本、高精確性、高便捷性和高用戶粘度，伴隨智能手機(jī)的發(fā)展成為應(yīng)用潮流。[3-4]

本文在比較三種APP開發(fā)技術(shù)（Native、Web和Hybrid）特點(diǎn)基礎(chǔ)上，結(jié)合浙江大學(xué)手機(jī)門戶現(xiàn)有成果及校園卡APP服務(wù)需求，考慮時(shí)間成本和開發(fā)成本，設(shè)計(jì)校園卡APP系統(tǒng)架構(gòu)，采取中間件+原生態(tài)的混合模式（Hybrid），開發(fā)實(shí)現(xiàn)校園卡APP服務(wù)端和客戶端，拓展校園卡服務(wù)時(shí)空，并與移動門戶相融合，為高校各類移動APP統(tǒng)一共融作探索。

二、校園卡服務(wù)盲區(qū)及APP應(yīng)用需求

根據(jù)對校園卡應(yīng)用數(shù)據(jù)的統(tǒng)計(jì)分析，以及APP需提供認(rèn)可度和實(shí)用性高的服務(wù)給用戶的原則[5]，首先將用戶使用頻率最高、花費(fèi)時(shí)間最長的應(yīng)用在APP中實(shí)現(xiàn)，如業(yè)務(wù)查詢、轉(zhuǎn)賬充值、掛失解卦、密碼修改，丟撿卡查詢等；其次是利用手機(jī)移動的特點(diǎn)為各類業(yè)務(wù)系統(tǒng)提供繳費(fèi)支撐，讓師生不去業(yè)務(wù)部門就可以辦理各類繳費(fèi)手續(xù)；最后實(shí)現(xiàn)校園卡移動支付，讓校園卡物理設(shè)備無法架設(shè)的地方，能通過無線網(wǎng)絡(luò)及手機(jī)終端實(shí)現(xiàn)校園卡支付，將服務(wù)延伸至校園的角角落落甚至校外。

但是校園卡APP設(shè)計(jì)時(shí)必須考慮學(xué)校已有APP，按照主次角色作融合統(tǒng)一，同時(shí)減少師生麻煩。浙江大學(xué)手機(jī)門戶已上線應(yīng)用，內(nèi)容包括資訊、活動、圖書館等公開信息，也集成移動公文、移動郵件、財(cái)務(wù)工資等個(gè)人信息，因此，校園卡APP可以作為個(gè)人信息中最重要應(yīng)用融入浙大手機(jī)門戶。

三、校園卡APP選型及設(shè)計(jì)

1.APP開發(fā)技術(shù)及特點(diǎn)

目前APP 客戶端開發(fā)的主流技術(shù)主要有三種： 原生態(tài)（Native）模式、中間件（Web）模式和混合（Hybrid）即原生態(tài)+中間件模式[6]。原生態(tài)針對某種類型的操作系統(tǒng)如iOS、Android、RIM等，開發(fā)能移動設(shè)備上運(yùn)行的本地應(yīng)用；中間件是指利用通用的Web編程語言，開發(fā)能夠運(yùn)行在手機(jī)Web瀏覽器中的應(yīng)用；Hybrid是本地應(yīng)用和Web應(yīng)用混合開發(fā)的一款應(yīng)用，允許一部分應(yīng)用運(yùn)行在本地設(shè)備上，一部分運(yùn)行在Web上[7]。三種開發(fā)模式特點(diǎn)[8][9]對比如表所示。

每種開發(fā)接入模式都有其特定的應(yīng)用背景，考量當(dāng)前專業(yè)APP終端開發(fā)所用模式，沒有哪一套技術(shù)絕對領(lǐng)先，因此校園卡APP還是需要根據(jù)浙江大學(xué)移動門戶規(guī)則及校園卡系統(tǒng)要求來定奪。對復(fù)雜產(chǎn)品來說，Hybrid是比較合適的解決方案。

2.校園卡APP技術(shù)選型

浙江大學(xué)移動門戶采用基于Exmobi的中間件開發(fā)模式，是集合開發(fā)工具包、應(yīng)用發(fā)布、服務(wù)器托管等一整套的解決方案，通過數(shù)據(jù)集成技術(shù)和跨平臺客戶端展現(xiàn)能力，將業(yè)務(wù)系統(tǒng)移植到移動終端，并以開放和標(biāo)準(zhǔn)的基礎(chǔ)架構(gòu)支持HTML5和原生插件擴(kuò)展[10]。

而校園卡系統(tǒng)核心服務(wù)器部署在專網(wǎng)上，業(yè)務(wù)相對獨(dú)立，支付、轉(zhuǎn)帳、認(rèn)證等核心應(yīng)用對安全、性能及速度要求極高，考慮到技術(shù)實(shí)現(xiàn)的可能性、實(shí)現(xiàn)成本以及對雙方系統(tǒng)的影響，因此，校園卡APP最終以Hybrid混合模式，采用原生態(tài)獨(dú)立開發(fā)，再按照中間件ExMobi接入標(biāo)準(zhǔn)集成，這種跨平臺混合開發(fā)模式[11]，保持雙方即融合統(tǒng)一又相對獨(dú)立的關(guān)系，還可減輕對校園移動門戶修改量的沖擊。

3.校園卡APP界面UI設(shè)計(jì)

鑒于手機(jī)門戶已實(shí)現(xiàn)對頁面切換控制的UITabBarController，并設(shè)置四個(gè)圖標(biāo)在UITabBar里切換服務(wù)，為避免重復(fù)造成用戶視覺誤差，校園卡APP在UI設(shè)計(jì)時(shí)必須對功能進(jìn)行高度加工，用簡單的頁面展示所有應(yīng)用，消除過多功能切換按鍵。

考慮到視覺效果及手指在移動設(shè)備上觸控范圍，經(jīng)過反復(fù)檢驗(yàn)和認(rèn)證，采用九宮格陣列效果最佳，如圖1所示，九宮格陣列簡捷明快、方便易用。在一個(gè)頁面羅列所有功能，后繼增加應(yīng)用超過一個(gè)頁面，可采用UIPageControl上下翻頁。陣列采用動態(tài)設(shè)計(jì)，程序載入過程中自動獲取最新功能列表及相應(yīng)圖標(biāo)。

四、校園卡APP開發(fā)實(shí)現(xiàn)

1.APP系統(tǒng)架構(gòu)

校園卡APP架構(gòu)類似C/S，其主要工作交由手機(jī)服務(wù)端（API）完成，手機(jī)客戶端只作數(shù)據(jù)呈現(xiàn)和用戶交互，大量計(jì)算集中于服務(wù)器端，從而提高程序的運(yùn)行速度，避免大數(shù)據(jù)流通訊導(dǎo)致客戶端反饋遲滯。因此，APP開發(fā)分為服務(wù)器端與客戶端兩部分，系統(tǒng)從架構(gòu)劃分手機(jī)端、手機(jī)服務(wù)端、業(yè)務(wù)支撐層和校園卡支撐層，如圖2所示。手機(jī)端和手機(jī)服務(wù)端API是本次開發(fā)的內(nèi)容，是對iOS和Andriod系統(tǒng)進(jìn)行的客戶端指定開發(fā)。業(yè)務(wù)支撐層和校園卡系統(tǒng)層是現(xiàn)有系統(tǒng)集成，是校園卡APP實(shí)現(xiàn)的基礎(chǔ)，非開發(fā)內(nèi)容。

服務(wù)端API需要實(shí)現(xiàn)以下功能：信息查詢、密碼修改、轉(zhuǎn)賬充值、公共通訊繳費(fèi)、網(wǎng)絡(luò)繳費(fèi)、丟卡撿卡和移動支付等，通過API接口展現(xiàn)至手機(jī)客戶端。

2.校園卡APP服務(wù)端開發(fā)

手機(jī)服務(wù)端采用基于.NET Framework 4的開發(fā)環(huán)境和MVC的框架模式。MVC強(qiáng)制性將應(yīng)用程序的輸入、處理和輸出分開，構(gòu)成模型、視圖和控制器三個(gè)核心部件，各自處理自己的任務(wù)，具備部件耦合性低、生命周期成本低、部署快等優(yōu)點(diǎn)[12]。選取微軟的.NET Framework4.0作開發(fā)環(huán)境，主要是因?yàn)樗苤С稚刹⑦\(yùn)行下一代應(yīng)用程序和 XML Web Services 的內(nèi)部 Windows 組件，降低基礎(chǔ)設(shè)施復(fù)雜性，提供一個(gè)一致的元系統(tǒng)，讓企業(yè)級服務(wù)、工作流解決方案和用戶體驗(yàn)軟件系統(tǒng)的開發(fā)更容易[13][14]。

基于.NET Framework4的APP服務(wù)端實(shí)現(xiàn)流程如圖3所示，分?jǐn)?shù)據(jù)層、業(yè)務(wù)層、http層和Client層。最終服務(wù)端接口響應(yīng)速度：普通讀數(shù)據(jù)接口≤2s，大數(shù)據(jù)量查詢響應(yīng)≤10s，支付轉(zhuǎn)賬響應(yīng)≤10s。

3.校園卡APP客戶端開發(fā)及與服務(wù)端交互

對于校園卡APP手機(jī)端，Android采用Eclipse開發(fā)工具，開發(fā)語言為Java，基于JDK1.5+Android2.2的開發(fā)架構(gòu)，兼容Android2.2及以上版本；iOS客戶端采用XCode4.1開發(fā)工具，開發(fā)語言是Object-c，基于Mac OS 4.0開發(fā)架構(gòu)，兼容iOS4.3及以上系統(tǒng)手機(jī)。兩個(gè)客戶端具備同樣的頁面響應(yīng)時(shí)間：普通讀數(shù)據(jù)≤2s，大數(shù)據(jù)量查詢響應(yīng)≤10s，支付轉(zhuǎn)賬響應(yīng)≤10s。

客戶端與服務(wù)端交互采用HTTP POST協(xié)議傳輸數(shù)據(jù)，服務(wù)端提供接口，客戶端按照接口定義將相應(yīng)請求參數(shù)傳遞給服務(wù)端，服務(wù)端獲取到數(shù)據(jù)后，處理相應(yīng)業(yè)務(wù)邏輯，返回JSON格式數(shù)據(jù)，客戶端根據(jù)返回?cái)?shù)據(jù)做相應(yīng)處理。交互流程如圖4所示。

4.校園卡APP與校園手機(jī)門戶融合

校園卡APP完成服務(wù)端和客戶端的原生態(tài)開發(fā)后，提供APP圖標(biāo)、APP文件、下載地址以及packagename、activity、parameter、type、errorCallFun等參數(shù)，與基于Exmobi開發(fā)的校園移動門戶對接，實(shí)現(xiàn)統(tǒng)一登錄，統(tǒng)一風(fēng)格，封裝成一個(gè)完整的校園移動門戶客戶端。

五、結(jié)束語

基于Hybrid模式的校園卡APP開發(fā)應(yīng)用，實(shí)現(xiàn)校園卡核心業(yè)務(wù)終端化，拓展校園卡服務(wù)時(shí)空，并與校園手機(jī)門戶融合統(tǒng)一。這種混合開發(fā)模式，較好地保持兩個(gè)業(yè)務(wù)系統(tǒng)的獨(dú)立性，又使它們無縫鏈接，解決新建APP與現(xiàn)有APP結(jié)合的問題。但從總體效果上看，還存在同步性和互動性不足、界面和功能統(tǒng)一性不足的缺點(diǎn)，在一定程度上影響用戶體驗(yàn)。后繼將完善同步機(jī)制、優(yōu)化界面、增加用戶互動，以求更好的用戶體驗(yàn)。

參考文獻(xiàn)：

[1]綦星龍，卓光俊，張小強(qiáng).移動互聯(lián)網(wǎng)時(shí)代新聞?lì)怉PP的發(fā)展困境與應(yīng)對策略[J].科技與出版，2013（10）：86-90.

[2]Reichenbacher T.Mobile Cartography Adaptive Mobile Devices[D].Munich：Technical University，2004.

[3]羅軍舟，吳文甲，楊明.移動互聯(lián)網(wǎng)_終端_網(wǎng)絡(luò)與服務(wù)[J].計(jì)算機(jī)學(xué)報(bào)，2011，11（34）：2029-2046.

[4]Havelka S，Verbovetskaya A.Mobile Information Literacy：Let'sUse anApp for that[J].College&ResearchLibraries News，2012（1）：22-23.

[5]田蕊，陳朝暉，楊琳.基于手持終端的圖書館APP移動服務(wù)研究[J].圖書館建設(shè)，2012（7）：36-40.

[6]陳俊杰.王國凡.移動圖書館APP的構(gòu)建策略和關(guān)鍵技術(shù)_以iOS為例[J].現(xiàn)代圖書情報(bào)技術(shù)，2012（9）：75-80.

[7]Native App vs.Web App[EB/OL]. http：//www.csdn.net/article/2012-09-20/2810190-whats-the-difference-native-vs-web-ap，2012-09-20.

[8] Hybrid App——介于Native App和Web App兩者之間[EB/OL]. http：//blog.csdn.net/blade2001/article/details/9063061.2013-06-09.

[9]魏穎琪，林偉平，楊少龍.移動終端應(yīng)用軟件開發(fā)技術(shù)探討[J].電信科學(xué)，2013（5）：11-18.

[10]Exmobi產(chǎn)品介紹[EB/OL].http：//www.exmobi.cn，2013-11-20.

[11]施偉，王碩蘋，郭鳴等.跨平臺移動應(yīng)用中間適配層設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與應(yīng)用，2014，50（16）：39-44.

[12]MVC框架[EB/OL]. http：//baike.baidu.com/view/5432454.htm？from_id=85990&type=syn&fromtitle=MVC& fr=aladdin.2014-05-20.

[13]Microsoft. NET Framework 4.0[EB/OL].http：//www.microsoft.com/zh-cn/download/details.aspx？id=17718，2011-02-21.

[14]JiangYu，AndrewTappenden，JamesMiller etc.A Scalable Testing Framework for Location-Based Services[J].Journal of Computer Science & Technology，2009（24）：386-404.

（編輯：楊馥紅）