基于移動端的公共儀器實驗室信息化建設

奚忠華， 孔璇鳳， 周愛東， 章文偉

(南京大學 化學化工學院，化學國家級實驗教學示范中心，南京 210023)

0 引 言

隨著移動互聯網的不斷發展，移動終端數量呈爆發式增長，來自移動終端的互聯網訪問量劇增。近幾年，隨著翻轉課堂和微課的日益普及，本科生理論和實驗教學中對移動終端的使用需求也日趨高漲[1-7]。因此，實驗室的信息化建設也必須順應時代的發展做出相應的調整，需注重教學資源對于移動終端的兼容性和友好性。化學國家級實驗教學示范中心(南京大學)(以下簡稱“中心”)公共儀器實驗室是為本科生實驗教學專門設立的大型儀器共享平臺。實驗室原有網站為多年前所建，與移動終端兼容性較差，非常有必要進行移動端優化。本文對基于移動端的公共儀器實驗室信息化建設做了一些有益的嘗試與探索，以少量的人力物力投入搭建了一個適合移動終端訪問的平臺，實現了基于移動端的教學資源的快捷獲取。利用該平臺還可快速開發擴展功能，如實驗藥品信息數據庫、實驗器材管理系統等。

1 基于移動端的實驗室建設必要性

為提高大型儀器使用率、提升實驗技術人員工作效率，避免重復投資重復建設，針對本科生實驗教學，中心專門設立了公共儀器實驗室(其前身為中級化學實驗室[8])，即中心大型儀器共享平臺，主要服務于本科生實驗教學并對科研適當開放。目前，大學化學、有機化學、儀器分析、物理化學、綜合化學等實驗課程均依托本平臺開設相關實驗教學內容。實驗室原信息化建設是以網站、電子文檔及多媒體視頻為主，主要適用于臺式機瀏覽，并未對移動端進行相應的優化。隨著各類移動終端的普及，來自智能手機和平板電腦的瀏覽量也在逐步上升。使用這類設備瀏覽內容時，存在兼容性問題，如網站文字圖片過小、頁面布局不合理、視頻無法播放等。為便于學生快速且順利地獲取信息資源，有必要對原有平臺進行改造升級。

2 基于移動端的實驗室建設思路

為有效解決舊系統的各種問題，新平臺的建設需以下列原則為基礎：

(1) 解決在移動終端上的內容呈現問題。中心網站最新版于5年前完成建設，其中公共儀器實驗室有2個介紹頁面。網站沒有設計移動端頁面，因此，移動終端訪問實驗室網頁顯示效果不佳。新平臺首要目標就是必須解決頁面顯示兼容性的問題，確保在移動端有良好的顯示效果。

(2) 解決視頻無法播放的問題。在互聯網HTML5標準[9-10]之前，網頁視頻的播放主要是通過Flash來完成的[11]，然而移動終端所帶的瀏覽器基本都不支持Flash，因而會出現視頻無法播放的問題。HTML5標準中加入了音頻、視頻的支持功能，新平臺的建設需遵循HTML5標準。

(3) 提供快速訪問的渠道。中心網站內容豐富，信息全面，隨之而來的問題就是二級三級目錄多，需要一定的時間成本才能找到所需內容。新平臺可以利用二維碼技術來實現網站內容的快速訪問[12-14]。

(4) 低成本改造，避免花費巨資重新建設。原有信息資源的建設花費了大量的人力和物力，新平臺應該以此為基礎通過增加功能模塊的方法來建設，避免浪費和重復建設。在平臺建設的支撐技術選擇上可以選取免費的開源工具和系統框架，以進一步節省成本。

3 系統設計與實現

3.1 系統設計

中心網站的架構是基于瀏覽器/服務器，新平臺以此為基礎，增加二維碼作為瀏覽器和服務器間的快速訪問通道，其架構如圖1所示。

圖1 系統架構拓撲圖

中心網站是基于IIS網頁服務器和SQL Server數據庫，以ASP.NET作為開發平臺建設的。由于項目開發公司的核心代碼是閉源的，因此增加或修改任意動態功能模塊都需要花費大量人力和物力。考慮到公共儀器實驗室網站以展示儀器相關信息和記錄訪問數據為主要功能，采用圖2所示的網站邏輯結構來進行自主建設，網站基于JAVA Web技術，以Bootstrap作為前端框架[15-16]，Eclipse作為開發工具，Tomcat作為服務器軟件，MySQL作為數據庫軟件，采用MVC設計模式進行開發。

圖2 網站業務邏輯圖

3.2 功能實現

在上述建設思路的指導下，采用下列方法來具體實現平臺功能。

(1)采用Bootstrap作為前端顯示框架。Bootstrap基于HTML、CSS和JavaScript，其響應式CSS代碼采用先進的網格系統，包含各類常見的Web組件(如下拉菜單、按鈕組、導航、對話框、面板等)，可用于開發響應式布局、移動設備優先的Web項目。以此開發的頁面具有在不同尺寸顯示屏上自動切換顯示效果的功能，一次開發即可同時滿足臺式機和移動用戶的瀏覽需求，大大提升開發效率。制作頁面時，先利用Bootstrap的各類組件將原頁面的內容進行分類包裝，再將組件放置在新頁面的網格系統中，最后為各組件添加響應不同屏幕的代碼即可。例如“class="col-xs-6 col-sm-3"”這段代碼表示該組件顯示于超小設備(手機等)時占據網格系統6列，顯示于小型設備時占據網格系統3列，網格系統的詳細信息見表1。網站最終顯示效果見圖3，與舊網頁相比，新網頁具有良好的移動端兼容性。

表1 Bootstrap跨設備工作情況

(2) 采用HTML5標準中的“

(3) 利用WPS Office 2016文字處理軟件可以將儀器介紹網址的鏈接制作成二維碼。電子版的二維碼可以圖文混排后發布于網站、電子公告屏等，而打印于不干膠標簽紙上的二維碼可以粘貼在固定的地方，如：儀器主機、室內墻壁、室外展板等。二維碼還有其他多種制作方法，如采用在線制作二維碼、安裝瀏覽器二維碼插件等。

(4) 系統開發使用的技術和框架多為開源或免費項目，在滿足項目需求的前提下能大大節省開發成本。網站各頁面的主要功能如下：登錄頁面是基于Bootstrap框架制作的靜態頁面，用于輸入用戶名和密碼；顯示頁面則是基于JAVA Web技術的動態頁面，用于讀取數據庫中的儀器信息并將得到的信息顯示在Bootstrap組件中，同時將用戶的訪問記錄保存于日志數據庫中；編輯頁面同樣是一個動態頁面，使用開源的UEditor富文本web編輯器，可用于在線編輯和保存文字、圖片、視頻等儀器相關信息。

4 系統運行狀況

新系統目前用于公共儀器實驗室和儀器分析實驗室的大型儀器信息錄入、資料上傳和信息呈現。實驗室每臺大型儀器都粘貼了對應的二維碼，學生或教師用手機掃描后可以獲取儀器的參數、原理、操作步驟、注意事項、開設實驗以及其它相關資料。由于儀器數量少，當實驗學生人數較多時，部分學生可能無法完全了解教師所授內容，以往采用展板或紙質文檔的方式幫助學生了解儀器，但是這都沒有通過掃描二維碼獲取信息來的快捷和詳細。

二維碼的使用明顯提升了訪問量，提高了資源的利用率。系統上線一個學期來，各類儀器總共獲得近千次訪問量，其中掃描二維碼帶來的移動端訪問量，約占總訪問量的40%。如果扣除惡意攻擊帶來的無效訪問量，二維碼帶來的訪問量實際占比超過50%。這些訪問流量是在未做推廣的前提下獲得的，可見訪問流量仍有大幅提升的空間。

通過分析學生掃碼訪問量的數據，可以進一步了解實驗課程的特點，幫助教師改進實驗教學。本學期實驗室儀器的單獨訪問量見表2，其中掃描二維碼訪問量前3名分別是熱重分析儀、液相色譜儀和紅外光譜儀，以這3類儀器為例進一步分析具體情況：

表2 實驗室主要儀器一學期訪問量(2017.3～2017.6)

(1) 熱重分析實驗儀器少而學生多，實驗耗時長，且學生第一次在教學實驗中接觸此類儀器，故學生掃碼訪問量高。后期可以在系統中添加更多與實驗相關的內容，便于學生提前做好預習，有助于提升實驗教學效果。比表面與孔分布儀作為學生新接觸儀器，本學期雖未安排實驗，卻獲得較多掃碼訪問量，原因是學生對新儀器的好奇心，后期設備添置可參考此類信息。

(2) 液相色譜主要用于有機化學實驗產物的結構表征，學生人數多，時間安排密集，每名學生需要在短時間內完成進樣并對譜圖進行處理。學生在實驗前通過手機查看實驗步驟，做好充分了解，便于實驗順利進行。教師在后期教學中可以鼓勵學生掃碼預習實驗。與液相色譜實驗安排類似的氣相色譜質譜實驗則因為學生在此之前已經進行多次氣相色譜實驗訓練，故掃碼人次較少。

(3) 紅外光譜儀學生接觸較多，且操作簡單，盡管課時安排較多，但在三者中掃碼訪問量卻最少，說明學生對該儀器操作熟練，在條件允許情況下可放手讓學生獨立操作。與之情況類似的還有紫外光譜儀。

實驗室新系統運行以來，雖然受到多次網絡惡意攻擊，但沒有出現系統癱瘓的情況。原因主要源于以下兩點：①系統所采用的框架和插件均是成熟可靠產品；②系統功能實現所需代碼數量有限，從而大大減少漏洞出現的幾率。新系統也具有很好擴展性，基于此系統，快速開發了實驗藥品信息數據庫，目前已投入試運行。

5 結 語

原有實驗室信息化平臺已經無法滿足當前信息化背景下對教育資源在移動端的快捷需求。本文基于HTML5標準和Bootstrap框架，使用多項開源工具對原系統進行改造，為公共儀器實驗室建立了一個新平臺，大大提升了來自移動端的訪問流量。相比項目外包所需數萬甚至更多費用來講，新平臺建設投入極低，滿足需求的同時可以大大節省教學經費。學生通過此平臺能夠快速訪問儀器資源，提高學習效率。教師和實驗室管理人員通過對學生訪問數據的分析，可以改進實驗教學方式方法，節省教學時間，提高教學效率。基于移動端的實驗室建設進一步提升了實驗室的信息化水平，同時也提高了實驗室的管理水平。