結構化學課程中基于網絡的點群演示教學平臺PGLite的開發與實踐

劉曉亮，劉陽秋，雷鳴

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

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

1 技術棧簡介

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

1.1 Jmol/JSmol

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

1.2 Web框架

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

2 系統設計

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

圖1 PGLite系統架構圖

2.1 構建分子點群數據庫

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

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

2.1.1 JSmol判斷點群

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

2.1.2 計算結果解析

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

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

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

2.2 前端數據呈現

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

2.2.1 分子點群索引

PGLite根據分子所屬點群進行二級分類，而后呈現給用戶以便索引。分類標準與周公度教授編著的結構化學基礎[11]相一致，符合PGLite為點群教學提供便利的設計初衷。

2.2.2 分子模型渲染

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

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

2.2.3 對稱元素演示

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

3 分子點群顯示及操作

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

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

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

圖2 PGLite效果圖

3.2 移動端顯示環己烷分子對稱性

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

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

圖3 PGLite移動端效果圖

3.3 特點

我們開發的PGLite相較于類似的桌面應用具有以下優點：

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

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

(2) 可拓展性強

PGLite的可拓展性表現在數據可拓展、系統可拓展兩方面，點群計算模塊使得管理員能夠方便的添加數據，模塊解耦的設計使得開發人員得以快速添加功能。

(3) 交互性強

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

4 結語

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