Adobe Digital Foundation Blueprint

Adobe Digital Foundation Blueprint als Fundament einer skalierbaren Webseite in Verbindung mit Adobe Commerce

Der Adobe Digital Foundation Blueprint ist eine Projekt-Blaupause mit einer Reihe an Open-Source-Tools, Best Practices-Dokumentation und Automatisierung.

Das Ziel von Adobe - und uns als verifizierten Partner - ist es, Anwendern innerhalb kurzer Zeit eine AEM-Sites Umgebung mit Personalisierungs- und Analyse-Möglichkeiten zu bieten. Hierzu gibt es mehrere Bausteine, welche die IT- und Marketing-Abteilungen plattformübergreifend zusammenwachsen lassen.

Technologie als Schlüssel zum Konzept

Adobe bietet mit dem Digital Foundation Blueprint das passende Werkzeug für einen erfolgreichen Projektplan und unterstützt einzelne Phasen eines Projekts.

Adobes Content-Management-System (CMS) verbindet einzelne Komponenten, sodass sie plattformübergreifend miteinander kommunizieren und Daten einheitlich verarbeitet werden können. Man hat die Möglichkeit, AEM als standalone oder Cloud-Service zu verwenden. Hier bietet Adobe die richtigen Tools, um zeiteffizient eine ready for go-live Seite zu erstellen.

Der Archetype ist ein Maven Befehl, um ein AEM Projekt mit definierten Parametern aufzusetzen und zu konfigurieren. Dies dient als Vorlage, um bereits vorgefertige Konfigurationen für den eigenen Anwendungsfall zu haben und so Entwickler-Ressourcen zu sparen.

Beispiel eine Archetypes:

Durch den Archetype kann die AEM Umgebung um weitere Funktionen ergänzt werden und bietet viele Vorteile. Die Reduzierung des Programmiercodes, sodass das nur benötigte Funktionen geladen werden, steigert die Performance und bildet eine saubere Projektstruktur. Darüber hinaus lassen sich mit Editable Templates, auch ohne Entwicklerkenntnisse, Templates erstellen oder bereits Vorgefertigte anpassen. Der Aufsetzungsprozess eines Projekts lässt sich durch die vorgefertigten Konfigurationen optimieren, indem man zum Beispiel Commerce, Forms oder DynamicMedia inkludiert.

Weitere Features sind die Erstkonfiguration einer Cloud-Ready Instanz, die Vorbereitung für eine Multi-Language-Site und einer WebApp-Ready Umgebung mit z.B. React oder Angular. Für die Verbesserung der Website-Geschwindigkeit und -Sicherheit kann der Archetype eine Dispatcher-Konfiguration mitliefern.

Eine komplette Liste der verschiedenen Parameter befindet sich unter folgendem Link: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetype/overview.html


Der aktuellste Archetype benötigt Java SE 8 oder 9 und zusätzlich dazu die Maven Version 3.3.9 oder neuer.
Das SDK für die Cloud Umgebung kann unter folgendem Link heruntergeladen werden: https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/local-development-environment-set-up/overview.html


Core Components bilden den Kern des Projekts. Diese bereits integrierten Komponenten ermöglichen es, mit geringem Zeitaufwand erste Inhalte auf einer Webseite zu erstellen. Erste Standardfunktionen und Konfigurationen werden so bereits bereitgestellt.

Die vorhanden Komponenten leiten sich von den bereits integrierten Core Komponenten ab, weshalb diese vollkommen indiviualisierbar sind. Die Komponenten Struktur lässt sich so an die Bedürfnisse anpassen. Bei Bedarf kann man so im Code der Komponente einzelne Elemente hinzufügen oder überschreiben.

Back-End und Front-End Entwicklung sind in der Projektstruktur getrennt und ermöglichen eine effiziente und saubere Erstellung von Komponenten oder eine Anpassung bereits vorhandener Komponenten. So können auch Back-End und Front-End Entwicklung parallel stattfinden.

Bei den Front-End Workflows kann man zwischen zwei verschiedenen Build Varianten auswählen und die für das jeweilige Projekt passende verwenden:

• Webpack (https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetype/uifrontend.html?lang=en#webpack-dev-server): Es werden die benötigten CSS und JavaScript Dateien in den entsprechenden Ordner gelegt bzw. angepasst und der Webpack Build wird durch einen npm run Befehl gestartet .
• Storybook (https://storybook.js.org/): Hier ist jedoch zu beachten, dass dies nicht bereits in AEM integriert ist und manuell installiert werden muss.

• Grundsätzlich kann man auch auf bereits vorhandene Templates zurückgreifen, die bereits eine Auswahl an Seitentemplates, editierbaren Content und Dummy Bilder enthalten. Die bereits angelegten Seiten und Komponenten sparen Zeit und man hat schon nach kurzer Zeit eine Webseite, mit der man live gehen kann. Als Redakteur muss man nur noch die Texte und Bilder anpassen. MIt den vorgefertigten Komponenten und Templates lassen sich schnell und unkompliziert weitere Seiten anlegen.

Ein gutes Beispiel hierfür ist das von Adobe bereitgestellte WKND-Tutorial (https://wknd.site/us/en.html), welches man unter folgendem Github Link (https://github.com/adobe/aem-guides-wknd/releases/tag/aem-guides-wknd-1.0.0) auschecken kann.

Das Commerce Integration Framework (CIF) als Schnittstelle zu AEM und Adobe Commerce

Adobe Experience Manager und Adobe Commerce (Magento) werden mithilfe des Commerce Integration Frameworks (CIF) nahtlos integriert. Das CIF ermöglicht AEM, die durch die GraphQL Schnittstelle bereitgestellten Daten direkt zu verarbeiten und die Kommunikation zwischen AEM und der Commerce-Instanz herzustellen.

Die Trennung vom Commerce und CMS System bietet unterschiedliche Arten der Integration. So hat man die Möglichkeit, Adobe Commerce als standalone, sprich eigene Instanz, oder headless in eine bereits vorhandene Umgebung zu integrieren.

Bei einer headless Integration in eine AEM Instanz wird GraphQL als Schnittstelle genutzt. Hier erhält man nach einem Request ein JSON Response von den in Magento gepflegten Produkten.

Request:

Response:

Die Daten werden in der Commerce Kategorie der AEM Umgebung angezeigt und angelegt, sodass diese einfach beim Bearbeiten einer Seite in der Komponenten-Konfiguration eingesetzt werden können.
Die bereits vorhanden CIF Komponenten sind auf REACT aufgebaut und lassen sich bei Bedarf schnell anpassen.

Durch den in AEM konfigurierten Magento Endpunkt lassen sich die in Magento gepflegten Produkte automatisiert in AEM synchronisieren und beliebig verwalten und anpassen. Ebenfalls besteht die Möglichkeit, auf das komplette Repertoire von Magento zurückzugreifen.

Bei der lokalen Entwicklungsumgebung ist es deshalb wichtig, dass man einen commerceEndpoint vor dem Start von AEM definiert. Diesen kann man durch folgenden Terminal-Befehl in seiner AEM Projektstruktur setzen.

Die REACT Komponenten können einfach überschrieben, angepasst und gestylt werden. Man findet die SCSS Dateien unter dem Pfad:

Nun hat man die Möglichkeit, die Commerce Komponenten individuell zu gestalten.
Nachdem Änderungen gemacht wurden, sollte man einen npm run Build Befehl laufen lassen, sodass die CSS-Datei neu generiert und minimiert wird.

Diese findet man unter folgendem Pfad:

Das Fundament steht – was nun?

Nachdem das Fundament an die Bedürfnisse des Projektes angepasst wurde und man eine laufende Seite hat, stellt sich nun die Frage, wie es weitergeht.

Auch hier bietet Adobe einen Leitfaden für weitere Prozesse an und empfiehlt, dass man sich nun um die Optimierung der Seite kümmert. Die hauseigenen Dienste Adobe Analytics und Adobe Target lassen sich nahtlos integrieren und bieten den Vorteil, dass sich alle Daten in einer Umgebung befinden.

Durch Adobe Analytics kann man genau nachverfolgen, woher Besucher kommen und wie sie sich auf der Webseite verhalten. Dadurch lassen sich detaillierte Analysen erstellen und darurch die User Experience optimieren.

Adobe Target bietet die Möglichkeit, mithilfe der Analytics-Daten Zielgruppen zu definieren und personalisierte Angebote oder Werbung zu schalten. Somit kann der Besucher für sich relevante Informationen schneller einsehen, was zu einem positiveren Nutzungsverhalten führt.

Zusammengefasst

Das Motto "quick time-to-value“ trifft, dank Archetype und der damit verbundenen laufenden AEM Umgebung, den vorgefertigten Komponenten und den Templates, voll zu. Die Ressourcen können so fokussiert auf die weitere Entwicklung gesetzt werden. Die unterschiedlichen Möglichkeiten, Instanzen zu verknüpfen, bieten Flexibilität für jeden Use Case.

Adobe Commerce (Magento) kann beispielsweise als eigenständiger Server betrieben werden. Die headless Integration der Commerce Umgebung lässt sich durch die bereitgestellte GraphQl Schnittstelle und der CIF Komponenten einfach bewerkstelligen.

Somit können die Produkte mit Preisen, Bildern und Beschreibungen in Magento gepflegt werden und anschließend in der ebenfalls eigenständigen AEM Umgebung genutzt werden.