夏征华，胡保坤，刁湾湾，黄玉钱
(杭州师范大学信息科学与技术学院，浙江 杭州 311121)
信息科技教育是素质教育的重要组成部分.算法编程教育可优化青少年逻辑思维模式，掌握计算机算法对运用计算机解决工程问题具有重要意义.传统板书和幻灯投影授课方式的计算机算法教学很难展示算法内部过程，缺少教育理念和学习策略的指导，难以将复杂抽象的算法逻辑进行形象具体化地表现，基本都以外显学习的方式来传递知识[1]，教学效果不是很理想[2].
目前，国内代表性的可视化算法学习平台有LeetCode Animation，国外可视化算法学习平台有VisuAlgo、Data Structure Visualizations以及Algorithm Visualizer.这些平台虽各具特色，但仍然无法满足实际课程的需要：1)缺乏交互性.VisuAlgo与Data Structure Visualizations平台未提供与用户交互的功能，只是单纯对算法进行演示，算法的动态演示与算法的代码脱节.2)编程方式复杂.Algorithm Visualizer平台允许用户编写代码创建算法进行演示，但采用了复杂的文本编程方式.3)编程语言选择有局限性.LeetCode Animation、VisuAlgo以及Data Structure Visualizations平台虽然提供了较多的算法动画模块，但未提供选择编程语言的功能.Algorithm Visualizer虽然提供了选择编程语言的功能，但只支持JavaScript语言.因此开发具有编程语言多样性、编程方式图形化、算法教学可视化等特点的交互式计算机算法学习平台非常有必要.
本研究以算法流程为重点，突出算法编程的趣味与创意，以提供提高分析解决问题和算法编程能力的学习环境为目标，基于Google的可视化图形编程工具 Blockly和ngx-blockly库，研发交互式计算机算法学习平台.平台主要特点包括可视化编程、可视化动态演示算法步骤、交互式学习计算机算法理论知识等.教师可以使用此平台将 Blockly 图形化、搭积木式教学融入到计算机算法课程中，通过堆叠法将繁琐的知识点图形化，降低算法学习难度[3]，帮助学生尽快掌握计算机算法的相关知识.
1.1 系统架构
本学习平台采用云架构，不仅为用户提供良好的交互体验，还因其良好的前后端工作分离模式而降低系统开发的难度，提高系统的可扩展性，平台的系统架构如图1所示.本学习平台基于Blockly和ngx-blockly库进行了二次开发，在逻辑层面上完成了变量类型定义和模块的生成功能.针对交互式学习[4]计算机算法的需要，平台提供了如图1所示的一系列重要功能，以促进学生在学习过程中将理论知识与实践结合.另外，通过阿里云与系统的交互，实现整个平台的平稳运行.本平台的主界面如图2所示.
图1 系统架构Fig.1 System architecture
图2 平台主界面Fig.2 Main interface of the platform
1.2 平台的主要功能
本学习平台的主要功能：1)可视化编程.在可视化编程教学中，教师通过拖动代码块，以一种搭积木的方式，从打地基开始，逐渐建成高楼大厦.学生可以充分理解每个代码在程序中的作用.搭建成功的积木块及其所属的代码块如图3、图4所示.2)算法可视化.对算法进行动画演示，能把抽象的计算机算法知识具体化、形象化，促进学生对计算机算法知识的吸收理解.3)代码云编译.在可视化编程的基础上提供在线云编译功能，在教学中不需要在拖动代码块搭建完毕一个程序后，再复制生成代码至IDE上进行编译.集成化的设计能够充分提高学习效率.4)编程语言多样.本平台实现将多种编程语言集成，学生可以选择不同的语言模块进行算法学习，可以通过云编译功能获取运行结果，实现对知识的理解.5)云端服务.每个用户使用注册的账号登录平台后，都可获取上传云端的权限，可以将搭建好的积木块上传至云端.当用户需要的时候，可以随时随地从云端下载自己备份的代码块，接续上一次未完成的项目.功能页面如图5所示.
图5 云端服务Fig.5 Data cloud service
2.1 可视化编程呈现
2.2 数据云服务
Blockly框架是基于Web浏览器开箱即用的，其积木块控件及其代码等数据都是保存在内存中，关闭浏览器后，所有数据都会消失.为实现用户断点使用，本平台开发云服务功能，包括云端的上传与下载，具体如下：
积木块在Blockly中以XML格式进行渲染.本研究使用Blcokly提供的操作DOM元素的Blockly.Xml.workspaceToDom()和Blockly.Xml.domToText()两个方法将界面上的积木块转为文本格式，在用户获得读写云服务权限的Token后，云服务器将其上传至云端保存.当用户搭建完成一个功能模块后，点击保存按钮时会有弹窗出现，输入保存的文件名并确认后，积木块上传至阿里云服务器.
当用户点击云端下载按钮后，进入下载界面，页面显示保存的所有存档.用户可根据需要来选择载入.在载入云端保存的内容时，后端通过用户选择的某一存档，获取到存放此存档的URL地址并进行访问.在此期间，通过axios请求的头部携带用户获得的唯一Token获得访问权限.在访问到云端地址并且读取到云端文本内容后，根据ngx-blockly库的逻辑特性(积木块以XML格式)构建、存储以及存放在云端内容格式的特性(TXT文本格式).为使文本内容转化为XML格式，本研究调用Blockly.Xml.domToWorkSpace() 和Blockly.Xml.textToDom()两个格式转换方法实现对界面的渲染.
2.3 在线云编译
本研究使用GitHub开源框架Remote Code Runner实现云编译功能.Remote Code Runner是一个远程代码执行服务，可以让用户在网页在线编写C、Python等代码.当用户点击运行按钮后，把代码发送到远程服务器执行，再返回执行结果，然后渲染界面.在线云编译运行结果如图6、图7所示，显示了顺序查找的运行结果.
3.1 C语言模块的实现
JavaScript、Python等编程语言都不具有数据类型[5].编程语言的类型系统具有错误检查、程序验证、文档化、提高程序效率等作用，对于初学者非常重要.同时，本平台加入了C语言模块.
本研究以ngx-blockly库的源码为基础，借鉴Protzenko[6]和Pasternak等[7]提出的Blcokly生成其他语言的思路，使用Typescript建立起对C语言模块中每个积木块以及其所对应的代码块定义的服务.以类型系统的实现为例，本研究使用ngx-blockly库提供的block.jsonInit({‘对象元素’})方法，在系统平台对象元素中，增加type为field_dropdown的下拉列表，以实现对数据类型的表示：
{"type":"field_dropdown","name":"dropdown",
"options": [["integer","int"],["float","float"],...]},
第六，鼓励国有资本入股非国有企业。在公共服务、高新技术、生态环境保护和战略性产业等重点领域，以市场选择为前提，鼓励具有资本运作经验的国有企业、国有资本投资公司对发展潜力大、成长性强的非国有企业进行股权投资。鼓励国有企业按照产业链、价值链要求，通过投资入股、联合投资、重组等多种方式，与业务相同或关联度高的非国有企业进行股权融合、战略合作、资源整合。
此外，还需产生模块对应的代码块，其功能的实现依赖block.getFieldValue(’dropdown’)方法：
let type=block.getFieldValue(’dropdown’);
return code=type;
经过上述开发，本学习平台实现了C语言模块.
3.2 算法执行过程动画演示
在学习算法过程中观看算法的动画演示，交互式学习算法的原理能提高学习效果.本学习平台提供选择算法、排序算法、图算法、二叉树算法等常用算法的动画演示功能，此功能包含算法步骤动画演示以及算法运行时各步结果的动态显示.算法步骤动画演示示例如图8、图9所示.以C语言模块的冒泡排序动画演示为例，可视化演示算法的操作流程为：用户拖动封装好的积木块至工作区后，点击运行按钮.后台把积木块所对应的代码块以及当前所使用的语言以API请求的方式，发送到云编译服务器.服务器在判断语言类型后，进行代码执行，然后把执行结果返回.后台在接收到结果后，进行遍历渲染动画.每条方柱的蓝色填充高度代表当前数值的大小.排序过程中，每次循环的结果都会渲染一次动画，方柱的位置和高度也会与每次变化的结果一样，以一种动态的、可视化的方式演示算法的执行步骤.
图8 冒泡排序算法动画示例 Fig.8 Example of bubble sorting algorithm animation
图9 深度优先搜索动画演示Fig.9 Animation demonstration of depth first search
实现算法动画演示的难点在于如何把C语言代码云编译后的结果转换为Typescript代码，并使其可以在页面进行渲染.对此，本研究使用了如下的解决方案:
1)使用数据的单向绑定来解决C代码云编译结果转换为Typescript代码的难点.以排序算法为例，每个排序算法模块都设计有两个对应的代码块，这两个代码块进行单向数据绑定.一个代码块面向用户显示，另一个则增加一个遍历循环方法，以此来输出算法在运行过程中每一次排序产生的结果，此代码不对外显示.C代码是无法直接与Typescript交互，因此在Angular中创建一个服务文件，以依赖注入的方式给平台提供服务.在此文件中，渲染步骤动画的代码时刻监听面向用户代码块的状态，并随其进行改变，反之则不可.积木块产生的代码块使用Axios向云编译器发出请求后，得到了C代码编译后的结果，此结果是Typescript代码，这就间接地实现了其直接交互.
3.3 流程图生成对应积木块
流程图是将所需要解决问题的顺序、步骤用特定的图形、符号进行表达[8].使用流程图可以辅助学生学习算法程序设计，将复杂的问题、过程直观化，帮助学生加深对算法程序设计的理解，提高课堂学习效率[9].因此，本研究设计了根据算法逻辑搭建流程图来生成对应积木块的功能，从流程图到积木块再到对应编程语言代码的实时生成，将算法逻辑清晰化，帮助学生更好地学习算法知识.
在本学习平台中，积木块在系统内部的表现形式是XML格式，流程图生成对应积木块的关键在于对流程图中的每一个节点都要设计一个对象变量，对象里面绑定其对应的积木块的XML内容.要对流程图节点内容进行配置，需要使用高度可自定义的交互性图形库.为此，本平台引入了GoJS库.图10所示为使用流程图生成对应积木块来搭建一个简单数学运算模块的界面.
图10 流程图生成对应积木块Fig.10 Flow chart generating corresponding building blocks
实现此功能模块，一方面，要修改GoJS的 public paletteNodeData:Array
paletteNodeData[{category:"Comment",key:"1", Blockly:(value,id)=>{return`
},...]
另一方面，需要实现在积木块界面实时监听流程图的变化以生成对应积木块.因此，本研究借助Angular的订阅者模式，对流程图生成数据进行监听.每当一个流程图模块搭建，订阅者就会把其对应的对象数据中预先设置好的Blockly()方法中的XML数据使用渲染DOM元素的Blockly.Xml.domToWorkspace()以及Blockly.Xml.textToDom()两个API将格式为字符串类型的XML数据转换为合法的XML并渲染到界面.当需要的流程图搭建完毕后，对应的积木块也随之出现在工作区域，此时，后台逻辑会对搭建的积木块进行相应的处理，产生其对应的代码块，实现了从流程图到积木块再到代码块的连续功能服务.
本研究基于ngx-blockly库，贯彻运用交互式教学的思想，开发了交互式计算机算法学习平台.本平台提供的C语言模块的实现、算法执行过程动画演示、流程图生成对应积木块等功能展示了计算机算法的执行过程，可降低计算机算法学习的难度.
猜你喜欢 流程图云端积木 云的识别指南百科探秘·航空航天(2022年6期)2022-06-28四海心连·云端汇聚华人时刊(2022年5期)2022-06-05这块积木能给我吗娃娃乐园·综合智能(2021年4期)2021-07-20在云端永生奥秘(2020年6期)2020-06-30云端之城现代装饰(2020年5期)2020-05-30一种程序源代码的标准化流程图转化方法∗计算机与数字工程(2019年4期)2019-05-07有趣的积木小朋友·快乐手工(2016年6期)2016-05-14在云端人力资源(2015年7期)2015-08-06玩积木幼儿智力世界(2015年3期)2015-06-16