Interagir avec une

API REST
 Table des
matières

Objectifs

I - Interroger une API REST avec un client web

1. Les outils pour interroger une API REST

2. Interroger une API Rest avec l'outil POSTMAN

II - Exercice : Activité d'auto-évaluation 1

III - Interroger avec une API REST en JavaScript

1. Consommer des APIs Rest en Javascript

2. Aller plus loin avec l'API fetch

IV - Exercice : Activité d'auto-évaluation 2

V - Travaux pratiques : Interroger l'API REST Restcountries avec Postman

1. Présentation de L'Api restcountries

2. Les requêtes d'interrogation

Objectifs

À la fin de cette leçon, l'apprenant sera capable de :

Interroger une API REST avec un client web
Interroger une API REST en Javascript
Interroger avec l'outils Postman l'API Restcountries
 Interroger une API REST avec un client web
Interroger une API REST avec un client web

Interroger une API REST

avec un client web I

Les outils pour interroger une API REST

Les outils pour interroger une API REST

1. Les outils pour interroger une API REST

Postman

- Postman est un très puissant et célèbre outil pour faire des requêtes sur des API. Il existe en version
desktop installable ou en application extension chrome.
Le site officiel est : https://www.postman.com.
lien de téléchargement officiel : https://www.postman.com/downloads
Autres liens :
https://app.getpostman.com/app/download/win64
https://www.01net.com/telecharger/windows/Internet/internet_utlitaire/fiches/152985.html
https://postman.fr.softonic.com
- Son interface est similaire à celle-ci :

- En mode extension chrome, après installation on y accède en allant dans les extensions de Google Chrome
ou bien en saisissant dans chrome chrome://apps/ , puis en cliquant sur l'icône de Postman pour l'ouvrir.

Advanced REST Client

C'est aussi une bonne alternative à Postman pour faire des requête http sur des API REST.
lien de téléchargement :
https://install.advancedrestclient.com/install
En mode extension chrome  : https://chrome.google.com/webstore/detail/advanced-rest-
client/hgmloofddffdnphfgcellkdfbfbjeloo
 HTTPRequester, l'add-on pour Firefox

Si vous travaillez sur Firefox, cet add-on vous permet de faire des requêtes HTTP/S simplement. Le tout
directement à partir de la barre d'outils du navigateur ou de tools.
lien : https://addons.mozilla.org/en-US/firefox/addon/http-request-maker

Curl

C'est un puissant outil en ligne de commande utilisé dans l'univers Linux ou Unix pour faire des requêtes http. Il
peut aussi être utilisé sous windows.
Liens :
https://curl.se/download.html
https://www.thewindowsclub.com/how-to-install-curl-on-windows-10
https://devstory.net/11617/installer-curl-sur-windows
son
Interroger une API Rest avec l'outil POSTMAN
Interroger une API Rest avec l'outil POSTMAN

2. Interroger une API Rest avec l'outil POSTMAN

La structure des requêtes

Chaque requête a une structure spécifique qui a cette forme : Verbe HTTP + URI + Version
- HTTP + Headers + Body (facultatif)

- L'aspect peut varier en fonction du logiciel ou du langage utilisé.

- Nous nous baserons sur Postman pour mieux expliquer les choses.

Les principales fonctionnalités sont :

- ( 1 ) : Ici vous pouvez choisir le type de requête à envoyer : GET, POST, PUT, etc. Vous pouvez la
modifier comme suit :
 - ( 2 ) : L'URL de l'API.
Ex :
- http://api.monApp.com/utilisateurs/
- https://api.twitter.com/1.1/users/show.json?screen_name=rsarver
- ( 3 ) : Les paramètres à passer avec l'URL. Dans le cas où vous avez des paramètres nommés comme ?
prenom=paul, vous allez pouvoir ajouter dans le formulaire comme paramètre prenom et comme valeur
paul.
- ( 4 ) : Ici vous retrouverez les connections que vous avez créées..
- ( 5 ) : Ici vous trouverez tout ce qui constitue une requête Http (header, body, etc.). Vous pouvez à partir
de là créer votre requête de façon totalement personnalisée.
- Un header (ou en-tête) vous permet de faire passer des informations supplémentaires sur le
message. Les headers sont représentés par une paire clé et valeur.
Par exemple :
De quel langage s'agit-il ?
Quelle est votre clé d'authentification ?
À quelle date l'envoyez-vous ?

- Le body permet de formuler une requête, il n'est utilisé qu'avec PUT (mise à jour) ou POST
(création). Il contient les données réelles de la ressource que vous essayez de créer ou de mettre à
jour. Les données sont envoyées généralement sous format JSON.

La structure des réponses

Le format du message de réponse est très similaire à celui de la requête :

Version HTTP + Code de réponse HTTP + Headers + Body
- Ex de réponse :

- La réponse peut contenir un message d'erreur, le body peut contenir un message d'erreur suivant :
- Dans le cas d'une requête correcte, nous avons le code de retour 200. S'il y a un échec ou une erreur
d'adresse, on a le code de retour 404.
En général, les règles de base pour les codes de réponse HTTP sont les suivantes :
100+ ➡ Information
200+ ➡ Succès
300+ ➡ Redirection
400+ ➡ Erreur client
500+ ➡ Erreur serveur
 Exercice : Activité d'auto-évaluation 1
Exercice : Activité d'auto-évaluation 1

Exercice : Activité d'auto-

évaluation 1 II

Exercice : Les outils pour interroger une API

Quelques outils pour interroger une API sont :

 Advanced REST Client

 Advance RESTE Client

 POSTMAN

 POSTAM

 httpsReq
Exercice : La forme d'une requête HTTP
Une requête HTTP est de la forme :

 Verbe HTTP + URI + Headers + Body + Version HTTP

 Verbe HTTP + Headers + URI + Version HTTP + Body

 Verbe HTTP + Headers + URI + Version HTTP + Body

 Verbe HTTP + URI + Version HTTP + Headers + Body

 Interroger avec une API REST en JavaScript
Interroger avec une API REST en JavaScript

Interroger avec une API

REST en JavaScript III

Consommer des APIs Rest en Javascript

Consommer des APIs Rest en Javascript

1. Consommer des APIs Rest en Javascript

Il est aussi possible d'interagir avec une API avec un langage de programmation, c'est le moyen d'interaction le
plus utilisé et le plus utile.
Ci-dessous quelques codes en js ou jquery pour faire des requêtes sur une API.

1 // Script en JS
2 let requestURL = 'https://mdn.github.io/learning-
area/javascript/oojs/json/superheroes.json';
3 let request = new XMLHttpRequest();
4 request.open('GET', requestURL);
5 request.responseType = 'json';
6 request.send();
7
8 request.onload = function() {
9 const reponse = request.response;
10 ...
11 }

1 // Script en jQuery
2 $(document).ready(function () {
3
4 // données à passer à la requête si néccessaire au format json
5 //equivaut dans le cas de GET à ?nom=Koffi&age=27
6 var rData = { nom: 'Koffi', age: 27 }
7 //fonction à appeler pour le traitement à faire suite à l'appel de l'API
8 function onsuccess(data, status, jqxhr) {
9 console.log(data);
10 }
11
12 // au niveau du 'type' on a soit GET, POST, DELETE, PUT
13 // ex d'url: https://api.github.com/users/yao
14 $.ajax({ url: 'http://mondomaine/api/collection',
15 data: params,
16 datatType: 'json',
17 type: 'GET'
18 success: onsuccess
19 });
20 });

1 // Au click sur le bouton, on declenche l'appel

2 $("#btn").click(function() {
 3 $.ajax({
4 method: "GET",
5 url: 'http://mondomaine/api/collection',
6 dataType: "json"
7 })
8 .done(function(data) {
9 /* Traitement à faire quand tous se passe bien après l'appel */
10 console.log(data);
11 $(".baconText").text(data[0]);
12 })
13 .fail(function() {
14 // Traitement à faire en cas d'erreur suite à l'appel
15 alert("no good");
16 });
17 });

Aller plus loin avec l'API fetch

Aller plus loin avec l'API fetch

2. Aller plus loin avec l'API fetch

Dans cette section, nous allons apprendre l'API Fetch et sa méthode fetch() qui correspondent à la “nouvelle
façon” d'effectuer des requêtes HTTP.
Il est supporté à partir de Firefox 39 et supérieur, et sur Chrome 42 et supérieur. Il n'est pas supporté par IE11.
Mais nous avons un polyfill Fetch disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent
pas.
Cette API est plus flexible et plus puissante que l'ancien objet XMLHttpRequest.
- Les interfaces Request et Response représentent respectivement une requête et la réponse à une requête.
L'interface Headers représente les en-têtes de requête et de réponse tandis que le mixin Body fournit un
ensemble de méthodes nous permettant de gérer le corps de la requête et de la réponse.
- L'API Fetch va également utiliser la méthode globale fetch() qui représente en quelques sortes le cœur de
celle-ci. Cette méthode permet l'échange de données avec le serveur de manière asynchrone.
- La méthode fetch() prend en unique argument obligatoire le chemin de la ressource qu'on souhaite
récupérer. Mais accepte un second paramètre, optionnel ; un objet init qui vous permet de contrôler un
certain nombre de réglages.
- La méthode fetch() renvoie une promesse (un objet de type Promise) qui va se résoudre avec un objet
Response.
Pour récupérer le corps de la réponse, nous allons pouvoir utiliser les méthodes de l'interface Response en
fonction du format qui nous intéresse :
- La méthode text() retourne la réponse sous forme de chaine de caractères ;
- La méthode json() retourne la réponse en tant qu'objet JSON ;
- La méthode formData() retourne la réponse en tant qu'objet FormData ;
- La méthode arrayBuffer() retourne la réponse en tant qu'objet ArrayBuffer ;
- La méthode blob() retourne la réponse en tant qu'objet Blob ;

1 // Ex code
2 fetch("https://www.une-url.com")
3 .then(response => response.json())
4 .then(response => alert(JSON.stringify(response)))
5 .catch(error => alert("Erreur : " + error));

response.json() renvoie également une promesse contenant la réponse à votre demande en JSON. On utilise
JSON.stringify() pour transformer notre objet JSON en une chaine JSON et on affiche cette chaine.

Passer des options à fetch()

Comme on l'a dit plus tôt, la méthode fetch() accepte un deuxième argument. Cet argument est un objet qui va
nous permettre de définir les options de notre requête. On va pouvoir définir les options suivantes :
- method : méthode utilisée par la requête. Les valeurs possibles sont GET (défaut), POST, etc.) ;
- headers : les en-têtes qu'on souhaite ajouter à notre requête ;
- body : un corps qu'on souhaite ajouter à notre requête ;
- referrer : un référant. Les valeurs possibles sont "about:client" (valeur par défaut), "" pour une absence de
référant, ou une URL ;
- referrerPolicy : spécifie la valeur de l'en-tête HTTP du référent. Les valeurs possibles sont no-referrer-
when-downgrade (défaut), no-referrer, origin, origin-when-cross-origin et unsafe-url ;
- mode : spécifie le mode qu'on souhaite utiliser pour la requête. Les valeurs possibles sont cors (défaut),
no-cors et same-origin ;
- credentials : les informations d'identification qu'on souhaite utiliser pour la demande. Les valeurs possibles
sont same-origin (défaut), omit et include ;
- cache : le mode de cache qu'on souhaite utiliser pour la requête. Les valeurs possibles sont default (défaut),
no-store, reload, no-cache, force-cache et only-if-cached ;
- redirect : le mode de redirection à utiliser. Valeurs possibles : follow (défaut), manual, error ;
- integrity : contient la valeur d'intégrité de la sous-ressource de la demande. Valeurs possibles : "" (défaut)
ou un hash ;
- keepalive : permet à une requête de survivre à la page. Valeurs possibles : false (défaut) et true ;
- signal : une instance d‘un objet AbortSignal qui nous permet de communiquer avec une requête fetch() et
de l'abandonner.

1 let promise = fetch(url, {

2 method: "GET", //ou POST, PUT, DELETE, etc.
3 headers: {
4 "Content-Type": "text/plain;charset=UTF-8" //pour un corps de type chaine
5 },
6 body: undefined, //ou string, FormData, Blob, BufferSource, ou URLSearchParams
7 referrer: "about:client", //ou "" (pas de réferanr) ou une url de l'origine
8 referrerPolicy: "no-referrer-when-downgrade", //ou no-referrer, origin, same-
origin...
9 mode: "cors", //ou same-origin, no-cors
10 credentials: "same-origin", //ou omit, include
11 cache: "default", //ou no-store, reload, no-cache, force-cache, ou only-if-cached
12 redirect: "follow", //ou manual ou error
13 integrity: "", //ou un hash comme "sha256-abcdef1234567890"
14 keepalive: false, //ou true pour que la requête survive à la page
15 signal: undefined //ou AbortController pour annuler la requête
16 });

1 // Ici on fait un appel POST avec les données d'un formulaire

2 var form = new FormData(document.getElementById('login-form'));
3 fetch("/login", {
4 method: "POST",
5 body: form
6 })

1 function addItem() {
2 const uri = 'api/TodoItems';
3 const item = {
4 isComplete: false,
5 name: "etude"
6 time: 3
7 };
8
9 fetch(uri, {
10 method: 'POST',
11 headers: {
12 'Accept': 'application/json',
13 'Content-Type': 'application/json'
14 },
15 body: JSON.stringify(item)
16 })
17 .then(response => {
18 const data = response.json()
19 // Traitement à faire
20 })
21 .catch(error => console.error('Ajout imposible', error));
22 }
 Exercice : Activité d'auto-évaluation 2
Exercice : Activité d'auto-évaluation 2

Exercice : Activité d'auto-

évaluation 2 IV

Exercice : Les manières d'interroger une API Rest

On peut interroger une API Rest :

 par POSTAM

 par POSTMAN

 en Javascript

 en HTML

 en Pyhton

 en JSON
Exercice
L'API            permet d'effectuer des requêtes http en JavaScript
 Travaux pratiques : Interroger l'API REST Restcountries avec Postman
Travaux pratiques : Interroger l'API REST Restcountries avec Postman

Travaux pratiques :
Interroger l'API REST V
Restcountries avec
Postman
Présentation de L'Api restcountries
Présentation de L'Api restcountries

1. Présentation de L'Api restcountries

Présentation de L'Api restcountries

- L'api restcountries permet d'avoir les informations sur tous les pays du monde.
- L'url est : https://restcountries.eu
- C'est est une plateforme open source également qui met à disposition des développeurs, des données sur
chaque pays du monde à travers une API REST telles que:
- Le nom original du pays;
- La traduction du nom en d'autres langues telles que le Français, l'Allemand, l'Italien ,etc.
- La capitale;
- La superficie;
- La population;
- Les pays limitrophes;
- La devise du pays;
- etc.
Dans cette section nous allons utiliser l'outil postman pour interagir avec l'api restcountries.

Les endpoints de l'API Restcountries

L'api restcountries dispose de plusieurs endpoints qui sont :

- https://restcountries.eu/rest/v2/all  : il permet d'avoir la liste de tous les pays ainsi les informations les
concernant.
- https://restcountries.eu/rest/v2/name/{name} : il permet de récupérer les informations sur un pays par le
biais de son nom natif ou partiel (name).
- https://restcountries.eu/rest/v2/name/{name}?fullText=true  : il permet de rechercher ou récupérer les
infos sur un pays par le biais de son nom entier.
- https://restcountries.eu/rest/v2/alpha/{code}  : il permet de rechercher un pays par le biais de son code
ISO.
- https://restcountries.eu/rest/v2/currency/{currency} : il permet de rechercher un ou plusieurs pays par le
biais de leur monnaie.
- https://restcountries.eu/rest/v2/lang/{et}  : il permet de rechercher un ou plusieurs pays par le bais de la
langue.
- https://restcountries.eu/rest/v2/capital/{capital} : il permet de recherche un pays par le bais de sa capitale.
 https://restcountries.eu/rest/v2/callingcode/{callingcode} : il permet de rechercher un pays par le bais de
-
son code d'appel
- https://restcountries.eu/rest/v2/region/{region} : il permet de rechercher des pays par région.
Les requêtes d'interrogation
Les requêtes d'interrogation

2. Les requêtes d'interrogation

Récupération de tous les pays

On lance l'application Postman et initie unee nouvelle requête http soit en cliquant sur "new" ou "new http
request".
puis son saisie l'url https://restcountries.eu/rest/v2/all dans la barre d'adresse de postman. On s'assure que la
méthode GET est sélectionnée dans la liste des méthode à gauche de la barre d'adresse. Puis en valide en cliquant
sur le bouton send. On obtient la liste des pays dans l'onglet Body en bas de la bar de recherche.

Recherche de pays par nom entier

Nous récupérons les infos sur le Ghana, on a : https://restcountries.eu/rest/v2/name/ghana?fullText=true

Recherche par code d'appel

Recherchons avec le code 225 : https://restcountries.eu/rest/v2/callingcode/225

Recherche par région

Recherchons avec la région africa : https://restcountries.eu/rest/v2/region/africa

Les requêtes POST, PUT et DELETE

Il est aussi possible de faire dans postman des réquête d'ajout (POST), de modification (PUT) et de suppression
(DELETE).
Mais en ce qui concerne l'api restcountries, nous n'avons pas le droit de faire des ajouts, modifications et
suppressions de pays.
Par exemple si on veut supprimer le pays ayant la capital yamoussoukro, on peut avoir une requête comme dans
l'image ci-dessous. Remarquez que la méthode DELETE est sélectionnée à gauche dans la liste des méthodes se
trouvant à gauche de la barre d'adresse.

Dans le cas d'un ajout c'est la méthode POST qui est utilisée et on définie sous forme d'objet JSON dans l'onglet
Body en bas de la barre d'adresse les informations concernant le pays à ajouter.