Chapitre 5 - Créer des pages Content Services

Le chapitre 5 du tutoriel sur AEM Headless couvre la création de la page à partir des modèles définis dans le chapitre 4. La page créée dans ce chapitre agit comme point d’entrée du HTTP JSON pour l’application mobile.

REMARQUE

L’architecture du contenu de la page de /content/wknd-mobile/en/api a été préconfigurée. Les pages de base de en et api ont un objectif architectural et organisationnel, mais ne sont pas strictement requises. Si le contenu de l’API peut être localisé, il est recommandé de suivre les bonnes pratiques habituelles en matière de copie de la langue et d’organisation des pages de Multi Site Manager, car la page de l’API peut être localisée comme n’importe quelle page AEM Sites.

Créer la page de l’API d’événements

  1. Accédez à AEM > Sites > WKND Mobile > English >API.
  2. Appuyez sur le libellé de la page d’API, puis appuyez sur le bouton Créer dans la barre d’actions supérieure, et créez une page d’API d’événements sous la page d’API.
    1. Appuyez sur Créer dans la barre d’actions supérieure.
    2. Sélectionnez le modèle API d’événements.
    3. Dans le champ Nom, saisissez événements.
    4. Dans le champ Titre, saisissez API d’événements.
    5. Appuyez sur Créer dans la barre d’actions supérieure pour créer la page.
    6. Appuyez sur Terminé pour revenir à l’administration AEM Sites.

Créer la page de l’API d’événements

REMARQUE

Le projet fournit une page CSS avec des styles de base pour l’expérience de création.

  1. Modifiez la page d’API d’événements en accédant à AEM > Sites > WKND Mobile > Anglais > API, en sélectionnant la page d’API d’événements et en appuyant sur Modifier dans la barre d’actions supérieure.

  2. Ajoutez une image de logo pour l’afficher dans l’application en la faisant glisser de l’outil de recherche de ressources vers l’espace réservé du composant Image.

    • Utilisez le logo fourni figurant sous /content/dam/wknd-mobile/images/wknd-logo.png.

  3. Ajoutez une ligne de balise à afficher au-dessus des événements.

    1. Modifiez le composant de Texte.
    2. Saisissez le texte :
      • The WKND is here.

  4. Sélectionnez les événements à afficher :

    1. Définissez la configuration suivante sur l’onglet Propriétés :
      • Modèle : Événement.
      • Chemin d’accès parent : /content/dam/wknd-mobile/en/events.
      • Balises : <Leave blank>.
    2. Définissez la configuration suivante sur l’onglet Éléments :
      • Supprimez tous les éléments répertoriés pour vous assurer que TOUS les éléments des fragments de contenu d’événement sont exposés.

Examinez la sortie JSON de la page d’API.

La sortie JSON et son format peuvent être examinés en demandant la page avec le sélecteur .model.json.

Cette structure (ou schéma) JSON doit être bien comprise par les consommateurs et consommatrices de cette API. Il est essentiel que les clients et clientes de l’API comprennent quels aspects de la structure sont fixes (c’est-à-dire le logo (image) de l’API d’événements et la balise active (texte) et lesquels sont fluides, comme les événements répertoriés sous le composant Liste de fragments de contenu).

La rupture de ce contrat sur une API publiée peut entraîner un comportement incorrect dans les applications consommatrices.

  1. Dans les nouveaux onglets du navigateur, demandez les pages d’API d’événements à l’aide du sélecteur .model.json, qui appelle l’exporteur JSON d’AEM Content Services et sérialise la page et les composants dans une structure JSON normalisée et bien définie.

    La structure JSON générée par ces pages est la structure sur laquelle les applications consommatrices doivent s’aligner.

  2. Demandez la page d’API d’événements en tant que JSON.

    Le résultat doit ressembler à ce qui suit :

Sortie JSON AEM Content Services.

REMARQUE

Ce fichier JSON peut être généré de façon propre (formaté) pour la lisibilité humaine à l’aide du sélecteur .tidy :

Étape suivante

Si vous le souhaitez, vous pouvez installer le package de contenu com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip sur l’instance de création AEM via le Gestionnaire de packages AEM. Ce package contient les configurations et le contenu décrits dans ce tutoriel et dans les chapitres précédents.

Sur cette page