基于Hybrid的校园卡APP设计与开发

叶镒娟+徐锋+洪波+谢宇威

摘 要：根据校园卡随时随地的服务需求以及高校移动门户现有成果，在分析手机APP三种开发技术特点基础上，提出基于Hybrid的校园卡APP架构模型，设计APP客户端九宫格UI界面，采用NET Framework4开发环境和MVC框架模式的Native技术手段开发手机服务端，在Android和iOS4两类手机客户端下实现校园卡查询、转账、支付等功能，并与以中间件模式开发的校园移动门户融合，用实践探求校园卡APP开发应用。

关键词：校园卡；手机APP；Native；Hybrid；Android；iOS

中图分类号：TP311.5 文献标志码：A 文章编号：1673-8454（2015）21-0061-03

一、引言

当前，移动终端完全融入人们生活，时间和兴趣的“碎片化”[1]需要有产品提供随时随地的事件处理和信息获取能力[2]。智能手机、手持终端等移动设备接入互联网后拥有无可比拟的优势，为“碎片化”需求提供了最佳载体，而移动APP的出现，以其低成本、高精确性、高便捷性和高用户粘度，伴随智能手机的发展成为应用潮流。[3-4]

本文在比较三种APP开发技术（Native、Web和Hybrid）特点基础上，结合浙江大学手机门户现有成果及校园卡APP服务需求，考虑时间成本和开发成本，设计校园卡APP系统架构，采取中间件+原生态的混合模式（Hybrid），开发实现校园卡APP服务端和客户端，拓展校园卡服务时空，并与移动门户相融合，为高校各类移动APP统一共融作探索。

二、校园卡服务盲区及APP应用需求

根据对校园卡应用数据的统计分析，以及APP需提供认可度和实用性高的服务给用户的原则[5]，首先将用户使用频率最高、花费时间最长的应用在APP中实现，如业务查询、转账充值、挂失解卦、密码修改，丢捡卡查询等；其次是利用手机移动的特点为各类业务系统提供缴费支撑，让师生不去业务部门就可以办理各类缴费手续；最后实现校园卡移动支付，让校园卡物理设备无法架设的地方，能通过无线网络及手机终端实现校园卡支付，将服务延伸至校园的角角落落甚至校外。

但是校园卡APP设计时必须考虑学校已有APP，按照主次角色作融合统一，同时减少师生麻烦。浙江大学手机门户已上线应用，内容包括资讯、活动、图书馆等公开信息，也集成移动公文、移动邮件、财务工资等个人信息，因此，校园卡APP可以作为个人信息中最重要应用融入浙大手机门户。

三、校园卡APP选型及设计

1.APP开发技术及特点

目前APP 客户端开发的主流技术主要有三种： 原生态（Native）模式、中间件（Web）模式和混合（Hybrid）即原生态+中间件模式[6]。原生态针对某种类型的操作系统如iOS、Android、RIM等，开发能移动设备上运行的本地应用；中间件是指利用通用的Web编程语言，开发能够运行在手机Web浏览器中的应用；Hybrid是本地应用和Web应用混合开发的一款应用，允许一部分应用运行在本地设备上，一部分运行在Web上[7]。三种开发模式特点[8][9]对比如表所示。

每种开发接入模式都有其特定的应用背景，考量当前专业APP终端开发所用模式，没有哪一套技术绝对领先，因此校园卡APP还是需要根据浙江大学移动门户规则及校园卡系统要求来定夺。对复杂产品来说，Hybrid是比较合适的解决方案。

2.校园卡APP技术选型

浙江大学移动门户采用基于Exmobi的中间件开发模式，是集合开发工具包、应用发布、服务器托管等一整套的解决方案，通过数据集成技术和跨平台客户端展现能力，将业务系统移植到移动终端，并以开放和标准的基础架构支持HTML5和原生插件扩展[10]。

而校园卡系统核心服务器部署在专网上，业务相对独立，支付、转帐、认证等核心应用对安全、性能及速度要求极高，考虑到技术实现的可能性、实现成本以及对双方系统的影响，因此，校园卡APP最终以Hybrid混合模式，采用原生态独立开发，再按照中间件ExMobi接入标准集成，这种跨平台混合开发模式[11]，保持双方即融合统一又相对独立的关系，还可减轻对校园移动门户修改量的冲击。

3.校园卡APP界面UI设计

鉴于手机门户已实现对页面切换控制的UITabBarController，并设置四个图标在UITabBar里切换服务，为避免重复造成用户视觉误差，校园卡APP在UI设计时必须对功能进行高度加工，用简单的页面展示所有应用，消除过多功能切换按键。

考虑到视觉效果及手指在移动设备上触控范围，经过反复检验和认证，采用九宫格阵列效果最佳，如图1所示，九宫格阵列简捷明快、方便易用。在一个页面罗列所有功能，后继增加应用超过一个页面，可采用UIPageControl上下翻页。阵列采用动态设计，程序载入过程中自动获取最新功能列表及相应图标。

四、校园卡APP开发实现

1.APP系统架构

校园卡APP架构类似C/S，其主要工作交由手机服务端（API）完成，手机客户端只作数据呈现和用户交互，大量计算集中于服务器端，从而提高程序的运行速度，避免大数据流通讯导致客户端反馈迟滞。因此，APP开发分为服务器端与客户端两部分，系统从架构划分手机端、手机服务端、业务支撑层和校园卡支撑层，如图2所示。手机端和手机服务端API是本次开发的内容，是对iOS和Andriod系统进行的客户端指定开发。业务支撑层和校园卡系统层是现有系统集成，是校园卡APP实现的基础，非开发内容。

服务端API需要实现以下功能：信息查询、密码修改、转账充值、公共通讯缴费、网络缴费、丢卡捡卡和移动支付等，通过API接口展现至手机客户端。

2.校园卡APP服务端开发

手机服务端采用基于.NET Framework 4的开发环境和MVC的框架模式。MVC强制性将应用程序的输入、处理和输出分开，构成模型、视图和控制器三个核心部件，各自处理自己的任务，具备部件耦合性低、生命周期成本低、部署快等优点[12]。选取微软的.NET Framework4.0作开发环境，主要是因为它能支持生成并运行下一代应用程序和 XML Web Services 的内部 Windows 组件，降低基础设施复杂性，提供一个一致的元系统，让企业级服务、工作流解决方案和用户体验软件系统的开发更容易[13][14]。

基于.NET Framework4的APP服务端实现流程如图3所示，分数据层、业务层、http层和Client层。最终服务端接口响应速度：普通读数据接口≤2s，大数据量查询响应≤10s，支付转账响应≤10s。

3.校园卡APP客户端开发及与服务端交互

对于校园卡APP手机端，Android采用Eclipse开发工具，开发语言为Java，基于JDK1.5+Android2.2的开发架构，兼容Android2.2及以上版本；iOS客户端采用XCode4.1开发工具，开发语言是Object-c，基于Mac OS 4.0开发架构，兼容iOS4.3及以上系统手机。两个客户端具备同样的页面响应时间：普通读数据≤2s，大数据量查询响应≤10s，支付转账响应≤10s。

客户端与服务端交互采用HTTP POST协议传输数据，服务端提供接口，客户端按照接口定义将相应请求参数传递给服务端，服务端获取到数据后，处理相应业务逻辑，返回JSON格式数据，客户端根据返回数据做相应处理。交互流程如图4所示。

4.校园卡APP与校园手机门户融合

校园卡APP完成服务端和客户端的原生态开发后，提供APP图标、APP文件、下载地址以及packagename、activity、parameter、type、errorCallFun等参数，与基于Exmobi开发的校园移动门户对接，实现统一登录，统一风格，封装成一个完整的校园移动门户客户端。

五、结束语

基于Hybrid模式的校园卡APP开发应用，实现校园卡核心业务终端化，拓展校园卡服务时空，并与校园手机门户融合统一。这种混合开发模式，较好地保持两个业务系统的独立性，又使它们无缝链接，解决新建APP与现有APP结合的问题。但从总体效果上看，还存在同步性和互动性不足、界面和功能统一性不足的缺点，在一定程度上影响用户体验。后继将完善同步机制、优化界面、增加用户互动，以求更好的用户体验。

参考文献：

[1]綦星龙，卓光俊，张小强.移动互联网时代新闻类APP的发展困境与应对策略[J].科技与出版，2013（10）：86-90.

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

[3]罗军舟，吴文甲，杨明.移动互联网_终端_网络与服务[J].计算机学报，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移动服务研究[J].图书馆建设，2012（7）：36-40.

[6]陈俊杰.王国凡.移动图书馆APP的构建策略和关键技术_以iOS为例[J].现代图书情报技术，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]魏颖琪，林伟平，杨少龙.移动终端应用软件开发技术探讨[J].电信科学，2013（5）：11-18.

[10]Exmobi产品介绍[EB/OL].http：//www.exmobi.cn，2013-11-20.

[11]施伟，王硕苹，郭鸣等.跨平台移动应用中间适配层设计与实现[J].计算机工程与应用，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.

（编辑：杨馥红）