分享

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

 逍遥李X 2015-11-20





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


引言

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

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


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

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

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


校园卡APP选型及设计


  1.APP开发技术及特点

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




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

  2.校园卡APP技术选型

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

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

  3.校园卡APP界面UI设计

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

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



图1 九宫格阵列的UI界面图



校园卡APP开发实现

  1.APP系统架构

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



图2 校园卡APP系统架构


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

  2.校园卡APP服务端开发

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



图3 .NET Frmaework 实现APP服务端流程图


  基于.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 服务端与客户端交互流程图


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

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

结束语

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

  (来源:《中国教育信息化》杂志,作者叶镒娟等,浙江大学)


声明:

1.转载请注明来源:中国教育信息化在线(cedictol)。

2.本公众号所转载文章不代表我们认同其观点或证实其内容真实性,作者如果不希望被转载,请与我们联系,删除相关文章。


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多