IT-Nachwuchsforschung in Österreich

Preisträgerin des Adolf-Adam-Informatikpreis
von Katrin Kern
Visualisierungstool für die
Programmierausbildung
Dass Programmieren-Lernen meist kein
leichtes Unterfangen ist, ist weithin bekannt
– die Durchfallquoten in einführenden
Kursen und vielleicht auch die
eigenen Erinnerungen an die ersten
„Gehversuche“ sprechen für sich.
Ein zentrales Problem hierbei ist, dass
die Arbeitsweise eines Computers besonders
für Anfänger*innen oft undurchsichtig
ist. Wissenslücken und inkorrekte
Annahmen über die zugrundeliegende
Maschine führen häufig zu unerwarteten
Ergebnissen. Um die internen Vorgänge
etwas sichtbarer zu machen, können an
Programmieranfänger*innen angepasste
Visualisierungen eingesetzt werden.
Das ist natürlich keine neue Idee – allerdings
waren der Funktionsumfang und
die Usability bestehender Lösungen
nicht zufriedenstellend für den Einsatz
an der Johannes Kepler Universität Linz.
Das Ziel meiner Masterarbeit war es, ein
modernes Tool zu gestalten, das komplexe
Sachverhalte für Java-Anfänger*innen
vollständig, aber möglichst einfach, darstellt.
Auch Lehrende sollten davon profitieren
– statt mit Whiteboard-Zeichnungen
und animierten Präsentationsfolien,
sollen Beispielprogramme im Unterricht
mit JavaWiz visualisiert werden können.
AUFBAU UND FUNKTIONSWEISE
Grob zusammengefasst ist JavaWiz ein
visueller Debugger: Benutzer*innen können
Zeile für Zeile durch den Code steppen
und dabei die Änderungen in den
Visualisierungen verfolgen. Im Backend
des Tools läuft ein Java-Debugger, dessen
Informationen nach jedem Schritt aufgezeichnet
und über einen Websocket an
das Frontend gesendet werden.
Das Frontend – der wesentliche Teil
der Masterarbeit – besteht aus einem
Code-Editor, einer Konsole und zwei Visualisierungen
und wurde mit Vue.js,
TypeScript, d3.js sowie d3-graphviz umgesetzt.
Im Code-Editor wird während der Ausführung
immer die nächste Zeile, die
ausgeführt wird, farblich hervorgehoben
(analog zu dem Verhalten eines „normalen”
Debuggers). Die Konsole zeigt den
Output des Programms und ermöglicht
es, Eingaben zu tätigen.
Die erste Visualisierung ist im Grunde
die digitale Version eines klassischen
„Schreibtischtests“, also einer einfachen
Tabelle, die Änderungen von Variablenwerten
darstellt und üblicherweise per
Hand durchgeführt wird. Diese Tabelle
eignet sich besonders gut für das Nachvollziehen
der ersten einfachen Programme
oder z. B. das Finden von One-Off-
Errors bei Schleifen. Die zweite, etwas
umfangreichere Visualisierung stellt
Stack und Heap dar. Der Fokus liegt stark
auf dem Hervorheben von Änderungen:
Geänderte Variablenwerte und Referenzen
werden rot und fett markiert, um die
Auswirkungen der einzelnen Codezeilen
besser nachvollziehen zu können. Damit
auch etwas größere Programme noch
sinnvoll dargestellt werden, können Objekte
im Heap ein- und ausgeklappt werden.
Zudem besteht die Möglichkeit, im
Code zurückzugehen, um sich bestimmte
Abläufe noch einmal anzusehen.
EINSATZ, ERFOLG UND ZUKUNFT
JavaWiz ist mittlerweile als Visual Studio
Code Plugin verfügbar und wurde erfreulicherweise
bereits über 1200-mal heruntergeladen.
Sowohl Studierende als auch
Lehrende an der JKU setzen das Tool im
Unterricht und bei den Hausübungen
ein.
Durch mehrere Kolleg*innen am Institut
für Systemsoftware der JKU wird Java-
Wiz laufend um viele nützliche Features
erweitert - beispielsweise gibt es mittlerweile
spezielle Visualisierungen für verkettete
Listen und Arrays.
Link zum Projekt: https://ssw.jku.at/Research/Projects/JavaWiz/
34 OCG Journal | 01 • 2024