Dieser Beitrag behandelt nur den theoretischen Lösungsansatz und enthält kein Schritt-für-Schritt Coding-Tutorial. Den Soucecode kannst du hier herunterladen.
Willst du einfach nur die App runterladen? Besuche dgn-app.kurtiii.de/install oder besuche dgn-app.kurtiii.de/web um die App im Browser zu verwenden.
Ich dachte mir, dass es nach über einem Jahr schon mal wieder Zeit werden könnte, einen Blog-Artikel zu veröffentlichen. Also lehnt euch zurück, holt euch ein McFlurry und lest euch durch, wie genau man mit ein bisschen Code und viel zu viel Zeit Daten von Webseiten scraped (also stibitzt 🦝)
Das ursprüngliche Problem
Seht ihr das viele Weiß und wie unfassbar „gut“ diese Seite auf Mobilgeräte reagiert? Das ist die aktuell verfügbare Noten-Seite des Domgymnasiums Naumburg. Bis ich das ganze durch ein kleines Browser-Addon gefixxt habe (könnt ihr übrigens hier im Chrome-Store runterladen) war es seit diesem Schuljahr gar nicht mehr möglich, seine Noten digital einzusehen.
Über die Schulwebsite ist es auch möglich, den aktuellen Vertretungsplan zu sehen. Allerdings in einer ebenfalls eher mittelmäßig gestalteten Tabelle mit absolut nicht exsistenter Übersichtlichkeit.
Das konnte so natürlich auf keinen Fall weitergehen. Ich habe also eine kleine App geschrieben, welche den Stundenplan und die Noten übersichtlich, responsiv und im Darkmode-Design [!!!] darstellt.
Cookies… Nomnom 🍪
Natürlich klaue ich nicht wirklich irgendwelche Noten. Wenn ihr mir da nicht vertraut, könnt ihr auch im Quellcode nachlesen bzw. eure eigene Instanz der App aufsetzen.
Aber wie genau kommt die App jetzt überhaupt an eure Noten?
Keine Sorge, ich versuche nicht allzu technisch zu werden und mich halbwegs verständlich auszudrücken. Nachdem du dich mit den Anmeldedaten in der App angemeldet hast, welche du auch für die Notenseite der Schule verwendest, schickt „verkleidet“ sich mein Server als Mensch und meldet sich an. Aus meinem Server wird quasi du (💻 → 🫅).
Klingt komisch? Lass es mich erklären. Mein Server simuliert, dass sich ein echter Mensch versucht auf der Schulwebseite anzumelden.
Dafür öffnet er die Schulwebseite, füllt automatisch deine Anmeldedaten aus und schickt diese ab. Stell dir das vor, wie ein Roboter der in das Anmelde-Formular deine Anmeldedaten einträgt und dieses dann absendet. Wenn deine Anmeldedaten korrekt waren, antwortet der Schulserver mit einem Session-Cookie. Der ist in Wirklichkeit gar nicht mal so lecker wie er klingt sondern einfach nur eine ewig lange zufällige Zeichenkette.
Um zu verstehen, was dieser Session-Cookie macht muss man erstmal grundlegend verstehen, was ein Cookie ist. Sehr simpel zusammengefasst ist es so: ein Cookie ist eine kleine Textdatei, welche dein Browser von einer Webseite bzw. deren Server bekommen kann. Dein Browser speichert diese Textdatei dann auf deinem Gerät und schickt diese bei jedem Aufruf der Seite mit an den Server.
Aber was hat das jetzt mit deinen Noten zu tun? Wenn du dich auf der Schulwebseite anmeldest, überprüft der Schulserver deine Anmeldedaten. Wenn diese korrekt sind, erstellt der Schulserver einen Session-Cookie in seiner Datenbank. Dort verknüpft er den Session-Cookie (z.B. xyz) mit deinem Anmeldenamen (z.B. maxi.muster). Dein Browser speichert diesen Cookie und sendet also bei jedem Aufruf der Schulwebseite xyz mit. Der Schulserver schaut dann nach und sieht: okay, Session-Cookie xyz wurde mir gesendet, dieser Browser-Nutzer ist also als maxi.muster angemeldet.
Und genau so funktioniert auch die App. Mein Server meldet sich also mit deinen Anmeldedaten bei der Schulwebseite an und erhält als Gegenzug einen Session-Cookie. Dieser Session-Cookie wird lokal auf deinem Gerät gespeichert, solange du in der App angemeldet bist.
Sobald du also versuchst, auf der Notenseite deine Noten anzusehen, öffnet mein Server die Schulwebseite und schickt den Session-Cookie mit. Somit denkt die Schulwebseite, dass mein Server du bist. Danach beginnt der komplizierte Teil…
Tabellen? Grauenhaft!
Nun ist der Server angemeldet und „sieht“ die folgende Seite mit der Notentabelle. Doch da gibt es schon das erste Problemchen. Ein Computer kann nicht sehen (ik ik, theoretisch schon. Ich hätte auch eine eigene KI schreiben können, welche die Tabelle selbstständig analysiert und die Daten bereitstellt aber ich glaube, das hätte irgendwie ein wenig den Rahmen gesprengt).
Aber da gibt es eine Sache, welche sich eigentlich ganz gut maschinell auslesen lassen: Tabellen! ✨
Also habe ich einen kleinen Tabellen-Parser geschrieben, welcher die Tabelle nach und nach durchgeht und die Daten bzw. Noten in ein für uns nutzbares Format extrahiert: gepriesen sei JSON! 🫶 Übrigens hab ich schonmal einen Beitrag über Tabellen-Parser veröffentlicht. Damals noch mit Excel (war kleines wenig angenehmer 🥲). Wenn du Interesse hast, kannst du ihn hier lesen.
Im Detail zu erklären, wie genau er funktioniert wäre definitiv zu umfangreich. Ich hab schon genügend Stunden mit diesem sch*** Parser verschwendet… Noch dazu sind die Daten der Schule teilweise fehlerhaft und die Tabelle beschädigt. Deshalb muss der Parser bevor er die Daten extrahiert erstmal die Tabelle reparieren. Wenn du (wider Erwarten) wirklich mehr über den Parser lernen willst und wie er aus HTML-Wirrwarr ein wunderhübsches JSON generiert, kannst du dir die tableparser.func.php gerne hier auf GitHub ansehen.
Das Schlimmste haben wir jetzt hinter uns. Wir haben alle Noten und sonstige Daten aus der Tabelle in ein für uns nutzbares Format gewandelt. Nun kommt der wortwörtlich schöne Teil. Das Frontend ✨
Auf der Startseite der App erhält man eine Übersicht über alle seine verfügbaren Noten. Außerdem wird zu jedem Fach der entsprechende Durchschnitt sowie die daraus resultierende Note angezeigt. Weiter unten können alle Noten außerdem nochmal in einer übersichtlicheren Tabellenform angezeigt werden.
Wenn man in der Oberstufe ist und entsprechende Daten vorliegen, kann oben das gewünschte Notenhalbjahr ausgewählt werden.
Mit einem Klick auf ein bestimmtes Fach kann dessen Detailansicht aufgerufen werden. Hier sieht man ebenfalls den Durchschnitt sowie die daraus resultierende Endnote. Außerdem sieht man hier eine genaue Aufschlüsselung aller gesammelten Noten in je Klausuren bzw. sonstigen Noten.
Für Schüler der Unterstufe (< 11. Klasse) ist es außerdem möglich Noten zu simulieren, also fiktive Noten einzutragen und zu überprüfen wie diese sich auf den Schnitt auswirken. Idk warums dieses Feature gibt, wurde sich glaube irgendwann mal gewünscht.
Vertretungsplan
Okay, stimmt. Das Feature hatte ich ja auch versprochen… Na gut, bringen wir’s hinter uns…
Nach ein wenig Recherche haben wir herausgefunden, dass das Domgymnasium die Stundenplanverwaltungssoftware (sehr deutsches Wort…) von Indiware verwendet. Diese haben sogar eine alte Version einer Android-App namens VpMobil, welche es ermöglicht auf den Vertretungsplan der Schule zuzugreifen. Also Ende gut, alles gut: jeder installiert sich einfach VpMobil und das Problem ist gelöst!
Nicht so ganz… die App ist auf iOS nicht (mehr) verfügbar und im Google Play Store auch nur noch für vereinzelte veraltete Android-Versionen. Ohne Sideloading durch eine .apk ist es also nicht mehr möglich diese App zu verwenden.
Man könnte jetzt natürlich auf die Idee kommen mithilfe von HTTP Toolkit alle Netzwerkanfragen dieser App zu tracken und versuchen herauszufinden, woher sie ihre Daten bekommt…
Guess what? Genau so hab ich’s gemacht! Und nach ein paar Minuten rausprobieren, hab ich herausgefunden über welchen Endpunkt man die Vertretungs- und Stundenplandaten bekommt. Der Endpunkt ist nicht mit einem Passwort versehen und kann von jedem öffentlich aufgerufen werden. Vielleicht sollte man aus Gründen des Datenschutzes das nicht so gestalten, liebes DGN… Aber immerhin werden hier die Daten im XML-Format geliefert… Thank God, nicht noch ein Tabellen-Parser.
Jetzt die Grundfunktionen einer Stundenplan-App einbauen und die Möglichkeit nach den eigenen Kursen zu filtern und fertig ist’s!
So ein paar kleine Boni wie beispielsweise die Möglichkeit Blöcke (also z.B. 1. + 2. Stunde) zu gruppieren gibt es auch noch.
Außerdem können weitere Informationen wie beispielsweise Informationen zu geänderten Unterrichtszeiten über ein eigenes Menü eingesehen werden.
Über die Pfeiltasten in der Kopfzeile lässt es sich bequem zwischen den einzelnen Tagen hin und her schalten.
Sicherheit & Datenschutz
Ich gebe mein bestes, um die App so sicher wie möglich zu gestalten. Beispielsweise werden alle eingebenen Anmeldedaten verschlüsselt an den Server übertragen. Auf meinem Server werden die Anmeldedaten nicht gespeichert, sondern nur zur Anmeldung verwendet. Ich speichere die Anmeldedaten lokal auf deinem Gerät mithilfe von Cookies. Dabei wird deine Passwort verschlüsselt gespeichert und kann nur mithilfe der PIN entschlüsselt werden. Um die Sicherheit deines Schul-Kontos zu erhöhen empfehle ich dir, ein starkes Passwort zu verwenden.
Ich habe zu keinem Zeitpunkt Zugriff auf deine Noten oder andere Daten. Alles was gespeichert wird (wie z.B. deine Anmeldedaten) liegt ausschließlich auf deinem Gerät.
Das komplette Projekt ist opensource. Wenn du den Quellcode überprüfen möchtest oder einen Fehler gefunden hast, kannst du dir gerne die GitHub-Seite ansehen. Solltest du irgendwelche Probleme oder Fragen haben, stehe ich dir gerne jederzeit zur Verfügung. Kontaktoptionen findest du hier.
Schlusswort
Rein theoretisch haben alle diese Funktionen bereits vorher exsistiert allerdings waren diese dann sehr umständlich zu nutzen. Die (inoffizielle) DGN App vereinfacht den mobilen Zugriff auf Noten und Vertretungsplan allerdings sehr, da man sich beispielsweise nicht immer erneut anmelden muss oder eine shady .apk sideloaden muss.
Ich hoffe mein kleiner Exkurs hat euch gefallen auch wenn es heute mal wieder um Tabellen ging (ich erkenne langsam ein Muster). Ich freue mich gerne über Feedback per Mail oder in den Kommentaren 🫶
Ach und übrigens: ich bin gar kein Schüler am Domgymnasium Naumburg. Fragt mich bitte nicht warum ich das alles gemacht hab… Und dankeschön nochmal an meine Kontaktperson, welche mir dessen Anmeldedaten zum entwickeln und testen bereitgestellt hat (darum sind in diesem Artikel auch einige persönliche Daten geblurrt).
Cheers. 🦆
Schreibe einen Kommentar