基于Blockly可視化編程教育系統(tǒng)的設(shè)計與實現(xiàn)

屈倩倩 闞紅星 高勇

摘要：

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

關(guān)鍵詞：

少兒編程; 啟蒙訓(xùn)練; 可視化; 計算能力

中圖分類號： TP 311

文獻(xiàn)標(biāo)志碼： 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引言

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

1需求分析

1.1少兒編程教育平臺開發(fā)的必要性

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

1.2系統(tǒng)需求分析

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

2系統(tǒng)模塊設(shè)計

本系統(tǒng)按實際開發(fā)需求，可以分為3個模塊，如圖2所示。

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

2.1課程設(shè)計模塊

用戶的學(xué)習(xí)課程以動畫配合代碼進行互動教學(xué)，因此動畫的設(shè)計主要基于課程特點。用戶完成課程學(xué)習(xí)之后，相應(yīng)的課程會顯示其完成進度狀態(tài)，不同的符號代表不同的進度狀態(tài)和成績。

系統(tǒng)采用了四類小游戲和三大結(jié)構(gòu)以及函數(shù)模塊的結(jié)合學(xué)習(xí)的方法，共設(shè)計出11單元109課。課程和知識點的聯(lián)系如表1所示。

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

2.2課程學(xué)習(xí)模塊

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

2.3課程功能模塊

系統(tǒng)中每一個關(guān)卡實現(xiàn)的主要功能包括：代碼塊構(gòu)建、監(jiān)聽塊數(shù)、步進、顯示代碼和課程進度標(biāo)志。代碼塊構(gòu)建實現(xiàn)用戶拖拽代碼塊到工作區(qū)進行拼接，完成游戲任務(wù);監(jiān)聽塊數(shù)提醒用戶是否以最佳方案通過關(guān)卡;步進功能相當(dāng)于單步調(diào)試，使用戶能夠看到動畫對應(yīng)的代碼塊;顯示代碼對應(yīng)模塊背后的代碼，用戶通過閱讀代碼實現(xiàn)更加深入的學(xué)習(xí);課程進度標(biāo)志標(biāo)識用戶本關(guān)卡完成情況，如圖5所示。

3系統(tǒng)功能的實現(xiàn)

3.1課程的設(shè)計和實現(xiàn)

課程學(xué)習(xí)界面主要包含了游戲區(qū)、工具區(qū)和工作區(qū)。用戶可以通過點擊按鈕和拖拽代碼塊的方式完成每個課程的要求。課程設(shè)計分為以下幾個步驟：構(gòu)建代碼塊、構(gòu)建工具箱和工作區(qū)、構(gòu)建課程界面、生成代碼與實現(xiàn)單步運行、監(jiān)聽使用的圖像塊。Blockly官方網(wǎng)站為開發(fā)者提供了構(gòu)建代碼塊、工具箱、工作區(qū)等功能[6]。

3.1.1構(gòu)建課程

構(gòu)建一個課程，首先需要通過Blockly開發(fā)者工具搭建代碼塊，然后將代碼塊導(dǎo)入到工具Blockly的工具箱區(qū)域或者工作區(qū)域。以上都構(gòu)建完成后，通過Export將對應(yīng)的代碼塊的JavaScript文件和工具區(qū)的原始配置（JavaScript和XML文件）導(dǎo)出，并注入到編寫好的html中，即可構(gòu)成課程學(xué)習(xí)的基礎(chǔ)界面。構(gòu)建一個課程的示意圖，如圖6所示。

3.1.2課程詳細(xì)設(shè)計

a.生成代碼

構(gòu)造的代碼塊實際上對應(yīng)的是一段符合邏輯的代碼，典型的代碼生成函數(shù)如下。

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

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

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

return code;

};

通過下面函數(shù)的調(diào)用，用戶的塊可以隨時從應(yīng)用程序?qū)С龃a：

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

b.塊功能實現(xiàn)

對模塊進行功能設(shè)計。使對應(yīng)代碼塊導(dǎo)入后，能夠?qū)崿F(xiàn)相應(yīng)的功能。通過在代碼生成函數(shù)“var code = '...'”中code進行函數(shù)自定義實現(xiàn)模塊所需要實現(xiàn)的功能。

c.單步運行功能

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

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

function initApi（interpreter， scope） {

var wrapper = function（text） {

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

};

interpreter.setProperty（scope， 'alert'，

interpreter.createNativeFunction（wrapper））;

}

d.塊的監(jiān)聽

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

3.2關(guān)卡模塊的存儲

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