TD13 - API - Utilisation et création
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
Aujourd’hui, nous travaillons dans le dossier
td13
.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.
- 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
- 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 ?
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
.
- 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'];
?>
Maintenant, utilisez la variable
$taux
et adaptez votre paragraphe contenant le texte du taux d’échange.Testez.
Récuperez également la date depuis le tableau PHP généré à partir du JSON, et adaptez de nouveau votre paragraphe. Testez de nouveau.
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
- 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
Rechargez votre page plusieurs fois. Voyez-vous le mouvement de la station spatiale ?
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é.
Créez un fichier
api-tous-les-produits.php
. Ne mettez pas les balises HTML5, car nous allons créer du JSON !N’oubliez pas de copier votre fichier
connexion_base.php
dans votre dossiertd13
.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.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;
Testez dans votre navigateur.
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');
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.
- 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.
- 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 tableiss_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);
- Testez et vérifiez si à chaque appel de votre page, un nouvel enregistrement apparaît dans votre base de données.
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
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é.
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.
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.
- Ecrivez un fichier
lire-de-mon-api.php
qui lit et affiche les produits, en utilisant votre propre API.
- 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.