Concetti avanzati di AEM headless
Questo tutorial end-to-end continua il tutorial di base che ha trattato le nozioni di base 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 GraphQL dell’AEM, 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 le esercitazioni di base e serie di video precedenti prima di procedere con questa esercitazione avanzata. Anche se puoi completare l’esercitazione utilizzando un ambiente AEM locale, questa esercitazione riguarda solo il flusso di lavoro per AEM as a Cloud Service.
Obiettivi
Questo tutorial tratta i seguenti argomenti:
- Crea 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.
- Creare 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.
- Esplora le funzionalità API GraphQL dell’AEM utilizzando le query GraphQL con variabili e direttive.
- Mantenere le query GraphQL con i parametri nell’AEM e imparare a utilizzare i parametri di controllo cache con le query persistenti.
- Integra le richieste di query persistenti nell’app di esempio WKND GraphQL React di utilizzando l’SDK di JavaScript headless dell’AEM.
Panoramica sui concetti avanzati di AEM headless
Il video seguente offre una panoramica di alto livello dei concetti descritti in questa esercitazione. 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 nell’AEM.
Configurazione del progetto
Il progetto del sito WKND dispone di tutte le configurazioni necessarie, quindi puoi avviare l'esercitazione 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.
Verifica configurazione esistente
Il primo passo per avviare un nuovo progetto in AEM è la creazione della relativa configurazione, come area di lavoro e per creare endpoint API GraphQL. Per rivedere o creare una configurazione, passa a Strumenti > Generale > Browser configurazioni.
La configurazione del sito WKND Shared è già stata creata per l'esercitazione. 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.
Rivedi 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.
Osservare che WKND Shared Endpoint è già stato creato. Per creare un endpoint per il progetto, seleziona Crea in alto a destra e segui il flusso di lavoro.
Rivedi la struttura del contenuto WKND e la cartella principale della lingua
Una struttura dei contenuti ben definita è fondamentale per il successo dell’implementazione headless dell’AEM. È utile per la scalabilità, l’usabilità e la gestione delle autorizzazioni dei contenuti.
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 principale dei contenuti e le lingue per la traduzione dei contenuti.
Vai a Navigazione > Assets > File.
Passare alla cartella WKND Shared. Osserva la cartella con il titolo "English" 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, selezionare la cartella, quindi selezionare Proprietà nella barra di navigazione superiore.
Quindi, passa alla scheda Cloud Service 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 da seguire per creare un 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 modifica i percorsi che possono influenzare i riferimenti ai frammenti e le query GraphQL.
Pacchetti di avvio e soluzioni
Sono disponibili due pacchetti AEM che possono essere installati tramite Gestione pacchetti
- Advanced-GraphQL-Tutorial-Starter-Package-1.1.zip viene utilizzato più avanti nell'esercitazione e contiene immagini e cartelle di esempio.
- Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip contiene la soluzione completata per i capitoli 1-4, inclusi i nuovi modelli per frammenti di contenuto, frammenti di contenuto e query GraphQL persistenti. Utile per chi desidera passare direttamente al capitolo Integrazione applicazioni client.
Il progetto React App - Advanced Tutorial - WKND Adventures è disponibile per esaminare ed esplorare l'applicazione di esempio. Questa applicazione di esempio recupera il contenuto dall’AEM richiamando le query GraphQL persistenti ed esegue il rendering in un’esperienza coinvolgente.
Guida introduttiva
Per iniziare a utilizzare questa esercitazione avanzata, segui questi passaggi:
- Configura un ambiente di sviluppo utilizzando AEM as a Cloud Service.
- Avvia il capitolo dell'esercitazione su Creare modelli per frammenti di contenuto.