傅 騫 羅開亮 陳 露

（北京師范大學 教育技術學院，北京 100875）

面向創(chuàng)客教育普及的Mixly圖形化編程工具開發(fā)*

傅 騫 羅開亮 陳 露

（北京師范大學 教育技術學院，北京 100875）

創(chuàng)意電子是創(chuàng)客教育的重要載體，但由于受技術門檻的限制，它的課程開設給教師帶來了極大的挑戰(zhàn)。文章首先對現(xiàn)有的創(chuàng)意電子圖形化編程工具進行了深入分析對比，然后描述了一個新的圖形化編程系統(tǒng)Mixly（米思齊）的實現(xiàn)。具體來說，Mixly包括軟件的系統(tǒng)架構和關鍵技術的實現(xiàn)兩部分內(nèi)容，并在最后通過用戶的反饋數(shù)據(jù)驗證了該軟件的價值。

創(chuàng)客教育；Arduino；圖形化編程；Mixly

一 問題的提出

隨著社會生產(chǎn)力的不斷發(fā)展，重復性的機械勞動將更多地被機器所取代，未來社會更需要創(chuàng)新型人才；與此同時，社會物質(zhì)水平不斷提高，人類在物質(zhì)得到滿足的條件下將越來越多地追求精神層面的滿足。在這樣的大背景下，以激發(fā)學生“享受創(chuàng)新與分享的快樂”為目標的“創(chuàng)客教育”在全球迅速流行開來，在我國也得到了迅猛的發(fā)展[1]。

為了實現(xiàn)讓學生“享受創(chuàng)新與分享的快樂”這一目標，眾多研究者設計了多種創(chuàng)客教育的開展形式，如基于Scratch的創(chuàng)意編程、基于Arduino的創(chuàng)意電子、基于AppInventor的創(chuàng)意APP、基于3D打印的創(chuàng)意設計以及各類機器人相關課程等。其中，創(chuàng)意電子因課程開設簡單、容易引起興趣、方便激發(fā)創(chuàng)新和易于成果展示等特點，成為了當前創(chuàng)客教育的主流。創(chuàng)意電子課程活動一般由物理搭建和程序編寫兩部分組成，開設年級橫跨小學三年級至高中二年級。在當前的技術條件下，物理搭建已非課程的難點，而程序編寫部分往往因其過于復雜容易使學生產(chǎn)生認知負荷，從而影響創(chuàng)意的激發(fā)與實現(xiàn)。因此，創(chuàng)客教育中的創(chuàng)意電子課程需要更好的編程工具。

二 當前研究現(xiàn)狀

為了給創(chuàng)意電子課程提供更好的編程工具，各類研究者、開源團體和商業(yè)公司都付出了大量的努力。當前創(chuàng)意電子課程均以Arduino為基礎，所以目前的這些編程工具都為Arduino編程服務。創(chuàng)意電子課程主要分為基于文本的課程和基于圖形的課程兩大類，前者有Arduino IDE、SMeshStudio等，后者有Ardublock、BlocklyDuino等。創(chuàng)客教育關注的是技術的整合創(chuàng)新而非知識的簡單復制，所以創(chuàng)客教育強調(diào)學生學習使用基于圖形的編程方式，即圖形化編程，而非學習編程語法。隨著研究的深入，教育工作者認識到編程的核心是邏輯和思維、是想象力和創(chuàng)造力，而這正是圖形化編程的核心思想，也是未來非專業(yè)人士編程的主流。當前已經(jīng)出現(xiàn)不少面向Arduino開發(fā)的主流編程工具，主要有以下三類：

1 Ardublock

Ardublock[2]是Arduino官方編程環(huán)境認可的第三方軟件，基于Java開發(fā)，必須依附在Arduino軟件下運行。區(qū)別于Arduino的文本式編程環(huán)境，Ardublock以搭建圖形化積木的方式編程。這種方式會使編程的可視化和交互性加強，并且編程門檻降低，使沒有編程經(jīng)驗的人也可以嘗試給Arduino控制器編寫程序。

Ardublock是目前功能比較完善的一款Arduino圖形化編程工具，不僅集成了邏輯控制、引腳操作、數(shù)學運算、變量定義、通訊等基本功能，也包括第三方公司的傳感器拓展模塊。如圖1所示，這是可調(diào)燈的Ardublock圖形化代碼，可以使燈的亮度隨著用戶按鈕的轉動而變化。

圖1 Ardublock界面

2 BlocklyDuino

BlocklyDuino[3]是一款基于網(wǎng)頁的Arduino圖形化編程工具，基于HTML 5技術開發(fā)，底層使用Google的Blockly圖形化編程框架，同樣需要使用官方的Arduino IDE軟件。和Ardublock類似，它也是以圖形化積木搭建的方式編程，且支持使用瀏覽器編程。但當需要把編好的程序上載到Arduino開發(fā)板上時，用戶還必須運行一個Web服務器來輔助完成此工作，所以使用起來并不是很方便。

目前，BlocklyDuino功能簡單，僅包含基本的邏輯控制、數(shù)學運算、文本處理、變量定義、函數(shù)定義、管腳控制等，也加入了一些Grove傳感器模塊，但遠沒有Ardublock豐富，缺乏對于Arduino編程必須的數(shù)學映射函數(shù)、三角函數(shù)等模塊，不支持變量的數(shù)據(jù)類型，不支持中文，因此其應用的范圍有限。如圖2所示，這是可調(diào)燈的BlocklyDuino圖形化代碼，與圖1實現(xiàn)的功能相同，即燈的亮度可隨著用戶按鈕的轉動而變化。

圖2 BlocklyDuino界面

3 mBlock

Scratch是當前最完善的圖形化編程工具。Scratch在設計之初并沒有考慮與硬件結合的問題，隨著電腦軟件有感知環(huán)境和控制硬件的需求，S4A的技術隨之而生，其本質(zhì)是讓硬件設備和Scratch程序之間快速地通過串口進行數(shù)據(jù)交換，從而達到與Arduino交互的效果。但這本質(zhì)上并不是對Arduino編程，所以一旦離開了Scratch，板子便停止工作。為了讓Scratch更好地控制Arduino，并對Arduino實現(xiàn)真正意義上的編程，很多團體都對Scratch進行了改進，比較有代表性的是mBlock[4]——它是Scratch的非官方改進版本，由國人開發(fā)，并同樣基于Flash客戶端技術開發(fā)，支持中文版，為大部分國人用戶提供了便利。

mBlock 2.2是最新版本，既可以在類似于S4A的串口交互模式下工作，也可以實現(xiàn)程序的編譯上載，且支持Arduino的多塊主控板，系統(tǒng)功能比較強大。但因Scratch擴展的復雜性，在Arduino硬件控制功能的支持上還不是很完善，只能實現(xiàn)最基本的管腳控制功能，也無任何第三方擴展模塊可用。如圖3所示，這是mBlock版本的可調(diào)燈代碼。

圖3 mBlock界面

4 總結

上述三個Arduino圖形化編程工具雖各具特色，但仍無法滿足實際課程的需要。

（1）編程功能不完善。圖形化編程工具的定位是替換原有復雜的文本編程方式，但上述3個軟件都無法較好地滿足此要求，這就限制了用戶創(chuàng)意的發(fā)揮和實現(xiàn)。其中亟待增加的功能是硬件中斷的處理、函數(shù)定義的引入及使用、必備數(shù)學函數(shù)的加入、數(shù)據(jù)類型的引入和使用等。

（2）系統(tǒng)擴展性不強。上述3個軟件都沒有考慮系統(tǒng)的可擴展性，不支持用戶自定義新的模塊供后期使用，因此將限制用戶創(chuàng)意的發(fā)揮，工作難以復用，也難以完成復雜的創(chuàng)意應用。

（3）不便于二次開發(fā)。上述3個軟件都屬于開源免費軟件，它們的生命力與其二次開發(fā)能力密切相關。Ardublock基于OpenBlocks框架開發(fā)，mBlock基于Adobe Air技術開發(fā)，這兩類技術的使用群體有限，從而限制了它們的二次開發(fā)范圍。BlocklyDuino采用Google的Blockly框架，全部采用JavaScript語言實現(xiàn)，所以開發(fā)群體較大，具有較好的發(fā)展前途；但它須用Python實現(xiàn)Web與Arduino IDE的交互，因此開發(fā)難度依然較大。

三 Mixly系統(tǒng)架構

綜上所述，創(chuàng)客教育需要更好的圖形化編程工具，Mixly（米思齊）因此應運而生?？紤]到系統(tǒng)開發(fā)的方便性、擴展性以及用戶使用的簡單性，Mixly在系統(tǒng)架構上使用混合架構模式，即客戶端應用和網(wǎng)頁應用相結合的模式：在圖形化編程框架上采用Blockly核心的網(wǎng)頁結構；在技術上則采用基于Java的客戶端編程技術，以便于用戶上載編譯。Mixly系統(tǒng)架構如圖4所示。

圖4 Mixly系統(tǒng)架構

Mixly基于Google的Blockly[5]圖形化編程框架進行了二次開發(fā)，在核心層完成了變量類型定義和模塊的生成功能，然后針對Arduino硬件編程的需要加入大量的硬件控制和傳感器、執(zhí)行器相關的交互功能，以達到圖形化編程完美操控Arduino的效果；再使用Java的JavaFX技術，在客戶端顯示Blockly網(wǎng)頁并實現(xiàn)網(wǎng)頁和客戶端功能的交互。當用戶完成基于網(wǎng)頁的圖形化編程后，客戶端將其轉換成Arduino代碼，并調(diào)用Arduino官方IDE完成程序的編譯和上傳功能。

Mixly系統(tǒng)架構綜合了網(wǎng)頁開發(fā)和Java客戶端開發(fā)技術，在開發(fā)上同時享受網(wǎng)頁開發(fā)的方便性和客戶端開發(fā)的簡單性，在應用上同時享受網(wǎng)頁應用的靈活性和客戶端應用的強大性，從而使Mixly的圖形化編程模塊隨同用戶主控板選擇的變化而變化成為可能，并使程序的編譯和上傳更加方便。隨著Mixly JavaFX部分功能的完善，日后Mixly的改進工作將全部集中于網(wǎng)頁，而網(wǎng)頁無需編譯就可以直接使用，所以基于該架構的Mixly的后續(xù)升級將會變得非常方便。Mixly的主界面如圖5所示，這是Mixly的可調(diào)燈代碼，但使用了按鍵調(diào)光方式。

圖5 Mixly主界面

四 Mixly關鍵技術的實現(xiàn)

為了完成Mixly整體的開發(fā)，本研究團隊對其中的圖形化編程呈現(xiàn)、網(wǎng)頁與客戶端應用的融合、Arduino數(shù)據(jù)類型實現(xiàn)、可擴展模塊管理這四個關鍵技術進行了重點研究。

1 圖形化編程呈現(xiàn)

為了實現(xiàn)普適的圖形化編程效果，Mixly采用了Google的Blockly圖形化編程框架。Blockly 是Google公司在2012年發(fā)布的完全可視化編程語言，類似于麻省理工學院的Scratch，用戶可以通過搭積木的方式用一塊塊圖形模塊拼出應用程序。每個圖形模塊是一個代碼塊，用戶可將它們拼接起來，創(chuàng)造出簡單功能，然后將一個個簡單功能進行組合，構建出一個復雜程序。

Blockly是一個免費開源程序，它的定位就是讓開發(fā)人員進行二次開發(fā)從而滿足不同領域的需要，包括教育工具的開發(fā)、機器人應用的開發(fā)等，這剛好符合了Mixly的需求。Blockly的核心功能是提供圖形模塊的定義機制和圖形模塊對應代碼塊的生成方式，使開發(fā)人員可以很方便地基于Blockly創(chuàng)建自己的模塊，并把想生成的代碼與圖形模塊進行綁定。

模塊的定義和代碼的生成是使用Blockly生成自定義模塊最關鍵的兩步。其中，模塊的定義就是定義模塊的長相，使用“Blockly.Blocks['模塊名稱']”來定義；代碼的生成就是定義圖形模塊所對應的代碼塊，是圖形模塊的真面目，使用“Blockly.Arduino.模塊名稱”來定義。由于Blockly的簡單可行，Mixly所有圖形模塊的呈現(xiàn)與代碼的生成工作便交給了Blockly，因此可以說Blockly 是Mixly軟件的核心與基礎、是Mixly圖形化編程的關鍵。

2 網(wǎng)頁與客戶端應用的融合

由于Blockly的所有代碼都使用JavaScript腳本語言編寫，其生成的圖形化模塊只能在網(wǎng)頁中運行，而Arduino所使用的編程語言是基于C/C++的，Arduino控制器要運行程序需要經(jīng)過代碼的編譯和上傳兩個過程，因此，如果通過瀏覽器編程，需要搭建Web服務器來進行編譯和上傳。但搭建服務器對普通用戶來說過于繁雜，故用戶更傾向于使用完全綠色免安裝的程序，這就要求Mixly必須是一個本地應用。基于此，Mixly引入了JavaFX技術來實現(xiàn)網(wǎng)頁及客戶端應用的融合。

JavaFX完全基于Java語言，具有很好的跨平臺性。最重要的是，JavaFX在開發(fā)互聯(lián)網(wǎng)應用程序上有獨特的優(yōu)勢，可以很好地將Blockly整合到本地化應用中。有了JavaFX，Mixly便可以在本地化的應用中通過JavaFX.scene.web.WebView類內(nèi)嵌一個Web瀏覽器，用于呈現(xiàn)Blockly的圖形化功能，同時JavaFX的JavaFX.scene.web.WebEngine類可以很好地與JavaScript進行交互。此外，由于JavaFX是基于Java的，用戶能夠利用Java對生成的C/C++代碼進行編譯和上傳，這樣就很好地達到了本地化應用與Blockly的融合。

3 Arduino數(shù)據(jù)類型實現(xiàn)

Blockly本身并沒有數(shù)據(jù)類型的概念，所以官方的Blockly只能生成JavaScript、Python之類的無數(shù)據(jù)類型語言。但Arduino程序是建立在C/C++語言基礎之上的，是強類型語言，因此Mixly必須在底層加入數(shù)據(jù)類型定義功能。

多種變量類型的支持乃建立在Blockly源碼的基礎上。Blockly源碼原本只支持一種類型的變量，但Mixly在其基礎上進行了修改和升級，使其能夠支持更多類型的變量。具體來說，一方面需要修改Blockly.Blocks['variables_declare']塊，以增加下拉列表方式表示的數(shù)據(jù)類型：

this.appendTitle(new Blockly.FieldDropdown([['long','long'],['float','float'],…]),"TYPE")

另一方面需要相應的Blockly.Arduino.variables_declare函數(shù)，以實現(xiàn)數(shù)據(jù)類型的獲取：

var dropdown_type = this.getTitleValue('TYPE');

Blockly.Arduino.variableTypes_[varName] = dropdown_type;

經(jīng)過上述改進，Mixly可以支持整數(shù)、小數(shù)、布爾、字符串這4種類型，這使得Mixly的功能比其它Arduino圖形化軟件更強大，成為了目前Arduino圖形化編程工具中功能最全的軟件。

4 可擴展模塊管理

為了讓Mixly用戶更好地體現(xiàn)自己的價值，實現(xiàn)工作共享，本研究團隊在Mixly中加入了可擴展模塊管理功能，體現(xiàn)出一定的生態(tài)性，使軟件變得開放和自由。該功能具體體現(xiàn)在用戶可以編寫自己的庫，進行“導出庫”和“導入庫”操作，使用戶可以編寫自己的圖形模塊并整合到軟件中去。

本研究采用動態(tài)改變JavaScript的方法實現(xiàn)生態(tài)性。在程序啟動時，系統(tǒng)會自動獲取用戶自定義的所有庫文件，讀取庫文件中的數(shù)據(jù)，并將數(shù)據(jù)存入到.js文件中，以達到持久化的目的，使軟件啟動即可看到自定義的庫。

五 應用評價

Mixly初始版本開發(fā)完成后，先后在新疆生產(chǎn)建設兵團第二師華山中學、黑龍江省蘭西縣崇文實驗學校、北京市石景山區(qū)楊莊中學、河南溫縣及廣東佛山等地投入使用。為了進一步調(diào)研用戶的體驗情況，以便為后期改進設計提供建設性的意見，本研究隨機選取13位學習者作為研究對象進行問卷調(diào)查和訪談，且實驗過程中學習者全程使用Mixly作為編程工具開展學習活動。

表1 學習者對Mmixly的評價信息統(tǒng)計表

學習活動開始之前，本研究對學習者進行了前測調(diào)研，通過問卷的形式調(diào)查學習者是否曾接觸過編程課程或者編程軟件，以觀察學習者在使用的過程中是否存在一定的認知負荷差異。結果顯示，有11名學習者曾接觸過編程課程、9名學習者曾接觸過其它編程軟件，這些編程軟件主要包含C語言、Borlandc、Scratch等。學習活動結束后，從兩個方面對13位學習者進行用戶體驗調(diào)查：一是學習者對Mixly的整體評價，二是學習者對Mixly的界面、模塊、參數(shù)等方面的體驗評價。所得調(diào)查結果如表1所示。

六 總結與展望

Mixly作為一個開源免費軟件，現(xiàn)已發(fā)布至0.96版，且還在持續(xù)開發(fā)中，所有用戶都可以從創(chuàng)客教育實驗室（http://maker.bnu.edu.cn）處免費下載使用。從當前創(chuàng)客教育群體的反應來看，效果相當不錯。Mixly的使用人數(shù)正在逐步增加，其中既有中小學教師和學生，也有大學教師和學生。大家一致認為，Mixly的出現(xiàn)大大降低了創(chuàng)客教育相關課程的開課門檻，激發(fā)了學生更多的創(chuàng)意與分享熱情。相信在大家的共同努力下，Mixly將會成為業(yè)界最好用且最流行的Arduino圖形化編程工具，并為創(chuàng)客教育的發(fā)展作出應有的貢獻。

[1]傅騫,王辭曉.當創(chuàng)客遇上STEAM教育[J].現(xiàn)代教育技術,2014,(10):37-42.

[2]陳有志.ArduBlock:物理世界與虛擬世界的橋梁[J].中國信息技術教育,2013,(12):76-78.

[3]BlocklyDuino.BlocklyDuino is a web-based visual programming editor for arduino[EB/OL].

[4]MakeBlock.Using scratch-style coding to program arduino robots inspired by scratch[EB/OL].

[5]Google.Blockly is a library for building visual programming editors[EB/OL].

Development of a Graphical Programming Tool Named Mixly for Popular Maker Education

FU Qian LUO Kai-liang CHEN Lu
（School of Education Technolog,Beijing Normal University,Beijing,China 100875)

Although Arduino is the important media of maker education,the course setting of Arduino poses great challenge to teachers duing to technical threshold limitation.After analyzing and comparing the existing graphic programming tools for Arduino deeply,a new graphical programming system name Mixly was described here.The value of Mixly that were constituted by the system framework and key technologies implementation was verified by the users’ feedback data.

maker education; Arduino; graphical programming; Mixly

小米

G40-057

A 【論文編號】1009—8097（2016）01—0120—07

10.3969/j.issn.1009-8097.2016.01.018

本文受北京市教育科學“十二五”規(guī)劃2015年度課題“面向北京市中小學創(chuàng)客教育的教學體系研究——以創(chuàng)意電子教育為例”(項目編號：CJA15234)資助。

傅騫，副教授，博士，研究方向為物聯(lián)網(wǎng)技術及教育應用、創(chuàng)客教育支持生態(tài)建設，郵箱為fredqian@bnu.edu.cn。

2015年7月31日