Configurazione rapida

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

Prerequisiti

È necessario installare localmente i seguenti strumenti:

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.

Installare l’SDK AEM

Questa esercitazione utilizza AEM come SDK di Cloud Service per esplorare AEM API GraphQL. 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 di Cloud Service AEM. Durante l’esercitazione sono incluse ulteriori note sull’utilizzo di un ambiente Cloud.

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

    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 una nuova finestra del browser dovrebbe essere aperta in http://localhost:4502.

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

Installare il contenuto di esempio e gli endpoint GraphQL

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

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 di AEM compilato per il sito WKND: aem-guides-wknd.all-x.x.x.zip.

    NOTA

    Assicurati di scaricare la versione standard compatibile con AEM come Cloud Service e non la versione classic.

  2. Dal menu AEM Avvio 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 AEM Start 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. Sono inclusi i tipi di file multimediali tradizionali come immagini e video, nonché i file multimediali 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 il contenuto può essere gestito 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 di Cloud Service, consulta la documentazione su come distribuire una base di codice come il sito WKND Reference in un ambiente di Cloud Service.

Installare l’app di esempio

Uno degli obiettivi di questa esercitazione è quello di mostrare come utilizzare AEM contenuto 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 Autore. ​Gli ambienti di authoring per impostazione predefinita richiedono l’autenticazione, in modo che l’app possa connettersi come admin utente. Si tratta di 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 del contenuto Avventura corrente da AEM.

  5. Fai clic su una delle immagini dell'avventura per visualizzare i dettagli dell'avventura. Viene AEM una richiesta 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 Inspector per Chrome per comprendere meglio la query e la risposta.

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. Passa al portale di distribuzione software > AEM come 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 AEM Avvio 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 AEM contenuti 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 sicura per impostazione predefinita, blocca le richieste di origini diverse, impedendo alle applicazioni non autorizzate di connettersi e visualizzare il contenuto.

Per consentire all’app React di questa esercitazione di interagire con AEM endpoint API GraphQL, 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. Vai alla Console web AEM SDK all'indirizzo http://localhost:4502/system/console.

    NOTA

    La console Web è disponibile solo nell’SDK. In un ambiente AEM come 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 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 è necessario 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