基于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在線課堂，通過實時音視頻、聊天和代碼同步等功能，可以基本滿足少兒在線編程教學的需求。