基于HTML5的企业WebApp设计与实现

周森鹏，陆正球，张城，王溢达

（宁波大红鹰学院，宁波 31517）

基于HTML5的企业WebApp设计与实现

周森鹏，陆正球，张城，王溢达

（宁波大红鹰学院，宁波 31517）

随着移动互联网技术的不断发展，WebApp以极佳的用户体验和交互得到越来越多使用者的认可。采用HTML5技术设计实现GE公司的WebApp，为该公司科技产品的展示提供一个快捷入口，使得参观的用户只需扫描二维码即可浏览与使用。在提升公司形象的同时，也让参观用户深入了解相应的科技产品。

HTML5；WebApp；二维码

0 引言

随着移动互联时代和云计算时代的到来，3G/4G技术和云计算技术都给我们的生活带来了巨大的改变，手机的数据传输速度也有了质的飞越，且其所具备的功能也越来越多元化[1]。与此同时，Web[2]以其跨平台的优点，使得无论是在Android还是iOS平台上，都能很好地兼容，不像手机应用需要适应多个系统与版本，并且相对WebApp不仅需要极高的开发成本，而且下载以及频繁的升级版本都会对用户造成困扰。

WebApp[3]是基于Web的系统和应用，是指通过使用Web和Web浏览器技术，跨越网络（互联网或内联网）完成一个或多个任务的应用程序，通常需要使用Web浏览器。WebApp是Google在设计Chrome时提出的概念，是Google推广云计算的其中一步，具有轻松跨平台、开发效率高成本低、应用更丰富、无需安装和更新等优势。

1 需求分析

为了更好地展示企业的产品，避免企业App给用户带来的麻烦，在开发初期就抛弃原有的App开发，转而通过网页的方式进行展示，用户只需要输入网址或者扫描二维码就能够简单方便地使用，且HTML5的自适应性能够很好地适应不同分辨率的手机屏幕，让所有手机用户都能够看到不变形、简单、灵活的操作，具有良好用户体验，让参观用户在良好的第一印象下深入了解GE的科技产品，将科技产品带入普通群众的视线，为以后的科技产品发布打下基础。

同时为了体现产品展示的国际化，整体设计采用英汉双语界面，让用户随时切换到相应的语音界面进行浏览和操作。同时，鉴于文字内容受手机屏幕大小的限制，在页面中加入音频功能，点击播放按钮就能了解到公司的发展历史背景和相应科技产品的介绍。Web App端主要包括以下功能：

（1）中英文切换功能：实现中文页面与英文页面以及音频的切换；

（2）地图点位跳转：通过点击地图中的点位，跳转到对应的科技产品展示页面；

（3）播放音频及快进：在科技产品展示页面中，点击播放按钮即可播放对应的介绍音频，拖动播放按钮下的拖动条可调节音频播放进度。

（4）科技产品介绍页面：第四个点位的科技产品页面中，在相应的输入框中输入科技产品编号，就能跳到对应的科技产品介绍页面。

后台服务端采用B/S结构实现如下功能：

用户管理：系统分为管理员和普通工作人员两种角色，分别具有不同的权限。

验证码生成：生成4位数的验证码，用户浏览页面时需要输入。

（1）ICFC素材管理：管理ICFC科技产品介绍页面内容，包括图片、音频等素材。

（2）地图素材管理：可对地图界面各个点位对应的科技产品介绍页面内容进行修改。

2 企业WebApp

根据需求分析，首先对每个模块进行了详细设计，将项目分为显示层、逻辑层以及地图点位。显示层主要根据效果图完成相应的HTML页面，逻辑层则实现HTML页面中的功能，因地图点位触发的特殊性，所以单独成一模块进行开发。

2.1 首页

为了满足国际化的需求，项目的每个页面都具有中英文切换的按钮，首页中具有两套中英文切换按钮，为了避免用户未注意到右上角的按钮，因此在页面中间设计按钮，用户在首页中选择自己所对应的语言，之后系统记住用户初始的选择，并且在后面的每个页面都默认为用户所选择的语言。如图1所示。

图1 首页展示

2.2 地图页

用户在首页中点击了进入按钮后，跳转至地图点位页面，此页面中每个有数字标志的图标都代表了一个点位，总共有八个点位，点击其中任意一个点位，都会跳转到相应的科技产品展示页面。地图中的开始按钮是默认第一个音频，点击开始即可播放，如图2所示。

2.3 音频播放

点击点位图中相应的点位后，就跳转到GE介绍页面。将会显示一张该点位的现场图片，在图片下方是音频播放，包括播放按钮以及音频进度条。用户通过播放按钮控制音频的播放与暂停，通过进度条控制音频的进度播放，如图3所示。

图2 地图展示

图3 音频播放

2.4 科技产品展示页面

在输入框中输入相应的数值，点击GO按钮，就能跳转到科技产品展示页面。页面中包括科技产品的效果图以及正中间的设置按钮，按下按钮，就能播放关于该科技产品介绍的音频，效果如图4所示。

图4 科技产品展示

3 后台管理

Web端后台管理模块采用了JSP和Servlet结构,在MySQL数据库的基础上开发,以实现前后台分离,使用了工厂模式和代理模式,实现了“高内聚、低耦合”[4]。系统权限分为管理员和普通工作人员两种角色权限，管理员主要进行“用户的管理”、“ICFC的管理”和地图8个点的“素材管理”。

其中ICFC与地图素材管理功能一致，只是操作不同的数据库表。以ICFC管理为例，在ICFC主页面，主要展示每款产品的中文标题、英文标题等信息，以及生成的二维码地址，每一页显示8款产品，用户可以点击“上一页”、“下一页”、“首页”、“末页”返回到当前页面的上一页、下一页、首页或末页，如图5。

点击“添加ICFC”，输入ICFC产品的中文标题、英文标题，同时通过“浏览”上传中文音频、英文音频和产品的展示图片，所有标记为“*”的选项为必填项。也可在主页中点击“修改”，可以修改某款产品的信息，如图5。也可以点击“删除”删除某款产品。

4 结语

本文给出了基于HTML5的企业WebApp的设计与实现过程，使得用户在移动端就可以轻松地了解企业的发展历程和相关科技产品。随着未来移动设备的高速发展和4G网络的推广使用，开发成本低、便捷的迭代更新和跨平台等优势将使得基于基于HTML5的企业WebApp得到更广泛的应用。

图5 ICFC主页面

[1] 思华科技:对移动互联网发展趋势的认识与思考[EB/OL].[2010-06-20].http://tech.lmtw.com/csyy/Using/201003/54901_3.html

[2] 刘华星,杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展,2011.8

[3] 陈勇．WebApp现状分析与展望[J]．行业观察，2012.7

[4] 周森鹏，陆正球.基于Android平台的校园掌中行设计与实现[J].现代计算机，2014.11

Design and Implementation of Enterprise WebApp Based on HTML5

ZHOU Sen-peng，LU Zheng-qiu，ZHANG Cheng，WANG Yi-da
（Ningbo Dahongying University，Ningbo 315175）

Along with the rapid development of mobile Internet technology,the WebApp getsmore and more recognition by users because of its excellent user experience and interaction.Adopts the HTML5 technology,designs and realizes the WebApp of GE enterprise,which provides a fast entrance to show the science and technology products,and the users can browse this products just by scanning the QR code. It promotes the companies'image and lets the visitor penetratewith the science and technology products at the same time.

HTML5;WebApp;QR Code

1007-1423（2015）07-0049-04

10.3969/j.issn.1007-1423.2015.07.014

周森鹏（1993-），男，浙江丽水人，在校本科生，研究方向为软件服务外包

陆正球（1982-），男，浙江余姚人，讲师，研究方向为软件开发

2015-01-13

2015-02-13

张城（1993-），男，浙江杭州人，在校本科生，研究方向为软件服务外包

王溢达（1993-），男，浙江温州人，在校本科生，研究方向为软件服务外包