Im Rahmen meines Angstellenverhältnisses bei der Glinicke Dienstleistungs GmbH in Kassel befinde ich mir in der Entwicklungsabteilung G-Lab, die sich nicht scheut auch experimentelle Lösungen zu entwickeln und an der gegebenen Marktsituation auszutesten. Im selben Zuge kamen wir gemeinsam im Team auf die Idee, dass wir im Zuge der Umstellung unserer Fahrzeugverwaltung keinen Dienstleister beauftragen. Wir einigten uns darauf, die Fahrzeugsuche selbst zu programmieren, um schneller und individueller auf den Markt zu reagieren. So entstand folgendes Projekt:
- URL: https://fahrzeugsuche.glinicke.de
- Ziel: Anbindung der Fahrzeugverwaltung an eine Fahrzeugsuche für den Endkunden
- Entwicklungszeitraum für Version 1.0.0 inkl. Live-Gang: Q4 2021
Eigene Backend Lösung
Die neue Schnittstelle der Fahrzeugverwaltung bot uns, was wir haben wollten: den Zugriff auf die Datenbasis aller der Fahrzeuge, die für den Endkunden zu finden sein sollten. Die Schnittstelle ist das Herz der neuen Fahrzeugverwaltung, macht sich aber nicht davon abhängig. Alle Daten werden nicht direkt durch einen Proxy von der Fahrzeugverwaltung abgerufen, sondern von uns zwischen gespeichert, modifiziert und in eine eigene Datenbank gecacht, sodass wir die Hoheit über die Daten haben. Das erlaubt uns auch, dass wir uns unabhängiger von jeglichen Dienstleistern machen, da die Schnittstelle zur Fahrzeugverwaltung ausgetauscht werden können. Zudem mussten wir sicherstellen, dass wir auch weitere Funktionalitäten im Backend darstellen können, umso die Fahrzeugsuche nach und nach immer weiter zu verbessern.
Genauer Techstack aus Sicherheitsgründen nicht genannt.
Eigene Server-Lösung
Aus Datenschutzgründen dürfen wir keine Cloud-Anbieter wie AWS, Google Cloud oder Heroku wählen und haben uns daher für einen selbst gehosteten Linux Server in Deutschland entschieden. Den Server haben wir ohne Serververwaltungs-Software wie Plesk oder ISPConfig eingerichtet, sodass alle Serverarbeiten über einen SSH Zugriff erledigt werden. Auf dem Server werden sowohl Backend als auch Frontend gehostet und über eine eigene CI/CD Pipeline mit Git und Webhooks bereitgestellt. Die Einrichtung ist dabei zwar etwas mühseliger und es benötigt eine dauerhafte Betreuung des Servers, ermöglicht uns aber alle Herausforderung einer Enterprise-Lösung zu meistern.
Das Frontend der Fahrzeugsuche
Visuell ist das Frontend natürlich das Herzstück des Projekts, da es die Schnittstelle zwischen Endkunden und Autohaus darstellt. Da wir in der G-Lab neuste Technologien in einer Enterprise-Umgebung ausprobieren, lag der Gedanke nahe, dass wir die Website im JAMStack entwickeln. Unser eigenes Backend dient dabei immer als Proxyserver für alle weiteren Microservices, die in Zukunft angebunden werden sollen und das Frontend war aufgrund unserer Expertise und dem Zeitdruck in ReactJS geplant. Das Thema SEO spielt bei uns Inhouse eine elementare Rolle und daher reichte uns eine dynamische JavaScript Applikation nicht uns haben uns daher für GatsbyJS entschieden. GatsbyJS ermöglicht uns in Zusammenarbeit mit der Datenbasis, die durch die Schnittstelle zur Verfügung steht, statische Seiten zu generieren, die Google sehr gerne hat. Aktuell werden beim ersten Seitenaufruf die Fahrzeuge noch per JavaScript nachgeladen, aber dank GatsbyJS Version 4, planen wir nun für das nächste Jahr, dass die Fahrzeuge auf dem Server vor gerendert werden. Das ermöglicht uns, dass beim ersten Seitenaufruf des Besuchers, die Fahrzeuge schon zu sehen sind. Zudem erhoffen wir uns auch ein Performance-Boost, da die API-Abfrage nicht über das WWW stattfindet, sondern auf dem Localhost.
Das Styling der Website haben wir mit Tailwind realisiert, da wir aus der Bootstrap-Welt kommen und die Einarbeitung in das Tailwind Framework einfach vonstattenging. Durch Aufsplittung der Applikation in einzelne Komponenten, stören die extrem langen Klassen-Definitionen auch nicht mehr.
Die größte Herausforderung ergab sich aber in der Datenverarbeitung. Alle Masken und Filtern wurden von Grund auf von uns entwickelt und eingebunden. Aufgrund der schieren Masse an Optionen und Fahrzeugen entstand am Ende ein riesiges Interface, welches jetzt Live zu sehen ist.
Das Interface wollten wir möglichst Kundenfreundlich gestalten, so wurden:
- Teilweise eigene Icons passend zu den schon vorhandenen Heroicons gestaltet.
- Modernen Toggle und Input-Felder verwendet, statt einfache Checkboxen.
- Ein modernes Multi-Step-Anfrageformular integriert.
- Eine Merkliste integriert.
- Redux implementiert um Suchparameter, Merklisten und Kundendaten zwischenzuspeichern.
- Eine Textsuche erstellt.
- Und vieles mehr
Planung und Zukunft
Mit dem Live-Gang am 06.12.2021 haben wir das Projekt in der ersten Version erfolgreich abgeschlossen. Auf uns kommt jetzt vor Weihnachten ein längeres Monitoring zu, sodass auch sichergestellt wird, dass alles funktioniert. Wir planen für das nächste Jahr, diverse Feature-Upgrades und Implementierung von weiteren Microservices. Die Fahrzeugsuche wird ein Kernstück unserer digitalen Kommunikation zum Kunden. So haben auch eine Milestones-Seite angelegt, auf der Du sehen kannst, welche Features mittlerweile eingerichtet worden sind.
