Unsere Visualisierungsfunktion ist im Rahmen einer Masterarbeit entstanden
05. Dezember 2019 - Lesezeit: 7 Minuten.
Unsere Visualisierung (Veranschaulichung) von Java-Programmen wurde in einer Masterarbeit entwickelt - ein Grund, ein wenig über den Umfang und das Ziel dieser Masterarbeit zu berichten!
Als Tutor in „Praktische Informatik 2“ im SoSe 2018 beschäftigte mich oft, wie man mittels Veranschaulichungen Algorithmen und Datenstrukturen verständlicher machen konnte und habe im Verlauf des Semesters für meine TutantInnen wirklich viele Animationen per Hand erstellt. Ziel der Animationen war es, den TutantInnen ein Gefühl davon zu geben, was der Programmcode macht, den der Professor damals oft nur knapp erklärte.
Wie dies beispielsweise aussah, zeigen nachfolgende Folien:
Das Erstellen dieser Animationen war als Tutor wirklich mühselige Arbeit, hat viele Stunden in Anspruch genommen und die Animationen waren auch nicht immer einheitlich. Deshalb machte ich mir zu der Zeit oft Gedanken, wie man diesen Prozess ggf. automatisieren könnte. Nach der Entwicklung der Coding Platform vom Oktober 2018 bis Februar 2019 im Rahmen einer Independent Study schlug ich dem betreuenden Dozenten Dr. Karsten Hölscher das Thema einer automatischen Visualisierung der Ausführung von Java-Programmen für die Coding Platform vor, an dem er viel Interesse zeigte.
Das Ziel war es, eine Visualisierung zu entwickeln, mit welcher sich SchülerInnen und Studierende zu jeder Zeit eine Veranschaulichung (also Visualisierung) zu ihrem eigenen Programmcode ansehen können, um zu verstehen, wie die Algorithmen und Datenstrukturen funktionieren und auch eigene Fehler schneller finden können.
Zum Zeitpunkt der Entwicklung an der Masterarbeit gab es bereits einige Visualisierungssysteme für Java, die die Ausführung von Java-Programmcode vollautomatisch darstellen konnten. Diese brachten entweder eine eigene IDE mit oder ließen sich als Plugin zu einer bestehenden IDE hinzufügen - beispielsweise Jeliot 3, JGrasp und Jive. Alle bestehenden Visualisierungen besaßen ganz unterschiedliche Vor- und Nachteile und zielten auch auf leicht unterschiedliche Zielgruppen ab. Zudem ließen sich kurze Java-Programme bereits auf Java Tutor im Webbrowser visualisieren. Die vorhandenen Systeme waren i.d.R. allerdings nur begrenzt für komplexere Algorithmen und Datenstrukturen geeignet.
Nachfolgend ein paar Screenshots mit nahezu dem gleichen Programmcode in den genannten Visualisierungen:
Offensichtliche Ziele einer solchen Visualisierung sind natürlich, dass die entwickelte Visualisierung möglichst effektiv beim Lernen und dem Finden selbstgemachter Fehler helfen soll, dass sie intuitiv verstanden werden kann und sich ebenfalls auch für die komplexeren Programmbeispiele eignet. Speziell für die Coding Platform gab es allerdings weitere Ziele in Hinsicht der Performance, die für die Akzeptanz auf der Coding Platform erreicht werden müssen - ohne diese würde die Visualisierung nämlich wohl kaum Verwendung finden:
In der Masterarbeit habe ich mich neben der Implementierung und der Evaluierung eines sehr schnellen Systems zum Auslesen dieser Informationen während der Ausführung nahezu beliebiger Java-Programme noch mit dem Design der Nutzeroberfläche und dem Force-Layout-Verfahren, mit welchem die Objekte ausgerichtet werden, beschäftigt, damit die Objekte tatsächlich intuitiv und übersichtlich dargestellt werden. So werden baumartige Datenstrukturen auch automatisch eher hierarchisch angeordnet. Referenzen mit dem Attributnamen „links“ oder „left“ werden automatisch nach links geschoben, während Referenzen mit dem Attributnamen „rechts“ oder „right“ auch automatisch nach rechts gezogen werden:
Das Ergebnis kennen einige Nutzer der Coding Platform bereits. Eine Kurzanleitung und Übersicht über den Funktionsumfang für Lehrende und Interessierte:
Um schließlich noch ein paar Indizien dafür zu sammeln, ob die Visualisierung tatsächlich auch beim Lernen helfen könnte, habe ich noch eine kleine Nutzerstudie mit 17 Teilnehmern durchgeführt, größtenteils aus der Veranstaltung „Praktische Informatik 2(a)“ der Universität Bremen. Nach Bearbeitung von drei Programmieraufgaben wurden die ersten zwei allgemeine Fragen nach der Erfassung persönlicher Informationen wie folgt beantwortet:
• Ich halte den Einsatz der Coding Platform (auch ohne Visualisierungsfunktion) zum begleitenden Lernen in der Praktischen Informatik für nützlich:
• Ich halte den Einsatz der Visualisierung zum begleitenden Lernen in der Praktischen Informatik für nützlich.
Auch nachfolgende Fragen wurden mit Ausnahme zweier spezieller Fragen durchweg sehr positiv beantwortet. Die Antworten im Freitextfeld waren darüber hinaus sehr erfreulich:
Die häufigsten Kritikpunkte waren die fehlende Autovervollständigung des Programmcodes sowie ein damaliger Bug, der noch zu fehlerhaften Einrückungen des Programmcodes führte. Letzteres haben wir selbstverständlich schnell behoben. Vereinzelt wurden Funktionalitäten innerhalb der Visualisierung nicht gefunden, die wir nachträglich ein wenig angepasst haben - z.B. haben wir kleine Buttons zum herein- und herauszoomen aus der Objektansicht hinzugefügt, da ein Teilnehmer nicht bewusst war, dass man mit dem Mausrad zoomen konnte oder die präzisere Benennung einzelnen Ansichten, da einem anderen Teilnehmer nicht bemerkt hat, dass die Visualisierung auch den Wert der lokalen Variablen darstellt. Dafür, dass die Studienteilnehmer keine größere Einweisung in die Visualisierung erhalten haben, schien die Visualisierung dennoch schnell von den meisten Teilnehmern problemlos verwendet werden zu können.
Eine Rückmeldung, die schließlich auch dazu führte, dass wir mit der Entwicklung eigener Java-Kurse begannen, war folgende:
Schließlich war die Arbeit an der Masterarbeit und die Entwicklung der Visualisierung wirklich spannend! Für die Coding Platform liefert sie eine wirklich nützliche Funktionalität basierend auf einer soliden Implementierung, die wir auch in Zukunft verbessern und weiter entwickeln werden.
Author: Andre Mühlenbrock
Als Tutor in „Praktische Informatik 2“ im SoSe 2018 beschäftigte mich oft, wie man mittels Veranschaulichungen Algorithmen und Datenstrukturen verständlicher machen konnte und habe im Verlauf des Semesters für meine TutantInnen wirklich viele Animationen per Hand erstellt. Ziel der Animationen war es, den TutantInnen ein Gefühl davon zu geben, was der Programmcode macht, den der Professor damals oft nur knapp erklärte.
Wie dies beispielsweise aussah, zeigen nachfolgende Folien:
Das Ziel war es, eine Visualisierung zu entwickeln, mit welcher sich SchülerInnen und Studierende zu jeder Zeit eine Veranschaulichung (also Visualisierung) zu ihrem eigenen Programmcode ansehen können, um zu verstehen, wie die Algorithmen und Datenstrukturen funktionieren und auch eigene Fehler schneller finden können.
Zum Zeitpunkt der Entwicklung an der Masterarbeit gab es bereits einige Visualisierungssysteme für Java, die die Ausführung von Java-Programmcode vollautomatisch darstellen konnten. Diese brachten entweder eine eigene IDE mit oder ließen sich als Plugin zu einer bestehenden IDE hinzufügen - beispielsweise Jeliot 3, JGrasp und Jive. Alle bestehenden Visualisierungen besaßen ganz unterschiedliche Vor- und Nachteile und zielten auch auf leicht unterschiedliche Zielgruppen ab. Zudem ließen sich kurze Java-Programme bereits auf Java Tutor im Webbrowser visualisieren. Die vorhandenen Systeme waren i.d.R. allerdings nur begrenzt für komplexere Algorithmen und Datenstrukturen geeignet.
Nachfolgend ein paar Screenshots mit nahezu dem gleichen Programmcode in den genannten Visualisierungen:
- Einerseits darf der Einsatz bzw. das Aktivieren der Visualisierung nicht dazu führen, dass die Kosten für den Betrieb der Plattform nennenswert steigen. Bevor ein Programm visualisiert werden kann, muss die Visualisierung nämlich erst einmal an die Informationen gelangen, die gezeigt werden sollen. Da die Ausführung der Programme auf den Servern der Coding Platform statfindet, muss diese Information auch auf dem Server gewonnen werden. Würde sich die Zeit der Kompilierung und Ausführung durch diese Informationsgewinnung allerdings verdoppeln oder verdreifachen, würde sich die Anzahl der benötigten Server ebenfalls erhöhen und die Betriebskosten damit steigen - dies wird von Schulen und Universitäten natürlich eher ungern gesehen.
- Andererseits sollen die Nutzer auch keine 2, 10 oder 100 Sekunden darauf warten müssen, bis die Visualisierung geladen ist und gezeigt werden kann. Als Nutzer soll man einfach ein Fenster öffnen können und eben schnell danach schauen können, was das Programm gerade falsch macht. Dies war insbesondere einer der Schwierigkeiten bei Java Tutor, da hier nicht ganz triviale Programme aufgrund der Art & Weise des Auslesens der Informationen oft sehr lange für die Generierung der Visualisierung brauchten.
Kurzanleitung und Übersicht über den Funktionsumfang der Visualisierung: Dieses Video setzt ein grundlegendes Verständnis von Java voraus - dieses Verständnis erhältst Du z.B. in unserem Kurs „Java 01: Die Grundlagen“ und „Java 02: Objektorientierte Programmierung“. Selbstverständlich lässt sich die Visualisierung auch verwenden, ohne Konzepte wie die objektorientierte Programmierung bereits verstanden zu haben.
• Ich halte den Einsatz der Coding Platform (auch ohne Visualisierungsfunktion) zum begleitenden Lernen in der Praktischen Informatik für nützlich:
• Ich halte den Einsatz der Visualisierung zum begleitenden Lernen in der Praktischen Informatik für nützlich.
Auch nachfolgende Fragen wurden mit Ausnahme zweier spezieller Fragen durchweg sehr positiv beantwortet. Die Antworten im Freitextfeld waren darüber hinaus sehr erfreulich:
„Ich finde die Platform wirklich hilfreich und die Visualisierung sehr schön mit den Farben und es macht so mehr Spaß zu programmieren und hilft auch echt beim Verständnis.“
„Finde ich sehr gut und hilfreich!“
„Ich finde die Visualisierung sehr schön und übersichtlich gestaltet!“
„Abgesehen von den oben genannten Punkten gefiel mir die Coding Plattform sehr gut. Die Nutzeroberfläche ist übersichtlich und man findet sich (meistens) gut zurrecht.“
„Ich bin sehr beeindruckt von der Seite, also von der Aufmachung und der Funktionsweise!“
„Die Visualisierung hat deutlich beim Verstaendnis (Besonders bei der Linksrotation) geholfen“
„Ich fand die Visualisierung sehr hilfreich, gerade wenn man noch unerfahren ist, ist die Abstraktheit des Programmierens manchmal hinderlich und da ist eine Visualisierung sehr hilfreich.“
„Finde ich sehr gut und hilfreich!“
„Ich finde die Visualisierung sehr schön und übersichtlich gestaltet!“
„Abgesehen von den oben genannten Punkten gefiel mir die Coding Plattform sehr gut. Die Nutzeroberfläche ist übersichtlich und man findet sich (meistens) gut zurrecht.“
„Ich bin sehr beeindruckt von der Seite, also von der Aufmachung und der Funktionsweise!“
„Die Visualisierung hat deutlich beim Verstaendnis (Besonders bei der Linksrotation) geholfen“
„Ich fand die Visualisierung sehr hilfreich, gerade wenn man noch unerfahren ist, ist die Abstraktheit des Programmierens manchmal hinderlich und da ist eine Visualisierung sehr hilfreich.“
Die häufigsten Kritikpunkte waren die fehlende Autovervollständigung des Programmcodes sowie ein damaliger Bug, der noch zu fehlerhaften Einrückungen des Programmcodes führte. Letzteres haben wir selbstverständlich schnell behoben. Vereinzelt wurden Funktionalitäten innerhalb der Visualisierung nicht gefunden, die wir nachträglich ein wenig angepasst haben - z.B. haben wir kleine Buttons zum herein- und herauszoomen aus der Objektansicht hinzugefügt, da ein Teilnehmer nicht bewusst war, dass man mit dem Mausrad zoomen konnte oder die präzisere Benennung einzelnen Ansichten, da einem anderen Teilnehmer nicht bemerkt hat, dass die Visualisierung auch den Wert der lokalen Variablen darstellt. Dafür, dass die Studienteilnehmer keine größere Einweisung in die Visualisierung erhalten haben, schien die Visualisierung dennoch schnell von den meisten Teilnehmern problemlos verwendet werden zu können.
Eine Rückmeldung, die schließlich auch dazu führte, dass wir mit der Entwicklung eigener Java-Kurse begannen, war folgende:
„Wenn das Projekt weiter gefördert wird und regelmäßig neue Aufgaben kommen, wäre meiner
Meinung nach eine Art Abo Modell wo Studenten sich anmelden können und alleine lernen können, von Vorteil! Ich würde sofort für etwas Geld ausgeben, dass mich fördert mehr praktisch
an Java zu lernen.“
Schließlich war die Arbeit an der Masterarbeit und die Entwicklung der Visualisierung wirklich spannend! Für die Coding Platform liefert sie eine wirklich nützliche Funktionalität basierend auf einer soliden Implementierung, die wir auch in Zukunft verbessern und weiter entwickeln werden.
Author: Andre Mühlenbrock