Zusammen mit einigen Mitschülern baute ich eine App für unsere Schule: Eduard. In der App findet man den filterbaren Vertretungsplan, Neuigkeiten, Termine, eine Liste aller Lehrer, alle Stundenpläne und die Artikel der Schülerzeitung.

Warum haben wir Eduard gebaut?

Vor einigen Jahren wurde der Vertretungsplan an unserer Schule digitalisiert. Über eine Webseite konnte man eine ziemlich unübersichtliche Tabelle abrufen, in der alle Vertretungen aufgelistet waren. Mit dieser Lösung waren ich und einige andere Mitschüler nicht wirklich zufrieden. Im September 2017 kam mir dann die Idee, dass ich versuchen könnte die Vertretungen von der Webseite auszulesen, um diese dann besser auf einer Webseite darzustellen.

Landing Page von Eduard
Landing Page von Eduard

Wie ist Eduard entstanden?

Auslesen des Vertretungsplan

Die einzelnen Vertretungspläne sind in HTML-Dokumenten auf dem Vertretungsplan-Server gespeichert. Die Links zu den Plänen ändern sich jedoch täglich. Die offizielle Webseite ruft eine API ab, von der Links zu den Plänen zurück kommen. Ich brauchte einige Wochen, um an die Daten zu kommen, da diese aufwendig komprimiert werden und verschiedene verschlüsselte Parameter benötigen werden. Im Endeffekt erstellte ich die Library PyDSB, mit der man die Daten abrufen kann. Die Vertretungen werden mit Beautiful Soup in Python aus dem Plan gelesen und in eine Liste, die nach Datum und Klasse sortiert werden, einsortiert.

Entstehung des Namens

Anfangs war geplant, dass die Webseite nicht nur für unsere Schule sein sollte, sondern dass jeder die Möglichkeit haben soll, seine eigene Schule hinzuzufügen. Von dieser Idee kam ich jedoch ab, als ich mit einigen Mitschülern darüber sprach und wir uns dazu entschieden eine Webseite und eine App nur für unsere Schule zu erstellen. Dabei entstand auch der Name der Eduard, der nach Eduard Mörike, dem Namensgeber unserer Schule benannt wurde. Die App für Android wurde von einem Mitschüler entwickelt.

Bau der Webseite

Die Webseite ist mit HTML, CSS und JavaScript in einer Single Page Application gebaut. Das bedeutet, dass die Webseite nicht beim Wechsel der Seite jedes mal neu geladen werden muss, sondern nur die Daten aktualisiert werden. Die Daten werden im Hintergrund von der API abgerufen. Besonders wichtig war auch, dass die Webseite anpassbar für mobile Geräte ist, da viele Schüler den Vertretungsplan hauptsächlich über ihr Smartphone abrufen.

Vertretungsplan von Eduard
Vertretungsplan von Eduard

Daten auslesen

Die API ist in Python geschrieben und verwendet das Framework Flask. Über sie läuft die Authentifizierung der App und der Webseite. Die Daten werden von der Schulwebseite und vom Vertretungsplan-Server abgerufen. Von der Schulwebseite kommen aktuelle News, Termine, eine Liste aller Lehrer und die Stundenpläne. Diese gehen alle durch verschiedene Parser, damit sie am Ende als JSON ausgegeben werden können. Leider sind die Daten auf unserer Schulwebseite oft nicht einheitlich formatiert, weshalb es viele Sonderregeln in den Parsern geben muss.

Außerdem werden noch die Artikel der Schülerzeitung von deren Webseite abgerufen. Die Daten kommen von der WordPress API der Schülerzeitung und werden für die Eduard API zusammengefasst. Zudem lassen sie sich nach Autor, Tag und Kategorie filtern.

Im Oktober funktionierte eines Tages die API für den Vertretungsplan nicht. Der Anbieter hatte seine API umstrukturiert und der Zugriff war nicht mehr wie gewohnt möglich. Die API war außerdem anders komprimiert und verschlüsselt worden, so dass es nicht mehr ohne weiteres möglich war, den Vertretungsplan abzurufen. Nach tagelanger Lösungssuche überprüfte ich die API, die von der iPhone-App verwendet wird. Da diese nicht verändert wurde und weiterhin ohne HTTPS lief, fand ich schnell heraus, welche Daten verschickt werden, um an die Links für die Vertretungspläne zu kommen. Die API für iPhones ist, im Gegensatz zur WebAPI, ziemlich einfach aufgebaut und benötigt keine weitere Verschlüssung bzw. Komprimierung.

Beta-Veröffentlichung von Eduard

Am Tag nach den Herbstferien fingen wir mit der Beta-Veröffentlichung. Die Android-App luden wir im Play Store hoch. Wir entschieden uns aber dazu, nur ausgewählten Schülern von Eduard zu erzählen. Unser Ziel war es für den Beta-Zeitraum noch möglichst viele Bugs zu finden, um dann im Januar 2018 offiziell zu veröffentlichen. In der Zeit von der Beta-Veröffentlichung bis zur richtigen Veröffentlichung behoben wir hauptsächlich Bugs und machten noch einige Designänderungen.

Notifications für Android

Eine wichtige Funktion der Eduard App sind auch die Benachrichtigungen. Wenn eine Stunde ausfällt oder vertreten wird, soll der Nutzer automatisch darüber informiert werden. Zudem sollen die Nutzer auch über neue Artikel der Schülerzeitung informiert werden. Um dies zu realisieren, wird alle 5 Minuten ein Script mithilfe von einem crontab ausgeführt. Dabei werden alle Daten abgerufen und mit den Daten aus einer MongoDB-Datenbank verglichen. Bei neuen Vertretungen oder Artikeln soll der Nutzer informiert werden. Zum Schluss werden die neuen Daten wieder in die Datenbank geschrieben.

Um die Benachrichtigungen auf die Android Smartphones zu übermitteln, wird Firebase verwendet. Die Nutzer wählen in der Android App aus, für welche Klasse sie benachrichtigt werden möchten. Dafür wird dann das entsprechende Topic abonniert. Wenn das Script durchläuft, bekommen nur die Nutzer eine Benachrichtigung, die die entsprechende Klasse abonniert haben.

Veröffentlichung

Am 8. Januar 2018 war es dann endlich soweit: Nachdem wir die Android App in den Play Store gestellt hatten und die Webseite veröffentlicht hatten, informierten wir unsere Mitschüler über die neue App und die Webseite. In den folgenden Tagen stiegen die Nutzerzahlen und wir bekamen viele positive Rückmeldungen.

Webseitenaufrufe
Webseitenaufrufe
Installationen der Android-App
Installationen der Android-App

So wurde Eduard gebaut

Backend: Die API läuft mit Flask in Python und die Daten werden in einer MongoDB Datenbank gespeichert.
Frontend: Die Webseite läuft mit HTML, CSS und JavaScript. Zusätzlich wird noch jQuery und ein selbstgebauter SPA-Router verwendet. (Update März 2018: Mittlerweile verwenden wir Vue.JS ein.)
Server: Die Webseite und die API werden bei Uberspace mit Apache und gunicorn gehostet. Für ein reibungsloses Deployment setzen wir Git ein.
Error-Tracking: Um Fehler und Bugs zu finden, werden für die Webseite und das Backend Sentry verwendet.
Android: Die Android App ist in Java geschrieben. Für Benachrichtungen wird Firebase verwendet.
Analytics: Die Zugriffe auf die Webseite werden mit Matamo (früher Piwik) geloggt, um Nutzer zu analysieren.

Wie soll es weitergehen?

In der Zukunft soll noch einiges an Eduard weiterentwickelt werden. Wir haben vor noch einige weitere Funktionen einzubauen. Erst einmal werden wir aber eine Umfrage machen, um zu bewerten, was den Schülern an der App gefällt und was sie noch stört. Zudem ist noch eine App für iOS in Planung. In geraumer Zeit habe ich auch vor die Webseite in VueJS oder ReactJS umzuschreiben, da der Code aktuell nicht wirklich schön ist und auch schwer zu pflegen ist. Auch Caching soll in der API eingebaut werden, damit die Zugriffszeiten verkürzt werden können. Aktuell ist gerade ein Alexa Skill für Eduard in Entwicklung, um Vertretungen und den Stundenplan abzurufen.

Ich konnte beim Bauen von Eduard viel neues über Frontend, Backend und Serververwaltung lernen. Außerdem habe ich gemerkt, wie viel Verantwortung man trägt, wenn man eine App mit hunderten Benutzer hat. Mal schauen, wohin sich Eduard in der nächsten Zeit entwickelt.

Newsletter

Abonniere meinen Newsletter, um einmal im Monat einen Newsletter zu erhalten. Du erfährst, welche neuen Artikel es auf meinem Blog gibt und welche Artikel ich in diesen Monat entdeckt habe.