面向創客教育普及的Mixly圖形化編程工具開發*

傅 騫 羅開亮 陳 露

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

面向創客教育普及的Mixly圖形化編程工具開發*

傅 騫 羅開亮 陳 露

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

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

創客教育；Arduino；圖形化編程；Mixly

一 問題的提出

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

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

二 當前研究現狀

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

1 Ardublock

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

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

圖1 Ardublock界面

2 BlocklyDuino

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

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

圖2 BlocklyDuino界面

3 mBlock

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

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

圖3 mBlock界面

4 總結

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

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

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

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

三 Mixly系統架構

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

圖4 Mixly系統架構

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

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

圖5 Mixly主界面

四 Mixly關鍵技術的實現

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

1 圖形化編程呈現

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

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

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

2 網頁與客戶端應用的融合

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

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

3 Arduino數據類型實現

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

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

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

另一方面需要相應的Blockly.Arduino.variables_declare函數，以實現數據類型的獲取：

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

Blockly.Arduino.variableTypes_[varName] = dropdown_type;

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

4 可擴展模塊管理

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

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

五 應用評價

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

表1 學習者對Mmixly的評價信息統計表

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

六 總結與展望

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

[1]傅騫,王辭曉.當創客遇上STEAM教育[J].現代教育技術,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

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

傅騫，副教授，博士，研究方向為物聯網技術及教育應用、創客教育支持生態建設，郵箱為fredqian@bnu.edu.cn。

2015年7月31日