基于Ionic的矿井安全生产移动APP的设计

摘  要： 为了满足煤矿用户对安全生产过程的实时监督与管控，提升矿井的安全管理水平，提出了一种基于移动终端的矿井安全生产APP应用，区别于传统的原生开发APP，采用一种基于Ionic技术的设计与开发方式，这种设计与开发方式可以让开发者通过Web开发思维，采用Angular，Cordova，HTML5，CSS，TypeScript等前端开发技术对快速的跨平台混合移动应用的开发，开发成本小，速度快，可维护性好，本文介绍了Ionic技术的基本原理、开发部署方式及矿井安全生产移动APP的设计方案，并验证了其可行性。

关键词： Ionic;混合APP;安全生产;矿井;推送

中图分类号： TP311    文献标识码： A    DOI：10.3969/j.issn.1003-6970.2019.06.022

本文著录格式：姚宏昕. 基于Ionic的矿井安全生产移动APP的设计[J]. 软件，2019，40（6）：101104+129

【Abstract】： In order to satisfy the real-time supervision and control of safety production process by coal mine users and improve the safety management level of mine， a mine safety production APP based on mobile terminal is proposed， different from traditional native development mode， a design method based on Ionic is proposed， which can enable developers to use Angular， Cordova， HTML5， CSS， TypeScript for rapid development of cross-platform hybrid app quickly through Web development thinking. The development cost is small， the development speed is fast， and the maintainability is good. In this paper， it will introduces the basic principle， development and deployment of Ionic technology and the design scheme of Mine Networking App， its feasibility will be verified.

【Key words】： Ionic; Hybrid app; Safety production; Mine; Push

0  引言

隨着物联网、大数据、4G等信息化和传输网络的不断发展，不但丰富了信息传递及获取的渠道，同时也正逐步改变人们的生活和工作的习惯，高效便捷的移动办公也已成为当前企业发展的主流趋势，这一趋势同样也快速影响着煤矿企业的运作方式。

目前，煤矿企业集团公司监管部门对于辖区内的矿井的安全监督手段比较有限，为提升安监部门的监管水平，强化监管力度，将辖区内的煤矿安全监测报警及生产数据，都通过移动终端进行采集展示和实时报警，安全监管人员携带各自的手机或者PDA等移动终端，通过矿井安全生产移动APP及时掌握管辖矿井安全生产状况，解决了煤矿安全监管不及时，不到位等问题，实现远程监测、统一管理、集中调度的目标[1]，有效提高矿井的安全生产管理水平。

1  基于Ionic的跨平台应用

目前，Android和iOS操作系统已成为移动终端最主流的操作系统，据统计，截至2018年11月，iOS终端用户为29%左右，而Android终端用户将近70%，两种系统几乎占据了所有的移动市场份额，由于这两种系统开发语言不同（JAVA和Objective-C）、运行环境不同，基于原生的APP开发，受制于设备众多，系统版本各异，开发与维护较为复杂等因素，App的开发成本很高[2]，难以满足矿井用户对安全生产移动APP个性化需求的定制和快速响应，所以决定采用目前国内外比较流行的 Ionic技术，采用跨平台混合开发的模式，实现矿井安全生产移动APP的跨平台应用。

矿井安全生产移动APP采用Ionic3进行开发，Ionic3是基于Angular5的免费、开源、轻量级的混合移动应用框架，采用HTML5、CSS（SASS）和TypeScript等Web技术快速开发移动应用的平台，开发的项目可以直接打包成Android或iOS的应用程序，也可以通过Web APP的方式发布到不同的第三方应用程序中，Ionic3主要具备下列几个特点：

（1）Ionic是在Angular基础上开发出来的框架[5]，支持路由、依赖注入、表单验证、模板化、数据双向绑定等功能，TypeScript语言兼容JavaScript，为跨平台的混合快速开发提供完美的解决方案[3]。

（2）Ionic和Cordova 插件相结合，可以针对不同的操作系统平台，进行扩展和封装，从而实现对本地硬件设备的操作，如摄像头，键盘、文件系统的访问、文件传输、短信、电话，数据库等，通过Cordova，还可以分别创建基于Android或iOS的工程项目文件[6]。

（3）Ionic采用的懒加载和单页面的特性，可以让界面更快速加载和响应，再加上Ionic提供了大量Native风格的UI组件和图标[7]，可以实现与原生开发应用相同的用户体验。

2  移动APP的设计与实现

2.1  系统总体架构

矿井安全生产移动APP依托移动终端，以监测矿井安全生產综合互联平台数据为基础，实现安全生产管理体系下的数据、业务的移动端展示和操作，通过该APP，可以实时监测和分析企业安全生产与经营管理数据，实现过程准确辅助决策，决策正确指导过程，使得矿井企业安全生产经营管理水平得到螺旋型提升。联网平台总体架构如图1。

矿井安全生产移动APP的总体目标是通过Ionic的跨平台技术，实现移动终端对矿井运行数据的采集和展示。移动端与服务器的数据交互通过Web API接口实现，并通过4G或WIFI网络通道进行传输，从而保证移动端能够实时获取集团公司web发布服务器中已经存储的下属各矿井子系统上传的实时数据和历史数据，并且将故障、报警等信息及时推送到用户的手机客户端进行提醒。APP中主要实现的功能如下：

（1）获取联网中所有矿井的报警信息，并实时推送相关用户。

（2）查阅联网中所有矿井的生产类关键数据以及联网矿井的通断情况。

（3） 查阅联网中所选择的矿井的瓦斯监测数据、人员定位数据、产量监测数据、生产过程数据、视频联网数据等子系统数据。

2.2  Ionic项目开发部署

Ionic的项目通过Visual Studio Code开发工具进行开发，并通过gitlab进行源代码管理。整个Ionic的项目结构如图2。

Ionic项目的创建主要为以下几个步骤：

（1）首先安装Node.js，通过npm安装Ionic：

npm install -g ionic cordova

（2）当确定Ionic已经安装成功后，就可以开始创建联网项目：

Ionic start securitynet tab

（3）创建成功后，在package.xml中添加项目所需的插件文件，并通过npm install进行安装，安装成功后，就可以进行项目的开发，并且通过ionic serve的命令进行调试。

（4）  项目调试成功后，通过以下命令创建Android平台项目和iOS平台项目

ionic cordova platform add  android/ ios

（5）已经创建好的平台项目，打包发布时，对于ios平台，需要通过XCode工具进行配置，打包和发布ipa文件，而对于Android平台直接可以通过以下命令进行编译打包apk文件：

ionic cordova build android --release –prod

2.3  矿井安全生产移动APP设计

矿井安全生产移动APP总体架构包括网络请求，页面组件，数据传递，数据存储和消息推送这5个部分，框图如下。

（1）网络请求

移动APP的数据请求使用Web API接口，通过RxJS异步编程机制控制HTTP的POST和GET请求，并在HttpServiceProvider的服务中实现基于RxJS的HTTP方法，在方法中返回一个与Promise类似的Observable对象，然后调用 RxJS 的 map 操作符对返回的数据进行操作。

交互中所使用的数据格式为轻量级的数据交换格式JSON，可以对数据快速组装及解析，节省用户网络流量，提高接口速度，快速为用户展示所要查询的实时和历史数据。

（2）页面组件

项目中的页面都存放在page目录中，通过ionic g page xxx，进行创建，组件存放在componets目录中，通过ionic g component xxx命令进行创建，分别会自动生成html页面布局文件，scss页面样式文件，module.ts模块配置文件，和ts页面脚本文件，通过@IonicPage（）装饰器可以实现基于NavController导航的Page页面的懒加载。

页面间的跳转依赖NavController进行控制，实时数据的变化自动更新，采用ngModel双向绑定（two way binding）[4]。项目中实时数据列表页面如下：

项目中涉及的实时数据的图表显示、历史测点的曲线展示都通过echarts插件来完成。echarts的底层依赖轻量级的Canvas类库ZRender，可以提供直观，生动，可交互，高度定制的数据可视化图表，通过自适应宽度与用户多样的设备屏幕大小进行适配。

由于Ionic3采用了TypeScript语言进行编写，echarts为纯js插件，所以需要安装typings，从而实现在ts库中生成第三方js 库的ts文件，可以方便的引入基于js的插件包。

实时数据、历史曲线和人员定位的展示页面如图4。

（3）数据传递

移动APP中不同页面组件之间的数据交互可以根据不同的使用场景分别进行采用不通的技术方式，主要涉及到一下几种类型：

a）普通的查询页面、数据详情页面间数据传递通过NavController.push方法实现;

b）首页及各功能模块主页面的Tab页与其内部子页面之间的传值通过在Tab页html中设置[rootParams]进行实现;

c）涉及到例如切换单位时，需要通知多个相关页面同时接收的数据并重新刷新时，采用Events方法，在需要传递触发事件的页面中Events.publish订阅事件、在需要接收事件的页面提前进行Events.subscribe订阅事件，处理相关操作;

d）对于类似弹出侧边栏筛选条件组件的情况，采用@input和@output的注解方式实现父子页面的传值，也可以通过EventEmitter实现子组件向父组件发送消息，传递触发事件。

（4）数据存储

登录用户的基本信息，业务流程中通用的配置文件，以及业務中生成的临时数据的存储和读取通过在StorageServiceProvider服务中创建基于localStorage的getItem和setItem方式来实现，从而

解决了cookie存储空间不足的问题。localStorage为永久性存储，大小为5M，需要通过代码及时清理失效的数据，保证后续数据的存储。

（5）消息推送

消息推送模块需要系统能快速精确的将报警故障信息传递到相关用户手机上，所以为尽可能兼容Android和iOS平台及不同品牌手机软硬件的差异性，项目中采用jpush极光推送服务来实现报警故障的消息推送。对于Android设备，需要移动APP与JPush服务器保持长连接，而对于iOS设备，只需要iOS设备与APNs服务器保持长连接，具体消息推送流程如图5。

3  结束语

本文提出了一种基于Ionic框架的矿井安全生产移动APP，并给出了移动APP的整体架构和移动客户端的原理和实现方法，用Ionic开发的安全生成移动APP已经开始在煤矿现场进行使用，操作流畅，维护简单，得到用户的认可。随着Ionic技术的不断更新完善，无线互联网技术的不断发展，以及HTML5 技术在移动互联网的越来越广泛的应用，这种基于Ionic的混合开发技术将为矿井安全管理、生产联网等系统的移动端应用提供一种发展方向和思路。

参考文献

[1] 杜建平. 煤矿安全监测综合信息联网平台的设计及应用[J].工矿自动化， 2011（1）： 102-104.

[2] 高兴建， 花晓慧， 邢溧萍. 基于Ionic的混合移动应用的研究与实现[J]. 计算机时代， 2018（3）： 31-34.

[3] 方全. 基于 Ionic+AngularJS+Cordova 框架的异常邮件 双录查据系统手机客户端的构建[J]. 邮政研究， 2018（1）： 25-27.

[4] 郝明哲， 王希. 基于Ionic 的移动跨平台试飞实时监控[J]. 中国科技信息， 2018（7）： 30-32.

[5] 彭娟. 跨平台移动应用开发技术研究[J]. 科学咨询， 2017（8）： 59-60.

[6] 薛君. 基于Ionic和Cordova的跨平台移植APP的设计开发[J]. 电子技术与软件工程， 2019（5）： 45-46.

[7] 朱凯南， 李艳平， 申闫春， 魏邓航， 余越. 基于Ionic和Cordova的跨平台移动APP的研究与应用[J]. 电脑知识与技术， 2016（1）： 119-121.

[8] 梁稣. 基于Ionic和PhoneGap的移动跨平台开发技术研究与应用实现[D]. 昆明： 云南大学， 计算机国家， 2016.

[9] Chris， Griffith. 基于Ionic的移动App开发[M]. 北京： 中国电力出版社， 2017.

[10] 秦超， 李一鸣. Ionic 移动开发入门与实战（第2版）[M]. 北京： 清华大学出版社， 2018.