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

（大連理工大學(xué)軟件學(xué)院，大連116000）

0 引言

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

1 研究現(xiàn)狀

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

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

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

2 系統(tǒng)設(shè)計(jì)

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

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

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

2.2 動(dòng)畫編程系列

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

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

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

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

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

2.3 游戲編程系列

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

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

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

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

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

2.4 可視化編程系列

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

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

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

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

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

2.5 App使用指南

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

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

3.1 實(shí)現(xiàn)概述

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

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

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

3.2 動(dòng)畫編程與游戲編程

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

圖5

圖6

圖7

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

3.3 可視化編程

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

圖8

圖9

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

圖10

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

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

圖11 交互處理流程圖

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

（2）詳細(xì)代碼流程。本文使用判斷星級(jí)部分進(jìn)行舉例。首先將當(dāng)前上下文聲明：

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

之后在JavaScript 中對(duì)每一個(gè)教學(xué)關(guān)卡實(shí)現(xiàn)判定機(jī)制：

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

AndroidInterface.showRating（count）;

4 結(jié)語

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