Introduzione alla distribuzione dei frammenti di contenuto in AEM con API OpenAPI
Esplora questo tutorial che illustra come creare ed esporre contenuti AEM utilizzando la funzione Content Fragment Delivery di AEM con API OpenAPI e utilizzati da un’app esterna, in uno scenario CMS headless. Questo esplora questi concetti camminando ha pensato la creazione di un’app React che mostra i team WKND e i dettagli dei membri associati. I team e i membri vengono modellati utilizzando i modelli per frammenti di contenuto di AEM e utilizzati dall’app React tramite la Distribuzione di frammenti di contenuto di AEM con API OpenAPI.
Questo tutorial tratta i seguenti argomenti:
- Creare una configurazione del progetto
- Creare modelli per frammenti di contenuto per modellare i dati
- Creare frammenti di contenuto basati sui modelli creati in precedenza
- Scopri come eseguire query sui frammenti di contenuto in AEM utilizzando la funzione "Try It" (Prova) della documentazione sulla distribuzione di frammenti di contenuto di AEM con API OpenAPI
- Consumare dati dei frammenti di contenuto tramite AEM Content Fragment Delivery con chiamate API OpenAPI da un’app React di esempio
- Migliorare l’app React per renderla modificabile nell’editor universale
Prerequisiti prerequisites
Per seguire questo tutorial sono necessari i seguenti elementi:
-
AEM Sites as a Cloud Service
-
Competenze di base di HTML e JavaScript
-
È necessario installare localmente i seguenti strumenti:
- Node.js v22+
- Git
- Un IDE (ad esempio, Microsoft® Visual Studio Code)
Ambiente AEM as a Cloud Service
Per completare questa esercitazione, ti consigliamo di avere l'accesso Amministratore AEM a un ambiente AEM as a Cloud Service. È inoltre possibile utilizzare un ambiente Sviluppo, Ambiente di sviluppo rapido o un ambiente in un Programma sandbox.
Iniziamo.
Inizia il tutorial con la sezione Definizione dei modelli per frammenti di contenuto.
Progetto GitHub
Il codice sorgente e i pacchetti di contenuti sono disponibili nelle esercitazioni AEM Headless archivio GitHub.
Il ramo main contiene il codice sorgente finale per questa esercitazione.
Le istantanee del codice alla fine di ciascun passaggio sono disponibili come tag Git.
- Inizio del capitolo 4 - App di React:
headless_open-api_basic - Fine del capitolo 4 - App React:
headless_open-api_basic_4-end - Fine del capitolo 5 - Editor universale:
headless_open-api_basic_5-end
Se riscontri un problema con il tutorial o con il codice, crea un problema GitHub.