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 dell’API GraphQL AEM, incluso l’utilizzo di GraphQL AEM in un’applicazione client.
Completa il configurazione rapida per AEM as a Cloud Service per configurare l’ambiente.
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.
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.
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 visualizzare o creare una configurazione, passa a Strumenti > Generale > Browser di configurazione.
Tieni presente che la configurazione del sito WKND è 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 > Risorse > GraphQL.
Osserva che gli endpoint globali e WKND sono già stati creati. 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 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 Sito WKND 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
Sono disponibili due progetti React JS per sperimentare le query da un'applicazione client headless.
Per iniziare a utilizzare questa esercitazione avanzata, segui questi passaggi: