Les API et les échanges de données sur internet

L’acronyme d’API signifie Interface de Programmation (Application Programming Interface) mais ça ne devrait pas vraiment vous aider à comprendre. En effet, le terme est vaste ce qui témoigne de sa grande utilité en informatique. Dans cet article, nous allons surtout parler d’API web, qui se matérialise par des requêtes par le biais du protocole HTTP. C’est-à-dire que différents sites vont pouvoir communiquer entre eux et créer des interactions : récupérer et communiquer des données ou encore intégrer des fonctionnalités de l’un comme un feed Instagram sur un blog par exemple.

Un besoin de communiquer

Pour rappel, le protocole HTTP est le moyen de communication entre un serveur et un client qui est à la base du web. Pour faire simple, une API ajoute une couche entre un site web et des ressources du serveur, le plus souvent une base de données.

Pourquoi ajouter cette couche supplémentaire et ne pas communiquer directement avec la base de données ?

Une base de données est au format SQL et le langage, lui aussi appelé SQL est utilisé pour communiquer avec cette dernière. En règle générale, seul le back-end peut communiquer avec la base de données – même si c’est remis en cause par des technologies modernes telles que IndexedDB.

Par exemple, dans le cas d’un site avec WordPress, une requête SQL ressemble à ceci :

SELECT * FROM wp_posts WHERE post_status = ‘publish’;

Bien qu’elle serait écrite de cette manière dans le code :

<?php
$args = array(
    'post_type' => 'post',
    'status' => 'publish',
);

$the_query = new WP_Query($args);

Pour rappel, WordPress propose dans son socle une manière simplifiée et lisible d’écrire du code grâce à de nombreuses fonctions PHP. Si vous êtes intéressé par son fonctionnement, plus de détail sur notre article dédié.

En dehors de WordPress, mais toujours en PHP, il faudrait passer par la méthode PDO (PHP Data Objects) afin d’exécuter des requêtes :

$sql = "SELECT * FROM wp_post WHERE status = :status"; 
stmt = $pdo->prepare($sql);
$status = 'publish'; 
$stmt->bindParam(':status', $status, PDO::PARAM_STR);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

Remarquez ici que nous sommes obligés de mettre en place le nécessaire pour éviter les injections SQL, alors que c’est déjà intégré avec WordPress.

Cette requête simple a pour effet de renvoyer tous les articles publiés. Elle pourrait être enrichie afin d’instaurer une logique de pagination, de filtres par date ou bien de recherche par mot clés. Cependant, même chez WordPress, une couche d’abstraction est nécessaire. Un article est composé de beaucoup d’informations qui sont réparties dans d’autres tables : ses méta données. Auteur, images, catégorie, données SEO… Ces informations ne sont pas à disposition depuis la table “wp_post” car elles ont leurs propres tables. En effet, un auteur a aussi un nom, une adresse email, et surtout peut écrire plusieurs articles. Nous avons affaire à une relation, dans ce cas one-to-many. Un auteur peut écrire plusieurs articles, mais un article ne peut avoir qu’un seul auteur.

Toutes ces méta données doivent donc être jointes et c’est là que le SQL se complexifie et surtout alourdit le poids de le requête et allonge le temps de réponse.

C’est pour répondre à cette problématique mais également à l’avènement des applications headless (mobiles, SPA…) que les API se cachent désormais derrière beaucoup de vos sites et applications préférées.

Fonctionnement d’une API

S’il existe plusieurs types d’API que l’on peut compter sur les doigts de la main (RESTful, GraphQL, SOAP), il y a encore plus d’options pour le développement (Laravel, Directus, Ruby on Rails). Cependant, le fonctionnement reste assez proche en extérieur et peut donc être résumé en quelques concepts.

Endpoint

Un endpoint (point de terminaison en français) désigne tout simplement une URL qui peut être appelée afin de recevoir, modifier, supprimer ou créer des données. Ces informations sont cruciales pour utiliser l’API et sont donc la première étape d’une documentation.

Ces quatre actions font références aux méthodes de requête HTTP : GET (ou POST), PUT, CREATE, DELETE. En fonction de la méthode utilisée et de l’endpoint consulté, le retour sera radicalement différent.

GET et POST sont deux méthodes qui visent à récupérer des données :

La méthode GET est un format moins sécurisé qui insère les données, appelés paramètre, directement dans l’URL : monapi.com/param=true&id=1… Tout le monde peut faire une requête GET en entrant un URL depuis son navigateur. C’est très souvent utilisé pour des formulaires de recherche, c’est notre cas sur notre site :

https://www.pix-associates.com/blog/recherche?search=graphisme

La méthode POST ne peut être appelée que depuis le code (ou via des clients comme Postman) et insère les données dans le corps de la requête dans un format divers : JSON, Form Data… Cela représente le payload. Elle est de ce fait beaucoup plus sécurisée et privilégiée pour les opérations délicates impliquant des données personnelles et sensibles.

Retour JSON

Le retour de ces requêtes peut varier, mais en très grande majorité, il s’agira de JSON (littéralement JavaScript Object Notation). C’est un format de données largement utilisé, même au-delà du langage JavaScript, et qui permet de lire simplement des données plus ou moins complexes appelées objets sur la base de clés et valeurs.

Par exemple, voici le retour pour l’endpoint de l’API Swapi : https://swapi.dev/api/people/1 (vous pouvez entrer cette URL et avoir le même résultat !) :

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "https://swapi.dev/api/planets/1/",
    "films": [
        "https://swapi.dev/api/films/1/",
        "https://swapi.dev/api/films/2/",
        "https://swapi.dev/api/films/3/",
        "https://swapi.dev/api/films/6/"
    ],
    "species": [],
    "vehicles": [
        "https://swapi.dev/api/vehicles/14/",
        "https://swapi.dev/api/vehicles/30/"
    ],
    "starships": [
        "https://swapi.dev/api/starships/12/",
        "https://swapi.dev/api/starships/22/"
    ],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.dev/api/people/1/"
}

Il est facile à écrire, lisible pour un humain, et surtout utilisable quasiment partout en programmation grâce à des fonctions qui permettent d’en faire des arrays (tableaux) en PHP par exemple.

Pour faciliter l’accès à certaines données ainsi que leurs relations, des API sont souvent mises en place, notamment en lecture de données. Elle peut appartenir à ce même site, mais dans la plupart des cas elle est mise à disposition par un service tiers. Elle permet le développement de fonctionnalités plus ou moins complexes sans avoir à réinventer tout le code. Notamment, tous les gros services proposent des APIs pour une intégration facile : cartographie (Google Maps, OpenStreetMap), paiement en ligne (Stripe), météo, médias (YouTube)…

Authentification

Si de nombreuses API sont gratuites, elles ne sont pas pour autant illimitées. Au contraire, l’hébergement d’une API a un coût qui est influencé par le nombre de requêtes. Pour cela, il est utile de tracer le nombre de requêtes effectuées par une même personne afin d’imposer un quota et éviter tout dépassement.

Une API peut être protégée de plusieurs manière dont deux en majorité : un jeton (token) temporaire est généré et renvoyé par le serveur après une connexion par l’utilisateur, puis inclus dans chaque requête suivante, ou une clé API est obtenue à part puis renseignée à chaque requête.

Dans le cas d’API publiques telles que TheMovieDB, il existe un système d’attribution de clés API et il est assez facile d’en demander une, à condition d’en préciser l’utilisation. Il est fort probable que des crédits soient demandés pour des applications en production. Dans le cas d’une requête GET, il faut l’ajouter dans le paramètre “api_key” : https://api.themoviedb.org/3/movie/11?api_key=<your-api-key>

C’est sans compter sur les API qui imposent une tarification sur le nombre de requêtes, quitte à s’attirer les foudres de leur communauté : Reddit, Twitter…

Cas pratique

Quelques exemples d’API gratuites et marrantes pour s’entraîner à explorer :

Star Wars API : https://swapi.dev/

Poké API : https://pokeapi.co/

Pour le côté pédagogique, ces API sont utilisables depuis le site. La plupart du temps, le site d’une API ne proposera qu’une documentation et un développement sera à mettre en place afin de passer les requêtes. C’est ce que nous allons faire à partir d’une base React : en effet, grâce à la méthode native fetch, nous pouvons faire des requêtes GET, POST et autres en JavaScript.

Créer l’application :

npx create-react-app rest-api-app cd rest-api-app

Puis, créer un nouveau composant dans lequel la requête sera effectuée :

./src/ApiComponent.js

import React, { useState, useEffect } from "react";

const ApiComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://swapi.dev/api/films/1")
      .then((response) => response.json())
      .then((responseData) => {
        setData(responseData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h2>{data.title} ({new Date('1977-05-25').getFullYear()}) par {data.director}</h2>
        <p>{data.opening_crawl}</p>
    </div>
  );
};

export default ApiComponent;

./src/App.js

// src/App.js
import React from 'react';
import './App.css';
import ApiComponent from './ApiComponent';
function App() {
return (

REST API Example


);
}
export default App;

Puis lancer l’application et accéder à l’adresse http://localhost:3000

npm install 
npm start

Résultat :

A New Hope (1977) par George Lucas
        
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....