陳忠彬

（玉林市水文局水情科，廣西 玉林 537000）

水文遙測(cè)站維護(hù)“指南者”
——基于HTML5的Web App設(shè)計(jì)與實(shí)現(xiàn)

陳忠彬

（玉林市水文局水情科，廣西 玉林 537000）

為解決水文遙測(cè)站維護(hù)問題，“指南者”采用基于HTML5的Web APP設(shè)計(jì)方式，能很好地被不同系統(tǒng)的計(jì)算機(jī)和移動(dòng)設(shè)備訪問使用。該軟件可以獲取站點(diǎn)故障信息，導(dǎo)航路線到位置，集成了定位、指南針、水平儀等實(shí)用工具，可查詢最新水文數(shù)據(jù)等，為維護(hù)人員提供了有效實(shí)用的幫助。

水文遙測(cè)站；維護(hù)；HTML5；Web APP

1 概述

隨著水文基礎(chǔ)設(shè)施建設(shè)不斷加強(qiáng)，水文遙測(cè)站也越來越多。站點(diǎn)地域分布廣，位置多在偏遠(yuǎn)鄉(xiāng)鎮(zhèn)農(nóng)村。維護(hù)人員不僅需要人工分析故障站點(diǎn)、找所在位置，加上脫離了中心機(jī)房環(huán)境，查詢相關(guān)數(shù)據(jù)不方便。一款跨平臺(tái)、易使用、開發(fā)難度小、“眾口易調(diào)”能適用于不同移動(dòng)智能終端的App顯得尤為重要?；贖TML5的Web App——水文遙測(cè)站維護(hù)“指南者”就符合上述需求，讓維護(hù)人員在不同的移動(dòng)終端都可以訪問使用，方便有效輔助工作。

2 使用主要技術(shù)和開發(fā)工具

2.1 HTML5

HTML5是超文本標(biāo)記語言（HTML）的第5次重大修改，標(biāo)準(zhǔn)標(biāo)準(zhǔn)規(guī)范于2014年10月制定完成，市面上幾乎所有主流的計(jì)算機(jī)和移動(dòng)設(shè)備瀏覽器都支持。

HTML5提高了用戶體驗(yàn)，加強(qiáng)了視覺感受，讓應(yīng)用程序應(yīng)用到網(wǎng)頁，跨平臺(tái)并對(duì)網(wǎng)頁的功能進(jìn)行擴(kuò)展，用戶不需要下載客戶端或插件就能夠觀看視頻、玩游戲，進(jìn)行數(shù)據(jù)交互操作。用戶可以離線使用，更新下載量及少，可以全部更新，也可以選擇替換部分文件。HTML5可以通過瀏覽器作為中介充分利用Native（原生應(yīng)用），比如說可以使用GPS、照相機(jī)、電子羅盤、本地聯(lián)系人等，也可以使用推送功能等。HTML5可以將Web代碼全部加密，本地應(yīng)用解密后再運(yùn)行，大大地提供了代碼的安全性。相對(duì)于通常平臺(tái)的審核需要7個(gè)工作日，HTML5只需修改即可實(shí)時(shí)更新。

HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢(shì)。HT?ML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音應(yīng)用可直接與麥克風(fēng)及攝像頭相聯(lián)。

2.2 Web App

Web App就是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，基于網(wǎng)頁技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用?？缙脚_(tái)，移動(dòng)應(yīng)用開發(fā)者不再需要考慮復(fù)雜的底層適配和跨平臺(tái)開發(fā)語言的問題。傳統(tǒng)移動(dòng)終端上的Native App，研發(fā)工作必須針對(duì)不同的操作系統(tǒng)進(jìn)行，成本相對(duì)較高，對(duì)于用戶還存在著管理成本、存儲(chǔ)成本以及性能消耗成本。使用HTML來開發(fā)的Web App在投入上會(huì)大大的低于傳統(tǒng)的Native App?；诋?dāng)下開始普及流行的HTML5，Web App可以實(shí)現(xiàn)很多原本Native App才可以實(shí)現(xiàn)的功能，比如LBS的功能、本地?cái)?shù)據(jù)存儲(chǔ)、音視頻播放的功能，甚至還有調(diào)用照相機(jī)和結(jié)合GPU的硬件加速功能。Web App則無需用戶下載，并且和傳統(tǒng)網(wǎng)站一樣可以動(dòng)態(tài)升級(jí)。Web App有App的特性，更有Web的特性。Web App可以像傳統(tǒng)互聯(lián)網(wǎng)網(wǎng)頁那樣互相鏈接，從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，從一個(gè)Web App直接跳轉(zhuǎn)到另外一個(gè)Web App。

2.3 基于HTML5的Web App

基于HTML5的Web App既具有HTML5的特性，又有App的功能。能方便被計(jì)算機(jī)、筆記本電腦、移動(dòng)應(yīng)用終端用瀏覽器訪問。用框架軟件封裝成Web App后，可在相應(yīng)移動(dòng)應(yīng)用端安裝使用。如圖1所示。

圖1 基于HTML5的Web App工作原理和訪問模式

2.4 運(yùn)行環(huán)境和主要開發(fā)工具

運(yùn)行環(huán)境：有瀏覽器的計(jì)算機(jī)和移動(dòng)端，使用支持HTML5的瀏覽器（更佳效果使用瀏覽器的高版本），在瀏覽器網(wǎng)址欄輸入http：//www.gxylsw.com：86/cx/index.html可直接訪問?？上螺d應(yīng)用軟件安裝包到安卓設(shè)備端、蘋果設(shè)備端等安裝運(yùn)行。

開發(fā)工具：Adobe Dreamweaver CS5（HTML5網(wǎng)頁、CSS、JS制作軟件），DCloud HBuilder（Web App框架軟件，能打包生產(chǎn)安卓端、蘋果端安裝包），Adobe Photoshop CS6（圖片處理軟件）等。

3 軟件的設(shè)計(jì)與實(shí)現(xiàn)

3.1 功能劃分

3.1.1 查找故障或存在故障水文遙測(cè)站

“故障站點(diǎn)”模塊：可以查看最新GPRS信道通信率，0％表示為故障，100％表示通信正常，介于兩者之間為信號(hào)不穩(wěn)定。

“低電壓警示”模塊：可以查看最新電壓值，如果一個(gè)站點(diǎn)低于蓄電池標(biāo)準(zhǔn)電壓，在接下來一段時(shí)間內(nèi)間隔觀查，如果該站點(diǎn)所在區(qū)域并非陰雨天，而始終處于低電壓工作，判斷為充電器或蓄電池存在故障。

“數(shù)據(jù)異常分析”模塊：設(shè)計(jì)模型為查看站點(diǎn)來報(bào)文信號(hào)，但是雨量數(shù)據(jù)為0的情況。顯示站點(diǎn)連續(xù)多少天雨量為0，如果超過一定天數(shù)，人工查看這段時(shí)間內(nèi)區(qū)域降雨、周邊降雨情況。做出該站點(diǎn)雨量數(shù)據(jù)是否存在異常。

3.1.2 導(dǎo)航到站點(diǎn)位置

“站點(diǎn)導(dǎo)航”模塊：采用了高德地圖的LBS（（Lo?cation Based Service基于位置的服務(wù)）平臺(tái)，定位站點(diǎn)經(jīng)緯度，則可在高德地圖上顯示位置，生產(chǎn)導(dǎo)航路線。選擇性添加站點(diǎn)相關(guān)信息如觀察員姓名、聯(lián)系電話、站點(diǎn)所在環(huán)境照片、備注（有些站點(diǎn)需要帶梯子，或越野車等這樣的提醒信息）。

3.1.3 導(dǎo)航到站點(diǎn)位置

負(fù)責(zé)安裝、維護(hù)，主要有以下3個(gè)模塊：

“經(jīng)緯定位”模塊：獲取定位位置的地址、經(jīng)度、緯度。需要手機(jī)開啟位置定位模式。

“指南針”模塊：電子指南針，指方向，定太陽能板朝向。需要手機(jī)有電子羅盤功能。

“水平儀”模塊：電子水平儀，把手機(jī)放在測(cè)試平面上，可以測(cè)試水平和垂直度。需要手機(jī)有重力感應(yīng)功能。

3.1.4 查詢最新數(shù)據(jù)

“最新數(shù)據(jù)”模塊：查詢站點(diǎn)最新雨量、水位、流量、墑情信息。讓維護(hù)人員維修好儀器后，模擬雨量，看報(bào)文是否準(zhǔn)確及時(shí)發(fā)送回中心機(jī)房，是否入數(shù)據(jù)庫。

3.1.5 其他

“關(guān)于我們”模塊：可以發(fā)布一些通知、聯(lián)系人、聯(lián)系方式等內(nèi)容。

3.2 設(shè)計(jì)方式劃分

3.2.1 訪問云端數(shù)據(jù)庫的HTML5頁面

“站點(diǎn)導(dǎo)航”模塊對(duì)應(yīng)的ditu.html是采用HTML調(diào)用高德LBS平臺(tái)，高德平臺(tái)包含有云端數(shù)據(jù)庫，定義包含有站點(diǎn)名稱，站點(diǎn)類型，經(jīng)度，緯度，觀測(cè)員姓名，觀測(cè)員聯(lián)系電話，備注等字段。云端數(shù)據(jù)庫不用我們自己建設(shè)服務(wù)器和架構(gòu)網(wǎng)站，只需要利用大公司的開發(fā)API平臺(tái)，架構(gòu)強(qiáng)大的服務(wù)功能和免費(fèi)強(qiáng)大的云服務(wù)器，快速、方便、安全訪問數(shù)據(jù)，并能做到實(shí)時(shí)更新。非保密、公開的數(shù)據(jù)和功能都可以放到云端[1]。從移動(dòng)互聯(lián)網(wǎng)技術(shù)與產(chǎn)業(yè)的發(fā)展趨勢(shì)來看，云計(jì)算的迅猛發(fā)展，尤其是“平臺(tái)及服務(wù)”（PaaS）的加速部署，開啟了低成本、大規(guī)模、易運(yùn)行的云服務(wù)時(shí)代。云平臺(tái)工作原理如圖2。

3.2.2 訪問服務(wù)器的HTML5頁面

“故障站點(diǎn)”模塊對(duì)應(yīng)的gzzd.html、“低電壓警示”對(duì)應(yīng)的ddyjs.html和最新數(shù)據(jù)查詢對(duì)應(yīng)的頁面是采用HTML5調(diào)用服務(wù)器架構(gòu)網(wǎng)站頁面，再由此網(wǎng)站頁面去訪問服務(wù)器數(shù)據(jù)庫，這樣可以利用自有服務(wù)器里的數(shù)據(jù)。工作原理如圖2。

圖2 HTML5訪問數(shù)據(jù)庫模式

3.2.3 調(diào)用手機(jī)功能的HTML5頁面

“經(jīng)緯定位”模塊對(duì)應(yīng)的dingwei.html、“指南針”模塊對(duì)應(yīng)的znz.html、“水平儀”模塊對(duì)應(yīng)的spy.html是調(diào)用手機(jī)功能的HTML5頁面。通過HTML5代碼編寫，用Web App框架軟件DCloud Hbuider進(jìn)行封裝。

3.2.4 顯示靜態(tài)內(nèi)容的HTML5頁面

主頁index.html和“關(guān)于我們”模塊對(duì)應(yīng)的about.html就是靜態(tài)頁面，不和數(shù)據(jù)庫互動(dòng)，也不和手機(jī)互動(dòng)，只是顯示頁面的內(nèi)容。采用的實(shí)現(xiàn)方式是HTML5+CSS3+JS代碼，讓靜態(tài)文本和圖片靈動(dòng)起來，更加友好顯示給用戶。

4 結(jié)語

基于HTML5的Web App模式，讓開發(fā)變得簡(jiǎn)單、高效。開發(fā)者可以利用這一模式開發(fā)出多種多功能的應(yīng)用。

水文遙測(cè)站維護(hù)“指南者”讓維護(hù)人員從查找故障、引路到站點(diǎn)位置，維護(hù)后查看數(shù)據(jù)入庫情況?？缙脚_(tái)的應(yīng)用面向拿不同手機(jī)的維護(hù)人員也準(zhǔn)備充分，不安裝直接用瀏覽器操作查詢。安裝包支持市面上占有率最大的安卓和蘋果平臺(tái)，安裝好的軟件可以調(diào)用手機(jī)硬件，實(shí)現(xiàn)定位、指南、水平度測(cè)試等輔助工作。這都為維護(hù)人員提供參考和便利。瀏覽器端和設(shè)備端經(jīng)測(cè)試，都能流暢運(yùn)行。運(yùn)行界面見圖3。

圖3 左側(cè)為手機(jī)瀏覽器界面，右側(cè)為安卓手機(jī)界面

[1] 張成巖，吳 靜，仇劍書，等.基于HTML5的移動(dòng)Web應(yīng)用淺析[J].信息通信技術(shù)，2013（4）：57-60.

（責(zé)任編輯：周 群）

Maintenance guide of hydrological telemetry station-Design and implementation of Web APP based on HTML5

CHEN Zhong-bin
（Hydrology and Water Resources Bureau of Yulin City，Yulin 537000，China）

For maintenance of hydrological telemetry station，the guide is designed as Web APP based on HTML5，which permits visit and application of computer or mobile device installed with different systems.This software is able to effectively help the maintenance personnel by providing trouble information and navigation of failure hydro?logical station，practical tools such as positioning，compass and level etc.，as well as latest hydrological data.

Hydrological telemetry station；maintenance；HTML5；Web APP

TP311.52；P336

B

1003-1510（2016）05-007-03

2016-01-09

陳忠彬（1984-），男，廣西玉林人，廣西玉林市水文水資源局工程師，學(xué)士，主要從事水文情報(bào)預(yù)報(bào)及水文分析工作。