Afficher des données d’une API

Dans ce tutoriel, vous connectez une API REST, vous écrivez une requête qui récupère une liste d’articles et vous affichez chaque article sous forme de carte sur la page. L’exemple utilise JSONPlaceholder, une API de test gratuite qui ne demande aucune clé : un site suffit pour suivre.

Connecter l’API

1. Ouvrir l’espace de travail Data

   Ouvrez la page sur laquelle vous voulez travailler, puis cliquez sur Data en bas de la barre latérale gauche. L’espace de travail Data liste les variables, les requêtes et les formules de la page, ainsi que les intégrations du site. Cliquez de nouveau sur Data, ou sur son icône de fermeture, pour revenir au canevas.

2. Ajouter une intégration REST

   À côté de Integrations, cliquez sur + (Add integration) et choisissez REST API. Nommez-la Placeholder API.

   Dans la carte Connection, réglez Base url sur https://jsonplaceholder.typicode.com. Laissez Auth type sur none : cette API est publique.

3. La créer et tester la connexion

   Cliquez sur Create integration. Une carte Test connection apparaît : cliquez sur Run test et attendez Connected. Le test utilise les réglages enregistrés : enregistrez donc de nouveau avant de tester une modification.

Écrire la requête

1. Ajouter une requête

   À côté de Queries, cliquez sur + (Add query). Renommez la requête de query en posts dans le champ du haut. Son résultat est maintenant disponible sous queries.posts.data.

2. La diriger vers l’API

   Dans la carte Source, réglez Integration sur Placeholder API. L’Operation passe sur Request.

3. Remplir la demande

   Dans la carte Input, laissez Method sur GET et réglez Path sur /posts?_limit=6. Le chemin est ajouté à l’URL de base : la requête demande donc les six premiers articles.

4. Choisir quand elle s’exécute

   Dans When it runs, choisissez Static. La requête s’exécute à la publication et les articles sont écrits dans le HTML, ce qui est rapide et bon pour les moteurs de recherche. Choisissez Server quand les données doivent être fraîches à chaque requête, ou Client quand elles dépendent de ce que fait le visiteur dans le navigateur.

5. La tester

   Dans la carte Result, cliquez sur Run. La réponse s’affiche sous forme d’arbre : un tableau de six objets avec userId, id, title et body.

Afficher les articles sur la page

1. Insérer une liste de collection

   Revenez au canevas et sélectionnez le cadre de la page ou une section. Cliquez sur + dans l’onglet Layers et choisissez Collection list. C’est une grille de trois colonnes avec un enfant, Item, qui se répète une fois par article.

2. Utiliser la requête comme source

   La liste sélectionnée, ouvrez Collection list dans l’inspecteur. Réglez Source sur Expression si ce n’est pas déjà le cas. Items est rempli avec queries.posts.data ; sinon, cliquez sur son bouton de liaison et tapez-le.

3. Ajouter du texte à l’élément

   Appuyez sur T et faites glisser à l’intérieur de Item pour ajouter un texte pour le titre, puis ajoutez un second texte pour le corps. Chaque répétition de l’élément reçoit les mêmes calques.

4. Lier les textes

   Sélectionnez le texte du titre. Dans Typography, cliquez sur le bouton de liaison à côté du texte et tapez item.title. Liez le second texte à item.body de la même façon. Chaque carte affiche maintenant son propre article.

5. Styliser une carte

   Sélectionnez Item et donnez-lui un padding, un remplissage et un arrondi d’angle. Le style s’applique à toutes les cartes, car elles sont toutes des répétitions du même élément.

Gérer un résultat vide

1. Écrire l’état vide

   Sélectionnez la liste de collection et réglez Empty text sur No posts yet. Ce texte s’affiche à la place des cartes quand la liste n’a aucun élément.

2. L’essayer

   Dans l’espace de travail Data, changez le Path de la requête en /posts?userId=999. Aucun utilisateur n’a cet identifiant : l’API renvoie donc un tableau vide et le canevas affiche votre texte vide. Remettez le chemin /posts?_limit=6 quand vous avez terminé.

3. Prévisualiser et publier

   Appuyez sur ⌘↵ pour prévisualiser la page, puis cliquez sur Publish. Une requête statique s’exécute pendant la publication : la page publiée contient donc les articles dans son HTML.

Ce que vous avez appris

• Une intégration contient l’URL de base, les en-têtes et les secrets ; les requêtes la réutilisent.
• Une requête choisit une opération, remplit ses entrées et s’exécute en mode statique, serveur ou client.
• Une liste de collection avec une source Expression répète son élément pour chaque entrée d’un résultat de requête, et item.* lit l’entrée courante.

Lisez les guides sur lesquels ce tutoriel s’appuie :