跨平台技术在矿山监测系统中的研究与应用①

赵鹏利, 周 凤

(贵州大学, 贵阳 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