DokumentationGenStudioHandbuch zur Erweiterbarkeit

Entwickeln einer App Builder-App

Last update: Mon Sep 22 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Entwickler

Entwickelnde, die die nativen Funktionen von GenStudio for Performance Marketing erweitern, verwenden Adobe App Builder, um ihre erweiterbaren Apps oder Add-ons zu erstellen, zu senden und bereitzustellen.

recommendation-more-help

Voraussetzungen:

  • Node.js (Version 20.x oder höher)

  • npm (im Paket mit Node.js)

  • Adobe Developer-Befehlszeilenschnittstelle (CLI). Um es mit npm zu installieren, führen Sie Folgendes aus: npm install -g @adobe/aio-cli

style
shade-box

Programmstruktur

GenStudio for Performance Marketing-Add-ons sind App Builder-Apps und enthalten dieselben grundlegenden Komponenten wie andere App Builder-Apps.

Build- und Konfigurationsdateien

Zu den Hauptkomponenten der App Builder-Apps gehören diese Build- und Konfigurationsdateien. Diese Liste enthält nicht alle Build- und Konfigurationsdateien.

  • README.md: Enthält allgemeine Informationen zur App.

  • TS-App-Dateien:

    • package.json
    • package-lock.json
    • eslint
    • tsconfig
    • jest test up

  • App Builder-Konfigurationsdateien:

    • app.config.yaml
    • ext.config.yaml: Konfigurationsdatei für das Add-on.
    • app.config.yaml: Konfigurationsdatei für das Add-on (einschließlich der Definition Ihrer App als GenStudio for Performance Marketing-Add-on).
    • .aio
    • .env: Übergeben Sie die .env nicht in die Versionsverwaltung.

Quell-Code

- src/
    - genstudiopem/
        - web-src/
            - src/
                - components/
                - utils/
                - Constants.ts
                - index.tsx
                - index.css
                - utils.ts
        - index.html

Source-Code-Komponenten

  • ExtensionRegistration.tsx: Definiert die erforderlichen APIs für die Host-App (GenStudio for Performance Marketing) zum Laden und Anzeigen des Add-ons.

  • App.tsx: Hauptkomponente der App, die das Routing zu anderen Komponenten definiert.

  • AdditionalContextDialog.tsx: Dialogfeld-Komponente für die Anzeige zusätzlicher Kontext-Add-ons.

  • RightPanel.tsx: Dialogfeld-Komponente für ein Validierungs-Add-on.

  • Helper: Enthält ClaimsChecker.

Erstellen einer App Builder-App aus einer bestehenden App

Sie können eine Beispiel-App verwenden, um die Erstellung Ihres Add-ons zu starten.

So erstellen Sie eine App Builder-App aus einer bestehenden App:

  1. Laden Sie eine Beispielanwendung aus dem Repository GenStudio UIX- herunter.

  2. Wählen Sie im App Builder-Projekt-Arbeitsbereich auf Adobe Developer Console die Option Alle herunterladen aus, um die Projektdetails herunterzuladen.

  3. Öffnen Sie Ihre Beispiel-App lokal in Ihrer bevorzugten integrierten Entwicklungsumgebung (IDE).

  4. Authentifizierung über die Adobe Developer-Befehlszeilenschnittstelle:

    code language-bash 
    aio login

  5. Laden Sie Ihre JSON-Datei herunter und erstellen Sie dann Ihre App:

    code language-bash 
    aio app use '/path/to/your/downloaded/app-builder/project/details/config.json'

Hinzufügen von benutzerdefiniertem Code zu Ihrem Add-on

Definieren Sie Ihren Add-on-Code in AdditionalContextDialog.tsx- und RightPanel.tsx. Diese beiden Dateien definieren das Erscheinungsbild und Verhalten von Popups, wenn Benutzer auf das Add-on zugreifen.

  • AdditionalContextDialog.tsx: Definieren Sie diese Komponente, wenn Sie das Add-on Kontext hinzufügen verwenden möchten. Benutzer interagieren mit dieser Komponente, wenn sie auf Add-ons in der Eingabeaufforderungsschublade in Create klicken.

  • RightPanel.tsx: Definieren Sie diese Komponente, wenn Sie das Add-on Bereich rechts (Erlebnisvalidierung) verwenden möchten. Benutzer interagieren mit dieser Komponente, wenn sie in einem Create Erlebnisentwurf im rechten Bedienfeld auf das Validierungs-Add-on klicken.

Best Practices für die App-Entwicklung

Durch die Wartung Ihrer Entwicklungsumgebung können Fehler bei der App-Entwicklung und -Bereitstellung vermieden werden:

  • Wenn Sie eine ältere Version einer Beispielanwendung verwenden, aktualisieren Sie die Abhängigkeiten, indem Sie sie erneut installieren:

    code language-bash 
    rm -rf node_modules package-lock.json && npm i

  • Aktualisieren Sie die GenStudio UIX SDK. Vergewissern Sie sich, dass Sie die neueste Version von GenStudio UIX SDK verwenden. Unter Beispiel-Repository für GenStudio UIX erfahren Sie, wie Sie die neuesten SDK-Änderungen verwenden.

Jetzt können Sie " App bereitstellen

9e880c58-9ef6-4284-b91d-d4c2117410c7