基于跨平臺的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/