DocumentazioneAEMTutorial su AEMTutorial di AEM Headless

Configurazione rapida AEM headless tramite SDK AEM locale setup

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 (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.

NOTE
È 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 dell'SDK AEM.

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

  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. Accedere con il nome utente admin e la password selezionati durante l'avvio iniziale dell'AEM (in genere admin).

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.

  1. 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.

  2. Dal menu Inizio AEM, 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 Inizio AEM, passa a Assets > File > Condiviso WKND > Inglese > Avventure.

    Visualizzazione cartelle delle 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.

  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 di Cloud Service, consulta la documentazione per sapere come distribuire una base di codice come il sito di riferimento WKND in un ambiente di Cloud Service.

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.

  1. 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

  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:

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

  4. Installa e avvia l’app React:

    code language-shell 
    $ 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 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.

    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 dell’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 i contenuti dell’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 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 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.

Passaggi successivi

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4