结构化学课程中基于网络的点群演示教学平台PGLite的开发与实践
2021-04-09刘晓亮刘阳秋雷鸣
刘晓亮，刘阳秋，雷鸣
北京化工大学化学学院，化工资源有效利用国家重点实验室，计算化学研究所，北京 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能广泛应用在我国的结构化学课程分子对称性部分的教学，为更多的师生提供有力的教学工具，以此加深学生们对分子对称性知识的理解。
