趙鵬利, 周 鳳

(貴州大學(xué), 貴陽(yáng) 550000)

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

趙鵬利, 周 鳳

(貴州大學(xué), 貴陽(yáng) 550000)

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

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

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

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

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

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

1 主要技術(shù)

1.1 HTML5和HTML5 plus

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

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

1.2 Mui

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

生產(chǎn)日?qǐng)?bào)模塊: 用于統(tǒng)計(jì)天、月煤炭產(chǎn)量以及庫(kù)存量, 供管理員及時(shí)查看煤炭產(chǎn)量.

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

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

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

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

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

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

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

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

3.1 登錄模塊

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

圖5 登錄功能

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

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

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

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

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

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

4 結(jié)論

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

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

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

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

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

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

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

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

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

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

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

11 張波.煤礦安全生產(chǎn)綜合監(jiān)控信息系統(tǒng)的設(shè)計(jì)與實(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;收到修改稿時(shí)間:2016-05-12

10.15888/j.cnki.csa.005513