AEM Conceptos avanzados de la tecnología sin encabezado

Conozca nuestro CMS sin encabezado con prueba de 30 días

Este tutorial completo continúa el tutorial básico que cubre los aspectos básicos de Adobe Experience Manager AEM () Headless y GraphQL. AEM El tutorial avanzado ilustra aspectos exhaustivos del trabajo con modelos de fragmentos de contenido, fragmentos de contenido y las consultas persistentes de GraphQL de, incluido el uso de consultas persistentes de GraphQL en una aplicación cliente.

Requisitos previos

Complete la configuración rápida de AEM as a Cloud Service para configurar su entorno de AEM as a Cloud Service.

Se recomienda completar los tutoriales anteriores de tutorial básico y series de vídeos antes de continuar con este tutorial avanzado. AEM Aunque puede completar el tutorial utilizando un entorno de trabajo local, este tutorial solo cubre el flujo de trabajo de AEM as a Cloud Service.

CAUTION
Si no tiene acceso al entorno de AEM as a Cloud Service AEM, puede completar la configuración rápida de sin encabezado mediante el SDK local. Sin embargo, es importante tener en cuenta que algunas páginas de la interfaz de usuario del producto, como la navegación por fragmentos de contenido, son diferentes.

Objetivos

Este tutorial abarca los siguientes temas:

  • Cree modelos de fragmentos de contenido con reglas de validación y tipos de datos más avanzados, como marcadores de posición de tabulación, referencias de fragmento anidadas, objetos JSON y tipos de datos de fecha y hora.
  • Cree fragmentos de contenido mientras trabaja con contenido anidado y referencias de fragmento, y configure directivas de carpeta para el control de creación de fragmentos de contenido.
  • AEM Explore las funcionalidades de la API de GraphQL de la mediante consultas de GraphQL con variables y directivas.
  • Mantenga las consultas de GraphQL AEM con parámetros en la caché y aprenda a utilizar parámetros de control de caché con consultas persistentes.
  • Integre solicitudes para consultas persistentes en la aplicación de WKND GraphQL AEM React de ejemplo mediante el SDK de JavaScript sin encabezado de.

AEM Conceptos avanzados de información general sobre el acceso sin encabezado

El siguiente vídeo proporciona información general de alto nivel sobre los conceptos que se tratan en este tutorial. El tutorial incluye la definición de modelos de fragmentos de contenido con tipos de datos más avanzados, el anidamiento de fragmentos de contenido y la persistencia de consultas GraphQL AEM en la creación de segmentos de.

CAUTION
Este vídeo (a las 2:25) menciona cómo instalar el editor de consultas de GraphiQL a través del Administrador de paquetes para explorar consultas de GraphQL. AEM Sin embargo, en las versiones más recientes de la aplicación, como Cloud Service, se proporciona un explorador integrado de GraphiQL Explorer, por lo que no es necesario instalar el paquete. Consulte Uso del IDE de GraphiQL para obtener más información.

Configuración del proyecto

El proyecto del sitio WKND tiene todas las configuraciones necesarias para que puedas iniciar el tutorial justo después de completar la configuración rápida. AEM En esta sección solo se destacan algunos pasos importantes que puede seguir al crear su propio proyecto sin encabezado de la aplicación de la interfaz de usuario de la aplicación de.

Revisar configuración existente

AEM El primer paso para iniciar cualquier nuevo proyecto en el área de trabajo es crear su configuración, como espacio de trabajo, y crear puntos finales de API de GraphQL. Para revisar o crear una configuración, vaya a Herramientas > General > Explorador de configuración.

Navegar al Explorador de configuración

Observe que la configuración del sitio WKND Shared ya se ha creado para el tutorial. Para crear una configuración para su propio proyecto, seleccione Crear en la esquina superior derecha y complete el formulario en el modal Crear configuración que aparece.

Revisar configuración compartida WKND

Revisar extremos de API de GraphQL

A continuación, debe configurar los extremos de la API para enviar consultas de GraphQL a. Para revisar los extremos existentes o crear uno, vaya a Herramientas > General > GraphQL.

Configurar extremos

Observe que WKND Shared Endpoint ya se ha creado. Para crear un punto final para su proyecto, seleccione Crear en la esquina superior derecha y siga el flujo de trabajo.

Revisar extremo compartido de WKND

NOTE
Después de guardar el extremo, verá un modal sobre la visita a la consola de seguridad, que le permite ajustar la configuración de seguridad si desea configurar el acceso al extremo. Sin embargo, los permisos de seguridad están fuera del ámbito de este tutorial. AEM Para obtener más información, consulte la documentación de la aplicación.

Revisar la estructura de contenido de WKND y la carpeta raíz del idioma

AEM Una estructura de contenido bien definida es clave para el éxito de la implementación sin encabezado de la aplicación de la distribución de contenido sin encabezado. Resulta útil para la escalabilidad, la facilidad de uso y la administración de permisos del contenido.

Una carpeta raíz de idioma es una carpeta con un código de idioma ISO como su nombre, como EN o FR. AEM El sistema de gestión de la traducción de la utiliza estas carpetas para definir el idioma principal del contenido y los idiomas para la traducción de contenido.

Vaya a Navegación > Assets > Archivos.

Navegar a archivos

Vaya a la carpeta WKND Shared. Observe la carpeta con el título "English" y el nombre "EN". Esta carpeta es la carpeta raíz de idioma del proyecto del sitio WKND.

Carpeta en inglés

Para su propio proyecto, cree una carpeta raíz de idioma dentro de la configuración. Consulte la sección sobre creación de carpetas para obtener más información.

Asignar una configuración a la carpeta anidada

Finalmente, debe asignar la configuración del proyecto a la carpeta raíz del idioma. Esta asignación permite la creación de fragmentos de contenido basados en los modelos de fragmentos de contenido definidos en la configuración del proyecto.

Para asignar la carpeta raíz de idioma a la configuración, selecciónela y, a continuación, seleccione Propiedades en la barra de navegación superior.

Seleccionar propiedades

A continuación, vaya a la pestaña Cloud Service y seleccione el icono de carpeta en el campo Configuración de nube.

Configuración de la nube

En el modal que aparece, seleccione la configuración creada anteriormente para asignarle la carpeta raíz del idioma.

Prácticas recomendadas

AEM Las siguientes son las prácticas recomendadas al crear su propio proyecto en:

  • La jerarquía de carpetas debe modelarse teniendo en cuenta la localización y la traducción. En otras palabras, las carpetas de idioma deben anidarse dentro de las carpetas de configuración, lo que permite traducir fácilmente el contenido dentro de esas carpetas de configuración.
  • La jerarquía de carpetas debe mantenerse plana y directa. Evite mover o cambiar el nombre de carpetas y fragmentos más adelante, especialmente después de publicar para uso activo, ya que cambia las rutas que pueden afectar a las referencias de fragmento y a las consultas de GraphQL.

Paquetes de inicio y solución

AEM Hay dos paquetes disponibles y se pueden instalar mediante Administrador de paquetes

El proyecto React App - Tutorial avanzado - WKND Adventures está disponible para revisar y explorar la aplicación de ejemplo. AEM Esta aplicación de ejemplo recupera el contenido de la aplicación invocando las consultas de GraphQL persistentes y lo procesa en una experiencia inmersiva.

Introducción

Para empezar con este tutorial avanzado, siga estos pasos:

  1. Configure un entorno de desarrollo usando AEM as a Cloud Service.
  2. Inicie el capítulo del tutorial en Crear modelos de fragmentos de contenido.
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4