陳人堂 李曉明

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

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

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

0 引 言

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

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

1 跨平臺(tái)的移動(dòng)開(kāi)發(fā)框架jQuery Mobile和PhoneGap介紹

1.1 jQuery Mobile介紹

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

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

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

（2）簡(jiǎn)化的標(biāo)記驅(qū)動(dòng)開(kāi)發(fā)

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

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

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

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

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

1.2 PhoneGap介紹

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

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

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

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

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

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

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

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

（1）總體設(shè)計(jì)

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

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

（2）用戶前臺(tái)模塊設(shè)計(jì)

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

（3）管理員后臺(tái)模塊設(shè)計(jì)

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

（4）移動(dòng)端模塊設(shè)計(jì)

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

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

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

2.3 系統(tǒng)部署

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語(yǔ)

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

參考文獻(xiàn)

[1]李柯泉.構(gòu)建跨平臺(tái)APP jQuery Mobile移動(dòng)應(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)狀與對(duì)策[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/