Configurazione rapida

Questo capitolo offre una configurazione rapida di un ambiente locale per vedere un’applicazione esterna utilizzare contenuti da AEM utilizzando le API GraphQL di AEM. I capitoli successivi dell’esercitazione si basano su questa configurazione.

Prerequisiti

È necessario installare localmente i seguenti strumenti:

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

Obiettivi

  1. Scarica e installa l’SDK AEM.
  2. Scarica e installa il contenuto di esempio dal sito WKND Reference.
  3. Scarica e installa un’app di esempio per utilizzare contenuti utilizzando le API GraphQL.

Installa l'SDK AEM

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

NOTA

È anche possibile seguire l’esercitazione con un ambiente AEM as a Cloud Service. Durante l’esercitazione sono incluse ulteriori note sull’utilizzo di un ambiente Cloud.

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

    Portale di distribuzione software

    ATTENZIONE

    La funzione GraphQL è abilitata per impostazione predefinita solo sull’SDK AEM dal 2021-02-04 o successivo.

  2. Decomprimi il download e copia il 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 jar Quickstart verrà avviato in modalità Autore. Il p4502 specifica che il server Quickstart verrà eseguito sulla porta 4502.

  4. Apri una nuova finestra terminale e passa alla cartella che contiene il file jar. Esegui il seguente comando per installare e avviare l'istanza AEM:

    $ 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 l'impostazione predefinita per lo sviluppo locale per ridurre la necessità di riconfigurare.

  6. Dopo alcuni minuti l'istanza AEM terminerà l'installazione e dovrebbe essere aperta una nuova finestra del browser in http://localhost:4502.

  7. Accedi con il nome utente admin e la password admin.

Installa contenuto di esempio e endpoint GraphQL

Il contenuto di esempio dal sito di riferimento WKND verrà installato per accelerare l'esercitazione. Il WKND è un brand fittizio in stile "life", spesso utilizzato in combinazione con la formazione AEM.

Il sito di riferimento WKND include configurazioni necessarie per esporre un endpoint GraphQL. In un'implementazione reale, segui i passaggi documentati per includere gli endpoint GraphQL nel progetto del cliente. Anche un CORS è stato incluso nel sito WKND. È necessaria una configurazione CORS per concedere l'accesso a un'applicazione esterna. Di seguito sono disponibili ulteriori informazioni su CORS.

  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 la versione classic.

  2. Dal menu Avvio AEM vai a Strumenti > Implementazione > Pacchetti.

    Passa a Pacchetti

  3. Fai clic su Carica pacchetto e scegli il pacchetto WKND scaricato nel passaggio precedente. Fai clic su Installa per installare il pacchetto.

  4. Dal menu Avvio AEM vai a Risorse > File.

  5. Fai clic tra le cartelle per passare a Sito WKND > Inglese > Avventure.

    Vista a cartelle delle avventure

    Questa è una cartella di tutte le risorse che comprendono le varie Avventure promosse dal marchio WKND. Questo include i tipi di contenuti multimediali tradizionali come immagini e video, nonché quelli specifici per AEM come Frammenti di contenuto.

  6. Fai clic sulla cartella Sci in discesa Wyoming e fai clic sulla scheda Sci in discesa per il frammento di contenuto del Wyoming :

    Scarica la scheda frammento di contenuto

  7. L’interfaccia utente dell’editor dei frammenti di contenuto si aprirà per l’avventura di sci in discesa nel Wyoming.

    Frammento di contenuto dello sci in discesa

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

    I frammenti di contenuto sono uno dei modi in cui i contenuti possono essere gestiti in AEM. I frammenti di contenuto sono contenuti riutilizzabili e non soggetti a presentazione composti da elementi di dati strutturati quali testo, testo RTF, date o riferimenti ad altri frammenti di contenuto. I frammenti di contenuto verranno esplorati più dettagliatamente più avanti nell’esercitazione.

  8. Fare clic su Annulla per chiudere il frammento. Sentitevi liberi di navigare in alcune delle altre cartelle ed esplorare l'altro contenuto Avventura.

NOTA

Se utilizzi un ambiente Cloud Service, consulta la documentazione su come distribuire una base di codice come il sito WKND Reference in un ambiente Cloud Service.

Installa l'app di esempio

Uno degli obiettivi di questa esercitazione è quello di mostrare come utilizzare contenuti AEM da un’applicazione esterna utilizzando le API GraphQL. Questa esercitazione utilizza un'app React di esempio che è stata parzialmente completata per accelerare l'esercitazione. Le stesse lezioni e gli stessi concetti si applicano alle app create con iOS, Android o qualsiasi altra piattaforma. L'app React è intenzionalmente semplice, per evitare inutili complessità; non si tratta di un’implementazione di riferimento.

  1. Apri una nuova finestra del terminale e duplica il ramo iniziale dell’esercitazione utilizzando Git:

    $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Nell’IDE che preferisci, apri il file .env.development in aem-guides-wknd-graphql/react-app/.env.development. Verifica che la riga REACT_APP_AUTHORIZATION non presenti alcun commento e che il file abbia un aspetto simile al seguente:

    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 corrisponda all'istanza AEM locale. In questo capitolo, collegheremo l'app React direttamente all'ambiente AEM Author. ​Gli ambienti di authoring per impostazione predefinita richiedono l’autenticazione, in modo che l’app possa connettersi come admin utente. Questa è una pratica comune durante lo sviluppo, in quanto ci consente di apportare rapidamente modifiche all’ambiente AEM e di visualizzarle immediatamente nell’app.

    NOTA

    In uno scenario di produzione, l'app si connetterà a un ambiente AEM Publish. Questo viene descritto più dettagliatamente nel capitolo Distribuzione di produzione .

  3. Passa alla cartella aem-guides-wknd-graphql/react-app . Installa e avvia l'app:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Una nuova finestra del browser dovrebbe avviare automaticamente l'app all'indirizzo http://localhost:3000.

    Reagisci con l’app iniziale

    Deve essere visualizzato un elenco dei contenuti Adventure correnti da AEM.

  5. Fai clic su una delle immagini dell'avventura per visualizzare i dettagli dell'avventura. Viene inviata una richiesta ad AEM per restituire i dettagli di un’avventura.

    Vista Dettagli avventura

  6. Utilizza gli strumenti di sviluppo del browser per controllare le richieste Network . Visualizza le richieste XHR e osserva più richieste POST a /content/graphql/global/endpoint.json, l’endpoint GraphQL configurato per AEM.

    Richiesta XHR di GraphQL Endpoint

  7. Puoi anche visualizzare i parametri e la risposta JSON controllando la richiesta di rete. Potrebbe essere utile installare un'estensione del browser come GraphQL Network per Chrome per comprendere meglio la query e la risposta.

    Estensione di rete GraphQL

    Utilizzo dell’estensione Chrome GraphQL Network

Modificare un frammento di contenuto

Ora che l’app React è in esecuzione, effettua un aggiornamento al contenuto in AEM e visualizza la modifica riflessa nell’app.

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

  2. Passa a Risorse > File > Sito WKND > Inglese > Avventure > Campo di surf di Bali.

    Cartella Bali Surf Camp

  3. Fai clic sul frammento di contenuto Bali Surf Camp per aprire l’Editor frammento di contenuto.

  4. Modifica il Titolo e la Descrizione dell'avventura

    Modificare un frammento di contenuto

  5. Fai clic su Salva per salvare le modifiche.

  6. Torna all'app React all'indirizzo http://localhost:3000 e aggiorna per visualizzare le modifiche:

    Bali Surf Camp Avventura aggiornata

Installare lo strumento GraphiQL

GraphiQL è uno strumento di sviluppo e necessario solo in ambienti di livello inferiore come uno sviluppo o un'istanza locale. L'IDE GraphiQL ti consente di testare e perfezionare rapidamente le query e i dati restituiti. GraphiQL fornisce inoltre un facile accesso alla documentazione, facilitando l'apprendimento e la comprensione dei metodi disponibili.

  1. Vai al portale di distribuzione software > AEM as a Cloud Service.

  2. Cerca "GraphiQL" (assicurati di includere i in GraphiQL.

  3. Scarica l'ultimo pacchetto di contenuti GraphiQL v.x.x.x

    Scarica il pacchetto GraphiQL

    Il file zip è un pacchetto AEM che può essere installato direttamente.

  4. Dal menu Avvio AEM vai a Strumenti > Implementazione > Pacchetti.

  5. Fai clic su Carica pacchetto e scegli il pacchetto scaricato nel passaggio precedente. Fai clic su Installa per installare il pacchetto.

    Installa pacchetto GraphiQL

  6. Passa all'IDE GraphiQL in http://localhost:4502/content/graphiql.html e inizia a esplorare le API GraphQL.

    NOTA

    Lo strumento GraphiQL e l'API GraphQL è esplorato più dettagliatamente più avanti nell'esercitazione.

Congratulazioni!

Congratulazioni, ora disponi di un’applicazione esterna che consuma contenuti AEM con GraphQL. Puoi controllare il codice nell’app React e continuare a provare a modificare i frammenti di contenuto esistenti.

Passaggi successivi

Nel capitolo successivo, Definizione dei modelli di frammento di contenuto, scopri come modellare il contenuto e creare uno schema con Modelli di frammento di contenuto. Esaminerete i modelli esistenti e creerete un nuovo modello. Inoltre, verranno illustrati i diversi tipi di dati che possono essere utilizzati per definire uno schema come parte del modello.

Configurazione CORS (Bonus)

AEM, essendo sicuro per impostazione predefinita, blocca le richieste tra origini diverse, impedendo alle applicazioni non autorizzate di connettersi e visualizzare il contenuto.

Per consentire all’app React di questa esercitazione di interagire con gli endpoint API GraphQL di AEM, nel progetto di riferimento del sito WKND è stata definita una configurazione di condivisione delle risorse tra origini diverse.

Configurazione della condivisione delle risorse tra le origini

Per visualizzare la configurazione distribuita:

  1. Passa alla console Web dell’SDK AEM all’indirizzo http://localhost:4502/system/console.

    NOTA

    La console Web è disponibile solo nell’SDK. In un ambiente AEM as a Cloud Service queste informazioni possono essere visualizzate tramite la Console per sviluppatori.

  2. Nel menu principale fai clic su OSGI > Configurazione per visualizzare tutte le configurazioni OSGi.

  3. Scorri verso il basso la pagina Condivisione risorse tra le origini di Adobe Granite.

  4. Fai clic sulla configurazione per com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.

  5. I campi seguenti sono stati aggiornati:

    • Origini ammesse (Regex): http://localhost:.*
      • Consente tutte le connessioni host locali.
    • Percorsi consentiti: /content/graphql/global/endpoint.json
      • Questo è l'unico endpoint GraphQL attualmente configurato. Come best practice, le configurazioni del CdR dovrebbero essere il più restrittive possibile.
    • Metodi consentiti: GET, HEAD, POST
      • Solo POST è richiesto per GraphQL, tuttavia gli altri metodi possono essere utili quando interagisci con AEM in modo headless.
    • Intestazioni supportate: È stato aggiunto authorization per passare l’autenticazione di base nell’ambiente di authoring.
    • Supporta le credenziali: Yes
      • Questo è necessario in quanto la nostra app React comunicherà con gli endpoint GraphQL protetti sul servizio AEM Author.

Questa configurazione e gli endpoint GraphQL fanno parte del progetto WKND AEM. Puoi visualizzare tutte le configurazioni di OSGi qui.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now