奚忠華， 孔璇鳳， 周愛(ài)東， 章文偉

(南京大學(xué) 化學(xué)化工學(xué)院，化學(xué)國(guó)家級(jí)實(shí)驗(yàn)教學(xué)示范中心，南京 210023)

0 引 言

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

1 基于移動(dòng)端的實(shí)驗(yàn)室建設(shè)必要性

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

2 基于移動(dòng)端的實(shí)驗(yàn)室建設(shè)思路

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

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

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

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

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

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

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

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

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

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

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

3.2 功能實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

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

表2 實(shí)驗(yàn)室主要儀器一學(xué)期訪問(wèn)量(2017.3～2017.6)

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

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

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

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

5 結(jié) 語(yǔ)

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