Eine einfache, angenehme und intuitive Bedienung sind für die Nutzer*innen wohl die wichtigsten Aspekte bei einer modernen Webanwendung. Im neuen Juleica-Antragssystem kam diesen Punkten eine besondere Bedeutung zu. Über 130.000 aktive Nutzer*innen sollen sich schnell und mit wenig Schulungsaufwand auf dem neuen System zurechtfinden.
Ein ebenso wichtiger Faktor ist die schnelle Reaktionsgeschwindigkeit des Systems. Sachbearbeiter*innen, die täglich viele Juleica-Anträge prüfen und genehmigen, profitieren besonders von der rasanten Geschwindigkeit der Software.
Einen Juleica-Antrag zu öffnen, bewegt sich im rekordverdächtigen Bereich von 50-70ms. Eine Listenansicht, mit umfangreichen Statistiken, wird in weniger als 200ms geladen.
Aus diesen Gründen legen wir bei allen unseren Projekten sehr viel Wert auf das "Look & Feel" sowie auf die Geschwindigkeit der Webanwendung. Alle Webanwendungen setzen wir daher seit vielen Jahren nur noch als Single-Page-Applications um, die diese Rekordgeschwindigkeiten erst möglich machen.
“…bis jetzt bin ich mega begeistert vom neuen System. Habe auch schon viele sehr positive Rückmeldungen von meinen Verbänden bekommen…”
Mitarbeiterin aus einem Landesjugendring
Projektbeschreibung
Ein neuer Juleica Antrag startet mit der digitalen Beantragung durch die Jugendleiter*innen. Im Antragsprozess können, neben den persönlichen Daten und den Daten der Ausbildung, auch Qualifikationsdokumente hochgeladen und im Antrag hinterlegt werden.
Im Anschluss geht der Juleica Antrag durch eine zweistufige Prüfungsschleife. Zuerst werden die Antragsdaten durch die zuständigen Organisationen genehmigt und dann in einem zweiten Schritt durch die übergeordneten Jugendringe und Jugendämter.
Nachdem ein Antrag fertig geprüft und freigegeben ist, werden die Daten zu einer Druckerei übermittelt, die den Druck und den Versand der fertigen Karten übernimmt.
Sobald die Juleicas gedruckt und an die Jugendleiter*innen verschickt sind, generiert das Juleica-System automatisch PDF-Zertifikate. Diese Zertifikate, welche die Qualifikation bestätigen, können die Antragsteller*innen in ihrem persönlichen Benutzerkonto abrufen.
Ferner stellt das System eine digitale Version der Juleica bereit, die in den gängigen Wallet-Apps hinterlegt werden kann.
Der Deutsche Bundesjugendring übernimmt, neben der Koordination, auch die Abrechnung der Karten. Das neue Juleica-System erstellt und versendet automatisiert alle Rechnungen im PDF-Format an die zuständigen Träger und übermittelt die Daten an die angeschlossene Buchhaltung.
Juleica als digitaler Ausweis im Smartphone
Herausforderungen und Lösungen
Eine besondere Herausforderung bei diesem Projekt war es, die komplexen und vielfältigen Strukturen der Jugendarbeit in Deutschland softwaremäßig abzubilden.
Die über 47.000 Träger sind in riesigen, baumartigen Verbandsstruktur und zusätzlich geografisch, durch ihre örtlichen Sitze, verortet.
Je nach Bundesland gibt es noch Sonderregeln.
Die Zugriffssteuerung auf einzelne Juleica-Anträge hängt dabei von der Position des Trägers in der Verbandsstruktur und des örtlichen Sitzes des Trägers ab. Zusätzlich spielen auch die Eigenschaften der aktiven Nutzer*innen eine Rolle.
Trotz dieser außerordentlich komplexen, softwareseitigen Logiken und Prüfungen im Hintergrund, werden die Zugriffszeiten von 20ms (Einzelne Seite) bis 200ms (Listen) erreicht.
Im Abschnitt technischer Aufbau wird beschrieben, wie diese Themen gelöst wurden.
Die Zugriffssteuerung baut auf geografischen, strukturellen und nutzerspezifischen Merkmalen auf.
Technischer Aufbau
Der Kern des neuen Juleica Antragssystem besteht aus einer PHP Webanwendung, die mit dem Applikationsframework Laravel umgesetzt und betrieben wird. Laravel wird in diesem Projekt vollständig headless (API-driven Architecture), als reine Backend-API genutzt. Als Datenbanksystem kommt MariaDB zum Einsatz.
Der Laravel Kern bedient über eine zentrale API Schnittstelle zwei, voneinander unabhängige Frontend-Anwendungen, die verschiedene Bereiche des Juleica-Systems abbilden. Zum einen den Antragsbereich, in dem die Jugendleiter*innen ihre Juleica beantragen und zum anderen den Verwaltungsbereich, in dem die Mitarbeiterinnen und Mitarbeiter der Träger die Juleica-Anträge genehmigen.
Durch den API-driven Ansatz wird die Reaktionsgeschwindigkeit der Software außerordentlich schnell, da das Befüllen der Webseite mit Daten erst im Browser des Webseitenbesuchers abläuft. Man spricht hier von "Client-Site-Rendering".
Selbst das folgende Listing, mit aufklappbarem Trägerbaum (1.973 Träger), etlichen statistischen Daten (10.697 ausgewertete Karten) wird in unter 200ms geladen.
Typische Listenansicht im Juleica-System mit vielen ergänzenden Informationen und Daten.
Für die Technikinteressierten: Die Zugriffslogiken werden dabei mit "Laravel Scopes" und rekursive "Eloquent Relations" abgebildet.
Die beiden Frontend Anwendungen wurde beide als Single-Page-Applications mit dem Framework Nuxt.js, welches auf Vue.js aufbaut, umgesetzt. Da das Antragssystem nicht auf Suchmaschinen optimiert werden muss (SEO), arbeiten beide Systeme ohne Server-Site-Rendering, um noch mehr Performance zu erreichen.
Unter "Server-Site-Rendering" versteht man, dass der Server die Webseiten bereits vollständig aufgebaut zum Nutzer sendet. Das ist für Suchmaschinen notwendig und dadurch für Seiten wie etwa Onlineshops essenziell.
Mit dieser verteilten Architektur können mehrere tausend Nutzer gleichzeitig im System arbeiten. Um auch für die Zukunft optimal gerüstet zu sein, lässt sich das System bei noch mehr Nutzern leicht über mehrere Serversystem verteilen.
Beim Hosting setzen wir auf flexibel skalierbare Cloud-Server beim Hoster Hetzner.
Die E-Mails (im Schnitt über 2.000 Mails pro Tag) werden über einen spezialisierten E-Mail-Anbieter verschickt, um eine optimale Zustellbarkeit zu gewährleisten.
Beim Juleica-System ist ein unterbrechungsfreier Update-Prozess (Deployment) unabdingbar. Daher setzen wir auch bei diesem Projekt auf ein „Zero-Downtime-Deployment“, das wir mit Laravel Envoyer umsetzen. Selbst kleinste Updates können jederzeit und ohne Unterbrechung ausgerollt werden.
Infrastruktur des produktiven Juleica-Systems.
Technologien und Shortfacts:
- Umgesetzt als Single-Page-Application (SPA)
- API-driven Architecture
- Server: PHP, Laravel, nginx
- Client: Nuxt.js / Vue.js
- MariaDB Datenbank
- Zero-Downtime Deployment via Laravel Envoyer
- Versionierung über git
- Benachrichtigungen via E-Mail und SMS
- Bereitstellung der digitalen Juleicas als .pkpass Datei (Apple Wallet, Android Wallet Passes)
- Bidirektionale Anbindung Druckerei
- Anbindung Buchhaltungssystem
- Öffentliche API Schnittstelle
Bearbeiten eines Juleica-Antrags
Träger bearbeiten im Juleica-System
“…vielen Dank. Das ist ein echter Segen für uns, da ich das bisher immer "per Hand" erstellen musste und dann verschickt habe.
Alles ist alles so viel besser als vorher.
Vielen, vielen Dank!…”
Mitarbeiterin aus einem Landesjugendring
Eingesetzte Technologien
Hast du noch Fragen?
Hast du noch Interesse an weiteren Details oder können wir dich in Bezug auf dein Projekt beraten? Dann melde dich bei uns! Wir freuen uns, von dir zu hören!