基于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-），男，浙江溫州人，在校本科生，研究方向為軟件服務外包