Blockprogrammierung: Was ist das und wie wird daraus echter Code?

Blockprogrammierung bedeutet, ein Programm aus bunten, puzzleartigen Blöcken zusammenzusetzen, statt es Zeile für Zeile zu tippen. Jeder Block ist ein einzelner Befehl, etwa „Pin als Ausgang setzen“, „LED einschalten“ oder „100 ms warten“. Weil Blöcke nur dort einrasten, wo sie passen, gibt es keine vergessenen Semikolons, offenen Klammern oder falsch geschriebenen Befehle – du konzentrierst dich nur auf die Logik. Deshalb gilt blockbasierte Programmierung als sanftester Einstieg ins Programmieren für Kinder und Einsteiger.

Blockprogrammierung ist aber keine Spielzeugsprache. Hinter jedem Blockprogramm, das auf einen Arduino oder einen Raspberry Pi Pico geht, steckt echter Code, und das Board führt immer genau diesen Code aus. In diesem Artikel siehst du Schritt für Schritt an kostenlosen BlueGrays-Projekten, was Blöcke sind, was ihre Farben verraten und wie aus einem Blockprogramm echter C++- oder MicroPython-Code wird. Am Ende findest du auch die Stärken und Grenzen der Blockprogrammierung und wie sie sich mit Werkzeugen wie Scratch, mBlock und Tinkercad ergänzt.

Was ist Blockprogrammierung und warum heißt sie so?

Bei der Blockprogrammierung ist jeder Befehl ein Teil mit Kerben und Nasen an den Rändern. Die Nase unten am oberen Block sitzt in der Kerbe des Blocks darunter, so laufen die Befehle der Reihe nach von oben nach unten ab. Manche Blöcke haben innen eine offene Lücke: Das sind Container-Blöcke, die andere Blöcke aufnehmen. Andere haben weiße ovale Felder, in die eine Zahl oder ein anderer Wertblock gesteckt wird. Weil die Form jedes Teils bestimmt, was wohin passt, kann man kaum ein Programm bauen, das gegen die Regeln verstößt. Die meisten heutigen Blockeditoren folgen dem Weg, den Scratch vom MIT und Googles Open-Source-Bibliothek Blockly geebnet haben. Auch die Blöcke in BlueGrays basieren auf Blockly; den Blocksatz haben wir selbst für Elektronikprojekte entworfen und zeigen ihn in der Sprache der App. Wichtig: Blöcke sind keine neue Programmiersprache. Befehle, Reihenfolge, Bedingungen, Schleifen und Variablen sind genau dieselben Konzepte wie im Textcode, Blöcke machen sie nur sichtbar.

Wie wird aus einem Blockprogramm echter Code?

Blockeditoren nutzen im Hintergrund einen Codegenerator: Jeder Blocktyp hat eine Vorlage im Textcode, und beim Stapeln der Blöcke werden diese Vorlagen der Reihe nach zusammengesetzt. BlueGrays ist etwas strenger: Die Blöcke jedes Projekts werden eins zu eins passend zum echten Code erstellt, der auf das Board kommt. Jede Zeile in den Blöcken hat eine Entsprechung im Code und jede Codezeile eine Entsprechung in den Blöcken. Bei Arduino- und ESP32-Projekten ist dieser Code C++, bei Raspberry-Pi-Pico-Projekten MicroPython. Um ein Blockprogramm zu lesen, musst du nur diese fünf Teile kennen:

• Setup (läuft einmal): der Abschnitt, der nur einmal läuft, wenn das Board startet oder zurückgesetzt wird. Er entspricht der Funktion setup() beim Arduino; meist werden hier die Pins als Eingang oder Ausgang festgelegt.
• immer wiederholen: der Abschnitt, der immer wieder von oben bis unten durchläuft, solange das Board an ist. Beim Arduino ist das die Funktion loop(), in MicroPython eine while True:-Schleife.
• Befehlsblöcke: Blöcke wie „HOCH an Pin 9 schreiben“ oder „100 ms warten“, die in die Container gestapelt werden und jeweils eine Aufgabe erledigen. Die meisten sind im Textcode eine einzige Zeile.
• Wertblöcke: Zahlen wie 9 oder 100 in den weißen Ovalen und abgerundete Blöcke, die ein Ergebnis liefern, etwa einen Pin auslesen. Sie stecken in den Feldern der Befehlsblöcke und werden im Code zum Wert in der Klammer.
• Dropdown-Menüs: Optionen wie AUSGANG oder HOCH / NIEDRIG. Sie entsprechen den Konstanten OUTPUT / INPUT und HIGH / LOW im Code, und weil das Menü nur gültige Optionen anbietet, kann man sie nicht falsch schreiben.

Blöcke und Code nebeneinander: das Projekt LED Blinken

Genug Theorie, schauen wir uns ein echtes Beispiel an. Im Projekt LED Blinken sind eine LED und ein Widerstand an Pin 9 angeschlossen, und die LED blinkt fünfmal pro Sekunde. In der Tabelle unten übersetzen wir die Blöcke aus dem Bild oben einzeln in Code. Jede Zeile ist ein Block, und jeder Block ist eine Codezeile:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

Im Code stehen ein paar Dinge, die du in den Blöcken nicht siehst: das Wort void, geschweifte Klammern und Semikolons. Das sind Syntaxregeln von C++, und bei Blöcken übernimmt die Form diese Aufgabe. Die Öffnung eines Container-Blocks ersetzt die geschweiften Klammern, und untereinander sitzende Blöcke ersetzen die Reihenfolge der Zeilen. Würdest du die 100 im Wertfeld auf 1000 ändern, stünde im Code delay(1000), und die LED würde einmal pro Sekunde blinken. Würdest du im Menü NIEDRIG statt HOCH wählen, würde aus HIGH ein LOW. Dank dieser Eins-zu-eins-Zuordnung liest du nach ein paar Projekten den Code auch ohne Blöcke. Die Schaltung und den schrittweisen Aufbau desselben Projekts findest du in Teil 2 der Reihe: LED blinken mit Blockprogrammierung.

Was bedeuten die Blockfarben?

In Blockeditoren ist Farbe keine Dekoration, sondern zeigt, aus welcher Kategorie ein Block stammt. Schon beim ersten Blick auf ein Programm kannst du anhand der Farben lesen: „Hier wird eine Variable angelegt, hier fällt eine Entscheidung, hier ist eine Schleife.“ Diese Kategorien siehst du in den Blockbildern der BlueGrays-Projekte:

Auch die Formen geben Hinweise. Bedingungs- und Vergleichsblöcke haben spitze, sechseckähnliche Enden und passen in das Bedingungsfeld eines Bedingungsblocks, Zahlen- und Variablenblöcke dagegen haben runde Enden. Ein Detail der Tabelle solltest du dir merken: Bei der Zählschleife von 0 bis 5 mit Schrittweite 1 ist die Obergrenze eingeschlossen, i nimmt also nacheinander die Werte 0, 1, 2, 3, 4 und 5 an. Im Code steht dafür die Bedingung i < 6, und die Schleife läuft sechsmal. Das Projekt LED-Lauflicht schaltet genau mit diesem Block sechs LEDs nacheinander ein; Schleifen- und Array-Blöcke erklären wir ausführlich im Teil Schleifen und Variablen der Reihe.

Die verschachtelten Bedingungsblöcke in diesem Bild werden im Code zu verschachtelten if-Zeilen. Der äußere Block mit dem Vergleich button ≠ lastButton ist die Zeile if (button != lastButton) und greift, wenn sich der Zustand des Tasters ändert. Der innere Block mit button = 1 fängt nur den Moment des Drückens ab. Der Block, der ledState die Verneinung von ledState zuweist, ist die Zeile ledState = !ledState;: Aus 0 wird 1 und aus 1 wird 0. Der folgende Block, der ledState an Pin 7 schreibt, ist digitalWrite(7, ledState);. Das ganze Projekt findest du auf der Seite LED mit Taster ein- und ausschalten; die Verbindung zwischen Bedingungsblock und if/else erklären wir im Teil Taster und Bedingungen der Reihe.

C++ auf Arduino und ESP32, MicroPython auf dem Pico

Dieselbe Blocklogik wird auf verschiedenen Boards in verschiedene Sprachen übersetzt. Bei Arduino- und ESP32-Projekten entsprechen die Blöcke C++-Code, und die Blöcke „Setup“ und „immer wiederholen“ werden zu setup() und loop(). Die Blöcke des Projekts LED Blinken mit ESP32 haben zum Beispiel denselben Aufbau wie beim LED-Blinken, nur ist der Pin 5 und die Wartezeit 500 ms. Bei Raspberry-Pi-Pico-Projekten werden die Blöcke dagegen zu MicroPython. Eine Funktion setup() gibt es hier nicht: Was im Setup-Block steht, wird zu Zeilen, die einmal am Anfang der Datei laufen, und der Block „immer wiederholen“ wird zu einer while True:-Schleife.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Du kannst die Zuordnung Zeile für Zeile verfolgen. Der Block „deklariere Ganzzahl (int) LED_PIN = 14“ in „globale Variablen (ganz oben)“ ist die Zeile LED_PIN = 14; weil Python keine Typen schreibt, taucht (int) im Code nicht auf. Der Block „Pin led : GP LED_PIN, AUSGANG“ wird zu led = Pin(LED_PIN, Pin.OUT). „Pin led einschalten (on)“ ist led.on(), „0.5 Sekunden warten“ ist time.sleep(0.5) und „seriell ausgeben“ ist eine print()-Zeile. Der Block „erstelle Text aus“ setzt den Text „LED pin: GP“ und den Wert von LED_PIN mit + zusammen. Achtung: Beim Arduino wird in Millisekunden gewartet (100 ms), in MicroPython in Sekunden (0.5), und die Blöcke zeigen diesen Unterschied mit getrennten Blöcken für ms und Sekunden. Die Schaltung findest du auf der Seite Externe LED am Raspberry Pi Pico; wenn der Pico neu für dich ist, hilft dir zuerst der Artikel Was ist der Raspberry Pi Pico.

Vorteile und Grenzen der Blockprogrammierung

Blockprogrammierung ist nicht die Antwort auf alles, sondern eine Brücke. In den ersten Wochen ist sie ein sehr starkes Werkzeug, um die Logik eines Programms zu verstehen; das eigentliche Ziel ist aber, diese Brücke irgendwann zu überqueren und Textcode entspannt zu lesen. Blöcke und Code nebeneinander zu sehen beschleunigt diesen Schritt, weil du in jedem neuen Projekt wieder siehst, wie dieselben Blöcke zu denselben Zeilen werden. Wenn dir der Block „immer wiederholen“ in zehn Projekten begegnet ist, wirkt das Wort loop() nicht mehr fremd. Bist du bereit für Textcode, erklärt dir der Artikel Arduino programmieren lernen alles von Variablen bis zu Funktionen mit Beispielen.

Für wen ist Blockprogrammierung geeignet?

• Kinder und Familien: Kinder ab 9 bis 10 Jahren, die sicher lesen, können zusammen mit einem Erwachsenen anfangen. Mit den Blöcken auf dem Bildschirm und einer leuchtenden LED auf dem Steckbrett ist Programmieren nicht mehr abstrakt.
• Lehrkräfte und Robotik-AGs: Ein Projekt zuerst mit Blöcken zu erklären und dann zum Code zu wechseln, bringt unterschiedliche Niveaus in derselben Stunde zusammen. Den Unterrichtsentwurf dazu findest du im letzten Teil der Reihe: Unterrichtsplan Robotik mit Blockprogrammierung.
• Arduino-Einsteiger: Wenn du dein Board gerade bekommen hast und die ersten Sketche verwirrend wirken, zeigen dir Blöcke am schnellsten, was jede Zeile macht. Um das Board selbst kennenzulernen, beginne mit Was ist Arduino.
• Alle, denen das Lesen von Code schwerfällt: Ein fremdes Programm zu verstehen ist eine eigene Fähigkeit. Wer sich die Blöcke eines fertigen Projekts ansieht, erkennt leichter, was ein langer Code wo macht.

Vergleich mit Scratch, mBlock, Tinkercad und MakeCode

Die meisten Werkzeuge, an die man bei Blockprogrammierung denkt, sind Editoren für den Computer oder den Browser, und jedes hat seine Stärken. Gemeinsam ist ihnen, dass du die Blöcke selbst ziehst und dein eigenes Programm baust. BlueGrays erfüllt einen anderen Zweck: Es zeigt die Blöcke fertiger, getesteter Projekte neben Schaltplan, Teileliste und echtem Code. In der App kannst du (noch) keine eigenen Blöcke zu einem Programm zusammenstellen; stattdessen liest du, wie ein Programm aufgebaut ist, von dem man weiß, dass es funktioniert. Deshalb konkurrieren diese Werkzeuge nicht, sondern ergänzen sich. Du kannst zum Beispiel eine Ampelfolge, die du in mBlock gebaut hast, mit den Blöcken des Projekts Ampel vergleichen und die Schaltung in Tinkercad simulieren, falls du noch kein Board hast. Mehr dazu in den Anleitungen mBlock mit Arduino und Arduino-Simulation mit Tinkercad.

So nutzt du Blockprogrammierung in der BlueGrays-App

1. Wähle in Entdecken › Projekte ein Projekt mit Block-Abzeichen. Über den Filter kannst du dir auch nur Projekte mit Blöcken anzeigen lassen. Mehr als 100 Projekte in der App gibt es als Blockversion, die meisten davon Arduino-Projekte, der Rest ESP32- und Raspberry-Pi-Pico-Projekte.
2. Schalte im Code-Bereich des Projekts Als Blöcke zeigen ein. Statt des Codes erscheinen die Blöcke desselben Programms; tippst du auf das Bild, öffnet es sich im Vollbild, und du kannst es bequem vergrößern.
3. Wechsle zum Tab Blöcke verstehen. Das Programm wird Schritt für Schritt erklärt: In jedem Schritt siehst du nur die Blöcke dieses Schritts und was sie tun.
4. Wenn du wissen willst, was ein Befehl macht, schau in den Code-Guide. Jedes Beispiel dort gibt es mit Arduino- und MicroPython-Befehlen und auch als Blöcke.
5. Schalte den Schalter aus, um zum echten Code zurückzukehren. Kopiere ihn, füge ihn in die Arduino IDE ein (beim Pico in Thonny) und lade ihn auf dein Board.
6. Festige das Gelernte mit den Fragen des Tages: jeden Tag 5 Fragen auf den Niveaus A1 bis C2, eine Wochenrangliste und Abzeichen.

Bei 31 Projekten sind Blöcke und Code komplett kostenlos; bei den übrigen Projekten werden die Blöcke wie der Code mit Premium freigeschaltet. Einige kostenlose Projekte, die sich gut für den Anfang eignen: LED Blinken, Zwei LEDs abwechselnd blinken, Ampel, LED-Lauflicht, LED Blinken mit ESP32 und Raspberry Pi Pico Onboard-LED Blinken. Alle Projekte mit Blöcken nach Plattform siehst du auf der Seite Blockprogrammierung, wo du auch Blöcke und Code eines Beispielprojekts nebeneinander vergleichen kannst.

Reihe Von Blöcken zum Code: der Fahrplan

1. Was Blockprogrammierung ist und wie aus einem Blockprogramm echter Code wird (dieser Artikel)
2. Das erste Programm: eine LED mit Blockprogrammierung blinken lassen, Blöcke und C++ nebeneinander
3. Taster und Bedingungen: der Bedingungsblock und if/else
4. Schleifen und Variablen: immer wiederholen, Zählschleife, Arrays und Zähler
5. Sensoren mit Blöcken auslesen, serielle Ausgabe und MicroPython auf dem Pico
6. Für Lehrkräfte: Unterrichtsplan Robotik mit Blockprogrammierung

Im nächsten Teil der Reihe bauen wir das Projekt LED Blinken aus diesem Artikel von Grund auf: Schaltung, Blöcke und C++-Code nebeneinander, im Artikel LED blinken mit Blockprogrammierung. Bis dahin kannst du die hier genannten Projekte in der BlueGrays-App mit Schaltplan und Code öffnen und mit einem Tipp über Als Blöcke zeigen zur Blockversion desselben Programms oder über Blöcke verstehen zur Schritt-für-Schritt-Erklärung wechseln.