郑晓阳，钱国民，许维明

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

跨平台防汛移动应用研究与实践

郑晓阳，钱国民，许维明

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

在移动互联网技术和应用快速发展的背景下，开拓防汛移动应用新模式是防汛工作融入时代发展的重要举措。提出移动互联、随时随地、快速迭代、小步快跑等理念，研究基于 HTML5 和 jQuery Mobile 的技术路线，开发跨平台、自适应和低成本特色的防汛移动应用。移动应用在上海抗御 2014 年暴雨、台风、高潮位等实战中发挥重要作用，成为防汛工作的新利器，对推进防汛现代化进程具有积极意义。

跨平台；移动应用；HTML5；上海防汛

0 引言

在移动互联网和移动智能终端日益成为新一轮创新浪潮的背景下，开拓全新的移动防汛模式，随时随地为防汛人员与社会公众提供更加便捷的汛情资讯，是防汛工作追踪技术，贴近应用，融入时代的重要举措。近年来国内水利部门针对防汛的移动应用也开展了一些积极的探索，但也存在针对苹果和安卓操作系统单列开发所面临的开放、兼容，以及运维成本、技术升级等一系列问题。为此针对上海的防汛实际，在吸收国内同行业经验和教训的基础上，就构建跨平台、自适应、低成本特色的防汛移动应用方面进行了积极研究和实践。

1 设计思想

1）移动互联、随时随地。来自工业与信息化部的数据显示，移动智能终端的数量已全面超过 PC 电脑，移动互联网上网时长也超过 PC 互联网，我国已成为人均拥有移动智能终端数量最多，移动应用发展最快的国家。集语音通话、短信、拍照、视频、地图导航、即时通讯等功能于一体的移动智能终端已成为移动应用快速发展的重要载体，在以微信、QQ、移动购物、移动支付等一系列代表性的移动应用推动下，人们对移动应用的认知已完全颠覆了传统终端的功能和定位。移动互联网应用正不断缩短人与社会的距离，人与事物的联系越来越密切，信息的传递与获取变得越来越简单。移动互联网时代正悄然变成现实，移动智能终端已成为人体的重要“器官”和工作生活的必需品。为此，加快创新转型，抓住发展机遇，将互联网思维引入防汛业务，用移动应用深化防汛在社会管理和公共服务中的能力和水平，是防汛信息化肩负的重要任务。

2）快速迭代、小步快跑。在移动互联时代，未知与需求转瞬即变，先进与落后尽在一念之间。移动应用的价值与人们行为习惯和社会发展的变化高度关联，动态运营的能力决定了移动应用的生命力。仅为满足固化的应用习惯、全部想明白再行动的传统工程思维已不能适应时代发展的需要。迅速感知用户的需求，不断进行版本更新，用迭代开发、小步快跑、滚动发展的新思维，不断为防汛移动应用植入新鲜养料，是上海防汛移动应用开发的重要法则。

3）多目标、跨平台、自适应。目前，Android，iOS，Windows Phone，Symbian，BlackBerry 等移动操作系统呈现出多个共存、互不兼容的局面，智能手机、平板电脑、笔记本电脑、PDA 等移动智能终端也日趋个性化和多样化，技术和产品的兼容性给移动应用开发带来了许多困惑。能运行于多种移动操作系统，适应多尺寸移动智能终端，攻克相关技术难点，是上海防汛移动应用开发的一个重要突破方向。为此，采用边开发、边应用、边完善的“三边”策略，在实践中取得了成功。应用证明，上海防汛移动应用不仅较好地服务于市、区县和街道乡镇的多级防汛应用，也为水资源管理、水环境整治和政务办公等应用奠定必要的技术储备和提供统一的支撑平台，新效能和新体验为全市的防汛工作注入了新的活力。

2 技术路线

在主流的移动操作系统中，Android 和 iOS 占据了绝大部分市场，而使用 Java 的 Android 和使用Object C 的 iOS 开发技术几乎无法融合。若同样的程序逻辑使用不同的语言和 API 重复编码来满足多平台运行需要，无论从开发的角度还是代码维护的角度都是极不经济的，一个项目下的多份代码维护，程序逻辑改变导致的大规模代码修改和回归测试，都将为系统的可应用性和可维护性造成很大的不确定性。

HTML5 技术为不同移动操作系统下的跨平台应用提供了重要支持。新版本呈现了很多新特性，如用于绘画的 canvas 元素，用于媒介回放的 video和 audio 元素，视频影音与麦克风和摄像头的直接相联，css3 提供了更多的风格选择和更强的效果展现，本地存储特性也使开发的 Web APP 拥有更短的启动时间和更快的联网速度，这些新特性使得HTML5 有了富媒体技术的浏览平台之称，极适合于移动终端的用户体验。目前，支持 HTML5 的移动终端浏览器包括了 IE9+，Chrome，Safari ，Firefox 和Opera 等。

基于 HTML5 的 jQuery Mobile 是一款开源的JavaScript 类库框架，是 jQuery 在移动智能终端上的版本。不仅包含了 jQuery 核心库，而且发布了一个完整的 jQuery 移动 UI 框架，利用它能以较低成本开发出适应各种主流移动操作系统和兼容大多数浏览器的移动网站，动态的用户体验优势为国际互联网领域大量采用。

3 移动应用架构

移动应用整体架构自下而上可分为采集来源层、基础设施层、数据层、应用层 4 个层次，整体结构图如图 1 所示。

几年来积累的各类海量的防汛数据和建立的几十个实时数据交换系统，成为上海防汛移动应用平台系统主要的数据采集来源层；充分利用已建的基础设施，尤其是虚拟服务器的拓展应用和负载均衡设备，成为强大的基础设施层；移动应用平台系统的建设主要集中在数据服务层的完善和移动应用层的开发，对已有数据服务进行调整和优化，满足移动端的应用需求，同时，在移动端开发的功能能够应用于水务海洋公共信息平台中。

4 设计与功能实现

防汛移动应用研究提出基于跨平台的 HTML5，jQuery Mobile 技术及水务数据中心承载的数据云服务模式，以苹果和安卓为主要承载客户端的上海防汛移动版开发路线。

4.1 核心应用设计

系统核心应用层分为以下 3 层：

1）移动终端应用层。面向最终使用者，用户群体包括市水务局行业管理、各级防汛办、社会公众等用户。

移动终端应用层的实现，充分考虑移动终端的操作系统环境，屏幕大小，网络质量等因素，采用跨平台、屏幕自适应、数据前端缓存等技术手段，充分考虑移动终端兼容性，提升用户操作体验。业务应用上，根据用户群体不同，分为市、区县防汛版和社会公众版，各版本展示内容范围有所不同。

2）移动信息服务层。运行于服务器端，对数据服务层提供的行业数据进一步加工处理，采用虚拟机，数据缓存等技术，保证系统可用性及性能。

移动信息服务层起到承上启下作用，一方面为终端应用提供有价值的信息，另一方面对接各外部应用系统。在移动信息服务层，需要定制各类数据应用规则，通过整合外部数据服务层，对数据加工转换，使其满足移动数据规范要求。特别在响应速度方面，需要采用数据服务器缓存和刷新等技术充分提高服务性能。

3）数据服务层。由外部各应用系统提供，采用Web Service 等技术实现。

数据服务层主要在外部应用系统内实现，如现有的水务海洋公共信息平台、智能苏州河综合管理系统、电子政务系统等数据服务。这些数据服务，通过移动信息服务层调用、整合，最终信息展示于终端应用层。

图1 系统整体结构图

4.2 汛情动态推送功能

主要实现以下汛情的动态功能：

1）综合汛情。以自动生成方式为客户端推送当天预警、气象、雨量、水位、闸泵开关和道路积水等概要信息，为快速浏览全市基本汛情提供方便。

2）风情云情。动态播放雷达和卫星云图，显示台风预报路径信息，提供 80 余个测站风速、风向和气温信息的实时播报。

3）实时水雨情。将涵盖长江、近海和上海水情的 330 余个水位测站及全市 490 余个雨量测站的实时信息，以图表和地图方式推送至手机客户端。

4）实时工情。将全市 100 余个水闸和 180 余个排水泵站的监测信息以不同的统计方式推送至客户端。

5）实时灾情。查询 170 余个下立交和道路积水监测点的积水信息。

4.3 预测预警功能

可实现以下预测预警功能：

1）防汛预警。将发布的防汛预警信号和相关信息及时推送到手机客户端。

2）气象预报。随时查询上海中心气象台发布的天气预报和中国天气网提供的相关链接。

3）潮位预报。随时查询吴淞口、黄浦公园、米市渡、芦潮港等重要站点的预报潮位。

4）应急预案。查询防汛防台应急预案。

4.4 防汛知识播放功能

主要包括：1）防汛常识，包括查询防汛条例，防汛、水文、水利和排水常识等内容；2）公益宣传，主要指公益宣传片移动端播放。

4.5 个性化服务功能

针对区县、街镇防汛人员的工作特点提供个性化服务，如登录界面和区域汛情的自动匹配。相关防汛部门高度重视微信作为新媒体在社会中的普及优势，推出了“上海防汛”微信公众号，为广大社会公众了解最新汛情、学习自我防护知识、提高避险自救能力和监督防汛部门依法履职提供了桥梁。在主动推送防汛新闻、工作动态和预警信号的同时，也可通过双向交互获取最新雷达云图、台风路径信息，通过接口开发还能调用防汛移动 APP 的气象预报、潮位预报、实时雨量、实时水位、水情通报等。

4.6 其它功能

1）后台监控。可随时掌握用户上线、关注热点和各模块访问量等应用信息。

2）地图调用。利用本机离线的百度地图资源，同时调用市水务局多时相和高分辨率的航空、卫星影像服务。

3）照片上传。具有拍照、上传和地图定位功能，为全民参与防汛提供手段。

4）信息安全。主要采用绑定手机号、密码和动态验证码，仅发布短期监测数据，全程记录用户的访问行为等手段确保信息安全。

5 结语

针对目前多种移动操作系统互不兼容的情况，提出基于 HTML5 和 jQuery Mobile 的移动应用开发路线，开发了跨平台、自适应、低成本特色的防汛移动版。目前，上海市防汛指挥部成员单位、各区县和街镇防汛部门中，已有 1 030 人安装了防汛移动版。在抗御 2014 年汛期 18 场暴雨和 2 次台风中，防汛移动平台经受了实战考验，总访问量达 32 万余次，通过微信号推送图文信息 40 多次共计 150 多条。

善于将技术与业务相互促进、深度融合，采用快速迭代、持续改进的工作方法，不失为适应移动互联网时代发展的新模式和新方法。今后将以智能化、大数据、云服务为发展方向，以信息资源整合、共享和利用为驱动，不断提升移动应用在上海防汛的价值量和贡献度。

[1] 陈华，钟震宇，马绍忠，等. 基于 3G 的水利移动办公系统设计与开发[J]. 水利信息化，2012 (2): 28-32.

[2] 张玉晴，黄瑾娉. 基于 HTML5 的跨平台移动应用关键技术的研究与实现[J]. 工业控制计算机，2013 (3): 56-58 .

[3] 陆明. jQuery Mobile 开发指南[M]. 北京：人民邮电出版社，2014.

[4] 工业和信息化部电信研究院. 移动互联网白皮书[R]. 北京：工业和信息化部电信研究院，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

水利部公益性行业科研项目（201201068）；上海市水务局（海洋局）2015 年科研项目（沪海科 2015-08）

郑晓阳（1973－），男，河南项城人，教授级高工，博士，主要从事水务信息化管理和信息系统软件研发。