Documentación AEM Tutoriales de AEM Tutorial de AEM sin encabezado

Integración de aplicaciones cliente

Última actualización: 5 de mayo de 2025

Se aplica a:
Experience Manager as a Cloud Service

Temas:
Fragmentos de contenido

Creado para:

Intermedio
Desarrollador

En el capítulo anterior, creó y actualizó consultas persistentes mediante el Explorador de GraphiQL.

En este capítulo se explican los pasos para integrar las consultas persistentes con la aplicación cliente WKND (también conocida como aplicación WKND) mediante solicitudes HTTP GET en los componentes React existentes. También ofrece un desafío opcional para aplicar sus conocimientos de AEM sin encabezado y su experiencia en codificación para mejorar la aplicación del cliente WKND.

Requisitos previos

Este documento forma parte de un tutorial de varias partes. Asegúrese de que los capítulos anteriores se hayan completado antes de continuar con este capítulo. La aplicación cliente WKND se conecta al servicio de publicación de AEM, por lo que es importante que publique lo siguiente en el servicio de publicación de AEM.

Configuraciones de proyecto
Extremos de GraphQL
Modelos de fragmento de contenido
Fragmentos de contenido creados
Consultas persistentes de GraphQL

Las capturas de pantalla IDE de este capítulo provienen de Visual Studio Code

Capítulo 1-4 Paquete de soluciones (opcional)

Hay disponible un paquete de soluciones para instalar que completa los pasos de la interfaz de usuario de AEM para los capítulos 1 a 4. Este paquete no es necesario si se han completado los capítulos anteriores.

Descargar Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip.
En AEM, vaya a Herramientas > Implementación > Paquetes para acceder al Administrador de paquetes.
Cargue e instale el paquete (archivo zip) descargado en el paso anterior.
Replicar el paquete en el servicio de publicación de AEM

Objetivos

En este tutorial, aprenderá a integrar las solicitudes de consultas persistentes en la aplicación WKND GraphQL React de ejemplo mediante AEM Headless Client for JavaScript.

Clonar y ejecutar la aplicación cliente de ejemplo

Para acelerar el tutorial, se proporciona una aplicación React JS de inicio.

Clone el repositorio adobe/aem-guides-wknd-graphql:

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

Edite el archivo aem-guides-wknd-graphql/advanced-tutorial/.env.development y configure REACT_APP_HOST_URI para que apunte a su servicio de publicación de AEM de destino.

Actualice el método de autenticación si se conecta a una instancia de autor.
# Server namespace REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com #AUTH (Choose one method) # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication REACT_APP_AUTH_METHOD= # For Bearer auth, use DEV token (dev-token) from Cloud console REACT_APP_DEV_TOKEN= # For Service toke auth, provide path to service token file (download file from Cloud console) REACT_APP_SERVICE_TOKEN=auth/service-token.json # For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance) REACT_APP_BASIC_AUTH_USER= REACT_APP_BASIC_AUTH_PASS=
NOTE
Las instrucciones anteriores son conectar la aplicación React al servicio de publicación de AEM, sin embargo, para conectarte al servicio de creación de AEM y obtener un token de desarrollo local para tu entorno de AEM as a Cloud Service de destino.
También es posible conectar la aplicación a una instancia de autor local mediante el SDK de AEMaaCS mediante la autenticación básica.

Abra un terminal y ejecute los comandos:

$ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start

Se debe cargar una nueva ventana del explorador en http://localhost:3000
Pulse Camping > Mochilero Yosemite para ver los detalles de la aventura de mochilero Yosemite.
Abra las herramientas para desarrolladores del explorador e inspeccione la solicitud XHR

Debería ver GET solicitudes al extremo de GraphQL con el nombre de configuración de proyecto (wknd-shared), el nombre de consulta persistente (adventure-by-slug), el nombre de variable (slug), el valor (yosemite-backpacking) y las codificaciones de caracteres especiales.

IMPORTANT

Si se está preguntando por qué se realiza la solicitud de la API de GraphQL en el dominio http://localhost:3000 y NO en el dominio del servicio de publicación de AEM, revise Under The Hood del tutorial básico.

Revisar el código

En el Tutorial básico - Crear una aplicación de React que use las API de GraphQL de AEM, hemos revisado y mejorado algunos archivos clave para obtener experiencia práctica. Antes de mejorar la aplicación WKND, revise los archivos clave.

Revisar componente de React `Adventures`

La vista principal de la aplicación WKND React es la lista de todas las aventuras que puedes filtrar según el tipo de actividad: Acampar, Ciclismo. El componente Adventures representa esta vista. A continuación se muestran los principales detalles de implementación:

El vínculo src/components/Adventures.js llama al vínculo useAllAdventures(adventureActivity) y aquí el argumento adventureActivity es el tipo de actividad.
El vínculo useAllAdventures(adventureActivity) está definido en el archivo src/api/usePersistedQueries.js. En función del valor adventureActivity, determina a qué consulta persistente llamar. Si no es un valor nulo, llama a wknd-shared/adventures-by-activity; de lo contrario, obtiene todas las aventuras disponibles wknd-shared/adventures-all.
El vínculo utiliza la función principal fetchPersistedQuery(..) que delega la ejecución de la consulta a AEMHeadless mediante aemHeadlessClient.js.
El vínculo también devuelve únicamente los datos relevantes de la respuesta de AEM GraphQL en response.data?.adventureList?.items, lo que permite que los componentes de la vista React Adventures no sean agnósticos a las estructuras JSON principales.
Una vez ejecutada correctamente la consulta, la función de procesamiento AdventureListItem(..) de Adventures.js agrega el elemento HTML para mostrar la información de imagen, duración del viaje, precio y título.

Revisar componente de React `AdventureDetail`

El componente React AdventureDetail procesa los detalles de la aventura. A continuación se muestran los principales detalles de implementación:

El vínculo src/components/AdventureDetail.js llama al vínculo useAdventureBySlug(slug) y el argumento slug es un parámetro de consulta.
Como en el caso anterior, el vínculo useAdventureBySlug(slug) se define en el archivo src/api/usePersistedQueries.js. Llama a wknd-shared/adventure-by-slug a una consulta persistente delegando a AEMHeadless a través de aemHeadlessClient.js.
Una vez ejecutada correctamente la consulta, la función de procesamiento AdventureDetailRender(..) de AdventureDetail.js agrega el elemento HTML para mostrar los detalles de la aventura.

Mejore el código

Usar consulta persistente `adventure-details-by-slug`

En el capítulo anterior, creamos la consulta persistente adventure-details-by-slug, que proporciona información de aventura adicional como ubicación, instructorTeam y administrator. Vamos a reemplazar adventure-by-slug con adventure-details-by-slug consulta persistente para procesar esta información adicional.

Abra src/api/usePersistedQueries.js.
Busque la función useAdventureBySlug() y actualice la consulta como

 ...

 // Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
 response = await fetchPersistedQuery(
 "wknd-shared/adventure-details-by-slug",
 queryParameters
 );

 ...

Mostrar información adicional

Para mostrar información adicional sobre la aventura, abra src/components/AdventureDetail.js

Busque la función AdventureDetailRender(..) y actualice la función de retorno como

...

return (<>
    <h1 className="adventure-detail-title">{title}</h1>
    <div className="adventure-detail-info">

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

Defina también las funciones de procesamiento correspondientes:

InformaciónDeUbicación

function LocationInfo({name}) {

    if (!name) {
        return null;
    }

    return (
        <>
            <div className="adventure-detail-info-label">Location</div>
            <div className="adventure-detail-info-description">{name}</div>
        </>
    );

}

Ubicación

function Location({ contactInfo }) {

    if (!contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-location'>
                <h2>Where we meet</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
            </div>
        </>);
}

EquipoInstructor

function InstructorTeam({ _metadata }) {

    if (!_metadata) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-team'>
                <h2>Instruction Team</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
            </div>
        </>);
}

Administrador

function Administrator({ fullName, contactInfo }) {

    if (!fullName || !contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-administrator'>
                <h2>Administrator</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Name: {fullName}</div>
                <div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
            </div>
        </>);
}

Definir estilos nuevos

Abra src/components/AdventureDetail.scss y agregue las siguientes definiciones de clase

.adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}

.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}

TIP

Los archivos actualizados están disponibles en el proyecto AEM Guides WKND - GraphQL; consulte la sección Tutorial avanzado.

Después de completar las mejoras anteriores, la aplicación WKND tiene el siguiente aspecto y las herramientas para desarrolladores del explorador muestran adventure-details-by-slug llamada de consulta persistente.

APLICACIÓN WKND mejorada

Reto de mejora (opcional)

La vista principal de la aplicación WKND React te permite filtrar estas aventuras según el tipo de actividad como Camping, Ciclismo. Sin embargo, el equipo empresarial de WKND desea tener una capacidad de filtrado adicional basada en Location. Los requisitos son

En la vista principal de la aplicación WKND, en la esquina superior izquierda o derecha, agregue el icono de filtrado Location.
Si hace clic en el icono de filtrado Ubicación, se mostrará una lista de ubicaciones.
Al hacer clic en una opción de ubicación de la lista, solo se deben mostrar las aventuras coincidentes.
Si solo hay una aventura que coincida, se muestra la vista Detalles de la aventura.

Felicitaciones

¡Enhorabuena! Ahora ha completado la integración y la implementación de las consultas persistentes en la aplicación WKND de ejemplo.

recommendation-more-help