AEM API sin encabezado y React

Clonar la aplicación desde Github ejecutando el siguiente comando en la línea de comandos.

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

Cambie a la headless-first e instale las dependencias.

$ cd headless-first
$ npm ci

Cree un archivo llamado .env en la raíz del proyecto. Entrada .env establezca los siguientes valores:

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>

Puede recuperar un token de desarrollador en Cloud Manager. Iniciar sesión en Adobe Cloud Manager. Clic Experience Manager > Cloud Manager. Elija el Programa adecuado y, a continuación, haga clic en los puntos suspensivos junto al Entorno.

1. Haga clic en en Integraciones pestaña
2. Clic Pestaña Token local y obtenga el token de desarrollo local botón
3. Copie el token de acceso comenzando después de la comillas abiertas hasta antes de la comillas de cierre.
4. Pegue el token copiado como valor para REACT_APP_TOKEN en el .env archivo.
5. Ahora vamos a crear la aplicación ejecutando npm ci en la línea de comandos.
6. Ahora inicie la aplicación React y ejecutando npm run start en la línea de comandos.
7. Entrada ./src/utils un archivo denominado context.js incluye el código para establecer los valores en .env en el contexto de la aplicación.

Inicie la aplicación React ejecutando npm run start en la línea de comandos.

$ npm run start

La aplicación React se inicia y abre una ventana del explorador para que http://localhost:3000. Los cambios en la aplicación React se volverán a cargar automáticamente en el navegador.

AEM Para conectar la aplicación de React a la as a Cloud Service, vamos a añadir algunas cosas a la lista de aplicaciones de React para que se puedan usar en su lugar. App.js. En el React importar, añadir useContext.

import React, {useContext} from 'react';

Importar AppContext desde el context.js archivo.

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

Ahora, en el código de la aplicación, defina una variable de contexto.

const context = useContext(AppContext);

Y, finalmente, ajuste el código de retorno en <AppContext.Provider> ... </AppContext.Provider>.

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

Como referencia, la variable App.js Ahora debería ser así.

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;

Importe el AEMHeadless SDK. AEM Este SDK es una biblioteca de ayuda que utiliza la aplicación para interactuar con las API sin encabezado de la aplicación de la interfaz de usuario de.

Añada esta instrucción de importación a home.js.

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

Añada lo siguiente { useContext, useEffect, useState } a la React import.

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

Importe el AppContext.

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

Dentro de Home componente, obtenga el context de la variable AppContext.

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

AEM Inicialice el SDK sin encabezado de la dentro de un useEffect()AEM , ya que el SDK sin encabezado de la debe cambiar cuando la variable context cambios de la variable.

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

AEM Cree el estado React que expone el contenido proveniente del SDK sin encabezado de.

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

AEM Conecte la aplicación a la red de. Utilice la consulta persistente creada en la lección anterior. Vamos a añadir el siguiente código dentro de la variable useEffect AEM después de inicializar el SDK sin encabezado de la. Realice la useEffect depende del context como se ve a continuación.

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

Abra la vista Red de las herramientas del desarrollador para revisar la solicitud de GraphQL.

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

AEM El SDK sin encabezado de la codifica la solicitud de GraphQL y agrega los parámetros proporcionados. Puede abrir la solicitud en el explorador.

Muestre los fragmentos de contenido en la aplicación. Devolver un <div> con el título del teaser.

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

Debería ver el campo de título del teaser en la pantalla.

El último paso es añadir el teaser a la página. Se incluye un componente de teaser de React en el paquete. En primer lugar, vamos a incluir la importación. En la parte superior del home.js , añada la línea:

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

Actualice la instrucción return:

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

Ahora debería ver el teaser con el contenido incluido en el fragmento.