Koploze API's AEM en reageren

Welkom bij dit zelfstudie-hoofdstuk waarin we de configuratie van een React-app voor verbinding met Adobe Experience Manager (AEM) Headless API's met behulp van de AEM Headless SDK onderzoeken. We gaan het ophalen van gegevens van inhoudsfragmenten van AEM GraphQL API's en het weergeven ervan in de React-app behandelen.

AEM Headless-API's bieden toegang tot AEM inhoud van elke client-app. We begeleiden u bij het configureren van uw React-app om verbinding te maken met AEM headless API's met behulp van de AEM Headless SDK. Met deze instelling wordt een herbruikbaar communicatiekanaal tot stand gebracht tussen uw React-app en AEM.

Vervolgens gebruiken we de AEM Headless SDK om gegevens van inhoudsfragmenten van AEM GraphQL API's op te halen. Inhoudsfragmenten in AEM bieden gestructureerd inhoudsbeheer. Met de SDK AEM Headless kunt u gemakkelijk zoeken naar gegevens van inhoudsfragmenten en deze ophalen met GraphQL.

Zodra we de gegevens van het inhoudsfragment hebben, integreren we deze in uw React-app. U leert de gegevens op een aantrekkelijke manier opmaken en weergeven. We bieden tips en trucs voor het verwerken en renderen van gegevens over inhoudsfragmenten in React-componenten, zodat u verzekerd bent van een naadloze integratie met de gebruikersinterface van uw app.

Tijdens de gehele zelfstudie geven we uitleg, codevoorbeelden en praktische tips. Tegen het einde kunt u uw React-app configureren om verbinding te maken met AEM Headless API's, gegevens van inhoudsfragmenten op te halen met de AEM Headless SDK en deze naadloos weer te geven in uw React-app. Laten we beginnen!

De React-app klonen

  1. De app klonen vanuit Github door de volgende opdracht op de opdrachtregel uit te voeren.

    code language-none
    $ git clone git@github.com:lamontacrook/headless-first.git
    
  2. Wijzigen in de headless-first en installeer de afhankelijkheden.

    code language-none
    $ cd headless-first
    $ npm ci
    

De React-app configureren

  1. Een bestand met de naam .env aan de basis van het project. In .env Stel de volgende waarden in:

    code language-none
    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>
    
  2. U kunt een ontwikkelaarstoken ophalen in Cloud Manager. Aanmelden bij Adobe Cloud Manager. Klikken Experience Manager > Cloud Manager. Kies het aangewezen Programma en klik dan de ellipsen naast het Milieu.

    AEM Developer Console

    1. Klik in het dialoogvenster Integraties tab
    2. Klikken Lokaal token, tabblad en lokaal ontwikkelingstoken ophalen knop
    3. Kopieer het toegangstoken dat begint na het open citaat tot vóór het dichte citaat.
    4. Plak de gekopieerde token als waarde voor REACT_APP_TOKEN in de .env bestand.
    5. Laten we de app nu maken door deze uit te voeren npm ci op de opdrachtregel.
    6. Start nu de React-app en voer deze uit npm run start op de opdrachtregel.
    7. In ./src/utils een bestand met de naam context.js bevat de code waarmee de waarden in het dialoogvenster .env in de context van de app.

De React-app uitvoeren

  1. Start de React-app via uitvoeren npm run start op de opdrachtregel.

    code language-none
    $ npm run start
    

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

Verbinding maken met AEM headless API's

  1. Als u de React-app wilt aansluiten op AEM as a Cloud Service, kunt u het volgende toevoegen: App.js. In de React importeren, toevoegen useContext.

    code language-javascript
    import React, {useContext} from 'react';
    

    Importeren AppContext van de context.js bestand.

    code language-javascript
    import { AppContext } from './utils/context';
    

    Definieer nu binnen de toepassingscode een contextvariabele.

    code language-javascript
    const context = useContext(AppContext);
    

    En ten slotte plaatst u de retourcode in <AppContext.Provider> ... </AppContext.Provider>.

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

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

    code language-javascript
    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;
    
  2. Het dialoogvenster Importeren AEMHeadless SDK. Deze SDK is een hulpbibliotheek die door de app wordt gebruikt voor interactie met AEM headless API's.

    Deze importinstructie toevoegen aan de home.js.

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

    Voeg het volgende toe { useContext, useEffect, useState } aan de React import, instructie.

    code language-javascript
    import React, { useContext, useEffect, useState } from 'react';
    

    Het dialoogvenster Importeren AppContext.

    code language-javascript
    import { AppContext } from '../../utils/context';
    

    Binnen de Home component, ophalen context variabele uit de AppContext.

    code language-javascript
    const Home = () => {
    const context = useContext(AppContext);
    ...
    }
    
  3. Initialiseer de AEM Headless SDK in een useEffect(), aangezien de AEM Headless SDK moet veranderen wanneer de context variabele wijzigingen.

    code language-javascript
    useEffect(() => {
    const sdk = new AEMHeadless({
        serviceURL: context.url,
        endpoint: context.endpoint,
        auth: context.token
    });
    }, [context]);
    
    note note
    NOTE
    Er is een context.js bestand onder /utils dat elementen leest uit de .env bestand. Ter referentie: context.url is de URL van de AEM as a Cloud Service omgeving. De context.endpoint is de volledige weg aan het eindpunt dat in de vorige les wordt gecreeerd. Tot slot context.token is het ontwikkelaarstoken.
  4. Creeer React staat die de inhoud blootstelt die uit AEM Headless SDK komt.

    code language-javascript
    const Home = () => {
    const [content, setContent] = useState({});
    ...
    }
    
  5. 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 variabel, zoals hieronder weergegeven.

    code language-javascript
    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]);
    
  6. 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

    Chrome Dev-gereedschappen

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

    note note
    NOTE
    Aangezien het verzoek naar het auteursmilieu gaat, moet u in het milieu in een ander lusje van zelfde browser worden geregistreerd.

Inhoud van inhoudsfragment renderen

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

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

    Het titelveld van de taser wordt weergegeven op het scherm.

  2. 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. Aan de bovenkant van de home.js bestand, voeg de regel toe:

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

    Werk de instructie return bij:

    code language-javascript
    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.

Volgende stappen

Gefeliciteerd! U hebt de React-app bijgewerkt en geïntegreerd met AEM Headless API's met de AEM Headless SDK!

Daarna, maken wij een complexere component van de Lijst van het Beeld die dynamisch referenced Inhoudsfragmenten van AEM teruggeeft.

Volgend hoofdstuk: Een component van de Lijst van het Beeld bouwen

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4