Technologie Web

Pr. Oumaima STITINI

2024/2025
Chapitre 7: Rest API
 Objectifs
● Comprendre ce qu’est une API.
● Comprendre c’est quoi REST.
● Identifier l’utilité des REST APIs dans les applications
modernes.
● Identifier les méthodes HTTP Get, Post, Put, Patch, Delete.
● Découvrir les concepts fondamentaux: requêtes HTTP,
endpoints, ressources.

3
 API: Application Programming Interface
Boutons de la télécommande: Interface utilisateur (UI)
● Les boutons sont l'interface physique avec laquelle un
humain interagit.
● Appuyer sur un bouton, exécute une requête:
○ Allumer.
○ Changer de chaîne.
○ Augmenter le volume.
● Cette interface est humaine: elle est conçue pour être
intuitive, simple, et directement utilisable par une
personne.

4
 API: Application Programming Interface
Fils et circuits à l'intérieur de la télécommande: Interface logicielle (API)
● Les circuits à l’intérieur interprètent l’appui sur un
bouton et transmettent les informations
correspondantes (sous forme de signaux électriques)
vers la télévision.
● Ces signaux sont des instructions logiques que la
télévision comprend.
● Cette interface est machine-machine: elle permet la
communication entre la télécommande et la télévision,
sans intervention humaine directe sur les signaux.

5
 API: Application Programming Interface
● Interface utilisateur (UI): Destinée aux humains pour simplifier
leur interaction avec la technologie.
● Interface logicielle (API): Destinée aux machines pour permettre la
communication et l’échange de données entre systèmes.
● L'interface d'une API ne fait pas référence à une interface
utilisateur (UI) comme les boutons, les formulaires ou les graphiques
qu'un utilisateur humain voit et utilise sur une application web.
● L'interface d'une API désigne une interface logicielle, c'est-à-dire
un ensemble de règles et de méthodes définissant comment deux
applications ou systèmes peuvent interagir.

6
 API: Application Programming Interface
● Une API est un intermédiaire logiciel qui permet à deux
applications ou systèmes de communiquer entre eux.

● Elle définit un ensemble de règles et de protocoles pour que des

programmes ou des services puissent échanger des données ou des
fonctionnalités, sans nécessairement révéler leur logique interne.

● Il décrit la manière appropriée pour un développeur de logiciels de

composer un programme sur un serveur qui communique avec
diverses applications clientes.

7
 Distinction
Application Web API

● Une application web est une ● Une API est un service qui ne
application accessible via un possède pas d'interface utilisateur
navigateur web. directe.
● Elle offre une interface utilisateur ● Elle est conçue pour être utilisée par
(UI) graphique pour que les des applications ou des systèmes
utilisateurs interagissent directement tiers pour consommer ou envoyer
avec des fonctionnalités. des données.
● Exemple : Gmail, Facebook, ou un site ● Exemple : L’API de Google Maps ou
e-commerce. l’API de PayPal.

8
 Communication et usage
Application Web API
Requêtes HTTP
Conçue pour des Conçue pour des
utilisateurs finaux machines ou systèmes
humains. tiers.

Les utilisateurs ne
Fonctionne via un n'interagissent pas
navigateur web. Réponses HTTP directement.

Peut inclure des API Fournit des données ou

en arrière-plan pour des fonctionnalités à
fonctionner. d'autres applications.

9
 Fonctionnement

● Les applications web utilisent des APIs pour obtenir ou envoyer des
données:

○ Une application web front-end (React, Angular, etc.) envoie des

requêtes à une API back-end pour récupérer des données à
afficher.

○ Exemple: Sur une application e-commerce, lorsqu’un utilisateur

consulte la liste des produits, le front-end appelle une API pour
obtenir les informations sur les produits.

10
REST
 REST Representational State Transfer

● REST est un style d'architecture pour concevoir des systèmes

distribués, notamment des applications web et des services web.

● Il repose sur un ensemble de principes et de contraintes qui

permettent aux systèmes de communiquer de manière simple,
évolutive et sans état.

● L'idée principale derrière REST est d'utiliser les protocoles

existants, principalement HTTP, pour effectuer des opérations sur
des ressources via des URI (Uniform Resource Identifiers).

12
 Principes fondamentaux de REST
Client-Serveur
Stateless (sans état)

➔ Le modèle client-serveur implique

que le client (par exemple,
➔ Chaque requête envoyée à un
l'application web ou mobile) et le
serveur REST doit être autonome et
serveur (qui héberge les ressources)
contenir toutes les informations
soient séparés.
nécessaires pour traiter la demande.
➔ Le client effectue des requêtes pour
➔ Le serveur ne garde pas d'état entre
accéder aux ressources sur le
les requêtes, ce qui signifie que
serveur, mais il n'a pas besoin de
chaque requête est indépendante.
connaître la façon dont ces
ressources sont gérées sur le serveur.

13
 Principes fondamentaux de REST
Système en couches
Uniformité de l'interface

➔ Un système REST peut être composé

➔ Les API RESTful doivent avoir une
de plusieurs couches (par exemple,
interface uniforme.
un serveur API intermédiaire, un
➔ Cela signifie que les ressources
serveur de base de données, etc.), et
doivent être identifiées par des URI
chaque couche ne doit interagir
(par exemple, /products, /users), et
qu'avec la couche immédiatement
les opérations sont effectuées à
adjacent.
l'aide des méthodes HTTP
➔ Cela permet de séparer les
standards : GET, POST, PUT,
responsabilités et de favoriser
DELETE.
l'évolutivité.

14
Fonctionnement: API REST

15
 API REST et les Normes HTTP
● Les méthodes HTTP sont des commandes qui permettent d'effectuer
des actions sur des ressources sur un serveur dans un contexte
RESTful.
● Les méthodes HTTP dans le contexte d'une API RESTful ont des rôles
spécifiques, comme suit:
○ GET: Lire ou obtenir des données sans modification (idempotent).
○ POST: Créer une nouvelle ressource.
○ PUT: Mettre à jour ou remplacer complètement une ressource
existante.
○ PATCH: Mettre à jour partiellement une ressource existante.
○ DELETE: Supprimer une ressource.
16
 GET - Récupérer des données (lecture)
● Rôle: La méthode GET est utilisée pour récupérer des informations à
partir du serveur sans modifier l'état du serveur.
● Utilisation:
○ Elle permet au client de demander des données à une ressource
spécifique sur le serveur.
○ Cette méthode est sans effet de bord, ce qui signifie qu'elle ne
modifie pas l'état des ressources sur le serveur.

17
 Exemple de méthode Get

Requête Réponse
GET /products "products": [ {"id": 1,
L'utilisateur veut obtenir "name": "Laptop", "price":
la liste des produits d'une
1000}, {"id": 2, "name":
boutique en ligne.
"Smartphone", "price": 500}
]

18
 POST - Créer des données (ajout)
● Rôle et utilisation:
○ La méthode POST est utilisée pour envoyer des données au
serveur pour créer une nouvelle ressource.
○ Elle permet de soumettre des informations au serveur qui seront
traitées et enregistrées.
○ Contrairement à GET, POST peut entraîner des changements sur
le serveur (création de nouvelles ressources).

19
 Exemple de méthode Post

Requête Réponse
POST /products {
L'utilisateur veut ajouter
"status": "Produit créé",
un nouveau produit à la
"product": {
boutique en ligne
"id": 3,
"name": "Tablet",
"price": 400
}
}

20
 Exemple de méthode Post

Requête Réponse
POST /television/on {
L'utilisateur appuie sur le
"status": "Télévision allumée",
bouton pour allumer la
"power": "on"
télévision. Allumer télévision }

21
 PUT - Mettre à jour des données (remplacer)
● Rôle:
○ La méthode PUT est utilisée pour mettre à jour ou remplacer une
ressource existante sur le serveur.
○ Elle permet de remplacer complètement les informations de la
ressource ciblée.
○ Faire plusieurs fois la même requête avec les mêmes données ne
changera pas l'état final.

22
 PUT - Mettre à jour des données (remplacer)

Requête Réponse
PUT /products/3 {
L'utilisateur veut mettre à jour les
informations d'un produit (par "status": "Produit mis à jour",
exemple, modifier le prix d'un "product": {
produit existant). "id": 3,
"name": "Tablet",
"price": 450
}
}

23
 PATCH - Mettre à jour partiellement des
données
● Rôle:
○ La méthode PATCH est utilisée pour mettre à jour partiellement
une ressource existante.
○ Contrairement à PUT, qui remplace l'intégralité de la ressource,
PATCH permet de modifier uniquement certaines propriétés de
la ressource.

24
 DELETE - Supprimer des données (suppression)
● Rôle: La méthode DELETE est utilisée pour supprimer une ressource
spécifique sur le serveur.

Requête Réponse
DELETE /products/3 {
L'utilisateur veut supprimer un
produit de la boutique en ligne "status": "Produit mis à jour",
"product": {
"id": 3,
"name": "Tablet",
"price": 450
}
}

25
 Pourquoi utiliser Rest API
● L'utilisation d'une REST API présente de nombreux avantages,
particulièrement dans le développement d'applications modernes, que
ce soit pour des sites web, des applications mobiles ou des systèmes
distribués.
 Pourquoi utiliser Rest API

Simplicité et légèreté Flexibilité et évolutivité

Travailler rapidement sans
Format léger passer du temps à retravailler
à partir de zéro

Compatibilité avec différents

Protocoles HTTP standards clients

Ajouter de nouvelles
Aucune dépendance serveur- fonctionnalités sans affecter le
client spécifique fonctionnement global des
applications clientes
 Pourquoi utiliser Rest API

Indépendance Flexibilité et évolutivité

Travailler rapidement sans
Séparation des
passer du temps à retravailler
préoccupations
à partir de zéro

Compatibilité avec différents

clients

REST permet de dissocier

l'interface utilisateur du
backend.
Étapes pour utiliser une API dans
un projet React
 ReactJS: Installer Axios
1
Axios est une bibliothèque qui simplifie les requêtes HTTP en
JavaScript.

npm install axios

● Axios n’est pas obligatoire.

● On peut utiliser la méthode native fetch pour faire des
requêtes HTTP.
30
 Exemple d’utilisation API
1 const apiURL = "[Link]

Utilisation de fetch pour récupérer des données

2 fetch(apiURL).then(response =>

Vérification de la requête
if (![Link]) {
throw new Error(`Erreur HTTP : ${[Link]}`);
3
}
return [Link](); })
 Exemple d’utilisation API
4 Affichage de données

.then(data => {
[Link]("Données récupérées : ", data);
[Link](post => {
[Link](`Titre : ${[Link]}`); }); }) .catch(
error => {[Link]("Une erreur s'est produite : ", error); });