結(jié)構(gòu)化學(xué)課程中基于網(wǎng)絡(luò)的點群演示教學(xué)平臺PGLite的開發(fā)與實踐

劉曉亮，劉陽秋，雷鳴

北京化工大學(xué)化學(xué)學(xué)院，化工資源有效利用國家重點實驗室，計算化學(xué)研究所，北京 100029

分子點群是結(jié)構(gòu)化學(xué)課程中分子對稱性章節(jié)中的核心內(nèi)容，是學(xué)生深入學(xué)習(xí)、認識和理解分子結(jié)構(gòu)對稱性以及結(jié)構(gòu)與分子性質(zhì)之間的關(guān)系的理論基礎(chǔ)。在結(jié)構(gòu)化學(xué)教學(xué)中，分子點群不但是結(jié)構(gòu)化學(xué)教學(xué)的一個重點，而且是教學(xué)的一個難點。由于學(xué)習(xí)分子對稱性對學(xué)生空間想象力的要求較高，常需要任課教師借助演示工具來講授分子點群及分子的對稱性。而傳統(tǒng)的輔助教學(xué)方法是以實物球棍模型演示為主，但由于教師操作實物分子模型無法顯示對稱元素，與學(xué)生的交互性不強，學(xué)生理解較困難。此外，現(xiàn)已有利用POV-Ray[1]、VRML[2]來演示分子對稱性的報道，提高了教學(xué)效果，但使用不太方便。目前，在分子點群顯示和交互性平臺建設(shè)方面的報道仍較少。本文總結(jié)報道了我們開發(fā)的基于網(wǎng)絡(luò)技術(shù)的分子點群演示教學(xué)平臺，用于結(jié)構(gòu)化學(xué)課程的教學(xué)，構(gòu)建了點群演示網(wǎng)頁應(yīng)用PGLite (Point Group Lite)，具有展示分子結(jié)構(gòu)模型、分子對稱元素及所屬點群的功能，并實現(xiàn)了直接訪問網(wǎng)頁來操作分子對稱性元素的友好界面。此應(yīng)用的開發(fā)為結(jié)構(gòu)化學(xué)教師在分子點群部分的教學(xué)過程中提供了方便高效的演示平臺，使學(xué)生通過手機瀏覽器即可直觀認識分子對稱性，為學(xué)生深入理解分子的結(jié)構(gòu)、分子點群及分子對稱性特點提供了學(xué)習(xí)平臺。

1 技術(shù)棧簡介

PGLite采用了國內(nèi)主流的Web框架ThinkPHP[3]開發(fā)后端，利用開源框架Jmol/JSmol[4]實現(xiàn)了分子渲染、計算相關(guān)的功能，整體架構(gòu)為符合RESTful[5](Representational State Transfer)規(guī)范的MVC(Model-View-Controller)模式。

1.1 Jmol/JSmol

Jmol/JSmol[4]是一種網(wǎng)頁端分子模型顯示開源框架，具有繪制分子、渲染3D分子及相關(guān)計算等功能，支持Java (Jmol)、JavaScript (JSmol)語言開發(fā)。我們設(shè)計的PGLite系統(tǒng)主要利用了JSmol的3D分子渲染、點群計算功能，大大提高了開發(fā)效率。

1.2 Web框架

PGLite后端采用基于PHP的ThinkPHP框架，前端主要采用了Bootstrap[6]、jQuery[7]、Vue.js[8]。Bootstrap提供了一系列樣式庫，jQuery、Vue.js提高了前端開發(fā)效率。以上框架縮短了開發(fā)周期，提高了系統(tǒng)可維護性。

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

PGLite核心功能包括分子點群索引、分子模型演示、分子對稱元素演示，同時后臺可添加分子并計算點群。整體架構(gòu)如圖1所示，其中PointGroup為處理、查詢數(shù)據(jù)的核心類，AsynHandler.mol為調(diào)用JSmol渲染模型的核心類。

圖1 PGLite系統(tǒng)架構(gòu)圖

2.1 構(gòu)建分子點群數(shù)據(jù)庫

后臺管理員插入數(shù)據(jù)的業(yè)務(wù)流程為：① 上傳mol文件；② JSmol計算點群；③ PGLite解析數(shù)據(jù)；④ 更新數(shù)據(jù)庫。

首先我們利用GaussView[9]繪制并導(dǎo)出mol分子文件，上傳至PGLite。而后在計算點群頁面(需鑒權(quán)的后臺頁面)完成分子點群計算并記錄到 MySQL數(shù)據(jù)庫中。其核心程序包括兩部分：① 調(diào)用JSmol計算點群；② 解析JSmol計算結(jié)果，下文將簡單介紹實現(xiàn)方法。

2.1.1 JSmol判斷點群

JSmol提供了計算點群的命令“write pointgroup draw”[10]，其計算結(jié)果為包含點群信息、對稱元素及其渲染命令的字符串。以乙烷為例，點群計算部分結(jié)果所示如下。

2.1.2 計算結(jié)果解析

JSmol計算結(jié)果為字符串格式，不能直接被系統(tǒng)識別。為此，我們編寫了解析計算結(jié)果的cvtTxt2Json( )方法，利用正則匹配提取關(guān)鍵信息，以下PHP腳本即提取對稱軸的關(guān)鍵代碼：

此外，對稱元素名稱、JSmol對象名稱及對稱元素渲染命令也是重要的信息，我們分別進行了正則提取。提取信息后，為使系統(tǒng)能夠識別數(shù)據(jù)，我們定義了一種描述分子信息的JSON數(shù)據(jù)格式，如下所示：

將以上JSON數(shù)據(jù)插入數(shù)據(jù)庫后，前端便可直接查詢并使用數(shù)據(jù)。

2.2 前端數(shù)據(jù)呈現(xiàn)

PGLite前端功能包括① 分子點群索引；② 分子模型渲染；③ 對稱元素演示。以下將分別介紹。

2.2.1 分子點群索引

PGLite根據(jù)分子所屬點群進行二級分類，而后呈現(xiàn)給用戶以便索引。分類標準與周公度教授編著的結(jié)構(gòu)化學(xué)基礎(chǔ)[11]相一致，符合PGLite為點群教學(xué)提供便利的設(shè)計初衷。

2.2.2 分子模型渲染

通過點群篩選特定分子后，系統(tǒng)發(fā)送異步請求獲取JSON數(shù)據(jù)(見上文)，調(diào)用JSmol進行渲染。異步請求均為符合RESTful[5]規(guī)范的API，獲取分子數(shù)據(jù)的接口如下：

http://pg.minglab.cn/model/mol?name_en=mol_name64 // mol_name64：base64編碼的分子英文名

2.2.3 對稱元素演示

獲取包含了點群詳細數(shù)據(jù)的JSON格式分子數(shù)據(jù)后，系統(tǒng)將解析并呈現(xiàn)給用戶，使用戶通過點擊按鈕便可控制對稱元素的顯示或隱藏。從而直觀地呈現(xiàn)分子模型及點群特征，幫助學(xué)生更好地理解分子對稱性。

3 分子點群顯示及操作

目前我們已推出的PGLite V1.1，不僅實現(xiàn)了點群索引、對稱元素演示的核心功能，而且實現(xiàn)了桌面、平板、手機三端兼容，具有簡潔友好的交互界面。

3.1 桌面端顯示乙烷分子對稱性

圖2所示為桌面端效果。我們以D3d點群的乙烷為例，介紹其功能及交互方式。左側(cè)為“對稱元素”面板，可看到乙烷的所有對稱元素，點擊對應(yīng)顯示按鈕，畫布中即渲染該對稱元素。右側(cè)為“點群索引”二級分類面板，可根據(jù)點群索引分子。

圖2 PGLite效果圖

3.2 移動端顯示環(huán)己烷分子對稱性

如圖3(a)、3(b)所示，點擊按鈕2可調(diào)出“點群索引”二級分類面板，再次點擊可隱藏，其操作與桌面端相同，可通過所屬點群篩選出cyclohexane。

如圖3(c)所示，點擊按鈕1展開“對稱元素”面板，其面板操作方式與桌面端一致。同時移動端畫布具有較強交互性，單指可旋轉(zhuǎn)，雙指可縮放。

圖3 PGLite移動端效果圖

3.3 特點

我們開發(fā)的PGLite相較于類似的桌面應(yīng)用具有以下優(yōu)點：

(1) 兼容移動設(shè)備，更加便捷

我們開發(fā)的系統(tǒng)實現(xiàn)了兼容桌面、平板、手機，具有良好的跨平臺性，而且無需安裝，給用戶帶來了極大便利。

(2) 可拓展性強

PGLite的可拓展性表現(xiàn)在數(shù)據(jù)可拓展、系統(tǒng)可拓展兩方面，點群計算模塊使得管理員能夠方便的添加數(shù)據(jù)，模塊解耦的設(shè)計使得開發(fā)人員得以快速添加功能。

(3) 交互性強

我們交互界面設(shè)計力求簡潔高效，相對于專業(yè)的桌面應(yīng)用程序，PGLite能夠更直觀地進行交互，方便快捷。當(dāng)然，目前PGLite的功能還較為簡單，有待進一步開發(fā)。

4 結(jié)語

隨著計算機科學(xué)及網(wǎng)絡(luò)技術(shù)的高速發(fā)展，結(jié)構(gòu)化學(xué)課程教學(xué)技術(shù)也在不斷更新和前進，目前也有諸多結(jié)合計算機技術(shù)的教改嘗試。此文介紹了我們開發(fā)的基于網(wǎng)絡(luò)的結(jié)構(gòu)化學(xué)課程分子點群教學(xué)平臺——PGLite。通過將Web技術(shù)與JSmol模塊相結(jié)合，PGLite平臺幫助教師在結(jié)構(gòu)化學(xué)教學(xué)過程中進行分子點群及對稱性元素的演示，使學(xué)生能夠直觀地進行交互，由此深刻理解認識分子點群和分子的對稱性的知識。PGLite系統(tǒng)具有兼容多個設(shè)備平臺、可拓展性強、交互性強的特點，分子點群數(shù)據(jù)庫也較易擴展。目前PGLite教學(xué)平臺的核心功能已基本實現(xiàn)并上線(http://pg.minglab.cn)，供師生訪問使用該分子點群演示教學(xué)平臺。同時，我們將不斷開發(fā)拓展PGLite教學(xué)平臺的功能，提高該應(yīng)用平臺的實用性、顯示界面的友好性和良好的交互性。我們期待PGLite能廣泛應(yīng)用在我國的結(jié)構(gòu)化學(xué)課程分子對稱性部分的教學(xué)，為更多的師生提供有力的教學(xué)工具，以此加深學(xué)生們對分子對稱性知識的理解。