可视化编程教育随想

前言

之前写了一篇有关apaas/ivx的文章，让我的思路发散到了编程教育，尤其是可视化教育编程方面。不仅因为我是学教育出身，更多的是因为教育是民生基础而编程又是互联网科技的代表。恰巧最近又看了许多华南师范大学焦建利教授对电化教育方面的技术反思文章，遂决定随笔两两记录一下对编程教育、网络学习方面的看法。观点非常主观，若有不同观点不吝赐教。

网络学习的市场潜力在互联网刚兴起时就被嗅探到了，国家当时也花费了很大力气参与其中——精品课程，OJ系统，高校自己开发的学习平台和在线作业系统。但这些在我眼里不过是应试教育的另一种体现罢了，区别只是让学生上课的地点从学校转移到了电脑前，学生可以做小动作、开着音乐或游戏混系统记录的学习时长。即便处于兴趣，也基本浏览课程的第一节，然后打开了其他链接。能驱动在校学生投入精力利用平台学习的最大动力便是学分，这又让我考虑另一个问题：学习的目的和源动力是什么。

入学时第一课老师问我们，你们考研的目的是什么，大家七嘴八舌，有人说为了有高学历好找工作，有人说为学习本身，有人说为了寒暑假，不管因为什么原因，这些目的全部可以抽象为一个概念——需求。需求是经济学的矛盾点之一，价格、资源分配、市场等诸多概念说穿了是对需求的分析与操作，学习便是人对于教育及教育所带来价值的需求。那么能将网络学习的好的产品一定抓住了对其有需求的用户。这些在线学习的潜在用户可能限于地理条件，学习成本等因素的制约，愿意去了解和尝试非课堂式的教学活动。在编程学习领域目前做的比较好的有以下几类：

1. 从零开始的工具网站，这类是我们刚开始决定为自己学习编程的免费入门平台，集成了各大语言的基础教程，部分配合了在线编译工具，带领学习者游走于入门和放弃的交界处。代表有：w3school、runoob；
2. 有从零开始的课程学习，也有进阶的实战课程，学习形式以视频为主，部分配以在线编程工具，学习者可以和教师或相互交流以达到知识内化的目的。优势是资源丰富，视频容易让新人上手；缺点是内容的时效性通常难以保证，视频对能力强的学习者而言效率低。代表有：可汗学院、mooc；
3. 学习门户论坛，这类大家接触的应该就比较多了，经常看技术文的同学一定都有自己的阅读平台和阅读习惯了。这类平台提供的是技术/知识分享服务，通常针对某个要点展开具体的原理分析也有对某一概念/知识点的宏观讲解。优点是针对性强，图文的呈现方式能快速解决问题；缺点是内容的质量难以控制，本身依赖大量的用户的自发行为，若参与度不足难以支持起学习生态。代表有：csdn、掘金、极客论坛；
4. 只提供专有功能的工具平台，这类学习平台通常具有独一无二的功能，用户利用其独特的功能训练自己的专项技能，并能将自己的成果展示分享，这类学习平台针对的用户都是有较强学习意愿，渴望对技能进行精进。代表有:scratch、codepen、codewars

我们今天所讨论的可视化编程就属于第4类，scratch是其中的典型代表。

一、可视化编程

在说可视化编程教育之前，先说一下可视化编程。这个概念其实早就运用到了现实的开发当中，做过ios或android的同学一定对xcode和android studio非常熟悉，在构建页面时为了简化xml的编写可以在预览页拖入元素。我在上一篇介绍过的ivx编辑器则完全依托这种可视化方案，尽量减少对代码的直接编译。这些工具是商业化的产品，旨在为企业和开发者提供更高的开发效率减少成本，但显然其教育因素则体现不出来，学习者如果直接上手使用则没有进一步的导向从而放弃使用。因此专门为教育设计的可视化编程产品便应运而生。

二、可视化编程教育产品

（一）scratch

提到可视化编程教育则必须提到scratch这款产品，如果你从事教育技术行业或互联网教育，多多少少应该对它的有所了解，作为可视化编程教育行业内产品的代表需要单独提出来介绍。

scratch是一款由麻省理工学院开发，针对6-10岁儿童开发，旨在让学习者通过感知学习计算机编译原理的可视化在线学习系统。开发者期望通过学习Scratch，启发和激励用户在愉快的环境下经由操作（如设计交互故事）去学习程序设计、数学和计算知识，同时获得创造性的思考，逻辑编程，和协同工作的体验。———— wiki

下图是scratch的界面：

可以看到左侧对应的事件、监听器、一般方法、控制器等可视组件，拖入到中间的编辑区域就可以像搭积木一样编辑自己的作品，点击整块积木就会运行，运行结果可在右上角体验。积木本身是svg标签，随着用户的操作会拉伸变形，本身功能做的非常好。

随着2019年scratch v3.0版本的上线（编辑系统和页面基于react，2.0基于flash），已经功能的不断扩展，市场便瞄准了这一教育商机。将整套scratch-gui开源库下载下来，稍加改动或直接照搬，将scratch强行加入自己的教学过程来提升办学机构的格调，而是否需要在线编程，是否能将其用到商业目的都没有被机构纳入考虑范围。不过这种粗暴的引入方式却很能抓住二三线城市家长的心，就和投机理财一样，家长在看过scratch的演示后也不会多想这些问题，最多觉得机构的技术有优势，然后盲目跟随编程教育的大流参与其中。

（二）国内产品

接下来给大家举几个生动的例子，为了避免不必要的麻烦，我会用到我的千年老ps技术给机构的图片打码。下面是某教育机构的软件下载页面:

果然，scratch只是噱头之一，这家机构的主打还是一对一直播课程。不仅如此，当我进入官网的时候客服真实敬业，不停问我孩子多大了，当我试探性的问了几个scratch版本及版权相关问题的时候，他又将话题转移到了孩子多大的问题。对自己产品捂得这么紧，在互联网行业意味着什么不言而喻。最后吐槽一下下载软件里还有vscode，你交的课程够硬核的。

再来说一个国内正向的例子，编程猫是针对10岁以上儿童的一款python学习系统，点击链接后未登录状态下也可以直接进入编辑器页面。正如之前提到的ivx编辑器，敢于把自家的核心工具直接暴露在外的一定是主打项目并且有相当的不可复制性，不怕你看到之后偷走。编程猫的整体界面入下图：

不得不说界面的整体布局和功能还是沿用了scratch的大框架，创新点在于对组件的优化更加适配python语言的学习，可视组件部分的svg重画并且全中文支持，点击代码模式可切换积木对应的python语言，这一点与blockpy类似，对于学习而言有很大帮助：

其平台配有相关的视频课程，推荐想让孩子学习编程的家长去体验了解一下。

（三）国外产品

再将视野转到海外，不得不佩服人家在创意领域确实比我们高出不少——scratch目前支持视频源接口、乐高接口，除了scratch这种偏学院派的产品，还有如极客战纪这样的编程类游戏，针对python的blockpy编辑器。

blockpy是面向高年龄向青少年的针对性很强的学习系统，不再主打对界面的呈现效果，预览到的运行结果也全变成了console的打印结果。组件部分有诸如variable、input、value这种python的专业组件，界面的整体风格也更加严肃，同样有组件转代码预览的功能。除此之外他还具有ivx这种商业可视化开发工具都不具备的大数据导入功能，这已经将学习的内容与前沿技术联系了起来，其界面如下图：

大家注意我用红圈标出来的地方是他们的一个“特色”，下方组件扣的不瓷实有条缝，由于网上有开源代码所以大家都可以用到编辑器功能，因此只要你看到国内积木拼接部分出现这种情况，基本用到就是这套开源代码。

最后给大家推荐一款编程游戏——human resourse（ios store ￥30）。这款游戏内部采用的是类似汇编的语言去控制小人搬动箱子，如何利用给定的组件让小人工作的最有效率是玩家的目标。有意思的是随着关卡的不断发展，我们主人公的发量也愈发堪忧，真的是很好地映射了程序员这一行业的生理特征。

三、可视化编程教育的问题

（一）资源的浪费

正如之前提到的，scratch面向低领儿童，旨在训练孩子的逻辑思维、数学思维、判断力等，不管对应人类的发展或个人的认知体系建设都很有意义。但如blockpy这样的针对某一语言的基础学习或兴趣学习，其造成了一定的资源浪费：学生学习使用可视化积木，同时必须对应相应的编程语言，当掌握了语言技巧后学习者会抛弃编辑器系统转而投向更专业的学习方式，那么原本平台工具仅发挥了入门级的作用，这对于工具本身来说是一种浪费。

对于学习者而言，如果在一段时间内学会了使用编辑器的能力，但为了现实需求和工具的功能限制不得不去进行专业技能训练，造成了学习使用工具过程中的效能浪费。学习者不能用可视化工具实现开发的需求，仅能得到相应的逻辑训练，而习得的工具使用的能力只能随时间流逝遗忘。

目前推出的可视化编程工具和可视化编程学习工具如果能做到一个结合，将大大提高学习者的学习效能，整个过程可以类似scratch锻炼逻辑能力->blockpy学习变量等编程概念->ivx专门的商业开发，如果有机构能建立这一整套体系，其影响力相当于发布一门新的编程语言。

（二）编程教育越发表层话

以下援引焦建立教授《儿童可视化编程教育随想》的内容

从 BASIC，到FORTRAIN, C，C++,这一路走来。随着计算机图形界面的普及，尤其是可视化编程语言的兴起和流行，人们开始从枯燥地编写代码，转化成了可视化的、模块化的编程学习。程序教学开始逐渐地由纯粹代码的编程（Text-Based Programming）向可视化的模块化拖拽式编程（Drag and Drop Programming）转变。由此，涌现出了一大批的可视化编程的工具，从当年的LOGO语言，到现在异常流行的Scratch，再到 Tinker，BYOB/Snap!、Pocket Code、Blockly、Hopscotch、GameSalad、Code.org、Touch Develop、MIT App Inventor、Alice、BeetleBlocks、Starlogo-TNG我们几乎可以列举出数百个可视化编程的应用。

于是，一个新的问题出现了。当我们摆脱了纯粹代码编写的码农式编程学习，开始更多地依赖可视化的、模块化的、甚至傻瓜化的编程的时候，一方面使得编程成了四岁以上的每一个孩子都可以学习的技能，在机器人、创客教育、STEAM的热潮下，使得编程教育再度流行起来了；另一方面，这种发展态势在提升了编程学习的趣味性和低门槛的同时，是不是也使得我们的编程教育走向了一种更加表层、肤浅的道路？

编程思维的逻辑训练也好，对某种语言的可视化学习也罢，其内容的深度和广度都及其有限，当学习者学习水平不断提高，现有内容便难以支撑后续高阶的学习。比如<可视化编程+人工智能>、<可视化编程+大数据>等高端技术的可视化教育研究依然尚待开拓。

一方面机构渴望利用可视化教育工具立刻从市场中赚取利润，另一方面又不愿意花费大的周期和资金去自研或扩展工具。因此市面上的现有教育工具基本都是依托开源项目，即便在教学策略上有新的idea也不会投入实施。不仅在教育届，整个互联网届都是如此，像编程猫、ivx的团队在当今浮躁的社会值得令人敬佩。

思考

在我们上初中的时候看到有同学去买来“网页三剑客”的光盘，询问后知道要安装、打底、制作，那时候框架根本没有出现，js还是处于无人问津的状态。我表弟也在小的时候被计算机老师推荐了一本很厚的javaEE，对于那个年代初中生要搭建环境开发一张jsp网页也着实需要费一番功夫。后来进入大学学了计算机相关课程，再后来为了提升自己又通过互联网上的各种资源了解新的编程理念与思想。

今天知识壁垒被搜索引擎削减了很多，但仿佛行业的创新力和想象力反而下降了。大多人只会一味追随科技热点，资本家满嘴提到的是他从别处听说的概念并考虑怎么变现；从业者翻看新技术的文档并跟从学习却缺乏思考。

• 可视化编程+教育——scratch；
• 区块链技术+证书颁发——MIT学位证书（麻省团队开发并投入使用）；
• 人工智能+仿人类机器人——google运动智能；

希望我们的技术工作者也能有更多的想象力。