Capítulo 5 - Creación de páginas de servicios de contenido

El capítulo 5 del tutorial AEM Headless cubre la creación de la página a partir de las plantillas definidas en el capítulo 4. La página creada en este capítulo actuará como punto final HTTP JSON para la aplicación móvil.

NOTA

La arquitectura de contenido de página de /content/wknd-mobile/en/api se ha creado previamente. Las páginas de base de en y api tienen un propósito arquitectónico y organizativo, pero no son estrictamente necesarias. Si el contenido de la API puede localizarse, se recomienda seguir las prácticas recomendadas habituales de organización de páginas de copia de idioma y administrador de varios sitios, ya que la página de la API puede localizarse como cualquier página de AEM Sites.

Creación de la página de API de evento

  1. Vaya a AEM > Sitios > WKND Mobile > English >API.
  2. Pulse la etiqueta de la página de API y, a continuación, pulse el ​​botón Crear en la barra de acciones superior y cree una nueva página de API de eventos en la página de API.
    1. Toque Crear en la barra de acciones superior
    2. Seleccione la plantilla Events API
    3. En el campo Name introduzca events
    4. En el campo Title introduzca Events API
    5. Toque Crear en la barra de acciones superior para crear la página
    6. Toque Listo para volver al administrador de AEM Sites

Creación de la página de API de eventos

NOTA

El proyecto proporciona CSS para proporcionar algunos estilos básicos a la experiencia de autor.

  1. Para editar la página Events API, vaya a AEM > Sites > WKND Mobile > English > API, seleccione la página Events API y pulse Edit en la barra de acciones superior.

  2. Agregue una imagen de logotipo para mostrarla en la aplicación arrastrándola y soltándola desde el Buscador de recursos en el marcador de posición del componente Imagen.

    • Utilice el logotipo proporcionado que se encuentra en /content/dam/wknd-mobile/images/wknd-logo.png.

  3. Agregue línea de etiqueta para que se muestre encima de los eventos.

    1. Edite el componente Texto
    2. Escriba el texto:
      • The WKND is here.

  4. Seleccione los eventos que desea mostrar:

    1. Establezca la siguiente configuración en la pestaña Properties:
      • Modelo: Evento
      • Ruta principal: /content/dam/wknd-mobile/en/events
      • Etiquetas: <Dejar en blanco>
    2. Establezca la siguiente configuración en la pestaña Elements:
      • Elimine los elementos de la lista, para garantizar que TODOS los elementos de los fragmentos de contenido de evento estén expuestos.

Revise la salida JSON de la página de API

La salida JSON y su formato se pueden revisar solicitando la página con el selector .model.json.

Los consumidores de esta API deben comprender bien esta estructura (o esquema) de JSON. Es fundamental que los consumidores de API comprendan qué aspectos de la estructura se han corregido (es decir, el logotipo (imagen) y la etiqueta en directo (texto) de la API del evento y que son fluidos (por ejemplo, los eventos enumerados en el componente Lista de fragmentos de contenido ).

Si se rompe este contrato en una API publicada, es posible que el comportamiento de las aplicaciones consumidoras sea incorrecto.

  1. En las pestañas nuevas del navegador, solicite las páginas de la API de eventos con el selector .model.json , que invoca el exportador JSON de los servicios de contenido de AEM, y serializa la página y los componentes en una estructura JSON normalizada y bien definida.

    La estructura JSON producida por estas páginas es la estructura a la que deben alinearse las aplicaciones que consumen contenido.

  2. Solicite la página API de eventos como JSON.

    El resultado debe aparecer de forma similar a:

Salida JSON de AEM Content Services

NOTA

Este JSON se puede generar de forma tidy (con formato) para facilitar la lectura mediante el selector .tidy:

Paso siguiente

Opcionalmente, instale el paquete de contenido com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip en AEM Author a través del Administrador de paquetes de AEM. Este paquete contiene las configuraciones y el contenido descritos en este y los capítulos anteriores del tutorial.

En esta página