基于跨平台的WebApp和传统B/S结构相结合的混合型设备管理系统应用研究

陈人堂 李晓明

摘 要：设备管理信息化在一些大型机械生产企业应用相对较多，而在科研单位的设备信息化管理方面则相对滞后。为了改善科研单位的设备管理信息化建设，文中以国家海洋局第二研究所的设备管理信息系统建设开发为例，结合科研单位的设备仪器普遍呈现的特点，设计了一套适合科研单位的设备管理系统，并结合未来信息化的发展趋势，实现了以跨平台的WebApp和传统B/S结构相结合的混合型设备管理系统。

关键词：设备管理；WebApp；HTML5；jQuery Mobile；PhoneGap

中图分类号：TP39 文献标识码：A 文章编号：2095-1302（2016）06-00-04

0 引 言

近年来，随着硬件设备和平台的不断发展，手持移动设备的计算能力得到了显著的提高，智能手机和平板电脑越来越多地出现在人们的日常生活中。无论多么强大的硬件或是多么优秀的平台都要有软件来支撑。但厂商之间的竞争导致软件在不同平台中不兼容的现象比比皆是。比如安卓上的apk文件就无法在iOS中运行，甚至早期安卓上运行的一些App在当前的大屏手机上也无法正常显示。那么作为开发者，应选择针对什么样的平台去开发呢？或者花费更多的时间和精力去精通多个平台的开发？显然，有一种方案可以做到开发一种程序应用到多个平台上，那就是跨平台的移动开发框架[1，2]。

所谓跨平台的移动开发框架，可以大致分解为：“跨平台”、“移动”、“开发框架”。“跨平台”是指只需要经过一次开发，得到的应用能在多个平台上流畅进行。目前比较主流的移动操作系统包括Android、iOS、Windows Phone、BlackBerry等。为了实现在多系统之间的兼容，跨平台开发框架往往都是基于HTML5开发语言，然后利用Web执行。所谓“移动”指的是主要支持移动设备，也就是说这些框架是专为移动设备制定的。所谓“开发框架”指的是一组已经被定义好的设计构件。如在HTML5中定义一个按钮非常容易，但若要为它加入一些好看的样式，可能光CSS就要写几十行，有了jQuery Mobile后，只需一行代码就可以了。本文设计的设备管理系统的移动端部分实现正是基于HTML5的跨平台特性，利用jQuery Mobile技术，同时借助另一款开发框架PhoneGap的帮助（以安卓为例）来生成apk部署到安卓终端设备上，以实现通过移动平台对设备的管理。目前，由于用户普遍以PC端的使用为主，所以设计和开发一个传统的PC端和WebApp移动端相结合的设备管理系统具有较高的实用价值[1-3]。

1 跨平台的移动开发框架jQuery Mobile和PhoneGap介绍

1.1 jQuery Mobile介绍

jQuery Mobile[1]是jQuery在手机和平板上的版本，它不仅拥有能让主流移动平台支持的jQuery核心库，还包括一整套完整和统一的移动UI框架。jQuery Mobile的目标是在一个统一的UI中交付超级JavaScript功能，跨越最流行的智能手机和平板电脑设备上进行工作。jQuery Mobile的特点如下：

（1）跨所有移动平台的统一UI

通过采用HTML5和CSS 3标准，jQuery Mobile提供了一个统一的用户界面。一个jQuery Mobile代码库可以在所有支持的平台上呈现出一致性。

（2）简化的标记驱动开发

jQuery Mobile页面是使用HTML5标记设计的。就JavaScript和CSS而言，jQuery Mobile在默认的情况下承担所有的负担。在不多的情况下，才依赖JavaScript来创建更为动态的或增强的页面体验。jQuery Mobile还可以迅速地原型化用户界面[3]。

（3）渐进式增强

jQuery Mobile可以为一个设备呈现出可能的最优雅的用户体验，jQuery Mobile可以呈现出应用了完整CSS3样式的控件。

（4）响应式设计

jQuery Mobile UI可以根据不同的显示尺寸来呈现。例如，同一个UI会恰如其分地显示在手机或更大的设备上，比如平板电脑。可以一次构建随处运行，允许设计人员快速地重新设计其UI。

1.2 PhoneGap介绍

PhoneGap[2]是一款基于HTML、CSS、JavaScript创建的移动跨平台移动应用程序的快速开发平台。它使开发者能够利用Android、iPhone、WP、Blackberry智能终端的核心功能，包括地理定位、加速器、联系人、声音和振动等。此外，PhoneGap还拥有丰富的插件，可以以此扩展无限的功能。结合移动Web UI框架jQuery Mobile来开发跨平台的移动客户端，非常方便地发布程序到不同的移动平台上。

2 系统分析与设计

经过近十几年信息技术的高速发展，企业在设备管理信息化方面有着非常大的进步，尤其是大型机械设备生产企业。企业设备购置后从纯纸质化的信息资料登记、使用过程、维护记录、报废记录等文档跟踪，到通过信息技术对功能需求的替代。本文介绍的是面向科研单位的设备管理系统构建实例。科研单位和一般机械领域方面等生产企业不同，科研单位的设备呈现出以下三大特点[4]：

（1）设备型号繁多、复杂，同一种功能的设备有诸多不同的型号，同种型号的设备数量少；相反，伴随设备使用过程中的消耗品-备件同种型号则数量较多。

（2）普遍设备的通用性差但专业性强，科研单位的专用设备仪器占比最大。

（3）根据科研课题的需要，对设备的各种参数要求越来越高，如照度、精度、压力、温度等，更新换代的购置设备和自制设备较多、频率较快；但设备的利用率较低，科研人员对设备的操作能力等要求较高。

针对科研单位的设备仪器普遍呈现的特点结合国家海洋局第二研究所业务的功能需求应专门进行系统设计。

2.1 系统功能模块设计

（1）总体设计

设备管理系统共分为三大模块，分别是用户前台模块、管理员后台模块和移动端模块。

其总体功能模块图如图1所示。

（2）用户前台模块设计

该用户前台模块中的功能被系统中的普通用户所使用，主要实现设备和备件信息的查看、用户注册、登录、个人信息修改、发起设备和备件的上下船申请等功能。用户前台功能模块图如图2所示。

（3）管理员后台模块设计

该模块的功能为管理员特权，对系统中的设备和备件进行全方位的管理维护，如设备和备件信息的录入、修改、删除、添加维护记录、添加报废记录、存放仓库管理、类型管理等。此外，管理员还需要对系统中的用户进行管理以及对系统普通用户发起设备和备件上下船的申请批复处理等。管理员后台功能模块图如图3所示。

（4）移动端模块设计

移动端模块方便用户通过手机、Pad等移动终端对系统中的设备或备件信息进行实时查看，只需要在移动终端中装入该系统的WebApp，通过互联网接入服务器即可。移动端功能模块图如图4所示。

2.2 数据库设计

结合业务需求和功能模块设计的分析对该数据库进行建模，该模型是数据库的物理数据模型[5]，根据该模型可生成数据库的各个表结构。

2.3 系统部署

系统开发完成后，可以部署为局域网供本地用户使用，也可将系统的部署服务器接入Internet，实现远程对系统的设备信息管理。综合使用环境的部署如图5所示。

3 系统实现

系统实现采用三层架构的模式，分为界面层、业务逻辑层和数据访问层，逐层调用，实现高耦合、低内聚的开发思想。后台选用C#语言开发，数据库选用SQLServer R2。系统实现分为两大部分，一部分为传统的PC端B/S结构模式，另一部分为基于WebApp的移动端模式。本文着重介绍移动端模式的实现。

3.1 PC端的实现

PC端的实现分为两部分，一部分为普通用户实现对系统中设备和备件信息的查看、上下船申请等功能；另一部分则针对管理员用户对系统中的设备、备件、用户和上下船申请等进行管理。

（1）用户前台模块实现

用户前台模块实现界面如图6所示。

（2）管理员后台模块实现

管理员后台模块实现界面如图7所示。

3.2 移动端的实现

移动端模块实现了设备、备件和用户三部分的信息查看。移动端模块的实现用jQuery Mobile技术快速开发符合移动终端屏幕尺寸大小的界面，然后通过PhoneGap技术进行App部署。移动端模块实现的首页界面如图8所示。移动端模块实现的设备列表界面如图9所示。

4 结 语

本文介绍了基于跨平台的WebApp和传统B/S结构结合的设备管理系统的混合型应用模型，着重介绍了基于跨平台的WebApp设备管理系统的快速开发构建。利用HTML5跨平台的特性，在jQuery Mobile跨平台的移动框架下，开发前端应用程序，通过PhoneGap快速创建跨平台的WebApp。服务后端编码采用三层架构，用.net和SQLServer组合开发服务器后端的方式完成系统的实现。本系统既解决了对设备管理去纸质化的问题，又解决了设备管理对PC的完全依赖性，使得设备管理变得更加便捷。通过本系统方式方法的实现，对许多大型企业在设备管理移动式信息化方面提供了有益的参考。

参考文献

[1]李柯泉.构建跨平台APP jQuery Mobile移动应用实战[M].北京：清华大学出版社，2014.

[2]饶侠，张坚，赵莉萍.深入浅出PhoneGap[M].北京：人民邮电出版社， 2013.

[3] Adam Freema，谢延晟，牛化成.HTML5权威指南[M].刘美英，译.北京：人民邮电出版社， 2014.

[4]郭青.海洋科研仪器设备管理的现状与对策[J].海岸工程，2002 （3）：71-75.

[5]孙宪丽，关颖，李波.PowerDesigner15系统分析与建模实战[M].北京：清华大学出版社， 2014.

[6]曾伟建.B/S结构在现代企业信息管理系统中的应用探讨[J].电子制作，2013（6）：252.

[7] A.L.Jenkins.decision support for equipment maintenance and replacement.Operational Research[Z].1988：355-365.

[8] A Touch-Optimized Web Framework[EB/OL].http：//jquerymobile.com/

[9] Build amazing mobile Apps powered by open web tech[EB/OL].http：//phonegap.com/

[10] JsRender/JsViews[EB/OL].http：//www.jsviews.com/