基于HTML5的高校實驗室預約開放系統的設計

蔣旺喜 黨旗 章蘇靜

摘要：本文通過分析高校實驗室傳統預約開放管理存在的問題，設計了基于HTML5的高校實驗室預約開放管理系統，系統的主要模塊包含實驗室預約管理和實驗室數據統計管理。本系統能夠為高校師生提供在線預約服務，優化高校實驗室開放管理，實時呈現實驗室開放使用情況及生成教育部實驗室開放數據報表。

關鍵詞：HTML5;高校實驗室開放;預約

中圖分類號：G434? 文獻標識碼：A? 論文編號：1674-2117（2019）11-0109-04

● 引言

實驗室開放是高校培養創新人才的重要途徑，是提高實驗室利用率、培養學生創新及實踐能力的重要手段。[1]從時間和空間開放程度上來看，實驗室開放可分為完全開放、預約開放、階段開放和定期開放等[2]，傳統實驗室開放使用預約主要存在以下幾個方面的問題：①電話咨詢占用實驗室管理員大量工作時間，浪費人力和財力[3];②實驗室管理員需要通過查閱紙質預約登記冊了解實驗室開放預約情況，查閱預約記錄耗時長且易出錯，可能導致實驗室在同一時間段被多人預約，影響教師或學生的實驗安排，造成實驗教學事故;③教育部每年都要統計各個實驗室做過的實驗項目及使用情況，實驗室管理員需要花費大量的時間來完成這項任務。因此，設計一個能夠滿足多方面需求的實驗室預約開放系統成為高校實驗室管理的迫切需求。

● 實驗室預約開放系統

筆者認為，實驗室預約開放系統的首要目的是給高校師生提供一個既方便又智能的實驗室預約平臺，因此該預約平臺要滿足以下幾點：①實驗室管理員可設置每個實驗室的開放時段（精確到課時），如有實驗課的不開放，雙休日不開放;②預約者在預約實驗室時，該實驗室已經被預約過的時段是被隱藏的;③預約是否成功需要實驗室管理員審核，審核通過即預約成功，審核不通過則預約失敗;④支持使用移動智能終端進行實驗室預約和預約審核。另外，該系統應能夠根據教育部的要求在線查詢高校實驗室開放使用情況，并可導出相應的Excel表。查詢功能需滿足如下要求：①支持PC端和移動智能終端進行查詢;②支持按學年查詢或按自定義開始日期和結束日期查詢;③查詢記錄支持多種呈現方式，可根據每天上課的節次可視化呈現;④根據教育部的要求導出實驗室開放使用情況數據表。

針對以上要求，筆者根據所在學校實際情況，設計了一個實驗室預約開放系統，該系統采用HTML5響應式布局來設計平臺的前端。

● HTML5的核心技術及應用

1.HTML5核心技術

（1）2D圖像繪制技術

Canvas是用于在網頁中繪制位圖的技術，是HTML5中最受關注的功能之一。本系統可利用Canvas繪制實驗室二維碼、統計圖表。

（2）離線應用技術

離線應用是指在脫離網絡連接的環境下，Web APP依然能夠進行數據存儲與交換業務，從而保證程序的正常運行。這項技術使得Web APP克服了過去離線即癱瘓的局限，應用適應性更強。

（3）響應式布局技術

不同類型的設備，如手機、平板、筆記本電腦、觸控一體機等，它們的屏幕大小、分辨率、鍵盤類型都存在巨大差異。HTML5響應式布局技術使得瀏覽器針對不同的設備輸出相應的網頁布局。HTML5標準為移動Web應用程序提供了優秀的頁面體驗，而且Android Browser及iOS對Webkit的良好支持，同時使用CSS3等功能實現原生應用程序的UI界面。[4]

（4）提供豐富的支持Web應用擴展的API

HTML5提供了操作移動設備硬件的API，包括地理位置感知API、運動感應事件、通用感應器API、觸控交互事件、WebSocket API、Messaging API等。[5]

2.HTML5應用

HTML5的優勢是兼容性好，用HTML5技術開發的應用能跨平臺使用，并且可以在網頁上直接進行調試和修改，且開發和維護的成本較低。HTML5的應用主要有以下幾方面：①游戲開發，如微信小游戲;②輕應用、Web APP、微站;③基于微信平臺的開發，實現掃一掃、微信支付等操作;④WebVR讓虛擬現實大眾化，通過HTML5把虛擬現實內容嵌入到Web頁面中。

● 實驗室預約開放系統的設計與分析

1.系統總體框架設計

總體框架由五個層次和一個信息安全保障體系組成。底層是網絡層，包括校園內部網絡和互聯網。服務器包含數據庫服務器和應用服務器。為了方便師生預約實驗室，本系統支持PC端和移動端接入訪問。本系統功能模塊分為五個方面，分別是用戶管理、信息管理、實驗室管理、統計報表管理和預約管理，其中主要模塊是統計報表管理和預約管理。信息安全保障體系要保障網絡安全、服務器安全、數據庫安全和應用程序安全。系統總體框架如圖1所示。

2.實驗室預約流程分析

實驗室預約開放的依據有兩個方面：一是按照教師提供的實驗教學計劃進行開放，實驗室管理員在學期正式上課之前把教師的實驗教學計劃導入系統;二是在日常教學過程中教師或學生預約實驗室，經實驗室管理員審核進行開放。實驗教學計劃先由教師提交到學校教務部門，經學校教育部門審核通過之后移交至實驗室管理部門，實驗室管理員把實驗教學計劃導入系統。實驗室開放安排如上頁圖2所示。

本系統給師生提供的預約方式有兩種，一種是在平臺中選擇相應的實驗室進行預約，另一種是應用智能移動終端掃描實驗室的二維碼進行預約。實驗室預約業務流程如上頁圖3所示。為了減少實驗室管理員的預約審核工作量，本系統通過程序控制實驗室預約過程：①某實驗室在某時間段已經被預約了，是不能被重復預約，確保實驗室所有的預約不會有時間沖突;②限制實驗室的預約權限，如某些實驗室是學生不能預約的，在學生的預約界面是不會顯示這些實驗室。為了讓管理員能及時審核師生的預約情況，教師或學生預約提交后系統會自動發送手機短信至管理員手機，管理員即刻知曉誰在某時段預約了某實驗室。管理員預約審核流程如上頁圖4所示。

3.實驗室統計報表設計與分析

根據教育部的要求，高校每學年都要上交實驗室實驗項目統計表、實驗室開放情況表和實驗室開放使用情況數據統計表。本系統支持兩種方式檢索實驗室的數據報表：方式一，根據不同的時間段檢索數據報表（如圖5）;方式二，根據學年檢索數據報表。另外，本系統支持多條件檢索實驗室數據報表，條件主要有預約者的身份（教師或學生）、預約方式（實驗教學計劃或日常預約）等。

● 系統的優勢分析

1.采用HTML5響應式頁面設計

在信息技術飛速發展的今天，智能移動終端成為我們生活中不可缺少的伙伴。為了同時支持PC端和各類移動智能終端的使用，本系統采用HTML5響應式頁面設計。

2.與高校實驗室預約開放管理業務無縫對接

本系統的設計要求：一是與高校實驗室開放管理密切整合，管理更加細致簡單;二是師生能隨時隨地預約，并能及時得到反饋;三是確保實驗室開放數據準確無誤，并與教育部要求上交的數據一致。

3.按教育部要求隨時導出實驗室開放數據報表

本系統可隨時隨地查詢導出實驗室實驗項目統計表和實驗室開放使用情況數據統計表。這些數據報表不但可視化呈現了各個實驗室的使用情況，而且可直接作為教育部要求的實驗室開放數據統計報表。

● 總結展望

本系統設計的目的是信息化管理高校實驗室預約開放業務，提高實驗室的使用率和及時掌握實驗室的實際使用情況。為了能跨平臺使用，本系統采用了HTML5響應式頁面設計，支持各種智能移動終端使用。管理員可根據實驗室的開放情況設置實驗室的開放時間和使用人數等，使實驗室在某時段不存在重復預約，避免不必要的實驗教學事故。

但是，本系統目前尚未與門禁系統相結合，師生預約成功后需要管理員在預約使用前開放實驗室。今后，筆者還將繼續改進本系統，使之能與門禁系統進行對接，實現師生預約成功后，通過輸入密碼或刷臉等方式在有效時間內自行開門。

參考文獻：

[1]劉興華，王方艷.以創新人才培養為核心的實驗室開放模式探索[J].實驗技術與管理，2016，33（01）.

[2]賀建武，麻明友，陳斌，等.地方高校教學型實驗室開放管理存在問題及對策[J].實驗室研究與探索，2014，33（04）：241.

[3]張婷婷.實驗室預約系統的設計與實現[D].大連：大連海事大學，2015.

[4]錢海軍.基于HTML5移動Web頁面開發技術研究[J].電腦與信息技術，2013，21（01）：51.

[5]黃悅深.基于HTML5的移動Web App開發[J].圖書館雜志，2014，33（07）：74-75.

作者簡介：蔣旺喜（1986—），男，工作單位為杭州師范大學信息化中心，研究方向為數字媒體開發;黨旗（1994—），女，杭州師范大學在讀研究生，研究方向為游戲化學習;章蘇靜（1961—），女，杭州師范大學教育學院教授，研究生導師，研究方向為游戲化學習。

基金項目：本文受到浙江省高校信息化教學系列精品課程建設項目（項目編號：2017-XXHGC-4B）的支持。