鄭曉陽，錢國民，許維明

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

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

鄭曉陽，錢國民，許維明

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

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

跨平臺；移動應(yīng)用；HTML5；上海防汛

0 引言

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

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

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

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

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

2 技術(shù)路線

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

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

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

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

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

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

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

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

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

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

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

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

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

移動信息服務(wù)層起到承上啟下作用，一方面為終端應(yīng)用提供有價值的信息，另一方面對接各外部應(yīng)用系統(tǒng)。在移動信息服務(wù)層，需要定制各類數(shù)據(jù)應(yīng)用規(guī)則，通過整合外部數(shù)據(jù)服務(wù)層，對數(shù)據(jù)加工轉(zhuǎn)換，使其滿足移動數(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ǒng)、電子政務(wù)系統(tǒng)等數(shù)據(jù)服務(wù)。這些數(shù)據(jù)服務(wù)，通過移動信息服務(wù)層調(diào)用、整合，最終信息展示于終端應(yīng)用層。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.4 防汛知識播放功能

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

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

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

4.6 其它功能

1）后臺監(jiān)控?？呻S時掌握用戶上線、關(guān)注熱點(diǎn)和各模塊訪問量等應(yīng)用信息。

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

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

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

5 結(jié)語

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

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

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

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

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

[4] 工業(yè)和信息化部電信研究院. 移動互聯(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)城人，教授級高工，博士，主要從事水務(wù)信息化管理和信息系統(tǒng)軟件研發(fā)。