Creación de un bloque de Edge Delivery Services dinámico con una función de Edge de AEM
Aprenda a llamar a una función Edge de AEM desde un bloque Edge Delivery Services para que el bloque pueda recuperar datos dinámicos de una API de terceros.
Edge Delivery Services está diseñado para la velocidad. Genera documentos semánticos de HTML como parte de la publicación, sin lógica del lado del servidor en la propia página, por lo que un bloque no puede recuperar datos dinámicos, como inventario o precios de un sistema de terceros, por sí solo. Obtenerlo directamente del explorador es una alternativa, pero es posible que el explorador no tenga una sesión de usuario con la que autenticarse y que cualquier token de API colocado en el código del lado del cliente sea público.
Este problema se resuelve mediante una función Edge de AEM. Se ejecuta en Adobe CDN, posee las credenciales, llama a la API de terceros en nombre del bloque y solo devuelve los datos que necesita el bloque.
El flujo lógico tiene este aspecto:
Browser (block) → AEM Edge Function (holds credentials) → Third-party API
Lo que va a generar
En este tutorial, generará un flujo de extremo a extremo que conectará un bloque de Edge Delivery Services con un extremo de función de AEM Edge, que llamará a una API de terceros y devolverá datos dinámicos al bloque.
Para fines de demostración, se usa el Proyecto del Sitio Frescopa como sitio de Edge Delivery Services. Desarrolla un bloque de Comprobador de entrega estimada que llama a una función de AEM Edge para comprobar la disponibilidad del producto y el tiempo de entrega. El bloque se crea en el Editor universal y el punto final de la función Edge de AEM se desarrolla en un proyecto independiente. El bloque llama al extremo, que llama a dos API de flujo ascendente (simuladas en este tutorial) y devuelve una respuesta combinada al bloque.
Puede seguir los mismos pasos para las necesidades de datos dinámicos en su propio sitio de Edge Delivery Services, intercambiando su propio bloque y el código de función de AEM Edge.
Los pasos de alto nivel son los siguientes:
- Desarrollar la función Edge de AEM: implemente un controlador que combine dos llamadas de flujo ascendente en una respuesta, habilite CORS para desarrollo local y pruebe el extremo localmente.
- Desarrolle el bloque de Edge Delivery Services: andamiaje del modelo JSON, JavaScript y CSS del bloque y créelo en el editor universal.
- Conecte el bloque a la función Edge de AEM: llame al extremo local de la función Edge de AEM desde el bloque, cambie a una ruta relativa una vez implementada y controle los estados de carga y error.
- Implementar y comprobar: combinar código, implementar la función Edge de AEM, publicar la página del sitio de Edge Delivery Services y confirmar que el bloque procesa datos activos desde el extremo implementado en el dominio del sitio.
Requisitos previos
Para completar este tutorial, asegúrese de haber completado lo siguiente:
- Configurar funciones de AEM Edge en Edge Delivery Services: un proyecto de funciones de AEM Edge clonado localmente, con la CLI de Adobe instalada y el servidor de desarrollo local en ejecución para el desarrollo de funciones de AEM Edge.
- Tutorial para desarrolladores de Edge Delivery Services y Universal Editor: familiaridad con los conceptos Crear un bloque y Crear un bloque, y un servidor de desarrollo local que se ejecute para el desarrollo de bloques del sitio de Edge Delivery Services.
Desarrollo local frente a implementado
Antes de desarrollar, es importante comprender las diferencias entre el desarrollo local y un entorno implementado. La siguiente tabla resume las diferencias:
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-deliverycdn.yaml) reenvía la ruta a la instancia de función de AEM Edgeaio aem edge-functions serveGestión CORS
Veamos las diferencias de manejo de CORS entre el desarrollo local y un entorno implementado.
- Desarrollo local: El servidor de desarrollo local de Edge Delivery Services se ejecuta en el puerto 3000, el servidor de desarrollo local de la función Edge de AEM se ejecuta en el puerto 7676. Dos orígenes y puertos diferentes, por lo que la función Edge de AEM debe devolver encabezados CORS o el explorador bloqueará la respuesta.
- Implementado: Una vez implementado, la red de distribución de contenido (CDN) enruta la ruta relativa a la función Edge de AEM en el mismo dominio que el sitio, por lo que no se necesita allí ninguna administración de CORS.
Los encabezados CORS se implementan en el controlador de funciones de AEM Edge. A continuación, JavaScript del bloque elige la ruta relativa o absoluta según el entorno.
Implementación de referencia
Un ejemplo completo y práctico respalda cada paso de este tutorial. Utilice las diferencias siguientes para comprobar su propia implementación con respecto a ella o para saltar directamente al código sin seguir cada paso.
- Cambios en la función Edge de AEM: la diferencia completa para la ruta, el controlador, las llamadas de simulación ascendente y el asistente CORS, en relación con la rama
mainde la plantilla. - [Cambios de bloque de Edge Delivery Services](https://github.com/aem-showcase/frescopa/compare/main…SachinMali:frescopa:envío estimado): la diferencia completa para el modelo JSON, JavaScript y CSS del bloque, en relación con la rama
maindel sitio Frescopa. - Vista previa en vivo: el bloque del Comprobador de entrega estimado que se ejecuta de extremo a extremo en el sitio de demostración de Frescopa, con la función Edge de AEM implementada y respondiendo solicitudes en vivo.
Próximos pasos
Empiece por Desarrollar la función Edge de AEM, ya que el bloque Edge Delivery Services necesita un punto final al que llamar antes de que tenga algo a lo que conectarse.