AEM Headless-APIs und React

Klonen Sie die App von Github, indem Sie den folgenden Befehl in der Befehlszeile ausführen:

$ git clone git@github.com:lamontacrook/headless-first.git

Wechseln Sie in das Verzeichnis headless-first und installieren Sie die Abhängigkeiten.

$ cd headless-first
$ npm ci

Erstellen Sie eine Datei mit dem Namen .env im Stammverzeichnis des Projekts. Legen Sie in .env die folgenden Werte fest:

REACT_APP_AEM=<URL of the AEM instance>
REACT_APP_ENDPOINT=<the name of the endpoint>
REACT_APP_PROJECT=<the name of the folder with Content Fragments>
REACT_APP_TOKEN=<developer token>

Sie können ein Entwicklungs-Token in Cloud Manager abrufen. Melden Sie sich bei Adobe Cloud Manager an.  Klicken Sie auf Experience Manager > Cloud Manager.  Wählen Sie das entsprechende Programm aus und klicken Sie dann auf die Auslassungspunkte neben der Umgebung.

1. Klicken Sie auf die Registerkarte Integrationen.
2. Klicken Sie auf die Registerkarte „Lokales Token“ und die Schaltfläche „Lokales Entwicklungs-Token abrufen“.
3. Kopieren Sie das Zugriffs-Token, das nach dem öffnenden Anführungszeichen beginnt, bis vor dem schließenden Anführungszeichen.
4. Fügen Sie das kopierte Token als Wert für REACT_APP_TOKEN in die Datei .env ein.
5. Erstellen wir nun die App, indem wir npm ci in der Befehlszeile ausführen.
6. Starten Sie nun die React-App, indem Sie npm run start in der Befehlszeile ausführen.
7. In ./src/utils gibt es eine Datei namens context.js, die den Code enthält, um die Werte in der Datei .env in den Kontext der App zu setzen.

Starten Sie die React-App, indem Sie npm run start in der Befehlszeile ausführen.

$ npm run start

Die React-App wird gestartet und öffnet ein Browser-Fenster zu http://localhost:3000.  Änderungen an der React-App werden im Browser automatisch neu geladen.

Um die React-App mit AEM as a Cloud Service zu verbinden, fügen wir ein paar Dinge hinzu App.js. Fügen Sie dem React-Import useContext hinzu.

import React, {useContext} from 'react';

Importieren Sie AppContext aus der Datei context.js.

import { AppContext } from './utils/context';

Definieren Sie jetzt im App-Code eine Kontextvariable.

const context = useContext(AppContext);

Und zum Schluss schließen Sie den Rückgabe-Code in <AppContext.Provider> ... </AppContext.Provider> ein.

...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

Als Referenz: App.js sollte jetzt wie folgt aussehen.

import React, {useContext} from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/home/home';
import { AppContext } from './utils/context';

const App = () => {
const context = useContext(AppContext);
return (
    <div className='App'>
    <AppContext.Provider value={context}>
        <BrowserRouter>
        <Routes>
            <Route exact={true} path={'/'} element={<Home />} />
        </Routes>
        </BrowserRouter>
    </AppContext.Provider>
    </div>
);
};

export default App;

Importieren Sie das AEMHeadless-SDK. Dieses SDK ist eine Hilfsbibliothek, die von der App zur Interaktion mit AEM Headless-APIs verwendet wird.

Fügen Sie diese Importanweisung zu home.js hinzu.

import AEMHeadless from '@adobe/aem-headless-client-js';

Fügen Sie die folgende { useContext, useEffect, useState } zu der React-Importanweisung hinzu.

import React, { useContext, useEffect, useState } from 'react';

Importieren Sie AppContext.

import { AppContext } from '../../utils/context';

Holen Sie innerhalb der Komponente Home die Variable context aus AppContext.

const Home = () => {
const context = useContext(AppContext);
...
}

Initialisieren Sie das AEM Headless-SDK innerhalb von useEffect(), da sich das AEM Headless SDK ändern muss, wenn sich die Variable context ändert.

useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);

Erstellen Sie einen React-Status, der die Inhalte aus dem AEM Headless-SDK verfügbar macht.

const Home = () => {
const [content, setContent] = useState({});
...
}

Verbinden Sie die App mit AEM. Verwenden Sie die in der vorherigen Lektion erstellte persistierte Abfrage. Fügen wir nun den folgenden Code innerhalb von useEffect hinzu, nachdem das AEM Headless-SDK initialisiert wurde. Machen Sie die Variable useEffect von der Variable context abhängig, wie im Folgenden beschrieben.

useEffect(() => {
...
sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` })
    .then(({ data }) => {
    if (data) {
        setContent(data);
    }
    })
    .catch((error) => {
    console.log(`Error with pure-headless/teaser. ${error.message}`);
    });
}, [context]);

Öffnen Sie die Netzwerkansicht der Entwickler-Tools, um die GraphQL-Anfrage zu überprüfen.

<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

Das AEM Headless-SDK codiert die Anfrage für GraphQL und fügt die bereitgestellten Parameter hinzu. Sie können die Anfrage im Browser öffnen.

Öffnen Sie die Inhaltsfragmente in der App. Lassen Sie ein <div> mit dem Titel des Teasers zurückgeben.

return (
<div className='main-body'>
    <div>{content.component && (content.component.item.title)}</div>
</div>
);

Das Titelfeld des Teasers sollte auf dem Bildschirm angezeigt werden.

Der letzte Schritt besteht darin, den Teaser zur Seite hinzuzufügen. Eine React-Teaser-Komponente ist im Paket enthalten. Schließen wir zunächst den Import ein. Fügen Sie dazu am Anfang der Datei home.js die folgende Zeile hinzu:

import Teaser from '../../components/teaser/teaser';

Aktualisieren Sie die return-Anweisung:

return (
<div className='main-body'>
    <div>{content.component && <Teaser content={content.component.item} />}</div>
</div>
);

Sie sollten nun den Teaser mit dem im Fragment enthaltenen Inhalt sehen.