¿Qué pasaría si un flujo de trabajo que hoy en día lleva casi una hora pudiera convertirse en un proceso regulado y repetible dentro de Experience Cloud, con un solo clic? Esta guía muestra cómo Adobe App Builder convierte el esfuerzo operativo manual en automatización escalable y explica los pasos exactos para pasar de un concepto a una aplicación de empresa publicada.

No hace mucho, ayudé a una importante organización de tecnología financiera a optimizar sus flujos de trabajo de Adobe Target. Su equipo dedicaba casi 45 minutos a configurar la lógica de límite de impresiones para cada actividad: un delicado baile de ajustes, audiencias, reglas y validaciones. Al verlo, no dejaba de pensar que tenía que haber una forma mejor de hacerlo. ¿Y si todo esto pudiera suceder en tan solo unos minutos, o incluso en un clic?

Eso me llevó directamente a Adobe App Builder.

En entornos empresariales de gran tamaño, los equipos suelen recurrir a una combinación de herramientas, scripts y conocimientos colectivos para realizar el trabajo rutinario. En realidad, nada está “estropeado”, pero da la sensación de que todo requiere más pasos de los necesarios. App Builder propone una ruta diferente: en lugar de trabajar alrededor de la plataforma, se crea el flujo de trabajo en ella.

Una interfaz personalizada. Dentro de Adobe Experience Cloud. Basado en su lógica, sus API y su automatización.

Eso es exactamente lo que he creado: una aplicación interna ligera que gestiona automáticamente toda la configuración de restricción de impresiones. Lo que solían ser decenas de acciones manuales, se convirtió en un panel de control limpio incrustado directamente en la interfaz de usuario de Adobe.

En este artículo, compartiré cómo funciona App Builder, por qué es una herramienta tan valiosa para los equipos empresariales y explicaré los comandos y la configuración necesarios para poner en marcha su propia aplicación. Tanto si va a automatizar un flujo de trabajo especializado como si va a crear un producto interno completo, esta guía le proporcionará un punto de partida sólido.

¿Qué es Adobe App Builder?

Adobe App Builder es un completo marco de trabajo de aplicaciones y tiempo de ejecución para crear aplicaciones nativas en la nube personalizadas que se ejecutan en la infraestructura de Adobe. Permite a los desarrolladores ampliar la funcionalidad de Adobe Experience Cloud, Adobe Experience Platform y otros productos de Adobe. Con App Builder, los equipos pueden crear integraciones personalizadas entre Adobe y sistemas de terceros para optimizar las operaciones y mejorar la eficacia del flujo de trabajo.

App Builder proporciona varias plantillas que sirven como puntos de partida para diferentes tipos de integraciones. En este artículo, me centro en la extensión excshell, que permite que la aplicación se ejecute directamente dentro del contenedor de Adobe Experience Cloud.

Cada aplicación:

• Se autentica con Adobe IMS,

• se implementa sin servidor mediante Adobe I/O Runtime,

• se integra con el entorno Adobe Experience Cloud de su organización

• y se administra con una consola de desarrollador unificada y un modelo de espacio de trabajo de proyecto.

En resumen: es su marco de trabajo de extensión personalizado para Adobe Experience Cloud.

Perspectiva de consultoría

Como consultor, a menudo encuentro equipos empresariales que desean lo siguiente:

• Optimizar los flujos de trabajo internos de revisión de contenido o marketing.

• Proporcionar visibilidad controlada en las configuraciones complejas de Target o AEM.

• Automatizar tareas de API repetitivas como sincronización de campañas o creación de audiencias.

App Builder resuelve esto de forma elegante. Combina acciones de tiempo de ejecución seguras, componentes de IU basados en espectro y control de acceso controlado, lo que permite un desarrollo rápido sin administrar la infraestructura ni las credenciales.

Información general de un ejemplo real

Uno de mis clientes se enfrentaba a una configuración de actividad compleja en Adobe Target que implicaba varios pasos de naturaleza técnica y que requería mucho tiempo. Me ofrecí a crear una aplicación que gestionase la compleja configuración de 45 minutos con un solo clic. Esta aplicación se integraría con la API de administración de Adobe Target para administrar actividades, ofertas y audiencias. Características principales:

• Lista de actividades de Target que se puede buscar y ordenar.

• Filtro de Workspace que persiste en la selección de usuarios.

• Modal de detalles con acciones por experiencia.

• Actualización de la oferta con un solo clic (inyecta metadatos).

• Creación de audiencia opcional con valores configurables.

• IU con estilo de espectro (CSS de espectro) para un aspecto nativo de Adobe.

Inicio rápido (entorno nuevo)

1) Requisitos previos

• Acceso a Adobe Developer Console (proyecto con App Builder)

• Node.js 18+ y npm

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

• Se inició sesión en Adobe: inicio de sesión aio

2) Inicialización

Si empieza de cero:

3) Configurar app.config.yaml

El archivo app.config.yaml define cómo se integra su aplicación con Adobe Experience Cloud. Le indica a App Builder qué tipo de extensión está creando, dónde se encuentran los archivos front-end y qué acciones back-end deben ejecutarse en Adobe I/O Runtime.

A un nivel superior, especificará lo siguiente:

• Tipo de extensión: en este caso, la extensión del contenedor de Experience Cloud (dx/excshell/1), que permite que la aplicación aparezca directamente en la interfaz de Adobe Experience Cloud.

• Implementación front-end: una referencia a su punto de entrada principal de HTML (por ejemplo, index.html) junto con metadatos como el nombre, la descripción y el icono de la aplicación.

• Carpeta de recursos web: normalmente, un directorio web-src que contiene el front-end con estilo de espectro.

• Acciones en tiempo de ejecución: un conjunto de funciones de Node.js (por ejemplo, “getTargetActivities”, “updateOffer”, etc.) implementadas en la infraestructura sin servidor de Adobe. Cada acción incluye detalles como los siguientes:

  • La ruta al archivo de función de JavaScript

  • Si es accesible en la web

  • La versión en tiempo de ejecución de Node.js

  • Cualquier anotación (como requerir autenticación de Adobe)

En resumen, esta configuración conecta la interfaz de usuario con la lógica del back-end y hace que la aplicación sea reconocible para Experience Cloud una vez implementada.

4) Desarrollo local

La aplicación se sirve en http://localhost:9080 con recarga en vivo y autenticación IMS (cuando se inicia en el contenedor de Experience Cloud).

5) Implementar en un espacio de trabajo

Cambiar de espacio de trabajo cuando sea necesario (por ejemplo, fase, producción):

6) Publicar en catálogo (producción)

Después de la aprobación de Exchange, la aplicación aparecerá en el catálogo de App Builder para su organización.

Acciones (API sin servidor)

Ejemplos utilizados en esta aplicación (Node.js, @adobe/aio-sdk + node-fetch):

• getTargetActivities: enumera las actividades de Target para la organización o inquililno

• getActivity: obtiene detalles para una actividad específica (/target/activities/{type}/{id})

• getOffer: lee una oferta JSON (/target/offers/json/{offerId})

• updateOffer: actualiza una oferta (PUT /target/offers/content/{offerId})

• createAudience: crea una audiencia de Target con lógica de regla

Cada acción recupera un token de acceso de IMS del almacén de State en caché (completado por la acción getAccessToken) y llama a las API de Adobe Target con los encabezados Authorization: Portador <token> y X-Api-Key: <clientId>.

Front-end (IU de espectro)

La IU es HTML/JS sin formato con CSS de espectro:

• Buscar entrada con el botón Borrar

• Selector de espacio de trabajo (selector silencioso)

• Tabla con chips de estado y marcas de tiempo con formato

• Cuadro de diálogo modal con Actualizar oferta y controles Crear audiencia opcionales

La IU almacena el espacio de trabajo seleccionado en localStorage para que el filtro persista entre sesiones.

Referencia de comandos

Prácticas recomendadas y notas

• Use runtime.done() (a través del tiempo de ejecución de @adobe/exc-app) cuando se ejecute dentro del contenedor de Experience Cloud para evitar la IUd el tiempo de espera del contendedor (para configuraciones SPA).

• Evite las acciones de larga duración; vuelva rápidamente y transmita o sondee si fuese necesario.

• Prefiera componentes de espectro silencioso para mantener la coherencia del contenedor.

• Mantenga la lógica de autenticación en las acciones; el front-end llama a sus acciones, no a las API de Adobe directamente.

• Mantenga los filtros de usuario (por ejemplo, el espacio de trabajo) en localStorage para obtener una mejor experiencia de usuario.

• Para la publicación de Exchange, asegúrese de que los metadatos (nombre, icono) son correctos e incluya el bloque de extensión en app.config.yaml.

Documentación

• Adobe App Builder: Introducción

• Developer Console