Configurazione rapida AEM Headless tramite SDK locale

La configurazione rapida AEM Headless ti permette di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND e un esempio di app React (a SPA) che consuma il contenuto sopra AEM API GraphQL headless. Questa guida utilizza AEM SDK as a Cloud Service.

Prerequisiti

È necessario installare localmente i seguenti strumenti:

• JDK 11
• Node.js v10+
• npm 6+
• Git

1. Installare l’SDK AEM

Questa configurazione utilizza AEM SDK as a Cloud Service per esplorare AEM API GraphQL. Questa sezione fornisce una guida rapida all’installazione e all’esecuzione dell’SDK AEM in modalità Autore. Una guida più dettagliata per la creazione di un ambiente di sviluppo locale si trova qui.

1. Passa a Portale di distribuzione software > AEM as a Cloud Service e scarica la versione più recente del SDK AEM.

   

   ATTENZIONE

   La funzione GraphQL è abilitata per impostazione predefinita solo sull'SDK AEM dal 2021-02-04 o successivo.

2. Decomprimi il download e copia il jar Quickstart (aem-sdk-quickstart-XXX.jar) in una cartella dedicata, ovvero ~/aem-sdk/author.

3. Rinomina il file jar in aem-author-p4502.jar.

   La author name specifica che il jar Quickstart verrà avviato in modalità Autore. La p4502 specifica che il server Quickstart verrà eseguito sulla porta 4502.

4. Apri una nuova finestra terminale e passa alla cartella che contiene il file jar. Esegui il seguente comando per installare e avviare l'istanza AEM:

   $ cd ~/aem-sdk/author
   $ java -jar aem-author-p4502.jar
   

5. Fornisci una password amministratore come admin. Qualsiasi password amministratore è accettabile, tuttavia il suo consiglio di utilizzare admin per lo sviluppo locale per ridurre la necessità di riconfigurare.

6. Dopo alcuni minuti l'istanza AEM terminerà l'installazione e dovrebbe aprire una nuova finestra del browser in http://localhost:4502.

7. Accedi con il nome utente admin e la password selezionata durante AEM'avvio iniziale (in genere admin).

2. Installare il contenuto WKND di esempio

Contenuto di esempio dal Sito di riferimento WKND verrà installato per accelerare l'esercitazione. Il WKND è un marchio fittizio in stile di vita, spesso utilizzato in combinazione con AEM formazione.

Il sito WKND Reference include configurazioni necessarie per esporre un Endpoint GraphQL. In un’implementazione nel mondo reale, segui i passaggi documentati per includere gli endpoint GraphQL nel progetto del cliente. A CORS è stato anche confezionato come parte del sito WKND. È necessaria una configurazione CORS per concedere l’accesso a un’applicazione esterna, ulteriori informazioni su CORS di seguito.

1. Scarica l'ultimo pacchetto di AEM compilato per il sito WKND: aem-guides-wknd.all-x.x.x.zip.

   NOTA

   Assicurati di scaricare la versione standard compatibile con AEM as a Cloud Service e not la classic versione.

2. Da Inizio AEM menu vai a Strumenti > Distribuzione > Pacchetti.

   

3. Fai clic su Carica pacchetto e scegli il pacchetto WKND scaricato nel passaggio precedente. Fai clic su Installa per installare il pacchetto.

4. Da Inizio AEM menu vai a Risorse > File.

5. Fai clic sulle cartelle per passare a Sito WKND > Inglese > Avventure.

   

   Questa è una cartella di tutte le risorse che comprendono le varie Avventure promosse dal marchio WKND. Ciò include i tipi di media tradizionali come immagini e video, nonché i supporti specifici per AEM come Frammenti di contenuto.

6. Fai clic su Sci in discesa Wyoming e fai clic su Frammento di contenuto per lo sci in discesa scheda:

   

7. L’interfaccia utente dell’editor dei frammenti di contenuto si aprirà per l’avventura di sci in discesa nel Wyoming.

   

   Osserva che vari campi, come Titolo, Descrizione e Attività definire il frammento.

   Frammenti di contenuto sono uno dei modi in cui il contenuto può essere gestito in AEM. I frammenti di contenuto sono contenuti riutilizzabili e non soggetti a presentazione composti da elementi di dati strutturati quali testo, testo RTF, date o riferimenti ad altri frammenti di contenuto. I frammenti di contenuto verranno esplorati più dettagliatamente più avanti nell’esercitazione.

8. Fai clic su Annulla per chiudere il frammento. Sentitevi liberi di navigare in alcune delle altre cartelle ed esplorare l'altro contenuto Avventura.

3. Scaricare ed eseguire l'app WKND React

Uno degli obiettivi di questa esercitazione è quello di mostrare come utilizzare AEM contenuto da un’applicazione esterna utilizzando le API GraphQL. Questa esercitazione utilizza un'app React di esempio che è stata parzialmente completata per accelerare l'esercitazione. Le stesse lezioni e concetti si applicano alle app create con iOS, Android o qualsiasi altra piattaforma. L'app React è intenzionalmente semplice, per evitare inutili complessità; non si tratta di un’implementazione di riferimento.

1. Apri una nuova finestra del terminale e duplica il ramo iniziale dell’esercitazione utilizzando Git:

   $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
   

2. Nell’IDE che preferisci, apri il file . .env.development a aem-guides-wknd-graphql/react-app/.env.development. Verifica che REACT_APP_AUTHORIZATION La riga non viene commentata e il file ha un aspetto simile al seguente:

   REACT_APP_HOST_URI=http://localhost:4502
   REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
   # Use Authorization when connecting to an AEM Author environment
   REACT_APP_AUTHORIZATION=admin:admin
   

   Assicurati che React_APP_HOST_URI corrisponde alla tua istanza AEM locale. In questo capitolo, collegheremo l’app React direttamente al AEM Autore ambiente. Autore gli ambienti per impostazione predefinita richiedono l’autenticazione, in modo che la nostra app si connetta come admin utente. Si tratta di una pratica comune durante lo sviluppo, in quanto ci consente di apportare rapidamente modifiche all’ambiente AEM e di visualizzarle immediatamente nell’app.

   NOTA

   In uno scenario di produzione, l’app si connetterà a un AEM Pubblica ambiente. Questo viene trattato più dettagliatamente nella Distribuzione di produzione capitolo.

3. Passa a aem-guides-wknd-graphql/react-app cartella. Installa e avvia l'app:

   $ cd aem-guides-wknd-graphql/react-app
   $ npm install
   $ npm start
   

4. Una nuova finestra del browser dovrebbe avviare automaticamente l’app in http://localhost:3000.

   

   Deve essere visualizzato un elenco del contenuto Avventura corrente da AEM.

5. Fai clic su una delle immagini dell'avventura per visualizzare i dettagli dell'avventura. Viene AEM una richiesta per restituire i dettagli di un'avventura.

   

6. Utilizza gli strumenti di sviluppo del browser per ispezionare il Rete richieste. Visualizza la XHR richiede e osserva più richieste POST a /content/graphql/global/endpoint.json, l’endpoint GraphQL configurato per AEM.

   

7. Puoi anche visualizzare i parametri e la risposta JSON controllando la richiesta di rete. Può essere utile installare un’estensione del browser come Ispettore di rete GraphQL per Chrome per comprendere meglio la query e la risposta.

4. Modificare il contenuto in AEM

Ora che l’app React è in esecuzione, effettua un aggiornamento al contenuto in AEM e visualizza la modifica riflessa nell’app.

1. Passa a AEM http://localhost:4502.

2. Passa a Risorse > File > Sito WKND > Inglese > Avventure > Bali Surf Camp.

   

3. Fai clic su Bali Surf Camp frammento di contenuto per aprire l’Editor frammento di contenuto.

4. Modifica la Titolo e Descrizione dell'avventura

   

5. Fai clic su Salva per salvare le modifiche.

6. Torna all’app React in http://localhost:3000 e aggiorna per visualizzare le modifiche:

   

5. Installare lo strumento GraphiQL

GraphiQL è uno strumento di sviluppo e necessario solo in ambienti di livello inferiore come uno sviluppo o un’istanza locale. L'IDE GraphiQL ti consente di testare e perfezionare rapidamente le query e i dati restituiti. GraphiQL fornisce inoltre un facile accesso alla documentazione, facilitando l'apprendimento e la comprensione dei metodi disponibili.

1. Passa a Portale di distribuzione software > AEM as a Cloud Service.

2. Cerca "GraphiQL" (assicurati di includere i in GraphiQL.

3. Scarica la versione più recente Pacchetto di contenuti GraphiQL v.x.x.x

   

   Il file zip è un pacchetto AEM che può essere installato direttamente.

4. Da Inizio AEM menu vai a Strumenti > Distribuzione > Pacchetti.

5. Fai clic su Carica pacchetto e scegli il pacchetto scaricato nel passaggio precedente. Fai clic su Installa per installare il pacchetto.

   

6. Passa all'IDE GraphiQL in http://localhost:4502/content/graphiql.html e inizia a esplorare le API GraphQL.

   NOTA

   Lo strumento GraphiQL e l'API GraphQL è più avanti nell’esercitazione è stato esplorato più dettagliatamente.

Congratulazioni!

Congratulazioni, ora disponi di un’applicazione esterna che consuma AEM contenuti con GraphQL. Puoi controllare il codice nell’app React e continuare a provare a modificare i frammenti di contenuto esistenti.

Passaggi successivi

• Avvia l'esercitazione AEM Headless

Configurazione CORS (Bonus)

AEM, essendo sicura per impostazione predefinita, blocca le richieste di origini diverse, impedendo alle applicazioni non autorizzate di connettersi e visualizzare il contenuto.

Per consentire all’app React di questa esercitazione di interagire con AEM endpoint API GraphQL, nel progetto di riferimento del sito WKND è stata definita una configurazione di condivisione delle risorse tra origini diverse.

Per visualizzare la configurazione distribuita:

1. Passa alla console Web AEM SDK all'indirizzo http://localhost:4502/system/console.

   NOTA

   La console Web è disponibile solo nell’SDK. In un ambiente AEM as a Cloud Service queste informazioni possono essere visualizzate tramite Console per sviluppatori.

2. Nel menu principale fai clic su OSGI > Configurazione per richiamare Configurazioni OSGi.

3. Scorri verso il basso nella pagina Condivisione risorse tra le origini di Adobe Granite.

4. Fai clic sulla configurazione per com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.

5. I campi seguenti sono stati aggiornati:

   • Origini ammesse (Regex): http://localhost:.*
     • Consente tutte le connessioni host locali.
   • Percorsi consentiti: /content/graphql/global/endpoint.json
     • Questo è l'unico endpoint GraphQL attualmente configurato. Come best practice, le configurazioni del CdR dovrebbero essere il più restrittive possibile.
   • Metodi consentiti: GET, HEAD, POST
     • Solo POST è necessario per GraphQL ma gli altri metodi possono essere utili quando si interagisce con AEM in modo headless.
   • Intestazioni supportate: autorizzazione è stato aggiunto per passare l’autenticazione di base nell’ambiente di authoring.
   • Supporta le credenziali: Yes
     • Questo è necessario in quanto la nostra app React comunicherà con gli endpoint GraphQL protetti sul servizio AEM Author.

Questa configurazione e gli endpoint GraphQL fanno parte del progetto WKND AEM. È possibile visualizzare tutte le Configurazioni OSGi qui.