基于Ionic的礦井安全生產(chǎn)移動(dòng)APP的設(shè)計(jì)

摘 ?要： 為了滿足煤礦用戶對(duì)安全生產(chǎn)過程的實(shí)時(shí)監(jiān)督與管控，提升礦井的安全管理水平，提出了一種基于移動(dòng)終端的礦井安全生產(chǎn)APP應(yīng)用，區(qū)別于傳統(tǒng)的原生開發(fā)APP，采用一種基于Ionic技術(shù)的設(shè)計(jì)與開發(fā)方式，這種設(shè)計(jì)與開發(fā)方式可以讓開發(fā)者通過Web開發(fā)思維，采用Angular，Cordova，HTML5，CSS，TypeScript等前端開發(fā)技術(shù)對(duì)快速的跨平臺(tái)混合移動(dòng)應(yīng)用的開發(fā)，開發(fā)成本小，速度快，可維護(hù)性好，本文介紹了Ionic技術(shù)的基本原理、開發(fā)部署方式及礦井安全生產(chǎn)移動(dòng)APP的設(shè)計(jì)方案，并驗(yàn)證了其可行性。

關(guān)鍵詞： Ionic;混合APP;安全生產(chǎn);礦井;推送

中圖分類號(hào)： TP311 ? ?文獻(xiàn)標(biāo)識(shí)碼： A ? ?DOI：10.3969/j.issn.1003-6970.2019.06.022

本文著錄格式：姚宏昕. 基于Ionic的礦井安全生產(chǎn)移動(dòng)APP的設(shè)計(jì)[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 ?引言

隨著物聯(lián)網(wǎng)、大數(shù)據(jù)、4G等信息化和傳輸網(wǎng)絡(luò)的不斷發(fā)展，不但豐富了信息傳遞及獲取的渠道，同時(shí)也正逐步改變?nèi)藗兊纳詈凸ぷ鞯牧?xí)慣，高效便捷的移動(dòng)辦公也已成為當(dāng)前企業(yè)發(fā)展的主流趨勢(shì)，這一趨勢(shì)同樣也快速影響著煤礦企業(yè)的運(yùn)作方式。

目前，煤礦企業(yè)集團(tuán)公司監(jiān)管部門對(duì)于轄區(qū)內(nèi)的礦井的安全監(jiān)督手段比較有限，為提升安監(jiān)部門的監(jiān)管水平，強(qiáng)化監(jiān)管力度，將轄區(qū)內(nèi)的煤礦安全監(jiān)測(cè)報(bào)警及生產(chǎn)數(shù)據(jù)，都通過移動(dòng)終端進(jìn)行采集展示和實(shí)時(shí)報(bào)警，安全監(jiān)管人員攜帶各自的手機(jī)或者PDA等移動(dòng)終端，通過礦井安全生產(chǎn)移動(dòng)APP及時(shí)掌握管轄礦井安全生產(chǎn)狀況，解決了煤礦安全監(jiān)管不及時(shí)，不到位等問題，實(shí)現(xiàn)遠(yuǎn)程監(jiān)測(cè)、統(tǒng)一管理、集中調(diào)度的目標(biāo)[1]，有效提高礦井的安全生產(chǎn)管理水平。

1 ?基于Ionic的跨平臺(tái)應(yīng)用

目前，Android和iOS操作系統(tǒng)已成為移動(dòng)終端最主流的操作系統(tǒng)，據(jù)統(tǒng)計(jì)，截至2018年11月，iOS終端用戶為29%左右，而Android終端用戶將近70%，兩種系統(tǒng)幾乎占據(jù)了所有的移動(dòng)市場(chǎng)份額，由于這兩種系統(tǒng)開發(fā)語言不同（JAVA和Objective-C）、運(yùn)行環(huán)境不同，基于原生的APP開發(fā)，受制于設(shè)備眾多，系統(tǒng)版本各異，開發(fā)與維護(hù)較為復(fù)雜等因素，App的開發(fā)成本很高[2]，難以滿足礦井用戶對(duì)安全生產(chǎn)移動(dòng)APP個(gè)性化需求的定制和快速響應(yīng)，所以決定采用目前國(guó)內(nèi)外比較流行的 Ionic技術(shù)，采用跨平臺(tái)混合開發(fā)的模式，實(shí)現(xiàn)礦井安全生產(chǎn)移動(dòng)APP的跨平臺(tái)應(yīng)用。

礦井安全生產(chǎn)移動(dòng)APP采用Ionic3進(jìn)行開發(fā)，Ionic3是基于Angular5的免費(fèi)、開源、輕量級(jí)的混合移動(dòng)應(yīng)用框架，采用HTML5、CSS（SASS）和TypeScript等Web技術(shù)快速開發(fā)移動(dòng)應(yīng)用的平臺(tái)，開發(fā)的項(xiàng)目可以直接打包成Android或iOS的應(yīng)用程序，也可以通過Web APP的方式發(fā)布到不同的第三方應(yīng)用程序中，Ionic3主要具備下列幾個(gè)特點(diǎn)：

（1）Ionic是在Angular基礎(chǔ)上開發(fā)出來的框架[5]，支持路由、依賴注入、表單驗(yàn)證、模板化、數(shù)據(jù)雙向綁定等功能，TypeScript語言兼容JavaScript，為跨平臺(tái)的混合快速開發(fā)提供完美的解決方案[3]。

（2）Ionic和Cordova 插件相結(jié)合，可以針對(duì)不同的操作系統(tǒng)平臺(tái)，進(jìn)行擴(kuò)展和封裝，從而實(shí)現(xiàn)對(duì)本地硬件設(shè)備的操作，如攝像頭，鍵盤、文件系統(tǒng)的訪問、文件傳輸、短信、電話，數(shù)據(jù)庫(kù)等，通過Cordova，還可以分別創(chuàng)建基于Android或iOS的工程項(xiàng)目文件[6]。

（3）Ionic采用的懶加載和單頁面的特性，可以讓界面更快速加載和響應(yīng)，再加上Ionic提供了大量Native風(fēng)格的UI組件和圖標(biāo)[7]，可以實(shí)現(xiàn)與原生開發(fā)應(yīng)用相同的用戶體驗(yàn)。

2 ?移動(dòng)APP的設(shè)計(jì)與實(shí)現(xiàn)

2.1 ?系統(tǒng)總體架構(gòu)

礦井安全生產(chǎn)移動(dòng)APP依托移動(dòng)終端，以監(jiān)測(cè)礦井安全生產(chǎn)綜合互聯(lián)平臺(tái)數(shù)據(jù)為基礎(chǔ)，實(shí)現(xiàn)安全生產(chǎn)管理體系下的數(shù)據(jù)、業(yè)務(wù)的移動(dòng)端展示和操作，通過該APP，可以實(shí)時(shí)監(jiān)測(cè)和分析企業(yè)安全生產(chǎn)與經(jīng)營(yíng)管理數(shù)據(jù)，實(shí)現(xiàn)過程準(zhǔn)確輔助決策，決策正確指導(dǎo)過程，使得礦井企業(yè)安全生產(chǎn)經(jīng)營(yíng)管理水平得到螺旋型提升。聯(lián)網(wǎng)平臺(tái)總體架構(gòu)如圖1。

礦井安全生產(chǎn)移動(dòng)APP的總體目標(biāo)是通過Ionic的跨平臺(tái)技術(shù)，實(shí)現(xiàn)移動(dòng)終端對(duì)礦井運(yùn)行數(shù)據(jù)的采集和展示。移動(dòng)端與服務(wù)器的數(shù)據(jù)交互通過Web API接口實(shí)現(xiàn)，并通過4G或WIFI網(wǎng)絡(luò)通道進(jìn)行傳輸，從而保證移動(dòng)端能夠?qū)崟r(shí)獲取集團(tuán)公司web發(fā)布服務(wù)器中已經(jīng)存儲(chǔ)的下屬各礦井子系統(tǒng)上傳的實(shí)時(shí)數(shù)據(jù)和歷史數(shù)據(jù)，并且將故障、報(bào)警等信息及時(shí)推送到用戶的手機(jī)客戶端進(jìn)行提醒。APP中主要實(shí)現(xiàn)的功能如下：

（1）獲取聯(lián)網(wǎng)中所有礦井的報(bào)警信息，并實(shí)時(shí)推送相關(guān)用戶。

（2）查閱聯(lián)網(wǎng)中所有礦井的生產(chǎn)類關(guān)鍵數(shù)據(jù)以及聯(lián)網(wǎng)礦井的通斷情況。

（3） 查閱聯(lián)網(wǎng)中所選擇的礦井的瓦斯監(jiān)測(cè)數(shù)據(jù)、人員定位數(shù)據(jù)、產(chǎn)量監(jiān)測(cè)數(shù)據(jù)、生產(chǎn)過程數(shù)據(jù)、視頻聯(lián)網(wǎng)數(shù)據(jù)等子系統(tǒng)數(shù)據(jù)。

2.2 ?Ionic項(xiàng)目開發(fā)部署

Ionic的項(xiàng)目通過Visual Studio Code開發(fā)工具進(jìn)行開發(fā)，并通過gitlab進(jìn)行源代碼管理。整個(gè)Ionic的項(xiàng)目結(jié)構(gòu)如圖2。

Ionic項(xiàng)目的創(chuàng)建主要為以下幾個(gè)步驟：

（1）首先安裝Node.js，通過npm安裝Ionic：

npm install -g ionic cordova

（2）當(dāng)確定Ionic已經(jīng)安裝成功后，就可以開始創(chuàng)建聯(lián)網(wǎng)項(xiàng)目：

Ionic start securitynet tab

（3）創(chuàng)建成功后，在package.xml中添加項(xiàng)目所需的插件文件，并通過npm install進(jìn)行安裝，安裝成功后，就可以進(jìn)行項(xiàng)目的開發(fā)，并且通過ionic serve的命令進(jìn)行調(diào)試。

（4） ?項(xiàng)目調(diào)試成功后，通過以下命令創(chuàng)建Android平臺(tái)項(xiàng)目和iOS平臺(tái)項(xiàng)目

ionic cordova platform add ?android/ ios

（5）已經(jīng)創(chuàng)建好的平臺(tái)項(xiàng)目，打包發(fā)布時(shí)，對(duì)于ios平臺(tái)，需要通過XCode工具進(jìn)行配置，打包和發(fā)布ipa文件，而對(duì)于Android平臺(tái)直接可以通過以下命令進(jìn)行編譯打包apk文件：

ionic cordova build android --release –prod

2.3 ?礦井安全生產(chǎn)移動(dòng)APP設(shè)計(jì)

礦井安全生產(chǎn)移動(dòng)APP總體架構(gòu)包括網(wǎng)絡(luò)請(qǐng)求，頁面組件，數(shù)據(jù)傳遞，數(shù)據(jù)存儲(chǔ)和消息推送這5個(gè)部分，框圖如下。

（1）網(wǎng)絡(luò)請(qǐng)求

移動(dòng)APP的數(shù)據(jù)請(qǐng)求使用Web API接口，通過RxJS異步編程機(jī)制控制HTTP的POST和GET請(qǐng)求，并在HttpServiceProvider的服務(wù)中實(shí)現(xiàn)基于RxJS的HTTP方法，在方法中返回一個(gè)與Promise類似的Observable對(duì)象，然后調(diào)用 RxJS 的 map 操作符對(duì)返回的數(shù)據(jù)進(jìn)行操作。

交互中所使用的數(shù)據(jù)格式為輕量級(jí)的數(shù)據(jù)交換格式JSON，可以對(duì)數(shù)據(jù)快速組裝及解析，節(jié)省用戶網(wǎng)絡(luò)流量，提高接口速度，快速為用戶展示所要查詢的實(shí)時(shí)和歷史數(shù)據(jù)。

（2）頁面組件

項(xiàng)目中的頁面都存放在page目錄中，通過ionic g page xxx，進(jìn)行創(chuàng)建，組件存放在componets目錄中，通過ionic g component xxx命令進(jìn)行創(chuàng)建，分別會(huì)自動(dòng)生成html頁面布局文件，scss頁面樣式文件，module.ts模塊配置文件，和ts頁面腳本文件，通過@IonicPage（）裝飾器可以實(shí)現(xiàn)基于NavController導(dǎo)航的Page頁面的懶加載。

頁面間的跳轉(zhuǎn)依賴NavController進(jìn)行控制，實(shí)時(shí)數(shù)據(jù)的變化自動(dòng)更新，采用ngModel雙向綁定（two way binding）[4]。項(xiàng)目中實(shí)時(shí)數(shù)據(jù)列表頁面如下：

項(xiàng)目中涉及的實(shí)時(shí)數(shù)據(jù)的圖表顯示、歷史測(cè)點(diǎn)的曲線展示都通過echarts插件來完成。echarts的底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，可以提供直觀，生動(dòng)，可交互，高度定制的數(shù)據(jù)可視化圖表，通過自適應(yīng)寬度與用戶多樣的設(shè)備屏幕大小進(jìn)行適配。

由于Ionic3采用了TypeScript語言進(jìn)行編寫，echarts為純js插件，所以需要安裝typings，從而實(shí)現(xiàn)在ts庫(kù)中生成第三方j(luò)s 庫(kù)的ts文件，可以方便的引入基于js的插件包。

實(shí)時(shí)數(shù)據(jù)、歷史曲線和人員定位的展示頁面如圖4。

（3）數(shù)據(jù)傳遞

移動(dòng)APP中不同頁面組件之間的數(shù)據(jù)交互可以根據(jù)不同的使用場(chǎng)景分別進(jìn)行采用不通的技術(shù)方式，主要涉及到一下幾種類型：

a）普通的查詢頁面、數(shù)據(jù)詳情頁面間數(shù)據(jù)傳遞通過NavController.push方法實(shí)現(xiàn);

b）首頁及各功能模塊主頁面的Tab頁與其內(nèi)部子頁面之間的傳值通過在Tab頁html中設(shè)置[rootParams]進(jìn)行實(shí)現(xiàn);

c）涉及到例如切換單位時(shí)，需要通知多個(gè)相關(guān)頁面同時(shí)接收的數(shù)據(jù)并重新刷新時(shí)，采用Events方法，在需要傳遞觸發(fā)事件的頁面中Events.publish訂閱事件、在需要接收事件的頁面提前進(jìn)行Events.subscribe訂閱事件，處理相關(guān)操作;

d）對(duì)于類似彈出側(cè)邊欄篩選條件組件的情況，采用@input和@output的注解方式實(shí)現(xiàn)父子頁面的傳值，也可以通過EventEmitter實(shí)現(xiàn)子組件向父組件發(fā)送消息，傳遞觸發(fā)事件。

（4）數(shù)據(jù)存儲(chǔ)

登錄用戶的基本信息，業(yè)務(wù)流程中通用的配置文件，以及業(yè)務(wù)中生成的臨時(shí)數(shù)據(jù)的存儲(chǔ)和讀取通過在StorageServiceProvider服務(wù)中創(chuàng)建基于localStorage的getItem和setItem方式來實(shí)現(xiàn)，從而

解決了cookie存儲(chǔ)空間不足的問題。localStorage為永久性存儲(chǔ)，大小為5M，需要通過代碼及時(shí)清理失效的數(shù)據(jù)，保證后續(xù)數(shù)據(jù)的存儲(chǔ)。

（5）消息推送

消息推送模塊需要系統(tǒng)能快速精確的將報(bào)警故障信息傳遞到相關(guān)用戶手機(jī)上，所以為盡可能兼容Android和iOS平臺(tái)及不同品牌手機(jī)軟硬件的差異性，項(xiàng)目中采用jpush極光推送服務(wù)來實(shí)現(xiàn)報(bào)警故障的消息推送。對(duì)于Android設(shè)備，需要移動(dòng)APP與JPush服務(wù)器保持長(zhǎng)連接，而對(duì)于iOS設(shè)備，只需要iOS設(shè)備與APNs服務(wù)器保持長(zhǎng)連接，具體消息推送流程如圖5。

3 ?結(jié)束語

本文提出了一種基于Ionic框架的礦井安全生產(chǎn)移動(dòng)APP，并給出了移動(dòng)APP的整體架構(gòu)和移動(dòng)客戶端的原理和實(shí)現(xiàn)方法，用Ionic開發(fā)的安全生成移動(dòng)APP已經(jīng)開始在煤礦現(xiàn)場(chǎng)進(jìn)行使用，操作流暢，維護(hù)簡(jiǎn)單，得到用戶的認(rèn)可。隨著Ionic技術(shù)的不斷更新完善，無線互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，以及HTML5 技術(shù)在移動(dòng)互聯(lián)網(wǎng)的越來越廣泛的應(yīng)用，這種基于Ionic的混合開發(fā)技術(shù)將為礦井安全管理、生產(chǎn)聯(lián)網(wǎng)等系統(tǒng)的移動(dòng)端應(yīng)用提供一種發(fā)展方向和思路。

參考文獻(xiàn)

[1] 杜建平. 煤礦安全監(jiān)測(cè)綜合信息聯(lián)網(wǎng)平臺(tái)的設(shè)計(jì)及應(yīng)用[J].工礦自動(dòng)化， 2011（1）： 102-104.

[2] 高興建， 花曉慧， 邢溧萍. 基于Ionic的混合移動(dòng)應(yīng)用的研究與實(shí)現(xiàn)[J]. 計(jì)算機(jī)時(shí)代， 2018（3）： 31-34.

[3] 方全. 基于 Ionic+AngularJS+Cordova 框架的異常郵件 雙錄查據(jù)系統(tǒng)手機(jī)客戶端的構(gòu)建[J]. 郵政研究， 2018（1）： 25-27.

[4] 郝明哲， 王希. 基于Ionic 的移動(dòng)跨平臺(tái)試飛實(shí)時(shí)監(jiān)控[J]. 中國(guó)科技信息， 2018（7）： 30-32.

[5] 彭娟. 跨平臺(tái)移動(dòng)應(yīng)用開發(fā)技術(shù)研究[J]. 科學(xué)咨詢，?2017（8）： 59-60.

[6] 薛君. 基于Ionic和Cordova的跨平臺(tái)移植APP的設(shè)計(jì)開發(fā)[J]. 電子技術(shù)與軟件工程， 2019（5）： 45-46.

[7] 朱凱南， 李艷平， 申閆春， 魏鄧航， 余越. 基于Ionic和Cordova的跨平臺(tái)移動(dòng)APP的研究與應(yīng)用[J]. 電腦知識(shí)與技術(shù)， 2016（1）： 119-121.

[8] 梁穌. 基于Ionic和PhoneGap的移動(dòng)跨平臺(tái)開發(fā)技術(shù)研究與應(yīng)用實(shí)現(xiàn)[D]. 昆明： 云南大學(xué)， 計(jì)算機(jī)國(guó)家， 2016.

[9] Chris， Griffith. 基于Ionic的移動(dòng)App開發(fā)[M]. 北京： 中國(guó)電力出版社， 2017.

[10] 秦超， 李一鳴. Ionic 移動(dòng)開發(fā)入門與實(shí)戰(zhàn)（第2版）[M]. 北京： 清華大學(xué)出版社， 2018.