AEM Headless-Schnelleinrichtung mit dem lokalen SDK

Mit der AEM Headless-Schnelleinrichtung erhalten Sie praktische Informationen zu AEM Headless mithilfe von Inhalten aus dem WKND Site-Beispielprojekt und einer React-App (einem SPA), die den Inhalt über AEM Headless-GraphQL-APIs nutzt. In diesem Handbuch werden die AEM as a Cloud Service SDK.

Voraussetzungen

Die folgenden Tools sollten lokal installiert werden:

• [JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14)
• Node.js v14.x
• Git

1. Installieren des AEM SDK

Dieses Setup verwendet die AEM as a Cloud Service SDK , um AEM GraphQL-APIs zu erkunden. Dieser Abschnitt enthält eine kurze Anleitung zum Installieren des AEM SDK und dessen Ausführung im Autorenmodus. Eine detailliertere Anleitung zum Einrichten einer lokalen Entwicklungsumgebung finden Sie hier ..

1. Navigieren Sie zum Software Distribution-Portal > AEM as a Cloud Service und laden Sie die neueste Version des AEM SDK.

   

2. Entpacken Sie den Download und kopieren Sie die Schnellstart-JAR (aem-sdk-quickstart-XXX.jar) in einen bestimmten Ordner, d. h. ~/aem-sdk/author.

3. Benennen Sie die JAR-Datei in aem-author-p4502.jar.

   Die author name gibt an, dass die Schnellstart-JAR-Datei im Autorenmodus gestartet wird. Die p4502 gibt den Schnellstart-Vorgang für Port 4502 an.

4. Um die AEM zu installieren und zu starten, öffnen Sie eine Eingabeaufforderung in dem Ordner, der die JAR-Datei enthält, und führen Sie den folgenden Befehl aus:

   $ cd ~/aem-sdk/author
   $ java -jar aem-author-p4502.jar
   

5. Geben Sie ein Administratorkennwort als admin. Jedes Administratorkennwort ist akzeptabel. Es wird jedoch empfohlen, admin für die lokale Entwicklung, um die Notwendigkeit einer Neukonfiguration zu verringern.

6. Wenn die Installation des AEM-Dienstes abgeschlossen ist, sollte ein neues Browserfenster unter http://localhost:4502.

7. Anmelden mit dem Benutzernamen admin und das während AEM ersten Starts ausgewählte Kennwort (normalerweise admin).

2. Beispielinhalt installieren

Beispielinhalt aus dem WKND-Referenz-Site wird verwendet, um das Tutorial zu beschleunigen. Die WKND ist eine fiktive Lebensmarke, die oft mit AEM Training verwendet wird.

Die WKND-Site enthält Konfigurationen, die erforderlich sind, um eine GraphQL-Endpunkt. Führen Sie in einer realen Implementierung die dokumentierten Schritte aus, um GraphQL-Endpunkte einschließen in Ihrem Kundenprojekt. A CORS wurde auch als Teil der WKND-Site verpackt. Eine CORS-Konfiguration ist erforderlich, um Zugriff auf eine externe Anwendung zu gewähren. Weitere Informationen finden Sie unter CORS finden Sie unten.

1. Laden Sie das neueste kompilierte AEM-Paket für die WKND-Site herunter: aem-guides-wknd.all-x.x.x.zip.

   HINWEIS

   Laden Sie die Standardversion herunter, die mit AEM as a Cloud Service kompatibel ist. not die classic -Version.

2. Aus dem AEM Start Menü, navigieren Sie zu Instrumente > Implementierung > Pakete.

   

3. Klicken Paket hochladen und wählen Sie das im vorherigen Schritt heruntergeladene WKND-Paket. Klicken Sie auf Installieren, um das Paket zu installieren.

4. Aus dem AEM Start Menü, navigieren Sie zu Assets > Dateien > WKND Shared > englisch > Abenteuer.

   

   Dies ist ein Ordner aller Assets, aus denen die verschiedenen Adventures der Marke WKND bestehen. Dazu gehören herkömmliche Medientypen wie Bilder und Videos sowie AEM Medien. Inhaltsfragmente.

5. Klicken Sie in die Skifahren auf dem Nachhauseweg und klicken Sie auf Nachlassendes Überspringen von Wyoming-Inhaltsfragment Karte:

   

6. Der Inhaltsfragmente-Editor wird für das Abenteuer "Wyoming beim Skifahren"geöffnet.

   

   Beachten Sie, dass verschiedene Felder wie Titel, Beschreibung und Aktivität das Fragment definieren.

   Inhaltsfragmente sind eine der Möglichkeiten, Inhalte in AEM zu verwalten. Inhaltsfragmente sind wiederverwendbare, darstellungsunabhängige Inhalte, die aus strukturierten Datenelementen wie Text, Rich-Text, Daten oder Verweisen auf andere Inhaltsfragmente bestehen. Inhaltsfragmente werden später bei der schnellen Einrichtung genauer untersucht.

7. Klicken Abbrechen , um das Fragment zu schließen. Sie können auch in andere Ordner navigieren und die anderen Adventure-Inhalte durchsuchen.

3. Herunterladen und Ausführen der WKND React-App

Eines der Ziele dieses Tutorials besteht darin, zu zeigen, wie AEM Inhalte von einer externen Anwendung mithilfe der GraphQL-APIs genutzt werden können. In diesem Tutorial wird eine React-App-Beispielanwendung verwendet. Die React-App ist absichtlich einfach, um sich auf die Integration mit AEM GraphQL-APIs zu konzentrieren.

1. Öffnen Sie eine neue Eingabeaufforderung und klonen Sie die React-Beispielanwendung von GitHub:

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

2. Öffnen Sie die React-App in aem-guides-wknd-graphql/react-app in Ihrer IDE Ihrer Wahl.

3. Öffnen Sie in der IDE die -Datei. .env.development at /.env.development. Überprüfen Sie die REACT_APP_AUTHORIZATION -Zeile ist nicht kommentiert und die Datei deklariert die folgenden Variablen:

   REACT_APP_HOST_URI=http://localhost:4502
   REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
   # Use Authorization when connecting to an AEM Author environment
   REACT_APP_AUTHORIZATION=admin:admin
   

   Sichern REACT_APP_HOST_URI verweist auf Ihr lokales AEM-SDK. Der Einfachheit halber verbindet dieser Schnellstart die React-App mit AEM-Autor. Autor Dienste müssen authentifiziert werden, sodass die App die admin Benutzer, um seine Verbindung herzustellen. Die Verbindung einer App mit AEM Author ist eine gängige Praxis bei der Entwicklung, da sie die schnelle Iteration von Inhalten erleichtert, ohne Änderungen veröffentlichen zu müssen.

   HINWEIS

   In einem Produktionsszenario stellt die App eine Verbindung zu einem AEM her Veröffentlichen Umgebung. Weitere Informationen hierzu finden Sie im Abschnitt Produktionsbereitstellung Abschnitt.

4. Installieren und starten Sie die React-App:

   $ cd aem-guides-wknd-graphql/react-app
   $ npm install
   $ npm start
   

5. Ein neues Browser-Fenster öffnet automatisch die App auf http://localhost:3000.

   

   Eine Liste der Abenteuerinhalte von AEM wird angezeigt.

6. Klicken Sie auf eines der Abenteuerbilder, um die Details des Abenteuers anzuzeigen. Es wird AEM gebeten, das Detail für ein Abenteuer zurückzugeben.

   

7. Verwenden Sie die Entwickler-Tools des Browsers, um die Netzwerk -Anfragen. Anzeigen der XHR Anfragen und Beobachtung mehrerer GET-Anfragen an /graphql/execute.json/.... Dieses Pfadpräfix ruft AEM persistenten Abfrageendpunkt auf und wählt die persistente Abfrage aus, die mit dem Namen und den kodierten Parametern nach dem Präfix ausgeführt werden soll.

   

4. Bearbeiten von Inhalten in AEM

Wenn die React-App ausgeführt wird, aktualisieren Sie den Inhalt in AEM und stellen Sie sicher, dass die Änderung in der App übernommen wird.

1. Navigieren Sie zu AEM http://localhost:4502.

2. Navigieren Sie zu Assets > Dateien > WKND Shared > englisch > Abenteuer > Bali Surf Camp.

   

3. Klicken Sie in die Bali Surf Camp Inhaltsfragment , um den Inhaltsfragment-Editor zu öffnen.

4. Ändern Sie die Titel und Beschreibung des Abenteuers.

   

5. Klicken Sie auf Speichern, um die Änderungen zu speichern.

6. Aktualisieren Sie die React-App unter http://localhost:3000 um Ihre Änderungen zu sehen:

   

5. GraphiQL durchsuchen

1. Öffnen GraphiQL durch Navigation zu Instrumente > Allgemein > GraphQL Query Editor

2. Wählen Sie auf der linken Seite vorhandene persistente Abfragen aus und führen Sie sie aus, um die Ergebnisse anzuzeigen.

   HINWEIS

   Das GraphiQL-Tool und die GraphQL-API lautet detaillierter im Tutorial.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben jetzt eine externe Anwendung, die AEM Inhalte mit GraphQL verbraucht. Sie können den Code in der React-App prüfen und mit der Änderung vorhandener Inhaltsfragmente experimentieren.

Nächste Schritte

• Starten des AEM Headless-Tutorials

Ressourcen für Business.Adobe.com