認識 Webduino Blockly

Webduino Blockly 線上編輯工具是 Webduino 所研發出來的圖像化編輯工具,採用 Google Blockly 設計而成,讓一些對於網頁程式語言比較陌生,或者希望快速實現效果的朋友,可以利用 Webduino Blockly 線上編輯工具極速的實現各式各樣的創意。

完整的 Blockly 教學請參考:Blockly 教學

工具介面說明

Webduino Blockly 的介面主要分成三個部分,第一個部分是左邊與左上方的選單列,裏頭有「程式積木」與「JavaScript」兩個互相切換的頁籤,右上方依序為「產生 QRCode」、「打開程式編輯器,並匯出完整程式碼」、「查看裝置狀態」、「快速載入範例」、「網頁互動測試」、「刪除所有積木」、「存檔並產生連結」和「執行」。

webduino blockly information

控制 Webduino 開發板

Webduino Blockly 可以透過四種方式操控開發板,分別是:「Wi-Fi」、「序列埠」、「藍芽」和「WebSocket」,如果選擇「Wi-Fi」則要和 Webduino 的開發板搭配 ( 馬克 1 號或 Webduino Fly ),如果「序列埠」和「藍芽」則必須再安裝 Chrome Proxy API,WebSocket 則必須和開發板在同一個區域網路的環境下。

參考:Arduino 韌體下載與燒錄Chrome API Proxy 安裝使用藍芽操控

webduino blockly 開發板

選擇「Wi-fi」就要填入開發板的名字 ( 出廠時每塊開發板都會有個獨一無二的 device 名字 ),同時我們也可以從右上方的「裝置狀態」( 閃電圖案 ),觀看現在開發板有沒有上線,有上線就會是綠燈,沒有上線就會是紅燈,一定要有上線才能用 Wi-Fi 進行控制。

webduino blockly 裝態

再來我們就可以把要控制的電子元件或傳感器,放到開發板的缺口內,就類似我們把實體的電子零件或傳感器接到實體的開發板上頭,接上去的腳位都可以從電子零件或傳感器的積木選擇,接著就可以開始控制這些元件了。

webduino blockly

由積木產生程式碼

通常使用這種積木式的軟體,都無法看到背後程式碼的長相,而 Webduino 的特色之一,就是能夠將積木的組合,轉換成標準的程式碼,並可進一步開發應用。

webduino blockly 積木程式

完整的程式碼更可以透過點選右上方的「</>」按鈕,匯出至程式編輯器中。

webduino blockly 積木程式

儲存檔案

當我們編輯完之後,可以點選 Webduino Blockly 右上方的「連結」圖示,會產生一組連結網址,這組連結網址代表的是當前畫面,只要把這組網址記到瀏覽器的「我的最愛」或「書籤」內,下次再打開就會出現一模一樣的畫面了。

webduino blockly 儲存檔案

網頁互動測試

Webduino Blockly 有內嵌了一些網頁範本,點選網頁互動測試的按鈕,就可以從下拉選單選擇這些預設網頁,並透過這些網頁操控物聯網裝置。

下拉選擇不同的網頁範本後,在左側積木清單內會產生對應的積木功能。

webduino blockly 網頁互動

快速載入預設範本

在一開始接觸 Blockly 的時候,一定會有許多不知所措或搞不清楚的功能,如果想快速體驗,我們也可以透過「載入範例積木」的功能快速載入預設的範本,我們可以點選範本名稱載入「全新」積木 ( 會取代掉原本工作區的積木 ),或點選後方的「+」號來「添加」積木 ( 添加積木不會取代掉原本工作區 )。

webduinio blockly 預設範本

查看裝置狀態

點選查看裝置狀態的按鈕,會打開一個輸入的欄位,在欄位內填入裝置的 Device ID,如果後方閃電變成綠色,表示裝置正在線上,如果後方閃電是紅色,表示裝置離線。

webduino blockly 裝置狀態

完美支援行動裝置

Webduino Blockly 內建了一個 QRCode 的按鈕,只要點選這個按鈕就會產生一個 QRCode 讓大家掃描測試,掃描出來的結果則是「目前網頁測試區」的網頁。

webduino blockly 行動裝置

webduino blockly 行動裝置

Webduino 擁有的程式積木

Webduino Blockly 擁有各式各樣功能的程式積木,這些積木也都預先歸類在左側的選單裡,選單分成以下幾個主要區塊:

webduino blockly 積木