Concetti avanzati di AEM Headless
Questo tutorial end-to-end continua il tutorial di base che ha trattato le nozioni fondamentali di Adobe Experience Manager (AEM) Headless e GraphQL. Il tutorial avanzato illustra gli aspetti approfonditi dell’utilizzo dei modelli per frammenti di contenuto, dei frammenti di contenuto e delle query persistenti di AEM GraphQL, incluso l’utilizzo delle query persistenti GraphQL in un’applicazione client.
Prerequisiti
Completa la configurazione rapida per AEM as a Cloud Service per configurare il tuo ambiente AEM as a Cloud Service.
Ti consigliamo di completare il tutorial di base e le serie di video precedenti prima di procedere con questo tutorial avanzato. Anche se puoi completare il tutorial utilizzando un ambiente AEM locale, questo tutorial riguarda solo il flusso di lavoro per AEM as a Cloud Service.
ATTENZIONEObiettivi
Questo tutorial tratta i seguenti argomenti:
- Creare modelli per frammenti di contenuto utilizzando le regole di convalida e tipi di dati più avanzati, ad esempio Segnaposto scheda, riferimenti a frammenti nidificati, oggetti JSON e tipi di dati Data e ora.
- Eseguire l’authoring di frammenti di contenuto quando si lavora con contenuti nidificati e riferimenti a frammenti e configurare criteri di cartella per la governance dell’authoring dei frammenti di contenuto.
- Esplorare le funzionalità API di AEM GraphQL utilizzando le query GraphQL con variabili e direttive.
- Rendere persistenti le query GraphQL con i parametri in AEM e imparare a utilizzare i parametri di controllo cache con le query persistenti.
- Integrare le richieste di query persistenti nell’app WKND GraphQL React di esempio utilizzando l’SDK JavaScript di AEM Headless.
Panoramica sui concetti avanzati di AEM Headless
Il video seguente offre una panoramica di alto livello dei concetti riportati in questo tutorial. Il tutorial include la definizione di modelli per frammenti di contenuto con tipi di dati più avanzati, la nidificazione di frammenti di contenuto e le query GraphQL persistenti in AEM.
ATTENZIONEConfigurazione del progetto
Il progetto del sito WKND dispone di tutte le configurazioni necessarie, quindi puoi avviare il tutorial subito dopo aver completato la configurazione rapida. In questa sezione vengono evidenziati solo alcuni passaggi importanti che puoi utilizzare per creare un tuo progetto AEM Headless.
Rivedere la configurazione esistente
Il primo passo per avviare un nuovo progetto in AEM consiste nel crearne la configurazione, come area di lavoro e per creare endpoint API GraphQL. Per rivedere o creare una configurazione, passa a Strumenti > Generale > Browser configurazioni.
Osserva che la configurazione del sito WKND Shared è già stata creata per il tutorial. Per creare una configurazione per il tuo progetto, seleziona Crea nell’angolo in alto a destra e completa il modulo nel modale Crea configurazione che viene visualizzato.
Rivedere gli endpoint API GraphQL
Successivamente, devi configurare gli endpoint API a cui inviare le query GraphQL. Per rivedere gli endpoint esistenti o crearne uno, passa a Strumenti > Generale > GraphQL.
Osserva che WKND Shared Endpoint è già stato creato. Per creare un endpoint per il progetto, seleziona Crea nell’angolo in alto a destra e segui il flusso di lavoro.
NOTARivedere la struttura del contenuto WKND e la cartella principale della lingua
Una struttura dei contenuti ben definita è fondamentale per il successo dell’implementazione di AEM headless. È utile per la scalabilità, l’usabilità e la gestione delle autorizzazioni relative al contenuto.
Una cartella principale della lingua è una cartella il cui nome contiene un codice della lingua ISO, ad esempio EN o FR. Il sistema di gestione della traduzione AEM utilizza queste cartelle per definire la lingua primaria del contenuto e le lingue per la traduzione del contenuto.
Passa a Navigazione > Risorse > File.
Accedi alla cartella WKND condivisa. Osserva la cartella con il titolo “Inglese” e il nome “EN”. Questa cartella è la cartella principale della lingua per il progetto del sito WKND.
Per il tuo progetto, crea una cartella principale della lingua all’interno della configurazione. Per ulteriori dettagli, consulta la sezione sulla creazione di cartelle.
Assegnare una configurazione alla cartella nidificata
Infine, devi assegnare la configurazione del progetto alla cartella principale della lingua. Questa assegnazione consente di creare frammenti di contenuto basati su modelli per frammenti di contenuto definiti nella configurazione del progetto.
Per assegnare la cartella principale della lingua alla configurazione, seleziona la cartella, quindi Proprietà nella barra di navigazione superiore.
Successivamente, passa alla scheda Servizi cloud e seleziona l’icona della cartella nel campo Configurazione cloud.
Nella finestra modale visualizzata, seleziona la configurazione creata in precedenza per assegnarvi la cartella principale della lingua.
Best practice
Di seguito sono riportate le best practice per la creazione del progetto personalizzato in AEM:
- La gerarchia delle cartelle deve essere modellata tenendo presente la localizzazione e la traduzione. In altre parole, le cartelle delle lingue devono essere nidificate all’interno delle cartelle di configurazione, il che consente di tradurre facilmente il contenuto all’interno di tali cartelle.
- La gerarchia delle cartelle deve essere semplice e lineare. Evita di spostare o rinominare cartelle e frammenti in un secondo momento, soprattutto dopo la pubblicazione per l’utilizzo live, in quanto questo modifica i percorsi che possono influenzare i riferimenti ai frammenti e le query GraphQL.