Questo tutorial completo continua esercitazione di base sulle 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.
Completa il configurazione rapida per AEM as a Cloud Service per configurare l’ambiente AEM as a Cloud Service.
Si consiglia vivamente di completare il esercitazione di base e serie video prima di procedere con questa esercitazione avanzata. Sebbene sia possibile completare l'esercitazione utilizzando un ambiente AEM locale, questa esercitazione riguarda solo il flusso di lavoro per AEM as a Cloud Service.
Se non hai accesso all’ambiente AEM as a Cloud Service, puoi completare Configurazione rapida AEM Headless tramite l’SDK locale. Tuttavia, è importante notare che alcune pagine dell’interfaccia utente del prodotto, come la navigazione per frammenti di contenuto, sono diverse.
Questo tutorial tratta i seguenti argomenti:
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.
Questo video (al minuto 2:25) parla dell’installazione dell’editor di query GraphiQL tramite Gestione pacchetti per esplorare le query GraphQL. Tuttavia, nelle versioni più recenti dell’AEM come Cloud Service di GraphiQL Explorer viene fornito, pertanto l’installazione del pacchetto non è necessaria. Consulta Utilizzo dell’IDE GraphiQL per ulteriori informazioni.
Il progetto del sito WKND dispone di tutte le configurazioni necessarie, pertanto puoi avviare l’esercitazione subito dopo aver completato configurazione rapida. In questa sezione vengono evidenziati solo alcuni passaggi importanti che puoi utilizzare per creare un tuo progetto AEM headless.
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, vai a Strumenti > Generale > Browser configurazioni.
Osserva che il WKND Shared
la configurazione del sito è 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 nella finestra modale Crea configurazione che viene visualizzata.
Successivamente, devi configurare gli endpoint API a cui inviare le query GraphQL. Per esaminare gli endpoint esistenti o crearne uno, passare 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, viene visualizzata una finestra modale per la visita alla console Sicurezza, che consente di regolare le impostazioni di sicurezza se si desidera configurare l’accesso all’endpoint. Tuttavia, le autorizzazioni di sicurezza stesse non rientrano nell’ambito di questa esercitazione. Per ulteriori informazioni, consulta Documentazione AEM.
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 > Risorse > File.
Accedi a WKND condiviso cartella. 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. Consulta 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 per frammenti di contenuto definiti nella configurazione del progetto.
Per assegnare la cartella principale della lingua alla configurazione, seleziona la cartella, quindi seleziona Proprietà nella barra di navigazione superiore.
Quindi, passa a Cloud Service e seleziona l’icona della cartella in Configurazione cloud campo.
Nella finestra modale visualizzata, seleziona la configurazione creata in precedenza per assegnarvi la cartella principale della lingua.
Di seguito sono riportate le best practice da seguire per creare un progetto personalizzato in AEM:
Due AEM pacchetti sono disponibili e possono essere installati tramite Gestione pacchetti
Il App React - Tutorial avanzato - Avventure WKND project è 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.
Per iniziare a utilizzare questa esercitazione avanzata, segui questi passaggi: