跨平臺技術(shù)在礦山監(jiān)測系統(tǒng)中的研究與應(yīng)用①

趙鵬利, 周 鳳

(貴州大學(xué), 貴陽 550000)

跨平臺技術(shù)在礦山監(jiān)測系統(tǒng)中的研究與應(yīng)用①

趙鵬利, 周 鳳

(貴州大學(xué), 貴陽 550000)

由于移動軟件開發(fā)平臺分類多樣, 而且個個平臺之間互不兼容, 致使開發(fā)者需要花費大量的時間在軟件的修改移植和維護方面. 文章融合了Native App與Web App開發(fā)模式的優(yōu)點, 采用混合開發(fā)模型(Hybrid App), 以及與HTML5提供的Web Storage功能、跨平臺等特性結(jié)合, 提出了一種跨平臺(一次編碼, 多處部署)的應(yīng)用開發(fā)方案. 將這種開發(fā)方案應(yīng)用于礦山監(jiān)測系統(tǒng)的開發(fā), 并對用戶登錄密碼通過加密算法進行加密, 保證用戶數(shù)據(jù)信息的安全. 礦山管理人員能夠隨時、隨地的通過這款app監(jiān)測礦山內(nèi)部運作環(huán)境及井下人員分布情況, 實現(xiàn)了實時有效地監(jiān)控, 減少礦山事故的發(fā)生.

HTML5; Hybrid App; 跨平臺; 礦山監(jiān)測系統(tǒng)

近年來煤礦事故頻繁發(fā)生, 這些事故對人員和財產(chǎn)安全構(gòu)成了嚴重的威脅. 由于礦工在井下作業(yè)存在太多的未知因素, 如果對這些未知因素沒有及時有效地監(jiān)測, 礦井事故很容易發(fā)生. 目前, 最常用的礦井安全監(jiān)測系統(tǒng)僅局限于固定的值班室, 值班人員必須寸步不離值班室的監(jiān)控系統(tǒng), 很難實現(xiàn)對井下作業(yè)狀況實時高效地監(jiān)測.

隨著移動互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展, 移動設(shè)備的用戶越來越多, 所以移動應(yīng)用app的開發(fā)也成為了一種趨勢. 由于移動軟件開發(fā)平臺分類多樣, 而且個個平臺之間互不兼容, 所以對于同一款app軟件針對每個平臺都要完全重新開發(fā), 甚至針對同一種平臺的不同的機型, 由于硬件設(shè)備、屏幕等因素的不同都要開展相應(yīng)的開發(fā)工作. 因此, 原生移動應(yīng)用開發(fā)要求程序員針對不同開發(fā)平臺掌握對應(yīng)的編程語言, 很大程度上拖慢了軟件開發(fā)周期, 并且后期軟件的維護也是十分復(fù)雜.

對比原生移動應(yīng)用開發(fā), 本文引入了HTML5移動應(yīng)用開發(fā)(二者對比如圖1所示), 并結(jié)合HTML5+規(guī)范、Mui框架等技術(shù), 將僅局限于固定位置的礦山安全監(jiān)測系統(tǒng)衍伸至移動終端設(shè)備, 從而能夠及時有效地反映礦井作業(yè)的運作情況, 減少一些不必要事故的發(fā)生.

圖1 開發(fā)技術(shù)對比

1 主要技術(shù)

1.1 HTML5和HTML5 plus

由W3C制定的超文本標記語言HTML的第五版標準—HTML5, 從廣義上將, 它是HTML、CSS3、JavaScript以及一系列API的集合[1]. HTML5無需編譯,由基于WebKit內(nèi)核的瀏覽器解析執(zhí)行(android、ios兩大主流移動平臺所使用的Browser內(nèi)核引擎, 都是基于WebKit, 這也是HTML5 app一次開發(fā), 多處應(yīng)用的原因). HTML5新增了Canvas繪圖、＜audio＞、＜video＞、Geolocation、Web Storage等功能元素[3], 這些新特性不僅減少了對Flash等第三方插件的依賴, 而且解決了當網(wǎng)絡(luò)信號中斷或不好時, 保證移動應(yīng)用軟件仍能離線使用提前下載的離線數(shù)據(jù).

盡管HTML5有如此多的優(yōu)勢, 但是單純的HTML5技術(shù)不能調(diào)用設(shè)備能力, 于是HTML5中國產(chǎn)業(yè)聯(lián)盟(w3c支持)推出了HTML5plus(HTML5+規(guī)范).該規(guī)范彌補了HTML5開發(fā)移動APP時的很多能力不足的問題, HTML5+擴展了JavaScript對象plus[2], 可以通過擴展的js api任意調(diào)用手機的原生能力, 如攝像頭、陀螺儀、文件系統(tǒng)等, 這些擴展的js api都有運行于手機端的強化web引擎HTML5+runtime支持, 并且5+runtime被集成到了HTML5開發(fā)工具HBuilder之中,可以直接利用HBuilder把項目中的html、js、css和5+runtime混編打包成APK或IPA文件, 使得HTML5+App的開發(fā)打包更方便.

1.2 Mui

HTML5開發(fā)的移動App與原生App相比在性能和用戶體驗上具有很大的差距, 頁面切換流暢度差、換頁白屏、測滑抽屜卡頓等都是H5開發(fā)的app存在的嚴重問題. 為了解決這些問題, DCloud推出了開源的mui前端框架, 該框架的優(yōu)點在于體積小(不足100k),不會過多消耗手機資源, 拖慢加載速度; 另外, Mui不是封裝的dom, 這也不會像JqueryMobile一樣, 在應(yīng)用運行的時候消耗手機資源去解析HTML5標簽, 有效地加快了頁面的加載速度[2]. 另外, Mui可以通過調(diào)用5+Runtime的plus.webview和plus.NativeUI來增強能力, 提升用戶體驗效果.

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)架構(gòu)設(shè)計

本文提出的礦山安全監(jiān)測系統(tǒng)采用的是混合開發(fā)模型(Hybrid App), 集合了原生應(yīng)用開發(fā)和移動Web應(yīng)用開發(fā)雙方的優(yōu)點, 即解決了移動Web應(yīng)用不能調(diào)用系統(tǒng)的原生能力的問題, 又實現(xiàn)了跨平臺. 礦山安全監(jiān)測系統(tǒng)架構(gòu)如圖2.

圖2 系統(tǒng)架構(gòu)圖

礦山安全監(jiān)測系統(tǒng)分為客戶端、服務(wù)器和數(shù)據(jù)采集端三大功能模塊.

數(shù)據(jù)獲取端通過人工錄入、傳感器傳輸, 或者攝像頭采集的方式收集原始數(shù)據(jù), 然后這些原始數(shù)據(jù)將被傳送到服務(wù)器進行處理.

服務(wù)器是連接客戶端與數(shù)據(jù)采集端的中間橋梁,服務(wù)器將數(shù)據(jù)獲取端得到的數(shù)據(jù)存儲在數(shù)據(jù)庫中, 當服務(wù)器收到客戶端的請求時, 就會查找數(shù)據(jù)庫, 然后以JSON數(shù)據(jù)結(jié)構(gòu)通過HTTP消息的形式傳遞給客戶端.

客戶端是與用戶直接接觸的一層, 用戶所有的需求操作都是通過客戶端來完成.

2.2 客戶端開發(fā)框架設(shè)計

系統(tǒng)的前端開發(fā)基于HTML5實現(xiàn), CSS3配合HTML5實現(xiàn)前端界面布局的設(shè)計與實現(xiàn), JavaScript負責界面的邏輯交互, 為了節(jié)省時間, 提高效率, 采用Mui做為界面UI框架, 客戶端技術(shù)架構(gòu)如圖3. 為了加強代碼可讀性和可維護性, 系統(tǒng)客戶端的設(shè)計采用面前對象和MVC模型進行設(shè)計.

模型(M): 用于存儲程序中使用到的數(shù)據(jù), 即該系統(tǒng)中管理ajax所涉及的各種交互功能或html5本地存儲數(shù)據(jù).

視圖(V): 用不同的表現(xiàn)形式來呈現(xiàn)數(shù)據(jù), 即系統(tǒng)使用mui框架顯示界面, 呈現(xiàn)不同的效果給用戶.

控制器(C): 處理和響應(yīng)事件, 監(jiān)控M, 修改V, 即系統(tǒng)界面邏輯控制的功能, 及使用js所實現(xiàn)處理邏輯結(jié)構(gòu)的函數(shù).

圖3 客戶端技術(shù)架構(gòu)

2.3 客戶端功能模塊設(shè)計

由于礦井的地域環(huán)境復(fù)雜, 很多未知因素都可導(dǎo)致礦山事故的發(fā)生, 因此在制定礦山安全監(jiān)測系統(tǒng)功能模塊時都要以此為出發(fā)點. 系統(tǒng)的功能模塊大體分為: 登錄模塊、生產(chǎn)日報模塊、安全監(jiān)測模塊、人員管理模塊以及系統(tǒng)管理模塊等, 具體的系統(tǒng)功能模塊劃分如圖4.

圖4 系統(tǒng)的功能模塊

登錄模塊: 礦山管理人員或檢測員通過正確的用戶名和密碼登錄九宮格的系統(tǒng)主頁面.

生產(chǎn)日報模塊: 用于統(tǒng)計天、月煤炭產(chǎn)量以及庫存量, 供管理員及時查看煤炭產(chǎn)量.

安全監(jiān)測模塊: 該模塊的主要功能是記錄瓦斯、電力、風向等的實時數(shù)值, 一旦超過安全范圍預(yù)警監(jiān)控將會發(fā)出警告提示; 可以通過視頻監(jiān)控功能查看實時的監(jiān)控錄像.

人員管理模塊: 保證礦工的人身安全是該系統(tǒng)最重要的目的, 礦工在井下作業(yè)時所處的位置及井下人員分布情況都由人員定位實時監(jiān)測, 人員查詢可隨意查詢某個礦工的井下詳細分布信息.

系統(tǒng)管理模塊: 該模塊主要用于對系統(tǒng)進行設(shè)置,及管理賬戶安全, 另外附有系統(tǒng)功能介紹, 詳細的描述了系統(tǒng)各個功能的操作方法.

3 系統(tǒng)實現(xiàn)

客戶端采用HTML5、CSS3和JavaScript等語言結(jié)合Mui框架進行開發(fā), 使用HBuilder作為開發(fā)工具實現(xiàn)前端應(yīng)用程序的開發(fā).

HTML5移動應(yīng)用跨平臺開發(fā)存在兩個關(guān)鍵問題:一是, 如何使開發(fā)的APP適用于所有移動設(shè)備屏幕;二是, 跨域訪問問題.

對于跨域訪問問題通過HTML5+擴展的plus對象XMLHttpRequest實現(xiàn), 該對象與標準HTML中的XMLHttpRequest用途一致, 差別在于前者可以進行跨域訪問,網(wǎng)絡(luò)請求管理對象x獲取如下:

x創(chuàng)建時是不觸發(fā)任何時間和網(wǎng)絡(luò)請求的, 用x.open(method,url)方法初始化HTTP請求, 然后通過x.send(body)方法發(fā)送HTTP請求(說明: method取值Get或Post,body是HTTP提交的數(shù)據(jù)內(nèi)容, 該參數(shù)可有可無, 只有當open()方法中設(shè)置method參數(shù)為Post時必須傳入body值 ).

3.1 登錄模塊

本文的登錄功能設(shè)定用戶為顯示用戶, 礦山管理員必須先注冊, 成為合法用戶才能進行相關(guān)操作, 登錄功能實現(xiàn)功能圖如圖5所示. 用戶輸入合法的用戶名和密碼登錄系統(tǒng), 系統(tǒng)的主界面以九宮格形式展示各個功能模塊, 如圖6所示.

圖5 登錄功能

圖6 系統(tǒng)主界面

為了保證用戶信息在網(wǎng)絡(luò)傳輸中的安全(主要保證用戶登錄密碼的安全).

該系統(tǒng)通過設(shè)定的一個隨機數(shù)據(jù)信息加上要加密的用戶密碼, 然后再通過MD5加密算法生成唯一的編碼token, post將用戶名和密碼傳遞給服務(wù)器時把token值一同傳到服務(wù)器, 然后查詢數(shù)據(jù)庫中的用戶信息,如果匹配則返回綁定該token的用戶信息給客戶端;如沒有查詢到對應(yīng)token綁定的用戶信息, 則將它們插入到服務(wù)器端的數(shù)據(jù)庫中. 加密密碼的代碼如下:

也就是說, 每次登錄時, 不是直接交互用戶名和密碼, 而是通過token交互, 客戶端訪問服務(wù)器只需調(diào)用獲取token接口即可, 即使在網(wǎng)絡(luò)傳輸中被攻擊, 也只是得到一個無用的token值, 無法查詢到用戶信息,保證了用戶信息的安全性.

3.2 視頻監(jiān)控模塊

九宮格頁面點擊“視頻監(jiān)控”按鈕(或通過安全監(jiān)測頁面進入監(jiān)控功能), 進入監(jiān)控選擇頁面, 通過左右滑動可選擇辦公室監(jiān)控和礦井監(jiān)控(井1, 井2, 井3).視頻監(jiān)控功能客戶端利用HTML5提供的＜audio＞元素實現(xiàn),無需依賴任何第三方插件, 示例代碼如下:

4 結(jié)論

本課題利用HTML5跨平臺技術(shù), 實現(xiàn)了一個移動端的礦山安全監(jiān)測系統(tǒng). 該系統(tǒng)的客戶端采用HTML5、CSS3以及JavaScript技術(shù)設(shè)計實現(xiàn). 其中HTML5和CSS3與Mui框架配合完成界面的顯示布局, JavaScript 主要用于頁面的邏輯實現(xiàn), 然后再利用HTML5+規(guī)范, 通過JavaScript調(diào)用手機系統(tǒng)的相應(yīng)API, 通過基于瀏覽器的方式實現(xiàn)跨平臺, 然后通過開發(fā)編譯生成應(yīng)用程序. 客戶端通過HTTP協(xié)議訪問后臺數(shù)據(jù)服務(wù)器, 獲取JSON格式的相應(yīng)數(shù)據(jù)信息以相應(yīng)客戶端請求. 并最終對系統(tǒng)測試使用, 系統(tǒng)功能滿足用戶需求, 運行效果良好. 但是系統(tǒng)仍然存在一些問題, 視頻監(jiān)控功能模塊播放監(jiān)控視頻時, 點擊播放按鈕(此時為非全屏狀態(tài))只存在聲音的播放, 視頻圖像無法顯示, 而當處于全屏狀態(tài)下, 可以正常播放視頻; 另外, 系統(tǒng)的美工效果還需完善.

1 黃永慧,陳程凱.HTML5在移動應(yīng)用開發(fā)上的應(yīng)用前景.計算機技術(shù)與發(fā)展,2013,7:207–210.

2 http://www.dcloud.io/官網(wǎng)

3 張旭紅,劉渭濱.面向移動平臺的新聞資訊系統(tǒng)的設(shè)計與實現(xiàn).計算機應(yīng)用與軟件,2014,1:5–8,42.

4 張延召.基于智能手機平臺的遠程游戲?qū)崟r控制系統(tǒng)[碩士學(xué)位論文].上海:華東師范大學(xué),2013.

5 董鵬程.基于HTML5跨平臺技術(shù)的手機運維系統(tǒng)設(shè)計與實現(xiàn)[碩士學(xué)位論文].鄭州:鄭州大學(xué),2014.

6 方俊宇.基于Android的企業(yè)移動學(xué)習(xí)軟件的設(shè)計與實現(xiàn)[碩士學(xué)位論文].北京交通大學(xué),2014.

7 司徒有波.基于PhoneGap的跨平臺移動電子書店的研究與實現(xiàn)[碩士學(xué)位論文].南京郵電大學(xué),2014.

8 劉東.基于物聯(lián)網(wǎng)的煤礦安全監(jiān)控系統(tǒng)設(shè)計[碩士學(xué)位論文].太原:中北大學(xué),2014.

9 屠衛(wèi)平.基于PhoneGap的跨平臺移動GIS應(yīng)用研究[碩士學(xué)位論文].上海:華東師范大學(xué),2013.

10 陳宏偉.基于PhoneGap的跨平臺移動應(yīng)用開發(fā)及其性能優(yōu)化[碩士學(xué)位論文].南充:西南石油大學(xué),2015.

11 張波.煤礦安全生產(chǎn)綜合監(jiān)控信息系統(tǒng)的設(shè)計與實現(xiàn)[碩士學(xué)位論文].成都:電子科技大學(xué),2013.

Research and Application of Cross Platform Technology in Mine Monitoring Systems

ZHAO Peng-Li, ZHOU Feng
(Guizhou University, Guiyang 550000, China)

Because of the diversity of classification in mobile software development platform, each platform is not compatible with each other. The developer must spend a lot of time in modification, transplantation and maintenance of software. This paper proposes an application development program of cross platform (one time code, multiple deployment), by using the Hybrid App which combines the advantages of Web App and Native App. It has the characteristics such as Web Storage function, cross platform, etc. The program is used in the mine monitoring system development. In addition, it can ensure the security of user information, for encrypting the user password. These managers of mine can check the internal operating enviornment at any time, anywhere through the app monitor. It also realizes real-time monitoring effectively and reduces the occurrence of accidents in mine.

HTML5; Hybrid App; cross-platform; mine monitoring system

2016-04-05;收到修改稿時間:2016-05-12

10.15888/j.cnki.csa.005513