基于Web的少兒在線編程課堂研究和實(shí)現(xiàn)

黃志文

關(guān)鍵詞：在線編程；Python；Skulpt；實(shí)時(shí)互動(dòng)

1引言

面向K12的編程教育源于2013年美國推動(dòng)的編程1小時(shí)活動(dòng)，自2016年我國針對(duì)中小學(xué)編程教育的實(shí)踐和研究開始起步，隨著2017年《新一代人工智能發(fā)展規(guī)劃》出臺(tái)，少兒編程教育在國內(nèi)進(jìn)入快速發(fā)展期。作為少兒編程商業(yè)模式之一的在線1對(duì)1，因其獨(dú)特的業(yè)務(wù)模式，也受到資本的追捧。與成人學(xué)習(xí)編程不同，少兒編程的教學(xué)體系主要包括3類編程語言，即Scratch，Python和C++。

Scratch是一種基于積木塊的高級(jí)可視化編程語言和網(wǎng)站，也是主要針對(duì)兒童編程的教育工具，非常適合零基礎(chǔ)的少兒學(xué)習(xí)。與大多數(shù)語言一樣，Python編程語言是基于純文本的．這對(duì)年輕的學(xué)習(xí)者來說可能會(huì)很無聊。視覺工具可以是重要的教育資源。Python圖形化模塊Turtle，即海龜圖形是向孩子介紹編程的一種流行方式。它是由Wally Feurzeig，SeymourPapert和Cynthia Solomon在1967年開發(fā)的原始Logo編程語言的一部分。C++是一種功能強(qiáng)大的高級(jí)通用編程語言，并作為C編程語言的擴(kuò)展。標(biāo)準(zhǔn)模板庫（STL）是C++編程語言的庫，其提供了許多有用的算法和容器o C++是信息學(xué)競(jìng)賽的主要編程語言。本文重點(diǎn)研究基于網(wǎng)頁的少兒編程在線課堂，以及Python圖形化模塊Tume的實(shí)時(shí)互動(dòng)解決方案。

2少兒在線編程教育平臺(tái)現(xiàn)狀

在線編程課堂的實(shí)時(shí)互動(dòng)，目前主流的實(shí)現(xiàn)方式是桌面共享和遠(yuǎn)程控制，通過安裝客戶端，教師授權(quán)學(xué)生遠(yuǎn)程控制自己的桌面進(jìn)行編程教學(xué)，或者學(xué)生共享桌面給教師查看編程結(jié)果。桌面共享和遠(yuǎn)程控制的方式，其優(yōu)勢(shì)是適用于所有類型的在線編程課堂，一次性投入，無需二次定制。但這種方式有以下缺點(diǎn)。

（1）不同平臺(tái)需要不同的客戶端，不同平臺(tái)的客戶端，功能和性能上可能存在差異，給用戶的安裝使用帶來困擾。

（2）對(duì)用戶的設(shè)備性能和網(wǎng)絡(luò)條件要求較高，包括操作系統(tǒng)的最低版本要求、CPU、內(nèi)存等硬件能力的要求等。

（3）被控制端也存在一些安全隱患。用戶計(jì)算機(jī)在被遠(yuǎn)程控制的情況下，可能造成本地資源的破壞或者病毒植入。

另一種方式是通過信令進(jìn)行實(shí)時(shí)同步，信令控制的優(yōu)勢(shì)是輕量，對(duì)用戶設(shè)備性能和網(wǎng)絡(luò)條件要求比較低。缺點(diǎn)是需要對(duì)每一種編程語言進(jìn)行定制，比如對(duì)于Python和C++等代碼編輯型，需要同步代碼編輯區(qū)和運(yùn)行結(jié)果區(qū)的文本，包括代碼的增加、刪除、選擇，光標(biāo)位置，區(qū)域滾動(dòng)等，對(duì)于Scratch．需要同步積木塊的選擇、拖動(dòng)、備注等，保證同步雙方如同操控一個(gè)屏幕一樣。基于網(wǎng)頁的在線編程課堂則更進(jìn)一步，免安裝，即開即用，最大可能地降低了用戶的使用門檻，不論教師還是學(xué)生，都可以將精力集中在編程教學(xué)上。

3基于網(wǎng)頁的在線編程課堂的核心模塊

基于網(wǎng)頁的在線編程課堂，主要包含4個(gè)核心模塊：（1）實(shí)時(shí)音視頻模塊，通過教師和學(xué)生之間的音視頻互動(dòng)，打通教學(xué)中視覺和聽覺的障礙，再輔助表情識(shí)別、姿態(tài)識(shí)別等學(xué)習(xí)行為分析，與線下課堂相比，更能提高對(duì)學(xué)習(xí)效果的分析和檢驗(yàn)?zāi)芰Γ唬?）代碼編輯模塊，基本功能與代碼編輯器客戶端類似，包括不同編程語言的語法高亮、語法錯(cuò)誤提示、快捷代碼提示等；（3）運(yùn)行結(jié)果顯示組件，可以顯示圖形結(jié)果，也可以顯示文本結(jié)果，以及編譯錯(cuò)誤或者運(yùn)行錯(cuò)誤提示；（4）聊天組件，對(duì)于在線1對(duì)多的教學(xué)場(chǎng)景，聊天功能不可或缺，可以彌補(bǔ)多人通話時(shí)音質(zhì)下降嚴(yán)重的問題。

3.1網(wǎng)頁端的實(shí)時(shí)音視頻通信

WebRTC是一種HTML5規(guī)范，可用于瀏覽器和設(shè)備之間直接添加實(shí)時(shí)流媒體通信，具體如圖1所不。WebRTC作為實(shí)時(shí)通信的一種實(shí)現(xiàn)方案，有以下優(yōu)勢(shì)：（1） WebRTC是一個(gè)開源項(xiàng)目，可以完全免費(fèi)用于商業(yè)或私人用途；（2）它適用于所有現(xiàn)代瀏覽器；（3） WebRTC不僅限于瀏覽器，也可用于移動(dòng)應(yīng)用程序；（4） WebRTC不僅適用于語音或視頻通話，還可以使用它來構(gòu)建群呼服務(wù)、添加錄音或僅用于數(shù)據(jù)傳輸，基于WebRTC實(shí)現(xiàn)在線課堂中的音視頻通信，極大降低了接入門檻和開發(fā)成本。

3.2Python Turtle代碼編輯器

Python是一個(gè)成熟且簡(jiǎn)單易學(xué)、易用的編程語言，擁有良好的跨平臺(tái)特性，在Python中寫的代碼在通過其他語言重新編譯時(shí)會(huì)顯得特別容易。除此之外，在人工智能、數(shù)據(jù)分析等領(lǐng)域，Python具有天生的優(yōu)勢(shì)，也符合少兒編程的面向未來的意義。

Turtle是Python語言中內(nèi)置的作圖模塊。Python Turtle是向孩子和零基礎(chǔ)編程的人介紹編程和計(jì)算機(jī)的絕佳方式，而且很有趣。使用Python Turtle方法在虛擬畫布上生成形狀、圖形和其他圖片。在控制臺(tái)上創(chuàng)建的海龜或用于繪圖的顯示窗口（類似畫布）好像一支虛擬筆，通過烏龜后退功能和烏龜上、下、左、右等功能，沿著畫布移動(dòng)烏龜，隨著其運(yùn)動(dòng)繪制圖案。

代碼編輯組件，需要具備的特性有：支持多種編程語言的語法高亮，使代碼更加容易閱讀；實(shí)時(shí)語法檢查，在代碼編譯運(yùn)行前有修改錯(cuò)誤的機(jī)會(huì)；提供豐富的API，可以偵測(cè)到代碼內(nèi)容的變更、選擇、光標(biāo)位置、代碼區(qū)滾動(dòng)等事件，通過參數(shù)設(shè)置代碼內(nèi)容、選擇范圍、光標(biāo)位置、代碼可視區(qū)域提供方法。

Ace是一個(gè)使用JavaScript編寫的獨(dú)立代碼編輯器。Ace的目標(biāo)是創(chuàng)建一個(gè)基于瀏覽器的編輯器，以匹配和擴(kuò)展現(xiàn)有本地編輯器（如TextMate，Vim或Eclipse）的特性、可用性和性能。Ace可以很容易地集成到任何網(wǎng)頁或JavaScript應(yīng)用程序中。Ace是作為Cloud9 IDE的主要編輯器和Mozilla Skywriter（ Bespin）項(xiàng)目的繼任者而開發(fā)的。Ace支持超過60種語言語法高亮，并能夠處理代碼多達(dá)400萬行的大型文檔。Ace的特性有：語法高亮；自動(dòng)縮進(jìn)和伸出；可選命令行；處理大型文檔（處理數(shù)十萬行而沒有問題）；完全可自定義的鍵綁定，包括VI和Emacs模式；主題（可以導(dǎo)人TextMate主題）；搜索并替換為正則表達(dá)式；突出顯示匹配的括號(hào)：在軟標(biāo)簽和真實(shí)標(biāo)簽之間切換：顯示隱藏的字符；突出顯示所選單詞；多光標(biāo)選擇；列選擇和編輯模式。

3.3運(yùn)行結(jié)果顯示組件

Python Turtle在瀏覽器中的編譯和運(yùn)行，需要滿足兩個(gè)條件：（1）能夠?qū)崟r(shí)編譯Python Turtle代碼。瀏覽器本身是不支持Python代碼的編譯，需要提供一個(gè)實(shí)時(shí)的Python編譯器來處理。（2）Python Turtle的運(yùn)行結(jié)果通常是可視化圖形，需要利用瀏覽器內(nèi)置的canvas組件來顯示。

在瀏覽器中運(yùn)行Python，目前有6個(gè)開源解決方案可供選擇，如圖2所示。

（1） Transcrypt，提供了一個(gè)命令行工具，可以運(yùn)行該工具將Python腳本編譯為JavaScript文件。

（2） Brython，允許與編寫JavaScript完全相同的方式在腳本標(biāo)簽中編寫Pythono與Transcrypt -樣，它具有一個(gè)document用于與DOM交互的對(duì)象。

（3）Skulpt，在運(yùn)行時(shí)將Python編譯為JavaScript。這意味著直到頁面加載后才需要編寫Python。它不需要將請(qǐng)求發(fā)送回某處服務(wù)器上的Python解釋器，而是實(shí)際上直接在本地瀏覽器上運(yùn)行Python代碼。Skulpt最初是為生產(chǎn)需要在網(wǎng)頁上進(jìn)行實(shí)時(shí)Python會(huì)話的教育工具而創(chuàng)建的。盡管Transcrypt和Brython被設(shè)計(jì)為JavaScript的直接替代品，但Skulpt更適合于在Web上構(gòu)建Python編程環(huán)境。

（4） PyPy.js，是Python解釋器的JavaScript實(shí)現(xiàn)。開發(fā)人員使用了一個(gè)名為emscripten的C到JavaScript編譯器，并將其運(yùn)行在PyPy的源代碼上。結(jié)果是PyPy，但可以在用戶的瀏覽器中運(yùn)行。其優(yōu)點(diǎn)：這是一個(gè)非常忠實(shí)的Python實(shí)現(xiàn)，并且代碼可以快速執(zhí)行。其缺點(diǎn)：嵌入PyPy.js的網(wǎng)頁包含一個(gè)完整的Python解釋器，因此隨著網(wǎng)頁的發(fā)展，它相當(dāng)大（以兆字節(jié)為單位）。

（5） Batavia有點(diǎn)像PyPy.js，但是它運(yùn)行字節(jié)碼而不是Python。

（6） Mozilla的Pyodide于2019年4月發(fā)布。它解決了一個(gè)難題：在瀏覽器中使用Python進(jìn)行交互式數(shù)據(jù)可視化。由于NumPy，SciPy，Matplotlib和Pandas等庫，Python已成為數(shù)據(jù)科學(xué)中最喜歡的語言。已經(jīng)有了Jupyter Notebooks．這是在線呈現(xiàn)數(shù)據(jù)管道的好方法，但是它們必須托管在某處的服務(wù)器上。

如果將數(shù)據(jù)處理放在用戶的計(jì)算機(jī)上，則它們可以避免往返服務(wù)器的麻煩，因此實(shí)時(shí)可視化功能更加強(qiáng)大。針對(duì)在線編程課堂實(shí)時(shí)互動(dòng)的需求，Skulpt是最佳選擇。

對(duì)6個(gè)開源庫進(jìn)行比較，其具體內(nèi)容如表1所列。

3.4信令通信

信令同步服務(wù)組件，需要滿足以下需求：支持點(diǎn)對(duì)點(diǎn)的信令雙向通信；支持廣播通信；支持存儲(chǔ)、離線消息和歷史消息；支持信令協(xié)議的自定義。

XMPP（Extensible Messageing and PresenceProtocol）可擴(kuò)展消息與存在協(xié)議，XMPP （Jabber）是一個(gè)開放的即時(shí)消息通信協(xié)議，從1999年就開始開發(fā)。該協(xié)議的所有技術(shù)特性都由XEP描述。XMPP相對(duì)于所有其他即時(shí)消息傳遞系統(tǒng)的主要優(yōu)勢(shì)在于XMPP是開放的、免費(fèi)的，不屬于或受單一公司控制。它也是聯(lián)合（分布式）的，因此，任何人都可以運(yùn)行自己的消息服務(wù)器。如果需要，服務(wù)器可以關(guān)閉（即不允許與其他服務(wù)器通信）或完全聯(lián)合：允許跨任何現(xiàn)有服務(wù)器（如電子郵件）進(jìn)行通信。XMPP具有許多內(nèi)置的隱私和安全功能，可使用經(jīng)過廣泛審核的標(biāo)準(zhǔn)算法和軟件組件實(shí)現(xiàn)強(qiáng)大的加密。

Ejabberd是一個(gè)用Erlang/OTP寫的開源即時(shí)通信服務(wù)器，其是跨平臺(tái)、分布式、容錯(cuò)且基于開放標(biāo)準(zhǔn)的實(shí)時(shí)通信系統(tǒng)。Ejabberd是一個(gè)功能豐富的XMPP服務(wù)器，同時(shí)適合小規(guī)模和超大規(guī)模部署，無論是否需要可伸縮性。

Strophe.js是一個(gè)用于JavaScript客戶端的XMPP庫。其主要目的是啟用在任何瀏覽器中運(yùn)行的基于Web的實(shí)時(shí)XMPP應(yīng)用程序。

3.5系統(tǒng)集成

在線課堂的系統(tǒng)架構(gòu)如圖3所示，通過集成各個(gè)組件，可以快速搭建一個(gè)在線課堂，提供Python Turtle的實(shí)時(shí)互動(dòng)教學(xué)。運(yùn)行中的課堂界面如圖4所示。

4結(jié)束語

在一些相對(duì)成熟的開源技術(shù)和免費(fèi)商業(yè)組件的基礎(chǔ)上，通過對(duì)相關(guān)組件進(jìn)行二次開發(fā)和功能擴(kuò)展，可以快速搭建一套用于少兒編程的Web在線課堂，通過實(shí)時(shí)音視頻、聊天和代碼同步等功能，可以基本滿足少兒在線編程教學(xué)的需求。