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

黃志文

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

1引言

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

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

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

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

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

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

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

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

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

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

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

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

3.2Python Turtle代碼編輯器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4信令通信

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

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

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

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

3.5系統(tǒng)集成

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

4結(jié)束語

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