基于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.