普光智能气田移动开发服务平台关键技术与应用
张庆生1, 蒙玉平1, 吕清林2, 龙飞1, 李锦宪1, 雷金晶2
1. 中国石化中原油田分公司
2. 中国石化中原油田普光分公司

作者简介:张庆生,1971年生,教授级高级工程师,现任中国石化中原油田分公司副总经理,兼任中原油田普光分公司经理;主要从事油气田钻采、集输工程等方面的研究和管理工作。地址:(635000)四川省达州市凤凰大道468号经理办公室。ORCID: 0000-0001-8921-6999。E-mail: zhangqs.zyyt@sinopec.com

摘要

辅助智能决策系统是普光智能气田的重要组成部分之一,其中移动应用是实现辅助智能决策的主要途径。针对普光气田移动终端型号众多、移动应用开发适配难等问题,在分析移动开发服务平台关键技术的基础上,研发了一款高效、快速、灵活的移动开发服务平台(Mobile Open Service Platform,以下简称MOSP),该平台融合了HTML5、Web组件技术,并提供了HTML5与移动原生的双向交互机制,确保由该平台开发的应用适配于所有的移动终端。基于该平台成功开发了普光智能气田移动应用系统,包括门户、勘探、开发、生产、会议、视频等6个功能模块,通过统一接口集成了多个现有智能化应用系统,并且成功调用了不同型号移动终端的相关硬件资源,实现了一次开发多处安装使用的目标。结论认为,MOSP移动开发服务平台关键技术及其在生产典型场景中的应用,为其他油气田的移动应用开发提供了一套可资借鉴的、便捷高效的解决方案。

关键词: 智能气田; 普光气田; MOSP; HTML5; Web组件; 混合开发; 开发框架; 移动应用; 移动视频
Key technologies and application of the Mobile Open Service Platform in the Puguang Intelligent Gas-field Project
Zhang Qingsheng1, Meng Yuping1, Lü Qinglin2, Long Fei1, Li Jinxian1, Lei Jinjing2
1. Sinopec Zhongyuan Oilfield Company, Puyang, Henan 457000, China
2. Puguang Branch of Sinopec Zhongyuan Oilfield Company, Dazhou, Sichuan 635000, China
Abstract

An auxiliary intelligent decision system is one of the important parts in the Puguang Intelligent Gas-field Project, and its mobile application acts as a primary approach. But this will be difficult to realize due to the variety of mobile terminal types in the field. In view of this, based upon the analysis of the involved key technologies, an efficient, rapid and flexible Mobile Open Service Platform (MOSP) was researched and developed, integrating both HTML5 and Web component technologies. This system provides a bidirectional interaction mechanism between HTML5 and native mobile development platform, promising adaptability to all mobile terminals. According to this system, the Puguang Intelligent Gas-field Mobile Application Platform was successfully developed, including six functional modules of Portals, Exploration, Development, Production, Conference and Videos. Multiple existing intelligent application systems are integrated through a consistent interface and the relevant hardware resources are invoked from different types of mobile terminals to achieve the goal of development-once-run-anywhere. It is concluded that the MOSP's key technologies and successful application practices in typical scenarios provide a reference and solution to mobile application development in other oil and gas fields.

Keyword: Intelligent gas field; Puguang Gas Field; MOSP; HTML5; Web component; Hybrid development; Development framework; Mobile application; Mobile video
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时的体验更友好。

图2 HTML5引擎框图
注:JSAPI表示JavaScript脚本语言应用程序接口

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)。

图3 React Native开发引擎框图

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与移动原生的双向交互机制

对于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& param2=value2。那么在WebKit组件的delegate函数中, mosp://开头的地址, 就不进行内容的加载, 转而加载原生代码中的各种资源, 如图5所示。

图5 HTML5加载原生资源框图

2 移动开发服务平台应用

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

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

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

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

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

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

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

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

3 结束语

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

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

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

The authors have declared that no competing interests exist.

参考文献
[1] 罗军舟, 吴文甲, 杨明. 移动互联网: 终端、网络与服务移动互联网[J]. 计算机学报, 2011, 34(11): 2029-2051.
Luo Junzhou, Wu Wenjia & Yang Ming. MobileInternet: Terminal devices, networks and services[J]. Chinese Journal of Computers, 2011, 34(11): 2029-2051. [本文引用:1]
[2] 钟斐艳, 胡德芬, 任玉清, 徐建新, 胡璐瑶. 生产信息化在油气田中的应用及效果评价[J]. 天然气工业, 2017, 37(11): 131-139.
Zhong Feiyan, Hu Defen, Ren Yuqing, Xu Jianxin & Hu Luyao. Application and effect evaluation of production informatization in oil and gas fields[J]. Natural Gas Industry, 2017, 37(11): 131-139. [本文引用:1]
[3] 刘华星, 杨庚. HTML5——下一代Web开发标准研究[J]. 计算机技术与发展, 2011, 21(8): 54-58.
Liu Huaxing & Yang Geng. HTML5: Next generation web development stand ard research[J]. Computer Technology and Development, 2011, 21(8): 54-58. [本文引用:1]
[4] 王健, 杨丽娟. 基于PhoneGap的跨平台移动应用开发研究[J]. 北华航天工业学院学报, 2017, 27(2): 19-21.
Wang Jian & Yang Lijuan. Cross-platform mobile application development based on PhoneGap[J]. Journal of North China Institute of Aerospace Engineering, 2017, 27(2): 19-21. [本文引用:1]
[5] 林文如, 林文忠, 刘镭. 基于弹性盒子模型的跨平台手机应用界面布局[J]. 苏州大学学报 (工科版), 2012, 32(5): 22-26.
Lin Wenru, Lin Wenzhong & Liu Lei. UI Layout of cross-platform APP based on flexible box model[J]. Journal of Soochow University Engineering (Science Edition), 2012, 32(5): 22-26. [本文引用:1]
[6] 高小峰. 混合型移动应用开发框架优势探讨[J]. 信息与电脑, 2018(3): 30-31.
Gao Xiaofeng. Advantages of hybrid mobile application development framework[J]. China Computer & Communication, 2018(3): 30-31. [本文引用:1]
[7] 杨省伟, 何秉羲. 基于WebBrowser的Web自动化操作实现研究[J]. 河南城建学院学报, 2015, 24(3): 56-60.
Yang Xingwei & He Bingxi. Implementation of Web automated operation based on WebBrowser control[J]. Journal of Henan University of Urban Construction, 2015, 24(3): 56-60. [本文引用:1]
[8] 潘婷婷. React Native在APP开发中的应用研究[J]. 无线互联科技, 2016(19): 142-143.
Pan Tingting. Research on the application of react native in the development of APP[J]. Wireless Internet Technology, 2016(19): 142-143. [本文引用:1]
[9] 张文胜, 陈宏. 基于MVCS模式的组件化手机Web前端的研究与应用[J]. 电子设计工程, 2015, 23(11): 19-22.
Zhang Wensheng & Chen Hong. The research and application of components for mobile phone Web front-end based on MVCS mode[J]. International Electronic Elements, 2015, 23(11): 19-22. [本文引用:1]
[10] 王硕, 孙鹏, 郭志川, 胡琳琳. 支持异步调用的WebKit浏览器的JavaScript事件扩展方法[J]. 计算机应用与软件, 2016, 33(1): 226-229.
Wang Shuo, Sun Peng, Guo Zhichuan & Hu Linlin. A method of extending JavaScript event supporting asynchronous invocation mechanism in WebKit browser[J]. Computer Applications and Software, 2016, 33(1): 226-229. [本文引用:1]