基于Blockly 的青少年可视化编程开发平台设计

彭佳汉，李俊德，彭程，秦天文，王拣贤，李刚毅，赖晓晨

（大连理工大学软件学院，大连116000）

0 引言

近年来，提升青少年的编程兴趣和培养学生的编程能力成为了国内外关注的热点，越来越多的国家意识到青少年编程教育的重要性。在国外，麻省理工学院在2003 年就曾打造适用于儿童的Scratch 程序语言，以一种可视化的程序设计工具在众多平台上学习使用[1]。在我国，2016 年教育部印发《教育信息化“十三五”规划》的通知，将信息化教学能力纳入学校办学水平考评体系，并强调“STEM 是一种以项目学习、问题解决为导向的课程组织方式，它将科学、技术、工程、数学有机地融为一体，有利于学生创新能力的培养”[2]。因此，社会迫切需要加强青少年编程教育力度，优化孩子的逻辑思维模式，培养孩子的综合能力，以使青少年在未来发展中更具竞争力，更好地为科技发展做出贡献。

1 研究现状

目前，国内市场推出了许多与儿童编程相关的App 以及编程平台。目前儿童编程行业面临着以下的现状：

绝大多数的儿童编程产品采用开源的Scratch 作为教学内容，只提供课程。儿童编程产品是多基于PC Web 的编程平台，导致绝大部分儿童编程实现需要依赖电脑，做不到即时学习。绝大硬件、软件产品倾向于游戏娱乐，只能达到编程思维启蒙，并不能真正教用户编程开发。并且当今市场上线下、线上编程教学课时费昂贵，用户门槛极高，即使支付了高昂的费用，也未必能达到预期效果[3]。

本文将基于Google 的可视化图形编程语言Blockly 和Scratch 技术，设计的一款可视化编程框架，并提供各种功能的API。同时，为6～12 岁年龄段的青少年提供能够独立完成图形界面App 设计的平台，和免费教程教学，大大降低昂贵的教学成本。孩子们不需要掌握复杂的编程语言和开发知识，只需拖拽已封装好接口的代码块，以一种可视化的方式，在学习编程理论知识同时，又能独立开发出游戏应用、动画电影以及解决实际问题的编程开发，而且可训练编程思维，真正让青少年学会开发程序，体验编程乐趣。

2 系统设计

2.1 系统架构

开发系列模块依照青少年对Blockly 积木接口编程开发掌握度分为“入门级”、“基础级”和“进阶级”三大级别，并提供了“动画编程”、“游戏编程”和“可视化编程”三大系列，图1 展示了整体的系统结构。

图1 系统整体结构图

2.2 动画编程系列

如图2 所示。该系列分为动画教程、动画案例和开发乐园三个模块，提供了用于动画开发的积木块，让青少年可以进行天马行空的动画制作，以实现青少年“入门级”的开发。

图2 动画编程系列结构图

（1）动画教程模块。该模块包括知识笔记和积木教程两个子模块，对动画制作中使用到的积木块进行了详细的介绍，并对动画案例进行了说明。知识笔记使青少年在开发制作中遇到困难时，能够进行详细教程查看。积木教程提供了开发中所用积木块的闯关训练，来练习基础代码块的使用。每一关卡会给出任务，青少年需要选择要使用的积木块完成任务。

（2）动画案例模块。此模块以制作案例的形式向青少年展示在动画制作会达到的一些效果，意在抛砖引玉，激发青少年的创造潜力。该系列提供了猫捉老鼠、男孩回家的动画制作案例。

（3）开发乐园模块。此模块提供所有的代码块供青少年使用。开发将全面应用“运动”、“外观”、“控制”等重要积木块，以鼓励孩子进行头脑风暴，想出有趣的动画短片，真正实现青少年编程从模仿到创新的重要突破。

2.3 游戏编程系列

如图3 所示。该系列分为游戏教程、游戏案例和开发乐园三个模块。该与动画编程类似，但难度提升，更好实现动画到游戏的过渡，以实现“基础级”的开发。

图3 游戏编程系列结构图

（1）游戏教程模块。在原有的基础上加上了游戏制作教程，对游戏制作中使用到的积木块进行了详细的介绍，并对该系列中提供的案例进行了说明。

（2）游戏案例模块。此模块仍将游戏制作效果以案例的形式进行展示，并提供飞机大战、老鼠偷金的游戏制作案例。

（3）开发乐园模块。此模块同样将游戏开发的功能与动画开发部分合并，并提供所有的代码块。意在鼓励孩子想出新的游戏玩法并与实现动画制作相结合，让青少年能制作出想要的游戏与动画效果。

2.4 可视化编程系列

如图4 所示。该系列分为知识学习、知识笔记和编程乐园三个模块，为引导孩子创造出能解决实际问题的小程序。知识学习部分提供语言学习和算法学习知识笔记为可视化编程系列知识的汇总。青少年在有了一定的编程能力后，便可以到编程乐园中，使用逻辑性更强的代码块，进行简单的编程开发。

（1）知识学习模块。该模块分为语言学习和算法学习两部分，以学习多种编程语言和基础算法。语言学习分别提供了多种编程语言的学习JavaScript、Python 等，而算法学习提供了输入、数学、变量、逻辑、循环、数组、函数7 部分知识的学习。每一章节提供了答案提示的帮助，可让青少年对学习情况进行检查。

（2）知识笔记模块。该模块提供了该系列的用到积木块的详细讲解，和算法学习和语言学习中各个关卡的教程。

（3）编程乐园模块。该模块开放了所有代码块接口，并且更加接近于真是的IDE，青少年可根据需要使用Toolbox 中相应功能的代码块，进行拼接和代码执行，并查看运行结果。该模块还为用户提供一个代码保存机制，让编程更加便捷。

图4 可视化编程系列结构图

2.5 App使用指南

除以上三个系列外，我们还会提供相应的平台使用教程，总结代码块接口语法、积木化程序结构与代码块接口应用与定制的方法，帮助青少年更好地应用代码块接口的知识进行编程开发学习。

3 系统实现

3.1 实现概述

（1）技术实现。平台采用了Google 的先进技术可视化编程语言Blockly，其中主要是以网页版的形式运行，运用JavaScript 将可视化代码块转换成可运行的代码并将其运行在Android 端的Webview 上，通过Android 端的接口实现Android 和Webview 间的通信。此外，通过JavaScript 以及Python 实现了可视化编程语言到其他语言的转化。

（2）关键点。关键点在于如何将可视化代码块的拼接转换成实际可以运行的代码，不同的代码块对于格式也有不同的要求，运行顺序也是关键因素。我们采用了JavaScript 将代码块的拼接转换成在网页上可以运行的代码，并且设置代码检错器对于其中拼接明显有错的代码块进行错误提醒。

（3）难点。难点在于如何实现Activity 与Webview的交互，Webview 是用户拼接可视化代码块的地方，用户拼接完成后如何将拼接的代码传送给Activity，以及Activity 收到后如何将运行结果反馈给Webview。我们创建了Webview 与Activity 的Interface，通过这个特殊的Interface，Activity 可以和Webview 顺利进行通信，从而解决该难点。

3.2 动画编程与游戏编程

各系列中包含的具体关卡的判断流程基本一致，下面以动画编程系列中的案例进行展示。图5 是选择关卡界面，图6 是正式操作界面，图7 位教程讲解界面。首先用户选择关卡，进入关卡后会出现对话框提示，用户根据对话框的过关要求进行相应的操作，实现相应的要求，用户实现后点击执行按钮，进行评级，会根据用户的操作给予相应的分数，如果通过就可以解锁下一关。

图5

图6

图7

实现过程：用户拖拽到操作窗的每一个按钮代块都对应着JavaScript 中的一段函数，点击按钮便可控制物体的运动，在按钮块的处理上，需要实现根据按钮块的键值实现相应的移动操作，同时还要根据按钮块的文本信息获取到移动的步数，当一个按钮可以实现上述操作之后，要实现多个按钮之间的连接，连接通过JSON 数据中的顺序进行解析操作。执行代码时，将整个部分整合成一个JSON 文件，通过对JSON 文件中的字段获取，获取到按钮的种类和相应的数目以及执行顺序，在JavaScript 中对这些数据进行处理，例如：通过计数按钮数目来实现判定机制，通过约定的按钮名称来判定当前调用的是哪一个按钮的函数，从而实现按照操作窗的按钮组合和步数实现相应的调用。

3.3 可视化编程

这一模块包括编程学习和代码学习，编程学习是通过ToolBox 向用户提供了逻辑、循环及变量等编程思想的培养。用户可以选择进行代码学习，在已有的逻辑、数学学习上添加代码学习模块。通过对Blockly 块的组合，实现对用户操作的判定，让用户在指导下逐渐培养出编程思维。图8 是编程语言训练模块，现在支持学习多种编程语言包括：JavaScript、Python 等。图9和图10 是Blockly 实现块与编程语言相对应，让用户通过简单的块操作转换实现为相应的代码供用户查看。

图8

图9

实现过程：通过使用Blockly 块，集成到项目中，对用户拖拽的块进行判定，在JavaScript 中进行相应的逻辑判定，实现相应的代码逻辑，并通过Blockly 转化为相应的语言。设计出循序渐进的代码学习方式，让用户在游戏的过程中学习。

图10

3.4 闯关判定机制的处理

（1）判定机制概述。该功能的具体处理流程如图11 所示。

图11 交互处理流程图

该部分使用的是JavaScript 与本地方法的互调。首先为了让Webview 中的JavaScript 调用Android 方法，WebView.getSettings（）获得WebSettings 工具类，该工具类提供了大量的方法来管理Webview 的选项设置，其中setJavaScriptEnabled（true）即可让Webview 中的JavaScript 脚本来调用Android 方法，除此之外，为了把Android 对象暴露给Webview 中的JavaScript 代码，Webview 提供了addJavascriptInterface（Object object,String name）方法，该方法负责把object 对象暴露成JavaScript 中的name 对象。

（2）详细代码流程。本文使用判断星级部分进行举例。首先将当前上下文声明：

之后在使用的显示星数的方法上使用注解，将该方法暴露给JavaScript:

之后在JavaScript 中对每一个教学关卡实现判定机制：

之后将星数通过下述函数回传便可展现出通关星数：

AndroidInterface.showRating（count）;

4 结语

基于Blockly 的青少年可视化编程开发平台，提供了功能丰富的代码块接口，实现了从动画制作到游戏制作再到可视化编程的过渡，可以满足青少年学习编程和使用编程的需要。青少年可以使用它们进行天马行空的开发，不用再拘泥于教程的限制，并且实现了从模仿到创造的学习过程。App 在训练青少年编程思维的同时，还能够激发青少年逻辑思维能力和创造能力，达到寓教于乐的目的。