Configurazione rapida AEM headless tramite SDK AEM locale

La configurazione rapida AEM Headless ti consente di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND e un esempio di app React (SPA) che consuma il contenuto rispetto alle API AEM Headless GraphQL. Questa guida utilizza SDK AS A CLOUD SERVICE AEM.

Prerequisiti

I seguenti strumenti devono essere installati localmente:

• [JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=tipo di software%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14)
• Node.js v18
• Git

1. Installare l’SDK dell’AEM

Questa configurazione utilizza SDK AS A CLOUD SERVICE AEM per esplorare le API GraphQL dell’AEM. Questa sezione fornisce una guida rapida all’installazione dell’SDK per AEM e alla sua esecuzione in modalità Creazione. Una guida più dettagliata per la creazione di un ambiente di sviluppo locale si trova qui.

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

   

2. Decomprimi il download e copia il file 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.

   Il author name specifica che il file jar Quickstart viene avviato in modalità Creazione. Il p4502 specifica l'esecuzione di Quickstart sulla porta 4502.

4. Per installare e avviare l’istanza AEM, apri un prompt dei comandi nella cartella che contiene il file jar ed esegui il comando seguente:

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

5. Immetti una password amministratore come admin. Qualsiasi password amministratore è accettabile, tuttavia si consiglia di utilizzare admin per lo sviluppo locale per ridurre la necessità di riconfigurare.

6. Al termine dell’installazione del servizio AEM, dovrebbe aprirsi una nuova finestra del browser all’indirizzo http://localhost:4502.

7. Accedi con il nome utente admin e la password selezionata durante l'avvio iniziale dell'AEM (di solito admin).

2. Installare il contenuto di esempio

Contenuto di esempio da Sito di riferimento WKND viene utilizzato per accelerare l’esercitazione. Il WKND è un marchio fittizio in stile di vita, spesso utilizzato con la formazione per l’AEM.

Il sito WKND include le configurazioni necessarie per esporre un Endpoint GraphQL. In un’implementazione reale, segui i passaggi documentati per includere gli endpoint di GraphQL nel progetto del cliente. A CORS è stato anche incluso nel pacchetto come parte del sito WKND. È necessaria una configurazione CORS per concedere l’accesso a un’applicazione esterna. Ulteriori informazioni su CORS sono disponibili qui sotto.

1. Scarica l’ultimo pacchetto 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 non il classic versione.

2. Dalla sezione Inizio AEM menu, passa a Strumenti > Distribuzione > Pacchetti.

   

3. Clic Carica pacchetto e scegli il pacchetto WKND scaricato nel passaggio precedente. Per installare il pacchetto, fai clic su Installa.

4. Dalla sezione Inizio AEM menu, passa a Risorse > File > WKND condiviso > Inglese > Avventure.

   

   Questa è una cartella di tutte le risorse che comprendono le varie avventure promosse dal brand WKND. Sono inclusi i tipi di media tradizionali come immagini e video e quelli specifici dell’AEM come Frammenti di contenuto.

5. Fai clic su nella Sci in discesa Wyoming e fai clic sul pulsante Frammento di contenuto per sci di discesa nel Wyoming scheda:

   

6. Si apre l’editor frammento di contenuto per l’avventura di Downhill Skiing Wyoming.

   

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

   Frammenti di contenuto sono uno dei modi in cui i contenuti possono essere gestiti nell’AEM. I frammenti di contenuto sono contenuti riutilizzabili, indipendenti dalla presentazione e composti da elementi dati strutturati come testo, testo RTF, date o riferimenti ad altri frammenti di contenuto. I frammenti di contenuto vengono esaminati più dettagliatamente più avanti nella configurazione rapida.

7. Clic Annulla per chiudere il frammento. Puoi spostarti tra le altre cartelle ed esplorare gli altri contenuti di Adventure.

3. Scaricare ed eseguire l’app WKND React

Uno degli obiettivi di questo tutorial è mostrare come utilizzare contenuti AEM da un’applicazione esterna utilizzando le API GraphQL. Questa esercitazione utilizza un esempio di app React. L’app React è intenzionalmente semplice, per concentrarsi sull’integrazione con le API GraphQL dell’AEM.

1. Apri un nuovo prompt dei comandi e clona l’app React di esempio da GitHub:

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

2. Aprire l’app React in aem-guides-wknd-graphql/react-app nell’IDE che preferisci.

3. Nell’IDE, apri il file .env.development a /.env.development. Verificare la REACT_APP_AUTHORIZATION La riga è priva di commenti e il file dichiara le seguenti variabili:

   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
   

   Assicurare REACT_APP_HOST_URI punta all’SDK dell’AEM locale. Per comodità, questo avvio rapido collega l’app React a Autore AEM. Autore richiedono l'autenticazione, pertanto l'app utilizza admin per stabilire la connessione. La connessione di un’app ad AEM Author è una pratica comune durante lo sviluppo, in quanto facilita la rapida iterazione del contenuto senza la necessità di pubblicare modifiche.

   NOTA

   In uno scenario di produzione l’app si connette a un AEM Pubblica ambiente. Questo argomento è trattato più dettagliatamente nella Distribuzione di produzione sezione.

4. Installa e avvia l’app React:

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

5. Una nuova finestra del browser apre automaticamente l’app il http://localhost:3000.

   

   Viene visualizzato un elenco dei contenuti delle avventure dell’AEM.

6. Fai clic su una delle immagini dell’avventura per visualizzarne i dettagli. Viene fatta una richiesta all'AEM per restituire i dettagli di un'avventura.

   

7. Utilizza gli strumenti di sviluppo del browser per verificare Rete richieste. Visualizza XHR richiede e osserva più richieste GET a /graphql/execute.json/.... Questo prefisso di percorso richiama l’endpoint di query persistente AEM, selezionando la query persistente da eseguire utilizzando il nome e i parametri codificati che seguono il prefisso.

   

4. Modificare i contenuti in AEM

Quando l’app React è in esecuzione, aggiorna i contenuti dell’AEM e osserva che la modifica si riflette nell’app.

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

2. Accedi a Risorse > File > WKND condiviso > Inglese > Avventure > Campo da surf di Bali.

   

3. Fai clic su nella Campo da surf di Bali frammento di contenuto per aprire l’editor frammento di contenuto.

4. Modifica il Titolo e Descrizione dell'avventura.

   

5. Clic Salva per salvare le modifiche.

6. Aggiorna l’app React in http://localhost:3000 per visualizzare le modifiche:

   

5. Esplorare GraphiQL

1. Apri GraphiQL passando a Strumenti > Generale > Editor query GraphQL

2. Seleziona le query persistenti esistenti a sinistra ed eseguili per visualizzare i risultati.

   NOTA

   Lo strumento GraphiQL e l’API GraphQL sono approfondimento più avanti nell’esercitazione.

Congratulazioni.

Congratulazioni, ora disponi di un’applicazione esterna che utilizza contenuti AEM con GraphQL. Puoi controllare il codice nell’app React e continuare a sperimentare la modifica dei frammenti di contenuto esistenti.

Passaggi successivi

• Avvia l’esercitazione su AEM headless

Risorse Business.Adobe.com