Creare un blocco Edge Delivery Services dinamico con una funzione AEM Edge
Scopri come chiamare una funzione Edge di AEM da un blocco Edge Delivery Services in modo che il blocco possa recuperare dati dinamici da un’API di terze parti.
Edge Delivery Services è progettato per la velocità. Genera documenti HTML semantici come parte della pubblicazione, senza alcuna logica sul lato server nella pagina stessa, pertanto un blocco non può recuperare dati dinamici, come inventario o prezzi, da un sistema di terze parti. Recuperarlo direttamente dal browser è un’alternativa, ma il browser potrebbe non avere una sessione utente con cui autenticarsi e qualsiasi token API inserito nel codice lato client è pubblico.
Per risolvere questo problema è disponibile una funzione Edge di AEM. Viene eseguito su Adobe CDN, contiene le credenziali, chiama l’API di terze parti per conto del blocco e restituisce solo i dati necessari per il blocco.
Il flusso logico si presenta così:
Browser (block) → AEM Edge Function (holds credentials) → Third-party API
Cosa verrà creato
In questa esercitazione, crei un flusso end-to-end che connette un blocco Edge Delivery Services a un endpoint AEM Edge Function, che chiama un’API di terze parti e restituisce dati dinamici al blocco.
A scopo dimostrativo, viene utilizzato come sito Edge Delivery Services il Progetto sito Frescopa. Si sviluppa un blocco Verifica consegna stimata che chiama una funzione AEM Edge per verificare la disponibilità del prodotto e i tempi di consegna. Il blocco viene creato in Universal Editor e l’endpoint AEM Edge Function viene sviluppato in un progetto separato. Il blocco chiama l’endpoint, che chiama due API a monte (simulate in questa esercitazione) e restituisce una risposta combinata al blocco.
Puoi seguire gli stessi passaggi per le esigenze di dati dinamici nel tuo sito Edge Delivery Services, scambiando nel tuo blocco e nel codice della funzione di AEM Edge.
I passaggi di alto livello sono i seguenti:
- Sviluppare la funzione Edge di AEM: implementare un gestore che combina due chiamate a monte in un’unica risposta, abilitare CORS per lo sviluppo locale e testare l’endpoint localmente.
- Sviluppa il blocco Edge Delivery Services: scaffolda il modello JSON del blocco, JavaScript e CSS e lo crea in Universal Editor.
- Connetti il blocco alla funzione Edge di AEM: chiama l’endpoint locale della funzione Edge di AEM dal blocco, passa a un percorso relativo una volta distribuito e gestisce gli stati di caricamento ed errore.
- Distribuisci e verifica: unisci il codice, distribuisci la funzione Edge di AEM e pubblica la pagina del sito Edge Delivery Services, quindi conferma che il blocco esegua il rendering dei dati live dall’endpoint distribuito nel dominio del sito.
Prerequisiti
Per completare questa esercitazione, assicurati di aver completato quanto segue:
- Configura le funzioni Edge di AEM in Edge Delivery Services: un progetto AEM Edge Functions clonato localmente, con Adobe CLI installato e il server di sviluppo locale in esecuzione per lo sviluppo delle funzioni Edge di AEM.
- Esercitazione per sviluppatori di Edge Delivery Services e Universal Editor: familiarità con Creare un blocco e Creare un blocco e un server di sviluppo locale in esecuzione per lo sviluppo di blocchi del sito Edge Delivery Services.
Sviluppo locale e implementazione
Prima di sviluppare, è importante comprendere le differenze tra sviluppo locale e ambiente implementato. Nella tabella seguente sono riepilogate le differenze:
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-deliverycdn.yaml) inoltra il percorso all’istanza della funzione Edge di AEMaio aem edge-functions serveGestione CORS
Esaminiamo ora le differenze di gestione CORS tra sviluppo locale e un ambiente implementato.
- Sviluppo locale: il server di sviluppo locale di Edge Delivery Services viene eseguito sulla porta 3000, il server di sviluppo locale della funzione AEM Edge viene eseguito sulla porta 7676. Due origini e porte diverse; pertanto, la funzione Edge di AEM deve restituire le intestazioni CORS oppure il browser blocca la risposta.
- Distribuito: Una volta distribuito, il percorso relativo della rete CDN viene indirizzato alla funzione Edge di AEM sullo stesso dominio del sito, pertanto non è necessaria alcuna gestione CORS.
Puoi implementare le intestazioni CORS nel gestore di funzioni AEM Edge. Il JavaScript del blocco sceglie quindi il percorso relativo o assoluto a seconda dell’ambiente.
Implementazione di riferimento
Un esempio completo e funzionante supporta ogni passaggio di questa esercitazione. Utilizza le differenze seguenti per verificare la tua implementazione rispetto a essa o per passare direttamente al codice senza seguire ogni passaggio.
- Modifiche alla funzione Edge di AEM: differenze complete tra route, gestore, mock di chiamata upstream e helper CORS, relative al ramo
maindella boilerplate. - Modifiche al blocco di Edge Delivery Services: la differenza completa per il modello JSON, JavaScript e CSS del blocco, relativa al ramo
maindel sito Frescopa. - Anteprima live: il blocco del controllo delle consegne stimate è in esecuzione da terminare sul sito demo Frescopa, con la funzione Edge di AEM distribuita e la risposta alle richieste live.
Passaggi successivi
Inizia con Sviluppa la funzione Edge di AEM, poiché il blocco Edge Delivery Services richiede un endpoint da chiamare prima che abbia nulla a cui connettersi.