Was wäre, wenn ein Workflow, der heute fast eine Stunde dauert, mit nur einem Klick zu einem geregelten, wiederholbaren Prozess innerhalb von Experience Cloud werden könnte? Dieser Leitfaden zeigt, wie Adobe App Builder manuelle Arbeitsabläufe in skalierbare Automatisierung umwandelt. Er führt Sie Schritt für Schritt vom Konzept bis zur veröffentlichten Unternehmens-App.

Vor nicht allzu langer Zeit half ich einer großen Fintech-Organisation bei der Optimierung ihrer Adobe Target-Workflows. Das dortige Team verbrachte fast 45 Minuten damit, die Impression-Capping-Logik für jede Aktivität zu konfigurieren – dabei wurden Einstellungen, Zielgruppen, Regeln und Validierungen sorgfältig gegeneinander abgewogen. Während ich dies beobachtete, dachte ich immer wieder, dass es einen besseren Weg geben muss. Was wäre, wenn all dies in nur wenigen Minuten passieren könnte – oder mit einem einzigen Klick?

Das brachte mich direkt zu Adobe App Builder.

In großen Unternehmensumgebungen nutzen Teams häufig eine Kombination aus Tools, Skripts und weitergegebenem Wissen, um Routineaufgaben zu erledigen. Nichts ist wirklich „falsch“, aber es fühlt sich alles so an, als würde es mehr Schritte benötigen, als es sollte. App Builder bietet einen anderen Weg: Anstatt um die Plattform herum zu arbeiten, integrieren Sie den Workflow in die Plattform.

Eine benutzerdefinierte Oberfläche. Innerhalb von Adobe Experience Cloud. Basierend auf Ihrer Logik, Ihren APIs und Ihrer Automatisierung.

Genau das habe ich entwickelt – eine einfache interne App, die das gesamte Impression-Capping-Setup automatisch übernimmt. Was früher Dutzende manueller Aktionen waren, wurde zu einem sauberen Dashboard, das direkt in die Benutzeroberfläche von Adobe eingebettet wurde.

In diesem Artikel erkläre ich, wie App Builder funktioniert, warum es ein so wertvolles Tool für Unternehmens-Teams ist und welche Befehle und Konfigurationen erforderlich sind, um Ihre eigene App zum Laufen zu bringen. Unabhängig davon, ob Sie einen Nischen-Workflow automatisieren oder ein vollständiges internes Produkt erstellen, dieser Leitfaden bietet Ihnen einen soliden Ausgangspunkt.

Was ist Adobe App Builder?

Adobe App Builder ist ein vollständiges Programm- und Laufzeit-Framework zum Erstellen benutzerdefinierter Cloud-nativer Apps, die auf der Adobe-Infrastruktur ausgeführt werden. Damit können Entwickelnde die Funktionalität von Adobe Experience Cloud, Adobe Experience Platform und anderen Adobe-Produkten erweitern. Mit App Builder können Teams benutzerdefinierte Integrationen zwischen Adobe und Drittanbietersystemen erstellen, um Vorgänge zu optimieren und die Workflow-Effizienz zu verbessern.

App Builder bietet mehrere Vorlagen, die als Ausgangspunkte für verschiedene Integrationstypen dienen. In diesem Artikel konzentriere ich mich auf die Erweiterung excshell, mit der Ihre App direkt in der Adobe Experience Cloud-Shell ausgeführt werden kann.

Jede App ist:

• Authentifiziert mit Adobe IMS

• Server-los bereitgestellt mit Adobe I/O Runtime

• Integriert in die Adobe Experience Cloud-Umgebung Ihres Unternehmens

• Verwaltet mit einer einheitlichen Entwicklerkonsole und einem Projekt-Arbeitsbereichsmodell

Kurz gesagt: Sie ist Ihr benutzerdefiniertes Erweiterungs-Framework für Adobe Experience Cloud.

Beratungsperspektive

Als Berater begegne ich oft Unternehmens-Teams, die Folgendes erreichen möchten:

• Optimierung der Workflows für internes Marketing oder Inhaltsüberprüfung

• Bereitstellung kontrollierter Transparenz für komplexe Target- oder AEM-Konfigurationen

• Automatisierung sich wiederholender API-Aufgaben wie Kampagnensynchronisierung oder Zielgruppenerstellung

App Builder löst das elegant. Das Tool kombiniert sichere Laufzeitaktionen, Spectrum-basierte Benutzeroberflächenkomponenten und geregelte Zugriffssteuerung und ermöglicht so eine schnelle Entwicklung ohne Verwaltung der Infrastruktur oder der Anmeldedaten.

Ein Beispiel aus der Praxis im Überblick

Einer meiner Kunden stand vor einem komplexen Aktivitäten-Setup in Adobe Target, das mehrere technische Schritte umfasste und zeitaufwendig war. Ich bot an, eine App zu erstellen, die das komplexe 45-minütige Setup mit einem einzigen Klick bewältigt. Diese App würde zur Verwaltung von Aktivitäten, Angeboten und Zielgruppen in die Adobe Target-Admin-API integriert. Hauptfunktionen:

• Durchsuchbare, sortierbare Liste der Target-Aktivitäten

• Arbeitsbereichfilter, der die Benutzerauswahl beibehält

• Details-Modal mit Aktionen pro Erlebnis

• Ein-Klick-Angebotsaktualisierung (fügt Metadaten ein)

• Optionale Zielgruppenerstellung mit konfigurierbaren Werten

• Benutzeroberfläche im Spectrum-Stil (Spectrum CSS) für einen nativen Adobe-Look

Schnellstart (neue Umgebung)

1) Voraussetzungen

• Zugriff auf Adobe Developer Console (Projekt mit App Builder)

• Node.js 18+ und npm

• Adobe I/O CLI:  npm install -g @adobe/aio-cli

• Bei Adobe angemeldet als:  aio login

2) Initialisierung

Wenn Sie von Grund auf neu beginnen:

3) Konfigurieren von app.config.yaml

Die Datei app.config.yaml definiert, wie Ihre App mit Adobe Experience Cloud integriert wird. Sie teilt App Builder mit, welche Art von Erweiterung Sie erstellen, wo sich Ihre Frontend-Dateien befinden und welche Backend-Aktionen in Adobe I/O Runtime ausgeführt werden sollen.

Auf übergeordneter Ebene bedeutet das:

• Erweiterungstyp – In diesem Fall die Experience Cloud Shell-Erweiterung (dx/excshell/1), mit der die App direkt in der Adobe Experience Cloud-Oberfläche angezeigt wird.

• Frontend-Implementierung – Ein Verweis auf Ihren HTML-Haupteinstiegspunkt (z. B. index.html) zusammen mit Metadaten wie Name, Beschreibung und Symbol der App.

• Ordner „Web-Assets“ – Normalerweise ein web-src-Verzeichnis, das Ihr Frontend im Spectrum-Stil enthält.

• Laufzeitaktionen – Eine Reihe von Node.js-Funktionen (z. B. „getTargetActivities“, „updateOffer“ usw.), die in der Server-losen Adobe-Infrastruktur bereitgestellt werden. Jede Aktion enthält beispielsweise folgende Details:

  • Der Pfad zur JavaScript-Funktionsdatei

  • Ob der Zugriff über das Web möglich ist

  • Die Node.js-Laufzeitversion

  • Alle Anmerkungen (z. B. Adobe-Authentifizierung erforderlich)

Kurz gesagt, diese Konfiguration verbindet Ihre Benutzeroberfläche mit Ihrer Backend-Logik und macht die App nach der Bereitstellung für Experience Cloud erkennbar.

4) Lokale Entwicklung

Die App wird unter http://localhost:9080 mit Live-Neuladen und IMS-Authentifizierung bereitgestellt (beim Start in der Experience Cloud-Shell).

5) Bereitstellung in einem Arbeitsbereich

Wechseln des Arbeitsbereichs bei Bedarf (z. B. Staging, Produktion):

6) Veröffentlichen im Katalog (Produktion)

Nach der Exchange-Genehmigung wird die App im App Builder-Katalog für Ihre Organisation angezeigt.

Aktionen (Server-lose APIs)

In dieser App verwendete Beispiele (Node.js, @adobe/aio-sdk + node-fetch):

• getTargetActivities – Listet die Target-Aktivitäten für die Organisation bzw. den Mandanten auf

• getActivity – Ruft Details für eine bestimmte Aktivität ab (/target/activities/{type}/{id})

• getOffer – Liest ein JSON-Angebot (/target/offers/json/{offerId})

• updateOffer – Aktualisiert ein Angebot (PUT /target/offers/content/{offerId})

• createAudience – Erstellt eine Target-Zielgruppe mit Regellogik

Jede Aktion ruft ein IMS-Zugriffs-Token aus dem zwischengespeicherten State-Speicher ab (der durch die Aktion getAccessToken gefüllt wird) und ruft Adobe Target-APIs mit Authorization: Bearer <token>- und X-API-Key: <clientId>-Headern auf.

Frontend (Spectrum-Benutzeroberfläche)

Bei der Benutzeroberfläche handelt es sich um einfaches HTML/JS unter Verwendung von Spectrum CSS:

• Sucheingabe mit Löschtaste

• Arbeitsbereichauswahl (stille Auswahl)

• Tabelle mit Status-Chips und formatierten Zeitstempeln

• Modal-Dialog mit dem Steuerelement Angebot aktualisieren und dem optionalen Steuerelement Zielgruppe erstellen

Die Benutzeroberfläche speichert den ausgewählten Arbeitsbereich in localStorage, damit der Filter sitzungsübergreifend beibehalten wird.

Befehlsreferenz

Best Practices und Hinweise

• Verwenden Sie runtime.done() (über @adobe/exc-app Runtime) bei Ausführung in der Experience Cloud-Shell, um ein Timeout der Shell-Benutzeroberfläche zu vermeiden (für SPA-Setups).

• Vermeiden Sie langwierige Aktionen. Kehren Sie schnell zurück und streamen Sie bei Bedarf oder führen Sie Abfragen durch.

• Bevorzugen Sie stille Spectrum-Komponenten, um Shell-Konsistenz zu gewährleisten.

• Behalten Sie die Authentifizierungslogik in Aktionen bei. Das Frontend ruft Ihren Aktionen auf, nicht die Adobe-APIs direkt.

• Behalten Sie Benutzerfilter (z. B. Arbeitsbereich) in localStorage bei, um die UX zu verbessern.

• Achten Sie für die Exchange-Veröffentlichung auf korrekte Metadaten (Name, Symbol) und fügen Sie den Erweiterungsblock in app.config.yaml ein.

Dokumentation

• Adobe App Builder – Erste Schritte

• Developer Console