Was ist Blockly?
Blockly ist ein visueller Programmier-Editor. Anstatt Code zu tippen, ziehst du farbige Bausteine in einen Arbeitsbereich und verbindest sie miteinander. Blockly übersetzt diese Bausteine automatisch in JavaScript – das ist die Sprache, in der dein Bot „denkt".
Blockly ist wie LEGO für Bot-Logik. Jeder Block hat eine bestimmte Aufgabe, und zusammengesetzte Blöcke beschreiben, was dein Bot in einer bestimmten Situation tun soll.
Den Blockly-Editor öffnen
Klicke im Bot-Editor auf den Tab „Logik" oder auf das Blockly-Icon in der Tab-Leiste. Der Editor öffnet sich in einer Vollbild-Ansicht.
Das Interface auf einen Blick
| Bereich | Beschreibung |
|---|---|
| Werkzeugkasten (Toolbox) | Links: alle verfügbaren Block-Kategorien. Aufklappen → Blöcke sehen → in den Workspace ziehen. |
| Workspace | Die Arbeitsfläche in der Mitte. Hier baust du deine Logik zusammen. |
| Minimap | Kleine Übersicht unten rechts – nützlich bei großen Workspaces. |
| Mülleimer | Blöcke löschen: Block darüber ziehen oder rechte Maustaste → Löschen. |
| Zoom-Steuerung | Workspace vergrößern/verkleinern (+ / –). Auch mit Mausrad möglich. |
Block-Typen verstehen
Es gibt zwei grundlegende Block-Kategorien:
Aktionsblöcke
Tun etwas: Nachricht senden, Stage wechseln, Score erhöhen. Sie werden von oben nach unten ausgeführt und haben einen Verbindungsknoten oben und unten.
Aktion
Ausgabeblöcke
Liefern einen Wert: Text, Zahl, URL. Sie haben einen runden Verbindungsknoten auf der linken Seite und werden in andere Blöcke eingesetzt.
Ausgabe
Event-Blöcke
Reagieren auf Ereignisse: Nutzer klickt einen Button, Stage wird betreten, Zeit läuft ab. Sie haben einen „Hut"-Anschluss oben und stehen für sich.
Event
Kontrollblöcke
Steuern den Ablauf: Wenn-Dann-Bedingungen, Stage-Navigation, Variablen. Meistens erkennbar an ihrer eckigen Form mit Einschnitten.
Kontrolle
Farben und Kategorien
Jede Block-Kategorie hat eine eigene Farbe. Das erleichtert die Orientierung im Workspace:
| Farbe | Kategorie | Wozu? |
|---|---|---|
| Common Blocks | Texte, Zahlen, Variablen-Quellen | |
| Messages | Nachrichten senden und empfangen | |
| Buttons | Klickbare Schaltflächen | |
| Events | Auf Ereignisse reagieren | |
| Stages | Zwischen Stages navigieren |
Dein erster Block: Bot-Nachricht senden
Als Einstieg richtest du einen Block ein, der beim Starten des Bots eine Begrüßungsnachricht sendet.
Öffne die Kategorie „Events"
Klicke im Werkzeugkasten auf „Events". Es erscheint eine Liste aller verfügbaren Event-Blöcke.
„Reagiere auf…" Block ziehen
Ziehe den Block „Reagiere auf [Event] – führe aus" auf die Workspace-Fläche. Wähle als Event „RAGAI.STAGE.entered" – das bedeutet: Wenn der Bot gestartet wird.
Bot-Nachricht-Block einfügen
Öffne „Messages" → ziehe „Bot Nachricht: [Text]" in den freien Slot des Event-Blocks.
Text eingeben
Klicke auf das Text-Feld im Bot-Nachricht-Block und gib deinen Begrüßungstext ein (z. B. „Hallo! Wie kann ich dir heute helfen?").
Speichern und testen
Klicke auf „Speichern". Öffne dann den Bot-Test und prüfe, ob die Nachricht beim Start angezeigt wird.
Grundlegende Bedienung
| Aktion | Wie? |
|---|---|
| Block verschieben | Klicken und ziehen |
| Block in Block einsetzen | Block über den Slot ziehen – er rastet ein |
| Block löschen | Block in den Mülleimer ziehen oder Entf-Taste |
| Block duplizieren | Rechte Maustaste → Duplizieren |
| Kommentar hinzufügen | Rechte Maustaste → Kommentar hinzufügen |
| Block deaktivieren | Rechte Maustaste → Deaktivieren (Block wird ignoriert) |
| Rückgängig | Strg+Z (Windows) / Cmd+Z (Mac) |
| Workspace zentrieren | Doppelklick auf leere Fläche oder Home-Taste |
Füge zu jedem größeren Block-Cluster einen Kommentar hinzu (rechte Maustaste → Kommentar). Das hilft dir und Kolleginnen, den Workspace auch nach Wochen noch zu verstehen.
Wo wird Blockly-Logik ausgeführt?
Blockly-Code kann an verschiedenen Stellen greifen:
| Kontext | Wann aktiv? |
|---|---|
| Global | Immer – bei jedem Bot-Start und jeder Interaktion |
| Stage-Einstieg | Einmalig, wenn eine Stage betreten wird |
| Stage-Ausstieg | Einmalig, wenn eine Stage verlassen wird |
| Fusion-View | Wenn ein Fusion-Inhalt geöffnet wird |
| Wenn-Dann | Immer wenn ein Wenn-Dann-Trigger ausgelöst wird |
Erster Block: Begrüßung automatisieren
- Öffne den Blockly-Editor deines Bots.
- Erstelle einen Event-Block für „RAGAI.STAGE.entered".
- Füge eine Bot-Nachricht mit deiner persönlichen Begrüßung ein.
- Füge darunter einen zweiten Bot-Nachricht-Block mit einem Hinweis, was der Bot kann.
- Teste, ob beide Nachrichten beim Start des Bots erscheinen.