Eine Blockly-Anwendung ist eine Webanwendung, die einen Blockly-Editor (Arbeitsbereich) enthält. In diesem Dokument finden Sie Beispiele für die Verwendung von Blockly-Anwendungen und typische UI-Funktionen.
Wenn Sie es noch nicht getan haben, lesen Sie bitte das visuelle Glossar und die grundlegenden Anwendungsschritte, bevor Sie mit diesem Dokument fortfahren.
Was machen Blockly-Anwendungen?
Blockly-Anwendungen helfen Nutzern, Programme in verschiedenen Bereichen zu schreiben, von Videospielen über Robotik bis hin zur Datenanalyse. Nutzer schreiben ihre Programme mit Blöcken, die von der Anwendung verwendet werden, um textbasierten Code wie JavaScript oder Python zu generieren. Die Anwendung führt den generierten Code dann direkt aus oder der Nutzer lädt ihn herunter und führt ihn auf einer anderen Plattform aus, z. B. auf einem Roboter oder einem tragbaren Videospielcontroller.
Hier einige Beispiele für Programme, die Nutzer mit Blockly-Anwendungen schreiben:
Rätsellösungen, Animationen oder Musik:Der generierte Code löst ein Rätsel (z. B. ein Labyrinth), zeigt eine Animation an oder spielt Musik ab. Ein Beispiel finden Sie im Music Lab von Code.org.
Videospiele:Mit dem generierten Code wird ein Videospiel ausgeführt. Erstelle beispielsweise die ersten beiden Level von „Whack the Mole“ in MakeCode Arcade und lade das Spiel auf einen Controller herunter oder spiele es im Simulator.
Robotik:Der generierte Code steuert einen Roboter. Sie können beispielsweise einen Roboter mit Ozoblockly programmieren und das Programm auf einen echten Roboter herunterladen oder im Simulator ausführen.
Zeichnung:Der generierte Code erstellt eine 2D- oder 3D-Zeichnung. Ein Beispiel finden Sie unter BlocksCAD.
Datenanalyse:Der generierte Code analysiert Daten und erstellt ein Diagramm. Ein Beispiel finden Sie in dieser Demonstration der Dialogic Platform.
Anwendungsspezifischer Code:Der generierte Code führt eine Aufgabe aus, die für eine bestimmte Anwendung spezifisch ist. Blockly Developer Tools ist beispielsweise ein Tool zum Entwerfen neuer Blockly-Blöcke. Es wird Blockdefinitions-Code generiert, den Nutzer kopieren und in ihre eigene Blockly-Anwendung einfügen können.
Benutzeroberflächen
Eine gute Möglichkeit, die typischen Komponenten von Blockly-Anwendungen zu verstehen, ist, sich ihre Benutzeroberflächen anzusehen.
Einfache UI-Komponenten
Fast alle Blockly-Anwendungen haben einige grundlegende Komponenten gemeinsam: einen Blockly-Editor (Arbeitsbereich), ein Ausgabefeld und eine Schaltfläche „Ausführen“. Hier sehen Sie beispielsweise die Benutzeroberfläche des Labyrinths in Blockly Games.
In einigen Blockly-Anwendungen wird die Schaltfläche „Ausführen“ weggelassen und stattdessen das Ausgabefeld jedes Mal aktualisiert, wenn der Nutzer eine Änderung vornimmt. Die Graph-Anwendung in den Blockly-Beispielen hat beispielsweise zwei Ausgabefelder (eines für das Diagramm und eines für die Gleichung), die bei jeder Änderung aktualisiert werden.
Einige Anwendungen haben kein Ausgabefeld. Dies ist am häufigsten bei Hardwareanwendungen der Fall, z. B. bei Anwendungen zum Programmieren von Robotern. Einige dieser Anwendungen enthalten zwar einen Hardwaresimulator, bei vielen können Nutzer den generierten Code aber einfach herunterladen und direkt auf dem Zielgerät ausführen.
Zusätzliche UI-Komponenten
Die meisten Anwendungen haben zusätzliche UI-Komponenten. Einige davon erfüllen allgemeine Anforderungen, z. B. das Speichern der Arbeit des Nutzers, während andere anwendungsspezifische Anforderungen erfüllen, z. B. das Entwerfen einer GUI. Hier einige Beispiele:
Scratch ist eine Anwendung zum Erstellen von Animationen und Videospielen. Sie enthält Grafik- und Sound-Editoren, Bereiche zum Erstellen neuer Sprites und Hintergründe sowie Menüs für Datei, Bearbeiten und Einstellungen:
MakeCode Arcade, eine Anwendung zum Erstellen von Videospielen, verfügt über Ausgabesteuerelemente, Code- und Grafikeditoren, ein Einstellungsmenü sowie Schaltflächen zum Herunterladen und Speichern. Das Ausgabefeld simuliert einen tragbaren Controller.
MIT App Inventor, eine Anwendung zum Erstellen von Smartphone-Apps, hat separate Bildschirme für den GUI-Designer und den Blockly-Editor sowie Menüs für Datei, Verbindung, Build und Einstellungen. Anstelle eines Ausgabefelds testen Nutzer generierten Code auf ihrem Smartphone.
Welche zusätzlichen Komponenten Sie einbeziehen sollten, hängt von den Zielen Ihrer Anwendung und den Fähigkeiten Ihrer Nutzer ab. Häufige Komponenten sind:
Verwaltung:
- Dateiverwaltung (neu, öffnen, speichern, speichern unter, löschen)
- Kontoverwaltung (Erstellen, Anmelden, Abmelden)
- Einstellungen (Sprache, UI-Konfiguration)
Programmierung:
- Befehle zum Bearbeiten (Rückgängig, Wiederholen, Kopieren, Ausschneiden, Einfügen, Duplizieren)
- GUI-Designer
- Grafik- und Audiobearbeitung
- Code-Editor oder schreibgeschützte Codeanzeige
Test
- Ausgabekonfiguration (Start/Stopp, Wiedergabegeschwindigkeit, Lautstärke, Screenshot usw.)
- Debugger (Haltepunkte, Ausführen, Einzelschritt, Blockhervorhebung)
- Testparameter festlegen
Hardware
- Verbindung (USB, Bluetooth, QR‑Code)
- Konfiguration (Modell auswählen, Zubehör auswählen, Komponentennamen zuweisen)
- Steuerung (Roboter manuell steuern, Roboterposition aufzeichnen)
- Code herunterladen
Hilfe
- Dokumentation
- Interaktive Anleitungen
- Kontextsensitive Hilfe
Wie geht es weiter?
Wenn Sie noch über Ihre Anwendung nachdenken, lesen Sie weiter, um mehr über Designüberlegungen zu erfahren.
Wenn Sie sehen möchten, wie eine einfache Anwendung erstellt wird, können Sie das Codelab „Erste Schritte mit Blockly“ ausprobieren.
Wenn Sie Ihre Anwendung schreiben möchten, gehen Sie so vor: