Webduino Blockly 基礎教學

Webduino Blockly 的介面主要分成三個部分，第一個部分是最上方的選單列，裏頭有「程式積木」與「產生程式碼」兩個互相切換的頁籤，以及「程式碼編輯器」、「查看裝置狀態 ... Webduino教學搜尋這個協作平台 首頁WebduinoBlockly基礎教學Webduino初始化設定Webduino的基本介紹Webduino的開發方式Webduino與Arduino的差異什麼是Webduino開發板教學範例Smart按鈕開關控制YoutubeSmart的按鈕開關光敏電阻控制三色LED控制單顆LED燈協作平台地圖 WebduinoBlockly基礎教學 WebduinoBlockly編輯工具：webduino-blocklyWebduinoBlockly全系列教學影片工具介面說明WebduinoBlockly的介面主要分成三個部分，第一個部分是最上方的選單列，裏頭有「程式積木」與「產生程式碼」兩個互相切換的頁籤，以及「程式碼編輯器」、「查看裝置狀態」、「網頁互動測試」、「清空」和「執行」這幾個按鈕，畫面最左側區域就是「程式積木」的選單，中間空白的區域則是編輯區域。

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

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

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

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

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

元件模組：電子零組件模組。

傳感器：傳感器相關模組。

玩具應用：可以控制飛天魚或車子的積木。

資料庫：串接Firebase的積木。

網頁互動：和右側「網頁互動測試」區域相關的控制積木。

彈出個HelloWorld點選「基本功能」的「文字」，把「印出」的積木和「填入文字」的積木拉到畫面中組合，在「填入文字」的積木裡寫上HelloWorld。

點選右上角紅色的「執行」按鈕，就會執行我們剛剛組合好的積木程式，瀏覽器就會彈出HelloWorld的對話視窗。

在網頁裡顯示文字或數字只是會彈出視窗還不夠，接著我們要在網頁裡面顯示文字或數字(這樣就可以用電子零件或傳感器和網頁互動了)，因為要和網頁互動，所以我們要用到左下角「網頁互動」的積木，這裏我們使用「顯示文字」的「顯示」，文字或數字將會出現在右側的「網頁測試區」裡面。

(網頁測試區可以點選右上角的按鈕打開)完成後點選右上角紅色的「執行」按鈕，就會看到文字出現在網頁測試區裡面，同樣的方式不僅限於文字，數字也是可以的。

點選網頁按鈕後，彈出文字當我們可以和網頁互動後，再來我們點選網頁上的按鈕，來彈出對話視窗，這裏會用到「網頁互動」的「按鈕行為」，表示當我們按下某顆按鈕，就會執行某件事情，而「網頁互動測試」裡面，同樣要選擇「按鈕行為」，這裏設定點選按鈕1會彈出HelloWorld，點選按鈕2會彈出Webduino，點選按鈕3則會彈出Blockly。

完成後點選右上角紅色的「執行」按鈕，點擊網頁上面的按鈕，就會彈出對應的文字對話視窗了。

控制Webduino開發板從以上幾個例子大概就能了解WebduinoBlockly的運作原理，接著要來控制開發板，這裏我們把開發板的積木拉到畫面中，可以選擇開發板要使用「Wi-Fi」、「序列埠」還是「藍芽」進行控制，如果選擇「Wi-Fi」則要和Webduino的開發板搭配(馬克1號或WebduinoFly)，如果「序列埠」和「藍芽」則必須再安裝ChromeProxyAPI(參考「ChromeAPIProxy使用說明」和「Arduino韌體下載與燒錄」)選擇「Wi-fi」就要填入開發板的名字(出廠時每塊開發板都會有個獨一無二的device名字)，同時我們也可以從右上方的「裝置狀態」(閃電圖案)，觀看現在開發板有沒有上線，有上線就會是綠燈，沒有上線就會是紅燈，一定要有上線才能用Wi-Fi進行控制。

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

(詳細教學請見官網的教學文章)產生程式碼點選JavaScript的頁籤，就會自動幫我們將程式積木轉換為標準的JavaScript。

(如果你遇到專出來一片空白，很大的可能性是你的程式積木排列錯誤，造成產生的程式碼是錯誤的)轉換為程式碼後，我們可以點選「複製」的按鈕，把程式碼全部複製起來，貼到自己常用的網頁編輯器去進行編輯。

打開程式編輯器如果自己沒有網頁編輯器，也可以點選右上方的「程式碼編輯器」，會開啟WebduinoBin編輯器。

(使用JsBinopensource)打開編輯器後，會發現剛剛我們積木所組合的程式碼，已經自動帶入編輯器的JavaScript區域，這時就可以完全使用JavaScript來編輯囉！如果是像上面有網頁畫面的程式，網頁的畫面元素與樣式也都會一併帶入程式編輯器內，相當的方便。

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

開始玩轉WebduinoBlockly吧！ Comments Signin|RecentSiteActivity|ReportAbuse|PrintPage|PoweredByGoogleSites