Configurazione rapida AEM headless tramite SDK AEM locale setup
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 prerequisites
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 aem-sdk
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.
-
Accedi a Portale di distribuzione software > AEM as a Cloud Service e scarica la versione più recente di SDK AEM.
-
Decomprimi il download e copia il file jar Quickstart (
aem-sdk-quickstart-XXX.jar
) in una cartella dedicata, ovvero~/aem-sdk/author
. -
Rinomina il file jar in
aem-author-p4502.jar
.Il
author
name specifica che il file jar Quickstart viene avviato in modalità Creazione. Ilp4502
specifica l'esecuzione di Quickstart sulla porta 4502. -
Per installare e avviare l’istanza AEM, apri un prompt dei comandi nella cartella che contiene il file jar ed esegui il comando seguente:
code language-shell $ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar
-
Immetti una password amministratore come
admin
. Qualsiasi password amministratore è accettabile, tuttavia si consiglia di utilizzareadmin
per lo sviluppo locale per ridurre la necessità di riconfigurare. -
Al termine dell’installazione del servizio AEM, dovrebbe aprirsi una nuova finestra del browser all’indirizzo http://localhost:4502.
-
Accedi con il nome utente
admin
e la password selezionata durante l'avvio iniziale dell'AEM (di solitoadmin
).
2. Installare il contenuto di esempio install-sample-content
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.
-
Scarica l’ultimo pacchetto AEM compilato per il sito WKND: aem-guides-wknd.all-x.x.x.zip.
note note NOTE Assicurati di scaricare la versione standard compatibile con AEM as a Cloud Service e non il classic
versione. -
Dalla sezione Inizio AEM menu, passa a Strumenti > Distribuzione > Pacchetti.
-
Clic Carica pacchetto e scegli il pacchetto WKND scaricato nel passaggio precedente. Per installare il pacchetto, fai clic su Installa.
-
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.
-
Fai clic su nella Sci in discesa Wyoming e fai clic sul pulsante Frammento di contenuto per sci di discesa nel Wyoming scheda:
-
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.
-
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 sample-app
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.
-
Apri un nuovo prompt dei comandi e clona l’app React di esempio da GitHub:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app
-
Aprire l’app React in
aem-guides-wknd-graphql/react-app
nell’IDE che preferisci. -
Nell’IDE, apri il file
.env.development
a/.env.development
. Verificare laREACT_APP_AUTHORIZATION
La riga è priva di commenti e il file dichiara le seguenti variabili:code language-plain 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 utilizzaadmin
per stabilire la connessione. La connessione di un’app all’istanza di authoring dell’AEM è una pratica comune durante lo sviluppo, in quanto facilita la rapida iterazione dei contenuti senza la necessità di pubblicare modifiche.note note NOTE In uno scenario di produzione l’app si connette a un AEM Pubblica ambiente. Questo argomento è trattato più dettagliatamente nella Distribuzione di produzione sezione. -
Installa e avvia l’app React:
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
Una nuova finestra del browser apre automaticamente l’app il http://localhost:3000.
Viene visualizzato un elenco dei contenuti delle avventure dell’AEM.
-
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.
-
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.
-
Passa a AEM http://localhost:4502.
-
Accedi a Risorse > File > WKND condiviso > Inglese > Avventure > Campo da surf di Bali.
-
Fai clic su nella Campo da surf di Bali frammento di contenuto per aprire l’editor frammento di contenuto.
-
Modifica il Titolo e Descrizione dell'avventura.
-
Clic Salva per salvare le modifiche.
-
Aggiorna l’app React in http://localhost:3000 per visualizzare le modifiche:
5. Esplorare GraphiQL graphiql
-
Apri GraphiQL passando a Strumenti > Generale > Editor query GraphQL
-
Seleziona le query persistenti esistenti a sinistra ed eseguili per visualizzare i risultati.
note note NOTE Lo strumento GraphiQL e l’API GraphQL sono approfondimento più avanti nell’esercitazione.
Congratulazioni. congratulations
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.