鄭曉陽，錢國(guó)民，許維明

（上海市防汛信息中心，上海 200050）

跨平臺(tái)防汛移動(dòng)應(yīng)用研究與實(shí)踐

鄭曉陽，錢國(guó)民，許維明

（上海市防汛信息中心，上海 200050）

在移動(dòng)互聯(lián)網(wǎng)技術(shù)和應(yīng)用快速發(fā)展的背景下，開拓防汛移動(dòng)應(yīng)用新模式是防汛工作融入時(shí)代發(fā)展的重要舉措。提出移動(dòng)互聯(lián)、隨時(shí)隨地、快速迭代、小步快跑等理念，研究基于 HTML5 和 jQuery Mobile 的技術(shù)路線，開發(fā)跨平臺(tái)、自適應(yīng)和低成本特色的防汛移動(dòng)應(yīng)用。移動(dòng)應(yīng)用在上海抗御 2014 年暴雨、臺(tái)風(fēng)、高潮位等實(shí)戰(zhàn)中發(fā)揮重要作用，成為防汛工作的新利器，對(duì)推進(jìn)防汛現(xiàn)代化進(jìn)程具有積極意義。

跨平臺(tái)；移動(dòng)應(yīng)用；HTML5；上海防汛

0 引言

在移動(dòng)互聯(lián)網(wǎng)和移動(dòng)智能終端日益成為新一輪創(chuàng)新浪潮的背景下，開拓全新的移動(dòng)防汛模式，隨時(shí)隨地為防汛人員與社會(huì)公眾提供更加便捷的汛情資訊，是防汛工作追蹤技術(shù)，貼近應(yīng)用，融入時(shí)代的重要舉措。近年來國(guó)內(nèi)水利部門針對(duì)防汛的移動(dòng)應(yīng)用也開展了一些積極的探索，但也存在針對(duì)蘋果和安卓操作系統(tǒng)單列開發(fā)所面臨的開放、兼容，以及運(yùn)維成本、技術(shù)升級(jí)等一系列問題。為此針對(duì)上海的防汛實(shí)際，在吸收國(guó)內(nèi)同行業(yè)經(jīng)驗(yàn)和教訓(xùn)的基礎(chǔ)上，就構(gòu)建跨平臺(tái)、自適應(yīng)、低成本特色的防汛移動(dòng)應(yīng)用方面進(jìn)行了積極研究和實(shí)踐。

1 設(shè)計(jì)思想

1）移動(dòng)互聯(lián)、隨時(shí)隨地。來自工業(yè)與信息化部的數(shù)據(jù)顯示，移動(dòng)智能終端的數(shù)量已全面超過 PC 電腦，移動(dòng)互聯(lián)網(wǎng)上網(wǎng)時(shí)長(zhǎng)也超過 PC 互聯(lián)網(wǎng)，我國(guó)已成為人均擁有移動(dòng)智能終端數(shù)量最多，移動(dòng)應(yīng)用發(fā)展最快的國(guó)家。集語音通話、短信、拍照、視頻、地圖導(dǎo)航、即時(shí)通訊等功能于一體的移動(dòng)智能終端已成為移動(dòng)應(yīng)用快速發(fā)展的重要載體，在以微信、QQ、移動(dòng)購(gòu)物、移動(dòng)支付等一系列代表性的移動(dòng)應(yīng)用推動(dòng)下，人們對(duì)移動(dòng)應(yīng)用的認(rèn)知已完全顛覆了傳統(tǒng)終端的功能和定位。移動(dòng)互聯(lián)網(wǎng)應(yīng)用正不斷縮短人與社會(huì)的距離，人與事物的聯(lián)系越來越密切，信息的傳遞與獲取變得越來越簡(jiǎn)單。移動(dòng)互聯(lián)網(wǎng)時(shí)代正悄然變成現(xiàn)實(shí)，移動(dòng)智能終端已成為人體的重要“器官”和工作生活的必需品。為此，加快創(chuàng)新轉(zhuǎn)型，抓住發(fā)展機(jī)遇，將互聯(lián)網(wǎng)思維引入防汛業(yè)務(wù)，用移動(dòng)應(yīng)用深化防汛在社會(huì)管理和公共服務(wù)中的能力和水平，是防汛信息化肩負(fù)的重要任務(wù)。

2）快速迭代、小步快跑。在移動(dòng)互聯(lián)時(shí)代，未知與需求轉(zhuǎn)瞬即變，先進(jìn)與落后盡在一念之間。移動(dòng)應(yīng)用的價(jià)值與人們行為習(xí)慣和社會(huì)發(fā)展的變化高度關(guān)聯(lián)，動(dòng)態(tài)運(yùn)營(yíng)的能力決定了移動(dòng)應(yīng)用的生命力。僅為滿足固化的應(yīng)用習(xí)慣、全部想明白再行動(dòng)的傳統(tǒng)工程思維已不能適應(yīng)時(shí)代發(fā)展的需要。迅速感知用戶的需求，不斷進(jìn)行版本更新，用迭代開發(fā)、小步快跑、滾動(dòng)發(fā)展的新思維，不斷為防汛移動(dòng)應(yīng)用植入新鮮養(yǎng)料，是上海防汛移動(dòng)應(yīng)用開發(fā)的重要法則。

3）多目標(biāo)、跨平臺(tái)、自適應(yīng)。目前，Android，iOS，Windows Phone，Symbian，BlackBerry 等移動(dòng)操作系統(tǒng)呈現(xiàn)出多個(gè)共存、互不兼容的局面，智能手機(jī)、平板電腦、筆記本電腦、PDA 等移動(dòng)智能終端也日趨個(gè)性化和多樣化，技術(shù)和產(chǎn)品的兼容性給移動(dòng)應(yīng)用開發(fā)帶來了許多困惑。能運(yùn)行于多種移動(dòng)操作系統(tǒng)，適應(yīng)多尺寸移動(dòng)智能終端，攻克相關(guān)技術(shù)難點(diǎn)，是上海防汛移動(dòng)應(yīng)用開發(fā)的一個(gè)重要突破方向。為此，采用邊開發(fā)、邊應(yīng)用、邊完善的“三邊”策略，在實(shí)踐中取得了成功。應(yīng)用證明，上海防汛移動(dòng)應(yīng)用不僅較好地服務(wù)于市、區(qū)縣和街道鄉(xiāng)鎮(zhèn)的多級(jí)防汛應(yīng)用，也為水資源管理、水環(huán)境整治和政務(wù)辦公等應(yīng)用奠定必要的技術(shù)儲(chǔ)備和提供統(tǒng)一的支撐平臺(tái)，新效能和新體驗(yàn)為全市的防汛工作注入了新的活力。

2 技術(shù)路線

在主流的移動(dòng)操作系統(tǒng)中，Android 和 iOS 占據(jù)了絕大部分市場(chǎng)，而使用 Java 的 Android 和使用Object C 的 iOS 開發(fā)技術(shù)幾乎無法融合。若同樣的程序邏輯使用不同的語言和 API 重復(fù)編碼來滿足多平臺(tái)運(yùn)行需要，無論從開發(fā)的角度還是代碼維護(hù)的角度都是極不經(jīng)濟(jì)的，一個(gè)項(xiàng)目下的多份代碼維護(hù)，程序邏輯改變導(dǎo)致的大規(guī)模代碼修改和回歸測(cè)試，都將為系統(tǒng)的可應(yīng)用性和可維護(hù)性造成很大的不確定性。

HTML5 技術(shù)為不同移動(dòng)操作系統(tǒng)下的跨平臺(tái)應(yīng)用提供了重要支持。新版本呈現(xiàn)了很多新特性，如用于繪畫的 canvas 元素，用于媒介回放的 video和 audio 元素，視頻影音與麥克風(fēng)和攝像頭的直接相聯(lián)，css3 提供了更多的風(fēng)格選擇和更強(qiáng)的效果展現(xiàn)，本地存儲(chǔ)特性也使開發(fā)的 Web APP 擁有更短的啟動(dòng)時(shí)間和更快的聯(lián)網(wǎng)速度，這些新特性使得HTML5 有了富媒體技術(shù)的瀏覽平臺(tái)之稱，極適合于移動(dòng)終端的用戶體驗(yàn)。目前，支持 HTML5 的移動(dòng)終端瀏覽器包括了 IE9+，Chrome，Safari ，F(xiàn)irefox 和Opera 等。

基于 HTML5 的 jQuery Mobile 是一款開源的JavaScript 類庫(kù)框架，是 jQuery 在移動(dòng)智能終端上的版本。不僅包含了 jQuery 核心庫(kù)，而且發(fā)布了一個(gè)完整的 jQuery 移動(dòng) UI 框架，利用它能以較低成本開發(fā)出適應(yīng)各種主流移動(dòng)操作系統(tǒng)和兼容大多數(shù)瀏覽器的移動(dòng)網(wǎng)站，動(dòng)態(tài)的用戶體驗(yàn)優(yōu)勢(shì)為國(guó)際互聯(lián)網(wǎng)領(lǐng)域大量采用。

3 移動(dòng)應(yīng)用架構(gòu)

移動(dòng)應(yīng)用整體架構(gòu)自下而上可分為采集來源層、基礎(chǔ)設(shè)施層、數(shù)據(jù)層、應(yīng)用層 4 個(gè)層次，整體結(jié)構(gòu)圖如圖 1 所示。

幾年來積累的各類海量的防汛數(shù)據(jù)和建立的幾十個(gè)實(shí)時(shí)數(shù)據(jù)交換系統(tǒng)，成為上海防汛移動(dòng)應(yīng)用平臺(tái)系統(tǒng)主要的數(shù)據(jù)采集來源層；充分利用已建的基礎(chǔ)設(shè)施，尤其是虛擬服務(wù)器的拓展應(yīng)用和負(fù)載均衡設(shè)備，成為強(qiáng)大的基礎(chǔ)設(shè)施層；移動(dòng)應(yīng)用平臺(tái)系統(tǒng)的建設(shè)主要集中在數(shù)據(jù)服務(wù)層的完善和移動(dòng)應(yīng)用層的開發(fā)，對(duì)已有數(shù)據(jù)服務(wù)進(jìn)行調(diào)整和優(yōu)化，滿足移動(dòng)端的應(yīng)用需求，同時(shí)，在移動(dòng)端開發(fā)的功能能夠應(yīng)用于水務(wù)海洋公共信息平臺(tái)中。

4 設(shè)計(jì)與功能實(shí)現(xiàn)

防汛移動(dòng)應(yīng)用研究提出基于跨平臺(tái)的 HTML5，jQuery Mobile 技術(shù)及水務(wù)數(shù)據(jù)中心承載的數(shù)據(jù)云服務(wù)模式，以蘋果和安卓為主要承載客戶端的上海防汛移動(dòng)版開發(fā)路線。

4.1 核心應(yīng)用設(shè)計(jì)

系統(tǒng)核心應(yīng)用層分為以下 3 層：

1）移動(dòng)終端應(yīng)用層。面向最終使用者，用戶群體包括市水務(wù)局行業(yè)管理、各級(jí)防汛辦、社會(huì)公眾等用戶。

移動(dòng)終端應(yīng)用層的實(shí)現(xiàn)，充分考慮移動(dòng)終端的操作系統(tǒng)環(huán)境，屏幕大小，網(wǎng)絡(luò)質(zhì)量等因素，采用跨平臺(tái)、屏幕自適應(yīng)、數(shù)據(jù)前端緩存等技術(shù)手段，充分考慮移動(dòng)終端兼容性，提升用戶操作體驗(yàn)。業(yè)務(wù)應(yīng)用上，根據(jù)用戶群體不同，分為市、區(qū)縣防汛版和社會(huì)公眾版，各版本展示內(nèi)容范圍有所不同。

2）移動(dòng)信息服務(wù)層。運(yùn)行于服務(wù)器端，對(duì)數(shù)據(jù)服務(wù)層提供的行業(yè)數(shù)據(jù)進(jìn)一步加工處理，采用虛擬機(jī)，數(shù)據(jù)緩存等技術(shù)，保證系統(tǒng)可用性及性能。

移動(dòng)信息服務(wù)層起到承上啟下作用，一方面為終端應(yīng)用提供有價(jià)值的信息，另一方面對(duì)接各外部應(yīng)用系統(tǒng)。在移動(dòng)信息服務(wù)層，需要定制各類數(shù)據(jù)應(yīng)用規(guī)則，通過整合外部數(shù)據(jù)服務(wù)層，對(duì)數(shù)據(jù)加工轉(zhuǎn)換，使其滿足移動(dòng)數(shù)據(jù)規(guī)范要求。特別在響應(yīng)速度方面，需要采用數(shù)據(jù)服務(wù)器緩存和刷新等技術(shù)充分提高服務(wù)性能。

3）數(shù)據(jù)服務(wù)層。由外部各應(yīng)用系統(tǒng)提供，采用Web Service 等技術(shù)實(shí)現(xiàn)。

數(shù)據(jù)服務(wù)層主要在外部應(yīng)用系統(tǒng)內(nèi)實(shí)現(xiàn)，如現(xiàn)有的水務(wù)海洋公共信息平臺(tái)、智能蘇州河綜合管理系統(tǒng)、電子政務(wù)系統(tǒng)等數(shù)據(jù)服務(wù)。這些數(shù)據(jù)服務(wù)，通過移動(dòng)信息服務(wù)層調(diào)用、整合，最終信息展示于終端應(yīng)用層。

圖1 系統(tǒng)整體結(jié)構(gòu)圖

4.2 汛情動(dòng)態(tài)推送功能

主要實(shí)現(xiàn)以下汛情的動(dòng)態(tài)功能：

1）綜合汛情。以自動(dòng)生成方式為客戶端推送當(dāng)天預(yù)警、氣象、雨量、水位、閘泵開關(guān)和道路積水等概要信息，為快速瀏覽全市基本汛情提供方便。

2）風(fēng)情云情。動(dòng)態(tài)播放雷達(dá)和衛(wèi)星云圖，顯示臺(tái)風(fēng)預(yù)報(bào)路徑信息，提供 80 余個(gè)測(cè)站風(fēng)速、風(fēng)向和氣溫信息的實(shí)時(shí)播報(bào)。

3）實(shí)時(shí)水雨情。將涵蓋長(zhǎng)江、近海和上海水情的 330 余個(gè)水位測(cè)站及全市 490 余個(gè)雨量測(cè)站的實(shí)時(shí)信息，以圖表和地圖方式推送至手機(jī)客戶端。

4）實(shí)時(shí)工情。將全市 100 余個(gè)水閘和 180 余個(gè)排水泵站的監(jiān)測(cè)信息以不同的統(tǒng)計(jì)方式推送至客戶端。

5）實(shí)時(shí)災(zāi)情。查詢 170 余個(gè)下立交和道路積水監(jiān)測(cè)點(diǎn)的積水信息。

4.3 預(yù)測(cè)預(yù)警功能

可實(shí)現(xiàn)以下預(yù)測(cè)預(yù)警功能：

1）防汛預(yù)警。將發(fā)布的防汛預(yù)警信號(hào)和相關(guān)信息及時(shí)推送到手機(jī)客戶端。

2）氣象預(yù)報(bào)。隨時(shí)查詢上海中心氣象臺(tái)發(fā)布的天氣預(yù)報(bào)和中國(guó)天氣網(wǎng)提供的相關(guān)鏈接。

3）潮位預(yù)報(bào)。隨時(shí)查詢吳淞口、黃浦公園、米市渡、蘆潮港等重要站點(diǎn)的預(yù)報(bào)潮位。

4）應(yīng)急預(yù)案。查詢防汛防臺(tái)應(yīng)急預(yù)案。

4.4 防汛知識(shí)播放功能

主要包括：1）防汛常識(shí)，包括查詢防汛條例，防汛、水文、水利和排水常識(shí)等內(nèi)容；2）公益宣傳，主要指公益宣傳片移動(dòng)端播放。

4.5 個(gè)性化服務(wù)功能

針對(duì)區(qū)縣、街鎮(zhèn)防汛人員的工作特點(diǎn)提供個(gè)性化服務(wù)，如登錄界面和區(qū)域汛情的自動(dòng)匹配。相關(guān)防汛部門高度重視微信作為新媒體在社會(huì)中的普及優(yōu)勢(shì)，推出了“上海防汛”微信公眾號(hào)，為廣大社會(huì)公眾了解最新汛情、學(xué)習(xí)自我防護(hù)知識(shí)、提高避險(xiǎn)自救能力和監(jiān)督防汛部門依法履職提供了橋梁。在主動(dòng)推送防汛新聞、工作動(dòng)態(tài)和預(yù)警信號(hào)的同時(shí)，也可通過雙向交互獲取最新雷達(dá)云圖、臺(tái)風(fēng)路徑信息，通過接口開發(fā)還能調(diào)用防汛移動(dòng) APP 的氣象預(yù)報(bào)、潮位預(yù)報(bào)、實(shí)時(shí)雨量、實(shí)時(shí)水位、水情通報(bào)等。

4.6 其它功能

1）后臺(tái)監(jiān)控。可隨時(shí)掌握用戶上線、關(guān)注熱點(diǎn)和各模塊訪問量等應(yīng)用信息。

2）地圖調(diào)用。利用本機(jī)離線的百度地圖資源，同時(shí)調(diào)用市水務(wù)局多時(shí)相和高分辨率的航空、衛(wèi)星影像服務(wù)。

3）照片上傳。具有拍照、上傳和地圖定位功能，為全民參與防汛提供手段。

4）信息安全。主要采用綁定手機(jī)號(hào)、密碼和動(dòng)態(tài)驗(yàn)證碼，僅發(fā)布短期監(jiān)測(cè)數(shù)據(jù)，全程記錄用戶的訪問行為等手段確保信息安全。

5 結(jié)語

針對(duì)目前多種移動(dòng)操作系統(tǒng)互不兼容的情況，提出基于 HTML5 和 jQuery Mobile 的移動(dòng)應(yīng)用開發(fā)路線，開發(fā)了跨平臺(tái)、自適應(yīng)、低成本特色的防汛移動(dòng)版。目前，上海市防汛指揮部成員單位、各區(qū)縣和街鎮(zhèn)防汛部門中，已有 1 030 人安裝了防汛移動(dòng)版。在抗御 2014 年汛期 18 場(chǎng)暴雨和 2 次臺(tái)風(fēng)中，防汛移動(dòng)平臺(tái)經(jīng)受了實(shí)戰(zhàn)考驗(yàn)，總訪問量達(dá) 32 萬余次，通過微信號(hào)推送圖文信息 40 多次共計(jì) 150 多條。

善于將技術(shù)與業(yè)務(wù)相互促進(jìn)、深度融合，采用快速迭代、持續(xù)改進(jìn)的工作方法，不失為適應(yīng)移動(dòng)互聯(lián)網(wǎng)時(shí)代發(fā)展的新模式和新方法。今后將以智能化、大數(shù)據(jù)、云服務(wù)為發(fā)展方向，以信息資源整合、共享和利用為驅(qū)動(dòng)，不斷提升移動(dòng)應(yīng)用在上海防汛的價(jià)值量和貢獻(xiàn)度。

[1] 陳華，鐘震宇，馬紹忠，等. 基于 3G 的水利移動(dòng)辦公系統(tǒng)設(shè)計(jì)與開發(fā)[J]. 水利信息化，2012 (2): 28-32.

[2] 張玉晴，黃瑾娉. 基于 HTML5 的跨平臺(tái)移動(dòng)應(yīng)用關(guān)鍵技術(shù)的研究與實(shí)現(xiàn)[J]. 工業(yè)控制計(jì)算機(jī)，2013 (3): 56-58 .

[3] 陸明. jQuery Mobile 開發(fā)指南[M]. 北京：人民郵電出版社，2014.

[4] 工業(yè)和信息化部電信研究院. 移動(dòng)互聯(lián)網(wǎng)白皮書[R]. 北京：工業(yè)和信息化部電信研究院，2013: 1-17.

Study and Practice on Cross Platform Application of Flood Control Based on Mobile Internet

ZHENG Xiaoyang, QIAN Guomin, XU Weiming
(Shanghai Flood Control Information Center, Shanghai 200050, China)

With the rapid development of mobile internet technology and application, it is vital to develop new model of flood control under the support of mobile application. The article proposes the ideas of the mobile internet, whenever and wherever possible, fast iteration and mini-burst. Besides, it also develops a technical route with characteristics of cross platform, adaptive and low cost on the basis of HTML5 and jQuery Mobile. The mobile application becomes a new tool for the flood control and plays an important role in the defense of rainstorm, typhoon and high tide in Shanghai, 2014.

cross platform; application of mobile internet; HTML5; Shanghai flood control

TP39；TV697

A

1674-9405(2015)02-0059-04

2014-12-03

水利部公益性行業(yè)科研項(xiàng)目（201201068）；上海市水務(wù)局（海洋局）2015 年科研項(xiàng)目（滬?？?2015-08）

鄭曉陽（1973－），男，河南項(xiàng)城人，教授級(jí)高工，博士，主要從事水務(wù)信息化管理和信息系統(tǒng)軟件研發(fā)。