Was ist Blockly?

Wer eine Website programmieren möchte, die auf Eingaben des Benutzers reagiert, muss sich zwangsläufig mit Programmiersprachen auseinandersetzen. Auch wer eine App entwickelt, muss in der Regel mit einer höheren Programmiersprache arbeiten. Zwar gibt es für Python, JavaScript und Co. mittlerweile gute Lehrmittel, jedoch ist es immer noch ein großer Aufwand, die komplexen Befehle und Routinen zu verinnerlichen. Wer sich erstmal im Programmieren ausprobieren möchte oder nur ein kleines Skript braucht, ist mit den üblichen Mitteln meist überfordert.

Hier kommt Blockly ins Spiel: Blockly ist ein Projekt von Google, dass lange textbasierte Codestücke in visuellen Blöcken darstellt. Diese Blöcke können per Drag-and-Drop zusammengesetzt werden. So lässt sich in wenigen Augenblicken eine komplexe Syntax erstellen. Blockly ist eine Bibliothek, die einen visuellen Code-Editor zur Verfügung stellt. Die Syntax der so erstellten Programme bleibt dabei im Hintergrund. Wer mit Blockly arbeitet, kann leicht komplexe Abläufe erstellen, ohne sich Gedanken über die exakten Befehle der einzelnen Programmiersprachen zu machen.

Der Einsatz von Blockly kann verschiedene Hintergründe und Ziele haben. Wer beispielsweise eine responsive Website erstellen möchte, aber keine tiefgreifenden Programmierkenntnisse hat, kann durch diese Bibliothek schnell zum Ziel gelangen. Aber auch professionelle Software-Entwickler können den visuellen Code-Editor verwenden, um schnell kleinere Programme zu erstellen.

Darüber hinaus kann man durch den spielerischen Umgang schnell die Zusammenhänge beim Programmieren verstehen. Es ist einfacher, die Aussage „repeat 5 times“ zu verstehen, als „for int i = 0, i < 5, i++;“, auch wenn beide den gleichen Inhalt haben. Deshalb wird Blockly gern in Lernumgebungen eingesetzt. Blockly kann eine gute Möglichkeit bieten, wenn Kinder erste Versuche in der Software-Entwicklung wagen möchten. Durch die visuelle Darstellung von Code-Versatzstücken kann man einfach und schnell erstaunliche Ergebnisse erreichen.

Die visuelle Oberfläche macht den Code übersichtlich und leicht verständlich. Wie Puzzleteile werden die Blöcke ineinandergesteckt und können anschließend in Code umgewandelt werden. Zwar ist Blockly selbst eine JavaScript-Bibliothek, der Quelltext kann aber direkt in verschiedenen Sprachen ausgegeben werden. Standardmäßig ist der Code in JavaScript, Python, PHP, Lua, Dart und XML verfügbar. Der Editor kann ganz einfach in einem Browser verwendet werden.

Visuelle Programmierung ist keine Neuheit mehr. Viele Anbieter nutzen dies bereits, um Internetseiten zu erstellen. Die intuitiven Website-Baukästen bestechen dabei, wie Blockly auch, durch eine einfache und intuitive Oberfläche. Der geschriebene Code läuft komplett im Hintergrund, sodass auch Anfänger und Laien schnell Erfolge erzielen können.

In der Blockly-App, dem visuellen Code-Editor, stehen acht Kategorien mit verschiedenen Funktionen zur Verfügung:

• Logik beschreibt Aktionen.
• Schleifen sind Kontrollstrukturen und wiederholen sich, bis eine bestimmte Aktion auftritt.
• Mathematik beherrscht diverse Rechenarten und kann auch zufällige Zahlen ausgeben.
• Text kann auf Eingaben zugreifen und individuelle Ausgaben erzeugen.
• Listen erzeugen Listen in Kombination mit Text oder Mathematik Bausteinen.
• Farbe kann auf die Farbe von Text oder Hintergrund angewendet werden.
• Variablen können in Rechnungen oder Funktionen verwendet werden.
• Funktionen beschreiben das Verhalten der Seite, wenn eine bestimmte Eingabe erkannt wurde.

Zwischen den Blöcken gibt es unterschiedliche Kombinationsmöglichkeiten. Schleifen und Funktionen können mit Logik und Variablen verbunden werden. Logik und Variablen betten wiederum Mathematik, Text, Listen und Farbe ein. Mit diesen wenigen Kombinationen sind viele Grundlagen der verschiedenen Programmiersprachen abgedeckt.

Die Bedienung der Blöcke ist sehr intuitiv: Man öffnet eine Kategorie und zieht den gewünschten Code-Block mit der Maus in den Arbeitsbereich. Die einzelnen Blöcke lassen sich dort noch einmal anpassen und dann mit anderen verknüpfen. Sollte eine Kombination nicht möglich sein, rastet der Block nicht ein und wird damit auch nicht in den Quelltext aufgenommen. Einzelne Puzzleteile oder Gruppen von zusammengehörenden Blöcken können problemlos wieder aus dem Arbeitsbereich gelöscht werden. Auch im Quelltext werden die entsprechenden Codezeilen dann entfernt.

Wer beispielsweise ein Pop-up mit einem Zähler verbinden möchte, kann folgendermaßen vorgehen: https://giphy.com/embed/H8EIRtpgU9dd2nSEUI

Diesen simpel erstellten Code kann man nun auch in die verschiedenen Programmiersprachen übersetzen. In JavaScript würde der Quelltext folgendermaßen aussehen:

Dies ist natürlich nur ein sehr primitives Code-Beispiel. Allerdings ist die Ausgabe von „Hallo, Welt!“ immer die erste Lektion beim Erlernen einer Programmiersprache.

Während die Anwendung an sich eher für Studenten und Quereinsteiger gedacht ist, so ist die eigentliche Bibliothek an Entwickler gerichtet. Entwickler können mit wenig Aufwand eigene Blöcke mit Funktionen und Logik anlegen, um aus der Bibliothek eine eigenständige App zu entwickeln.

Wer innerhalb von Blockly eigene Blöcke entwickeln möchte, hat zwei Möglichkeiten: Zum einen gibt es die JavaScript-API, die vorrangig für Webanwendungen benutzt wird. Zum anderen steht eine JSON-Schnittstelle bereit, die auch unter Android und iOS funktioniert. Allerdings gibt es im JSON-Format nur die meistgenutzten Blöcke zur Auswahl. Eine umfassende Dokumentation kann zusätzlich einfach auf GitHub eingesehen werden. Darüber hinaus bietet Google selbst einen ausführlichen Leitfaden zur Entwicklung und Benutzung von Blockly.

Auf YouTube, Stack Overflow und GitHub gibt es mittlerweile unzählige Tutorials und Dokumentationen, wie man die Bibliothek effizient nutzen kann. Die Programmierung diverser Schalter und Empfänger für die Steuerung im Smart Home ist nur eine der vielen Möglichkeiten. Da man das Programm mit den verschiedensten Sprachen verbinden kann, steht der eigenen Kreativität nichts im Weg.

Wer Programmiersprachen lernen möchte, wird es lieben, dass das Programm nur korrekte Syntax schreibt und nie ein Semikolon oder Anführungsstriche vergisst. Das spielerische Prinzip vereinfacht es, auch als Anfänger direkt an Projekten arbeiten zu können und so Erfahrungen zu sammeln. Man lernt schnell die Möglichkeiten der Sprache kennen und kann instinktiv Prototypen und Mock-ups entwerfen.

Blockly ist simpel gehalten, kann den Workflow aber erheblich beschleunigen. Es ist einfach, die Bibliothek in bestehende Projekte zu integrieren, und noch einfacher, damit große Projekte zu realisieren. Wichtig ist allerdings, dass man sich mit den Funktionen vertraut macht. Der durch Blockly erstelle Quelltext kann – dank der großen Sprachenvielfalt – in viele Projekte integriert werden. Deshalb ist die Open-Source-Lösung nicht nur für Einsteiger interessant.