Questa esercitazione completa continua la esercitazione di base che includeva le nozioni di base di Adobe Experience Manager (AEM) Headless e GraphQL. L’esercitazione avanzata illustra gli aspetti approfonditi dell’utilizzo dei modelli di frammenti di contenuto, dei frammenti di contenuto e delle query AEM GraphQL persistenti, incluso l’utilizzo delle query GraphQL persistenti in un’applicazione client.
Completa il configurazione rapida per AEM as a Cloud Service per configurare l'ambiente as a Cloud Service AEM.
Si consiglia vivamente di completare il precedente esercitazione di base e serie video tutorial prima di procedere con questa esercitazione avanzata. Anche se puoi completare l’esercitazione utilizzando un ambiente AEM locale, questa esercitazione copre solo il flusso di lavoro per AEM as a Cloud Service.
Se non hai accesso a AEM ambiente as a Cloud Service, puoi completare Configurazione rapida AEM Headless tramite SDK locale. Tuttavia, è importante notare che alcune pagine dell’interfaccia utente del prodotto, come la navigazione nei frammenti di contenuto, sono diverse.
Questa esercitazione tratta i seguenti argomenti:
Il video seguente fornisce una panoramica di alto livello dei concetti trattati in questa esercitazione. L’esercitazione include la definizione di modelli di frammenti di contenuto con tipi di dati più avanzati, la nidificazione di frammenti di contenuto e la persistenza di query GraphQL in AEM.
In questo video (alle 2:25) viene menzionato l’installazione dell’editor di query GraphiQL tramite Gestione pacchetti per esplorare le query GraphQL. Tuttavia, nelle versioni più recenti di AEM come Cloud Service, un Esplora risorse viene fornito, quindi non è necessario installare il pacchetto. Vedi Utilizzo dell'IDE GraphiQL per ulteriori informazioni.
Il progetto WKND Site dispone di tutte le configurazioni necessarie, quindi puoi avviare l’esercitazione subito dopo aver completato il configurazione rapida. Questa sezione evidenzia solo alcuni passaggi importanti che puoi utilizzare per creare un tuo progetto AEM Headless.
Il primo passaggio per avviare un nuovo progetto in AEM è la creazione della sua configurazione, come area di lavoro e per creare endpoint API GraphQL. Per rivedere o creare una configurazione, passa a Strumenti > Generale > Browser di configurazione.
Osserva che il WKND Shared
la configurazione del sito è già stata creata per l’esercitazione. Per creare una configurazione per un progetto personalizzato, seleziona Crea nell’angolo in alto a destra e completa il modulo nella finestra modale Crea configurazione visualizzata.
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 il 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 .
Dopo aver salvato l’endpoint, verrà visualizzato un modale che illustra come visitare la console di sicurezza, che consente di modificare le impostazioni di sicurezza per configurare l’accesso all’endpoint. Tuttavia, le stesse autorizzazioni di sicurezza non rientrano nell’ambito di questa esercitazione. Per ulteriori informazioni, consulta la Documentazione AEM.
Una struttura dei contenuti ben definita è fondamentale per il successo dell’implementazione AEM headless. È utile per la scalabilità, l’usabilità e la gestione delle autorizzazioni dei contenuti.
Una cartella principale della lingua è una cartella con un codice della lingua ISO come nome, ad esempio EN o FR. Il sistema di gestione della traduzione AEM utilizza queste cartelle per definire la lingua principale dei contenuti e delle lingue per la traduzione dei contenuti.
Vai a Navigazione > Risorse > File.
Passa a WKND condiviso cartella. Osserva la cartella con il titolo "Inglese" e il nome "EN". Questa cartella è la cartella principale della lingua per il progetto WKND Site.
Per un progetto personalizzato, crea una cartella principale della lingua all’interno della configurazione. Vedi la sezione su creazione di cartelle per ulteriori dettagli.
Infine, devi assegnare la configurazione del progetto alla cartella principale della lingua. Questa assegnazione consente di creare frammenti di contenuto basati su modelli di 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 Cloud Services e seleziona l’icona della cartella nella scheda Configurazione cloud campo .
Nel modale visualizzato, seleziona la configurazione creata in precedenza per assegnare la cartella principale della lingua.
Di seguito sono riportate le best practice per la creazione di un progetto personalizzato in AEM:
Due AEM pacchetti sono disponibili e possono essere installati tramite Gestione pacchetti
La React App - Tutorial avanzato - Avventure WKND è disponibile per esaminare ed esplorare l’applicazione di esempio. Questa applicazione di esempio recupera il contenuto da AEM richiamando le query GraphQL persistenti ed esegue il rendering in un'esperienza coinvolgente.
Per iniziare a utilizzare questa esercitazione avanzata, segui questi passaggi: