普光智能气田移动开发服务平台关键技术与应用

张庆生 蒙玉平 吕清林 龙 飞 李锦宪 雷金晶

1. 中国石化中原油田分公司 2. 中国石化中原油田普光分公司

0 引言

移动互联网是通过智能手机、笔记本电脑、平板电脑等移动终端，基于浏览器方式接入互联网或者使用需要和互联网连接的应用程序，以获取多媒体内容、定制信息和数据服务[1]。随着4G移动通信网络的成熟、智能终端的普及，企业对移动互联网应用需求显著增强，对移动互联网应用开发技术要求也越来越高。

辅助智能决策系统是普光智能气田的重要组成部分，其中移动应用是实现辅助智能决策的主要途径。移动应用作为智能气田建设不可或缺的一部分，是实现移动办公、快速决策、提高工作效率的重要手段。针对气田点多面广、人员来回频繁等特点，生产数据实时显示、关键参数预警和事件记录、视频监控等移动信息化应用，能够及时、准确、连续地掌握生产现场的动态，实现现场的自动连续监控和远程的指挥和指导，确保人员、设备的安全和生产持续稳定运行[2]。

目前移动应用的开发模式有3种：①原生开发，每种终端都需要对应开发一款App，项目开发周期长、成本大、维护繁琐；②基于HTML5标准的Web应用开发，相对比原生应用来说，具有更好的跨平台特性、免安装等优势，但在会话管理、安全离线存储、访问原生设备功能等方面存在一些局限性[3]；③混合开发模式，通过把HTML5应用程序嵌入到一个原生容器里面，集原生应用程序和HTML5应用程序的优点于一体。

普光移动应用用户众多，所用移动终端型号各异，为了实现良好的访问原生设备功能，同时又具有跨平台、组件化、快速开发的优势，选择混合开发模式，它结合了前两者技术的特性，兼具了两种方式的优势。目前国内外也出现了一些基于HTML5标准的移动混合开发框架，比如PhoneGap[4]、AppCan[5]等混合开发框架成功实现了移动应用跨平台的目的[6]，但普遍存在开发出来的应用运行缓慢、操作延迟等严重影响用户体验的现象，无法满足普光气田移动建设的需求。

建立一种快速、高效、灵活的移动开发模式以适配不同的移动终端，加速智能气田移动信息化建设具有重要的战略意义。通过移动技术的摸索与积累，普光气田研发了MOSP开发平台，前端基于HTML5标准实现跨平台展示，利用组件化开发模式缩短开发周期，HTML5与移动原生的双向交互机制保证前端Web高效访问底层资源。

1 移动开发服务平台关键技术

1.1 多引擎混合开发技术

通过集成HTML5和React Native开发引擎，设计统一的调用规范与封装方式，制订标准的调用接口方法，实现界面风格统一、调用方式一致的集成开发（图1）。解决基于Android、iOS移动平台开发技术不统一的问题，实现移动平台多语言开发的效果。

图1 移动混合开发引擎框图

1.1.1 HTML5开发引擎

利用Android端WebView的高度定制特性，对其属性与协议方法进行管理控制，完成Android端WebBrowser组件的封装[7]，实现Android端使用WebBrowser组件加载HTML5界面时，内存占用量小，速度快、稳定性好。实现在线或离线HTML5网页的统一加载，减少HTML5网页缓存文件，提高加载HTML5网页稳定性。

移动应用开发平台通过HTML5开发引擎统一Android和iOS开发规范，统一HTML5网页离线路径（图2）。通过统一的加载接口，便捷、高效的加载离线HTML5网页，加快开发速度与降低开发难度。通过定义WebBrowser规范，实现对HTML5网页的按需加载，降低加载HTML5网页导致的内存消耗，解决传统方式加载HTML5时内存泄露的问题，使用户对加载HTML5时的体验更友好。

1.1.2 React Native开发引擎

平台集成React Native运行时环境，定义React Native与原生（Android、iOS）交互规范[8]，优化RCTBridge，基于RCTBridge开发原生功能接口，解决React Native原生功能较少问题。通过将React Native的JS文件与图片资源，放入应用本地存储（iOS为沙盒、Android为资源文件下），实现离线加载。实现React Native代码热更新功能，在React Native部分需求发生变化时，只需更新下载应用资源文件，无须升级APP，解决代码动态更新的难题。对React Native进行组件化处理，由React Native引擎进行统一管理，实现对组件生命周期的控制，对React Native界面的加载速度较传统React Native加载方式提高20%以上（图3）。

图2 HTML5引擎框图

1.2 Web组件化

在大型软件中，组件化是一种共识，一方面提高了开发效率，另一方面降低了维护成本。具有高内聚、可重用、可互换、可组合等优点。但在Web前端这个领域，并没有很通用的组件模式，业界现有的Web组件化框架都有其缺点，利用GWT技术实现了1套基于HTML5标准的Web组件化机制，遵循统一的API、接口和规范，设计为通用的、可用来构建大型应用程序的组件。HTML5组件化按照MVC的设计思想分为3类[9]：UI可视组件、Action组件和数据模型组件。UI可视组件是用户直接操作的界面的重要组成部分；数据模型组件处于MVC架构的Model层，是数据操作的载体；Action组件是模型组件和UI可视组件的桥梁，处于MVC架构的控制层。

在Web组件化基础上，为提高开发效率、增强组件的复用率，设计研发了以Web组件化为核心的表单设计器，实现了所见即所得的开发模式。表单设计器左侧是组件列表区域，中间为表单编辑区域，右侧为组件属性与脚本编辑区域，通过对组件拖拽与属性设置即可完成表单的开发。

MOSP提供一套标准的组件开发接口规范，业务开发人员在项目开发过程中开发的业务组件随时更新到MOSP平台组件资产库中，组件开发过程：①根据组件的接口规范实现业务功能组件；②将业务功能组件注册到表单设计器中；③利用表单设计器中的组件实现业务功能界面。

1.3 HTML5与移动原生的双向交互机制

图3 React Native开发引擎框图

对于HTML5页面来说，只是单纯展示业务内容是不够的，HTML5需要访问原生地理位置、文件系统、摄像头、通讯录、拨打电话、发送短信等功能，需要移动原生与HTML5页面双向交互。在移动原生应用中嵌入HTML5页面需要使用iOS和Android设备中内置的基于WebKit[10]内核的浏览器控件(WebView、UIWebView)。在iOS和Android的WebKit组件的基础上，分别编写WebViewJavaScriptBridge原生代码，同时在HTML5页面中编写JavaScript的JavaScriptBridge方法，他们作为一个整体，起到了一个“桥梁”的作用，实现双向交互（图4）。

图4 JavaScriptBridge双向交互原理图

在某些场景下，需要更简单的HTML5页面调用原生资源的方法，这些资源可以是一个界面、一个按钮、通讯录中的一个联系人、摄像头、一个服务等，所有的资源都会用一个URI（统一资源定位符）指向它，每种资源对应一个特定的URI。要获取这个资源，访问它的URI就可以，因此URI就成了每一个资源的地址或独一无二的识别符。利用这种思想，在原生代码中封装WebKit请求拦截器，在WebKit组件内发起的所有网络请求，都可以通过delegate函数在原生层得到通知。这样，就可以在HTML5页面内发起一个自定义的网络请求，格式为：mosp://methodName?param1=value1¶m2=value2。那么在WebKit组件的delegate函数中，mosp://开头的地址，就不进行内容的加载，转而加载原生代码中的各种资源，如图5所示。

图5 HTML5加载原生资源框图

2 移动开发服务平台应用

普光智能气田移动开发服务平台（Mobile Open Service Platform，简称MOSP）采用了MVC设计思想，确保模型、视图、控制分离，利用HTML5跨平台的特性标准实现组件化，提供HTML5与移动原生的双向交互机制，满足企业复杂业务适配移动终端的需求。

利用MOSP开发平台进行移动应用开发的步骤（图6）：①登录MOSP开发平台后进行模型管理，通过对元数据管理、数据对象定义和管理建立模型；②打开表单设计器通过拖拽组件与组件属性设置、脚本编辑设计表单；③进入菜单管理配置已设计好的表单形成系统应用。

MOSP平台还具有组件开发、注册与流程管理功能，满足开发人员在MOSP平台上开发新增组件，通过长期的组件积累，形成统一的组件资产库，为形成组件共享服务服务，有效地缩短开发周期。

图6 MOSP移动应用开发及组件开发过程示意图

利用MOSP开发平台成功开发了普光智能气田移动应用（图7），包括门户/开发/生产/勘探/会议/视频等功能模块，集成了多个现有信息系统的在线审批功能，成功适配了不同型号移动终端的相关硬件资源，实现了一次开发多处安装使用的目标。

图7 普光智能气田移动应用主界面截图

手机端部分典型业务应用展示效果如图8所示。表现在：①展示勘探开发生产过程中产生的业务数据，及时掌握气田生产运行情况。②建立移动视频管理中心，集成普光气田生产、生活现场等视频；用户分级管理、授权查看，定制展示，授权用户在移动端实现视频实时播放、抓拍、录像等功能。③集成普光气田OA、合同、财务、请销假、招投标、企业邮箱等关键业务，实现了业务的即时推送、有效集成，提高了审批、决策工作效率。

图8 普光智能气田移动应用业务界面截图

3 结束语

1）MOSP移动开发服务平台，组件化的开发模式能够不断扩展完善组件，最终为移动开发应用提供类型丰富、业务契合度较高的组件资产库，最大程度实现组件共享共用、快速迭代，提高开发效率，简化运维操作。

2）平台的多引擎混合开发技术、HTML5与移动原生的双向交互机制，确保由该平台开发的应用适配所有移动终端，真正实现一次开发、多类型终端适配。

3）应用普光气田移动开发服务平台（MOSP）成功开发了普光智能气田移动应用系统，该系统集成展示了普光气田从勘探开发、集输净化到生产经营全业务链的动态情况，实现了远程指导、指挥与办公，为其他大型企业的移动应用开发提供了一种便捷高效的解决方案。