基于HTML5的移動檢測流程管理系統研究與設計

鄧展鵬，李妮妮，杜冠廷

1.廣州機械科學研究院有限公司，廣東廣州 510530；2.中汽檢測技術有限公司，廣東廣州 510530

0 引言

隨著汽車零部件檢測行業競爭日趨激烈，智能化、信息化、數字化、辦公便捷化等特征已經影響著檢測試驗室業務的快速增長，并且檢測中產生大量試驗數據對其進行人工管理和應用分析提出了極高的成本和苛刻的時間需求，為了減少人力記錄、處理數據的成本和誤差率，試驗室信息管理系統(laboratory information management system,LIMS)被越來越多的汽車檢測行業所認可，并充分應用到試驗室的各個管理環節。在大規律分散性的原始數據采集與應用環境中，更好、更便捷的信息化能帶給檢測機構更大的優勢，更低的人為誤差率和更高的辦公效率。

基于 Windows 平臺C/S 架構的傳統LIMS，從20世紀90年代初發展至今，架構與模式已經相當成熟，而且得到了廣泛的應用，其PC端可以在計算機上較好、較快地處理各種復雜結構的數據，以及運行各類辦公文件。但仍然存在一些普遍而又緊急的場景響應短板，例如:企業管理者、市場業務員異地出差，或開會途中的移動辦公便捷性低，對檢測合同進行審閱、查看、歷史工作流溯源時效性差；還有大量的現場檢測工作執行、檢測工程師或試驗員定時跟進檢測任務以及審批檢測流程管理規范化弱。針對這些場景下，對檢測業務流程進行協同辦公高效簡約化、功能提升數字化、終端交互響應移動便捷化是試驗室信息管理的重點工作，也是困擾試驗室檢測效能提升和數據管理規劃的技術短板。與此同時，隨著移動信息通信技術與手機、PDA(personal digital assistant)等智能終端的快速發展，使檢測企業的移動信息化需求越來越迫切，甚至已成為眾多企業信息化必備功能之一。移動辦公可以更好規劃和利用碎片化時間，能夠對傳統信息系統的時效性不足加以彌補，對檢測任務信息實現即時響應、流程審批全時空覆蓋處理。將LIMS與移動平臺的這些特性相結合，能夠很好地提高檢測行業工作效率，也符合國家科技創新戰略中明確支持的數字賦能產業發展要求。

綜上，本文擬采用目前流行的HTML5架構開發相關的移動應用技術，針對LIMS系統的檢測流程審批業務設計一套C/S架構的移動檢測流程管理系統。此系統整體架構由5個功能模塊組成，分別是檢測報告管理模塊、合同管理模塊、檢測進度管理模塊、輔助模塊、信息通知模塊。通過對不同的檢測角色移動辦公的需求設計出以上功能模塊，使用戶合理利用碎片化時間，隨時隨地對檢測任務進行審批處理，即時響應檢測任務，提高工作效率。該系統是使用Python的Web框架Flask開發Restful API后端實現數據交互，HTML5技術與漸進式JavaScript框架Vue.js技術以及Uni APP開發技術相結合，為Android客戶端構建一套操作簡易、交互性強的用戶界面，而數據庫則采用SQL Server技術進行數據管理與應用。

1 相關技術概述

1.1 HTML5 與Vue.js簡介

HTML5是HTML最新的修訂版本，由萬維網聯盟(W3C)于2014年10月完成標準制定。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。相對于HTML4，HTML5提高了交互體驗，加強了視覺感受，并且增加了很多非常實用的新功能和新特性。HTML5提供了豐富的音視頻新技術支持，解決了移動端的蘋果或安卓系統與Flash的兼容問題。文中所研究的移動檢測流程管理系統通過使用H5+技術Video標簽，使應用程序支持在線實時監控視頻流。HTML5技術作用在移動平臺，使應用程序與網頁功能相輔相成，互補兩者的不足，增加了APP開發的擴展性，該系統的在線查閱檢測報告文檔功能即是使用了相關技術。

Vue.js是一套構建用戶界面的漸進式框架。Vue只關注視圖層，采用自底向上增量開發的設計。因此程序的擴展性及模塊化設計程度高，這對提高前期開發效率，以及降低后期維護難度有良好的效果。該框架擁有負責連接視圖層和數據層的雙向數據綁定庫，保證視圖和數據的一致性。

1.2 移動APP(應用程序)開發方式與Uni APP技術簡介

移動互聯網時代發展迅猛，前端技術日新月異。目前為止，移動APP開發有3種方式，分別是Native APP、Web APP、Hybrid APP。

(1)Native APP指的是原生程序，一般依托于操作系統，有很強的交互，是一個完整的APP，可拓展性強，需要用戶下載安裝使用。原生應用程序的功能開發完善，運行性能與渲染效果是最佳的。

(2)Web APP是一種框架型APP開發模式(HTML5 APP框架開發模式)。采用標準的Web技術，使用HTML5、JavaScript和CSS3編寫界面，掛載在瀏覽器上，不需要下載安裝程序，但無法利用會話管理、安全離線存儲以及訪問原生設備功能。

(3)Hybrid APP指的是半原生半Web的混合類APP。混合應用程序讓開發人員可以把HTML5應用程序嵌入到一個細薄的原生容器里面，能夠同時使用原生應用程序的功能以及H5+應用的擴展。HTML5的特性使得更多的移動應用在開發過程中使用混合開發的模式，將原生應用和HTML5頁面結合，這種開發方式可全由Web開發，也可結合原生開發方式進行插件擴展。相比Native APP，開發成本更低，一套代碼兼容多平臺，可線下使用;相比Web APP，用戶體驗與運行性能更接近原生程序。

本文設計的移動檢測流程管理系統正是基于Hybrid APP的方式進行移動應用的開發。

Uni APP是一個使用 Vue.js 開發所有前端應用的框架,開發者通過編寫一套代碼,可編譯發布到iOS、Android、H5以及各種小程序等多個平臺，帶有圖形化插件控制管理功能，對Vue以及ES6(JavaScript的新版本標準)、CSS3、HTML5等語法校驗及編譯優化的支持比較完善。使用Uni APP原生的網絡API(Uni.request)向后端編寫的Restful風格Web接口發起請求，獲取處理好的數據后渲染在應用界面，與用戶進行人機交互。

1.3 Flask技術及Restful簡介

Flask是一個使用Python編寫的Web應用程序框架。特點小而輕,原生組件僅實現了最基本的功能，即架構自由、編程靈活、可擴展性強、第三方庫資源豐富,也能兼備最流行、最強大的Python庫。

Restful是一種網絡應用程序的設計風格和開發方式，Restful的Web Services 接口的核心就是“資源”。資源可以用URI來表示;移動端使用 HTTP 協議定義的方法來發送請求到這些 URIs,使用Json格式的數據進行資源交互。

2 系統功能需求分析及模塊設計

2.1 功能需求分析

隨著移動通信技術及智能設備不斷發展，企業移動信息化水平日益提高，移動應用已成為檢測流程管理系統的載體和必選項。在設計和實現本系統的過程中，貫徹軟件工程的思想，對系統進行需求分析，面向檢測業務各環節的用戶角色進行權限設計，明確需要開發的功能模塊。

移動檢測流程管理系統的用戶由4種角色構成，分別是技術審核人、業務經理、檢測試驗員和試驗室安全負責人。技術審核人主要負責檢測任務的技術審核，使用該系統應可以查閱當前檢測任務的信息以及回溯審閱過的歷史任務，并能在線查看檢測報告的內容，技術審核人最核心的操作應該是檢測任務的工作流審核；業務經理對檢測合同進行信息審核，合同批閱；檢測試驗員使用系統對檢測項目進度更新，檢測樣品信息管理；試驗室安全負責人通過移動應用可以把控企業安防。用戶需求分析如圖1所示。

圖1 用戶需求分析

2.2 系統功能模塊設計

基于上述用戶需求分析設計了5個功能模塊，分別是檢測報告管理模塊、合同管理模塊、檢測進度管理模塊、輔助模塊、信息通知模塊，如圖2所示。

圖2 功能模塊設計

不同用戶角色登錄該系統，需要根據權限分配不同的功能模塊。各功能模塊詳細介紹如下：

(1)檢測任務管理模塊

技術審核人通過該模塊即使處于試驗現場或開會途中也能隨時快速查看最新的檢測信息，按條件檢索歷史檢測任務，在線預覽檢測報告文檔流，以及對檢測任務的工作流審批等操作。

(2)合同管理模塊

該模塊主要實現市場業務人員外派出差，參加大型展會等場景，能隨時隨地刷新檢測合同信息，合理利用碎片化時間，按條件查詢檢測合同，對合同的工作流進行審批。

(3)檢測進度管理模塊

檢測試驗員在現場進行檢測試驗時，可以及時響應檢測任務，無須回到辦公計算機前對檢測任務的子項目進行進度更新，查看檢測項目審批信息。

(4)輔助模塊

該模塊集成了檢測試驗室現場實時監控供試驗室安全負責人查看現場監控及試驗員使用移動設備進行掃碼查詢樣品信息，用戶可使用手機設備實行信息管理，需要硬件條件(監控攝像頭、移動設備需支持攝像頭)支持。

(5)信息通知模塊

該模塊監控以上模塊，對后端服務器進行輪詢，有最新通知第一時間在終端提醒用戶，實行快速響應檢測相關工作。

3 系統開發架構及核心功能

3.1 系統架構和開發技術

移動檢測流程管理系統采用了基于移動平臺的C/S架構,主要分為基于HTML5的混合模式移動應用客戶端和Python3編寫Restful架構的Web服務端程序兩大模塊。該系統使用自下向上的設計過程，分為數據庫、數據訪問層、服務層、通信層和表示層5個層級，從下往上、逐步抽象，如圖3所示。

圖3 系統應用架構

(1)表示層使用漸進式JavaScript框架Vue.js來編寫代碼，配合調用H5+API擴展程序功能，構建應用界面，結合DCloud公司的前端框架Uni APP，通過HTML5的Web開發IDE HBuilderX 來編譯代碼，開發出Hybrid APP，兼備了Web APP(基于Web的系統和應用)、Native APP(基于Android、Ios等用原生程式編寫的第三方應用程序)這兩者之間的優勢。

使用Vue.js編寫程序的擴展性及模塊化設計程度高，提高了前期開發效率，降低后期維護難度。結合Uni的技術棧，將編寫的JS,HTML,CSS3代碼打包編譯成可直接在移動平臺上安裝運行的高性能應用，向后端的Restful風格Web接口發起請求，對獲取的數據進行渲染。

(2)通信層由Http協議、Socket協議，以及用于實時視頻流傳輸的RTSP協議組成。后端的Web服務端程序使用uWSGI服務器配合Nginx反向代理，用于表示層與服務器進行Http或者Https協議的數據交互通信。

由于信息化的時代下Web后臺復用可用于不同終端，開發者逐漸采用HTML5技術開發跨平臺移動產品，且大多基于通用的 HTTP 協議,但在實時數據推送(如APP通知欄推送)、流媒體、接入文件管理云解決方案進行文件傳輸等應用場景下，采用Socket 協議的長連接才能保證實時通信的質量。對于檢測企業各類試驗工作的開展和過程結果的管理，出于安全考慮或對庫房樣品點檢的考慮，部分檢驗檢測中心對檢測現場布置攝像頭進行安防監控。目前比較主流的攝像頭支持使用Rtsp協議，通過開啟Uni APP的VideoPlayer模塊配置，可開發流媒體擴展進行試驗室安防在線監控，如圖4所示。

圖4 監控與消息推送界面

(3)檢測檢驗中心業務變化與日俱增，需要程序迭代周期縮短，該系統的后端服務技術棧選擇了開源的、可移植性靈活(解釋型語言幾乎天生就是跨平臺的)、開發效率高的Python3及Flask。服務層使用該技術棧創建了一套Restful的Web Service，主要提供了系統各大功能模塊的底層業務邏輯的實現，與表示層進行數據交互，并為表示層提供了三大服務模塊，分別是手機推送服務模塊，AES 128對稱加密模塊和數據分析及處理模塊。

手機推送服務是指服務端定向將信息實時送達手機的服務，該系統選擇了第三方推送的Gt_push_sdk進行二次開發，實現前后端消息實時推送，通過利用WebSocket協議維持TCP連接。為了數據傳輸安全，該系統使用了高級加密標準(advanced encryption standard，AES)對稱算法,它是一種典型的對稱加密算法,與檢查報文是否被篡改的信息摘要算法不一樣，是一種真正的加密報文的算法。對用戶密碼以及一些重要數據信息進行加密，作為一層安全防護，此系統在開發AES加密功能模塊時使用了Crypto庫。考慮到檢測檢驗中心產生的檢測數據有量大、多樣、數字標準化不一致等特點，該系統使用了Python3擴展模塊Pandas，Numpy對數據進行處理、優化、傳輸到前端。

(4)數據訪問層使用了Python中成熟的ORM框架SQLAlchemy，通過將編寫對象和數據庫關系模型建立映射關系，增強系統的數據交互能力。為了系統更靈活地處理數據，還應用Pymssql模塊，使系統能夠應用原生Sql語句與數據庫交互。通過兩種技術的結合，使數據訪問層能實現數據庫的大部分操作。

(5)數據庫采用了SQL Server，該數據庫具備易用性好、容量適中、應用廣泛等優點。

此系統通過Python3、Flask構建流行的Restful風格的 API接口，用于與前端(表示層)進行 Json 格式的數據交互，通過對稱加密技術保證系統數據傳輸的安全性，通過擴展庫實現消息推送及數據處理。前端使用Uni APP編譯生成運行在移動平臺上的APP。Web后端應用程序部署在Nginx(為了避免訪問量過大，減少客戶端請求連接的長時間等待，由Nginx實現反向代理)+uWSGI(uWSGI實現了WSGI協議的一個Web服務器，用于掛載Python3程序)+Sql Server 技術搭建的服務器上，提高整個系統后端服務的性能。系統部署如圖5所示。

圖5 系統部署

3.2 系統核心功能及代碼

3.2.1 預覽檢測報告PDF文件流

移動檢測流程管理系統主要是以檢測任務的工作流程為核心，各個審核節點通過查閱檢測報告草稿版進行檢測任務審批。一般來說，在手機終端預覽PDF格式文件可以選用兩種方法，一種是基于瀏覽器的模塊來閱讀在線文檔，另一種是下載文件后通過第三方應用打開，前者用戶體驗更流暢。該系統使用Uni APP框架中的Web瀏覽器組件Web-view來實現網頁承載，在移動應用中加載本地網頁，通過JavaScript插件Pdf.js實現在線預覽服務器端的文件路徑，使用內嵌網頁進行加載文件流統一了技術棧，維護性更好且模塊化程度高，而且代碼簡潔。

預覽文件流代碼塊如下:

3.2.2 數據傳輸的加密與解密模塊

汽車零部件檢測行業的某些數據需要保密，為了保證數據傳輸安全，此系統使用了對稱加密算法對關鍵數據進行處理，設計的思路是后端通過AES算法使用128位密鑰加密某些數據明文，將密文傳輸至移動終端后使用相同密鑰解密為明文,需要注意的是如果前后端使用的技術棧不同，需要統一AES算法的模式，以及處理好密鑰補位。

AES對稱加密功能核心代碼塊如下:

from Crypto.Cipher import AES

import base64

key="xxxxxxxxxxxxxxxx" # 16的倍數的密鑰

new_aes=AES.new(str.encode(key),AES.MODE_ECB) #初始化AES算法庫

def pad(length,text):

count=len(text.encode(′utf-8′))

add=length-(count % length)

enStr=text+(chr(add)* add)

return enStr

def encrypt(self,data): #加密函數

res=new_aes.encrypt(pad(data).encode("utf8"))

miwen=str(base64.b64encode(res),encoding=

"utf8")

return miwen

//前端核心代碼如下:

const crypto=require(′crypto′);

const jami=(data,key)=>{

var iv="";//初始向量

const cipher=crypto.createCipheriv(′aes-128-ecb′,key,iv);

var cipherResult=cipher.update(data,′utf8′,′base64′);

cipherResult+=cipher.final(′base64′); //返回hex編碼的字符串

return cipherResult;

}

const jemi=(encrypted,key)=>{

var iv="";//初始向量

const decipher=crypto.createDecipheriv(′aes-128-ecb′,key,iv);

var decrypted=decipher.update(encrypted,′base64′,

′utf8′);

decrypted +=decipher.final(′utf8′);

return decrypted;

}

module.exports={

jami,

jemi

}

3.2.3 檢測任務及檢測合同的信息檢索

檢測任務及檢測合同的數據量大、單表字段多，單次傳輸的數據量多少直接影響到網絡傳輸的質量。此系統根據出差、開會等使用場景可能遇到的網絡環境差、移動設備接收和渲染大量數據產生卡死現象等問題，對數據進行分表查詢，降低單次傳輸的數據量，并使用Web服務器后端對數據庫進行數據處理，并對查詢結果進行了緩存。前端只需要通過服務器端提供的Restful API請求，即可獲取格式處理后的輕量級的、便于解析、傳輸的Json格式數據，加以渲染界面。該系統通過使用Python的面向對象思想，利用了ORM框架將數據庫的數據結構化，配合Python3的Pandas庫，將結構化的數據對象放于Pandas的表格容器中，再使用Numpy對部分需要進行科學計算處理的數據進行運算，最后將篩選好的檢測任務及檢測合同的結果傳輸至移動前端。用戶界面如圖6所示。

圖6 用戶界面

4 結論

移動檢測流程管理系統是對傳統的PC端的試驗室管理系統的技術擴展，將檢測試驗室的檢測業務放到移動終端上，既可以服務試驗室內部檢測工作者信息更新、審批管理又可以實現業務人員合同評審等功能。

(1)此系統使用混合模式(Hybrid APP)及模塊化后端設計開發，可跨平臺，降低開發、維護成本，服務器端部署系統使用了Nginx負責靜態內容，uWSGI負責處理Restful接口的技術，兩者結合實現了更高效和負載均衡的Web服務。

(2)混合模式(Hybrid APP)的移動應用雖然用戶體驗可與Native App媲美，但涉及調用設備底層的功能仍存在不少問題，后期需要結合Uni APP的APP端原生架構開發插件，對應用的交互性能和功能多樣化需進行優化與豐富。后端仍可以對uWSGI和Nginx兩大Web服務器進行調試，優化服務器端的性能與并發。

(3)檢測檢驗業務發展與日俱進，此系統目前實現的功能仍比較簡單，未來的開發將集成更多的功能模塊，更好地利用移動通信技術進一步賦能試驗室檢測業務。