TD13 - API - Utilisation et création

Important

Le projet est à rendre pour le 25 avril 2025. Voici les instructions : https://www.labri.fr/perso/preuter/cswd2025/projet-a-rendre.pdf

Objectif

Dans ce TD, nous allons découvrir l’utilisation des API (Application Programming Interface) ou Interfaces de Programmation d’Applications.

Une API permet à un site ou une application d’intégrer automatiquement des données issues d’autres services, comme les taux de change, les actualités, les horaires de trains, la météo, ou encore les cours des cryptomonnaies.

Ces données sont souvent fournies au format JSON (JavaScript Object Notation), un format texte structuré, facile à lire et à traiter, notamment en JavaScript, mais aussi en PHP.

Dans un premier temps, nous allons voir comment récupérer ces données afin de les afficher dans nos pages PHP. Ensuite, nous allons voir comment les enregistrer dans une table d’une base de données MySQL pour pouvoir les exploiter dynamiquement. Et enfin, nous allons créer une propre API à partir de nos propres données issues d’un des TD précédent.

API : Motivation

Exercice 13.1 Environnement de travail

  1. Aujourd’hui, nous travaillons dans le dossier td13.

  2. Créez un nouveau fichier HTML5 simpliste s’appelant taux-echange.php avec les balises habituelles. Dans la partie <body>, créez

  • un titre h2 s’appelant “Taux d’échange”.

  • un paragraphe p qui affiche le texte “Le 2025/04/01, pour un EUR, le taux d’échange est de 1.20 USD”.

  • Testez votre page.

Exercice 13.2 Test d’une API existant

Il y a une grande diversité d’API existants sur des domaines très variés.

Dans ce TD, nous allons préférer des API gratuits qui ne nécessitent aucune inscription.

En ce qui concerne les API qui nécessitent une inscription, une fois inscrits, une clé API est fourni permettant de s’en servir, et aussi au créateur de l’API de compter le nombre de consultations, afin de limiter les accès ou proposer des plans payants.

  1. Testez l’API “frankfurter.app” permettant de récupérer des taux de devises en mettant l’URL suivant dans votre navigateur. Cet URL s’appelle aussi endpoint de l’API :

https://api.frankfurter.app/latest?from=EUR&to=USD

  1. Le résultat est donné dans le format JSON (JavaScript Object Notation). Ce format structuré permet de décrire des tableaux associatifs avec imbrications, ce qui permet facilement de lire et comprendre la signification des données renvoyées.

Quel est le taux d’échange du coup ?

Note

La description des créateurs de cet API se trouve ici : https://frankfurter.dev/.

API : intégration directe dans vos sites

Exercice 13.3 Intégration d’une API existante dans un page PHP

L’objectif de cet exercice est de dynamiquement afficher le taux d’échange dans votre page taux-echange.php.

  1. Pour récupérer les informations, insérez le code suivant au début de votre page :
<?php
// Définir l'URL de l'API Frankfurter
$url = "https://api.frankfurter.app/latest?from=EUR&to=USD";

// Récupérer le JSON depuis l'API
$json = file_get_contents($url);

// Convertir le texte JSON en tableau PHP
$data = json_decode($json, true);

// Extraire le taux de conversion EUR -> USD
$taux = $data['rates']['USD'];
?>
  1. Maintenant, utilisez la variable $taux et adaptez votre paragraphe contenant le texte du taux d’échange.

  2. Testez.

  3. Récuperez également la date depuis le tableau PHP généré à partir du JSON, et adaptez de nouveau votre paragraphe. Testez de nouveau.

Important

Ici, nous utilisons la fonction PHP file_get_contents() afin de récupérer les données d’une autre API.

Il est très courant de passe plutôt par curl, car nous pouvons y spécifier plus de paramètres, mêmes des paramètres POST, ou des clé d’autentifications. L’utilisation de curl est un plus long à intégrer, pour cela nous préférons la seule ligne de file_get_contents() ici.

Exercice 13.4 Position de la station spatiale internationale

  1. Ecrivez une page iss.php avec les balises HTML habituels, et qui permet de récupérer et afficher la position actuelle de la station spatiale internationale depuis l’URL suivant (testez l’URL avant dans votre navigateur bien sûr) :

http://api.open-notify.org/iss-now.json

  1. Rechargez votre page plusieurs fois. Voyez-vous le mouvement de la station spatiale ?

  2. Affichez également la date/heure de la dernière actualisation à partir du timestamp. Pour cela, il faut trouver l’entrée dans le JSON et le stocker dans une variable $timestamp, et ensuite vous pouvez utiliser la fonction suivante afin d’afficher la date et heure d’une manière lisible :

$date = date("Y-m-d H:i:s", $timestamp);

API : création de votre propre API

Exercice 13.5 Création de votre propre API

Dans cet exercice, nous allons créer nous-même une API. Nous allons proposer deux endpoints :

  • un endpoint permettant de récupérer les titres des derniers produits de votre table ainsi que leurs identifiants

  • un endpoint permettant de récupérer le détail d’un produit spécifique à partir d’un identifiant donné.

  1. Créez un fichier api-tous-les-produits.php. Ne mettez pas les balises HTML5, car nous allons créer du JSON !

  2. N’oubliez pas de copier votre fichier connexion_base.php dans votre dossier td13.

  3. Récupérez les titres et identifiants de vos produits avec une requête SQL, et stockez les enregistrements récupéré dans un tableau $enregistrements comme on l’a fait de l’habitude dans le cadre de ce cours.

  4. Transformez votre tableau $enregistrements en JSON et affichez le comme suit.

// Transformer le tableau en JSON
$json = json_encode($enregistrements);

// Afficher le JSON
echo $json;
  1. Testez dans votre navigateur.

  2. Très probablement, votre navigateur affiche la sortie brute JSON, sans formatage, car il n’a pas reconnu le format. Pour palier à ça, vous pouvez ajouter en tout début de votre fichier PHP l’instruction suivant :

header('Content-Type: application/json; charset=utf-8');
Note

Généralement, les endpoints des API ne font pas apparaître ni des noms de fichiers, ni le ? et & afin de spécifier des paramètres. Leur format est plutôt par exemple :

Pour tous les produits https://votre-api.fr/produits/

et pour un produit spécifique (ici identifiant 17): https://votre-api.fr/produits/17/

Afin de permettre ce format, une procédure de réécriture d’URL (URL rewriting) est utilisée, transformant ces URLs en URLs qui appellent les fichiers PHP avec spécification de paramètres par ? et &. Ce URL rewriting est couramment utilisé, est défini dans des fichier .htaccess sur les serveurs web.

L’URL rewriting est assez difficile à debugger, et certaines choses dépendent des serveurs spécifique utilisés. Pour cela, nous n’allons pas approfondir ce sujet ici.

API : intégration via une base de données

Exercice 13.6 Intégrer le résultat d’une API existante dans une base de données

Dans cet exercice, nous allons récupérer des informations d’une API, et nous allons les enregistrer dans une base de données. Ceci a deux avantages principaux :

  • en stockant les données récupérées dans votre base de données, vous n’avez pas besoin d’appeler l’API à chaque accès à vos pages de vos internautes - ce qui peut-etre conséquent et vous faire dépasser les limites des consultations des API.

  • de plus, vous gardez un historique des évolutions des données, qui vous permet de faire des statistiques, des graphes, etc.

  1. Dans votre base de données,, créez une table iss_position avec les champs suivants :
  • un champs INT qui s’appelle id avec un index de clé primaire (PRIMARY) ainsi que “auto-increment” (A_I),

  • un champs latitude de type FLOAT,

  • un champs longitude de type FLOAT,

  • ainsi qu’un champs dateactualisation de type DATETIME.

  1. Créez une page insertion-position-iss-bdd.php avec des balises HTML5 habituelles. Cette page doit récupérer la position de la station spatiale, et ensuite créer un nouvel enregistrement dans la table iss_position.

Notez que le format date de l’API est un timestamp que vous pouvez, par exemple, convertir en un format DATETIME mysql avec la fonction php date() comme suit :

$date = date("Y-m-d H:i:s", $timestamp);
  1. Testez et vérifiez si à chaque appel de votre page, un nouvel enregistrement apparaît dans votre base de données.
Note

Afin de mettre à jour régulièrement votre table iss_position, il y a plusieurs possibilités :

  • l’utilisation des tâches automatisées de votre serveur web (souvent implémenté dans des crontab)

  • ou, vous comptez sur un public régulier sur vos pages webs, et vous mettez à jour votre table dès qu’un utilisateur vient sur n’importe quelle page de votre site web. Afin de limiter le nombre de consultations de l’API, avant d’appeler l’API, vous pouvez tester la dernière actualisation dans votre table iss_position

Exercices optionnels

Exercice 13.7 Carte pour la position de la station spatiale internationale

  1. Pour l’exercice 13.4, affichez une carte Leaflet.js avec un marqueur sur la position actuelle de la station spatiale internationale. Utilisez un facteur de zoom adapté.

  2. A l’aide de la table que vous avez créée dans l’exercice 13.6, créez aussi des marqueurs pour les denières 5 positions récupérés.

  3. Adaptez la création des marqueurs pour avoir des espacements dans le temps plus importants.

Expérimentez avec vos propres idées.

Exercice 13.8 Lire des informations de votre propre API

Bien évidemment, vous pouvez maintenant écrire un fichier PHP qui permet de récupérer les informations de votre propre API, comme dans l’exercice 13.2.

  1. Ecrivez un fichier lire-de-mon-api.php qui lit et affiche les produits, en utilisant votre propre API.
Important
  • Ceci est le dernier TD de cet UE. Pour l’examen terminal, n’oubliez pas que vous pouvez vous fabriquer une feuille A4 recto-verso manuscrite et non photocopiée.