基于Blockly 的青少年可視化編程開發(fā)平臺設計

彭佳漢，李俊德，彭程，秦天文，王揀賢，李剛毅，賴曉晨

（大連理工大學軟件學院，大連116000）

0 引言

近年來，提升青少年的編程興趣和培養(yǎng)學生的編程能力成為了國內(nèi)外關(guān)注的熱點，越來越多的國家意識到青少年編程教育的重要性。在國外，麻省理工學院在2003 年就曾打造適用于兒童的Scratch 程序語言，以一種可視化的程序設計工具在眾多平臺上學習使用[1]。在我國，2016 年教育部印發(fā)《教育信息化“十三五”規(guī)劃》的通知，將信息化教學能力納入學校辦學水平考評體系，并強調(diào)“STEM 是一種以項目學習、問題解決為導向的課程組織方式，它將科學、技術(shù)、工程、數(shù)學有機地融為一體，有利于學生創(chuàng)新能力的培養(yǎng)”[2]。因此，社會迫切需要加強青少年編程教育力度，優(yōu)化孩子的邏輯思維模式，培養(yǎng)孩子的綜合能力，以使青少年在未來發(fā)展中更具競爭力，更好地為科技發(fā)展做出貢獻。

1 研究現(xiàn)狀

目前，國內(nèi)市場推出了許多與兒童編程相關(guān)的App 以及編程平臺。目前兒童編程行業(yè)面臨著以下的現(xiàn)狀：

絕大多數(shù)的兒童編程產(chǎn)品采用開源的Scratch 作為教學內(nèi)容，只提供課程。兒童編程產(chǎn)品是多基于PC Web 的編程平臺，導致絕大部分兒童編程實現(xiàn)需要依賴電腦，做不到即時學習。絕大硬件、軟件產(chǎn)品傾向于游戲娛樂，只能達到編程思維啟蒙，并不能真正教用戶編程開發(fā)。并且當今市場上線下、線上編程教學課時費昂貴，用戶門檻極高，即使支付了高昂的費用，也未必能達到預期效果[3]。

本文將基于Google 的可視化圖形編程語言Blockly 和Scratch 技術(shù)，設計的一款可視化編程框架，并提供各種功能的API。同時，為6～12 歲年齡段的青少年提供能夠獨立完成圖形界面App 設計的平臺，和免費教程教學，大大降低昂貴的教學成本。孩子們不需要掌握復雜的編程語言和開發(fā)知識，只需拖拽已封裝好接口的代碼塊，以一種可視化的方式，在學習編程理論知識同時，又能獨立開發(fā)出游戲應用、動畫電影以及解決實際問題的編程開發(fā)，而且可訓練編程思維，真正讓青少年學會開發(fā)程序，體驗編程樂趣。

2 系統(tǒng)設計

2.1 系統(tǒng)架構(gòu)

開發(fā)系列模塊依照青少年對Blockly 積木接口編程開發(fā)掌握度分為“入門級”、“基礎級”和“進階級”三大級別，并提供了“動畫編程”、“游戲編程”和“可視化編程”三大系列，圖1 展示了整體的系統(tǒng)結(jié)構(gòu)。

圖1 系統(tǒng)整體結(jié)構(gòu)圖

2.2 動畫編程系列

如圖2 所示。該系列分為動畫教程、動畫案例和開發(fā)樂園三個模塊，提供了用于動畫開發(fā)的積木塊，讓青少年可以進行天馬行空的動畫制作，以實現(xiàn)青少年“入門級”的開發(fā)。

圖2 動畫編程系列結(jié)構(gòu)圖

（1）動畫教程模塊。該模塊包括知識筆記和積木教程兩個子模塊，對動畫制作中使用到的積木塊進行了詳細的介紹，并對動畫案例進行了說明。知識筆記使青少年在開發(fā)制作中遇到困難時，能夠進行詳細教程查看。積木教程提供了開發(fā)中所用積木塊的闖關(guān)訓練，來練習基礎代碼塊的使用。每一關(guān)卡會給出任務，青少年需要選擇要使用的積木塊完成任務。

（2）動畫案例模塊。此模塊以制作案例的形式向青少年展示在動畫制作會達到的一些效果，意在拋磚引玉，激發(fā)青少年的創(chuàng)造潛力。該系列提供了貓捉老鼠、男孩回家的動畫制作案例。

（3）開發(fā)樂園模塊。此模塊提供所有的代碼塊供青少年使用。開發(fā)將全面應用“運動”、“外觀”、“控制”等重要積木塊，以鼓勵孩子進行頭腦風暴，想出有趣的動畫短片，真正實現(xiàn)青少年編程從模仿到創(chuàng)新的重要突破。

2.3 游戲編程系列

如圖3 所示。該系列分為游戲教程、游戲案例和開發(fā)樂園三個模塊。該與動畫編程類似，但難度提升，更好實現(xiàn)動畫到游戲的過渡，以實現(xiàn)“基礎級”的開發(fā)。

圖3 游戲編程系列結(jié)構(gòu)圖

（1）游戲教程模塊。在原有的基礎上加上了游戲制作教程，對游戲制作中使用到的積木塊進行了詳細的介紹，并對該系列中提供的案例進行了說明。

（2）游戲案例模塊。此模塊仍將游戲制作效果以案例的形式進行展示，并提供飛機大戰(zhàn)、老鼠偷金的游戲制作案例。

（3）開發(fā)樂園模塊。此模塊同樣將游戲開發(fā)的功能與動畫開發(fā)部分合并，并提供所有的代碼塊。意在鼓勵孩子想出新的游戲玩法并與實現(xiàn)動畫制作相結(jié)合，讓青少年能制作出想要的游戲與動畫效果。

2.4 可視化編程系列

如圖4 所示。該系列分為知識學習、知識筆記和編程樂園三個模塊，為引導孩子創(chuàng)造出能解決實際問題的小程序。知識學習部分提供語言學習和算法學習知識筆記為可視化編程系列知識的匯總。青少年在有了一定的編程能力后，便可以到編程樂園中，使用邏輯性更強的代碼塊，進行簡單的編程開發(fā)。

（1）知識學習模塊。該模塊分為語言學習和算法學習兩部分，以學習多種編程語言和基礎算法。語言學習分別提供了多種編程語言的學習JavaScript、Python 等，而算法學習提供了輸入、數(shù)學、變量、邏輯、循環(huán)、數(shù)組、函數(shù)7 部分知識的學習。每一章節(jié)提供了答案提示的幫助，可讓青少年對學習情況進行檢查。

（2）知識筆記模塊。該模塊提供了該系列的用到積木塊的詳細講解，和算法學習和語言學習中各個關(guān)卡的教程。

（3）編程樂園模塊。該模塊開放了所有代碼塊接口，并且更加接近于真是的IDE，青少年可根據(jù)需要使用Toolbox 中相應功能的代碼塊，進行拼接和代碼執(zhí)行，并查看運行結(jié)果。該模塊還為用戶提供一個代碼保存機制，讓編程更加便捷。

圖4 可視化編程系列結(jié)構(gòu)圖

2.5 App使用指南

除以上三個系列外，我們還會提供相應的平臺使用教程，總結(jié)代碼塊接口語法、積木化程序結(jié)構(gòu)與代碼塊接口應用與定制的方法，幫助青少年更好地應用代碼塊接口的知識進行編程開發(fā)學習。

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

3.1 實現(xiàn)概述

（1）技術(shù)實現(xiàn)。平臺采用了Google 的先進技術(shù)可視化編程語言Blockly，其中主要是以網(wǎng)頁版的形式運行，運用JavaScript 將可視化代碼塊轉(zhuǎn)換成可運行的代碼并將其運行在Android 端的Webview 上，通過Android 端的接口實現(xiàn)Android 和Webview 間的通信。此外，通過JavaScript 以及Python 實現(xiàn)了可視化編程語言到其他語言的轉(zhuǎn)化。

（2）關(guān)鍵點。關(guān)鍵點在于如何將可視化代碼塊的拼接轉(zhuǎn)換成實際可以運行的代碼，不同的代碼塊對于格式也有不同的要求，運行順序也是關(guān)鍵因素。我們采用了JavaScript 將代碼塊的拼接轉(zhuǎn)換成在網(wǎng)頁上可以運行的代碼，并且設置代碼檢錯器對于其中拼接明顯有錯的代碼塊進行錯誤提醒。

（3）難點。難點在于如何實現(xiàn)Activity 與Webview的交互，Webview 是用戶拼接可視化代碼塊的地方，用戶拼接完成后如何將拼接的代碼傳送給Activity，以及Activity 收到后如何將運行結(jié)果反饋給Webview。我們創(chuàng)建了Webview 與Activity 的Interface，通過這個特殊的Interface，Activity 可以和Webview 順利進行通信，從而解決該難點。

3.2 動畫編程與游戲編程

各系列中包含的具體關(guān)卡的判斷流程基本一致，下面以動畫編程系列中的案例進行展示。圖5 是選擇關(guān)卡界面，圖6 是正式操作界面，圖7 位教程講解界面。首先用戶選擇關(guān)卡，進入關(guān)卡后會出現(xiàn)對話框提示，用戶根據(jù)對話框的過關(guān)要求進行相應的操作，實現(xiàn)相應的要求，用戶實現(xiàn)后點擊執(zhí)行按鈕，進行評級，會根據(jù)用戶的操作給予相應的分數(shù)，如果通過就可以解鎖下一關(guān)。

圖5

圖6

圖7

實現(xiàn)過程：用戶拖拽到操作窗的每一個按鈕代塊都對應著JavaScript 中的一段函數(shù)，點擊按鈕便可控制物體的運動，在按鈕塊的處理上，需要實現(xiàn)根據(jù)按鈕塊的鍵值實現(xiàn)相應的移動操作，同時還要根據(jù)按鈕塊的文本信息獲取到移動的步數(shù)，當一個按鈕可以實現(xiàn)上述操作之后，要實現(xiàn)多個按鈕之間的連接，連接通過JSON 數(shù)據(jù)中的順序進行解析操作。執(zhí)行代碼時，將整個部分整合成一個JSON 文件，通過對JSON 文件中的字段獲取，獲取到按鈕的種類和相應的數(shù)目以及執(zhí)行順序，在JavaScript 中對這些數(shù)據(jù)進行處理，例如：通過計數(shù)按鈕數(shù)目來實現(xiàn)判定機制，通過約定的按鈕名稱來判定當前調(diào)用的是哪一個按鈕的函數(shù)，從而實現(xiàn)按照操作窗的按鈕組合和步數(shù)實現(xiàn)相應的調(diào)用。

3.3 可視化編程

這一模塊包括編程學習和代碼學習，編程學習是通過ToolBox 向用戶提供了邏輯、循環(huán)及變量等編程思想的培養(yǎng)。用戶可以選擇進行代碼學習，在已有的邏輯、數(shù)學學習上添加代碼學習模塊。通過對Blockly 塊的組合，實現(xiàn)對用戶操作的判定，讓用戶在指導下逐漸培養(yǎng)出編程思維。圖8 是編程語言訓練模塊，現(xiàn)在支持學習多種編程語言包括：JavaScript、Python 等。圖9和圖10 是Blockly 實現(xiàn)塊與編程語言相對應，讓用戶通過簡單的塊操作轉(zhuǎn)換實現(xiàn)為相應的代碼供用戶查看。

圖8

圖9

實現(xiàn)過程：通過使用Blockly 塊，集成到項目中，對用戶拖拽的塊進行判定，在JavaScript 中進行相應的邏輯判定，實現(xiàn)相應的代碼邏輯，并通過Blockly 轉(zhuǎn)化為相應的語言。設計出循序漸進的代碼學習方式，讓用戶在游戲的過程中學習。

圖10

3.4 闖關(guān)判定機制的處理

（1）判定機制概述。該功能的具體處理流程如圖11 所示。

圖11 交互處理流程圖

該部分使用的是JavaScript 與本地方法的互調(diào)。首先為了讓Webview 中的JavaScript 調(diào)用Android 方法，WebView.getSettings（）獲得WebSettings 工具類，該工具類提供了大量的方法來管理Webview 的選項設置，其中setJavaScriptEnabled（true）即可讓Webview 中的JavaScript 腳本來調(diào)用Android 方法，除此之外，為了把Android 對象暴露給Webview 中的JavaScript 代碼，Webview 提供了addJavascriptInterface（Object object,String name）方法，該方法負責把object 對象暴露成JavaScript 中的name 對象。

（2）詳細代碼流程。本文使用判斷星級部分進行舉例。首先將當前上下文聲明：

之后在使用的顯示星數(shù)的方法上使用注解，將該方法暴露給JavaScript:

之后在JavaScript 中對每一個教學關(guān)卡實現(xiàn)判定機制：

之后將星數(shù)通過下述函數(shù)回傳便可展現(xiàn)出通關(guān)星數(shù)：

AndroidInterface.showRating（count）;

4 結(jié)語

基于Blockly 的青少年可視化編程開發(fā)平臺，提供了功能豐富的代碼塊接口，實現(xiàn)了從動畫制作到游戲制作再到可視化編程的過渡，可以滿足青少年學習編程和使用編程的需要。青少年可以使用它們進行天馬行空的開發(fā)，不用再拘泥于教程的限制，并且實現(xiàn)了從模仿到創(chuàng)造的學習過程。App 在訓練青少年編程思維的同時，還能夠激發(fā)青少年邏輯思維能力和創(chuàng)造能力，達到寓教于樂的目的。