Comprendre les API et JSON

Si tu t'intéresses au développement web, tu as sûrement entendu parler des API et du JSON. Ces deux concepts sont hyper importants et souvent utilisés ensemble pour créer des applications web super cool et interactives.

Dans cet article, on va démystifier ces termes et voir comment ils bossent ensemble pour améliorer nos expériences en ligne.

Qu'est-ce qu'une API ?

Une API ou Application Programming Interface, c'est un ensemble de règles qui permettent à différentes applications de communiquer entre elles. Imagine une API comme un serveur dans un restaurant : tu passes ta commande (une requête) au serveur, qui la transmet à la cuisine (le serveur) et te ramène le plat (la réponse).

Exemple d'utilisation d'une API

Disons que tu veux créer une appli météo. Plutôt que de collecter et de traiter toi-même les données météo, tu peux utiliser l'API d'un service météo.

Voici comment ça marche en JavaScript :

// Clé API pour accéder au service WeatherAPI
const apiKey = '540c66ac45cf4052a3b190704240807';

// URL de l'API WeatherAPI avec la clé API et la localisation (Paris)
const apiUrl = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=Paris`;

// Envoyer une requête à l'API WeatherAPI
fetch(apiUrl)
  // Convertir la réponse en format JSON
  .then(response => response.json())
  // Traiter les données JSON
  .then(data => {
    // Sélectionner l'élément HTML avec l'ID 'temperature'
    const temperatureElement = document.getElementById('temperature');
    // Sélectionner l'élément HTML avec l'ID 'region'
    const regionElement = document.getElementById('region');
    // Accéder à la température actuelle en degrés Celsius
    const temperature = data.current.temp_c;
    // Accéder à la région de la localisation
    const location = data.location.region;
    // Mettre à jour le contenu texte de l'élément 'region' avec le nom de la région
    regionElement.textContent = `Région: ${location}`;
    // Mettre à jour le contenu texte de l'élément 'temperature' avec la température actuelle
    temperatureElement.textContent = `La température est de ${temperature}°C`;
  })
  // Gérer les erreurs potentielles lors de la requête
  .catch(error => {
    console.error('Erreur:', error);
  });

Ici, on utilise l'API de WeatherAPI pour obtenir les données météo de Paris.
On fait une requête à l'API avec l'URL appropriée, et l'API nous renvoie une réponse au format JSON.

Qu'est-ce que le JSON ?

JSON, ou JavaScript Object Notation, est un format léger d'échange de données. Il est facile à lire et à écrire pour nous, les humains, et facile à analyser et à générer pour les machines.
JSON est souvent utilisé pour transmettre des données entre un serveur et une application web. Il est devenu le format préféré pour les API parce qu'il est simple et compatible avec plein de langages de programmation.

Exemple de JSON

Voici un exemple de données en JSON :

{
  "nom": "Jean Dupont",
  "âge": 30,
  "profession": "Développeur web",
  "compétences": ["HTML", "CSS", "JavaScript"]
}

Ces données peuvent être facilement manipulées en JavaScript :

const utilisateur = {
  nom: "Donatien",
  age: 22,
  profession: "Développeur web",
  competences: ["HTML", "CSS", "JavaScript"]
};

console.log(`Nom: ${utilisateur.nom}`); // Le résultat sera Donatien
console.log(`Âge: ${utilisateur.âge}`); // Le résultat sera 22
console.log(`Profession: ${utilisateur.profession}`); // Le résultat sera Développeur web
console.log(`Compétences: ${utilisateur.compétences.join(', ')}`); // Le résultat sera HTML, CSS, JavaScript

Comment API et JSON fonctionnent ensemble ?

Quand une appli web utilise une API pour récupérer ou envoyer des données, ces données sont souvent formatées en JSON. Le serveur reçoit une requête, traite les données nécessaires et renvoie une réponse sous forme de JSON. L'appli (ton code) peut alors utiliser ces données pour mettre à jour l'interface utilisateur, afficher des infos, etc.

Exemple pratique d'utilisation conjointe d'API et JSON

Continuons avec notre exemple d'appli météo. Voici comment tu peux afficher les données météo sur une page web en utilisant HTML, JavaScript, API et JSON :

HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Application Météo</title>
</head>
<body>
  <h1>Météo à Paris</h1>
  <p id="region"></p>
  <p id="temperature"></p>
  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js) :

// Clé API pour accéder au service WeatherAPI
const apiKey = '540c66ac45cf4052a3b190704240807';

// URL de l'API WeatherAPI avec la clé API et la localisation (Paris)
const apiUrl = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=Paris`;

// Envoyer une requête à l'API WeatherAPI
fetch(apiUrl)
  // Convertir la réponse en format JSON
  .then(response => response.json())
  // Traiter les données JSON
  .then(data => {
    // Sélectionner l'élément HTML avec l'ID 'temperature'
    const temperatureElement = document.getElementById('temperature');
    // Sélectionner l'élément HTML avec l'ID 'region'
    const regionElement = document.getElementById('region');
    // Accéder à la température actuelle en degrés Celsius
    const temperature = data.current.temp_c;
    // Accéder à la région de la localisation
    const location = data.location.region;
    // Mettre à jour le contenu texte de l'élément 'region' avec le nom de la région
    regionElement.textContent = `Région: ${location}`;
    // Mettre à jour le contenu texte de l'élément 'temperature' avec la température actuelle
    temperatureElement.textContent = `La température est de ${temperature}°C`;
  })
  // Gérer les erreurs potentielles lors de la requête
  .catch(error => {
    console.error('Erreur:', error);
  });

Dans cet exemple, l'appli web envoie une requête à l'API de WeatherAPI. Le serveur répond avec des données JSON, qu'on utilise ensuite pour mettre à jour l'élément HTML et afficher la température actuelle.

Résultat :

Conclusion

Les API et le JSON sont deux outils puissants et essentiels dans le développement web moderne. Les API permettent aux applications de communiquer et de partager des données, tandis que le JSON offre un format simple et efficace pour échanger ces données.

Si tu souhaites approfondir ta compréhension, compétences sur ces deux sujets, je t'invite à pratiquer avec des API publiques et à manipuler des données JSON le plus souvent.

La pratique, la pratique et rien que la pratique te fera devenir compétent.

Happy Coding.