Blockly 應用程式是包含 Blockly 編輯器 (工作區) 的網路應用程式。本文件將舉例說明 Blockly 應用程式的用途,並探討典型的 UI 功能。
如果您尚未閱讀,請務必先參閱圖像詞彙表和基本應用程式步驟,再繼續閱讀本文。
Blockly 應用程式有什麼用途?
Blockly 應用程式可協助使用者撰寫各種領域的程式,從電玩遊戲到機器人,再到資料分析。使用者使用區塊編寫程式,應用程式會利用這些區塊產生文字程式碼,例如 JavaScript 或 Python。接著,應用程式會直接執行產生的程式碼,或是使用者下載並在其他平台上執行,例如機器人或手持式電玩遊戲控制器。
以下列舉一些使用者可透過 Blockly 應用程式編寫的程式類型:
拼圖解法、動畫或音樂:產生的程式碼會解決拼圖 (例如迷宮)、顯示動畫或播放音樂。如需範例,請參閱 Code.org 的音樂實驗室。
遊戲:產生的程式碼會執行遊戲。舉例來說,您可以在 MakeCode Arcade 中建立「Whack the Mole」的前兩個關卡,然後將遊戲下載到控制器,或在模擬器中遊玩。
機器人:產生的程式碼會指揮機器人。例如,使用 Ozoblockly 為機器人編寫程式,然後下載到實際機器人或在模擬器中執行。
繪圖:產生的程式碼會繪製 2D 或 3D 圖形。如需範例,請參閱 BlocksCAD。
資料分析:生成的程式碼會分析資料並建立圖表。如需範例,請參閱這項對話平台的示範。
應用程式專屬程式碼:產生的程式碼會執行特定應用程式的專屬工作。舉例來說,Blockly 開發人員工具是設計新 Blockly 區塊的工具。產生區塊定義程式碼,供使用者複製並貼入自己的 Blockly 應用程式。
使用者介面
如要瞭解 Blockly 應用程式的常見元件,請查看其使用者介面。
基本 UI 元件
幾乎所有 Blockly 應用程式都共用幾個基本元件:Blockly 編輯器 (工作區)、輸出面板和 Run
按鈕。舉例來說,以下是 Blockly Games 中「迷宮」的 UI。
部分 Blockly 應用程式會省略 Run
按鈕,改為在使用者每次變更時更新輸出面板。舉例來說,Blockly 範例中的Graph應用程式有兩個輸出面板 (一個用於圖表,另一個用於方程式),會在每次變更時更新。
部分應用程式沒有輸出面板。這類情況最常見於硬體應用程式,例如用於編寫機器人的應用程式。雖然其中有些應用程式包含硬體模擬器,但許多應用程式只允許使用者直接在目標裝置上下載及執行產生的程式碼。
其他 UI 元件
大多數應用程式都會使用其他 UI 元件。其中有些可滿足一般需求,例如儲存使用者的作業;有些則可滿足應用程式特定需求,例如設計 GUI。例如:
Scratch 是用於製作動畫和電玩遊戲的應用程式,內含圖形和音效編輯器、用於建立新圖塊和背景的面板,以及檔案、編輯和設定選單:
MakeCode Arcade 是用於製作電玩遊戲的應用程式,內含輸出控制項、程式碼和圖形編輯器、設定選單,以及下載和儲存按鈕。其輸出面板會模擬手持式遊戲控制器。
MIT App Inventor 是用於建立手機應用程式的應用程式,其 GUI 設計工具和 Blockly 編輯器有各自的畫面,以及檔案、連線、建構和設定選單。使用者可在手機上測試產生的程式碼,而非在輸出面板上測試。
您應納入哪些額外元件,取決於應用程式的目標和使用者的功能。常見的元件包括:
管理:
- 檔案管理 (新增、開啟、儲存、另存新檔、刪除)
- 帳戶管理 (建立、登入、登出)
- 設定 (語言、使用者介面設定)
程式設計:
- 編輯指令 (復原、重做、複製、剪下、貼上、複製)
- GUI 設計師
- 圖形和音訊編輯器
- 程式碼編輯器或唯讀程式碼顯示畫面
測試
- 輸出設定 (開始/停止、播放速度、音量、螢幕截圖等)
- 偵錯工具 (中斷點、執行、步驟、區塊醒目顯示)
- 設定測試參數
硬體
- 連線方式 (USB、藍牙、QR code)
- 設定 (選擇型號、選擇配件、指派元件名稱)
- 控制 (手動控制機器人、記錄機器人位置)
- 下載程式碼
說明
- 說明文件
- 互動式教學課程
- 依情境提供的說明
接下來要採取什麼行動?
如果您仍在考慮應用程式,請繼續閱讀有關設計考量的相關資訊。
如要瞭解如何建構簡單的應用程式,請試試「開始使用 Blockly 程式碼研究室」。
如果您已準備好撰寫應用程式,請按照下列步驟操作: