AEM Headless-Schnelleinrichtung mit dem lokalen AEM SDK setup

Navigieren Sie zu Software Distribution-Portal > AEM as a Cloud Service und laden Sie die neueste Version des AEM-SDKs herunter.

Entpacken Sie die heruntergeladene Datei und kopieren Sie die Schnellstart-JAR-Datei (aem-sdk-quickstart-XXX.jar) in einen dedizierten Ordner, d. h. ~/aem-sdk/author.

Benennen Sie die JAR-Datei um zu aem-author-p4502.jar.

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

Um die AEM-Instanz zu installieren und zu starten, öffnen Sie eine Eingabeaufforderung im 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

Geben Sie ein Administratorpasswort als admin an. Jedes Administratorpasswort ist akzeptabel. Es wird jedoch empfohlen, admin für die lokale Entwicklung zu verwenden, um eine erneute Konfiguration zu vermeiden.

Nach Installation des AEM-Service sollte sich ein neues Browser-Fenster unter http://localhost:4502 öffnen.

Melden Sie sich mit dem Benutzernamen admin und dem während des ersten AEM-Starts ausgewählten Passwort (normalerweise admin) an.

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

Navigieren Sie über das AEM-Startmenü zu Tools > Bereitstellung > Pakete.

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

Navigieren Sie über das AEM-Startmenü zu Assets > Dateien > WKND Shared > Englisch > Adventures.

Dies ist ein Ordner mit allen Assets, die die Adventures der Marke WKND umfassen. Dazu gehören herkömmliche Medientypen wie Bilder und Videos sowie AEM-Medien wie Inhaltsfragmente.

Klicken Sie auf den Ordner Skifahren Wyoming und danach auf die Karte Inhaltsfragment Skifahren Wyoming:

Der Inhaltsfragment-Editor wird für das Adventure „Downhill Skiing Wyoming“ geöffnet.

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

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

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

Öffnen Sie eine neue Eingabeaufforderung und klonen Sie die Beispiel-React-App aus GitHub:

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

Öffnen Sie die React-App in aem-guides-wknd-graphql/react-app in einer beliebigen IDE.

Öffnen Sie in der IDE die Datei .env.development unter /.env.development. Stellen Sie sicher, dass die Zeile REACT_APP_AUTHORIZATION nicht kommentiert ist und die Datei die folgenden Variablen deklariert:

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

Stellen Sie sicher, dass REACT_APP_HOST_URI auf Ihr lokales AEM-SDK verweist. Zur Vereinfachung wird in diesem Schnellstart die React-App mit AEM Author verbunden. Autoren-Services müssen authentifiziert werden, weshalb die App zur Herstellung der Verbindung die admin-Benutzenden verwendet. Die Verbindung einer App mit der AEM-Autoreninstanz ist gängige Praxis bei der Entwicklung, da sie die schnelle Iteration von Inhalten ermöglicht, ohne Änderungen veröffentlichen zu müssen.

Installieren und starten Sie die React-App:

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

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

Eine Liste der Adventure-Inhalte von AEM wird angezeigt.

Klicken Sie auf eines der Adventure-Bilder, um die Details des Adventures anzuzeigen. Es ergeht eine Anfrage an AEM, Details zu einem Adventure zurückzugeben.

Verwenden Sie die Entwickler-Tools des Browsers, um die Netzwerk-Anfragen zu überprüfen. Zeigen Sie die XHR-Anfragen an und beobachten Sie mehrere GET-Anfragen an /graphql/execute.json/.... Dieses Pfadpräfix ruft den AEM-Endpunkt der persistierten Abfrage auf, indem die persistierte auszuführende Abfrage anhand des Namens und der dem Präfix folgenden Parameter ausgewählt wird.

Gehen Sie zu AEM http://localhost:4502.

Gehen Sie zu Assets > Dateien > WKND Shared > Englisch > Adventures > Bali Surfcamp.

Klicken Sie auf das Inhaltsfragment Bali Surf Camp, um den Inhaltsfragment-Editor zu öffnen.

Ändern Sie den Titel und die Beschreibung des Adventures.

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

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

Öffnen Sie GraphiQL, indem sie zu Tools > Allgemein > GraphQL-Abfrage-Editor navigieren.

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