Integrazione delle applicazioni client

Nel capitolo precedente, hai creato e aggiornato le query persistenti utilizzando GraphiQL Explorer.

Questo capitolo illustra i passaggi necessari per integrare le query persistenti con l’applicazione client WKND (o app WKND) utilizzando le richieste HTTP GET all’interno di Componenti React. Fornisce inoltre una sfida opzionale per applicare le tue conoscenze headless AEM, competenze di codifica per migliorare l’applicazione client WKND.

Prerequisiti

Questo documento fa parte di un'esercitazione in più parti. Prima di procedere con questo capitolo, assicurati che i capitoli precedenti siano stati completati. L’applicazione client WKND si connette al servizio di pubblicazione AEM, pertanto è importante che tu ha pubblicato quanto segue nel servizio di pubblicazione dell'AEM.

  • Configurazioni progetto
  • Endpoint GraphQL
  • Modelli per frammenti di contenuto
  • Frammenti di contenuto creati
  • Query persistenti GraphQL

Il Le schermate IDE di questo capitolo provengono da Codice di Visual Studio

Capitolo 1-4 Pacchetto di soluzioni (facoltativo)

È disponibile un pacchetto di soluzione da installare che completa i passaggi descritti nell’interfaccia utente dell’AEM per i capitoli 1-4. Questo pacchetto è non necessario se i capitoli precedenti sono stati completati.

  1. Scarica Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
  2. In AEM, vai a Strumenti > Distribuzione > Pacchetti per accedere Gestione pacchetti.
  3. Carica e installa il pacchetto (file zip) scaricato nel passaggio precedente.
  4. Replica il pacchetto nel servizio di pubblicazione AEM

Obiettivi

In questo tutorial, scopri come integrare le richieste di query persistenti nell’app di esempio WKND GraphQL React utilizzando Client AEM headless per JavaScript.

Clonare ed eseguire l'applicazione client di esempio

Per accelerare l’esercitazione, viene fornita un’app JS di React iniziale.

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

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Modifica il aem-guides-wknd-graphql/advanced-tutorial/.env.development file e set REACT_APP_HOST_URI per puntare al servizio di pubblicazione AEM target.

    Se ti connetti a un’istanza Autore, aggiorna il metodo di autenticazione.

    # Server namespace
REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com

#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=

# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_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=
REACT_APP_BASIC_AUTH_PASS=

    Ambiente di sviluppo app React

    NOTA

    Le istruzioni precedenti consistono nel collegare l’app React a Servizio di pubblicazione AEM, tuttavia per connettersi al Servizio AEM Author ottenere un token di sviluppo locale per l’ambiente di destinazione as a Cloud Service per AEM.

    È anche possibile collegare l’app a una istanza Autore locale con SDK AEMaaCS utilizzo dell’autenticazione di base.

  3. Apri un terminale ed esegui i comandi:

    $ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start

  4. Viene caricata una nuova finestra del browser http://localhost:3000

  5. Tocca Campeggio > Yosemite Backpacking per visualizzare i dettagli dell’avventura Yosemite Backpacking.

    Schermata Backpacking di Yosemite

  6. Apri gli strumenti di sviluppo del browser e controlla XHR richiesta

    POST GraphQL

    Dovresti vedere GET richieste all’endpoint GraphQL con nome di configurazione del progetto (wknd-shared), nome query persistente (adventure-by-slug), nome variabile (slug), valore (yosemite-backpacking) e codifiche per caratteri speciali.

IMPORTANTE

Se ti stai chiedendo perché la richiesta API di GraphQL viene effettuata contro http://localhost:3000 e NON rispetto al dominio del servizio di pubblicazione AEM, rivedi Sotto il cappuccio dall'esercitazione di base.

Rivedi il codice

In Tutorial di base: creare un’app React che utilizza le API GraphQL dell’AEM fase avevamo rivisto e migliorato alcuni file chiave per ottenere competenze pratiche. Prima di migliorare l’app WKND, controlla i file chiave.

Revisione Adventures Componente React

La vista principale dell’app WKND React è l’elenco di tutte le avventure e puoi filtrarle in base al tipo di attività, ad esempio Campeggio, Ciclismo. Il rendering di questa visualizzazione viene eseguito da Adventures componente. Di seguito sono riportati i principali dettagli di implementazione:

  • Il src/components/Adventures.js chiamate useAllAdventures(adventureActivity) hook e here adventureActivity l'argomento è il tipo di attività.

  • Il useAllAdventures(adventureActivity) hook definito in src/api/usePersistedQueries.js file. In base a adventureActivity determina quale query persistente chiamare. Se il valore non è nullo, chiama wknd-shared/adventures-by-activity, altrimenti ottiene tutte le avventure disponibili wknd-shared/adventures-all.

  • L'hook utilizza il fetchPersistedQuery(..) funzione che delega l’esecuzione della query a AEMHeadless tramite aemHeadlessClient.js.

  • L’hook restituisce inoltre solo i dati pertinenti della risposta GraphQL dell’AEM al response.data?.adventureList?.items, consentendo Adventures I componenti della vista React devono essere agnostici delle strutture JSON principali.

  • In caso di esecuzione corretta della query, il AdventureListItem(..) funzione di rendering da Adventures.js aggiunge un elemento HTML per visualizzare Immagine, durata viaggio, prezzo e titolo informazioni.

Revisione AdventureDetail Componente React

Il AdventureDetail Il componente React esegue il rendering dei dettagli dell’avventura. Di seguito sono riportati i principali dettagli di implementazione:

  • Il src/components/AdventureDetail.js chiamate useAdventureBySlug(slug) hook e here slug è un parametro di query.

  • Come sopra, il useAdventureBySlug(slug) hook definito in src/api/usePersistedQueries.js file. Chiama wknd-shared/adventure-by-slug query persistente tramite delega a AEMHeadless tramite aemHeadlessClient.js.

  • In caso di esecuzione corretta della query, il AdventureDetailRender(..) funzione di rendering da AdventureDetail.js aggiunge l’elemento HTML per visualizzare i dettagli Adventure.

Migliorare il codice

Utilizzare adventure-details-by-slug query persistente

Nel capitolo precedente, abbiamo creato adventure-details-by-slug persistente, fornisce informazioni aggiuntive su Adventure come posizione, team di istruttori e amministratore. Sostituiamo adventure-by-slug con adventure-details-by-slug query persistente per il rendering di queste informazioni aggiuntive.

  1. Apri src/api/usePersistedQueries.js.

  2. Individuare la funzione useAdventureBySlug() e aggiorna query come

 ...

 // Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
 response = await fetchPersistedQuery(
 "wknd-shared/adventure-details-by-slug",
 queryParameters
 );

 ...

Visualizza informazioni aggiuntive

  1. Per visualizzare ulteriori informazioni sull'avventura, apri src/components/AdventureDetail.js

  2. Individuare la funzione AdventureDetailRender(..) e aggiorna funzione di ritorno come

    ...

return (<>
    <h1 className="adventure-detail-title">{title}</h1>
    <div className="adventure-detail-info">

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

  3. Definisci anche le funzioni di rendering corrispondenti:

    LocationInfo

    function LocationInfo({name}) {

    if (!name) {
        return null;
    }

    return (
        <>
            <div className="adventure-detail-info-label">Location</div>
            <div className="adventure-detail-info-description">{name}</div>
        </>
    );

}

    Dove si trova

    function Location({ contactInfo }) {

    if (!contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-location'>
                <h2>Where we meet</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
            </div>
        </>);
}

    Team istruttore

    function InstructorTeam({ _metadata }) {

    if (!_metadata) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-team'>
                <h2>Instruction Team</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
            </div>
        </>);
}

    Amministratore

    function Administrator({ fullName, contactInfo }) {

    if (!fullName || !contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-administrator'>
                <h2>Administrator</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Name: {fullName}</div>
                <div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
            </div>
        </>);
}

Definire nuovi stili

  1. Apri src/components/AdventureDetail.scss e aggiungi le seguenti definizioni di classe

    .adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}

.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}
SUGGERIMENTO

I file aggiornati sono disponibili in WKND sulle guide dell’AEM - GraphQL progetto, vedi Esercitazione avanzata sezione.

Dopo aver completato i miglioramenti di cui sopra, l’app WKND si presenta come di seguito e gli strumenti per sviluppatori del browser mostrano adventure-details-by-slug chiamata di query persistente.

APP WKND migliorata

Sfida di miglioramento (opzionale)

La vista principale dell’app WKND React ti consente di filtrare queste avventure in base al tipo di attività, ad esempio Campeggio, Ciclismo. Tuttavia, il team aziendale WKND desidera avere un Posizione funzionalità di filtro basata su. I requisiti sono:

  • Nella visualizzazione principale dell’app WKND, nell’angolo in alto a sinistra o a destra, aggiungi Posizione icona di filtro.
  • Clic Posizione l’icona del filtro deve visualizzare l’elenco delle posizioni.
  • Facendo clic su un’opzione di posizione desiderata dall’elenco, vengono visualizzate solo le avventure corrispondenti.
  • Se esiste una sola avventura corrispondente, viene visualizzata la vista Dettagli avventura.

Congratulazioni

Congratulazioni. Ora hai completato l’integrazione e l’implementazione delle query persistenti nell’app WKND di esempio.

In questa pagina