Création d’un bloc Edge Delivery Services dynamique avec une fonction AEM Edge
Découvrez comment appeler une fonction AEM Edge à partir d’un bloc Edge Delivery Services afin que le bloc puisse récupérer des données dynamiques à partir d’une API tierce.
Edge Delivery Services est conçu pour être rapide. Il génère des documents HTML sémantiques dans le cadre de la publication, sans logique côté serveur sur la page elle-même. Par conséquent, un bloc ne peut pas récupérer à lui seul des données dynamiques, telles que l’inventaire ou la tarification d’un système tiers. Vous pouvez également la récupérer directement à partir du navigateur, mais le navigateur peut ne pas disposer d’une session utilisateur avec laquelle s’authentifier, et tout jeton API placé dans le code côté client est public.
Une fonction AEM Edge résout ce problème. Il s’exécute sur le réseau CDN Adobe, contient les informations d’identification, appelle l’API tierce au nom du bloc et renvoie uniquement les données dont le bloc a besoin.
Le flux logique ressemble à ceci :
Browser (block) → AEM Edge Function (holds credentials) → Third-party API
Ce que vous allez créer
Dans ce tutoriel, vous allez créer un flux de bout en bout qui connecte un bloc Edge Delivery Services à un point d’entrée de fonction AEM Edge, qui appelle une API tierce et renvoie des données dynamiques au bloc.
À des fins de démonstration, le projet de site Frescopa est utilisé comme site Edge Delivery Services. Vous développez un bloc Vérificateur de diffusion estimée qui appelle une fonction AEM Edge pour vérifier la disponibilité du produit et le délai de diffusion. Le bloc est créé dans l’éditeur universel et le point d’entrée de fonction AEM Edge est développé dans un projet distinct. Le bloc appelle le point d’entrée , qui appelle deux API en amont (simulées dans ce tutoriel) et renvoie une réponse combinée au bloc .
Vous pouvez suivre les mêmes étapes pour les besoins en données dynamiques sur votre propre site Edge Delivery Services, en permutant votre propre bloc et le code de fonction AEM Edge.
Les étapes détaillées sont les suivantes :
- Développer la fonction AEM Edge : implémentez un gestionnaire qui combine deux appels en amont en une seule réponse, activez CORS pour le développement local et testez le point d’entrée localement.
- Développez le bloc Edge Delivery Services : créez un modèle automatique pour le modèle JSON, JavaScript et CSS du bloc, puis créez-le dans l’éditeur universel.
- Connecter le bloc à la fonction AEM Edge : appelez le point d’entrée local de la fonction AEM Edge depuis le bloc, passez à un chemin relatif une fois déployé et gérez les états de chargement et d’erreur.
- Déployer et vérifier : fusionnez le code, déployez la fonction AEM Edge et publiez la page du site Edge Delivery Services, puis confirmez que le bloc rend les données actives à partir du point d’entrée déployé sur le domaine de votre site.
Prérequis
Pour suivre ce tutoriel, assurez-vous d’avoir terminé les éléments suivants :
- Configuration des fonctions AEM Edge sur Edge Delivery Services : projet de fonctions AEM Edge cloné localement, avec l’interface de ligne de commande Adobe installée et le serveur de développement local s’exécutant pour le développement de vos fonctions AEM Edge.
- Tutoriel de développement sur Edge Delivery Services et l’éditeur universel : connaissance des concepts Création d’un bloc et Création d’un bloc et d’un serveur de développement local s’exécutant pour le développement de blocs de votre site Edge Delivery Services.
Développement local vs déployé
Avant le développement, il est important de comprendre les différences entre un environnement de développement local et un environnement déployé. Le tableau suivant résume les différences :
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-deliverycdn.yaml) transfère le chemin d’accès à l’instance de fonction AEM Edgeaio aem edge-functions serveGestion des CORS
Examinons les différences de gestion CORS entre le développement local et un environnement déployé.
- Local dev : le serveur de développement local de Edge Delivery Services s’exécute sur le port 3000, tandis que le serveur de développement local de la fonction AEM Edge s’exécute sur le port 7676. Deux origines et ports différents. Par conséquent, la fonction AEM Edge doit renvoyer des en-têtes CORS, ou le navigateur bloque la réponse.
- Déployé : une fois déployé, le réseau CDN achemine le chemin d’accès relatif vers la fonction AEM Edge sur le même domaine que le site. Aucune gestion CORS n’est donc nécessaire à cet endroit.
Vous mettez en œuvre les en-têtes CORS dans le gestionnaire de fonctions AEM Edge. Le JavaScript du bloc sélectionne ensuite le chemin d’accès relatif ou absolu en fonction de l’environnement.
Implémentation de référence
Un exemple de travail complet accompagne chaque étape de ce tutoriel. Utilisez les balises de comparaison ci-dessous pour vérifier votre propre implémentation par rapport à celle-ci ou pour accéder directement au code sans suivre chaque étape.
- Modifications de la fonction AEM Edge : comparaison complète pour l’itinéraire, le gestionnaire, les simulations d’appel en amont et l’assistant CORS, par rapport à la branche
maindu modèle standard. - [Modifications du bloc Edge Delivery Services ] (estimated-delivery) : comparaison complète pour le modèle JSON, JavaScript et CSS du bloc, par rapport à la branche
maindu site Frescopa. - Aperçu en direct : le bloc Vérificateur de diffusion estimée s’exécutant de bout en bout sur le site de démonstration Frescopa, avec la fonction AEM Edge déployée et répondant aux requêtes en direct.
Étapes suivantes
Commencez par Développer la fonction AEM Edge, car le bloc Edge Delivery Services a besoin d’un point d’entrée à appeler avant d’avoir quoi que ce soit auquel se connecter.