DocumentazioneGenStudioGuida all’estensibilità

Sviluppare un’app App Builder

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

Creato per:

  • Sviluppatore

Gli sviluppatori che estendono le funzionalità native di GenStudio for Performance Marketing utilizzano Adobe App Builder per creare, inviare e distribuire le proprie app estensibili o i componenti aggiuntivi.

recommendation-more-help

Prerequisiti:

  • Node.js (versione 20.x o successiva)

  • npm (in pacchetto con Node.js)

  • Interfaccia della riga di comando (CLI) di Adobe Developer. Per installarlo con npm, eseguire: npm install -g @adobe/aio-cli

style
shade-box

Struttura dell’app

I componenti aggiuntivi GenStudio for Performance Marketing sono app App Builder e contengono gli stessi componenti di base di altre app App Builder.

File di build e configurazione

I componenti chiave delle app App Builder includono questi file di build e configurazione. Questo elenco non include tutti i file di build e configurazione.

  • README.md: include informazioni generali sull'app.

  • File app di Servizi terminal:

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

  • File di configurazione di App Builder:

    • app.config.yaml
    • ext.config.yaml: file di configurazione per il componente aggiuntivo.
    • app.config.yaml: file di configurazione per il componente aggiuntivo (include la definizione dell'app come componente aggiuntivo di GenStudio for Performance Marketing).
    • .aio
    • .env: non eseguire il commit del file .env nel controllo del codice sorgente.

Codice Source

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

Componenti codice Source

  • ExtensionRegistration.tsx: definisce le API necessarie per l'app host (GenStudio for Performance Marketing) per caricare e visualizzare il componente aggiuntivo.

  • App.tsx: componente app principale che definisce il routing ad altri componenti.

  • AdditionalContextDialog.tsx: componente finestra di dialogo per visualizzare componenti aggiuntivi di contesto aggiuntivi.

  • RightPanel.tsx: componente finestra di dialogo per un componente aggiuntivo di convalida.

  • Helper componenti: include ClaimsChecker.

Creare un’app App Builder da un’app esistente

Puoi utilizzare un’app di esempio per iniziare subito a creare il componente aggiuntivo.

Per creare un'app App Builder da un'app esistente:

  1. Scarica un'app di esempio dall'archivio GenStudio UIX Examples.

  2. Dall'area di lavoro del progetto App Builder in Adobe Developer Console, seleziona Scarica tutto per scaricare i dettagli del progetto.

  3. Apri l’app di esempio localmente nell’ambiente di sviluppo integrato (IDE) preferito.

  4. Esegui l’autenticazione tramite l’interfaccia della riga di comando di Adobe Developer:

    code language-bash 
    aio login

  5. Scarica il file JSON e crea l’app:

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

Aggiungere codice personalizzato al componente aggiuntivo

Definire il codice del componente aggiuntivo in AdditionalContextDialog.tsx e RightPanel.tsx file. Questi due file definiscono l'aspetto e il comportamento dei popup quando gli utenti accedono al componente aggiuntivo.

  • AdditionalContextDialog.tsx: definire questo componente se si intende utilizzare il componente aggiuntivo Aggiungi contesto. Gli utenti interagiscono con questo componente facendo clic su Componenti aggiuntivi nel cassetto delle richieste in Create.

  • RightPanel.tsx: definire questo componente se si intende utilizzare il componente aggiuntivo Pannello destro (convalida dell'esperienza). Gli utenti interagiscono con questo componente facendo clic sul componente aggiuntivo di convalida nel pannello a destra in una bozza di esperienza Create.

Best practice per lo sviluppo di app

La manutenzione dell’ambiente di sviluppo consente di evitare errori di sviluppo e distribuzione delle app:

  • Se utilizzi una versione precedente di un’app di esempio, aggiorna le dipendenze reinstallandole:

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

  • Aggiornare GenStudio UIX SDK. Conferma di utilizzare la versione più recente di GenStudio UIX SDK. Per informazioni su come utilizzare le modifiche di SDK più recenti, consulta l'archivio di esempio di GenStudio UIX.

Ora puoi distribuire la tua app

9e880c58-9ef6-4284-b91d-d4c2117410c7