Kadence

編輯器 ( 操作介面 )

Web:Bit 編輯器是 Webduino 最新的程式編輯&學習軟體,除了基於 Webduino Blockly 的操作方式,也大幅簡化了操作的步驟流程,甚至額外添加了虛擬開發板以及小怪獸互動舞台,不論是大朋友小朋友,都可以快速又輕鬆的入門 Web:Bit。

操作介面一覽

Web:Bit 編輯器的操作介面分成下列幾個區塊:

  • 主功能選單:包含檔案儲存與開啟、範例和教學、刪除所有積木、更多功能、執行按鈕和帳號。
  • 積木 / 程式碼切換:將寫好的程式轉換為標準 Javascript,讓學習程式更簡單。
  • 積木清單:包含基本功能、小怪獸互動、開發板操控和物聯網擴充…等積木。
  • 積木編輯區:進行積木的邏輯組合,產生各種不同的情境應用。
  • 開發板模擬器:包含一塊虛擬的 Web:Bit 開發板,可以模擬實際開發板的狀況和應用。
  • 小怪獸互動舞台:包含四種不同造型顏色的小怪獸,可以透過積木設定相關動作和互動情境。
  • 縮放按鈕:夠快速縮放畫面積木或刪除積木。
  • 畫面收折按鈕:快速收折開發板模擬器和小怪獸互動區,讓積木編輯區域放大或縮小。

安裝版不含「帳號」、「分享」功能。

Web:Bit 編輯器 ( 操作介面 )

程式積木是什麼?

對於第一次接觸的人來說,會不太清楚「程式積木」的由來,「積木」是翻譯自「block」這個英文單字,其操作方式類似「組裝積木」或「拼圖」的概念,透過互相堆疊和搭配組合,就能判斷不同的邏輯或依據指定的排列順序,實現對應的動作。

Web:Bit 編輯器 ( 操作介面 )

Web:Bit 編輯器是基於 Google 的圖像式程式編輯工具 Blockly 所開發出的編輯工具,每塊積木都有對應的功能和用途,如果想了解該積木的使用方式,可以「使用滑鼠在指定的積木上按右鍵」,就能開啟積木的功能列表,點擊「教學」可以閱讀該積木的教學文件,如果該積木有「小工具」,則可以點擊小工具打開更多進階功能。

Web:Bit 編輯器 ( 操作介面 )

雲端部署

雲端部署的功能可以幫主我們將編輯好的程式積木,部署到 Webduino 雲端伺服器,如此一來就可以在電腦關閉的狀態下,繼續執行對應的程式動作 ( 仍然需保持開發板正常的網路連線 ),只要程式積木裡包含 Wi-Fi 連線的開發板,就能使用雲端部署的功能。

注意,雲端部署成功後,會在下列兩種狀況下停止:

  • 第一種,開發板網路斷線超過 20 分鐘。
  • 第二種,重新雲端部署,或點擊編輯器的「執行」按鈕。

Web:Bit 編輯器 ( 操作介面 )

網頁版、安裝版的主功能選單差異

右上方的主功能選單,包含 Web:Bit 編輯器的主要功能,但「網頁版」和「安裝版」編輯器的選單略有不同,在網頁版可以使用「檔案 > 分享連結」而安裝版不行,分享連結可以幫助我們快速存檔產生一段「網址」,下次再開啟這個網址就可以開啟檔案,因為安裝版無法開啟網址,所以無法使用該選項。

Web:Bit 編輯器 ( 操作介面 )

在網頁版主選單的「更多」裏頭,也包含「下載安裝版」的選項,點擊後會下載安裝版的壓縮檔,解壓縮安裝就可以使用安裝版。( 目前安裝版編輯器僅支援 Windows )

Web:Bit 編輯器 ( 操作介面 )

網頁版也新增了「帳號」功能,進入 Web:Bit 教育版時,可以選擇何種管道登入,進入後就可以看到使用的帳號。
此帳號會跟 Webduino 影像訓練平台 串連,可以將帳號中的影像模型讀取到積木中使用。

Web:Bit 編輯器 ( 操作介面 )

程式積木小技巧

小技巧 1、多行與單行輸入

如果程式積木太長,我們可以用滑鼠在積木上按右鍵,若該積木支援多行輸入,可以點選「多行輸入」將積木由單行變成多行,也更方便閱讀和編輯。

Web:Bit 編輯器 ( 操作介面 )

小技巧 2、整理積木

在實作程式積木時,往往會遇到積木四面八方散落在畫面上的狀況,這時可以在編輯區域上按右鍵,選擇「整理積木」將積木排列整齊。

Web:Bit 編輯器 ( 操作介面 )

分享