Vanilla JS → Next.js on Cloudflare Testseite „Liberogic Office Green“

Kennen Sie die Website „Office Green“ eigentlich schon...?

Alle Inhalte, die wir veröffentlichen, einschließlich unserer Unternehmenswebsite, sind im Grunde Testobjekte. (Ausgenommen ist die a11y-Anwendung von Herrn Futamata! Übrigens: Diese Website erfüllt noch nicht die WCAG-Anforderungen 😭)

Alles begann eigentlich vor fünf oder sechs Jahren, während der Corona-Zeit, als unser Geschäftsführer in seiner freien Zeit das Büro selbst begrünte. (https://yurulog.liberogic.jp/posts/qx9nibr59)

Die erste unbedachte Zumutung @2023

Anforderungen

• Ein Kunde wollte eine Affiliate-Website starten, also dachten wir, wir machen daraus gleich ein kleines Experiment! (Der Kunde hat das Vorhaben dann aufgegeben, daher blieb es bei einem reinen Experiment.)
• Wie wäre es, zu testen, ob wir die Amazon-Partnerprogramm-Qualifikation erhalten, wenn die im Modal geöffneten Seiten indexiert werden, ohne eigene Seiten zu haben? (Wir haben so viele Pflanzen für die Büro-Begrünung gekauft, da können wir sie doch gleich als Material verwenden!)
• Dass man 360°-Materialien herumdreht, ist mir bisher kaum begegnet. Es gibt Bibliotheken dafür und es klingt einfach – lass es uns ausprobieren!
• Die Einnahmen sind mir egal. Wenn es sich mit dem Experimentieren und Lernen verbinden lässt, veröffentlichen wir es einfach!
• Unsere Website dient unseren Kunden als Versuchsfeld. Verstehst du? (❓)

Das waren die Anforderungen, die mir kurz nach meinem Eintritt in die Firma übertragen wurden.

Die Implementierung begann im Februar 2023. Im Folgenden dokumentiere ich die Überarbeitungen und Inhaltsergänzungen bis heute!
Liberogic Office Green kommt endlich ans Licht! ☀️

Technologie-Stack

• Vanilla JS (ES Modules) – kein Framework, eigene Modulaufteilung über import/export
• Pannellum - 360-Grad-Panorama-Viewer-Bibliothek (lokal als Ordner pannellum/ eingebunden, selbst gehostet statt über ein CDN)
• HTML / Sass - Auszeichnung und Styling

Externe APIs und Dienste

Das Herzstück dieser Website ist ein Inhalt mit einer 360°-Drehansicht. Das Büro wird mit der Kamera „THETA SC2“ von RICOH aufgenommen.

Das ursprüngliche Foto hier:

Für die 360°-Darstellung wird die Bibliothek Pannellum verwendet. Durch einfaches Festlegen des aufgenommenen Bildes lässt sich der Inhalt vollständig um 360° betrachten.

Um vielfältige Anpassungen vornehmen zu können, wurde die Bibliothek selbst anstelle eines CDN heruntergeladen.

Anpassung

Auf den vorgestellten Produkten ist ein „i“-Symbol platziert. Beim Überfahren mit der Maus erscheint der Produktname in einer Sprechblase.

Ein Klick öffnet ein Modal mit der Produktvorstellung, das mit einem Amazon-Affiliate-Link verknüpft ist. Im Grundriss des Büros rechts unten wird ein Stern angezeigt, der den Standort markiert.

Die Produktvorstellungen sind ungeschönt und mit der ehrlichen Bewertung unseres Geschäftsführers versehen!!

Außerdem kann man mit dem Schalter oben links zwischen Ansichten mit und ohne Raumbeleuchtung wechseln, und ein Klick auf den Pfeil bringt einen direkt zum Schreibtisch des Geschäftsführers!

Die Produktdaten werden bewusst nicht in einem CMS, sondern in einer Tabellenkalkulation verwaltet, damit sie sich leichter bearbeiten und aktualisieren lassen.

Der Grund dafür ist:

„Der Betrieb sollte für Kunden möglichst unkompliziert sein, oder? Verbinde es einfach über die Tabelle!“

Die Daten aus der Tabelle werden per fetch geladen und in das Modal eingefügt … Und als es dann funktionierte, war es so:

„Diese Seite ist ja echt langsam~“

…………

Für die API wurde als Vorlage die Quelle Custom Hotspot verwendet. Die Referenz sieht ursprünglich nur vor, Markierungen an beliebigen Stellen zu setzen, die beim Überfahren mit der Maus einen Text anzeigen. Wir haben jedoch eigene Elemente hinzugefügt, etwa Modals und die Umschaltung von Ansichten.

Und jetzt ist es tatsächlich fertig 🎊
Als es fertig war, habe ich mich so gefreut, dass ich die Seite ständig durchgeklickt habe!

Amazon-Partnerprogramm

Der bekannte Affiliate-Service für Amazon-Produkte.

Die Schritte im Überblick:

• Die Website hat aktuelle Inhalte (in der Regel innerhalb der letzten 60 Tage aktualisiert) und wirkt gepflegt.
• Mindestens 10 Artikel bzw. Inhalte sind vorhanden.
• Sobald Produktlinks eingebunden werden können, ist auf der Datenschutzseite ein Hinweis zum Amazon-Partnerprogramm zu veröffentlichen.
• Innerhalb von 180 Tagen nach der Anmeldung sind 3 Verkäufe erforderlich (Konten von Familienmitgliedern oder mehrfache Konten sind nicht zulässig).
• Die eingegebene URL ist korrekt und die Website ist aufrufbar.

usw.

Sobald innerhalb von 180 Tagen 3 Verkäufe erzielt wurden, beginnt die Prüfung. Nach erfolgreicher Prüfung erhalten Sie als Partner Provisionen.

Eine Offenlegung der Prüfkriterien erfolgt nicht, daher bekommt man auf Nachfragen keine Antwort. Im Vergleich zu anderen Affiliate-Programmen scheint die Prüfung recht streng zu sein!

Und auch das Amazon Associates Programm haben wir erfolgreich bestanden 🎉
Damit ist eine Shopping-Affiliate-Website entstanden, deren Umsatz hauptsächlich von den Einkäufen meiner Mutter und des Chefs stammt 💥

* Käufe von Familienmitgliedern sind eigentlich nicht gern gesehen ... Sollte das zur Sperrung unseres Amazon-Associates-Kontos führen, entschuldige ich mich schon mal m(_ _;)m

Der Umsatz läuft momentan im Schneckentempo, aber wenn man sich die Zusammenfassung und die Conversion-Rate ansieht, ist das schon ziemlich spannend!

Der nächste Auftrag@2024

Nachdem ich eine Weile nichts gemacht habe, ist eine Lücke in meinem Auftragsplan entstanden. Und dann kam der nächste Auftrag ...

Anforderungen

• Ist die Indexierung der Seiten nicht etwas lasch?
• Wir sollten auch Büroflächen hinzufügen.
• Wie wäre es, dabei gleich auf Next.js umzustellen?

Wieder einmal eine unmögliche Aufgabe.

Technologie-Stack

Die JS- und CSS-Dateien von Pannellum habe ich im public-Ordner abgelegt und verwende sie so. Ist der Import per npm inzwischen der Standard?
Kürzlich ist anscheinend eine Bibliothek für Next.js erschienen. Die hätte mir bei der Implementierung viel Arbeit erspart..

Außerdem habe ich auf Web-Accessibility geachtet und die Bedienung per Tastatur ermöglicht.

Damit das Modal von Google per SEO indexiert wird, habe ich den Parameter /item/{num} ergänzt und es mit Parallel Routes in Next.js umgesetzt, sodass es als eigene Seite gezählt wird.

Hilft die Umstellung von CSR auf ISR auch der SEO-Optimierung?

Der Auftrag geht weiter

Anforderungen

• Sorry, die Sicherheitsabteilung hat sich beschwert, also bitte den Büroplatz wieder entfernen! (Erledigt: Obwohl ich ihn gerade erst hinzugefügt habe, habe ich ihn mit dem 🈲-Zeichen markiert.)
• Irgendwie ist es viel zu schwer.... Ist das Rendering fehlerhaft? (Teilweise erledigt)
• Wo wir schon ein LLM haben, sollten wir doch etwas automatisieren? Wir könnten auch ein völlig neues Konzept einbringen! (Aktueller Stand: Was ist damit gemeint?)
• Wir könnten doch Produkte hinzufügen...

Nach und nach kamen Versionsupdates dazu, und so ist die experimentelle Affiliate-Seite Liberogic office green entstanden!

Besonders gefällt mir die Konfetti-Animation auf dem Startbildschirm, die an einen kleinen Laden erinnert, sowie das Modal mit der Präsidentenillustration! Kleine Verbesserungen wie diese füge ich in freien Momenten einfach hinzu, nach dem Motto: "Das wäre doch witzig!" Ich vermute, die Seite wird sich auch künftig weiterentwickeln!

Fazit?

Als wir die Seite ursprünglich mit Vanilla JS aufgebaut haben, haben wir vieles selbst umgesetzt. Mit der Zeit und den vielen Überarbeitungen wurden die verschachtelten Funktionen jedoch zunehmend komplex. Beim Neubau mit Next.js hätte uns der heutige Stand der KI-Entwicklung sicher das Leben erleichtert. Dafür haben wir aber umso mehr Wissen aufgebaut, und ich frage mich, ob wir dadurch heute "KI bewusst und mit Verständnis nutzen" können.

Ich persönlich finde die Seite toll, aber was meint ihr dazu??

Schaut euch gerne ein wenig um und besichtigt das virtuelle Büro!