自訂模塊:樣式指南

多年來,Blockly 和 Blockly Games 團隊學到了許多經驗 並適用於正在開發新模塊的玩家以下是 或他人經常犯錯的集合。

這些是我們運用 Blockly 的視覺風格 可能不適用於所有用途或設計。還有其他解決方案。這是 而不是詳盡列出使用者可能遇到的問題,以及該如何避免 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件每個案件都略有不同,各有優缺點。

1. 條件式與迴圈

新使用者最困難的封鎖條件是條件式和迴圈。多個 以區塊為基礎的環境會將這兩個區塊歸類為同一個「Controls」 類別,這兩個方塊的形狀和顏色相同。 這通常會造成新使用者混亂兩個方塊, 禁止建議將條件和迴圈移至獨立的「邏輯」和 「循環播放」類別,而且每個類別都有不同的顏色如此一來 這些不同的點子雖然形狀相似,但行為卻不同。

建議做法:區隔條件和迴圈。

2. 一份式清單

初級程式設計師若首次遇到以零為基礎的清單,就會產生不良反應 讓應用程式從可以最快做出回應的位置 回應使用者要求因此 Blockly 依循 Lua 和 Lambda Moo 的領先地位建立名單 以及字串索引建立作業

如需進一步使用 Blockly,支援以零為基礎的清單 文字轉換功能適合年幼或新手觀眾 我們仍建議採用以單一方式建立索引。

建議:一是第一個數字。

3. 使用者輸入內容

向使用者取得參數的方式有三種。下拉式選單 最為嚴格,適用於簡單的教學課程和練習輸入欄位 也能享有更多的自由 也很適合發揮創意值區塊 「輸入內容」(通常搭配陰影區塊) 可讓您計算 (例如隨機產生器),而不只是靜態值。

建議:選擇符合使用者需求的輸入方式。

4. 直播區塊圖片

區塊的說明文件應包含所參照區塊的圖片 。擷取螢幕畫面非常簡單。但如果有 50 張這類圖片 將應用程式翻譯成 50 種語言 包括靜態圖片接下來,色彩配置就變換了,2,500 張圖片需要更新 --

為了在維護之夜免於維護幹擾,我們更換了 Blockly Games。 所有螢幕截圖,均以唯讀模式「封鎖」執行。成果 雖然看起來與圖片完全相同,但保證符合現況。唯讀 都能支援國際化

建議:如果支援多種語言,請使用唯讀模式。

5. 前一側

美國兒童的意見回饋 (但有趣的是,其他國家/地區的兒童沒有意見) 顯示了左右兩側的混淆這個問題解決了 增加箭頭如果是相對於顯示圖片 (例如顯示圖片) 的方向 箭頭樣式相當重要按下 → 直箭頭或 ↱ 轉向箭頭,造成混淆 當顯示圖片朝反方向時。最有幫助的是 ⟳ 循環 箭頭,即使轉向角度小於箭頭代表也一樣。

建議:盡可能使用萬國碼 (Unicode) 圖示補充文字。

6. 高階封鎖條件

盡可能採取高階做法,即使這能減少 執行效能或彈性以下列 Apps Script 運算式為例:

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

採用 1:1 對應,並保留所有潛在功能。 就會以四個區塊建構但 Blockly 的目標是 並提供一個能封裝整個運算式的區塊目標為 以針對 95% 案例進行最佳化,即便這使剩餘的 5% 更加困難也是如此。 Blockly 不會取代文字語言, 目的是協助使用者熟悉初始學習流程, 文字型語言

建議:不要盲目將整個 API 轉換為區塊,

7. 選填的傳回值

文字型程式設計中的許多函式會執行動作,然後傳回 值。不一定會使用這個傳回值。例如堆疊的 pop() 函式。可能會呼叫 Pop,取得並移除最後一個元素。 或者呼叫此方法,直接移除具有傳回值的最後一個元素 系統會忽略這些偏見

var last = stack.pop();  // Get and remove last element.
stack.pop();  // Just remove last element.

封鎖型語言通常不適合忽略傳回值。A 罩杯 值區塊必須插入可接受該值的項目。另有 需採取幾種策略

a) 引導問題所在。大多數以區塊為基礎的語言設計 避免遇到這類情況例如,Sratch 沒有任何方塊 會同時計算副作用和回傳值

b) 提供兩個區塊。如果工具箱中的空間沒有問題 解決辦法是提供這類型的封鎖條件 不含傳回值缺點是會讓使用者感到困惑 工具箱中有許多幾乎相同的區塊

c) 修改一個區塊。使用下拉式選單、核取方塊或其他控制項 使用者選擇是否有傳回值。方塊 並根據選項變更形狀舉例來說 顯示在 Blockly 的清單存取區塊中

d) 吃得到。第一版 App Inventor 建立了特殊的管道 無連結值的區塊使用者不瞭解這個概念 第二個版本的 App Inventor 移除了管道區塊 建議使用者直接將值指派給丟棄的變數。

建議:每項策略各有優缺點,請選擇適合 以及對使用者的影響

8. 增加的方塊

某些區塊可能需要輸入數量不一的輸入內容。例如 新增區塊,將任意一組數字相加,或加上 if/elseif/else 包含一組 elseif 子句的區塊,或是帶有 任意數量的初始化元素。有幾種策略 每個階段都有各自的優缺點

a) 最簡單的做法是,讓使用者以 方塊。例如將兩個數字做為巢狀結構,以加入三個數字 新增區塊另一個例子是只在/else 區塊 並讓使用者利用巢狀結構建立 elseif 條件

這種方法的優點是一開始能簡化 (無論是使用者或 開發人員)。缺點是 巢狀結構的數量,程式碼會變得繁瑣且難以讓使用者 讀取及維護

b) 另一種替代方法是動態展開區塊,每次都會出現一個區塊 免費輸入內容同樣地,區塊也會刪除最後一個輸入內容 兩項免費輸入內容這是 使用 App Inventor。

App Inventor 的用戶對一些自動成長的封鎖項目表示不喜歡 首先,YouTube 一直是歡迎自由意見,而計畫也從未如此 「complete」。第二,在堆疊中間插入元素 這個做法會造成編輯和困擾 正在重新連線也就是說,如果順序不重要 以配合其程式中孔洞,這是非常方便的選擇。

c) 為瞭解決這個問題,有些開發人員會替程式碼加上 +/- 按鈕, 手動新增或移除輸入內容開啟 Roberta 後,使用兩個按鈕 或是從底部移除輸入來源其他開發人員會在每個步驟中分別加入兩個按鈕 這樣即使在堆疊中央插入和刪除 大小。其他會在每列加入兩個向上/向下按鈕, 可能會用到該堆疊

這項策略提供一系列選項,包括每個區塊僅兩個按鈕 最多可選四個按鈕將至於使用者 執行所需動作,但 UI 的另一端會填入 按鈕看起來是星艦企業的橋樑。

d) 最靈活的做法是在區塊中新增變動器泡泡。這個 會以一個按鈕表示,用於開啟該資源的設定對話方塊 封鎖。系統可能會新增、刪除或重新排列元素。

這種方法的缺點是,變動者不符合直覺 沒有使用經驗引入變動器時,需要某種形式的指示。 以年幼兒童為目標的封鎖型應用程式不得使用更動者。 儘管一旦學到了知識,進階使用者還是非常有價值。

建議:每項策略各有優缺點,請選擇適合 以及對使用者的影響

9. 產生乾淨程式碼

Advanced Blockly 使用者應能查看 Python、PHP、Lua、Dart 等),即可立即辨識他們編寫的程式。 這代表需要額外費心,才能保留這段機器產生的程式碼 。多餘的括號、數值變數、已破壞的空白字元和 詳盡的程式碼範本都能產生優雅的程式碼。 產生的程式碼應包含註解,且必須符合 Google 的樣式指南

建議:為您產生的程式碼感到自豪。向使用者顯示。

10. 語言相依性

想要使用簡潔的程式碼,還有一個好處是 Blockly 的行為 主要根據跨編譯語言的行為定義。最常出現 常見的輸出語言是 JavaScript,但如果 Blockly 打算跨平台編譯 轉移到其他語言,請勿以不合理的方式嘗試維持 做為兩種語言的確切行為例如,在 JavaScript 中,將空白 string 是 false,但在 Lua 中則是 true。定義單一物件的模式 無論目標語言為何,區塊語言都會執行 Blockly 程式碼的行為 會產生無法維護的程式碼,這看起來是來自 GWT 編譯器。

建議: Blockly 並非語言,且允許將現有語言設為 影響行為