Wer eine Website pro­gram­mie­ren möchte, die auf Eingaben des Benutzers reagiert, muss sich zwangs­läu­fig mit Pro­gram­mier­spra­chen aus­ein­an­der­set­zen. Auch wer eine App ent­wi­ckelt, muss in der Regel mit einer höheren Pro­gram­mier­spra­che arbeiten. Zwar gibt es für Python, Ja­va­Script und Co. mitt­ler­wei­le gute Lehr­mit­tel, jedoch ist es immer noch ein großer Aufwand, die komplexen Befehle und Routinen zu ver­in­ner­li­chen. Wer sich erstmal im Pro­gram­mie­ren aus­pro­bie­ren möchte oder nur ein kleines Skript braucht, ist mit den üblichen Mitteln meist über­for­dert.

Hier kommt Blockly ins Spiel: Blockly ist ein Projekt von Google, dass lange text­ba­sier­te Code­stü­cke in visuellen Blöcken darstellt. Diese Blöcke können per Drag-and-Drop zu­sam­men­ge­setzt werden. So lässt sich in wenigen Au­gen­bli­cken eine komplexe Syntax erstellen. Blockly ist eine Bi­blio­thek, die einen visuellen Code-Editor zur Verfügung stellt. Die Syntax der so er­stell­ten Programme bleibt dabei im Hin­ter­grund. Wer mit Blockly arbeitet, kann leicht komplexe Abläufe erstellen, ohne sich Gedanken über die exakten Befehle der einzelnen Pro­gram­mier­spra­chen zu machen.

Warum sollte man Blockly nutzen?

Der Einsatz von Blockly kann ver­schie­de­ne Hin­ter­grün­de und Ziele haben. Wer bei­spiels­wei­se eine re­spon­si­ve Website erstellen möchte, aber keine tief­grei­fen­den Pro­gram­mier­kennt­nis­se hat, kann durch diese Bi­blio­thek schnell zum Ziel gelangen. Aber auch pro­fes­sio­nel­le Software-Ent­wick­ler können den visuellen Code-Editor verwenden, um schnell kleinere Programme zu erstellen.

Darüber hinaus kann man durch den spie­le­ri­schen Umgang schnell die Zu­sam­men­hän­ge beim Pro­gram­mie­ren 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 Lern­um­ge­bun­gen ein­ge­setzt. Blockly kann eine gute Mög­lich­keit bieten, wenn Kinder erste Versuche in der Software-Ent­wick­lung wagen möchten. Durch die visuelle Dar­stel­lung von Code-Ver­satz­stü­cken kann man einfach und schnell er­staun­li­che Er­geb­nis­se erreichen.

Die visuelle Ober­flä­che macht den Code über­sicht­lich und leicht ver­ständ­lich. Wie Puz­zle­tei­le werden die Blöcke in­ein­an­der­ge­steckt und können an­schlie­ßend in Code um­ge­wan­delt werden. Zwar ist Blockly selbst eine Ja­va­Script-Bi­blio­thek, der Quelltext kann aber direkt in ver­schie­de­nen Sprachen aus­ge­ge­ben werden. Stan­dard­mä­ßig ist der Code in Ja­va­Script, Python, PHP, Lua, Dart und XML verfügbar. Der Editor kann ganz einfach in einem Browser verwendet werden.

Visuelle Pro­gram­mie­rung ist keine Neuheit mehr. Viele Anbieter nutzen dies bereits, um In­ter­net­sei­ten zu erstellen. Die in­tui­ti­ven Website-Baukästen bestechen dabei, wie Blockly auch, durch eine einfache und intuitive Ober­flä­che. Der ge­schrie­be­ne Code läuft komplett im Hin­ter­grund, sodass auch Anfänger und Laien schnell Erfolge erzielen können.

Hinweis

Blockly weist große Ähn­lich­keit zu Scratch auf. Während sich Blockly jedoch stärker an pro­fes­sio­nel­le Ent­wick­ler im Un­ter­neh­mens­kon­text richtet, ist Scratch in erster Linie als Lehr­mit­tel gedacht.

Welche Funk­tio­nen kann man mit Blockly nutzen?

In der Blockly-App, dem visuellen Code-Editor, stehen acht Ka­te­go­rien mit ver­schie­de­nen Funk­tio­nen zur Verfügung:

  • Logik be­schreibt Aktionen.
  • Schleifen sind Kon­troll­struk­tu­ren und wie­der­ho­len sich, bis eine bestimmte Aktion auftritt.
  • Ma­the­ma­tik be­herrscht diverse Re­chen­ar­ten und kann auch zufällige Zahlen ausgeben.
  • Text kann auf Eingaben zugreifen und in­di­vi­du­el­le Ausgaben erzeugen.
  • Listen erzeugen Listen in Kom­bi­na­ti­on mit Text oder Ma­the­ma­tik Bau­stei­nen.
  • Farbe kann auf die Farbe von Text oder Hin­ter­grund an­ge­wen­det werden.
  • Variablen können in Rech­nun­gen oder Funk­tio­nen verwendet werden.
  • Funk­tio­nen be­schrei­ben das Verhalten der Seite, wenn eine bestimmte Eingabe erkannt wurde.

Zwischen den Blöcken gibt es un­ter­schied­li­che Kom­bi­na­ti­ons­mög­lich­kei­ten. Schleifen und Funk­tio­nen können mit Logik und Variablen verbunden werden. Logik und Variablen betten wiederum Ma­the­ma­tik, Text, Listen und Farbe ein. Mit diesen wenigen Kom­bi­na­tio­nen sind viele Grund­la­gen der ver­schie­de­nen Pro­gram­mier­spra­chen abgedeckt.

Blockly-Beispiel

Die Bedienung der Blöcke ist sehr intuitiv: Man öffnet eine Kategorie und zieht den ge­wünsch­ten Code-Block mit der Maus in den Ar­beits­be­reich. Die einzelnen Blöcke lassen sich dort noch einmal anpassen und dann mit anderen ver­knüp­fen. Sollte eine Kom­bi­na­ti­on nicht möglich sein, rastet der Block nicht ein und wird damit auch nicht in den Quelltext auf­ge­nom­men. Einzelne Puz­zle­tei­le oder Gruppen von zu­sam­men­ge­hö­ren­den Blöcken können pro­blem­los wieder aus dem Ar­beits­be­reich gelöscht werden. Auch im Quelltext werden die ent­spre­chen­den Code­zei­len dann entfernt.

Wer bei­spiels­wei­se ein Pop-up mit einem Zähler verbinden möchte, kann fol­gen­der­ma­ßen vorgehen: https://giphy.com/embed/H8EIRtpgU9dd2nSEUI

Diesen simpel er­stell­ten Code kann man nun auch in die ver­schie­de­nen Pro­gram­mier­spra­chen über­set­zen. In Ja­va­Script würde der Quelltext fol­gen­der­ma­ßen aussehen: 

var zaehlen;
zaehlen = 1;
while (zaehlen <= 3) {
	window.alert('Hallo, Welt!');
	zaehlen = zaehlen + 1;
}

Dies ist natürlich nur ein sehr pri­mi­ti­ves Code-Beispiel. Al­ler­dings ist die Ausgabe von „Hallo, Welt!“ immer die erste Lektion beim Erlernen einer Pro­gram­mier­spra­che.

In welchen Bereichen wird Blockly ein­ge­setzt?

Während die Anwendung an sich eher für Studenten und Quer­ein­stei­ger gedacht ist, so ist die ei­gent­li­che Bi­blio­thek an Ent­wick­ler gerichtet. Ent­wick­ler können mit wenig Aufwand eigene Blöcke mit Funk­tio­nen und Logik anlegen, um aus der Bi­blio­thek eine ei­gen­stän­di­ge App zu ent­wi­ckeln.

Wer innerhalb von Blockly eigene Blöcke ent­wi­ckeln möchte, hat zwei Mög­lich­kei­ten: Zum einen gibt es die Ja­va­Script-API, die vorrangig für Web­an­wen­dun­gen benutzt wird. Zum anderen steht eine JSON-Schnitt­stel­le bereit, die auch unter Android und iOS funk­tio­niert. Al­ler­dings gibt es im JSON-Format nur die meist­ge­nutz­ten Blöcke zur Auswahl. Eine um­fas­sen­de Do­ku­men­ta­ti­on kann zu­sätz­lich einfach auf GitHub ein­ge­se­hen werden. Darüber hinaus bietet Google selbst einen aus­führ­li­chen Leitfaden zur Ent­wick­lung und Benutzung von Blockly.

Auf YouTube, Stack Overflow und GitHub gibt es mitt­ler­wei­le unzählige Tutorials und Do­ku­men­ta­tio­nen, wie man die Bi­blio­thek effizient nutzen kann. Die Pro­gram­mie­rung diverser Schalter und Empfänger für die Steuerung im Smart Home ist nur eine der vielen Mög­lich­kei­ten. Da man das Programm mit den ver­schie­dens­ten Sprachen verbinden kann, steht der eigenen Krea­ti­vi­tät nichts im Weg.

Fazit: Gute Al­ter­na­ti­ve für komplexe Pro­gram­mier­spra­chen

Wer Pro­gram­mier­spra­chen lernen möchte, wird es lieben, dass das Programm nur korrekte Syntax schreibt und nie ein Semikolon oder An­füh­rungs­stri­che vergisst. Das spie­le­ri­sche Prinzip ver­ein­facht es, auch als Anfänger direkt an Projekten arbeiten zu können und so Er­fah­run­gen zu sammeln. Man lernt schnell die Mög­lich­kei­ten der Sprache kennen und kann in­stink­tiv Pro­to­ty­pen und Mock-ups entwerfen.

Blockly ist simpel gehalten, kann den Workflow aber erheblich be­schleu­ni­gen. Es ist einfach, die Bi­blio­thek in be­stehen­de Projekte zu in­te­grie­ren, und noch einfacher, damit große Projekte zu rea­li­sie­ren. Wichtig ist al­ler­dings, dass man sich mit den Funk­tio­nen vertraut macht. Der durch Blockly erstelle Quelltext kann – dank der großen Spra­chen­viel­falt – in viele Projekte in­te­griert werden. Deshalb ist die Open-Source-Lösung nicht nur für Ein­stei­ger in­ter­es­sant.

Zum Hauptmenü