API Web Démo Astro

Qu'est-ce qu'une API ?

Comprendre les API avec des exemples concrets et interactifs.

Qu'est-ce qu'une API ?

Qu’est-ce qu’une API ?

Une API (Application Programming Interface) est une interface qui permet à deux programmes ou services de communiquer entre eux.

Dans le web, cela signifie souvent que ton site ou ton app peut demander des infos (comme la météo, une image, un prix, etc.) à un serveur externe, qui te renvoie une réponse sous forme de données (souvent en JSON).

Pourquoi utilise-t-on des API ?

Les API sont partout sur le web moderne. Elles permettent par exemple de :

  • récupérer des données dynamiques (météo, actualités, prix, etc.)
  • interagir avec d’autres services (paiement Stripe, Google Maps, newsletter Mailchimp…)
  • automatiser des actions (ex. : envoyer un email après une commande)
  • créer des expériences plus riches pour l’utilisateur

Exemple 1 : Récupérer une blague depuis une API publique

Voici un exemple d’appel à une API publique qui renvoie une blague aléatoire :

Blague Chuck Norris : Chargement...

Exemple 2 : Afficher la météo en temps réel

On peut aussi interroger une API pour obtenir la météo actuelle d’une ville (ici Paris) :

Pourquoi c’est utile ?

Les API permettent d’enrichir un site avec des contenus externes, mais aussi de connecter des services entre eux. Elles sont indispensables dans :

  • le e-commerce (pour gérer paiements, livraisons, stock…)
  • les apps mobiles (login, carte, notifications…)
  • les sites vitrines modernes (prise de RDV, chat, formulaires intelligents…)

Même un site simple peut tirer parti d’API pour améliorer son utilité.

Pour aller plus loin

  • Tu peux explorer des dizaines d’API gratuites sur public-apis.io
  • Tu peux tester une API sans coder grâce à hoppscotch.io
  • En React, les appels API se font souvent avec fetch ou des librairies comme axios

Tuto React : comment appeler une API

Voici un exemple simple de composant React qui appelle une API pour récupérer une blague et l’afficher :

import { useEffect, useState } from "react";

export default function Joke() {
  const [joke, setJoke] = useState("Chargement...");

  useEffect(() => {
    fetch("https://api.chucknorris.io/jokes/random")
      .then((res) => res.json())
      .then((data) => setJoke(data.value));
  }, []);

  return <p>{joke}</p>;
}

Astuce : Ces exemples fonctionnent car ils utilisent des API publiques qui ne nécessitent pas de clé d’authentification.

Contactez-moi