Client-Anwendungsintegration
Im vorherigen Kapitel haben Sie mit dem GraphiQL-Explorer persistierte Abfragen erstellt und aktualisiert.
Dieses Kapitel führt Sie durch die Schritte, die zur Integration der persistierten Abfragen in die WKND-Client-Anwendung (auch als WKND-App bezeichnet) mithilfe von HTTP-GET-Anfragen innerhalb vorhandener React-Komponenten erforderlich sind. Es umfasst außerdem eine optionale Herausforderung: Ihr erworbenes AEM Headless-Wissen und Programmier-Know-how zur Erweiterung der WKND-Client-Anwendung anzuwenden.
Voraussetzungen prerequisites
Dieses Dokument ist Teil eines mehrteiligen Tutorials. Bevor Sie mit diesem Kapitel fortfahren, vergewissern Sie sich, dass Sie die vorherigen Kapitel abgeschlossen haben. Die WKND-Client-Anwendung stellt eine Verbindung zum AEM-Veröffentlichungs-Service her. Daher ist es wichtig, dass Sie Folgendes im AEM-Veröffentlichungs-Service veröffentlicht haben.
- Projektkonfigurationen
- GraphQL-Endpunkte
- Inhaltsfragmentmodelle
- Erstellte Inhaltsfragmente
- GraphQL – Persistierte Abfragen
Die IDE-Screenshots in diesem Kapitel stammen von Visual Studio Code.
Kapitel 1–4 Lösungspaket (optional) solution-package
Es ist ein Lösungspaket zur Installation verfügbar, das die Schritte in der AEM-Benutzeroberfläche für die Kapitel 1–4 abschließt. Dieses Paket ist nicht erforderlich, wenn die vorherigen Kapitel abgeschlossen wurden.
- Laden Sie die Datei Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip herunter.
- Navigieren Sie in AEM zu Tools > Bereitstellung > Pakete, um auf Package Manager zuzugreifen.
- Laden Sie das im vorherigen Schritt heruntergeladene Paket (die ZIP-Datei) hoch und installieren Sie es.
- Replizieren Sie das Paket für den AEM-Veröffentlichungs-Service.
Ziele objectives
In diesem Tutorial erfahren Sie, wie Sie Anfragen für persistierte Abfragen mit dem AEM Headless-Client für JavaScript in die beispielhafte WKND GraphQL React-App integrieren.
Klonen und Ausführen der beispielhaften Client-Anwendung clone-client-app
Um während des Tutorials Zeit zu sparen, wird eine React-JS-App als Start bereitgestellt.
-
Klonen Sie das Repository adobe/aem-guides-wknd-graphql:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Bearbeiten Sie die Datei
aem-guides-wknd-graphql/advanced-tutorial/.env.development
und legen SieREACT_APP_HOST_URI
so fest, dass auf den AEM Publish-Ziel-Service verwiesen wird.Aktualisieren Sie die Authentifizierungsmethode, wenn Sie eine Verbindung zu einer Autoreninstanz herstellen.
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 Die obigen Anweisungen sehen vor, die React-App mit dem AEM-Veröffentlichungs-Service zu verbinden. Um allerdings eine Verbindung zum AEM-Autoren-Service herzustellen, ist ein lokales Entwicklungs-Token für Ihre AEM as a Cloud Service-Zielumgebung erforderlich. Es ist ebenfalls möglich, die App mit einer lokalen Autoreninstanz über das AEMaaCS-SDK mittels einfacher Authentifizierung zu verbinden. -
Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus:
code language-shell $ cd aem-guides-wknd-graphql/advanced-tutorial $ npm install $ npm start
-
Ein neues Browser-Fenster sollte unter http://localhost:3000 geladen werden.
-
Tippen Sie auf Camping > Yosemite Backpacking, um Details zum Yosemite Backpacking-Adventure anzuzeigen.
-
Öffnen Sie die Entwickler-Tools des Browsers und überprüfen Sie die
XHR
-AnfrageEs sollten
GET
-Anfragen an den GraphQL-Endpunkt mit dem Konfigurationsnamen des Projekts (wknd-shared
), dem Namen der persistierten Abfrage (adventure-by-slug
), dem Variablennamen (slug
), dem Wert (yosemite-backpacking
) und den Sonderzeichen-Codierungen zu sehen sein.
http://localhost:3000
und NICHT an die Domain des AEM-Veröffentlichungs-Service gerichtet ist, finden Sie im grundlegenden Tutorial unter Unter der Haube weitere Informationen dazu.Überprüfen des Codes
Im Schritt zum Erstellen einer React-App mit Nutzung von AEM GraphQL-APIs des grundlegenden Tutorials hatten wir einige Schlüsseldateien überprüft und erweitert, um praktische Kenntnisse zu vermitteln. Bevor Sie die WKND-App verbessern, sehen Sie sich diese Schlüsseldateien an.
Überprüfen der React-Komponente Adventures
Die Hauptansicht der WKND React-App entspricht der Liste aller Adventures. Sie können diese Adventures nach Aktivitätstyp filtern, z. B. Camping, Cycling. Diese Ansicht wird von der Adventures
-Komponente gerendert. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:
-
src/components/Adventures.js
ruft den HookuseAllAdventures(adventureActivity)
auf, wobei hier das ArgumentadventureActivity
für den Aktivitätstyp steht. -
Der Hook
useAllAdventures(adventureActivity)
ist in der Dateisrc/api/usePersistedQueries.js
definiert. Basierend auf dem Wert vonadventureActivity
wird bestimmt, welche persistierte Abfrage aufgerufen werden soll. Sofern der Wert nicht null ist, wirdwknd-shared/adventures-by-activity
aufgerufen, andernfalls alle verfügbaren Adventures (wknd-shared/adventures-all
). -
Der Hook verwendet als Hauptfunktion
fetchPersistedQuery(..)
, die die Ausführung der Abfrage überaemHeadlessClient.js
anAEMHeadless
delegiert. -
Der Hook gibt auch nur die relevanten Daten aus der AEM GraphQL-Antwort unter
response.data?.adventureList?.items
zurück, sodass die React-AnsichtskomponenteAdventures
unabhängig von den übergeordneten JSON-Strukturen sein kann. -
Bei erfolgreicher Ausführung der Abfrage fügt die Render-Funktion
AdventureListItem(..)
vonAdventures.js
ein HTML-Element hinzu, um Bild-, Reisedauer-, Preis- und Titelinformationen anzuzeigen.
Überprüfen der React-Komponente AdventureDetail
Die React-Komponente AdventureDetail
rendert die Details des Adventures. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:
-
src/components/AdventureDetail.js
ruft den HookuseAdventureBySlug(slug)
auf, wobei hier das Argumentslug
für den Abfrageparameter steht. -
Wie oben ist der Hook
useAdventureBySlug(slug)
in der Dateisrc/api/usePersistedQueries.js
definiert. Die persistierte Abfragewknd-shared/adventure-by-slug
wird durch Delegieren überaemHeadlessClient.js
anAEMHeadless
aufgerufen. -
Bei erfolgreicher Ausführung der Abfrage fügt die Render-Funktion
AdventureDetailRender(..)
vonAdventureDetail.js
ein HTML-Element hinzu, um Details zum Adventure anzuzeigen.
Erweitern des Codes
Verwenden der persistierten Abfrage adventure-details-by-slug
Im vorherigen Kapitel haben wir die persistierte Abfrage adventure-details-by-slug
erstellt. Diese liefert zusätzliche Informationen zum Adventure, z. B. zum Ort, Lehrpersonal und Administrator-Team. Ersetzen Sie adventure-by-slug
durch die persistierte Abfrage adventure-details-by-slug
, um diese zusätzlichen Informationen zu rendern.
-
Öffnen Sie
src/api/usePersistedQueries.js
. -
Suchen Sie die Funktion
useAdventureBySlug()
und aktualisieren Sie die Abfrage wie folgt:
...
// 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
);
...
Anzeigen zusätzlicher Informationen
-
Um weitere Adventure-Informationen anzuzeigen, öffnen Sie
src/components/AdventureDetail.js
. -
Suchen Sie die Funktion
AdventureDetailRender(..)
und aktualisieren Sie die Rückgabefunktion wie folgt:code language-javascript ... return (<> <h1 className="adventure-detail-title">{title}</h1> <div className="adventure-detail-info"> <LocationInfo {...location} /> ... <Location {...location} /> <Administrator {...administrator} /> <InstructorTeam {...instructorTeam} /> </div> </>); ...
-
Definieren Sie auch die entsprechenden Render-Funktionen:
LocationInfo
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> </> ); }
Speicherort
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> </>); }
InstructorTeam
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> </>); }
Administrator
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> </>); }
Definieren neuer Stile
-
Öffnen Sie
src/components/AdventureDetail.scss
und fügen Sie die folgenden Klassendefinitionen hinzu:code 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; }
Nach Abschluss der oben genannten Verbesserungen sieht die WKND-App wie folgt aus und die Entwickler-Tools des Browsers zeigen den Aufruf der persisenten Abfrage adventure-details-by-slug
an.
Erweiterungsproblem (optional)
Die Hauptansicht der WKND React-App ermöglicht es Ihnen, diese Adventures nach Aktivitätstyp wie Camping, Cycling zu filtern. Das WKND-Business-Team wünscht sich jedoch eine zusätzliche standortbasierte Filterfunktion. Die Anforderungen lauten:
- In der Hauptansicht der WKND-App ist oben links oder rechts ein Filterssymbol für Standort hinzuzufügen.
- Durch Klicken auf das Filtersymbol für Standorte sollte die Liste der Standorte angezeigt werden.
- Durch Klicken auf eine gewünschte Standortoption in der Liste sollten nur die dazu passenden Adventures angezeigt werden.
- Wenn nur ein Adventure passend ist, wird die Ansicht mit den Adventure-Details angezeigt.
Herzlichen Glückwunsch
Herzlichen Glückwunsch! Sie haben nun die Integration abgeschlossen und die persistierten Abfragen in die WKND-Beispielanwendung implementiert.