Reagire all'app

Le applicazioni di esempio sono un ottimo modo per esplorare le funzionalità headless di Adobe Experience Manager (AEM). Questa applicazione React illustra come eseguire query sul contenuto utilizzando AEM API GraphQL utilizzando query persistenti. Il client AEM Headless per JavaScript viene utilizzato per eseguire le query persistenti GraphQL che alimentano l'app.

Reagisci app con AEM Headless

Visualizza la codice sorgente su GitHub

A esercitazione completa passo passo descrive come è disponibile questa build dell’app React.

Prerequisiti

È necessario installare localmente i seguenti strumenti:

Requisiti AEM

L'applicazione React funziona con le seguenti opzioni di distribuzione AEM. Tutte le implementazioni richiedono l’ Sito WKND v2.0.0+ da installare.

L'applicazione React è progettata per connettersi a un Pubblicazione AEM Tuttavia, se nella configurazione dell’applicazione React viene fornita l’autenticazione, può generare contenuti da AEM Author.

Come utilizzare

  1. Clona il adobbe/aem-guides-wknd-graphql archivio:

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Modifica le aem-guides-wknd-graphql/react-app/.env.development file e set REACT_APP_HOST_URI per puntare al vostro AEM di destinazione.

    Aggiorna il metodo di autenticazione se ti connetti a un'istanza dell'autore.

    # Server namespace
    REACT_APP_HOST_URI=http://localhost:4503
    
    #AUTH (Choose one method)
    # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
    REACT_APP_AUTH_METHOD=basic
    
    # For Bearer auth, use DEV token (dev-token) from Cloud console
    REACT_APP_DEV_TOKEN=dev-token
    
    # For Service toke auth, provide path to service token file (download file from Cloud console)
    REACT_APP_SERVICE_TOKEN=auth/service-token.json
    
    # For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
    REACT_APP_BASIC_AUTH_USER=admin
    REACT_APP_BASIC_AUTH_PASS=admin
    
  3. Apri un terminale ed esegui i comandi:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Viene caricata una nuova finestra del browser http://localhost:3000

  5. Nell’applicazione deve essere visualizzato un elenco delle avventure del sito di riferimento WKND.

Il codice

Di seguito è riportato un riepilogo di come viene creata l'applicazione React, di come si connette a AEM Headless per recuperare il contenuto utilizzando le query persistenti GraphQL e di come tali dati vengono presentati. Il codice completo è disponibile all'indirizzo GitHub.

Query persistenti

Seguendo AEM best practice headless, l’applicazione React utilizza query persistenti AEM GraphQL per eseguire query sui dati di avventura. L'applicazione utilizza due query persistenti:

  • wknd/adventures-all query persistente, che restituisce tutte le avventure in AEM con un set abbreviato di proprietà. Questa query persistente guida l'elenco di avventura della visualizzazione iniziale.
# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}
  • wknd/adventure-by-slug query persistente, che restituisce una singola avventura per slug (proprietà personalizzata che identifica in modo univoco un’avventura) con un set completo di proprietà. Questa query persistente potenzia le visualizzazioni dei dettagli dell’avventura.
# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
  	}) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

Esegui query persistente GraphQL

Le query persistenti AEM vengono eseguite su HTTP GET e quindi, il Client AEM headless per JavaScript è utilizzato per eseguire le query GraphQL persistenti su AEM e carica il contenuto dell’avventura nell’app.

Ogni query persistente ha una funzione corrispondente in src/api/persistedQueries.js, che richiama in modo asincrono il punto finale del GET HTTP AEM e restituisce i dati dell’avventura.

Ogni funzione a sua volta richiama il aemHeadlessClient.runPersistedQuery(...), esecuzione della query GraphQL persistente.

// src/api/persistedQueries.js

/**
 * Queries a list of all Adventures using the persisted path "wknd-shared/adventures-all"
 * @returns {data, errors}
 */
export const getAllAdventures = async function() {
    return executePersistedQuery('wknd-shared/adventures-all');
}

...

/**
 * Uses the AEM Headless SDK to execute a query besed on a persistedQueryPath and optional query variables
 * @param {*} persistedQueryPath
 * @param {*} queryVariables
 * @returns
 */
 const executePersistedQuery = async function(persistedQueryPath, queryVariables) {

    let data;
    let errors;

    try {
        // AEM GraphQL queries are asynchronous, either await their return or use Promise-based .then(..) { ... } syntax
        const response = await aemHeadlessClient.runPersistedQuery(persistedQueryPath, queryVariables);
        // The GraphQL data is stored on the response's data field
        data = response.data;
        errors = response.errors ? mapErrors(response.errors) : undefined;
    } catch (e) {
        console.error(e.toJSON());
        errors = e;
    }

    return {data, errors};
}

Viste

L’applicazione React utilizza due visualizzazioni per presentare i dati dell’avventura nell’esperienza web.

  • src/components/Adventures.js

    Richiama getAllAdventures() da src/api/persistedQueries.js e visualizza le avventure restituite in un elenco.

  • src/components/AdventureDetail.js

    Richiama il getAdventureBySlug(..) utilizzando slug Param passato attraverso la selezione dell'avventura sul Adventures e visualizza i dettagli di una singola avventura.

Variabili di ambiente

Diversi variabili di ambiente vengono utilizzati per connettersi a un ambiente AEM. L’impostazione predefinita si connette a AEM Publish in esecuzione in http://localhost:4503. Per modificare la connessione AEM, aggiornare la .env.development file:

  • REACT_APP_HOST_URI=http://localhost:4502: Imposta su AEM host di destinazione
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json: Imposta il percorso dell'endpoint GraphQL. Questa app React non viene utilizzata perché utilizza solo query persistenti.
  • REACT_APP_AUTH_METHOD=: Il metodo di autenticazione preferito. Facoltativo, per impostazione predefinita non viene utilizzata alcuna autenticazione.
    • service-token: Utilizzare le credenziali del servizio per ottenere un token di accesso su AEM as a Cloud Service
    • dev-token: Usa token di sviluppo locale per AEM as a Cloud Service
    • basic: Utilizzare user/pass per lo sviluppo locale con AEM Author locale
    • Lascia vuoto per connettersi a AEM senza autenticazione
  • REACT_APP_AUTHORIZATION=admin:admin: Imposta le credenziali di autenticazione di base da utilizzare se ti connetti a un ambiente AEM Author (solo per lo sviluppo). Se ci si connette a un ambiente di pubblicazione, questa impostazione non è necessaria.
  • REACT_APP_DEV_TOKEN: Stringa token di sviluppo. Per connettersi all’istanza remota, oltre all’autenticazione di base (user:pass) puoi utilizzare l’autenticazione Bearer con il token DEV dalla console Cloud
  • REACT_APP_SERVICE_TOKEN: Percorso del file di credenziali del servizio. Per connettersi all’istanza remota, è possibile eseguire l’autenticazione anche con il token del servizio (file di download dalla Console per sviluppatori).

Richieste di AEM proxy

Quando si utilizza il server di sviluppo del webpack (npm start) il progetto si basa su un configurazione proxy utilizzo http-proxy-middleware. Il file è configurato in src/setupProxy.js e si basa su diverse variabili di ambiente personalizzate impostate in .env e .env.development.

Se ci si connette a un ambiente di authoring AEM, il corrispondente è necessario configurare il metodo di autenticazione.

Condivisione delle risorse tra le origini (CORS)

Questa applicazione React si basa su una configurazione CORS basata su AEM in esecuzione nell’ambiente AEM di destinazione e presuppone che l’app React venga eseguita su http://localhost:3000 in modalità di sviluppo. La Configurazione CORS fa parte del Sito WKND.

Configurazione CORS

In questa pagina