基于PhoneGap框架的移动办公系统设计与实现

　　摘要摘要：随着移动设备的普及，加上“互联网+”时代的到来，使得传统的企业ERP与OA系统也开始延伸到移动设备端，办公者可直接通过移动设备实现随时随地办公。介绍了基于PhoneGap框架的移动办公系统设计与实现过程，对系统总体拓扑和移动办公系统功能需求进行了描述，给出了系统设计方案，并通过具体实例描述了移动办公应用中涉及到的关键技术。该系统的成功实现，使得企业协同办公更加多元化和便捷，极大地提高了企业运营效率。
　　关键词关键词：PhoneGap；OA；移动办公
　　DOIDOI：10.11907/rjdk.1511109
　　中图分类号：TP319
　　文献标识码：A文章编号文章编号：16727800（2016）001010703
　　0引言
　　在“互联网+”时代，“互联网+金融”、“互联网+零售”、“互联网+交通”等各种移动应用App的普及已经颠覆式地改变着人们的日常生活[1]。企业ERP与OA办公系统作为重要的传统桌面软件，也借势移动互联网技术的东风，实现了桌面系统的有效延伸，使得企业办公者能够利用手中的移动终端随时随地地获取并处理公司事务。本文基于PhoneGap框架进行移动办公系统的设计与实现，将企业局域网办公服务系统中财务费用报销、项目管理、采购管理等流程的审批扩展到移动设备端，同时为员工提供移动考勤打卡功能，方便考勤管理。
　　1系统功能描述
　　系统总拓扑如图1所示。企业局域网内有OA服务器、ERP服务(本文来自：WwW.BdfqY.Com 千叶帆文摘:基于PhoneGap框架的移动办公系统设计与实现)器及数据库服务器，公司内部的终端PC可以通过内部IP地址直接访问服务器实现办公。目前，移动终端App开发中，对于涉及商业机密的业务流程审批功能，需要在移动终端上拨通VPN链接，方可访问办公系统。对于非企业业务机密的办公功能，如考勤打卡，移动终端可直接访问企业公网服务器进行操作，公网服务器数据通过单项光闸自动导入企业局域网相应数据库服务器。
　　1.1涉密流程审批功能
　　涉密流程审批主要包括如下模块：
　　（1）费用报销模块。费用报销是企业流程中的一个常用流程，为保证员工报销流程快速有效，将流程审批扩展到移动终端上，方便审批流程节点操作人员快速执行流程审批，提高流程审批效率。
　　（2）项目审批模块。各类项目评审、立项、变更、结项等环节将直接影响企业运营效率。因此，将其延伸到移动端尤为必要。
　　（3）采购审批模块。采购申请、订单审批作为企业主流程上的一个重要环节，业务涉及采购部、财务部、审计部、管理层等多部门的审批，因而及时性至关重要。
　　1.2非涉密考勤打卡功能
　　对于公出、出差的员工，他们不便直接到单位完成上下班打卡。可开发移动端实现异地考勤打卡功能，员工无需连接VPN，直接打开App即可完成打卡。
　　2系统方案设计
　　PhoneGaps 是目前最流行的一款开源的手机应用开发框架，它可以将网页通过原生语言封装为可安装、运行的手机应用程序，同时提供了丰富的插件供网页调用手机系统的API，只需要开发人员熟悉（html5+css3+javascript）开发模式即可[2]。
　　如图2所示，本系统采用PhoneGap框架封装HTML页面的形式，实现应用开发。
　　2.1数据传输
　　App与后台服务器之间采用Ajax的形式进行数据访问，数据传输采用jsonp格式实现，实现跨域请求。
　　2.2验证登陆
　　在移动设备正确连接VPN后，App应用构造内网OA登录请求，将以Ajax的形式访问后台服务器登陆接口，验证登录信息后将结果以jsonp的格式返回至App应用，实现用户的验证登录。
　　2.3信息展示
　　通过登录验证后，根据用户权限，通过提供的数据访问接口，获取用户的流程审批待办事项类型及其数量，将结果以jsonp的格式返回至App应用，应用端在回调函数中解析返回的数据，填充至显示页面的元素中实现信息的展示[3]。
　　2.4系统实现
　　由于内部网络与互联网处于物理隔离状态，互联网无法直接访问内网资源，因而打卡信息无法直接写入内部网络，转而采用文件的形式进行信息传递，将打卡信息文件通过网络隔离设备搬运至内部网络，然后通过内部网络解析文件，将解析正确的打卡信息记录入内网，最终实现外部网络的内部打卡功能。
　　3系统实现关键技术
　　3.1混合开发框架
　　在此应用中采用了PhoneGap的混合开发框架，使用HTML5+Css3+jquery mobile 实现App页面的UI界面，以Ajax+jsonp的方式实现数据访问和传递。需要调用原生语言的特殊需求，通过PhoneGap插件的形式实现，在该项目的实现过程中通过安装官方提供的navigator插件实现了更加友好的用户与界面间的交互[4]。
　　3.2涉及PhoneGap的插件
　　涉及PhoneGap的主要插件有：
　　（1）navigator插件。用于页面与用户之间的交互，使应用拥有更加友好的用户体验[5]。
　　（2）device插件。用于获取移动平台的硬件信息。
　　（3）geolocation插件。HTML5定位插件，地理位置（Geolocation）是HTML5的重要特性之一，提供了确定用户位置的功能，借助该特性能够获取当时地理位置信息（经纬度），然后配合下文的百度地理位置API获取具体的地理位置[6]。使用geolocation插件定位的关键代码如下：
　　（4）百度地理位置API。百度API提供了地理位置的反向解析功能，通过用户经纬度解析出具有描述意义的地址信息。
　　3.3自定义PhoneGap插件
　　由于部分国行Android手机阉割了Google的服务包，可能导致无法使用HTML5的Geolocation功能，这时必须通过原生语言来实现定位功能[7]。PhoneGap提供了自定义插件功能，通过继承PhoneGap提供的Plugin类，调用百度SDK的定位功能，实现原生语言的定位功能，再配合PhoneGap插件的配置文件实现该功能的插件式调用，也从侧面提供了前端UI与后台原生代码的交互。当geolocation插件不可用时的自定义插件关键代码如下[8]：
　　4结语
　　本文基于PhoneGaps框架设计并实现了一款有效的移动办公系统，解决了传统基于B/S或C/S客户端形式的企业ERP与OA办公系统被限制在局域网内无法异地协同办公，或者只能通过VPN私有安全链路才能被访问的局限性。该移动办公系统使得协同办公更加便捷，也更加多元化。
　　参考文献参考文献：
　　[1]唐俊开.HTML5移动Web开发指南[M].北京：电子工业出版社，2012.
　　[2]张亚飞，崔巍.PhoneGap3.0 移动应用开发实战详解[M].北京：中国铁道出版社，2015.
　　[3]ANDREA PICCHI.IOS Web应用开发[M].罗晴明，译.北京：人民邮电出版社，2013.
　　[4]徐隆龙，李莹，白静.移动混合开发框架[J].计算机系统应用，2014（12）：5359.
　　[5]杨文军.应用跨平台工具PhoneGap开发移动图书馆[J].农业图书馆情报学刊，2014（7）：1518.
　　[6]汤恺.原生APP和HTML5的混合开发模式[J].传媒评论，2015（3）：6569.
　　[7]李瑞宣，王山东，徐志远，等.基于Android平台定位系统设计和实现[J].信息技术，2013（12）：187191.
　　[8]李刚.疯狂Android讲义[M]. 北京：电子工业出版社，2015.
　　责任编辑（责任编辑：孙娟）