Dokumentation GenStudio Användarhandbok om utökningsbarhet

Utveckla en App Builder-app

Last update: Tue Sep 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:
Tillägg

Skapat för:

Utvecklare

Utvecklare som utökar GenStudio for Performance Marketing inbyggda funktioner använder Adobe App Builder för att skapa, skicka och distribuera sina utbyggbara appar eller tillägg.

recommendation-more-help

Förutsättningar:

Node.js (version 20.x eller senare)
npm (paketerat med Node.js)
Adobe Developer kommandoradsgränssnitt. Kör: npm install -g @adobe/aio-cli

style

shade-box

Appstruktur

GenStudio for Performance Marketing-tillägg är App Builder-program och innehåller samma grundläggande komponenter som andra App Builder-program.

Bygg och konfigurera filer

Bland huvudkomponenterna i App Builder-programmen finns dessa bygg- och konfigurationsfiler. Den här listan innehåller inte alla bygg- och konfigurationsfiler.

README.md: Innehåller allmän information om appen.
TS-appfiler:
- package.json
- package-lock.json
- eslint
- tsconfig
- jest test up
App Builder konfigurationsfiler:
- app.config.yaml
- ext.config.yaml: Konfigurationsfil för tillägget.
- app.config.yaml: Konfigurationsfil för tillägget (omfattar definition av ditt program som ett GenStudio for Performance Marketing-tillägg).
- .aio
- .env: Verkställ inte filen .env till källkontrollen.

Source code

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

Source-kodkomponenter

ExtensionRegistration.tsx: Definierar de nödvändiga API:erna för värdappen (GenStudio for Performance Marketing) för att läsa in och visa tilläggsprogrammet.
App.tsx: Huvudprogramkomponent som definierar routning till andra komponenter.
AdditionalContextDialog.tsx: Dialogrutekomponent för att visa ytterligare kontexttillägg.
RightPanel.tsx: Dialogrutekomponent för ett valideringstillägg.
Helper-komponenter: Inkluderar ClaimsChecker.

Skapa en App Builder-app från en befintlig app

Du kan använda en exempelapp för att snabbt komma igång med att skapa din add-on.

Så här skapar du en App Builder-app från en befintlig app:

Hämta en exempelapp från databasen GenStudio UIX Examples.
Välj på arbetsytan för App Builder Project påAdobe Developer ConsoleDownload All om du vill hämta projektinformation.
Öppna exempelappen lokalt i den integrerade utvecklingsmiljö du föredrar.

Autentisera med Adobe Developer kommandoradsgränssnitt:

code language-bash
`aio login`

Ladda ned JSON-filen och skapa sedan din app:

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

Lägg till egen kod i din add-on

Definiera din tilläggskod i AdditionalContextDialog.tsx- och RightPanel.tsx-filer. Dessa två filer definierar popup-utseendet och beteendet när användarna öppnar tillägget.

AdditionalContextDialog.tsx: Definiera den här komponenten om du tänker använda tillägget Lägg till kontext . Användare interagerar med den här komponenten när de klickar på Tillägg i frågerutan i Create.
RightPanel.tsx: Definiera den här komponenten om du tänker använda tillägget Höger panel (upplevelsevalidering). Användare interagerar med den här komponenten när de klickar på valideringstillägget på den högra panelen i ett Create-upplevelseutkast.

Bästa tillvägagångssätt för apputveckling

Genom att underhålla utvecklingsmiljön kan du undvika programutvecklings- och distributionsfel:

Om du använder en äldre version av ett exempelprogram uppgraderar du beroendena genom att installera om dem:

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

Uppgradera GenStudio UIX SDK. Bekräfta att du använder den senaste versionen av GenStudio UIX SDK. Läs GenStudio UIX-exempeldatabasen om du vill veta hur du använder de senaste SDK-ändringarna.

Nu är du redo att distribuera ditt program

9e880c58-9ef6-4284-b91d-d4c2117410c7