Benutzerdefinierte Bausteine: Styleguide

Im Laufe der Jahre hat das Blockly- und Blockly Games-Team viel gelernt die für diejenigen geeignet sind, die neue Bausteine entwickeln. Im Folgenden finden Sie eine Sammlung von Fehlern, die wir gemacht haben, oder der Fehler, die andere häufig machen.

Dies sind allgemeine Lektionen, die wir mithilfe des visuellen Stils und der gelten möglicherweise nicht für alle Anwendungsfälle oder Designs. Es gibt noch andere Lösungen. Dies ist Eine nicht abschließende Liste der möglichen Probleme und Lösungen . Jeder Fall ist ein wenig anders und hat seine eigenen Vor- und Nachteile.

1. Bedingungen vs. Schleifen

Die schwierigsten Blöcke für neue Nutzer sind Bedingungen und Schleifen. Viele In blockbasierten Umgebungen werden diese beiden Blöcke in derselben „Steuerung“ Dabei haben beide Blöcke dieselbe Form und Farbe. Dies führt oft zu Frustration, da neue Nutzer die beiden Blöcke verwechseln. Blockly empfiehlt, Bedingungen und Schleifen in separate „Logik“ zu verschieben und „Schleifen“ die eine andere Farbe haben. Das macht deutlich, Dies sind unterschiedliche Ideen, die sich unterschiedlich verhalten, obwohl sie ähnliche Formen haben.

Empfehlung: Bedingungen und Schleifen getrennt halten.

2. Einsbasierte Listen

Programmieranfänger reagieren schlecht, wenn sie auf nullbasierte Listen für den ersten . Als Ergebnis folgt Blockly dem Beispiel von Lua und Lambda Moo, indem sie eine Liste macht. und String-Indexierung eins-basiert.

Für fortgeschrittenere Einsatzmöglichkeiten von Blockly werden nullbasierte Listen unterstützt, um den Wechsel zu Text zu erleichtern. Für ein jüngeres oder unerfahreneres Publikum wird weiterhin empfohlen.

Empfehlung: Eins ist die erste Zahl.

3. Nutzereingaben

Es gibt drei Möglichkeiten, einen Parameter vom Nutzer zu erhalten. Ein Drop-down-Menü und eignet sich gut für einfache Tutorials und Übungen. Ein Eingabefeld bietet mehr Freiheit und eignet sich gut für kreativere Aktivitäten. Einen Wertblock Eingabe (normalerweise mit einem Schattenblock) bietet die Möglichkeit, einen Wert zu berechnen, (z.B. ein Zufallsgenerator) statt einfach nur ein statischer Wert sein.

Empfehlung: Wählen Sie eine für Ihre Nutzer geeignete Eingabemethode aus.

4. Blockbilder live

Die Dokumentation für Blöcke sollte Bilder der verweisenden Blöcke enthalten an. Es ist ganz einfach, Screenshots zu erstellen. Aber wenn es 50 solche Bilder gibt und der in 50 Sprachen übersetzt, plötzlich pflegt man 2.500 statische Bilder. Dann ändert sich das Farbschema und 2.500 Bilder müssen aktualisiert werden. --schon wieder.

Um uns diesem Albtraum zu befreien, haben wir Blockly Games alle Screenshots mit Instanzen von Blockly, die im Lesemodus ausgeführt werden. Das Ergebnis mit dem Bild identisch ist, aber sicher auf dem neuesten Stand ist. Schreibgeschützt ermöglicht die Internationalisierung.

Empfehlung: Wenn mehr als eine Sprache unterstützt wird, verwende den Lesemodus.

5. Deine andere hat die Gruppe verlassen

Feedback von Kindern in den USA (interessant nicht von anderen Ländern) enthüllte Verwirrung zwischen links und rechts. Dieses Problem wurde mit dem Pfeilen hinzugefügt. Wenn die Richtung relativ (zum Beispiel zu einem Avatar) ist, der Stil des Pfeils wichtig ist. Ein Pfeil nach gerader bzw. ein Pfeil nach ↱ ist verwirrend wenn der Avatar in die entgegengesetzte Richtung zeigt. Am hilfreichsten ist ein ⟳ Ring auch in Fällen, in denen der Winkel kleiner ist als der Pfeil anzeigt.

Empfehlung: Ergänzen Sie den Text nach Möglichkeit mit Unicode-Symbolen.

6. Übergeordnete Blöcke

Wo immer möglich, sollte ein übergeordneter Ansatz gewählt werden, auch wenn er Ausführungsleistung oder Flexibilität. Sehen Sie sich diesen Apps Script-Ausdruck an:

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

Bei einer 1:1-Zuordnung, bei der alle potenziellen Funktionen erhalten bleiben, aus vier Blöcken erstellt. Blockly möchte eine höhere Ebene und würde einen Block bereitstellen, der den gesamten Ausdruck einschließt. Das Ziel ist, um die 95% zu optimieren, auch wenn dies die restlichen 5% erschwert. Blockly ist kein Ersatz für textbasierte Sprachen, soll den Nutzenden helfen, die anfängliche Lernkurve zu überwinden, damit sie textbasierten Sprachen.

Empfehlung: Wandeln Sie nicht blind Ihre gesamte API in Blöcke um.

7. Optionale Rückgabewerte

Viele Funktionen in der textbasierten Programmierung führen eine Aktion aus und geben dann einen Wert. Dieser Rückgabewert kann verwendet werden oder nicht. Ein Beispiel ist die pop(). „Pop“ könnte aufgerufen werden, um das letzte Element abzurufen und zu entfernen, Oder es wird aufgerufen, um nur das letzte Element mit dem Rückgabewert zu entfernen ignoriert werden.

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

Blockbasierte Sprachen sind im Allgemeinen nicht gut darin, einen Rückgabewert zu ignorieren. A muss ein Wert in etwas eingefügt werden, das den Wert akzeptiert. Es gibt verschiedene Strategien zur Bewältigung dieses Problems.

a) Begegnen Sie dem Problem. Die meisten blockbasierten Sprachen entwerfen die Sprache, um diese Fälle zu vermeiden. Scratch hat beispielsweise keine Blöcke mit Nebenwirkungen und einen Rückgabewert.

b) Geben Sie zwei Blöcke an. Wenn Platz in der Toolbox kein Problem darstellt, besteht die Lösung darin, jeweils zwei dieser Blocktypen bereitzustellen, einen mit und einen ohne Rückgabewert. Der Nachteil ist, dass dies zu verwirrenden mit vielen nahezu identischen Blöcken.

c) Einen Block ändern. Über ein Drop-down-Menü, ein Kästchen oder ein anderes Steuerelement Nutzer können wählen, ob es einen Rückgabewert gibt oder nicht. Der Block und ändert dann je nach den Optionen die Form. Ein Beispiel: in Blocklys Listenzugriffssperre zu sehen.

d) Iss den Wert. In der ersten Version von App Inventor wurde eine spezielle Pipe erstellt. die alle verbundenen Werte gefressen haben. Die Nutzenden verstand das Konzept nicht und die zweite Version von App Inventor entfernte den Pipe-Block und stattdessen empfohlen, den Wert einfach einer "Wegwerf-Variable" zuzuweisen.

Empfehlung: Jede Strategie hat Vor- und Nachteile – wähle die passende aus für Ihre Nutzer.

8. Wachsende Blöcke

Für bestimmte Blöcke ist möglicherweise eine variable Anzahl von Eingaben erforderlich. Beispiele: Additionsblock, der eine beliebige Menge von Zahlen oder ein if/elseif/else summiert mit einem beliebigen Satz von elseif-Klauseln oder einem Listenkonstruktor mit eine beliebige Anzahl initialisierter Elemente. Es gibt mehrere Strategien, jede mit ihren Vor- und Nachteilen.

a) Der einfachste Ansatz besteht darin, Nutzende aus kleineren Blöcken. Ein Beispiel wäre das Addieren von drei Zahlen durch Verschachteln Blöcken hinzufügen. Ein weiteres Beispiel wäre die Angabe von if/else-Blöcken, und der Nutzer verschachteln lassen, um elseif-Bedingungen zu erstellen.

Der Vorteil dieses Ansatzes ist seine anfängliche Einfachheit (sowohl für den Nutzer als auch den Entwickler). Der Nachteil ist, dass in Fällen mit einer großen wird der Code sehr umständlich und für die Nutzenden schwierig, zu lesen und zu pflegen.

b) Eine Alternative besteht darin, den Block dynamisch zu erweitern, sodass immer eine kostenlose Eingabe am Ende. Ebenso löscht der Block die letzte Eingabe, wenn zwei kostenlose Eingaben am Ende. Mit diesem Ansatz wird die erste Version App-Erfinder verwendet.

Automatisch wachsende Blöcke wurden von den App Inventor-Nutzern einige Zeit nicht gefallen mit unterschiedlichen Gründen. Erstens gab es immer einen kostenlosen Beitrag und das Programm war nie „complete“. Zweitens wurde ein Element in die Mitte des Stapels frustrierend, da alle Elemente unter der Änderung aufgehoben und sie wieder zu verbinden. Wenn die Reihenfolge jedoch nicht wichtig ist und Nutzende mit Löchern in ihrem Programm vertraut machen, ist dies eine sehr praktische Option.

c) Um das Loch-Problem zu lösen, fügen einige Entwickler die Schaltflächen +/− an Blöcken hinzu, Eingaben manuell hinzufügen oder entfernen. Open Roberta fügt zwei Schaltflächen dieser Art oder entfernen Sie Eingaben am unteren Rand. Andere Entwickler fügen jeweils zwei Schaltflächen hinzu damit das Einfügen und Löschen aus der Mitte des Stapels berücksichtigt. Andere fügen jeder Zeile zwei Auf-/Ab-Schaltflächen hinzu, dass der Stapel untergebracht werden kann.

Diese Strategie bietet eine Reihe von Optionen, die von nur zwei Schaltflächen pro Block reichen. bis zu vier Schaltflächen pro Zeile. Die Gefahr, dass Nutzende nicht in der Lage sind, die sie brauchen, ist die Benutzeroberfläche voll mit dass es wie die Brücke des Raumschiffs Enterprise aussieht.

d) Der flexibelste Ansatz besteht darin, dem Block eine Mutator-Blase hinzuzufügen. Dieses wird als einzelne Schaltfläche dargestellt, über die ein Konfigurationsdialogfeld für diese blockieren. Elemente können beliebig hinzugefügt, gelöscht oder neu angeordnet werden.

Der Nachteil ist, dass Mutatoren für für unerfahrene Nutzende. Die Einführung von Mutatoren erfordert eine Anleitung. In blockbasierten Anwendungen, die auf jüngere Kinder ausgerichtet sind, dürfen keine Mutatoren verwendet werden. Auch wenn sie einmal bekannt sind, sind sie für Poweruser von unschätzbarem Wert.

Empfehlung: Jede Strategie hat Vor- und Nachteile – wähle die passende aus für Ihre Nutzer.

9. Saubere Codegenerierung

Fortgeschrittene Blockly-Nutzer sollten den generierten Code (JavaScript, Python, PHP, Lua, Dart usw.) und erkennen sofort das von ihnen geschriebene Programm. Dies bedeutet zusätzlichen Aufwand, um diesen maschinengenerierten Code aufrechtzuerhalten. lesbar sein. Überflüssige Klammern, numerische Variablen, Leerzeichen und Ausführliche Codevorlagen verhindern die Erstellung von elegantem Code. Der generierte Code sollte Kommentare enthalten und den Styleguides von Google.

Empfehlung: Seien Sie stolz auf Ihren generierten Code. Zeige sie dem Nutzer.

10. Sprachabhängigkeit

Ein Nebeneffekt des Wunsches nach sauberem Code ist, dass das Verhalten von Blockly hauptsächlich in Bezug auf das Verhalten der kompilierten Sprache definiert. Die meisten Die gemeinsame Ausgabesprache ist JavaScript. Wenn Blockly jedoch eine Cross-Kompilierung durchführt, in eine andere Sprache übertragen werden, sollten keine unangemessenen Versuche unternommen werden, zum genauen Verhalten in beiden Sprachen. Beispiel: In JavaScript ist ein leeres String ist „false“, während es in Lua „true“ ist. Das Definieren eines einzelnen Musters wie der Code von Blockly unabhängig von der Zielsprache ausgeführt wird, zu nicht verwaltbarem Code führen, der so aussieht, als käme er aus dem GWT-Compiler.

Empfehlung: Blockly ist keine Sprache, lassen Sie die vorhandene Sprache zu Verhalten beeinflussen.