Im Blockmodus

Blockly: Der visuelle Code-Editor fürs Web und Android

Fabian Deitelhoff
Blockly

©Shutterstock/locrifa

Programmiersprachen gibt es wie Sand am Meer. Im professionellen Bereich haben sich textbasierte Sprachen durchgesetzt. Im Bildungssektor sieht das anders aus. Gerade Anfänger profitieren von visuellen Alternativen, die eine komplizierte Syntax vermeiden. Blockly ist eine JavaScript-Bibliothek und eine Möglichkeit, um einen visuellen Code-Editor in Web-Anwendungen zu integrieren.

Visuelle Programmiersprachen umzusetzen ist keine leichte Aufgabe. Es gibt viel zu beachten und letztendlich auch zu implementieren: die einzelnen visuellen Sprachelemente, meist in Blockform, Verbindungen dazwischen, den visuellen Code-Editor und letztlich auch alles, was im Backend dahinter noch so zu erledigen ist. Denn auch eine visuelle Sprache will am Ende des Tages zum Leben erweckt werden. Entweder durch eine Code-Generierung oder durch eine direkte Interpretation der visuellen Elemente.

Um nicht jedes Mal das Rad neu erfinden zu müssen, gibt es zahlreiche Bibliotheken. So auch in der JavaScript-Welt. Diese Bibliotheken erlauben es beispielsweise, Syntaxelemente zu definieren und bieten schon viele Funktionen fertigimplementiert an. Das erleichtert die Arbeit ungemein.

Visuelle Programmiersprachen

Textbasierte Programmiersprachen sind aus dem professionellen Alltag nicht mehr wegzudenken. Seit Jahrzehnten hat sich diese Art der Sprachen und deren Nutzung durchgesetzt. Es sind zwar visuelle Programmiersprachen in Gebrauch, in der Regel beschränkt sich deren Einsatz aber auf domänenspezifische Probleme. Visuelle Programmiersprachen sind daher oftmals als domänenspezifische Sprache (DSL) konzipiert, was sowohl die Anwendungsmöglichkeiten als auch die umzusetzenden Syntaxelemente betrifft. Ganz im Gegenteil zu textbasierten Programmiersprachen, die in der Regel als Allzweckwaffe gedacht sind, um so viele Probleme wie möglich damit zu lösen. Angemerkt sei an dieser Stelle aber, dass natürlich auch textbasierte Sprachen als DSL taugen und auch im Einsatz sind. Ganz so disjunkt sind die Einsatzgebiete dann auch nicht.

Starkes Merkmal von visuellen Programmiersprachen, neben der Tatsache, dass sie grafisch sind, ist die andere Herangehensweise an das Thema Syntax. Während bei textbasierten Programmiersprachen das Erlenen der korrekten Syntax und der vorhandenen Syntaxelemente ein großer Knackpunkt ist, wird diese Barriere bei visuellen Sprachen reduziert. Das kommt gerade Lernenden in der Anfangsphase sehr zu Gute.

Dabei muss immer im Hinterkopf bleiben, dass jede Notation und damit auch jede Syntax gewisse Aspekte hervorhebt und andere bewusst unter den Tisch fallen lässt. Eine objektorientierte Sprache stellt ganz klassischerweise Objekte in den Vordergrund, während eine funktionale Sprache alles als Funktion auffassen möchte. Gleiches gilt für visuelle Programmiersprachen, die zum Beispiel häufig einen sehr geringen Wert auf ein ausgeklügeltes Typsystem legen. Oftmals ist gar kein Typsystem vorhanden und im Hintergrund werden Datentypen hin und her gewandelt. Wo es gar nicht passt, können durch die visuelle Syntax auch Typen erzwungen werden.

Was ist Blockly genau?

Wie in der Einleitung schon kurz erwähnt, ist Blockly eine JavaScript-Bibliothek, die einen visuellen Code-Editor für das Web und Android-Apps anbietet. Dieser Artikel konzentriert sich auf den Einsatz innerhalb einer Web-Anwendung.

Blockly nutzt visuelle Code-Blöcke, die vom Anwender ineinandergesteckt werden müssen. Dazu besitzen Blöcke jeweils einen Ein- und Ausgabeanschluss, falls diese vorgesehen sind. Die einzelnen Blöcke sind dabei farblich strukturiert, sodass sie einem bestimmten Einsatzzweck, wie zum Beispiel Kontrollstrukturen, zugeordnet werden können.

Blockly bietet also nicht nur ein paar bunte Elemente an, sondern liefert gleich die ganze Umgebung mit. Bei Blockly heißen diesen Umgebungen Workspaces. Noch mit an Bord sind zum Beispiel eine Toolbox mit verschiedenen Kategorien, eine Zoom-Funktion für den Code-Editor und Code-Generatoren. Einige dieser Features zeigt der Artikel im weiteren Verlauf.

Auf der Webseite zu Blockly steht ein interessanter Spruch, der die Bibliothek gut beschreibt:

Blockly ist für Entwickler. Blockly Apps sind für Studenten.

Das trifft den Nagel auf den Kopf. Blockly wird mittlerweile bei zahlreichen Projekten eingesetzt. Gerade um das Programmieren zu lernen ist die Bibliothek stark vertreten, da auch Lernende ohne Kenntnisse in einer Programmiersprache die grafischen Blöcke recht schnell bedienen können. Syntaxprobleme tauchen somit wenig bis gar nicht auf.

Eines dieser Projekte ist die Plattform code.org, bei dem Blockly ein zentraler Bestandteil zahlreicher Aufgaben ist. Ein weiteres Angebot ist das Projekt Open Roberta, das mit seinem Lab eine Umgebung anbietet, mit der in Blockly geschriebene Programme auf dem LEGO Mindstorms EV3 lauffähig sind.

Installation

Die Installation von Blockly ist im Grunde keine vollwerte Installation, da kaum Dinge zu beachten oder zu unternehmen sind. Blockly ist eine zu 100 Prozent Client-seitige Bibliothek. Eine Server-Unterstützung ist nicht erforderlich.

Bei der Installation konzentriert sich dieser Artikel auf die Variante mit einem Blockly Code-Editor mit fixer Breite. Es gibt auch die Möglichkeit, den visuellen Code-Editor von der Größe her variabel zu gestalten. Dazu ist etwas JavaScript-Code notwendig, der bei der Varianten mit der fixen Breite entfallen kann. Das Vorgehen ist allerdings gut auf der Projektseite zu Blockly beschrieben.

Blockly steht als Download über die Projektseite zur Verfügung. Entweder als zip- oder tar-Archiv. Alternativ ist der gesamte Sourcecode auch auf GitHub einsehbar, da Blockly ein Open Source-Projekt ist und unter der Apache Lizenz 2 steht.

Für die Variable mit der fixen Breite sind erst einmal drei JavaScript-Dateien erforderlich. Diese, mit den Namen blockly_compressed.js, blocks_compressed.js und de.js müssen als Skript-Dateien in die Webseite eingebunden werden. Erstere enthält die Blockly Kern-Komponenten, zweite die Standardblöcke, die mit Blockly mitgeliefert werden und die dritte Datei beherbergt alle Meldungen in deutscher Sprache, die von Blockly erzeugt werden können. Aktuell werden 61 verschiedene Sprachen mit Blockly ausgeliefert.

Blockly im Einsatz – eine erste Anwendung

Grundsätzlich reichen die drei genannten JavaScript-Dateien aus, um Blockly startklar zu machen. Wirklich etwas zu sehen ist dadurch natürlich noch nicht. Was noch fehlt ist ein Bereich für den visuellen Code-Editor von Blockly, sowie eine Liste von Blöcken, die von den Lernenden auf den Code-Editor gezogen werden können.

Ersteres erreicht die folgende Zeile, die allerdings auch anders aussehen kann:

<div id="blocklyDiv" style="height: 500px; width: 500px;"></div>

Hier handelt es sich nur um ein Beispiel. Die ID des div-Elements kann anders lauten und die Größe sowieso. Insbesondere bei der zweiten Lösung, bei der Blockly in einen größenveränderbaren Container hinterlegt wird, spielt die fixe Größe keine Rolle mehr. Jetzt noch etwas JavaScript-Code hinzufügen und die Integration von Blockly in das eigene Projekt schreitet voran:

<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

Der erste Teil der Anweisung injiziert den visuellen Blockly Code-Editor in das div-Element. Da hierbei der Name des div-Elements angegeben werden muss, spielt der Name keine Rolle. Die Toolbox wird aus dem gleichen HTML-Dokument bezogen. Genauer gesagt in Form eines XML-Elements, das sich irgendwo im HTML-Code befindet, aber nicht vom Browser gerendert wird. Folgendes Beispiel ist der Blockly-Webseite entnommen:

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>

Die Typangaben entsprechen denjenigen Blöcken, die sich schon im Standard von Blockly befinden. Für eine erste kleine Demo war es das dann auch schon. Auch wenn der Code in so einem Artikel umfangreicher anmutet, ist er es in Wirklichkeit gar nicht. Aktuell hat das Demo-Projekt 29 Zeilen HTML- und JavaScript-Code. Inklusive einiger Leerzeilen zur besseren Code-Strukturierung.

Folgende Abbildung zeigt einen Screenshot dieses Demo-Projekts. Auf der linken Seite befindet sich die zuvor angesprochene Toolbox mit den geladenen Elementen.

Blockly

Abbildung 1: Erste lauffähige Demo von Blockly mit Code-Editor und Toolbox.

Auf der rechten Seite sieht man den aktuell noch leeren Code-Editor. Selbst mit diesen vergleichsweise wenigen Elementen lässt sich schon einiges anstellen. Zum Beispiel das in der nächsten Abbildung gezeigte Programm, das zehn Mal die Ausgabe „Test“ erzeugen soll.

Blockly

Abbildung 2: Das erste mit Blockly erstellte Programm.

Was aber „Ausgabe“ in diesem Zusammenhang bedeutet und wie dieser Blockly-Code überhaupt ausgeführt werden kann, ist zum jetzigen Zeitpunkt noch gar nicht klar. Im aktuellen Zustand ist der Blockly-Editor nur eine Möglichkeit, grafische Code-Blöcke auf einem Code-Editor anzuordnen und einige Einstellungen vorzunehmen. Nicht mehr und nicht weniger.

Einige Einstellungen

Beim Injizieren von Blockly gibt es die Möglichkeit, einige Optionen anzugeben, die das Aussehen oder das Verhalten des Code-Editors oder das von Blockly im Allgemeinen verändern. Eine Auswahl dieser Optionen ist:

  • Collapse: Blöcke können eingeklappt werden oder nicht.
  • Comments: Blöcke können Kommentare enthalten oder nicht.
  • Trashcan: Zeigt einen Mülleimer rechts unten an.
  • Zoom: Einstellmöglichkeiten für den Zoom-Modus. Die Zoomstufen kann ebenso angepasst werden, wie die sichtbaren Steuerelemente zum Zoomen.

Alle Eigenschaften sind in einem Dictionary zusammengefasst, das aus Namen-Werte-Paaren besteht. Die Option mit Namen Toolbox hat das vorherigen Beispiel schon gezeigt. Die Toolbox muss aber nicht ausschließlich über einen Baum bestehend aus XML-Knoten gefüllt werden. Eine Zeichenkette ist ebenso möglich. Dieser String muss zwar identisch aufgebaut sein wie die schon gezeigten XML-Knoten, allerdings können die Daten auf diese Weise auch von woanders nachgeladen werden und müssen sich nicht direkt eingebettet in der Webseite befinden. Dieser Weg ist etwas wartungsfreundlicher.

Viele dieser Optionen haben Standardwerte, die auf nicht aktiv (false) gesetzt sind. Diese Standardwerte sind allerdings an ein Standardverhalten gekoppelt. Sobald die Elemente der Toolbox in Kategorien eingeordnet sind, ändern sich die Standardwerte. Abbildung 3 zeigt eine Toolbox mit Kategorien. Dadurch sind die Bildlaufleisten und der Mülleimer sichtbar. Diese Kategorien lassen sich einfach mit dem folgenden Code aktivieren:

<category name="Control" colour="120">
    ...
</category>

Jede Kategorie muss diejenigen Elemente umschließen, die in der jeweiligen Kategorie vorhanden sein sollen. Weitere Schritte sind nicht zu beachten.

Blockly

Abbildung 3: Toolbox mit Kategorien und aktivierten Standardoptionen wie der Mülleimer.

 

Code-Generatoren und das Halteproblem

Bisher ist unser Blockly Code-Editor aber noch eine etwas statische Angelegenheit. Statisch in dem Sinne, dass zwar Blöcke im Code-Editor platziert und Einstellungen vorgenommen werden können, daraus aber nichts Weiteres generiert wird.

Blockly unterstützt die Code-Generierung mittels Code-Generatoren. Aktuell werden Generatoren für die Programmiersprachen JavaScript, Python, PHP, Dart und Lua mitgeliefert. Gerade JavaScript ist eine beliebte Methode, um Web-Anwendungen mit Blockly zu ergänzen. Dadurch lässt sich der erstellte Code direkt über die JavaScript Funktion eval ausführen. Natürlich mit all den Vor- und Nachteilen sowie Gefahren, die mit der eval-Funktion einhergehen. Der Einsatz in solch einer Umgebung ist also vorher gut abzuwägen.

Um einen Code-Generator nutzen zu können, muss dieser zunächst eingebunden werden. Bei JavaScript zum Beispiel durch folgende Zeile direkt und in die Blockly-Compressed-Datei:

<script src="javascript_compressed.js"></script>

Anschließend lässt sich um die folgende Anweisung der aktuelle Workspace zu JavaScript-Code umwandeln:

var code = Blockly.JavaScript.workspaceToCode(workspace);

Für andere Programmiersprachen, für die bereits Code-Generatoren mitgeliefert werden, müssen lediglich andere Dateien eingebunden und der gezeigte Aufruf angepasst werden.

Da das Generieren von Code schnell ist, kann die entsprechende Funktionalität ruhig mehrmals beziehungsweise regelmäßig aufgerufen werden. Beispielsweise auch immer dann, wenn sich der Code-Editor von Blockly ändert, weil Blöcke hinzugefügt, editiert oder gelöscht worden sind. Dieses Feature lässt sich durch folgenden Code-Ausschnitt realisieren:

function myUpdateFunction() {
    document.getElementById('generated').value = Blockly.JavaScript.workspaceToCode(workspace);
}
workspace.addChangeListener(myUpdateFunction);

workspace.addChangeListener(myUpdateFunction);

Der generierte Code wird einer Text-Area hinzugefügt und passt sich bei Änderungen des Code-Editors in Echtzeit an. Abbildung 4 zeigt ein Screenshot dazu. Wer jetzt noch einen Button hinzufügt, um den generierten JavaScript-Code auszuführen, hat ein direkt lauffähiges Beispiel in der Web-Anwendung eingebunden.

Blockly

Abbildung 4: Das Generieren von Code in der Web-Anwendung

Etwas Vorsicht ist geboten, wenn es um die Ausführung des generierten Codes geht. Dieser ist zwar immer syntaktisch korrekt, da Blockly keine falschen Programme zulässt, allerdings können sich Schleifen darin befinden, die unendlich sind. Um dieses Problem zu umgehen, lässt sich ein Counter einführen, der bei jeder Iteration um eins verringert wird und bei null einen Fehler erzeugt. Über die Eigenschaft

Blockly.JavaScript.INFINITE_LOOP_TRAP

Lässt sich ein Code-Snippet in jede Schleife einfügen. Wenn dieses Snippet dafür sorgt, dass der Counter reduziert wird und bei null ein Fehler erzeugt wird, ist das Problem mit endlosen Schleifen beseitigt. Weitere Informationen und konkrete Beispiele sind in der Dokumentation von Blockly zu finden.

Eigene Blöcke erstellen

Blockly erlaubt es, eigene Blöcke zu erstellen. Damit lässt sich der Funktionsumfang ziemlich genau an die eigenen Bedürfnisse anpassen. Aktuell stehen zwei Möglichkeiten zur Verfügung, wie eigene Blöcke definiert werden können.

Auf der einen Seite funktioniert das über ein JavaScript API. Diese Schnittstelle steht schon eine ganze Weile zur Verfügung und kann daher getrost als sehr stabil bezeichnet werden. Etwas neuer ist die JSON-Schnittstelle. Diese befindet sich momentan in der Entwicklung und unterstützt bisher nur häufig genutzte Blöcke. JavaScript zielt eher auf Web-Anwendungen ab während das JSON-Format auch unter Android und iOS funktioniert.

Folgende Eigenschaften können pro Block spezifiziert werden:

  • Farbe
  • Vorheriger Verbindungstyp
  • Nachfolgender Verbindungstyp
  • Ausgabe
  • Eingabe
  • Label, Texte und Bilder

Eine ausgereifte Anleitung, wie eigene Blöcke zu definieren sind und welche Funktionen dabei bereitstehen, befindet sich in der Dokumentation zu Blockly. Aufgrund des Umfangs der zahlreichen Funktionen und Möglichkeiten sei an dieser Stelle auf die Dokumentation verwiesen.

Weiterentwicklung

Sehr interessant ist die Weiterentwicklung von Blockly, die aktuell von Google in Zusammenarbeit mit dem Massachusetts Institute of Technology (MIT) vorangetrieben wird.

Als ein Vorteil von Blockly wird sehr häufig die vertikale Anordnung der Blöcke genannt. Viele der genannten Anwendungsmöglichkeiten und Projektbeispiele wie Open Roberta nennen dieses Features als ein wesentlicher Vorteil gegenüber anderer Angebote – beim LEGO Mindstorms EV3 zum Beispiel die von LEGO entworfene Home Edition Software, die eine horizontale Anordnung der Blöcke nutzt. Die vertikale Anordnung soll Vorteile beim Verständnis mit sich bringen.

Die von Google und dem MIT vorangetriebene Weiterentwicklung mit Namen Scratch Blocks nutzt allerdings auch die horizontale Variante für die Blöcke, die deutlich stärker an einen Workflow erinnert als an Programmcode. Hier wird die Zukunft noch zahlreiche Diskussionen und wissenschaftliche Untersuchungen hervorbringen müssen, um sich einem Idealzustand anzunähern. Spannend bleibt die Weiterentwicklung von Blockly dadurch aber allemal.

Fazit

Die JavaScript-Bibliothek Blockly stellt eine einfache und dennoch sehr mächtige Möglichkeit dar, grafische Code-Editoren zu erstellen. Die Integration in eigene Anwendungen ist äußerst simpel, die Dokumentation inklusive Beispielen überzeugt und die zahlreichen Projekte, die Blockly schon nutzen, zeigen, dass die Bibliothek auch in größeren Projekten überzeugen kann.

Blockly ist selbstverständlich nicht die einzige Bibliothek, die Funktionen für visuelle Code-Editoren anbietet. Gerade in der JavaScript-Welt gibt es zahlreiche weitere Bibliotheken, zum Beispiel NoFlo.js, das einen eher Workflow-getriebenen Ansatz wählt und ebenfalls einen Blick wert ist.

Aufmacherbild: Colorful wooden building blocks. Selective focus von Shutterstock / Urheberrecht: locrifa

Geschrieben von
Fabian Deitelhoff

Fabian Deitelhoff lebt und arbeitet in Dortmund, der Metropole des Ruhrgebiets. Beruflich ist er als freier Autor, Pluralsight-Autor, Sprecher und Softwareentwickler im .NET Umfeld tätig. Sie erreichen Ihn über www.fabiandeitelhoff.de, Fabian@FabianDeitelhoff.de oder als @FDeitelhoff.

Kommentare

Hinterlasse einen Kommentar

1 Kommentar auf "Blockly: Der visuelle Code-Editor fürs Web und Android"

avatar
400
  Subscribe  
Benachrichtige mich zu:
Christian
Gast

ich verstehe nur bahnhof, was das starten von blockly mit den 3 scripten zu tun hat. wohin mit den dingern, warum und weshalb. geht das auch auf deutsch…
da bleibt man doch lieber bei scratch!