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

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

0 引 言

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

1 基于移動端的實驗室建設(shè)必要性

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

2 基于移動端的實驗室建設(shè)思路

為有效解決舊系統(tǒng)的各種問題，新平臺的建設(shè)需以下列原則為基礎(chǔ)：

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

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

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

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

3 系統(tǒng)設(shè)計與實現(xiàn)

3.1 系統(tǒng)設(shè)計

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

圖1 系統(tǒng)架構(gòu)拓?fù)鋱D

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

圖2 網(wǎng)站業(yè)務(wù)邏輯圖

3.2 功能實現(xiàn)

在上述建設(shè)思路的指導(dǎo)下，采用下列方法來具體實現(xiàn)平臺功能。

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

表1 Bootstrap跨設(shè)備工作情況

(2) 采用HTML5標(biāo)準(zhǔn)中的“

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

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

4 系統(tǒng)運行狀況

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

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

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

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

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

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

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

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

5 結(jié) 語

原有實驗室信息化平臺已經(jīng)無法滿足當(dāng)前信息化背景下對教育資源在移動端的快捷需求。本文基于HTML5標(biāo)準(zhǔn)和Bootstrap框架，使用多項開源工具對原系統(tǒng)進行改造，為公共儀器實驗室建立了一個新平臺，大大提升了來自移動端的訪問流量。相比項目外包所需數(shù)萬甚至更多費用來講，新平臺建設(shè)投入極低，滿足需求的同時可以大大節(jié)省教學(xué)經(jīng)費。學(xué)生通過此平臺能夠快速訪問儀器資源，提高學(xué)習(xí)效率。教師和實驗室管理人員通過對學(xué)生訪問數(shù)據(jù)的分析，可以改進實驗教學(xué)方式方法，節(jié)省教學(xué)時間，提高教學(xué)效率?；谝苿佣说膶嶒炇医ㄔO(shè)進一步提升了實驗室的信息化水平，同時也提高了實驗室的管理水平。