面向创客教育普及的Mixly图形化编程工具开发*

傅 骞 罗开亮 陈 露

（北京师范大学 教育技术学院，北京 100875）

面向创客教育普及的Mixly图形化编程工具开发*

傅 骞 罗开亮 陈 露

（北京师范大学 教育技术学院，北京 100875）

创意电子是创客教育的重要载体，但由于受技术门槛的限制，它的课程开设给教师带来了极大的挑战。文章首先对现有的创意电子图形化编程工具进行了深入分析对比，然后描述了一个新的图形化编程系统Mixly（米思齐）的实现。具体来说，Mixly包括软件的系统架构和关键技术的实现两部分内容，并在最后通过用户的反馈数据验证了该软件的价值。

创客教育；Arduino；图形化编程；Mixly

一 问题的提出

随着社会生产力的不断发展，重复性的机械劳动将更多地被机器所取代，未来社会更需要创新型人才；与此同时，社会物质水平不断提高，人类在物质得到满足的条件下将越来越多地追求精神层面的满足。在这样的大背景下，以激发学生“享受创新与分享的快乐”为目标的“创客教育”在全球迅速流行开来，在我国也得到了迅猛的发展[1]。

为了实现让学生“享受创新与分享的快乐”这一目标，众多研究者设计了多种创客教育的开展形式，如基于Scratch的创意编程、基于Arduino的创意电子、基于AppInventor的创意APP、基于3D打印的创意设计以及各类机器人相关课程等。其中，创意电子因课程开设简单、容易引起兴趣、方便激发创新和易于成果展示等特点，成为了当前创客教育的主流。创意电子课程活动一般由物理搭建和程序编写两部分组成，开设年级横跨小学三年级至高中二年级。在当前的技术条件下，物理搭建已非课程的难点，而程序编写部分往往因其过于复杂容易使学生产生认知负荷，从而影响创意的激发与实现。因此，创客教育中的创意电子课程需要更好的编程工具。

二 当前研究现状

为了给创意电子课程提供更好的编程工具，各类研究者、开源团体和商业公司都付出了大量的努力。当前创意电子课程均以Arduino为基础，所以目前的这些编程工具都为Arduino编程服务。创意电子课程主要分为基于文本的课程和基于图形的课程两大类，前者有Arduino IDE、SMeshStudio等，后者有Ardublock、BlocklyDuino等。创客教育关注的是技术的整合创新而非知识的简单复制，所以创客教育强调学生学习使用基于图形的编程方式，即图形化编程，而非学习编程语法。随着研究的深入，教育工作者认识到编程的核心是逻辑和思维、是想象力和创造力，而这正是图形化编程的核心思想，也是未来非专业人士编程的主流。当前已经出现不少面向Arduino开发的主流编程工具，主要有以下三类：

1 Ardublock

Ardublock[2]是Arduino官方编程环境认可的第三方软件，基于Java开发，必须依附在Arduino软件下运行。区别于Arduino的文本式编程环境，Ardublock以搭建图形化积木的方式编程。这种方式会使编程的可视化和交互性加强，并且编程门槛降低，使没有编程经验的人也可以尝试给Arduino控制器编写程序。

Ardublock是目前功能比较完善的一款Arduino图形化编程工具，不仅集成了逻辑控制、引脚操作、数学运算、变量定义、通讯等基本功能，也包括第三方公司的传感器拓展模块。如图1所示，这是可调灯的Ardublock图形化代码，可以使灯的亮度随着用户按钮的转动而变化。

图1 Ardublock界面

2 BlocklyDuino

BlocklyDuino[3]是一款基于网页的Arduino图形化编程工具，基于HTML 5技术开发，底层使用Google的Blockly图形化编程框架，同样需要使用官方的Arduino IDE软件。和Ardublock类似，它也是以图形化积木搭建的方式编程，且支持使用浏览器编程。但当需要把编好的程序上载到Arduino开发板上时，用户还必须运行一个Web服务器来辅助完成此工作，所以使用起来并不是很方便。

目前，BlocklyDuino功能简单，仅包含基本的逻辑控制、数学运算、文本处理、变量定义、函数定义、管脚控制等，也加入了一些Grove传感器模块，但远没有Ardublock丰富，缺乏对于Arduino编程必须的数学映射函数、三角函数等模块，不支持变量的数据类型，不支持中文，因此其应用的范围有限。如图2所示，这是可调灯的BlocklyDuino图形化代码，与图1实现的功能相同，即灯的亮度可随着用户按钮的转动而变化。

图2 BlocklyDuino界面

3 mBlock

Scratch是当前最完善的图形化编程工具。Scratch在设计之初并没有考虑与硬件结合的问题，随着电脑软件有感知环境和控制硬件的需求，S4A的技术随之而生，其本质是让硬件设备和Scratch程序之间快速地通过串口进行数据交换，从而达到与Arduino交互的效果。但这本质上并不是对Arduino编程，所以一旦离开了Scratch，板子便停止工作。为了让Scratch更好地控制Arduino，并对Arduino实现真正意义上的编程，很多团体都对Scratch进行了改进，比较有代表性的是mBlock[4]——它是Scratch的非官方改进版本，由国人开发，并同样基于Flash客户端技术开发，支持中文版，为大部分国人用户提供了便利。

mBlock 2.2是最新版本，既可以在类似于S4A的串口交互模式下工作，也可以实现程序的编译上载，且支持Arduino的多块主控板，系统功能比较强大。但因Scratch扩展的复杂性，在Arduino硬件控制功能的支持上还不是很完善，只能实现最基本的管脚控制功能，也无任何第三方扩展模块可用。如图3所示，这是mBlock版本的可调灯代码。

图3 mBlock界面

4 总结

上述三个Arduino图形化编程工具虽各具特色，但仍无法满足实际课程的需要。

（1）编程功能不完善。图形化编程工具的定位是替换原有复杂的文本编程方式，但上述3个软件都无法较好地满足此要求，这就限制了用户创意的发挥和实现。其中亟待增加的功能是硬件中断的处理、函数定义的引入及使用、必备数学函数的加入、数据类型的引入和使用等。

（2）系统扩展性不强。上述3个软件都没有考虑系统的可扩展性，不支持用户自定义新的模块供后期使用，因此将限制用户创意的发挥，工作难以复用，也难以完成复杂的创意应用。

（3）不便于二次开发。上述3个软件都属于开源免费软件，它们的生命力与其二次开发能力密切相关。Ardublock基于OpenBlocks框架开发，mBlock基于Adobe Air技术开发，这两类技术的使用群体有限，从而限制了它们的二次开发范围。BlocklyDuino采用Google的Blockly框架，全部采用JavaScript语言实现，所以开发群体较大，具有较好的发展前途；但它须用Python实现Web与Arduino IDE的交互，因此开发难度依然较大。

三 Mixly系统架构

综上所述，创客教育需要更好的图形化编程工具，Mixly（米思齐）因此应运而生。考虑到系统开发的方便性、扩展性以及用户使用的简单性，Mixly在系统架构上使用混合架构模式，即客户端应用和网页应用相结合的模式：在图形化编程框架上采用Blockly核心的网页结构；在技术上则采用基于Java的客户端编程技术，以便于用户上载编译。Mixly系统架构如图4所示。

图4 Mixly系统架构

Mixly基于Google的Blockly[5]图形化编程框架进行了二次开发，在核心层完成了变量类型定义和模块的生成功能，然后针对Arduino硬件编程的需要加入大量的硬件控制和传感器、执行器相关的交互功能，以达到图形化编程完美操控Arduino的效果；再使用Java的JavaFX技术，在客户端显示Blockly网页并实现网页和客户端功能的交互。当用户完成基于网页的图形化编程后，客户端将其转换成Arduino代码，并调用Arduino官方IDE完成程序的编译和上传功能。

Mixly系统架构综合了网页开发和Java客户端开发技术，在开发上同时享受网页开发的方便性和客户端开发的简单性，在应用上同时享受网页应用的灵活性和客户端应用的强大性，从而使Mixly的图形化编程模块随同用户主控板选择的变化而变化成为可能，并使程序的编译和上传更加方便。随着Mixly JavaFX部分功能的完善，日后Mixly的改进工作将全部集中于网页，而网页无需编译就可以直接使用，所以基于该架构的Mixly的后续升级将会变得非常方便。Mixly的主界面如图5所示，这是Mixly的可调灯代码，但使用了按键调光方式。

图5 Mixly主界面

四 Mixly关键技术的实现

为了完成Mixly整体的开发，本研究团队对其中的图形化编程呈现、网页与客户端应用的融合、Arduino数据类型实现、可扩展模块管理这四个关键技术进行了重点研究。

1 图形化编程呈现

为了实现普适的图形化编程效果，Mixly采用了Google的Blockly图形化编程框架。Blockly 是Google公司在2012年发布的完全可视化编程语言，类似于麻省理工学院的Scratch，用户可以通过搭积木的方式用一块块图形模块拼出应用程序。每个图形模块是一个代码块，用户可将它们拼接起来，创造出简单功能，然后将一个个简单功能进行组合，构建出一个复杂程序。

Blockly是一个免费开源程序，它的定位就是让开发人员进行二次开发从而满足不同领域的需要，包括教育工具的开发、机器人应用的开发等，这刚好符合了Mixly的需求。Blockly的核心功能是提供图形模块的定义机制和图形模块对应代码块的生成方式，使开发人员可以很方便地基于Blockly创建自己的模块，并把想生成的代码与图形模块进行绑定。

模块的定义和代码的生成是使用Blockly生成自定义模块最关键的两步。其中，模块的定义就是定义模块的长相，使用“Blockly.Blocks['模块名称']”来定义；代码的生成就是定义图形模块所对应的代码块，是图形模块的真面目，使用“Blockly.Arduino.模块名称”来定义。由于Blockly的简单可行，Mixly所有图形模块的呈现与代码的生成工作便交给了Blockly，因此可以说Blockly 是Mixly软件的核心与基础、是Mixly图形化编程的关键。

2 网页与客户端应用的融合

由于Blockly的所有代码都使用JavaScript脚本语言编写，其生成的图形化模块只能在网页中运行，而Arduino所使用的编程语言是基于C/C++的，Arduino控制器要运行程序需要经过代码的编译和上传两个过程，因此，如果通过浏览器编程，需要搭建Web服务器来进行编译和上传。但搭建服务器对普通用户来说过于繁杂，故用户更倾向于使用完全绿色免安装的程序，这就要求Mixly必须是一个本地应用。基于此，Mixly引入了JavaFX技术来实现网页及客户端应用的融合。

JavaFX完全基于Java语言，具有很好的跨平台性。最重要的是，JavaFX在开发互联网应用程序上有独特的优势，可以很好地将Blockly整合到本地化应用中。有了JavaFX，Mixly便可以在本地化的应用中通过JavaFX.scene.web.WebView类内嵌一个Web浏览器，用于呈现Blockly的图形化功能，同时JavaFX的JavaFX.scene.web.WebEngine类可以很好地与JavaScript进行交互。此外，由于JavaFX是基于Java的，用户能够利用Java对生成的C/C++代码进行编译和上传，这样就很好地达到了本地化应用与Blockly的融合。

3 Arduino数据类型实现

Blockly本身并没有数据类型的概念，所以官方的Blockly只能生成JavaScript、Python之类的无数据类型语言。但Arduino程序是建立在C/C++语言基础之上的，是强类型语言，因此Mixly必须在底层加入数据类型定义功能。

多种变量类型的支持乃建立在Blockly源码的基础上。Blockly源码原本只支持一种类型的变量，但Mixly在其基础上进行了修改和升级，使其能够支持更多类型的变量。具体来说，一方面需要修改Blockly.Blocks['variables_declare']块，以增加下拉列表方式表示的数据类型：

this.appendTitle(new Blockly.FieldDropdown([['long','long'],['float','float'],…]),"TYPE")

另一方面需要相应的Blockly.Arduino.variables_declare函数，以实现数据类型的获取：

var dropdown_type = this.getTitleValue('TYPE');

Blockly.Arduino.variableTypes_[varName] = dropdown_type;

经过上述改进，Mixly可以支持整数、小数、布尔、字符串这4种类型，这使得Mixly的功能比其它Arduino图形化软件更强大，成为了目前Arduino图形化编程工具中功能最全的软件。

4 可扩展模块管理

为了让Mixly用户更好地体现自己的价值，实现工作共享，本研究团队在Mixly中加入了可扩展模块管理功能，体现出一定的生态性，使软件变得开放和自由。该功能具体体现在用户可以编写自己的库，进行“导出库”和“导入库”操作，使用户可以编写自己的图形模块并整合到软件中去。

本研究采用动态改变JavaScript的方法实现生态性。在程序启动时，系统会自动获取用户自定义的所有库文件，读取库文件中的数据，并将数据存入到.js文件中，以达到持久化的目的，使软件启动即可看到自定义的库。

五 应用评价

Mixly初始版本开发完成后，先后在新疆生产建设兵团第二师华山中学、黑龙江省兰西县崇文实验学校、北京市石景山区杨庄中学、河南温县及广东佛山等地投入使用。为了进一步调研用户的体验情况，以便为后期改进设计提供建设性的意见，本研究随机选取13位学习者作为研究对象进行问卷调查和访谈，且实验过程中学习者全程使用Mixly作为编程工具开展学习活动。

表1 学习者对Mmixly的评价信息统计表

学习活动开始之前，本研究对学习者进行了前测调研，通过问卷的形式调查学习者是否曾接触过编程课程或者编程软件，以观察学习者在使用的过程中是否存在一定的认知负荷差异。结果显示，有11名学习者曾接触过编程课程、9名学习者曾接触过其它编程软件，这些编程软件主要包含C语言、Borlandc、Scratch等。学习活动结束后，从两个方面对13位学习者进行用户体验调查：一是学习者对Mixly的整体评价，二是学习者对Mixly的界面、模块、参数等方面的体验评价。所得调查结果如表1所示。

六 总结与展望

Mixly作为一个开源免费软件，现已发布至0.96版，且还在持续开发中，所有用户都可以从创客教育实验室（http://maker.bnu.edu.cn）处免费下载使用。从当前创客教育群体的反应来看，效果相当不错。Mixly的使用人数正在逐步增加，其中既有中小学教师和学生，也有大学教师和学生。大家一致认为，Mixly的出现大大降低了创客教育相关课程的开课门槛，激发了学生更多的创意与分享热情。相信在大家的共同努力下，Mixly将会成为业界最好用且最流行的Arduino图形化编程工具，并为创客教育的发展作出应有的贡献。

[1]傅骞,王辞晓.当创客遇上STEAM教育[J].现代教育技术,2014,(10):37-42.

[2]陈有志.ArduBlock:物理世界与虚拟世界的桥梁[J].中国信息技术教育,2013,(12):76-78.

[3]BlocklyDuino.BlocklyDuino is a web-based visual programming editor for arduino[EB/OL].

[4]MakeBlock.Using scratch-style coding to program arduino robots inspired by scratch[EB/OL].

[5]Google.Blockly is a library for building visual programming editors[EB/OL].

Development of a Graphical Programming Tool Named Mixly for Popular Maker Education

FU Qian LUO Kai-liang CHEN Lu
（School of Education Technolog,Beijing Normal University,Beijing,China 100875)

Although Arduino is the important media of maker education,the course setting of Arduino poses great challenge to teachers duing to technical threshold limitation.After analyzing and comparing the existing graphic programming tools for Arduino deeply,a new graphical programming system name Mixly was described here.The value of Mixly that were constituted by the system framework and key technologies implementation was verified by the users’ feedback data.

maker education; Arduino; graphical programming; Mixly

小米

G40-057

A 【论文编号】1009—8097（2016）01—0120—07

10.3969/j.issn.1009-8097.2016.01.018

本文受北京市教育科学“十二五”规划2015年度课题“面向北京市中小学创客教育的教学体系研究——以创意电子教育为例”(项目编号：CJA15234)资助。

傅骞，副教授，博士，研究方向为物联网技术及教育应用、创客教育支持生态建设，邮箱为fredqian@bnu.edu.cn。

2015年7月31日