基于Web的少儿在线编程课堂研究和实现

黄志文

关键词：在线编程；Python；Skulpt；实时互动

1引言

面向K12的编程教育源于2013年美国推动的编程1小时活动，自2016年我国针对中小学编程教育的实践和研究开始起步，随着2017年《新一代人工智能发展规划》出台，少儿编程教育在国内进入快速发展期。作为少儿编程商业模式之一的在线1对1，因其独特的业务模式，也受到资本的追捧。与成人学习编程不同，少儿编程的教学体系主要包括3类编程语言，即Scratch，Python和C++。

Scratch是一种基于积木块的高级可视化编程语言和网站，也是主要针对儿童编程的教育工具，非常适合零基础的少儿学习。与大多数语言一样，Python编程语言是基于纯文本的．这对年轻的学习者来说可能会很无聊。视觉工具可以是重要的教育资源。Python图形化模块Turtle，即海龟图形是向孩子介绍编程的一种流行方式。它是由Wally Feurzeig，SeymourPapert和Cynthia Solomon在1967年开发的原始Logo編程语言的一部分。C++是一种功能强大的高级通用编程语言，并作为C编程语言的扩展。标准模板库（STL）是C++编程语言的库，其提供了许多有用的算法和容器o C++是信息学竞赛的主要编程语言。本文重点研究基于网页的少儿编程在线课堂，以及Python图形化模块Tume的实时互动解决方案。

2少儿在线编程教育平台现状

在线编程课堂的实时互动，目前主流的实现方式是桌面共享和远程控制，通过安装客户端，教师授权学生远程控制自己的桌面进行编程教学，或者学生共享桌面给教师查看编程结果。桌面共享和远程控制的方式，其优势是适用于所有类型的在线编程课堂，一次性投入，无需二次定制。但这种方式有以下缺点。

（1）不同平台需要不同的客户端，不同平台的客户端，功能和性能上可能存在差异，给用户的安装使用带来困扰。

（2）对用户的设备性能和网络条件要求较高，包括操作系统的最低版本要求、CPU、内存等硬件能力的要求等。

（3）被控制端也存在一些安全隐患。用户计算机在被远程控制的情况下，可能造成本地资源的破坏或者病毒植入。

另一种方式是通过信令进行实时同步，信令控制的优势是轻量，对用户设备性能和网络条件要求比较低。缺点是需要对每一种编程语言进行定制，比如对于Python和C++等代码编辑型，需要同步代码编辑区和运行结果区的文本，包括代码的增加、删除、选择，光标位置，区域滚动等，对于Scratch．需要同步积木块的选择、拖动、备注等，保证同步双方如同操控一个屏幕一样。基于网页的在线编程课堂则更进一步，免安装，即开即用，最大可能地降低了用户的使用门槛，不论教师还是学生，都可以将精力集中在编程教学上。

3基于网页的在线编程课堂的核心模块

基于网页的在线编程课堂，主要包含4个核心模块：（1）实时音视频模块，通过教师和学生之间的音视频互动，打通教学中视觉和听觉的障碍，再辅助表情识别、姿态识别等学习行为分析，与线下课堂相比，更能提高对学习效果的分析和检验能力；（2）代码编辑模块，基本功能与代码编辑器客户端类似，包括不同编程语言的语法高亮、语法错误提示、快捷代码提示等；（3）运行结果显示组件，可以显示图形结果，也可以显示文本结果，以及编译错误或者运行错误提示；（4）聊天组件，对于在线1对多的教学场景，聊天功能不可或缺，可以弥补多人通话时音质下降严重的问题。

3.1网页端的实时音视频通信

WebRTC是一种HTML5规范，可用于浏览器和设备之间直接添加实时流媒体通信，具体如图1所不。WebRTC作为实时通信的一种实现方案，有以下优势：（1） WebRTC是一个开源项目，可以完全免费用于商业或私人用途；（2）它适用于所有现代浏览器；（3） WebRTC不仅限于浏览器，也可用于移动应用程序；（4） WebRTC不仅适用于语音或视频通话，还可以使用它来构建群呼服务、添加录音或仅用于数据传输，基于WebRTC实现在线课堂中的音视频通信，极大降低了接入门槛和开发成本。

3.2Python Turtle代码编辑器

Python是一个成熟且简单易学、易用的编程语言，拥有良好的跨平台特性，在Python中写的代码在通过其他语言重新编译时会显得特别容易。除此之外，在人工智能、数据分析等领域，Python具有天生的优势，也符合少儿编程的面向未来的意义。

Turtle是Python语言中内置的作图模块。Python Turtle是向孩子和零基础编程的人介绍编程和计算机的绝佳方式，而且很有趣。使用Python Turtle方法在虚拟画布上生成形状、图形和其他图片。在控制台上创建的海龟或用于绘图的显示窗口（类似画布）好像一支虚拟笔，通过乌龟后退功能和乌龟上、下、左、右等功能，沿着画布移动乌龟，随着其运动绘制图案。

代码编辑组件，需要具备的特性有：支持多种编程语言的语法高亮，使代码更加容易阅读；实时语法检查，在代码编译运行前有修改错误的机会；提供丰富的API，可以侦测到代码内容的变更、选择、光标位置、代码区滚动等事件，通过参数设置代码内容、选择范围、光标位置、代码可视区域提供方法。

Ace是一个使用JavaScript编写的独立代码编辑器。Ace的目标是创建一个基于浏览器的编辑器，以匹配和扩展现有本地编辑器（如TextMate，Vim或Eclipse）的特性、可用性和性能。Ace可以很容易地集成到任何网页或JavaScript应用程序中。Ace是作为Cloud9 IDE的主要编辑器和Mozilla Skywriter（ Bespin）项目的继任者而开发的。Ace支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。Ace的特性有：语法高亮；自动缩进和伸出；可选命令行；处理大型文档（处理数十万行而没有问题）；完全可自定义的键绑定，包括VI和Emacs模式；主题（可以导人TextMate主题）；搜索并替换为正则表达式；突出显示匹配的括号：在软标签和真实标签之间切换：显示隐藏的字符；突出显示所选单词；多光标选择；列选择和编辑模式。

3.3运行结果显示组件

Python Turtle在浏览器中的编译和运行，需要满足两个条件：（1）能够实时编译Python Turtle代码。浏览器本身是不支持Python代码的编译，需要提供一个实时的Python编译器来处理。（2）Python Turtle的运行结果通常是可视化图形，需要利用浏览器内置的canvas组件来显示。

在浏览器中运行Python，目前有6个开源解决方案可供选择，如图2所示。

（1） Transcrypt，提供了一个命令行工具，可以运行该工具将Python脚本编译为JavaScript文件。

（2） Brython，允许与编写JavaScript完全相同的方式在脚本标签中编写Pythono与Transcrypt -样，它具有一个document用于与DOM交互的对象。

（3）Skulpt，在运行时将Python编译为JavaScript。这意味着直到页面加载后才需要编写Python。它不需要将请求发送回某处服务器上的Python解释器，而是实际上直接在本地浏览器上运行Python代码。Skulpt最初是为生产需要在网页上进行实时Python会话的教育工具而创建的。尽管Transcrypt和Brython被设计为JavaScript的直接替代品，但Skulpt更适合于在Web上构建Python编程环境。

（4） PyPy.js，是Python解释器的JavaScript实现。开发人员使用了一个名为emscripten的C到JavaScript编译器，并将其运行在PyPy的源代码上。结果是PyPy，但可以在用户的浏览器中运行。其优点：这是一个非常忠实的Python实现，并且代码可以快速执行。其缺点：嵌入PyPy.js的网页包含一个完整的Python解释器，因此随着网页的发展，它相当大（以兆字节为单位）。

（5） Batavia有点像PyPy.js，但是它运行字节码而不是Python。

（6） Mozilla的Pyodide于2019年4月发布。它解决了一个难题：在浏览器中使用Python进行交互式数据可视化。由于NumPy，SciPy，Matplotlib和Pandas等库，Python已成为数据科学中最喜欢的语言。已经有了Jupyter Notebooks．这是在线呈现数据管道的好方法，但是它们必须托管在某处的服务器上。

如果将数据处理放在用户的计算机上，则它们可以避免往返服务器的麻烦，因此实时可视化功能更加强大。针对在线编程课堂实时互动的需求，Skulpt是最佳选择。

对6个开源库进行比较，其具体内容如表1所列。

3.4信令通信

信令同步服务组件，需要满足以下需求：支持点对点的信令双向通信；支持广播通信；支持存储、离线消息和历史消息；支持信令协议的自定义。

XMPP（Extensible Messageing and PresenceProtocol）可扩展消息与存在协议，XMPP （Jabber）是一个开放的即时消息通信协议，从1999年就开始开发。该协议的所有技术特性都由XEP描述。XMPP相对于所有其他即时消息传递系统的主要优势在于XMPP是开放的、免费的，不属于或受单一公司控制。它也是联合（分布式）的，因此，任何人都可以运行自己的消息服务器。如果需要，服务器可以关闭（即不允许与其他服务器通信）或完全联合：允许跨任何现有服务器（如电子邮件）进行通信。XMPP具有许多内置的隐私和安全功能，可使用经过广泛审核的标准算法和软件组件实现强大的加密。

Ejabberd是一个用Erlang/OTP写的开源即时通信服务器，其是跨平台、分布式、容错且基于开放标准的实时通信系统。Ejabberd是一个功能丰富的XMPP服务器，同时适合小规模和超大规模部署，无论是否需要可伸缩性。

Strophe.js是一个用于JavaScript客户端的XMPP库。其主要目的是启用在任何浏览器中运行的基于Web的实时XMPP应用程序。

3.5系统集成

在线课堂的系统架构如图3所示，通过集成各个组件，可以快速搭建一个在线课堂，提供Python Turtle的实时互动教学。运行中的课堂界面如图4所示。

4结束语

在一些相对成熟的开源技术和免费商业组件的基础上，通过对相关组件进行二次开发和功能扩展，可以快速搭建一套用于少儿编程的Web在线课堂，通过实时音视频、聊天和代码同步等功能，可以基本满足少儿在线编程教学的需求。