Koploze API's AEM en reageren

Kloon app van Githubdoor het volgende bevel op de bevellijn uit te voeren.

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

Ga naar de map headless-first en installeer de afhankelijkheden.

$ cd headless-first
$ npm ci

Maak een bestand met de naam .env in de hoofdmap van het project. Stel in .env de volgende waarden in:

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>

U kunt een ontwikkelaarstoken in Cloud Manager terugwinnen. Login aan Adobe Cloud Manager. Klik Experience Manager > Cloud Manager. Kies het aangewezen Programma en klik dan de ellipsen naast het Milieu.

1. Klik in het lusje van de Integraties
2. Klik Lokale Symbolische lusje & krijg de Lokale Token van de Ontwikkeling knoop
3. Kopieer het toegangstoken dat begint na het open citaat tot vóór het dichte citaat.
4. Plak het gekopieerde token als de waarde voor REACT_APP_TOKEN in het .env -bestand.
5. Laten we de app nu maken door npm ci uit te voeren op de opdrachtregel.
6. Start nu de React-app en door npm run start uit te voeren op de opdrachtregel.
7. In ./src/utilseen dossier genoemd context.js omvat de code om de waarden in het .env dossier in de context van app te plaatsen.

Start de React-app door npm run start uit te voeren op de opdrachtregel.

$ npm run start

De React-app start en opent een browservenster naar http://localhost:3000 . Wijzigingen in de React-app worden automatisch opnieuw geladen in de browser.

Als u de React-app wilt verbinden met AEM as a Cloud Service, voegt u een paar dingen toe aan App.js . Voeg useContext toe in het dialoogvenster React importeren.

import React, {useContext} from 'react';

Importeer AppContext uit het context.js -bestand.

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

Definieer nu binnen de toepassingscode een contextvariabele.

const context = useContext(AppContext);

Plaats ten slotte de retourcode in <AppContext.Provider> ... </AppContext.Provider> .

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

Ter referentie: de App.js zou nu zo moeten zijn.

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;

Importeer de AEMHeadless SDK. Deze SDK is een hulpbibliotheek die door de app wordt gebruikt voor interactie met AEM koploze API's.

Voeg deze importinstructie toe aan de home.js .

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

Voeg de volgende { useContext, useEffect, useState } aan de React de invoerverklaring toe.

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

Importeer de AppContext .

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

In de component Home haalt u de variabele context op vanuit de variabele AppContext .

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

Initialiseer de AEM Headless SDK in een useEffect() , omdat de AEM Headless SDK moet wijzigen wanneer de variabele context verandert.

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

Creeer React staat die de inhoud blootstelt die uit AEM Headless SDK komt.

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

Sluit de app aan op AEM. Gebruik de voortgezette vraag die in de vorige les wordt gecreeerd. Voeg de volgende code toe in de useEffect nadat de AEM Headless SDK is geïnitialiseerd. Maak de useEffect afhankelijk van de context -variabele, zoals hieronder wordt weergegeven.

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

Open de netwerkweergave van de ontwikkelaarsgereedschappen om de GraphQL-aanvraag te bekijken.

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

De AEM Headless SDK codeert de aanvraag voor GraphQL en voegt de opgegeven parameters toe. U kunt de aanvraag openen in de browser.

Geef de inhoudsfragmenten in de app weer. Retourneer een <div> met de titel van de taser.

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

Het titelveld van de taser wordt weergegeven op het scherm.

De laatste stap bestaat uit het toevoegen van het gummetje aan de pagina. In het pakket is een component React teaser opgenomen. Eerst, laten wij de invoer omvatten. Voeg boven aan het bestand home.js de regel toe:

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

Werk de instructie return bij:

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

U moet nu het gummetje zien met de inhoud in het fragment.