Andreas Bruns

Softwareentwicklung für Oldenburg und Bremen

Web-Applikation für „Unicycle-Team goes Green“

Die FahrerInnen des Unicycle-Teams Harpstedt erfahren im Rahmen der Aktion „Unicycle-Team goes Green“ innerhalb von drei Wochen jeder für sich Strecken auf dem Einrad und übermitteln Bilder ihrer mitgeführten Fitness-Tracker. Alle Strecken einer Woche werden zu einer virtuellen Strecke von maximal 130 km addiert und auf einer Karte der Samtgemeinde Harpstedt mit ihren 39 Gemeindeteilen dargestellt. Für jeweils zehn erradelte Kilometer spendet ein Harpstedter-Unternehmen einen Obstbaum, sodass innerhalb von drei Wochen bis zu 39 Obstbäume gespendet werden.

Unicycle-Team Harpstedt (März 2021)

Damit sich die FahrerInnen, die Sponsoren, die Presse und alle Interessenten über die Aktion und den aktuellen Stand informieren können, durfte ich eine kleine Web-Applikation entwickeln und bereitstellen.

Unicycle-Team goes Green: Karte der zurückgelegten Strecke
Unicycle-Team goes Green: Karte der zurückgelegten Strecke

Folgende Anforderungen haben wir für unsere Web-Applikation identifiziert:

  • tagesaktuelle Darstellung der gefahrenen Kilometer auf einer Karte
  • Anzeigen von statischen Webseiten (Anleitung, Sponsoren, Galerie)
  • Erfassung von Formular-Daten und Hochladen von Track-Bildern
  • Admin-Oberfläche zur Auswertung der erfassten Daten
  • Unterstützung geringer Handy-Auflösungen durch responsives Weblayout
Unicycle-Team goes Green: Galerie (statische Seite)
Unicycle-Team goes Green: Galerie (statische Seite)

Die Integration der benötigten Funktionen in die vorhandene auf WordPress basierende Webseite kam nicht in Betracht. Dazu wäre der WordPress-Einarbeitungsaufwand zu hoch und die Vorlaufzeit von zwei Wochen zu gering gewesen.

Ohne ein umfangreiches serverseitiges Framework ist eine schnelle Umsetzung nicht denkbar. Da meine Kernkompetenzen im Bereich Java/Kotlin und JavaScript/TypeScript liegen, kamen folgende Technologien in meine engere Auswahl:

  • Spring Boot (Java oder Kotlin): bewährte Technik, aber hoher Ressourcenbedarf bei Containern (Docker, Kubernetes)
  • Quarkus (Java): der nächste Star, aber Einarbeitung für mich nötig
  • NodeJS-Anwendung (JavaScript oder TypeScript): wenig Ressourcenbedarf, kein fertiges All-In-One Framework
Unicycle-Team goes Green: Upload von Tracks
Unicycle-Team goes Green: Upload von Tracks

Ich habe mich für das TypeScript-Node-Starter von Microsoft entschieden, das einen lauffähigen NodeJS-Server bietet und einige für mich relevante Technologien bereits integriert hat:

  • minimaler NodeJS-Webserver dank Express
  • Anbindung einer Mongo-Datenbank mit mongoose
  • Integration der pug Webtemplate Engine
  • Verwendung des responsiven CSS-Frameworks Bootstrap
  • Build-Konfiguration erzeugt aus TypeScript ein deploybares JS-Artefakt

Zusätzlich musste ich noch einige Bibliotheken und Technologien ergänzen, um die benötigte Funktionalität bereitstellen zu können:

  • Anzeigen einer interaktiven Karte mit Strecke & Markern: Leaflet
  • Upload von Bild-Daten mit serverseitiger Verarbeitung: Multer
  • Lightbox zur Darstellung von Bildern: Magnific-Popup
  • Deployment als Container-Anwendung: Docker und Kubernetes
Unicycle-Team goes Green: Admin-Oberfläche
Unicycle-Team goes Green: Admin-Oberfläche

Die Umsetzung der Web-Applikation nach Feierabend klappte mit den genannten Technologien innerhalb von zwei Wochen. Von den FahrererInnen wurden regelmäßig Bilder mit den gefahrenen Tracks hochgeladen und insgesamt habe ich viel positive Resonanz erhalten.

Leider ist der verwendete Kubernetes-Cluster für einen Abend ausgefallen. Dem Kubernetes-Cluster habe ich zu wenig Ressourcen gegönnt und gleichzeitig mit zu vielen Deployments belastet.

Doch das Wichtigste: Die FahrerInnen haben sich trotz Corona viel bewegt und konnten die angestrebten 390 km gemeinsam auf Einrädern erfahren. Deshalb werden bald in der Samtgemeinde Harpstedt 39 gespendete Obstbäume gepflanzt 🙂 .

Kommentare sind geschlossen.