Client-Anwendungsintegration

Im vorherigen Kapitel haben Sie mit dem GraphiQL Explorer persistente Abfragen erstellt und aktualisiert.

Dieses Kapitel führt Sie durch die Schritte, die zur Integration der persistenten Abfragen in die WKND-Client-Anwendung (auch WKND App genannt) mithilfe von HTTP-GET in bestehende Anwendungen erforderlich sind. React-Komponenten. Es bietet außerdem eine optionale Herausforderung, Ihre AEM Headless-Lernprozesse anzuwenden und das Know-how zu programmieren, um die WKND-Client-Anwendung zu verbessern.

Voraussetzungen

Dieses Dokument ist Teil eines mehrteiligen Tutorials. Bevor Sie mit diesem Kapitel fortfahren, vergewissern Sie sich bitte, dass die vorherigen Kapitel abgeschlossen sind. Die WKND-Clientanwendung stellt eine Verbindung zu AEM Veröffentlichungsdienst her. Daher ist es wichtig, dass Sie hat Folgendes in den AEM Veröffentlichungsdienst veröffentlicht.

• Projektkonfigurationen
• GraphQL-Endpunkte
• Inhaltsfragmentmodelle
• Erstellte Inhaltsfragmente
• GraphQL-persistente Abfragen

Die IDE-Screenshots in diesem Kapitel stammen von Visual Studio-Code

Kapitel 1-4 Lösungspaket (optional)

Es ist ein Lösungspaket verfügbar, das installiert wird, 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 sind.

1. Download Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
2. Navigieren Sie AEM zu Instrumente > Implementierung > Pakete für den Zugriff Package Manager.
3. Laden Sie das im vorherigen Schritt heruntergeladene Paket (ZIP-Datei) hoch und installieren Sie es.
4. Replizieren Sie das Paket auf den AEM Publish-Dienst

Ziele

In diesem Tutorial erfahren Sie, wie Sie die Anforderungen für persistente Abfragen mithilfe der AEM Headless-Client für JavaScript.

Klonen und Ausführen der Beispiel-Client-Anwendung

Um das Tutorial zu beschleunigen, wird eine Starter-React-JS-App bereitgestellt.

1. Klonen Sie die adobe/aem-guides-wknd-graphql repository:

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

2. Bearbeiten Sie die aem-guides-wknd-graphql/advanced-tutorial/.env.development Datei und Set REACT_APP_HOST_URI , um auf Ihren Ziel-AEM-Veröffentlichungsdienst zu verweisen.

   Aktualisieren Sie die Authentifizierungsmethode, wenn Sie eine Verbindung zu einer Autoreninstanz herstellen.

   # 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=
   

   

   HINWEIS

   Die obigen Anweisungen sind, die React-App mit der AEM-Veröffentlichungsdienst, jedoch um eine Verbindung mit der AEM-Autorendienst ein lokales Entwicklungstoken für Ihre Ziel-AEM as a Cloud Service Umgebung abrufen.

   Es ist auch möglich, die App mit einem lokale Autoreninstanz mit dem AEMaaCS-SDK einfache Authentifizierung verwenden.

3. Öffnen Sie ein Terminal und führen Sie die Befehle aus:

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

4. Ein neues Browser-Fenster sollte in http://localhost:3000

5. Tippen Campingplatz > Yosemite Backpacken , um die Yosemite Backpacking Abenteuerdetails zu sehen.

   

6. Öffnen Sie die Entwicklertools des Browsers und überprüfen Sie die XHR Anfrage

   

   Sie sollten GET Anforderungen an den GraphQL-Endpunkt mit dem Projektnamen config (wknd-shared), persistenter Abfragename (adventure-by-slug), Variablenname (slug), Wert (yosemite-backpacking) und Sonderzeichen-Kodierungen.

Überprüfen des Codes

Im Grundlegendes Tutorial - Erstellen einer React-App, die AEM GraphQL-APIs verwendet Schritt hatten wir einige Schlüsseldateien überprüft und erweitert, um praktische Kenntnisse zu erhalten. Bevor Sie die WKND-App verbessern, überprüfen Sie die Schlüsseldateien.

• Überprüfen des AEMHeadless-Objekts

• Implementieren, um AEM von GraphQL persistente Abfragen auszuführen

Überprüfen Adventures React-Komponente

Die Hauptansicht der WKND React-App ist die Liste aller Abenteuer und Sie können diese Abenteuer nach Aktivitätstyp filtern, z. B. Camping, Radfahren. Diese Ansicht wird von der Adventures -Komponente. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:

• Die src/components/Adventures.js Aufrufe useAllAdventures(adventureActivity) Hook und hier adventureActivity -Argument ist der Aktivitätstyp.

• Die useAllAdventures(adventureActivity) Der Erweiterungspunkt wird im Abschnitt src/api/usePersistedQueries.js -Datei. Basierend auf adventureActivity -Wert bestimmt, welche persistente Abfrage aufgerufen werden soll. Wenn kein Nullwert angegeben wird, wird wknd-shared/adventures-by-activity, sonst erhalten alle verfügbaren Abenteuer wknd-shared/adventures-all.

• Der Haken verwendet das Haupt fetchPersistedQuery(..) -Funktion, die die Ausführung der Abfrage an AEMHeadless via aemHeadlessClient.js.

• Der Erweiterungspunkt gibt auch nur die relevanten Daten aus der AEM GraphQL-Antwort zurück unter response.data?.adventureList?.items, wodurch die Adventures React-View-Komponenten müssen unabhängig von den übergeordneten JSON-Strukturen sein.

• Bei erfolgreicher Ausführung der Abfrage wird die AdventureListItem(..) Render-Funktion von Adventures.js fügt HTML-Element hinzu, um die Bild, Reisedauer, Preis und Titel Informationen.

Überprüfen AdventureDetail React-Komponente

Die AdventureDetail Die React-Komponente rendert die Details des Abenteuers. Im Folgenden finden Sie die wichtigsten Implementierungsdetails:

• Die src/components/AdventureDetail.js Aufrufe useAdventureBySlug(slug) Hook und hier slug -Argument ist Abfrageparameter.

• Wie oben, wird die useAdventureBySlug(slug) Der Erweiterungspunkt wird im Abschnitt src/api/usePersistedQueries.js -Datei. Sie ruft wknd-shared/adventure-by-slug persistente Abfrage durch Delegieren an AEMHeadless via aemHeadlessClient.js.

• Bei erfolgreicher Ausführung der Abfrage wird die AdventureDetailRender(..) Render-Funktion von AdventureDetail.js fügt ein HTML-Element hinzu, um die Details des Abenteuers anzuzeigen.

Verbessern des Codes

Verwendung adventure-details-by-slug persistente Abfrage

Im vorherigen Kapitel haben wir die adventure-details-by-slug persistente Abfrage enthält, werden zusätzliche Abenteuerinformationen bereitgestellt, z. B. location, lehrerteam und administrator. Lasst uns ersetzen adventure-by-slug mit adventure-details-by-slug persistente Abfrage zum Rendern dieser zusätzlichen Informationen.

1. Öffnen Sie src/api/usePersistedQueries.js.

2. Suchen Sie die Funktion useAdventureBySlug() und aktualisieren Sie die Abfrage als

 ...

 // 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
 );

 ...

Zusätzliche Informationen anzeigen

1. Um weitere Abenteuerinformationen anzuzeigen, öffnen Sie src/components/AdventureDetail.js

2. Suchen Sie die Funktion AdventureDetailRender(..) und aktualisieren Sie die Rückgabefunktion als

   ...
   
   return (<>
       <h1 className="adventure-detail-title">{title}</h1>
       <div className="adventure-detail-info">
   
           <LocationInfo {...location} />
   
           ...
   
           <Location {...location} />
   
           <Administrator {...administrator} />
   
           <InstructorTeam {...instructorTeam} />
   
       </div>
   </>);
   
   ...
   

3. Definieren Sie auch die entsprechenden Renderfunktionen:

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

   Speicherort

   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

   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

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

Neue Stile definieren

1. Öffnen src/components/AdventureDetail.scss und fügen Sie die folgenden Klassendefinitionen hinzu

   .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 Entwicklertools des Browsers zeigen adventure-details-by-slug persistenter Abfrageaufruf.

Verbesserungsproblem (optional)

Die Hauptansicht der WKND React-App ermöglicht es Ihnen, diese Abenteuer nach Aktivitätstyp wie Camping, Radfahren. Das WKND-Geschäftsteam möchte jedoch eine zusätzliche Standort Filterfunktion. Die Anforderungen sind

• Fügen Sie in der Hauptansicht der WKND-App oben links oder rechts hinzu Standort Filtersymbol.
• Klicken Standort über das Filtersymbol sollte die Liste der Standorte angezeigt werden.
• Wenn Sie in der Liste auf eine gewünschte Positionsoption klicken, sollte nur die passenden Abenteuer angezeigt werden.
• Wenn nur ein Abenteuer übereinstimmt, wird die Ansicht Abenteuer Details angezeigt.

Herzlichen Glückwunsch

Herzlichen Glückwunsch! Sie haben die Integration abgeschlossen und die persistenten Abfragen in die WKND-Beispielanwendung implementiert.

Ressourcen für Business.Adobe.com