DocumentaciónGenStudioGuía de extensibilidad

Desarrollo de una aplicación de App Builder

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

Creado para:

  • Desarrollador

Los desarrolladores que amplían las capacidades nativas de GenStudio for Performance Marketing usan Adobe App Builder para crear, enviar e implementar sus aplicaciones ampliables o complementos.

recommendation-more-help

Requisitos previos:

  • Node.js (versión 20.x o superior)

  • npm (empaquetado con Node.js)

  • Interfaz de línea de comandos (CLI) de Adobe Developer. Para instalarlo con npm, ejecute: npm install -g @adobe/aio-cli

style
shade-box

Estructura de aplicación

Los complementos de GenStudio for Performance Marketing son aplicaciones de App Builder y contienen los mismos componentes básicos que otras aplicaciones de App Builder.

Archivos de compilación y configuración

Los componentes clave de las aplicaciones de App Builder incluyen estos archivos de compilación y configuración. Esta lista no incluye todos los archivos de compilación y configuración.

  • README.md: incluye información general sobre la aplicación.

  • Archivos de aplicación TS:

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

  • Archivos de configuración de App Builder:

    • app.config.yaml
    • ext.config.yaml: archivo de configuración para el complemento.
    • app.config.yaml: archivo de configuración para el complemento (incluye la definición de su aplicación como complemento de GenStudio for Performance Marketing).
    • .aio
    • .env: no confirme el archivo .env al control de código fuente.

código Source

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

Componentes de código Source

  • ExtensionRegistration.tsx: define las API necesarias para que la aplicación host (GenStudio for Performance Marketing) cargue y muestre el complemento.

  • App.tsx: componente de la aplicación principal que define el enrutamiento a otros componentes.

  • AdditionalContextDialog.tsx: componente de diálogo para mostrar complementos de contexto adicionales.

  • RightPanel.tsx: componente de diálogo para un complemento de validación.

  • Helper componentes: incluye ClaimsChecker.

Creación de una aplicación de App Builder a partir de una aplicación existente

Puede utilizar una aplicación de ejemplo para iniciar la creación de su complemento.

Para crear una aplicación de App Builder a partir de una aplicación existente:

  1. Descargue una aplicación de ejemplo del repositorio GenStudio UIX Examples.

  2. En el área de trabajo del proyecto App Builder en Adobe Developer Console, seleccione Descargar todo para descargar los detalles del proyecto.

  3. Abra la aplicación de ejemplo localmente en el entorno de desarrollo integrado (IDE) que prefiera.

  4. Autenticar con la interfaz de línea de comandos de Adobe Developer:

    code language-bash 
    aio login

  5. Descargue el archivo JSON y, a continuación, cree su aplicación:

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

Añadir código personalizado al complemento.

Defina su código de complemento en AdditionalContextDialog.tsx y RightPanel.tsx archivos. Estos dos archivos definen el aspecto y el comportamiento de las ventanas emergentes cuando los usuarios acceden al complemento.

  • AdditionalContextDialog.tsx: defina este componente si planea usar el complemento Agregar contexto. Los usuarios interactúan con este componente al hacer clic en Complementos en el cajón de mensajes de Create.

  • RightPanel.tsx: defina este componente si planea usar el complemento Panel derecho (validación de experiencia). Los usuarios interactúan con este componente al hacer clic en el complemento de validación en el panel derecho en un borrador de experiencia de Create.

Prácticas recomendadas para el desarrollo de aplicaciones

El mantenimiento del entorno de desarrollo puede ayudar a evitar errores de desarrollo e implementación de aplicaciones:

  • Si utiliza una versión anterior de una aplicación de ejemplo, actualice las dependencias reinstalándolas:

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

  • Actualice GenStudio UIX SDK. Confirme que está usando la versión más reciente de GenStudio UIX SDK. Consulte Repositorio de ejemplo de UIX de GenStudio para obtener información sobre cómo usar los cambios más recientes de SDK.

Ahora está listo para implementar su aplicación

9e880c58-9ef6-4284-b91d-d4c2117410c7