AlgoViz

AlgoViz ist eine Erweiterung für Jupyter Notebook, die in Lehrveranstaltungen der AG Didaktik der Informatik genutzt wird. Sie ermöglicht es interaktive Grafiken zu programmieren und stellt eine Reihe von Visualisierungen und Werkzeugen zur Verfügung, die in Python, C++ und Typescript bzw. JavaScript genutzt werden können.

Über Docker Hub stellen wir das Image uosddi/algoviz zur Verfügung. Es beinhaltet:

  • Eine Jupyter Lab Installation
  • Den Python Kernel
  • Eine modifizierte Version des Kernels tslab für TypeScript/JavaScript
  • Die Erweiterung AlgoViz

Das Image erfordert ...

  • einen Port auf dem Host-System
  • ein Verzeichnis auf dem Host, das als Volume /opt/repos in den Container eingebunden wird.

Hinweise für Safari Nutzer

Nach unserer Erfahrung setzt der Safari Browser nicht alle Features von Scalable Vector Graphics korrekt um. Daher kann es bei der Verwendung von Safari zu Problemen kommen.

Daher empfehlen die Nutzung eines anderen Browsers.

Anmerkung zur Version

Die aktuelle Version verwendet zur Zeit noch Jupyter Notebook 6.5.4. Wir werden die Erweiterung im Laufe der nächsten Monate auf Jupyter Lab umstellen.

Die Installation

Schritt 0: Die Vorbereitung Ihres Arbeitsverzeichnisses

Erstellen Sie ein Arbeitsverzeichnis in dem Sie alle Materialien hinterlegen wollen. Wir empfehlen ein leeres Verzeichnis, das den Namen der Veranstaltung hat, z.B. CS101 für die Informatik für Anwendende.

Tipp!

Verwenden Sie für Verzeichnis- oder Dateinamen keine Leerzeichen, Umlaute oder Sonderzeichen. Beschränken Sie sich auf lateinische Buchstaben und Ziffern.

Schritt 1: Die Installation von Docker

Im ersten Schritt wird Docker auf dem eigenen Rechner installiert. Dieser wird auch Host genannt, da er der Gastgeber für die von Docker simulierte virtuelle Maschine ist. Wir verwenden im Folgenden Docker Desktop, eine grafische Oberfläche zur Verwaltung der Images.

Laden Sie von https://www.docker.com die für das Host-System (ihr Rechner) geeignete Version von Docker Desktop herunter und installieren Sie sie. Unter Windows und MacOS sollte die Installation kein Problem sein. Unter Linux kommt es auf die von Ihnen verwendete Distribution an.

Schritt 2: Das Image

Nach der Installation von Docker Desktop öffnen Sie ein Terminal (Linux/MacOS) bzw. die Eingabeaufforderung (Windows) und geben sie den folgenden Befehl ein:

Kopiere Code ins Clipboard
docker pull uosddi/algoviz:latest

Anschließend wird das Image heruntergeladen, was aber eine Weile dauern kann, das es ca. 2 GB groß ist. Fahren Sie mit dem nächsten Schritt fort, wenn der Download beendet ist.

Schritt 3: Der erste Start des Images

Starten Sie Docker Desktop. Sie sollten es in den üblichen Anwendungsmenüs finden. Nach dem Start (kann ein wenig dauern) wählen Sie im Menü auf der linken Seite den Eintrag Images. Anschließend sollte das Fenster in etwa so aussehen:

Wenn Sie mit der Maus auf den Eintrag uosddi/algoviz gehen erscheint rechts ein Button mit der Aufschrift RUN. Drücken Sie ihn. Dadurch öffnet sich folgender Dialog:

Klicken Sie auf Optional Settings. Danach sieht der Dialog etwa so aus. Allerdings sind noch keine Werte eingetragen.

Tragen Sie in die Felder Local Host und Container Path die abgebildeten Werte ein (also 8888 und /opt/repos).

Den Container Namen können Sie nach Belieben vergeben. Sinnvoll wäre das Kürzel der Veranstaltung.

Klicken Sie auf die drei Punkte im Eingabefeld Host Path. Es öffnet sich ein Dialog mit dem Sie Ihr Arbeitsverzeichnis aus Schritt 0 auswählen.

Tipp

Verwenden Sie für Verzeichnis- oder Dateinamen keine Leerzeichen, Umlaute oder Sonderzeichen. Beschränken Sie sich auf lateinische Buchstaben und Ziffern (A-Z, a-z, 0-9) und den Unterstrich _. Die Erfahrung zeigt, dass Leerzeichen und Sonderzeichen früher oder später Probleme verursachen.

Wenn Sie ein Verzeichnis ausgewählt haben, klicken Sie auf Run. Dadurch wird eine virtuelle Maschine gestartet, die das Image ausführt. Diese nennt man einen Docker Container.

War der Start erfolgreich, wechselt Docker zum Tab Containers. Unter den drei senkrechten Punkten öffnet sich ein Menü mit einer Reihe von Einträgen. Mit Open with browser öffnet sich ein Web-Browser und zeigt eine Login-Seite an. Das Passwort ist leer. Also einfach ENTER drücken.

Die späteren Starts

Möchten Sie den Container später erneut starten, gehen Sie in Docker Desktop DIREKT zur Container Sicht und starten Sie den Container. STARTEN SIE NICHT ERNEUT DAS IMAGE! Das würde einen weiteren Container erzeugen! Ist der Container gestartet, öffnen Sie über OPEN IN BROWSER den Browser. Alternativ können Sie nach dem Start einen Browser öffnen und zur URL https://localhost:8888

Die Materialien

Die Materialien für Veranstaltungen sind in verschiedenen Repositories hinterlegt. Im Menü AlgoViz finden Sie den Eintrag Add repository. Rufen Sie ihn auf und geben Sie in dem sich öffnenden Dialog die folgenden Informationen ein:

  • Den Namen eines nmeu zu erstellenden Verzeichnisses für das Repository.
  • Die URL des Repositories
  • Der Branch für die Veranstaltung

Der Name kann von Ihnen frei gewählt werden. Wir empfehlen dabei dringend, dass Sie auf Sonderzeichen und Leerzeichen verzichten. Verwenden Sie nur Klein- und Großbuchstaben sowie Ziffern und den Unterstrich "_".

Die URL und der Branch wird Ihnen im Rahmen der jeweiligen Veranstaltung mitgeteilt.

Nachdem Sie das Repository hinzugefügt haben, ercheint in Ihrem Workspace ein Button für das Repo (kurz für Repository). Wenn Sie aiuf ihn klicken, wird ihr MAterial automatisch aktualisiert.

Lokale Installation

Statt des Docker Images kann man Jupyter Lab und AlgoViz auch lokal installieren. Die Anleitung dazu findet man hier:

Die lokale Installation von AlgoViz.

Was ist ein Docker Image?

Docker ist ein System zur Virtualisierung, d.h. es ermöglicht es auf einem Rechner, dem sogenannten Host, einen anderen Computer zu simulieren. Dieser wird Guest genannt. Ein Docker Images ist im Grunde die Festplatte eines Gast-Rechners. Es wird mit Docker ausgeführt und stellt dann über die Netzwerk-Schnittstelle Dienste zur Verfügung.

Die Verwendung eines Docker Images hat die folgenden Vorteile:

  • Die Infrastruktur ist plattformunabhängig.
  • Die technische Wartung ist deutlich einfacher.
  • Man kann die Software einfach Löschen, indem das Image gelöscht wird.
  • Die Aktualisierung ist einfach.

Der Hauptnachteil ist, dass ein Image unter Umständen relativ groß ist. Das liegt daran, dass es ein vollständiges Betriebssystem enthält.

Ein paar Hinweise

Wo sind die Notebooks gespeichert?

Beim ersten Start haben Sie ein Verzeichnis auf Ihrem Rechner angegeben, den Host Path. In diesem Verzeichnis sind die Materialien und Ihre Notebooks gespeichert. Sie können auf die Dateien auch zugreifen, wenn der Container nicht läuft. Es sind ganz normale Dateien.

Welchen Browser kann ich verwenden?

Der Button OPEN IN BROWSER startet Ihren Standardbrowser. Nach unseren Erfahrungen sind nicht alle Browser gleich gut geeignet. Am Besten eignet sich Chrome und seine Derivate, z.B. Chromium oder Edge. Auch Mozilla Firefox sollte keine Probleme machen. Safari hingegen kann zu Problemen führen. Daher empfehlen Wir, dass sie entweder einen der geeigneten Browser als Standardbrowser einstellen oder Sie den Browser selbst starten und die folgende URL "ansurfen": http://localhost:8888 (Lesezeichen sind recht praktisch).