認識Webduino Blockly

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

WebduinoBlockly(雲端平台) WebduinoBlockly(體驗版) 完整的Blockly教學請參考：Blockly教學 工具介面說明 WebduinoBlockly的介面主要分成三個部分，第一個部分是左邊與左上方的選單列，裏頭有「程式積木」與「JavaScript」兩個互相切換的頁籤，右上方依序為「產生QRCode」、「打開程式編輯器，並匯出完整程式碼」、「查看裝置狀態」、「快速載入範例」、「網頁互動測試」、「刪除所有積木」、「存檔並產生連結」和「執行」。

控制Webduino開發板 WebduinoBlockly可以透過兩種方式操控開發板，包含：「Wi-Fi」和「WebSocket」。

如果選擇「Wi-Fi」需要和Webduino的開發板搭配(馬克1號、WebduinoFly、WebduinoSmart)；WebSocket則必須和開發板使用同一個區域網路環境。

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

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

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

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

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

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

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

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

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

完美支援行動裝置 WebduinoBlockly內建了一個QRCode的按鈕，只要點選這個按鈕就會產生一個QRCode讓大家掃描測試，掃描出來的結果則是「目前網頁測試區」的網頁。

Webduino擁有的程式積木 WebduinoBlockly擁有各式各樣功能的程式積木，這些積木也都預先歸類在左側的選單裡，選單分成以下幾個主要區塊： 變數：就是程式碼裡常見的「變量」，可以命名變數與使用變數。

流程：就是程式碼裡的「函式function」，可以命名流程與呼叫流程。

基本功能：包含基本的邏輯、迴圈、文字、數學式、列表(陣列)和顏色設定。

進階功能：包含控制台、延遲、重複、文字邏輯、數值轉換、鍵盤和聲控。

開發板控制：Webduino的開發板以及私有雲的積木，可以偵測腳位與上線狀態。

發光元件：會發出燈光的LED相關積木 輸入輸出：發出訊號的電子零件模組積木 環境偵測：可偵測環境數值變化相關的感測器模組 無線感應：可無線通訊的傳感器積木 玩具及馬達：可以控制飛天魚或車子的積木。

資料庫：串接Firebase的積木。

聯絡我們 如果對於Webduino產品有興趣，歡迎透過下列方式購買： 個人線上購買：https://store.webduino.io/(支援信用卡、超商取貨付款) 企業＆學校採購：來信[email protected]或來電07-3388511。

如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們： Email：[email protected](如對於產品有使用上的問題，建議透過Email附上照片或影片聯繫) Facebook粉絲團：https://www.facebook.com/webduino/ Facebook技術討論社團：https://www.facebook.com/groups/webduino/ Webduino基礎教學 Webduino開發板 馬克一號(介紹) 馬克一號(初始化設定) WebduinoFly(介紹) WebduinoFly(初始化設定) WebduinoSmart(介紹) WebduinoSmart(初始化設定) 開發板擴充設定 Arduino韌體下載與燒錄 使用WebSocket操控 WebduinoBlockly 認識WebduinoBlockly WebduinoBlockly基本操作 WebduinoBlockly特殊功能 連動多塊開發板 腳位偵測設定 發光元件 LED 三色LED LED點矩陣 輸入輸出 繼電器 蜂鳴器 按鈕開關 震動開關 搖桿 紅外線發射接收 環境偵測 超音波偵測 溫濕度偵測 人體紅外線偵測 聲音偵測 光敏電阻 可變電阻 土壤濕度偵測 三軸加速度計 無線感應 RFID 玩具及馬達 伺服馬達 Webduino綜合應用 元件應用 LED(兩顆交互閃爍) LED(霹靂燈) LED(語音聲控) LED(人臉追蹤) LED(Google表單操控) 三色LED(調色盤) 蜂鳴器(多人協奏) 蜂鳴器(會說話的鬧鐘) 傳感器應用 超音波(改變圖片大小) 超音波(控制LED) 超音波(控制三色LED) 溫濕度(Firebase紀錄) RFID(控制Youtube) 可變電阻(改變Youtube音量) 聲音偵測(吹點矩陣蠟燭) 玩具改造 Smart自走車(組裝步驟) Smart自走車(網頁遙控器操控) Smart自走車(超音波避障) Smart自走車(溫濕度感測車) Smart智慧路燈(組裝步驟) Smart智慧路燈(接線教學) Smart飛天車(組裝步驟) Smart飛天車(接線教學) 馬克一號自走車(鍵盤操控) 馬克一號自走車(行動裝置操控) 馬克一號自走車(循跡功能) WABot機器人(初始化設定) WABot機器人(基礎操控) 百元玩具車大改造 智慧生活 智慧植栽(水泵) 智慧插座(組裝與操控) 智慧追蹤(伺服馬達+攝影機) Webduino雲端平台 基本介紹 註冊與登入 Blockly程式積木 Device裝置管理(裝置認證) Device裝置管理(雲端更新) 兌換券(領取與添加新功能) 發光元件 LCD螢幕 七段顯示器 輸入輸出 MP3播放器 環境偵測 PM2.5細懸浮微粒偵測 顏色感測器 電子羅盤 光度計 溫濕度計 資料庫 Google試算表(設定) Google試算表(儲存) Google試算表(讀取) 綜合應用 記錄PM2.5(Google試算表) 玩具改造 Smart智慧小屋（組裝步驟） Blockly教學 基本功能 變數 流程 文字 數學式 列表 邏輯 迴圈 進階功能 控制台 等待 數值轉換 鍵盤行為 語音聲控 語音朗讀 行動裝置 網頁互動區 文字、點擊、圖片 顏色、按鈕、拉霸 遙控器 Youtube 影像追蹤 創意應用 抽籤並朗讀姓名 大樂透自動選號 隨機組合朗讀語句 語音朗讀逐字稿 小時鐘 語音報時 九九乘法你問我答 BlocklyGames 迷宮 鳥 烏龜 影片 池塘導師 Dr.Smart教學 開發板元件 三色LED 三色LED(色彩輪播) 光敏電阻 光敏電阻(色彩變化) 按鈕開關 按鈕開關(控制顏色) 按鈕開關(控制Youtube) 元件及傳感器 LED 蜂鳴器 震動開關 LED點矩陣 超音波偵測 溫濕度偵測 綜合應用 蜂鳴器(多人協奏) 超音波(倒車雷達) 超音波(控制Youtube) LED點矩陣(顯示距離) LED點矩陣(顯示溫度) 按鈕開關(控制蜂鳴器) 實戰智慧插座 基本操控 組裝智慧插座 網頁操控智慧插座 傳感器應用 超音波偵測距離 光線偵測 人體紅外線偵測 聲音偵測 電視機遙控器 按鈕開關 電流急急棒 土壤濕度偵測 RFID感應 進階應用 語音辨識 人臉、顏色追蹤 手機陀螺儀 聊天室(原理) 聊天室(前後端實作) Google試算表(原理) Google試算表(前後端實作) Google地圖(原理) Google地圖(前後端實作) Youtube互動 Opendata實作 Node-Red(基礎操作) Node-Red(Twitter) Node-Red(E-mail) 日幣匯率(Node-Red爬蟲) 日幣匯率(Node-js爬蟲) 常見問題 Webduino相關 關於Webduino 購買Webduino產品 技術支援與合作 Webduino開發板 關於Webduino開發板 連線相關＆初始化設定問題 Web:Bit相關問題 WebduinoSmart相關問題 其它問題