Progressive Web App Onlineshop

Über ROECKL

Die Firma ROECKL ist ein familiengeführtes Traditionsunternehmen, mit Fokus auf der handwerklichen Verarbeitung von Leder. Zur Produktpalette gehören Handschuhe, Taschen, sowie Accessoires und Kopfbedeckungen. Bisher war der Vertrieb stark auf den stationären Handel ausgerichtet. ROECKL betreibt eigene Läden, beliefert große Warenhäuser und Einzelhändler. Der bestehende Online Shop war durch seine technischen Limitierungen nicht in der Lage, den neuen Ansprüchen an Marketing und Vertrieb gerecht zu werden.

https://www.roeckl.com

Aufgabenstellung

• Ablösung des bestehenden Online-Shops durch eine neue performante Lösung mit Integration von Marketinginstrumenten
• Umsetzung eines vorgegebenen Designs für alle gängigen Bildschirmgrößen (responsive)
• Anbindung des bestehenden ERP- und PIM- (Product Information Management) Systems

Realisierung

Frontend

Als einer der ersten Onlineshops der Welt erfolgte die Umsetzung des Shop-Frontends als Progressive Web App (PWA) auf Basis von Magentos PWA-Studio. Unter Einsatz moderner Web-Technologien wie ReactJS, Webpack und GraphQL wurde eine komplett eigenständige und vom Backend unabhängige Frontend-Applikation entwickelt.

PWA-Features

Das PWA-Frontend ist als Single-Page Applikation auf Basis von ReactJS umgesetzt. Durch PWA-Features wie den Einsatz eines Javascript Service-Workers ist ein intelligentes Caching der Ressourcen der Applikation selbst sowie der Shop-Inhalte direkt im Browser möglich, wodurch unnötige Ladezeiten verringert und ein Offline-Modus ermöglicht werden. Die Serverauslastung sinkt erheblich, da bereits angefragte Inhalte nicht nochmals abgefragt werden. Die PWA-Umsetzung ermöglicht außerdem eine "Installation" des Shops direkt auf dem Endgerät des Users, sofern dieser das wünscht. Dadurch verhält sich der Shop besonders auf mobilen Geräten wie eine native App, die auf dem Startbildschirm abgelegt und direkt von dort gestartet werden kann. Des Weiteren sind Funktionalitäten wie z.B. Push-Benachrichtigungen möglich (für Roeckl bisher noch nicht umgesetzt), die das Re-Engagement des Users fördern.

Infrastruktur

Durch die Trennung von Frontend- und Backend-Applikation und dem API-First Ansatz, kann gleichzeitig sehr effizient und ohne gegenseitige Beeinflussung an beiden Applikationen gearbeitet werden. Dadurch wird es möglich, dass spezialisierte Entwickler für den jeweiligen Bereich unabhängig voneinander einzelne Features umsetzen können, ohne Spezialwissen aus dem jeweils anderen Bereich zu benötigen. Für das Frontend dient ein NodeJS-Server als Gateway zum Magento Backend. Durch diese Infrastruktur kennt das PWA-Frontend nur einen Endpoint, andere Ressourcen, beispielsweise ein Newsletter-Dienst, werden ebenfalls über den UPWARD-Server angefragt.

Die Kommunikation mit dem Shop-Backend von Magento 2 erfolgt über eine GraphQL- und REST-Schnittstelle. Letztere wird mit fortschreitendem Projektverlauf ebenfalls durch GraphQL abgelöst. Die REST-Schnittstelle wurde ausschließlich verwendet, um zum Zeitpunkt der Umsetzung fehlende GraphQL-Endpunkte zu kompensieren. Die GraphQL-Technologie ermöglicht es, komplexe Datenstrukturen mit nur einer Anfrage an das Shop-Backend zu erhalten, wodurch die Anzahl der Anfragen an den Server im Vergleich zu einer REST-Schnittstelle drastisch reduziert werden kann. Dadurch kann das Shop-Frontend vom Browser des Users viel schneller aufgebaut werden und der Server wird deutlich weniger belastet.

Magento Pagebuilder-Integration als Marketinginstrument

Für das Online-Marketing ist es wichtig, saisonale Inhalte sowie Unternehmens- und Markenphilosophie eigenständig integrieren und anpassen zu können. Zudem müssen mit diesen Inhalten Produkte beworben werden können. Magento macht mit dem Pagebuilder genau die Verwaltung solcher Inhalte möglich, allerdings war zum Zeitpunkt der Umsetzung eine Integration dieser Inhalte in ein PWA-Frontend technisch noch nicht vorgesehen. Deshalb musste die GraphQL-Schnittstelle entsprechend erweitert werden, sodass die Pagebuilder-Inhalte im Shop-Frontend angezeigt werden können.

Continuous-Integration Pipeline

Die Trennung von Front- und Backend mit der dazugehörigen technologischen Veränderung benötigte auch eine Anpassung der bisherigen Integrationsstrecke von Shop-Updates in den Produktivbetrieb. Durch eine Continuous-Integration Pipeline gibt es für jede Weiterentwicklung der Frontend-Applikation eine dedizierte Domain, unter der der Shop zusammen mit den vorgenommenen Änderungen sowohl für die Entwickler als auch Roeckl aufrufbar ist. Dort können diese Änderungen ohne Einflüsse anderer Features getestet und abgenommen werden, was die Softwarequalität erhöht und schnellere Entwicklungszyklen ermöglicht. Zusätzlich wird die Software-Qualität durch automatisierte Tests sichergestellt, die ebenfalls ein Teil der CI-Pipeline sind und nach jeder Veränderung durch einen Entwickler automatisch testen, ob bestehende Funktionalitäten noch so funktionieren wie zuvor. Im weiteren Verlauf können abgenommene Änderungen ohne manuellen Aufwand in einer Entwicklungsinstanz zusammengeführt und auf einem Staging-System und schließlich im Live-System ausgerollt werden.

Backend

Mit Magento 2 Commerce basiert unsere Entwicklung auf der aktuellen Veröffentlichung des bekannten Shopsystems. Es stellt Features, wie kundengruppenspezifische Kataloge und Preise sowie CMS Verwaltung bereit, die in den Basisanforderungen an das Projekt gestellt wurden.

Da Frontend und Backend getrennt wurden, ist die Bereitstellung der Daten nur noch über Schnittstellen zum Backend möglich. Zum Zeitpunkt des Projektes waren einige Endpunkte in den Schnittstellen noch unvollständig, bzw. fehlten komplett. So mussten u.a. die CMS Anbindung (Pagebuilder), Produktfilterung, Kundenverwaltung und Payment-Integration entweder vollständig implementiert oder stark angepasst werden.

Eine der Hauptaufgaben war es, Produktinformationen aus einem externen PIM System (Perfion) zu extrahieren und in Magento zu importieren. Dafür wurde einen Prozesstrecke (ETL) entwickelt, welche die Daten in einem Zwischensystem aggregiert, anhand eines definierten Schemas validiert und anschließend für den Import in Magento aufbereitet und passend transformiert. Dadurch wird sichergestellt, dass ausschließlich vollständige Produktdaten in den Katalog aufgenommen werden und Fehler im Shop und Bestellprozess minimiert werden.

Um die Bestellungen aus dem Magento System an ein angeschlossenes ERP (Navision) zu übertragen, werden die Daten zunächst passend zur Schnittstellenspezifikation transformiert und in einer Queue gespeichert. Ein weiterer asynchroner Prozess überträgt dann die einzelnen Bestellungen von dort aus über die Schnittstelle an das ERP-System. Durch den Einsatz einer Queue wird sichergestellt, dass eine Übertragung der Bestellungen sichergestellt ist, selbst wenn die Schnittstelle einmal kurzfristig nicht erreichbar ist. Gleichzeitig wird dadurch das Magento Backend entlastet, da es nur einmal die Transformation der Bestellung durchführen muss und nicht die Aufgabe hat sicherzustellen, dass die Informationen auch vollständig übertragen wurden. Die technologischen Verantwortlichkeiten werden also getrennt und Komplexität in der Applikations-Logik auf Kosten einer leicht komplexeren Infrastruktur erheblich reduziert. Das führt zu einer deutlich besseren Wartbarkeit und einer Reduzierung der Fehleranfälligkeit.