基于Blockly可視化編程教育系統的設計與實現

屈倩倩 闞紅星 高勇

摘要：

根據少兒學習的特點，通過設計適齡游戲的方式，在游戲過程中不斷引導用戶自主思考如何組裝模塊完成游戲關卡，以達到對用戶的計算能力、數字化學習創新能力進行綜合性訓練的目的。采用Java編程語言結合Blockly工具箱定義模塊，使用MYSQL數據庫存儲數據，將動畫效果與多種編程教學方式相結合，符合少兒的認知范疇，具有一定的實用性和先進性。

關鍵詞：

少兒編程; 啟蒙訓練; 可視化; 計算能力

中圖分類號： TP 311

文獻標志碼： A

Design and Implementation of Visual Programming

Education System Based on Blockly

QU Qianqian， KAN Hongxing， GAO Yong

（College of Medicine Information Engineering， Anhui University of Chinese Medicine， Hefei， Anhui ?230012， China）

Abstract：

By analyzing the social environment at home and abroad， this paper concludes the importance of childrens programming learning. According to the characteristics of users of different age groups， through the design ofageappropriate games， we useBlockly toolbox to customize the design of different modules， display the functions that users can choose， and guide users to think independently about how to assemble modules to complete the gamebarriers. Four kinds of games are designed， including the sequence， selection， loop structure and function of programming language， in order to achieve the goal of comprehensive training of users 3R ability. The system combines animation effects with various programming teaching methods， and has certain practicality and advanced nature.

Key words：

childrens programming; enlightenment training; visualization; computing ability

0引言

隨著國家推進智能化進程的加深，編程的普及度也越來越高，學習編程人員的年齡在不斷降低，少兒編程的重視程度逐漸提高。朱海麗[1]在《卡通日常化現象對我國現代少兒教育的影響》]一文中指出，動畫可以充分調動少兒的學習興趣，并且能夠在其腦海中留下深刻的學習印象，圖形化編程能夠使得編程的學習過程變得更加有趣和直觀。

1需求分析

1.1少兒編程教育平臺開發的必要性

英國在2014年將少兒編程納入教育范圍之內。美國緊隨其后，斥資40億美元進行少兒編程推廣教育。國內目前尚未強制進行編程教育，但是在大多數省份編程已經成為中、高考加分項之一，其中浙江省更是將其納入高考可選科目之一[2]。 Mitch Resnick[3]提出少兒編程學習的主要目的并不在于對編程技巧的掌握，而是學習思維方法，通過培養少兒的編程思維，從而提高少兒的創新能力。少兒編程在線教育系統在國外發展的時間較早，技術相對成熟，例如code.org目前已經擁有上百萬用戶，并被其他國家引進。國內大多數編程教育網站，均是以scratch工具和LOGO語言為基礎，著重于功能實現，以編程課程、編程技巧等為設計方向，對于作品類型以及創新的關注度不高，對于青少年的理解能力要求較高，并且普及度較低。因此設計一套以編程思想訓練為主的系統，對于推進少兒編程學習的進程有著至關重要的作用。

1.2系統需求分析

系統主要面向318歲的青少年兒童，從服務人群來看，該類人群年紀較小，對數理知識儲備量不足，但是對圖形和游戲等視覺服務有較大的興趣[4]。網站教學主要通過游戲來學習編程語言，再利用圖形編程提高孩子的邏輯思維能力、計算能力。所以在系統設計過程中要求游戲關卡易懂、易學，易操作，交互界面簡單直觀，操作便捷，易于用戶理解及使用。以限制用戶自主輸入數據的方式，并且提供相應的錯誤提示機制，能夠有效減少用戶的操作錯誤。同時對于系統的非功能性需求需要滿足可用性、可靠性等需求，系統響應時間必須滿足用戶可接受時間[5]。系統需求分析框圖如圖1所示。

2系統模塊設計

本系統按實際開發需求，可以分為3個模塊，如圖2所示。

通過判斷是否登錄，將用戶細分為注冊用戶和游客，為注冊用戶提供更多功能，如保存游戲記錄、觀看教學視頻等。游戲課程的設計從簡到繁，逐步引導用戶學習，并且覆蓋編程語言學習的重要知識點[5]。課程學習模塊將學習內容與游戲相融合，并以動畫的形式展現出來。注冊用戶的關卡進度和歷史操作都可以自動保存到數據庫中，用戶登錄后即可繼續進行最近一次的操作。

2.1課程設計模塊

用戶的學習課程以動畫配合代碼進行互動教學，因此動畫的設計主要基于課程特點。用戶完成課程學習之后，相應的課程會顯示其完成進度狀態，不同的符號代表不同的進度狀態和成績。

系統采用了四類小游戲和三大結構以及函數模塊的結合學習的方法，共設計出11單元109課。課程和知識點的聯系如表1所示。

用戶可以選擇任意類型游戲的課程進行操作，只需要點擊相應課程編號即可。每種類型的游戲中包含多個關卡。用戶可選擇的課程和課程對應的知識點如圖3所示。

2.2課程學習模塊

對于不同的課程需要用戶進行不同的操作：1、根據題目選擇正確答案，2、通過拖拽不同的模塊完成不同的操作。正確完成課程之后，會給出通關提示，并且可以選擇顯示本次課程生成的代碼。若答題錯誤，給出錯誤提示，請用戶繼續答題。用戶學習流程圖如圖4所示。

2.3課程功能模塊

系統中每一個關卡實現的主要功能包括：代碼塊構建、監聽塊數、步進、顯示代碼和課程進度標志。代碼塊構建實現用戶拖拽代碼塊到工作區進行拼接，完成游戲任務;監聽塊數提醒用戶是否以最佳方案通過關卡;步進功能相當于單步調試，使用戶能夠看到動畫對應的代碼塊;顯示代碼對應模塊背后的代碼，用戶通過閱讀代碼實現更加深入的學習;課程進度標志標識用戶本關卡完成情況，如圖5所示。

3系統功能的實現

3.1課程的設計和實現

課程學習界面主要包含了游戲區、工具區和工作區。用戶可以通過點擊按鈕和拖拽代碼塊的方式完成每個課程的要求。課程設計分為以下幾個步驟：構建代碼塊、構建工具箱和工作區、構建課程界面、生成代碼與實現單步運行、監聽使用的圖像塊。Blockly官方網站為開發者提供了構建代碼塊、工具箱、工作區等功能[6]。

3.1.1構建課程

構建一個課程，首先需要通過Blockly開發者工具搭建代碼塊，然后將代碼塊導入到工具Blockly的工具箱區域或者工作區域。以上都構建完成后，通過Export將對應的代碼塊的JavaScript文件和工具區的原始配置（JavaScript和XML文件）導出，并注入到編寫好的html中，即可構成課程學習的基礎界面。構建一個課程的示意圖，如圖6所示。

3.1.2課程詳細設計

a.生成代碼

構造的代碼塊實際上對應的是一段符合邏輯的代碼，典型的代碼生成函數如下。

Blockly.JavaScript['repeat_to_ji'] = function（block） {

var statements_do = Blockly.JavaScript.statementToCode（block， 'do'）;

var code = '...;＼n';

return code;

};

通過下面函數的調用，用戶的塊可以隨時從應用程序導出代碼：

var code = Blockly.JavaScript.workspaceToCode（workspace）。

b.塊功能實現

對模塊進行功能設計。使對應代碼塊導入后，能夠實現相應的功能。通過在代碼生成函數“var code = '...'”中code進行函數自定義實現模塊所需要實現的功能。

c.單步運行功能

為了方便用戶理解每一步的代碼含義，使用JS Interpreter來控制代碼的執行速度，實現代碼執行過程中的暫停/恢復/逐步等功能。具體步驟如下。

首先引入第三方庫：。接著在代碼執行文件中創建解釋器并運行代碼。但同時，因為JS Interpreter是一個與瀏覽器完全隔離的沙箱，所以任何與外界執行操作的塊都需要將API添加到解釋器中。如下所示是將帶參函數alert添加入入解釋器的函數。

function initApi（interpreter， scope） {

var wrapper = function（text） {

return alert（arguments.length ？ text ： ''）;

};

interpreter.setProperty（scope， 'alert'，

interpreter.createNativeFunction（wrapper））;

}

d.塊的監聽

為了讓用戶能更加明確地學習編寫簡潔的代碼，所以需要實時監聽用戶所使用的代碼塊的數量。系統中設置一個使用的代碼塊數量最理想的值，然后獲得前端使用的代碼塊數量，并進行對比，當完成本課程的任務后，提示用戶是否以最佳方案通過課程。

3.2關卡模塊的存儲

當關卡較難時，所需代碼塊數量也會增多。為防止用戶未一次性想出解決方案造成的進度丟失，在用戶關閉窗口或打開新頁面的時候記錄當前代碼塊的布局。當用戶重新回到當前關卡時，不需要從頭開始構建代碼塊。