Viele Jahre habe ich bei der Webentwicklung primär auf PHP und jQuery gesetzt, aber 2017 war es definitiv Zeit für neue Projekte auf modernere Frameworks zu setzen. Um der Einarbeitung in die neuen Frameworks auch einen praktischen Sinn zu geben, nutzte ich die Bundeskonferenz 2017 der KSJ als Anlass und programmierte hierfür eine Zimmerverwaltung. (…und eine Veranstaltungs-Website mit WordPress)
Der Server – Django REST Framework
Ich entdeckte das Django-REST-Framework für mich, welches mit sehr wenig Code eine REST-API erzeugen kann, hierbei die Datenbankanbindung komplett wegabstrahiert und auch die SQL-Skripte für Änderungen zwischen den Models („Migrationsskripte“) automatisch erzeugt. Wenn man es braucht kann man aber auch sehr viel detaillierter programmieren und eigene Erweiterungen schreiben. Nach Durcharbeitung der Tutorials ließ sich innerhalb von gerade einmal 2 Stunden ein erster vollständiger lauffähiger Prototyp für die Web-API meines neuen Projekts erstellen.
Der Client – Angular 5 / Bootstrap
Auf Clientseite bietet sich als wesentliche Verbesserung zu jQuery inzwischen die Möglichkeit nicht mehr jede Interaktion eines Benutzers einzeln programmieren zu müssen. Das geht durch sogenanntes Data Binding. Man fragt von einem Formularfeld also nicht mehr ab „wie ist dein Wert?“ sondern bindet eine Variable an ein Feld. Ändert der Benutzer den Wert des Feldes, so wird dies automatisch auch in der Variable und damit an allen anderen Stellen wo sich die Variable findet getan. Die Folge: nie wieder eigene onClick-/onChange-/sonstwas-Listener! Diese Funktionalität bieten unter anderem die bekannten Frameworks React und Angular. Die Wahl ist letztlich wohl Geschmackssache und laut mehrerer Blogs gibt es in der Vorgehensweise keine wesentlichen Unterschiede. Ich entschied mich für die Nutzung von Angular. Um auch mit CSS möglichst keinen Aufwand zu haben nutzte ich Twitters Bootstrap für die Umsetzung eines einheitlichen Designs, hauptsächlich weil mir dieses einfach optisch sehr gut gefällt und auch mobilfähig ist.
Das Projekt
Ich gehörte mit zum Organisationsteam der KSJ Bundeskonferenz 2017. Hier galt es 140 Teilnehmer in einem sehr eng gesteckten Zeitrahmen möglichst schnell einzuchecken, um einen schnellen Konferenzbeginn zu garantieren. Zudem mussten Listen über Stimmberechtigte und nicht Stimmberechtigte Delegierte und Namenslisten mit den Stimmkärtchen-Nummern der Delegierten für die Moderation erstellt werden.
Beim Check-In mussten die Leute also:
- in ein Zimmer eingeteilt werden
- ihr Stimmrecht festgestellt werden
- ihnen ein eigenes Stimmkärtchen mit eindeutiger Nummer zugewiesen werden
- weitere nicht IT-relevante Dinge geklärt werden
Mein Programm sollte die entsprechenden Listen und Zuteilungen schnell ermöglichen. Wir sammelten die Teilnehmerdaten zuvor mittels einer eigenen Veranstaltungs-Website mit Buchungsformular. Von dort exportierte ich die Daten und importierte sie in Django. Nun musste noch eine Zimmerliste des Veranstaltungsortes angelegt werden. Technisch stellte die Serverseite sicher, dass bspw. keine Überbelegung von Zimmern stattfand und die Clientseite stellte freie und belegte Zimmer optisch unterschiedlich dar um schnell freie Plätze finden zu können.
Einmal eingecheckt ließen sich einfach die benötigten Listen erzeugen und per PDF exportieren und drucken.
Leider habe ich es zeitlich nicht mehr hinbekommen, eine sichere und praxistaugliche Authentifizierung zu implementieren, weswegen ich die Anwendung mittels Batch-Script lokal auf meinem Laptop hostete und an weiteren Geräten intern aufrief. Dennoch war ich mit dem Ergebnis insgesamt sehr zufrieden, da ich verglichen mit der vorigen Arbeitsweise mit PHP/jQuery enorm viel Zeit einsparen konnte. Django und Angular werden sich nun auch in meinen zukünftigen Projekten wiederfinden.
Anbei noch ein paar Screenshots der Anwendung:
