Lernanwendung

Über das Projekt

Ich arbeite mich gerade tiefer in die Themen Strom, Stromnetze und erneuerbare Energien ein. Dabei kommen ständig neue Begriffe, Abkürzungen und Zusammenhänge zusammen, die ich regelmäßig wiederholen will.

Zum Lernen hätte ich eine bestehende Anwendung wie Anki nehmen können. Mir war es jedoch wichtig zu entscheiden, wie die Anwendung aufgebaut ist und welche Funktionen sie braucht. Gleichzeitig ist es eine gute Gelegenheit gewesen, praktisch mit relationalen Datenbanken zu arbeiten.

So ist nach und nach meine eigene Lernanwendung entstanden.

Die Anwendung

Die Inhalte sind in Lernbereiche und Unterkategorien gegliedert, darunter liegen die einzelnen Karteikarten. Neue Karten kann man direkt in der Anwendung anlegen oder gesammelt über CSV-Dateien importieren.

Im Lernmodus sieht man zuerst nur die Frage. Nach dem Umdrehen bewertet man die Karte mit Nochmal, Schwer, Gut oder Leicht. Der Lernstand wird pro Nutzer gespeichert, und daraus berechnet die Anwendung, wann eine Karte wieder an der Reihe ist.

Für manche Inhalte gibt es besondere Kartenformen. Bei geografischen Fragen lassen sich SVG-Karten von Deutschland, Europa oder der Welt einbinden, auf denen die gesuchte Region auf der Rückseite markiert wird. Für Mathematik und energietechnische Grundlagen gibt es zusätzlich generierte Übungsaufgaben: Gespeichert werden nur der Aufgabentyp und ein paar Parameter, die konkreten Zahlen entstehen bei jedem Aufruf neu.

Funktionen

Die Oberfläche gibt es in einem hellen und einem dunklen Design, zwischen denen sich jederzeit umschalten lässt. Ebenso kann zwischen Deutsch und Englisch gewechselt werden, sowohl für die Oberfläche als auch für die Karteninhalte: Eine Karte kann in beiden Sprachen hinterlegt werden, es genügt aber auch eine.

Innerhalb einer Unterkategorie kann man die Karten durchsuchen und nach ihrem Lernstand filtern, also zum Beispiel nur die noch unsicheren oder die neuen Karten anzeigen. Dazu zeigt jede Unterkategorie eine kleine Übersicht, wie viele Karten gerade zur Wiederholung anstehen, wie viele schon sitzen und wie viele noch unsicher sind.

Beim Lernen wird zu jeder Bewertung angezeigt, wann die Karte das nächste Mal an der Reihe ist. So ist für mich nachvollziehbar, wie sich die Wiederholungsabstände mit der Zeit verändern.

Technisches Vorgehen

Die Anwendung besteht aus einem Frontend mit HTML, CSS und JavaScript, einem PHP-Backend und einer MySQL-Datenbank.

Der Browser greift nie direkt auf die Datenbank zu. JavaScript schickt seine Anfragen an PHP-Endpunkte, die die Eingaben prüfen und danach die passenden Services aufrufen. In diesen Services steckt die Logik und die SQL-Abfragen. Oberfläche, API und Datenbankzugriff bleiben getrennt.

Auch in der Datenbank sind die Zuständigkeiten aufgeteilt. Kategorien und Karten liegen zum Beispiel getrennt vom Lernfortschritt. Der Fortschritt verknüpft jeweils einen Nutzer mit einer Karte, sodass mehrere Nutzer dieselben Inhalte lernen können, ohne sich den Lernstand zu teilen.

Beim Start werden Kategorien, Karten und Fortschritte nicht einzeln abgefragt, sondern über einen gemeinsamen Bootstrap-Aufruf geladen und dann im Browser zwischengespeichert. Dadurch muss beim Wechsel zwischen den Bereichen nicht jedes Mal erneut die Datenbank befragt werden.

Entwicklungsumgebung

Entwickelt habe ich unter Windows mit WSL2 und Ubuntu. Das Projekt liegt im Linux-Dateisystem unter /home/user/projects/learning-app. PHP, MySQL und der lokale Webserver laufen ebenfalls dort, während ich VS Code über Remote-WSL und den normalen Windows-Browser nutze.

Dabei habe ich auch besser verstanden, wo die Entwicklungsumgebung aufhört und die eigentliche Anwendung anfängt. Zugangsdaten etwa liegen in einer .env-Datei außerhalb des öffentlich erreichbaren Verzeichnisses. Der Webserver liefert nur den Ordner public aus. Services, Datenbankkonfiguration und andere interne Dateien sind über den Browser nicht erreichbar.

Ein Teil der Arbeit war deshalb auch Fehlersuche außerhalb des eigentlichen Codes. Als VS Code zum Beispiel immer wieder die Verbindung zu WSL verlor, lag es am Ende nicht an der Anwendung, sondern am Energiesparmodus von Windows. Über die Windows-Ereignisprotokolle und die Logs von VS Code konnte ich nachvollziehen, dass die Verbindung jedes Mal genau während des Standbys abbrach. Solche Momente haben mir geholfen, die verschiedenen Ebenen der Umgebung besser auseinanderzuhalten.

Arbeiten mit Copilot

Einen großen Teil des Codes hat GitHub Copilot geschrieben. Es ging mir nicht darum, möglichst viele Zeilen Code zu schreiben.

Ich habe Funktionen und Anforderungen geplant und beschrieben, die Vorschläge geprüft und sie dann getestet oder angepasst. Damit konnte ich mich auf das konzentrieren, was mich eigentlich interessiert: die Datenbankstruktur, den Aufbau der Anwendung, das Verhalten einzelner Funktionen und das Design.

Technologien: PHP · JavaScript · MySQL · Apache · Git · GitHub Copilot · WSL2

Der Code ist auf GitHub einsehbar: https://github.com/pachama-ai/learning-app