跨平臺技術在礦山監測系統中的研究與應用①

趙鵬利, 周 鳳

(貴州大學, 貴陽 550000)

跨平臺技術在礦山監測系統中的研究與應用①

趙鵬利, 周 鳳

(貴州大學, 貴陽 550000)

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

HTML5; Hybrid App; 跨平臺; 礦山監測系統

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

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

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

圖1 開發技術對比

1 主要技術

1.1 HTML5和HTML5 plus

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

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

1.2 Mui

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

2 系統設計

2.1 系統架構設計

本文提出的礦山安全監測系統采用的是混合開發模型(Hybrid App), 集合了原生應用開發和移動Web應用開發雙方的優點, 即解決了移動Web應用不能調用系統的原生能力的問題, 又實現了跨平臺. 礦山安全監測系統架構如圖2.

圖2 系統架構圖

礦山安全監測系統分為客戶端、服務器和數據采集端三大功能模塊.

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

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

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

2.2 客戶端開發框架設計

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

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

視圖(V): 用不同的表現形式來呈現數據, 即系統使用mui框架顯示界面, 呈現不同的效果給用戶.

控制器(C): 處理和響應事件, 監控M, 修改V, 即系統界面邏輯控制的功能, 及使用js所實現處理邏輯結構的函數.

圖3 客戶端技術架構

2.3 客戶端功能模塊設計

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

圖4 系統的功能模塊

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

生產日報模塊: 用于統計天、月煤炭產量以及庫存量, 供管理員及時查看煤炭產量.

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

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

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

3 系統實現

客戶端采用HTML5、CSS3和JavaScript等語言結合Mui框架進行開發, 使用HBuilder作為開發工具實現前端應用程序的開發.

HTML5移動應用跨平臺開發存在兩個關鍵問題:一是, 如何使開發的APP適用于所有移動設備屏幕;二是, 跨域訪問問題.

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

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

3.1 登錄模塊

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

圖5 登錄功能

圖6 系統主界面

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

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

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

3.2 視頻監控模塊

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

4 結論

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

1 黃永慧,陳程凱.HTML5在移動應用開發上的應用前景.計算機技術與發展,2013,7:207–210.

2 http://www.dcloud.io/官網

3 張旭紅,劉渭濱.面向移動平臺的新聞資訊系統的設計與實現.計算機應用與軟件,2014,1:5–8,42.

4 張延召.基于智能手機平臺的遠程游戲實時控制系統[碩士學位論文].上海:華東師范大學,2013.

5 董鵬程.基于HTML5跨平臺技術的手機運維系統設計與實現[碩士學位論文].鄭州:鄭州大學,2014.

6 方俊宇.基于Android的企業移動學習軟件的設計與實現[碩士學位論文].北京交通大學,2014.

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

8 劉東.基于物聯網的煤礦安全監控系統設計[碩士學位論文].太原:中北大學,2014.

9 屠衛平.基于PhoneGap的跨平臺移動GIS應用研究[碩士學位論文].上海:華東師范大學,2013.

10 陳宏偉.基于PhoneGap的跨平臺移動應用開發及其性能優化[碩士學位論文].南充:西南石油大學,2015.

11 張波.煤礦安全生產綜合監控信息系統的設計與實現[碩士學位論文].成都:電子科技大學,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