基于跨平臺的WebApp和傳統(tǒng)B/S結(jié)構(gòu)相結(jié)合的混合型設(shè)備管理系統(tǒng)應(yīng)用研究

陳人堂 李曉明

摘 要：設(shè)備管理信息化在一些大型機(jī)械生產(chǎn)企業(yè)應(yīng)用相對較多，而在科研單位的設(shè)備信息化管理方面則相對滯后。為了改善科研單位的設(shè)備管理信息化建設(shè)，文中以國家海洋局第二研究所的設(shè)備管理信息系統(tǒng)建設(shè)開發(fā)為例，結(jié)合科研單位的設(shè)備儀器普遍呈現(xiàn)的特點(diǎn)，設(shè)計了一套適合科研單位的設(shè)備管理系統(tǒng)，并結(jié)合未來信息化的發(fā)展趨勢，實(shí)現(xiàn)了以跨平臺的WebApp和傳統(tǒng)B/S結(jié)構(gòu)相結(jié)合的混合型設(shè)備管理系統(tǒng)。

關(guān)鍵詞：設(shè)備管理；WebApp；HTML5；jQuery Mobile；PhoneGap

中圖分類號：TP39 文獻(xiàn)標(biāo)識碼：A 文章編號：2095-1302（2016）06-00-04

0 引 言

近年來，隨著硬件設(shè)備和平臺的不斷發(fā)展，手持移動設(shè)備的計算能力得到了顯著的提高，智能手機(jī)和平板電腦越來越多地出現(xiàn)在人們的日常生活中。無論多么強(qiáng)大的硬件或是多么優(yōu)秀的平臺都要有軟件來支撐。但廠商之間的競爭導(dǎo)致軟件在不同平臺中不兼容的現(xiàn)象比比皆是。比如安卓上的apk文件就無法在iOS中運(yùn)行，甚至早期安卓上運(yùn)行的一些App在當(dāng)前的大屏手機(jī)上也無法正常顯示。那么作為開發(fā)者，應(yīng)選擇針對什么樣的平臺去開發(fā)呢？或者花費(fèi)更多的時間和精力去精通多個平臺的開發(fā)？顯然，有一種方案可以做到開發(fā)一種程序應(yīng)用到多個平臺上，那就是跨平臺的移動開發(fā)框架[1，2]。

所謂跨平臺的移動開發(fā)框架，可以大致分解為：“跨平臺”、“移動”、“開發(fā)框架”?！翱缙脚_”是指只需要經(jīng)過一次開發(fā)，得到的應(yīng)用能在多個平臺上流暢進(jìn)行。目前比較主流的移動操作系統(tǒng)包括Android、iOS、Windows Phone、BlackBerry等。為了實(shí)現(xiàn)在多系統(tǒng)之間的兼容，跨平臺開發(fā)框架往往都是基于HTML5開發(fā)語言，然后利用Web執(zhí)行。所謂“移動”指的是主要支持移動設(shè)備，也就是說這些框架是專為移動設(shè)備制定的。所謂“開發(fā)框架”指的是一組已經(jīng)被定義好的設(shè)計構(gòu)件。如在HTML5中定義一個按鈕非常容易，但若要為它加入一些好看的樣式，可能光CSS就要寫幾十行，有了jQuery Mobile后，只需一行代碼就可以了。本文設(shè)計的設(shè)備管理系統(tǒng)的移動端部分實(shí)現(xiàn)正是基于HTML5的跨平臺特性，利用jQuery Mobile技術(shù)，同時借助另一款開發(fā)框架PhoneGap的幫助（以安卓為例）來生成apk部署到安卓終端設(shè)備上，以實(shí)現(xiàn)通過移動平臺對設(shè)備的管理。目前，由于用戶普遍以PC端的使用為主，所以設(shè)計和開發(fā)一個傳統(tǒng)的PC端和WebApp移動端相結(jié)合的設(shè)備管理系統(tǒng)具有較高的實(shí)用價值[1-3]。

1 跨平臺的移動開發(fā)框架jQuery Mobile和PhoneGap介紹

1.1 jQuery Mobile介紹

jQuery Mobile[1]是jQuery在手機(jī)和平板上的版本，它不僅擁有能讓主流移動平臺支持的jQuery核心庫，還包括一整套完整和統(tǒng)一的移動UI框架。jQuery Mobile的目標(biāo)是在一個統(tǒng)一的UI中交付超級JavaScript功能，跨越最流行的智能手機(jī)和平板電腦設(shè)備上進(jìn)行工作。jQuery Mobile的特點(diǎn)如下：

（1）跨所有移動平臺的統(tǒng)一UI

通過采用HTML5和CSS 3標(biāo)準(zhǔn)，jQuery Mobile提供了一個統(tǒng)一的用戶界面。一個jQuery Mobile代碼庫可以在所有支持的平臺上呈現(xiàn)出一致性。

（2）簡化的標(biāo)記驅(qū)動開發(fā)

jQuery Mobile頁面是使用HTML5標(biāo)記設(shè)計的。就JavaScript和CSS而言，jQuery Mobile在默認(rèn)的情況下承擔(dān)所有的負(fù)擔(dān)。在不多的情況下，才依賴JavaScript來創(chuàng)建更為動態(tài)的或增強(qiáng)的頁面體驗(yàn)。jQuery Mobile還可以迅速地原型化用戶界面[3]。

（3）漸進(jìn)式增強(qiáng)

jQuery Mobile可以為一個設(shè)備呈現(xiàn)出可能的最優(yōu)雅的用戶體驗(yàn)，jQuery Mobile可以呈現(xiàn)出應(yīng)用了完整CSS3樣式的控件。

（4）響應(yīng)式設(shè)計

jQuery Mobile UI可以根據(jù)不同的顯示尺寸來呈現(xiàn)。例如，同一個UI會恰如其分地顯示在手機(jī)或更大的設(shè)備上，比如平板電腦?？梢砸淮螛?gòu)建隨處運(yùn)行，允許設(shè)計人員快速地重新設(shè)計其UI。

1.2 PhoneGap介紹

PhoneGap[2]是一款基于HTML、CSS、JavaScript創(chuàng)建的移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用Android、iPhone、WP、Blackberry智能終端的核心功能，包括地理定位、加速器、聯(lián)系人、聲音和振動等。此外，PhoneGap還擁有豐富的插件，可以以此擴(kuò)展無限的功能。結(jié)合移動Web UI框架jQuery Mobile來開發(fā)跨平臺的移動客戶端，非常方便地發(fā)布程序到不同的移動平臺上。

2 系統(tǒng)分析與設(shè)計

經(jīng)過近十幾年信息技術(shù)的高速發(fā)展，企業(yè)在設(shè)備管理信息化方面有著非常大的進(jìn)步，尤其是大型機(jī)械設(shè)備生產(chǎn)企業(yè)。企業(yè)設(shè)備購置后從純紙質(zhì)化的信息資料登記、使用過程、維護(hù)記錄、報廢記錄等文檔跟蹤，到通過信息技術(shù)對功能需求的替代。本文介紹的是面向科研單位的設(shè)備管理系統(tǒng)構(gòu)建實(shí)例。科研單位和一般機(jī)械領(lǐng)域方面等生產(chǎn)企業(yè)不同，科研單位的設(shè)備呈現(xiàn)出以下三大特點(diǎn)[4]：

（1）設(shè)備型號繁多、復(fù)雜，同一種功能的設(shè)備有諸多不同的型號，同種型號的設(shè)備數(shù)量少；相反，伴隨設(shè)備使用過程中的消耗品-備件同種型號則數(shù)量較多。

（2）普遍設(shè)備的通用性差但專業(yè)性強(qiáng)，科研單位的專用設(shè)備儀器占比最大。

（3）根據(jù)科研課題的需要，對設(shè)備的各種參數(shù)要求越來越高，如照度、精度、壓力、溫度等，更新?lián)Q代的購置設(shè)備和自制設(shè)備較多、頻率較快；但設(shè)備的利用率較低，科研人員對設(shè)備的操作能力等要求較高。

針對科研單位的設(shè)備儀器普遍呈現(xiàn)的特點(diǎn)結(jié)合國家海洋局第二研究所業(yè)務(wù)的功能需求應(yīng)專門進(jìn)行系統(tǒng)設(shè)計。

2.1 系統(tǒng)功能模塊設(shè)計

（1）總體設(shè)計

設(shè)備管理系統(tǒng)共分為三大模塊，分別是用戶前臺模塊、管理員后臺模塊和移動端模塊。

其總體功能模塊圖如圖1所示。

（2）用戶前臺模塊設(shè)計

該用戶前臺模塊中的功能被系統(tǒng)中的普通用戶所使用，主要實(shí)現(xiàn)設(shè)備和備件信息的查看、用戶注冊、登錄、個人信息修改、發(fā)起設(shè)備和備件的上下船申請等功能。用戶前臺功能模塊圖如圖2所示。

（3）管理員后臺模塊設(shè)計

該模塊的功能為管理員特權(quán)，對系統(tǒng)中的設(shè)備和備件進(jìn)行全方位的管理維護(hù)，如設(shè)備和備件信息的錄入、修改、刪除、添加維護(hù)記錄、添加報廢記錄、存放倉庫管理、類型管理等。此外，管理員還需要對系統(tǒng)中的用戶進(jìn)行管理以及對系統(tǒng)普通用戶發(fā)起設(shè)備和備件上下船的申請批復(fù)處理等。管理員后臺功能模塊圖如圖3所示。

（4）移動端模塊設(shè)計

移動端模塊方便用戶通過手機(jī)、Pad等移動終端對系統(tǒng)中的設(shè)備或備件信息進(jìn)行實(shí)時查看，只需要在移動終端中裝入該系統(tǒng)的WebApp，通過互聯(lián)網(wǎng)接入服務(wù)器即可。移動端功能模塊圖如圖4所示。

2.2 數(shù)據(jù)庫設(shè)計

結(jié)合業(yè)務(wù)需求和功能模塊設(shè)計的分析對該數(shù)據(jù)庫進(jìn)行建模，該模型是數(shù)據(jù)庫的物理數(shù)據(jù)模型[5]，根據(jù)該模型可生成數(shù)據(jù)庫的各個表結(jié)構(gòu)。

2.3 系統(tǒng)部署

系統(tǒng)開發(fā)完成后，可以部署為局域網(wǎng)供本地用戶使用，也可將系統(tǒng)的部署服務(wù)器接入Internet，實(shí)現(xiàn)遠(yuǎn)程對系統(tǒng)的設(shè)備信息管理。綜合使用環(huán)境的部署如圖5所示。

3 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)實(shí)現(xiàn)采用三層架構(gòu)的模式，分為界面層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層，逐層調(diào)用，實(shí)現(xiàn)高耦合、低內(nèi)聚的開發(fā)思想。后臺選用C#語言開發(fā)，數(shù)據(jù)庫選用SQLServer R2。系統(tǒng)實(shí)現(xiàn)分為兩大部分，一部分為傳統(tǒng)的PC端B/S結(jié)構(gòu)模式，另一部分為基于WebApp的移動端模式。本文著重介紹移動端模式的實(shí)現(xiàn)。

3.1 PC端的實(shí)現(xiàn)

PC端的實(shí)現(xiàn)分為兩部分，一部分為普通用戶實(shí)現(xiàn)對系統(tǒng)中設(shè)備和備件信息的查看、上下船申請等功能；另一部分則針對管理員用戶對系統(tǒng)中的設(shè)備、備件、用戶和上下船申請等進(jìn)行管理。

（1）用戶前臺模塊實(shí)現(xiàn)

用戶前臺模塊實(shí)現(xiàn)界面如圖6所示。

（2）管理員后臺模塊實(shí)現(xiàn)

管理員后臺模塊實(shí)現(xiàn)界面如圖7所示。

3.2 移動端的實(shí)現(xiàn)

移動端模塊實(shí)現(xiàn)了設(shè)備、備件和用戶三部分的信息查看。移動端模塊的實(shí)現(xiàn)用jQuery Mobile技術(shù)快速開發(fā)符合移動終端屏幕尺寸大小的界面，然后通過PhoneGap技術(shù)進(jìn)行App部署。移動端模塊實(shí)現(xiàn)的首頁界面如圖8所示。移動端模塊實(shí)現(xiàn)的設(shè)備列表界面如圖9所示。

4 結(jié) 語

本文介紹了基于跨平臺的WebApp和傳統(tǒng)B/S結(jié)構(gòu)結(jié)合的設(shè)備管理系統(tǒng)的混合型應(yīng)用模型，著重介紹了基于跨平臺的WebApp設(shè)備管理系統(tǒng)的快速開發(fā)構(gòu)建。利用HTML5跨平臺的特性，在jQuery Mobile跨平臺的移動框架下，開發(fā)前端應(yīng)用程序，通過PhoneGap快速創(chuàng)建跨平臺的WebApp。服務(wù)后端編碼采用三層架構(gòu)，用.net和SQLServer組合開發(fā)服務(wù)器后端的方式完成系統(tǒng)的實(shí)現(xiàn)。本系統(tǒng)既解決了對設(shè)備管理去紙質(zhì)化的問題，又解決了設(shè)備管理對PC的完全依賴性，使得設(shè)備管理變得更加便捷。通過本系統(tǒng)方式方法的實(shí)現(xiàn)，對許多大型企業(yè)在設(shè)備管理移動式信息化方面提供了有益的參考。

參考文獻(xiàn)

[1]李柯泉.構(gòu)建跨平臺APP jQuery Mobile移動應(yīng)用實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2014.

[2]饒俠，張堅(jiān)，趙莉萍.深入淺出PhoneGap[M].北京：人民郵電出版社， 2013.

[3] Adam Freema，謝延晟，牛化成.HTML5權(quán)威指南[M].劉美英，譯.北京：人民郵電出版社， 2014.

[4]郭青.海洋科研儀器設(shè)備管理的現(xiàn)狀與對策[J].海岸工程，2002 （3）：71-75.

[5]孫憲麗，關(guān)穎，李波.PowerDesigner15系統(tǒng)分析與建模實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社， 2014.

[6]曾偉建.B/S結(jié)構(gòu)在現(xiàn)代企業(yè)信息管理系統(tǒng)中的應(yīng)用探討[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/