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 richieste HTTP GET all'interno di componenti React esistenti. Fornisce inoltre una sfida opzionale per applicare le tue conoscenze headless AEM, competenze di codifica per migliorare l’applicazione client WKND.
Prerequisiti prerequisites
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 abbia 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) solution-package
È 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.
- 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 del pacchetto nel servizio Publish dell'AEM
Obiettivi objectives
In questa esercitazione imparerai a integrare le richieste di query persistenti nell'app di esempio WKND GraphQL React utilizzando Client headless AEM per JavaScript.
Clonare ed eseguire l'applicazione client di esempio clone-client-app
Per accelerare l’esercitazione, viene fornita un’app JS di React iniziale.
-
Clona l'archivio adobe/aem-guides-wknd-graphql:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Modifica il file
aem-guides-wknd-graphql/advanced-tutorial/.env.development
e impostaREACT_APP_HOST_URI
in modo che punti al servizio di pubblicazione AEM di destinazione.Se ti connetti a un’istanza Autore, aggiorna il metodo di autenticazione.
code language-plain # 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 note NOTE Le istruzioni di cui sopra consistono nel collegare l'app React al servizio AEM Publish, ma nel connettersi al servizio AEM Author è 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 l'SDK AEMaaCS mediante l'autenticazione di base. -
Apri un terminale ed esegui i comandi:
code language-shell $ 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.
http://localhost:3000
e NON contro il dominio del servizio Publish dell'AEM, rivedi Sotto l'hood dall'esercitazione di base.Rivedi il codice
Nel passaggio Esercitazione di base - Creare un'app React che utilizza le API GraphQL dell'AEM abbiamo esaminato e migliorato alcuni file chiave per acquisire competenze pratiche. 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
chiamauseAllAdventures(adventureActivity)
e qui l'argomentoadventureActivity
è di tipo attività. -
L'hook
useAllAdventures(adventureActivity)
è definito nel filesrc/api/usePersistedQueries.js
. In base al valoreadventureActivity
, determina la query persistente da chiamare. Se il valore non è nullo, chiamawknd-shared/adventures-by-activity
, altrimenti ottiene tutte le avventure disponibiliwknd-shared/adventures-all
. -
L'hook utilizza la funzione principale
fetchPersistedQuery(..)
che delega l'esecuzione della query aAEMHeadless
tramiteaemHeadlessClient.js
. -
L'hook restituisce inoltre solo i dati rilevanti della risposta GraphQL dell'AEM in
response.data?.adventureList?.items
, consentendo ai componenti della visualizzazione React diAdventures
di essere agnostici delle strutture JSON padre. -
Dopo l'esecuzione corretta della query, la funzione di rendering
AdventureListItem(..)
diAdventures.js
aggiunge l'elemento HTML per visualizzare le informazioni 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
chiamauseAdventureBySlug(slug)
e qui l'argomentoslug
è il parametro di query. -
Come sopra, l'hook
useAdventureBySlug(slug)
è definito nel filesrc/api/usePersistedQueries.js
. Chiama la query persistentewknd-shared/adventure-by-slug
delegando aAEMHeadless
tramiteaemHeadlessClient.js
. -
Dopo la corretta esecuzione della query, la funzione di rendering
AdventureDetailRender(..)
diAdventureDetail.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 comecode language-javascript ... 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
code language-javascript 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
code language-javascript 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
code language-javascript 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
code language-javascript 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 classecode language-css .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; }
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.
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.