DocumentazioneAEMTutorial su AEMTutorial di AEM Headless

Configurazione rapida AEM Headless tramite AEM SDK locale

Ultimo aggiornamento: 5 maggio 2025
  • Si applica a:
  • Experience Manager as a Cloud Service
  • Argomenti:
  • Frammenti di contenuto

Creato per:

  • Principiante
  • Sviluppatore

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 (a SPA) che consuma il contenuto rispetto alle API AEM Headless GraphQL. Questa guida utilizza AEM as a Cloud Service SDK.

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 AEM SDK

Questa installazione utilizza AEM as a Cloud Service SDK per esplorare le API GraphQL di AEM. Questa sezione fornisce una guida rapida all’installazione di AEM SDK e alla sua esecuzione in modalità Creazione. Una guida più dettagliata per la configurazione di un ambiente di sviluppo locale è disponibile qui.

NOTA
È inoltre possibile seguire l'esercitazione con un ambiente AEM as a Cloud Service. Nell’esercitazione sono incluse note aggiuntive sull’utilizzo di un ambiente Cloud.

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

    Portale di distribuzione software

  2. Decomprimere il download e copiare 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 nome author specifica che il file jar Quickstart viene avviato in modalità Creazione. p4502 specifica che Quickstart viene eseguito sulla porta 4502.

  4. Per installare e avviare l’istanza di 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. Specificare 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 essere aperta una nuova finestra del browser all'indirizzo http://localhost:4502.

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

2. Installare il contenuto di esempio

Il contenuto di esempio del sito di riferimento WKND viene utilizzato per accelerare l'esercitazione. Il WKND è un brand fittizio in stile vita, spesso utilizzato con la formazione di 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.

  1. Scarica il pacchetto AEM più recente compilato per il sito WKND: aem-guides-wknd.all-x.x.x.zip.

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

  2. Dal menu AEM Start, passa a Strumenti > Distribuzione > Pacchetti.

    Passa a pacchetti

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

  4. Dal menu AEM Start, passa a Assets > File > WKND Shared > Inglese > Avventure.

    Visualizzazione cartelle delle avventure

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

  5. Fai clic nella cartella Sci in discesa Wyoming e fai clic sulla scheda Frammento di contenuto di Sci in discesa Wyoming:

    Scheda Frammento di contenuto

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

    Editor frammento di contenuto

    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.

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

NOTE
Se utilizzi un ambiente Cloud Service, consulta la documentazione per sapere come distribuire una base di codice come il sito di riferimento WKND in un ambiente Cloud Service.

3. Scaricare ed eseguire l’app WKND React

Uno degli obiettivi di questo tutorial è mostrare come utilizzare i contenuti AEM da un’applicazione esterna utilizzando le API GraphQL. Questa esercitazione utilizza un esempio di app React. L’app React è intenzionalmente semplice, per concentrarti sull’integrazione con le API GraphQL di 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 desiderato.

  3. Nell'IDE, aprire il file .env.development in /.env.development. Verificare che la riga REACT_APP_AUTHORIZATION non contenga commenti e che il file dichiari 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

    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'utente 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.

    NOTE
    In uno scenario di produzione, l'app si connetterà a un ambiente AEM Publish. Questo argomento è trattato più dettagliatamente nella sezione Distribuzione di produzione.

  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 in http://localhost:3000.

    React app iniziale

    Viene visualizzato un elenco dei contenuti dell’avventura da AEM.

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

    Visualizzazione dettagli avventura

  7. 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 di AEM, selezionando la query persistente da eseguire utilizzando il nome e i parametri codificati che seguono il prefisso.

    Richiesta XHR endpoint GraphQL

4. Modificare i contenuti in AEM

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

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

  2. Passa a Assets > File > WKND Shared > Inglese > Avventure > Bali Surf Camp.

    Cartella campo di Bali

  3. Fai clic sul frammento di contenuto Bali Surf Camp per aprire l'editor frammenti di contenuto.

  4. Modifica il Titolo e la Descrizione dell'avventura.

    Modifica frammento di contenuto

  5. Fai clic su Salva per salvare le modifiche.

  6. Aggiorna l'app React all'indirizzo http://localhost:3000 per visualizzare le modifiche:

    Avventura campo surf di Bali aggiornata

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.

    NOTE
    Lo strumento GraphiQL e l'API GraphQL sono descritti 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 di AEM Headless
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4