Documentazione AEM Tutorial su AEM Tutorial di AEM Headless

Integrazione delle applicazioni client

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Si applica a:
Experience Manager as a Cloud Service

Argomenti:
Frammenti di contenuto

Creato per:

Intermedio
Sviluppatore

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 dei componenti React esistenti. Fornisce inoltre una sfida opzionale per applicare le tue conoscenze headless di 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 abbiate pubblicato quanto segue nel servizio di pubblicazione AEM.

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

Le schermate dell'IDE in questo capitolo provengono da Visual Studio Code

Capitolo 1-4 Pacchetto di soluzioni (facoltativo)

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

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

Obiettivi

In questa esercitazione imparerai a integrare le richieste di query persistenti nell'app di esempio WKND GraphQL React utilizzando AEM Headless Client for JavaScript.

Clonare ed eseguire l'applicazione client di esempio

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

Clona l'archivio adobe/aem-guides-wknd-graphql:

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

Modifica il file aem-guides-wknd-graphql/advanced-tutorial/.env.development e imposta REACT_APP_HOST_URI in modo che punti al servizio AEM Publish di destinazione.

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=
NOTE
Le istruzioni precedenti indicano di connettere l'app React al servizio di pubblicazione AEM. Tuttavia, per connettersi al servizio di authoring AEM è necessario ottenere un token di sviluppo locale per l'ambiente AEM as a Cloud Service di destinazione.
È inoltre possibile connettere l'app a un'istanza Autore locale utilizzando AEMaaCS SDK utilizzando l'autenticazione di base.

Apri un terminale ed esegui i comandi:

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

Una nuova finestra del browser deve essere caricata su http://localhost:3000
Tocca Camping > Yosemite Backpacking per visualizzare i dettagli dell'avventura di Yosemite Backpacking.
Apri gli strumenti per sviluppatori del browser ed esamina la richiesta XHR

Dovrebbero essere presenti GET richieste all'endpoint GraphQL con il nome di configurazione del progetto (wknd-shared), il nome di query persistente (adventure-by-slug), il nome della variabile (slug), il valore (yosemite-backpacking) e codifiche di caratteri speciali.

IMPORTANT

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

Rivedi il codice

Nel passaggio Esercitazione di base - Creare un'app React che utilizza le API GraphQL di AEM abbiamo rivisto e migliorato alcuni file chiave per acquisire esperienza pratica. Prima di migliorare l’app WKND, controlla i file chiave.

Rivedi `Adventures` componente React

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

L'hook src/components/Adventures.js chiama useAllAdventures(adventureActivity) e qui l'argomento adventureActivity è di tipo attività.
L'hook useAllAdventures(adventureActivity) è definito nel file src/api/usePersistedQueries.js. In base al valore adventureActivity, determina la query persistente da 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 la funzione principale fetchPersistedQuery(..) che delega l'esecuzione della query a AEMHeadless tramite aemHeadlessClient.js.
L'hook restituisce inoltre solo i dati rilevanti della risposta di AEM GraphQL in response.data?.adventureList?.items, consentendo ai componenti della visualizzazione React di Adventures di essere agnostici delle strutture JSON padre.
Dopo la corretta esecuzione della query, la funzione di rendering AdventureListItem(..) di Adventures.js aggiunge l'elemento HTML per visualizzare le informazioni relative a Immagine, Durata viaggio, Prezzo e Titolo.

Rivedi `AdventureDetail` componente React

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

L'hook src/components/AdventureDetail.js chiama useAdventureBySlug(slug) e qui l'argomento slug è il parametro di query.
Come sopra, l'hook useAdventureBySlug(slug) è definito nel file src/api/usePersistedQueries.js. Chiama la query persistente wknd-shared/adventure-by-slug delegando a AEMHeadless tramite aemHeadlessClient.js.
Dopo la corretta esecuzione della query, la funzione di rendering AdventureDetailRender(..) di AdventureDetail.js aggiunge l'elemento HTML per visualizzare i dettagli Adventure.

Migliorare il codice

Usa query persistente `adventure-details-by-slug`

Nel capitolo precedente è stata creata la query persistente adventure-details-by-slug, che fornisce informazioni aggiuntive su Adventure come location, INSTRUCTorTeam e administrator. Sostituiamo adventure-by-slug con adventure-details-by-slug query persistente per eseguire il rendering di queste informazioni aggiuntive.

Apri src/api/usePersistedQueries.js.
Individuare la funzione useAdventureBySlug() e aggiornare la 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

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

Individuare la funzione AdventureDetailRender(..) e aggiornare la funzione restituita come

...

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

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

Definisci anche le funzioni di rendering corrispondenti:

InformazioniPosizione

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

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

TIP

I file aggiornati sono disponibili nel progetto AEM Guides WKND - GraphQL. Vedere la sezione Esercitazione avanzata.

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

APP WKND avanzata

Sfida di miglioramento (opzionale)

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

Nella visualizzazione principale dell'app WKND, nell'angolo in alto a sinistra o a destra, aggiungi l'icona di filtro Posizione.
Facendo clic sull'icona di filtro Posizione verrà visualizzato 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.

Complimenti

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

recommendation-more-help