Blog

Achtung, nicht KI-generierter Inhalt folgt!

In diesem Artikel möchte ich euch zeigen, wie KI-gestützte Programmierung für den Adobe Experience Manager den Entwicklungsprozess enorm beschleunigen kann. Der von Adobe empfohlene Standard Tech-Stack für die Entwicklung neuer Websites ist Edge Delivery Services, kurz EDS. Das AEM EDS Framework ist eine extrem schlanke und performante Frontend-Technologie, die auf einen perfekten Lighthouse Score abziehlt.

Boilerplate Setup

Auf aem.live findet ihr das Developer Tutorial, das uns als Grundlage für dieses Tutorial dienen soll. Alle Bausteine die wir hier nutzen sind öffentlich verfügbar und kostenlos! Zunächst erstellen wir ein neues Github Repo auf Basis des Boilerplate Codes.

Hier klicken wir auf „Use this template“ und legen ein neues Repository an. Wir geben dem Repo einen Namen und lassen die Sichtbarkeit auf public/öffentlich. Im letzten Schritt müssen wir noch die AEM Code Sync Github App installieren. Hier wählen wir einfach das neue Repository aus und fügen es zur Liste der Repos hinzu, auf die die App Zugriff hat. Das wars auch schon! Anschließend werden wir automatisch zu einer Bestätigungsseite weitergeleitet auf der wir 3 wichtige Links finden:

• Der Link zur Autorenumgebung um den Inhalt der neu erstellten Website zu bearbeiten
• Einen Link für die Vorschau
• Einen Link für die Live/Produktionsumgebung

Die Links folgen dieser Struktur:

https://<branch>--<repo>--<owner>.aem.page/

wobei .page am Ende für die Preview URL steht und .live für die Production URL.

Als nächstes solltet ihr euch noch die Sidekick Browser Extension installieren. Mit ihrer Hilfe kann man schnell und einfach zwischen der Bearbeitungsansicht, der Vorschau- und der Liveumgebung hin und her springern.

Das Ergebnis sollte so aussehen:

Die Autorenumgebung sieht folgendermaßen aus und folgt einem dokumentenbasierten Ansatz, das heißt, die Bearbeitung der Seite sieht ähnlich aus, wie die Bearbeitung eines Word Dokuments oder eines Google Sheets. Das soll die Einstiegshürde für neue Nutzer niedrig halten.

Starten wir die Entwicklung

Zunächst empfiehlt es sich das AEM CLI zu installieren:

npm install -g @adobe/aem-cli

Das AEM CLI hat diverse Entwicklertools wie bspw. einen Entwicklungsserver im Gepäck mit dem wir die Anwendung lokal laufen lassen können.

Nun klonen wir das Repository:

git clone https://github.com/<owner>/<repo> 

wir wechseln in das neu erstellte Verzeichnis und starten AEM:

cd <repo>
aem up

Danach können wir uns die Seite im Browser unter http://localhost:3000/ ansehen.

Ich verwende Visual Studio Code als Entwicklungsumgebung und habe dort die Claude Code Erweiterung installiert. Damit Claude die Projektstruktur versteht, führen wir als erstes eine Initialisierung durch. Dafür gibt es den Slash Command /init . Claude Code erkennt sofort, dass im Verzeichnis extra eine Datei für ihn hinterlegt wurde: CLAUDE.md verweist auf die Datei AGENTS.md.

Die Datei AGENTS.md enthält Instruktionen für AI-Coding Tools bzw. KI-Agenten. Die Datei wurde im Markdown Format geschrieben und enthält zahlreiche Informationen zur Projektstruktur, Kerntechnologien, Links zur Dokumentation, Setup Commands, Code Style Guidelines, Kernkonzepte, sowie Infos zum Deployment und Publishing, die der KI helfen, das Setup schnell zu verstehen und auf die richtige Art- und Weise neuen Code zu erstellen, sowie Deployments vorzunehmen.

Einen neuen Block erstellen

AEM EDS arbeitet mit sogenannten Blocks. Diese Blöcke stellen die Bausteine oder Komponenten dar, die ein Redakteur nutzen kann, um sie auf der Seite zu platzieren und so die Seite mit Inhalt zu füllen. Zu den Standard-Blöcken gehören z.B. Hero, Cards, Columns…

Hier der Cards Block im Vergleich, links die Bearbeitungsansicht und rechts die Vorschau:

Wir wollen uns nun einen neuen Block coden lassen, der uns als Autor zur Verfügung steht und den wir auf der Seite positionieren können. Als Beispiel nehme ich einen Produktteaser. Dieser Block soll ähnlich die eine Card aussehen, soll aber folgende Informationen enthalten:

• Produktname
• Produktbeschreibung
• Produktbild
• Preis
• Link zum Produkt

Also sage ich Claude Code genau was ich haben möchte:

I want to create a new block "product teaser" that contains the following attributes that an author can edit: product name, product description, product image, price, link to the product details page. The block should look visually similar to the cards block.

Wir können Claude nun beim Denken, Recherchieren und bei der Planerstellung zusehen. Dabei müssen wir gegebenenfalls ein paar Mal die Ausführung diverser Befehle erlauben. Anhand der Befehle sieht man bspw. dass Claude die Dokumentationsseiten durchstöbert um nach der Lösung zu suchen. Man kann auch einfach alle dies Befehle generell erlauben.

Nach einer Weile sehen wir, dass Claude neue Verzeichnisse und Dateien erstellt. Wir haben ein neues Verzeichnis /blocks/product-teaser bekommen, in dem sich zwei Dateien befinden: product-teaser.css und product-teaser.js. Das sieht schon mal gut aus. Des weiteren hat Claude einen Ordner /drafts angelegt, wo wir eine Datei product-teaser.html finden. In dieser Datei testet Claude das Ergebnis. Claud hat ja die fantastische Fähigkeit sich das was er erschaffen hat „anzusehen“, zu bewerten und gegebenenfalls zu optimieren. Deshalb können nun mehrere Schritte folgen, in denen Claude sich immer wieder das Ergebnis ansieht um dann wieder zur Entwicklung zurückzukehren und nochmal etwas zu ändern, bis er zufrieden mit dem Ergebnis ist.

Hurra, Claude ist fertig und fasst das Ergebnis zusammen: Was habe ich erstellt, die Tests wurden erfolgreich absolviert, das Content Model sieht wie folgt aus… Wir bekommen auch noch Instruktionen, wie wir den neuen Block auf einer Seite / einem Dokument einfügen können. Lasst es uns ausprobieren! Wir legen den Inhaltsblock als Tabelle in dem Dokument an wie von Claude beschrieben. Als Produktbild habe ich hier der Einfachheit halber ein Bild gewählt, dass ich kürzlich mit Adobe Firefly generiert habe, um unser neuestes Image Model 5 auszuprobieren, deshalb die Rehe ;-)

Wir klicken den blauen Publish Button unten rechts um das Dokument für die Vorschau zu aktualisieren. Danach wechseln wir im Browser zu unserem Localhost zurück und refreshen die Seite. Ich würde sagen das Ergebnis kann sich sehen lassen!

Nachdem alles funktioniert wie gewünscht, können wir den Code committen und pushen.

git commit -a -m "added a product teaser block"
git push

Und so leicht haben wir das Ganze schon deployed!

Das wars! Happy Vibe Coding!