在线可视化编程作业云平台的设计与应用

实 验 技 术 与 管 理 第37卷 第7期 2020年7月
Experimental Technology and Management Vol.37 No.7 Jul. 2020
ISSN 1002-4956 CN11-2034/T
DOI: 10.16791/ki.sjg.2020.07.044
在线可视化编程作业云平台的设计与应用
苏 庆1,2，张思远1,2，黄剑锋1,2，吴伟民1,2，刘添添1,2
（1. 广东工业大学 计算机学院，广东 广州 510006；
2. 广东工业大学 系统工具与可视计算创新实验室，广东 广州 510006）
摘 要：为适应大规模软件编程类教学的特点和需求，突破软件编程作业的人工批改局限和课时限制，设计并实现一个在线可视化编程作业云平台。

充分利用云平台的动态可扩充特性，为学生提供不间断在线编程作业环境。

研发程序可视化调试技术，直观地呈现程序运行时各种数据关系的实时变化，降低初学编程者的入门门槛。

实践表明，该平台可以显著提高学生的编程作业效率，提升软件编程实验的教学质量。

关键词：软件编程作业；可视化调试；编程实训平台
中图分类号：G642 文献标识码：A 文章编号：1002-4956(2020)07-0191-04
Design and application of online visual programming cloud platform
SU Qing 1,2, ZHANG Siyuan 1,2, HUANG Jianfeng 1,2, WU Weimin 1,2, LIU Tiantian 1,2
(1. School of Computer Science and Technology, Guangdong University of Technology, Guangzhou 510006, China; 2. Laboratory of Visual Computing and System Tools, Guangdong University of Technology, Guangzhou 510006, China)
Abstract: In order to adapt to the characteristics and needs of large-scale software programming teaching and break through the limitations of manual correction and class hours of software programming homework, an online visual programing cloud platform is designed. Full use of the dynamic and expandable characteristics of the cloud platform is made to provide students with a simple and uninterrupted online programming environment. R&D process visual debugging technology intuitively shows the real-time changes of various data relations when the program is running and lowers the threshold for programming beginners. Through practical application, the platform can significantly improve the efficiency of students’ programming work and the teaching quality of software programming experiment.
Key words: programming homework; visual debugging; programming training platform
计算机编程能力是计算机专业学生的核心专业能力之一，对于学生深入理解专业基础知识、促进业务素质培养，以及提高就业质量都具有重要意义[1]。

然而，当前计算机专业学生的计算机编程能力培养存
收稿日期: 2019-11-14
基金项目: 国家留学基金委2018年国家—地方合作项目“高等教
育教学法出国研修项目”（〔2018〕5028）；广东省科技计划项目“基于云计算的金融服务平台关键技术研究及产业化”（2016B030306004）；广东省高等教育教学改革项目“可视化WebIDE 编程实训模式研究与应用”（SJJG20191216）
作者简介: 苏庆（1979—），男，广东信宜，博士，副教授，主要研究方向为智慧学习环境。

E-mail: suqing@ 通信作者: 黄剑锋（1979—），男，江西宜春，硕士，讲师，主要研究方向为智慧学习环境。

E-mail: huangjianfeng@
在以下问题：①学时少。

在课程改革、课时压缩的大背景下，学时变得非常紧张。

②学生多、教师少。

在扩招的大背景下，师生比例进一步失调，教师无法及时对学生进行一一辅导。

③程序调试过程的直观性差，程序运行时各种数据的关系抽象复杂，导致编程效率低下。

随着云平台技术[2-3]的日渐成熟，各类基于云平台的面向特定用途的教学系统开始陆续建成并投入使用，产生了良好的教学效果[4]。

例如，国防科技大学eduCoder 平台（https:///）是一个基于互联网的IT 教学、实验、实战和开发平台，支持编程作业的自动化评测，实时反馈学生实验和实训的错误。

浙江大学PTA （https:///）程序设计类实验辅助教学平台支持多种编程语言的在线编程和代码抄袭查重。

中山大学超算习堂EasyHPC （https:///）
192 实 验 技 术 与 管 理
是一个提供高性能计算优质教育内容的在线教育实践平台，并提供了面向高性能计算并行程序设计的即写即用型编程实践环境。

上述平台都并未支持在线编程调试以及数据关系的可视化展示。

本课题组开发的“在线可视化编程作业云平台”是一个集编辑、编译、运行、可视化调试和自动程序测评为一体的在线编程作业环境，学生可在该平台上在线编写和可视化调试自己编写的程序，极大提高了学生程序设计训练的效率和效果。

该平台将大量作业用时转移至课外，学生可以自由安排时间进行上机编程作业，破解了上课学时紧张导致课堂训练量不足的
困境；该平台利用云的可动态扩展特性，低成本地提供了全天候的上机作业环境，并可自动程序测评，缓解了师生比例失调的矛盾；另外，该平台提供可视化程序调试器，直观反映程序运行时各种数据的关系，可大大提高编程效率。

1 系统总体设计
“在线可视化编程作业云平台”目前支持C 语言程序设计以及数据结构（C 语言版）的编程作业。

该平台采用C/S 架构，包含AnyviewCe （学生端）和AnyviewSr （服务端）模块，平台总体架构如图1所示。

图1 平台总体架构
1.1 学生端设计
学生端用于完成以及提交编程类作业题目，主要功能包括登录、做题、个人信息管理等，其中做题功能最为重要，包含了打开题目、代码编辑、编译、调试、运行等子功能。

登录后的学生端界面如图2所示。

学生可以首先点击工具栏中的“题目文档”按钮，查看题目的具体要求，然后构思编程思路。

在代码编辑区编写程序时，该学生端也提供了常用的剪切、复制、粘贴等编辑功能。

程序编写完毕后，即可在编译、调试和运行工具栏中进行程序编译，必要时还可以进行可视化调试[5]。

可视化面板实时呈现了运行时数据之间的关系变化过程，这也是学生端提供的最为关键的功能。

运行
时数据结构可视化可以极大地帮助学生理解程序调试过程，不但可以在程序运行过程中观察数据值的变化，还可以观察数据之间关系的变化，极大地提高程序效率。

图2展示了一个正在处理4条链表的程序在某一时刻的数据关系快照。

从左下方的可视化面板可以看出，最后一条链表中的表尾指针指向了第一条链表中的某个结点，这是一种需要学生特别关注的情况，它要么是程序实现有错，要么是正在进行链表的部分合并操作。

由此可以看出，可视化调试可以帮助学生直观、快速地观察当前的数据关系，从而分析当前程序正在执行的功能是否符合预期目的，明显降低初学者的编程门槛。

苏庆，等：在线可视化编程作业云平台的设计与应用193
图2链表数据结构可视化举例
1.2服务端设计
在线可视化编程作业系统平台的服务端包含了教师和管理员两种角色。

1.2.1 教师端功能设计
在教师端中，较为重要的功能位于作业管理子模块，包括批改作业、综合评分、成绩统计等。

（1）批改作业功能。

本编程作业平台可以对学生答案程序进行正确与否的测定。

因此该批改作业功能主要用于以下方面：对于正确的学生答案程序，教师可以对其代码风格、算法复杂度等方面进行更细致的评述；对于错误的学生答案程序（尤其是学生经过反复修改仍然未获通过的程序，以及班上大面积雷同出错的程序），教师可以观察其错误原因和类型，在课堂上讲解和指导。

（2）综合评分功能。

该功能可以便于教师综合学生的编程时长、错误次数和算法性能等多种因素，给出每一道题的分数值，通常可作为评定平时成绩的重要依据。

（3）成绩统计功能。

该功能对于整个班级进行做题情况的成绩分析和统计，便于教师掌握班级整体学习情况，及时调整教学进度与重点难点。

1.2.2 管理端功能设计
在管理端，则侧重于提供本编程作业平台的各类管理功能，其中较为重要的功能集中于校际事务模块。

（1）题库管理功能。

该功能用于作业题的题库建立、题目入库以及编排等。

对于不同层次的学校，对作业表的要求会有所差异。

例如，职业技术院校更加注重于编程熟练程度，往往需要使用算法设计难度低、但编程量大的题目；对于一般非重点高等工科院校，则需要在编程量和算法设计难度两方面作出平衡来选择题目。

因此，在该功能中，还包含了题目内部关联挖掘、处理与推荐等子功能。

（2）校际对比功能。

该功能用于同层次的学校之间的编程作业平台应用情况对比，为加入平台的学校提供包括题库设定、作业表设定以及其他相关管理设定的辅助决策支持。

另外，该功能还可以让管理员全面地掌握各学校的平台应用情况，便于作出平台资源调配。

2平台关键技术
本平台的关键技术在学生端和服务端各有侧重：学生端关键在于可视化调试技术，服务端则是云平台相关部署技术。

2.1可视化调试技术
本平台依据C语言标准使用ANTLR技术[6]快速构建编译器框架，实现了一个C编译器的子集，可满足初学者在大部分情况下进行C程序编程的要求。

在程序执行过程中，数据结构是一种具有时间属性（由创建到被销毁的时间周期）的数据。

将程序执行过程中的数据关系实时可视化，能增强数据呈现效果，让用户以直观交互的方式对数据进行观察，从而发现数据中隐藏的特征、关系和模式，可以极大地提高程序调试效率，从而降低编程学习者的学习门槛。

因此，本平台还实现了可视化调试器，为程序执行过程提供了可视化运行环境，其中重点在于各种数据结构的可视化技术[7]。

数据结构可视化从类型上可以分为集合结构可视化、单链结构可视化、树形结构可视化、图结构可视化等[8]。

（1）集合结构可视化。

分为两种表达形式：一种为常见的一维、二维和三维数组，此时采用顺序表的表达形式；另一种为离散集合（在离散数学课程[9]实验中较为常见），此时则一般采取在二维空间进行离散分布的方式。

在实践应用中发现，后一种方式由于其离散分布造成的元素随机排列，不便于观察，因此无论是数组还是集合，多采用顺序表形式。

（2）单链结构可视化。

在程序执行过程中，可能会产生多个结点指向一个结点的情况，此时的单链结构不符合单链表定义，而且单链结构局部发生明显改变，此时需要学生认真观察单链结构的变化是否与预期相符（如上图2所示），从而快速理解当前的数据关系，便于调试过程顺利进行。

（3）树形结构和图结构可视化。

从数据结构的角度，树是图的一种特例，然而由于其连通无回路的特性，其可视化布局需要专门研究，常见的方法有均分布局法、动态布局法等；图结构的变化则更加多样，常见的可视化布局方法有环形布局法、力导向布局法等。

2.2云平台部署技术
编程作业过程中将会产生大量的编程数据，包括用户信息、上机题库、用户编程行为数据等，具有数据量大、数据类型复杂的特点，其中用户编程行为的数据是以非结构化的形式存在的。

对编程作业过程的教务管理和作业管理的设计应该具有动态扩展性、准确定位等特点，而传统存储技术很难达到这个目的。

依靠云存储的存储虚拟化技术能够把不同的硬盘虚拟成为性质相同的设备，提供动态扩容的特性；对象存储技术能够为用户从大量数据中获取所需信息提供技
194 实验技术与管理
术支持。

在线可视化编程作业云平台框架如图3所示。

图3在线可视化编程作业云平台框架
本作业平台在开放架构的X86服务器上实现虚拟化支持，包括云数据层、云数据接口层、云业务逻辑层、云访问层等部分。

（1）云数据层对平台数据信息进行归档，提供快速查询的底层接口，并保证数据的完整性、可靠性。

在数据库方面，程序使用了MySQL，考虑到并行数据处理技术的成熟性，云平台采用MapReduce方式处理并行数据。

系统中实施缓存管理，本作业平台采用Redis技术。

基于Redis缓存技术的高效特性，可以较好地应对日渐增多的系统数据量，因而对于数据的存储和服务器资源优化特别重要。

（2）云数据接口层主要采用MyBatis、SpringBoot 和Javabean技术。

MyBatis支持定制化SQL、存储过程以及高级映射。

MyBatis避免了几乎所有的JDBC 代码和手动设置参数以及获取结果集，而且可以使用简单的XML或注解来配置和映射原生信息，将接口和普通的Java对象映射成数据库中的记录。

（3）云业务逻辑层提供业务的统一管理，使用统一的权限配置。

当业务实体发生改变或者是有新的业务时，系统的基础架构都不需要做出任何调整，可以直接使用原有的功能。

如代码检测功能，只需在教师权限里面添加该功能，再编码实现即可。

系统使用Shiro技术实现业务中的权限控制，用于在不同角色登录时分配不同权限给各个角色。

后台服务系统有用户多、模块多和权限多的特点，因此采用分组的用户管理设计。

用户登录系统后，系统会根据该用户的权限提供相应的功能，并对用户的每个操作检查用户的使用权限。

系统将用户、用户组的权限通过各个结点进行绑定，在各个结点上实现继承与非继承的设置管理，从而使管理员可以进行灵活的配置。

（4）云访问层为用户提供作业编程服务，用户通过终端设备获取虚拟化实验环境中的多种服务。

云访问层使用SpringMVC框架技术[10]，设计前端控制器来分派请求，同时提供灵活的配置处理程序映射、视图解析、语言环境和主题解析，并支持文件上传。

3平台实现与应用
本作业平台在上线使用前，遵从软件开发管理规范[11]，实施了单元测试、集成测试以及多轮压力测试，使得本平台的功能正确性、系统稳定性和性能可满足性都得到了全面的验证，并且及时修正了各种错误。

平台上线以来，首先在我校计算机学院进行试用，为大一上学期C语言程序设计和大二上学期数据结构课程的实验以及上机作业环节服务，涉及学生约800人/届，共约1600人/年；任课教师约16人。

在师生比大约1∶100的情况下，大部分学生每学期可自主完成大约80道编程作业的训练量。

之后扩展应用至我校其他开设了软件编程类课程的学院，自2012年以来，本平台累计上机总人数约12 000人次，总实验机时约153 600小时。

由于本平台在提高程序调试率方面的积极作用，降低了编程学习的门槛，师生的使用反馈都较为良好。

目前，本课题组出版了一本《数据结构》教材[12]，并配备了与教材内容编排配套的上机作业题目。

随着教材的逐步配合推广，已有部分其他高等院校准备试用本平台，预计会产生更加积极的影响。

4结语
本在线可视化编程作业平台的研发与应用降低编程学习者的学习门槛，为学生提供了7×24小时的在线编程实训环境，同时减轻教师的教学负担，为教师用户提供实时快速的教务管理和作业过程管理，根据学生的学习情况，及时制定有针对性的训练方案。

本平台的服务对象为广大计算机编程学习人员，包括高等院校和职业技术院校的学生和教师，服务人数多，影响面大，具有现实的推广应用意义。

接下来，我们将对学生的编程实训数据进行统计、分析和挖掘，进行基于学习情况与知识地图的个性化学习推荐方案的研究，逐步建立一个以学生自主学习为中心的沉浸式学习环境。

参考文献(References)
[1] 倪强.培养大学生编程兴趣的研究[D].上海：上海师范大学，
2017.
[2] 郎振红.基于云平台的自主式实验教学体系研究[J].实验技
术与管理，2018, 35(2): 159–162.
[3] 曹丽，姜毅，杨晓刚.面向高校的私有教育云平台构建与应
用研究[J].实验技术与管理，2018, 35(1): 161–166.
（下转第203页）。