Relax Cottage Buchungsplattform für exklusive Feriensuiten

Die Buchungsplattform relax-cottage.com vermittelt exklusiv ausgestattete Feriensuiten und Ferienhäuser. Die Website präsentiert die Unterkünfte in ansprechender Form in vier Sprachen. Der Nutzer kann die Verfügbarkeit der Unterkunft im Wunschzeitraum direkt prüfen und eine Buchung über die Plattform ausführen.

Branchentypisch gibt es eine detaillierte Suchfunktion, die sowohl den gewünschten Buchungszeitraum, als auch Detail-Merkmale einer Unterkunft berücksichtigt. Gesehene Unterkünfte können in einer Merkliste für den nächsten Besuch persistent gespeichert und später wieder direkt aufgerufen werden.

Ein wichtiger Schwerpunkt der gesamten Entwicklung lag auf Geschwindigkeitsoptimierung. Das galt sowohl für das serverseitige Rendern der Inhaltseiten mit Listen und Detaildarstellung, als auch die clientseitige Interaktivität bei der Kalendernutzung und Suchfunktion. Die UX bleibt zu jedem Zeitpunkt responsive. Die API-Abfragen laufen alle asynchron und blockieren nicht die Interaktivität.

Die Plattform nutzt für die finale Buchungsabwicklung einen Drittanbieterdienst. Um aber auf der Relax Cottage Website selbst eine freie Darstellung im eigenen Design realisieren zu können, werden keine widgets des Buchungsdienstleisters eingesetzt.

Stattdessen wurde eine eigene serverseitge API implementiert, die alle remote-Anfragen an die API des Buchungsdienstleisters lokal maskiert. Das hat auch den Vorteil, dass keine Nutzerdaten ungewollt an Dritte abfließen. Alle Anfragen an die API des Dienstleisters erfolgen von Server zu Server und aus Sicht des Endnutzers absolut anonym.

Performante Remote-Abfragen mit eigener API

Dreh- und Angelpunkt der Anwendung ist die sichere Anzeige der Verfügbarkeit einer Unterkunft. Es ist aus Nutzersicht ziemlich frustrierend, wenn eine interessante Unterkunft zunächst im Wunschzeitraum buchbar erscheint, aber beim finalen Buchungsvorgang dann doch als belegt zurückgewiesen wird.

Um solche Kollisionen weitestgehend zu vermeiden, ist es an einigen Stellen unerlässlich, die API des Buchungsdienstleisters live bei jedem Aufbau eigener Inhaltsseiten remote abzufragen und den aktuellen Ist-Zustand der Verfügbarkeit absolut zeitnah in die lokale Seitenanzeige einzuflechten. Natürlich gibt es immer noch ein Zeitfenster von einigen Sekunden bis Minuten, in dem ein anderer Nutzer trotzdem parallel eine finale Buchung zur gleichen Unterkunft durchgeführt haben könnte, während der erste Besucher sich noch die Detailinfos anschaut. Aber die Wahrscheinlichkeit hierfür ist stark minimiert.

Eine abgekoppelte Synchronisation des Datenbestandes zwischen Drittanbieter und eigener Datenbank in festen Intervalen kam wegen dieser zeitkritischen Komponente nicht in Frage. Stattdessen wurde eine eigene serverseitige API implementiert, die geschwindigkeitsoptimiert genau nur die geforderten Abfragen an die Drittanbieter-API ausführt und die Ergebnisse nach eigenen Anforderungen für lokale AJAX calls aufbereitet. Das erhöht zudem die Sicherheit, da für die öffentlichen clients die finale API intransparent bleibt.

Dies betrifft sowohl die detaillierte Suchfunktion, als auch die Darstellung der Dreimonats-Kalenderübersicht in der Detaildarstellung einer Unterkunft. Final findet auch nochmals eine lokale Verfügbarkeitsprüfung innerhalb der Detailseite statt, von der aus bei Erfolg sofort eine Buchung ausgelöst werden kann.

Hierbei waren zwei Punkte unerlässlich. Zum einen darf die clientseitige Interaktivität der eigenen Benutzeroberfläche nicht durch sehr lange remote-Abfragen blockiert werden. Das wäre so ziemlich der sicherste Weg, den Besucher von der Website zu verscheuchen. Ein Klick auf ein Control muss die Aktion sofort asynchron ausführen und für die Dauer irgendeine Form von Status anzeigen.

Zum anderen darf das Laden der HTML-Stammdokumente auch nicht durch zu lange serverseitige Operationen blockiert werden. Deshalb wurde der Großteil der zeitkritischen Abfragen auf clientseitige asynchrone AJAX calls verlagert. Das Laden der Stammdokumente geht dadurch blitzschnell und lang laufende asynchrone Prozesse können mit einem Ladesymbol markiert werden.

Auch hier war Vue.js wieder das Mittel der Wahl, um die Steuerung und Visualisierung parallel ablaufender asynchroner Prozesse in einer responsiven UX sinnvoll datengetrieben abbilden zu können.

Filterung der Buchbarkeitszeiträume

Ein besonders kritischer Punkt war die Kalenderdarstellung der Verfügbarkeit in einem Dreimonatszeitraum. Da die API des Buchungsdienstleisters keine direkte Lückendarstellung zu einem Objekt vorsieht, müssen live aus den bereits geblockten Zeiträumen die Lücken errechnet werden. Auch dieser wegen der remote API-Abfrage relativ lang laufende Prozess wird asynchron ausgeführt und blockiert die Interkativität des Stammdokumentes nicht.

Mehrsprachigkeit in der gesamten Benutzeroberfläche

Das betrifft sowohl die Seiteninhalte selbst (Stammdaten der Unterkünfte und andere Texte), als auch sämtliche Controls und Meldungen der UX. Besonders herausfordernd war die Integration eines Drittanbieter Kalendermoduls. Dieses Modul musste nicht nur lokalisierbar sein (lokales Datumsschema), sondern auch bei der Darstellung und Selektion von Buchungszeiträumen bereits geblockte Zeiträume korrekt inaktivieren können. Zudem galt es für jede Unterkunft individuelle Buchungsschemata bezgl. zulässiger Wochentage für An- und Abfahrt bei der Kalenderdarstellung zu berücksichtigen.