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 l'SDK per AEM as a Cloud Service.
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 installazione utilizza l'SDK di AEM as a Cloud Service per esplorare le API di 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 configurazione di un ambiente di sviluppo locale è disponibile qui.
-
Passa al portale di distribuzione software > AEM as a Cloud Service e scarica la versione più recente dell'SDK AEM.
-
Decomprimere il download e copiare 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 nome
author
specifica che il file jar Quickstart viene avviato in modalità Creazione.p4502
specifica che Quickstart viene eseguito 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
-
Specificare 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 essere aperta una nuova finestra del browser all'indirizzo http://localhost:4502.
-
Accedere con il nome utente
admin
e la password selezionati durante l'avvio iniziale dell'AEM (in genereadmin
).
2. Installare il contenuto di esempio install-sample-content
Il contenuto di esempio del 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. Anche un CORS è stato incluso nel pacchetto come parte del sito WKND. Per concedere l'accesso a un'applicazione esterna è necessaria una configurazione CORS. Ulteriori informazioni su CORS sono disponibili di seguito.
-
Scarica il pacchetto AEM compilato più recente 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 la versione classic
. -
Dal menu Inizio AEM, passa a Strumenti > Distribuzione > Pacchetti.
-
Fare clic su Carica pacchetto e scegliere il pacchetto WKND scaricato nel passaggio precedente. Per installare il pacchetto, fai clic su Installa.
-
Dal menu Inizio AEM, passa a Assets > File > Condiviso WKND > Inglese > Avventure.
Questa è una cartella di tutte le risorse che comprendono le varie avventure promosse dal brand WKND. Sono inclusi i tipi di file multimediali tradizionali come immagini e video e i file multimediali specifici dell'AEM come Frammenti di contenuto.
-
Fai clic nella cartella Sci in discesa Wyoming e fai clic sulla scheda Frammento di contenuto di Sci in discesa Wyoming:
-
Si apre l’editor frammento di contenuto per l’avventura di Downhill Skiing Wyoming.
Osserva che vari campi come Titolo, Descrizione e Attività definiscono il frammento.
I frammenti di contenuto sono uno dei modi in cui il contenuto può essere gestito in 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.
-
Fai clic su 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 desiderato. -
Nell'IDE, aprire il file
.env.development
in/.env.development
. Verificare che la rigaREACT_APP_AUTHORIZATION
non contenga commenti e che il file dichiari 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
Assicurati che
REACT_APP_HOST_URI
punti al tuo SDK AEM locale. Per comodità, questo avvio rapido collega l'app React a AEM Author. I servizi Author richiedono l'autenticazione, pertanto l'app utilizza l'utenteadmin
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 ambiente Publish dell'AEM. Questo argomento è trattato più dettagliatamente nella sezione Distribuzione di produzione. -
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 in 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 esaminare le richieste Network. Visualizza le richieste XHR e osserva più richieste GET a
/graphql/execute.json/...
. Questo prefisso di percorso richiama l’endpoint di query persistente dell’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.
-
Passa a Assets > File > WKND Shared > Inglese > Avventure > Bali Surf Camp.
-
Fai clic sul frammento di contenuto Bali Surf Camp per aprire l'editor frammenti di contenuto.
-
Modifica il Titolo e la Descrizione dell'avventura.
-
Fai clic su Salva per salvare le modifiche.
-
Aggiorna l'app React all'indirizzo 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 descritti 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.