TP — Découverte des Services Web REST

TRAVAUX PRATIQUES
Services Web REST
Outils : JSON Server · cURL · Postman

Page 1 / 14
 TP — Découverte des Services Web REST

1. Ce que vous allez apprendre

Ce TP est une première découverte des services web REST. Vous n’avez besoin d’aucune
connaissance préalable : tout sera expliqué au fur et à mesure.
À la fin du TP, vous saurez :
• Expliquer ce qu’est un service web REST.
• Reconnaître les verbes HTTP (GET, POST, PUT, DELETE) et savoir quand les utiliser.
• Lire et interpréter les codes de réponse HTTP (200, 201, 404, etc.).
• Envoyer des requêtes à une API avec cURL (ligne de commande) et Postman (interface
graphique).
• Manipuler des données au format JSON.

1.1 Ce qu’il vous faut avant de commencer

• [Link] installé (téléchargeable gratuitement sur [Link]
• Postman installé ([Link]
• cURL : déjà présent sur macOS, Linux et Windows 10/11.
• Un éditeur de texte quelconque (Notepad, VS Code, TextEdit…).

Page 2 / 14
 TP — Découverte des Services Web REST

2. Comprendre : qu’est-ce qu’une API REST ?

2.1 Une API, c’est quoi ?
Imaginez un restaurant. Vous, le client, vous ne rentrez pas dans la cuisine pour préparer votre plat.
Vous passez par un serveur : vous lui demandez un plat, il va en cuisine, puis il vous apporte votre
commande.
Une API (Application Programming Interface) joue exactement ce rôle de serveur. C’est un
intermédiaire qui permet à un programme (votre navigateur, une appli mobile…) de demander des
données ou des services à un autre programme, sans savoir comment il fonctionne à l’intérieur.

2.2 Et REST, alors ?

REST est simplement une manière de concevoir des APIs. Une API « REST » respecte quelques règles
simples qui la rendent prévisible et facile à utiliser. Ces règles s’appuient sur le protocole HTTP, celui
que vous utilisez tous les jours sans le savoir quand vous visitez un site web.

2.3 Les 3 ingrédients d’une requête REST

Chaque fois que l’on interroge une API REST, on envoie une requête composée de trois choses :

Ingrédient Explication Exemple

Une URL L’adresse de la donnée qui nous intéresse [Link]
(on l’appelle une « ressource »).
Un verbe L’action que l’on veut faire sur cette GET, POST, PUT, DELETE
ressource.
Parfois un Des données à envoyer (en format JSON). {"nom": "Stylo", "prix": 2}
corps

2.4 Les 4 verbes à connaître absolument

Verbe Action Exemple en français
GET Lire / récupérer « Donne-moi la liste des produits »
POST Créer « Ajoute un nouveau produit »
PUT Modifier « Remplace le produit n°1 »
DELETE Supprimer « Supprime le produit n°1 »

2.5 Les codes de réponse

Après chaque requête, le serveur renvoie un code à 3 chiffres qui indique ce qui s’est passé. C’est
comme un accusé de réception.

Page 3 / 14
 TP — Découverte des Services Web REST

Code Signification
2xx Tout va bien (200 = OK, 201 = Créé, 204 = Supprimé)
4xx Le client a fait une erreur (404 = Introuvable, 400 = Mauvaise requête)
5xx Le serveur a planté

L’astuce pour retenir

2xx = vert, 4xx = c’est ta faute, 5xx = c’est la faute du serveur.

2.6 JSON, le langage des APIs

Les APIs REST échangent des données en JSON. C’est un format texte très simple, facile à lire pour un
humain comme pour un programme.
Exemple d’un produit représenté en JSON :

{
"id": 1,
"nom": "Clavier",
"prix": 49.90,
"stock": 12
}

Retenez simplement : des accolades, des champs entre guillemets, des valeurs séparées par des
virgules.

Page 4 / 14
 TP — Découverte des Services Web REST

3. Lancer votre propre API en 3 minutes

Pour tester une API REST, il nous en faut une ! Nous allons utiliser JSON Server, un outil qui crée une
vraie API REST à partir d’un simple fichier JSON. Aucune ligne de code à écrire pour la partie serveur.

3.1 Installer JSON Server

Ouvrez un terminal (Invite de commandes sur Windows, Terminal sur macOS/Linux) et tapez :

npm install -g json-server@0.17.4

Important
Nous installons volontairement la version 0.17.4, plus simple pour débuter. Les versions plus
récentes ont une syntaxe différente.

3.2 Créer le fichier de données

Sur votre bureau, créez un dossier nommé tp-rest. À l’intérieur, créez un fichier [Link] avec le
contenu suivant :

{
"produits": [
{ "id": 1, "nom": "Clavier", "prix": 49.90, "stock": 12 },
{ "id": 2, "nom": "Souris", "prix": 19.50, "stock": 30 },
{ "id": 3, "nom": "Écran", "prix": 229.00, "stock": 5 }
],
"utilisateurs": [
{ "id": 1, "nom": "Amira", "email": "amira@[Link]" },
{ "id": 2, "nom": "Karim", "email": "karim@[Link]" }
]
}

3.3 Démarrer le serveur

Dans votre terminal, placez-vous dans le dossier tp-rest :

cd Desktop/tp-rest (macOS / Linux)

cd Desktop\tp-rest (Windows)

Puis démarrez le serveur :

json-server --watch [Link] --port 3000

Vous devriez voir apparaître :

\{^_^}/ hi!

Loading [Link]
Done

Resources
[Link]
[Link]

Page 5 / 14
 TP — Découverte des Services Web REST

Home
[Link]

Félicitations
Vous venez de lancer une vraie API REST sur votre ordinateur ! Elle tourne en local à l’adresse
[Link] Laissez ce terminal ouvert pendant tout le TP.

3.4 Premier test dans le navigateur

Ouvrez votre navigateur et allez à l’adresse :

[Link]

Vous devriez voir la liste de vos produits au format JSON. Essayez aussi :

[Link]
[Link]

Le navigateur ne sait faire que du GET. Pour tester POST, PUT, DELETE, il nous faut des outils plus
puissants : cURL et Postman.

Page 6 / 14
 TP — Découverte des Services Web REST

4. Tester avec cURL (ligne de commande)

cURL est un outil en ligne de commande pour envoyer des requêtes HTTP. On l’utilise dans un
terminal. C’est l’outil de base de tout professionnel du web.

Ouvrez un second terminal

Le premier terminal doit continuer à faire tourner JSON Server. Ouvrez-en un nouveau pour taper
vos commandes cURL.

4.1 Les options cURL à connaître

Option À quoi ça sert
-X Préciser le verbe (GET, POST, PUT, DELETE)
-H Ajouter un en-tête HTTP
-d Envoyer des données dans le corps
-i Afficher aussi la réponse du serveur (code + en-têtes)

4.2 Exercice 1 — GET : lire tous les produits

Tapez dans votre terminal :

curl -i [Link]

Réponse attendue :

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

[
{ "id": 1, "nom": "Clavier", "prix": 49.9, "stock": 12 },
{ "id": 2, "nom": "Souris", "prix": 19.5, "stock": 30 },
{ "id": 3, "nom": "Écran", "prix": 229, "stock": 5 }
]

À observer :
• Le code 200 OK : tout s’est bien passé.
• Le corps de la réponse contient les données en JSON.

4.3 Exercice 2 — GET : lire un seul produit

curl -i [Link]

Et maintenant essayez un produit qui n’existe pas :

curl -i [Link]

Observez le code 404 Not Found : la ressource demandée n’existe pas.

Page 7 / 14
 TP — Découverte des Services Web REST

4.4 Exercice 3 — POST : créer un nouveau produit

Pour envoyer un objet JSON, il faut deux choses : l’option -H pour préciser le format, et l’option -d
pour le contenu.

Sur macOS / Linux :

curl -i -X POST [Link] \

-H "Content-Type: application/json" \
-d '{"nom": "Casque", "prix": 79.90, "stock": 8}'

Sur Windows (Invite de commandes), on double les guillemets :

curl -i -X POST [Link] ^

-H "Content-Type: application/json" ^
-d "{\"nom\": \"Casque\", \"prix\": 79.90, \"stock\": 8}"

Réponse attendue :

HTTP/1.1 201 Created

Content-Type: application/json; charset=utf-8

{
"nom": "Casque",
"prix": 79.9,
"stock": 8,
"id": 4
}

Points à observer :
• Code 201 Created : la ressource a été créée. Ce n’est pas un 200 !
• Le serveur a automatiquement ajouté un id (4).
• Ouvrez votre fichier [Link] : vous verrez que le casque y a été ajouté.

4.5 Exercice 4 — PUT : modifier un produit

PUT remplace un produit par une nouvelle version. Il faut envoyer tous les champs.

curl -i -X PUT [Link] \

-H "Content-Type: application/json" \
-d '{"nom": "Clavier sans fil", "prix": 59.90, "stock": 10}'

Réponse : 200 OK. Vérifiez le changement :

curl [Link]

4.6 Exercice 5 — DELETE : supprimer un produit

curl -i -X DELETE [Link]

Réponse : 200 OK avec un corps vide {}.

Vérifiez que la souris a disparu :

Page 8 / 14
 TP — Découverte des Services Web REST

curl [Link]

4.7 Exercice 6 — Filtres et recherche (bonus)

JSON Server propose des filtres bien pratiques. Essayez :

curl "[Link]
curl "[Link]
curl "[Link]

Les guillemets autour de l’URL sont nécessaires à cause du caractère ?.

4.8 À vous — Mini-défi cURL

1. Ajoutez un nouveau utilisateur (nom et email de votre choix) via POST.
2. Listez tous les utilisateurs pour vérifier.
3. Modifiez l’email de votre utilisateur via PUT.
4. Supprimez-le via DELETE.
5. Relistez les utilisateurs : il ne doit plus être là.
6. Pour chaque étape, notez dans un fichier texte le code HTTP de réponse.

Page 9 / 14
 TP — Découverte des Services Web REST

5. Tester avec Postman (interface graphique)

cURL est puissant mais austère. Postman propose une interface visuelle pour construire,
sauvegarder et organiser vos requêtes. C’est l’outil préféré de la plupart des professionnels pour
tester des APIs.

5.1 Créer une collection

Une collection est un dossier qui regroupe des requêtes liées entre elles.
7. Ouvrez Postman.
8. Dans le panneau de gauche, cliquez sur Collections puis sur le bouton « + ».
9. Nommez la collection : « TP REST — Ma première API ».

5.2 Requête 1 — GET tous les produits

10. Clic droit sur votre collection > Add request.
11. Nommez la requête : « Lister les produits ».
12. Laissez la méthode sur GET.
13. Dans la barre d’URL, tapez : [Link]
14. Cliquez sur Send.
15. Observez en bas : le corps de la réponse, le code HTTP (200 OK), et le temps de réponse.

5.3 Requête 2 — GET un produit par id

16. Ajoutez une nouvelle requête : « Détail d’un produit ».
17. Méthode : GET.
18. URL : [Link]
19. Cliquez sur Send. Code attendu : 200.
20. Changez l’URL vers /produits/999. Code attendu : 404.

5.4 Requête 3 — POST créer un produit

21. Ajoutez une requête : « Créer un produit ».
22. Méthode : POST.
23. URL : [Link]
24. Cliquez sur l’onglet Body.
25. Sélectionnez raw puis, dans le menu déroulant à droite, choisissez JSON.
26. Collez ce contenu :
{
"nom": "Webcam",
"prix": 39.90,
"stock": 15
}

Page 10 / 14
 TP — Découverte des Services Web REST

27. Cliquez sur Send.

28. Vérifiez : code 201 Created, et un id a été attribué.

Astuce Postman
Pas besoin d’ajouter Content-Type : application/json dans les headers. Postman l’ajoute
automatiquement dès que vous choisissez « JSON » dans le Body.

5.5 Requête 4 — PUT modifier un produit

29. Ajoutez une requête : « Modifier un produit ».
30. Méthode : PUT.
31. URL : [Link]
32. Body > raw > JSON :
{
"nom": "Clavier gamer",
"prix": 89.90,
"stock": 7
}

33. Send. Code attendu : 200.

5.6 Requête 5 — DELETE supprimer un produit

34. Ajoutez une requête : « Supprimer un produit ».
35. Méthode : DELETE.
36. URL : [Link]
37. Send. Code attendu : 200.
38. Pour vérifier, rejouez la requête « Lister les produits » : l’écran a disparu.

5.7 Exercice final — Scénario complet

Dans Postman, construisez un scénario qui enchaîne ces étapes :
39. Créer un utilisateur Hichem avec l’email hichem@[Link].
40. Lister tous les utilisateurs et vérifier qu’il apparaît bien.
41. Modifier son email en [Link]@[Link].
42. Récupérer son fiche par id pour confirmer la modification.
43. Le supprimer.
44. Tenter de le récupérer à nouveau : observez le code 404.

5.8 Sauvegarder votre travail

Votre collection Postman peut être exportée au format JSON pour être partagée ou rendue avec
votre compte-rendu :

Page 11 / 14
 TP — Découverte des Services Web REST

45. Clic droit sur la collection > Export.

46. Choisissez « Collection v2.1 ».
47. Enregistrez le fichier dans votre dossier tp-rest.

Page 12 / 14
 TP — Découverte des Services Web REST

6. Récapitulatif
Prenez un instant pour consolider ce que vous avez vu. Vous avez utilisé une vraie API REST et vous
avez fait les 4 opérations de base :

Opération Verbe URL Code attendu

Lire tous les produits GET /produits 200
Lire un produit GET /produits/1 200 ou 404
Créer un produit POST /produits 201
Modifier un produit PUT /produits/1 200
Supprimer un produit DELETE /produits/1 200

L’essentiel en une phrase

Une API REST, c’est un verbe HTTP qui s’applique sur une URL et qui renvoie un code HTTP et des
données en JSON.

7. Questions de réflexion
Répondez brièvement (2-3 phrases) à chaque question dans votre compte-rendu :
48. Quelle est la différence entre GET et POST ?
49. Pourquoi POST renvoie-t-il 201 et pas 200 ?
50. Que signifie le code 404 ? Donnez un exemple que vous avez rencontré dans le TP.
51. Que se passe-t-il si vous arrêtez JSON Server (Ctrl+C) puis essayez une requête ? Quel type
d’erreur obtenez-vous ?
52. Pourquoi utilise-t-on JSON plutôt que, par exemple, du texte brut pour les échanges ?

8. À rendre
Rendez dans un dossier nommé TP_REST_VotreNom.zip :
• Votre fichier [Link] final (après toutes vos manipulations).
• Votre collection Postman exportée (fichier .json).
• Un bref compte-rendu (1 à 2 pages, format .pdf ou .docx) contenant :
– — Les réponses aux 5 questions de réflexion.
– — Au moins 3 captures d’écran de Postman (une requête GET, une POST, une erreur
404).
– — Pour chaque mini-défi cURL (section 4.8), la commande tapée et le code de
réponse obtenu.

Page 13 / 14
 TP — Découverte des Services Web REST

9. Pour aller plus loin (optionnel)

• Ajoutez une nouvelle collection de données dans [Link] (par exemple : commandes,
articles de blog…).
• Essayez PATCH à la place de PUT : quelle est la différence ?
• Découvrez la pagination : [Link]
• Explorez une vraie API publique dans Postman : [Link]

Mot de la fin
Ce que vous venez de faire — envoyer des requêtes GET/POST/PUT/DELETE et lire des réponses
JSON — est exactement ce que font en coulisses toutes les applications web et mobiles que vous
utilisez chaque jour. Vous avez franchi une étape importante.

Page 14 / 14