Criar um bloco dinâmico do Edge Delivery Services com uma função do AEM Edge
Saiba como chamar uma Função do AEM Edge de um bloco do Edge Delivery Services para que o bloco possa buscar dados dinâmicos de uma API de terceiros.
O Edge Delivery Services foi criado para oferecer velocidade. Ele gera documentos semânticos do HTML como parte da publicação, sem lógica do lado do servidor na própria página, de modo que um bloco não pode buscar dados dinâmicos, como inventário ou preços de um sistema de terceiros, por conta própria. Buscá-lo diretamente no navegador é uma alternativa, mas talvez o navegador não tenha uma sessão de usuário com a qual autenticar e qualquer token de API colocado no código do lado do cliente seja público.
Uma função Edge do AEM resolve esse problema. Ela é executada na CDN do Adobe, mantém as credenciais, chama a API de terceiros em nome do bloco e retorna apenas os dados de que o bloco precisa.
O fluxo lógico tem esta aparência:
Browser (block) → AEM Edge Function (holds credentials) → Third-party API
O que você vai criar
Neste tutorial, você constrói um fluxo completo que conecta um bloco do Edge Delivery Services a um ponto de extremidade de função do AEM Edge, que chama uma API de terceiros e retorna dados dinâmicos ao bloco.
Para fins de demonstração, o Projeto de site Frescopa é usado como o site do Edge Delivery Services. Você desenvolve um bloco Verificador de Entrega Estimado que chama uma Função Edge do AEM para verificar a disponibilidade do produto e o tempo de entrega. O bloco é criado no Universal Editor e o endpoint da função Edge do AEM é desenvolvido em um projeto separado. O bloco chama o endpoint, que chama duas APIs de upstream (simuladas neste tutorial) e retorna uma resposta combinada ao bloco.
Você pode seguir as mesmas etapas para as necessidades de dados dinâmicos em seu próprio site do Edge Delivery Services, trocando seu próprio bloco e o código de função do AEM Edge.
As etapas de alto nível são:
- Desenvolver a Função Edge do AEM: implemente um manipulador que combine duas chamadas upstream em uma resposta, habilite o CORS para desenvolvimento local e teste o ponto de extremidade localmente.
- Desenvolver o bloco do Edge Delivery Services: o modelo JSON, o JavaScript e o CSS do bloco e criá-lo no Editor Universal.
- Conecte o bloco à Função Edge do AEM: chame o ponto de extremidade local da Função Edge do AEM a partir do bloco, alterne para um caminho relativo depois da implantação e manipule estados de carregamento e erro.
- Implante e verifique: mescle o código, implante a AEM Edge Function e publique a página do site do Edge Delivery Services e confirme se o bloco renderiza dados em tempo real do ponto de extremidade implantado no domínio do site.
Pré-requisitos
Para concluir este tutorial, verifique se você concluiu o seguinte:
- Configurar o AEM Edge Functions no Edge Delivery Services: um projeto do AEM Edge Functions clonado localmente, com o Adobe CLI instalado e o servidor de desenvolvimento local em execução para o desenvolvimento do AEM Edge Function.
- Tutorial do desenvolvedor do Edge Delivery Services e do Universal Editor: familiaridade com os conceitos Criar um bloco e Criar um bloco, e um servidor de desenvolvimento local em execução para o desenvolvimento de blocos de sites do Edge Delivery Services.
Desenvolvimento local vs. implantado
Antes de desenvolver, é importante entender as diferenças entre o desenvolvimento local e um ambiente implantado. A tabela a seguir resume as diferenças:
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-deliverycdn.yaml) encaminha o caminho para a instância da Função AEM Edgeaio aem edge-functions serveManuseio de CORS
Vamos analisar o CORS que lida com diferenças entre o desenvolvimento local e um ambiente implantado.
- Desenvolvimento local: O servidor de desenvolvimento local do Edge Delivery Services é executado na porta 3000, o servidor de desenvolvimento local do AEM Edge Function é executado na porta 7676. Duas origens e portas diferentes; portanto, a função Edge do AEM deve retornar cabeçalhos CORS ou o navegador deve bloquear a resposta.
- Implantado: depois de implantado, o CDN roteia o caminho relativo para a Função Edge do AEM no mesmo domínio do site; portanto, nenhum tratamento de CORS é necessário.
Você implementa os cabeçalhos CORS no manipulador de função do AEM Edge. O JavaScript do bloco escolhe o caminho relativo ou absoluto, dependendo do ambiente.
Implementação de referência
Um exemplo completo e prático compara cada etapa deste tutorial. Use as diferenças abaixo para verificar sua própria implementação em relação a ela ou para ir diretamente para o código sem seguir cada etapa.
- Alterações na Função Edge do AEM: a diferença completa para a rota, o manipulador, os simuladores de chamada upstream e o auxiliar CORS, relativa à ramificação
mainda chapa padrão. - [Alterações no bloco do Edge Delivery Services](https://github.com/aem-showcase/frescopa/compare/main…SachinMali:frescopa:entrega estimada): o diferencial completo do modelo JSON, JavaScript e CSS do bloco, relativo à ramificação
maindo site Frescopa. - Visualização em tempo real: a execução do bloco Verificador de entrega estimada termina no site de demonstração Frescopa, com a Função AEM Edge implantada e respondendo a solicitações em tempo real.
Próximas etapas
Comece com Desenvolva a Função Edge do AEM, pois o bloco do Edge Delivery Services precisa de um ponto de extremidade para chamar antes de ter algo para se conectar.