Communication client-serveur –

Requête HTTP
SECTION 4: UN 1 ER EXEMPLE

M.A.DAHDEH ([email protected]) 283

Requête HTTP
Un 1er exemple
 HTTP
• Hypertext Transfer Protocol est un protocle de communication entre client et serveur
• Basé sur la notion requête - réponse appelée généralement (HTTP Request - HTTP
Response)
• Plusieurs types de requêtes = méthodes HTTP
◦ GET | POST | DELETE | PUT
• Toutes ces méthodes prennent en paramètre l’adresse du serveur ( + pour certaines
méthodes les données à manipuler)

M.A.DAHDEH ([email protected]) 284

API REST (REpresentational State Transfer)
Un 1er exemple
 REST est une architecture orientée ressources où chaque ressource est accessible via un identifiant unique (URI).

 REST utilise un langage commun au niveau des échanges (souvent du JSON ou du XML)

 REST est connu sur le web grâce au protocole HTTP

 L’API REST utilise donc des méthodes comme get, post, delete... pour l’échange de données entre client et serveur

M.A.DAHDEH ([email protected]) 285

Les verbes HTTP (1/2)
Un 1er exemple
 REST a su profiter des verbes HTTP pour définir des spécifications d’échange facilement
intégrables à tout système.

 GET
• Permet de récupérer les données d’une ou plusieurs entités dans une ressource. Il est possible de
filtrer par des paramètres dans l’url. GET https://api.site.com/contacts/29

 POST

 Permet de rajouter des entités à une ressource. Les données sont envoyées dans le corps de la

requête. Post https://api.site.com/contcats

M.A.DAHDEH ([email protected]) 286

Les verbes HTTP (2/2)
Un 1er exemple
 PUT
• Permet de modifier les données d’une entité dans une ressource.

• L’url doit indiquer l’identifiant de l’entité. PUT https://api.site.com/persons/29

 DELETE

 Permet de supprimer une entité dans une ressource.

DELETE https://api.site.com/persons/29

M.A.DAHDEH ([email protected]) 287

Les codes de retour HTTP d’API REST
Un 1er exemple
 Les codes retours permettent de donner un statut aux réponses renvoyées par l’API.

M.A.DAHDEH ([email protected]) 288

Sécurité D’API REST
Un 1er exemple
 D’une manière générale, une API est censée être sécurisée et protégée contre les requêtes
anonymes.
 En pratique, trois techniques sont principalement utilisées pour sécuriser une API:
• HTTP Basic Authentication :
◦ consiste à envoyer le login et le mot de passe dans l’entête de chaque requête.
◦ il est fortement conseillé d’utiliser le protocole HTTP en mode chiffré (HTTPS)
◦ il est préconisé d’utiliser un jeton de sécurité JWT (Json Web Token) d’une durée de vie limitée
• Oauth:
◦ C’est est un protocole de délégation d’autorisation nécessitant un serveur tiers comme fournisseur d’accès.
◦ Deux versions: Oauth 1.0 et Oauth 2.0
• OpenID:
◦ Il faut un fournisseur d’identité (OpendID providers) pour établir un lien de confiance entre le client et le
serveur. Souvent, le fournisseur d’identité est un grand nom du Web (facebook, twitter, google, …).

M.A.DAHDEH ([email protected]) 289

Angular & les serveurs
Un 1er exemple
 Angular possède un module, HttpModule (HttpClientModule depuis la
version 5) qui facilite la réalisation de requête HTTP vers n’importe quel
serveur
 Pour les tests
• json-serveur un serveur HTTP open-source, pour les développeurs Front-End
• Installation : npm install -g json-server
• Création (dans le répertoir du projet) d’un fichier xxx.json qui servira de BD
• Lancer le serveur : json-server -p 3000 xxxxx.json
• Ressource : http://localhost:3000/nom_ressource

M.A.DAHDEH ([email protected]) 290

Principe
Un 1er exemple
1. Les données sont saisies (ou affichées) dans le Template x.component.html x.component.ts
.component.html
2. La classe .component.ts peut récupérer des données dont la
source est le Template .component.html pour les passer au
<> 2
service ou récupérer des données dont la source est le service 1
pour les passer au template .component.html.
3. En faisant une injection de dépendance du service .service.ts
dans .component.ts, ce dernier peut l’utiliser pour persister ou x.service.ts
récupérer des données

Http Client
4. En faisant une injection de dépendance de la classe HttpClient
dans .service.ts, ce dernier peut effectuer des requêtes HTTP en 4 3
précisant chaque fois la méthode et l’URL.
Serveur HTTP

M.A.DAHDEH ([email protected]) 291

Exercice 1 – Communication client-serveur
Un 1er exemple
• Récupérer la liste des contacts à partir du serveur (json-server)
• Sauvegarder tous les changements dans le serveur
◦ Ajout et Suppression

M.A.DAHDEH ([email protected]) 292

 Correction – Communication client-serveur
Un 1er exemple
 Etape 1 : Configurer le serveur : json-server (1/2)
1. Installation de json-server: json-server est un node module, pour l’installer taper la commande suivante

$ npm install json-server -g

2. Configurer le serveur : Télécharger le fichier json-server.zip et l’extraire dans le dossier AngularProjects

Dans votre terminal, Accéder au dossier json-server et taper la commande suivante :

$ json-server --watch db.json -d 2000

Cela devrait démarrer un serveur au port 3000 sur votre machine. Les ressources de ce serveur sont
accessibles en saisissant les adresses suivantes dans la barre d'adresse de votre navigateur:

Remarque : Ces ressources sont obtenues à partir du fichier db.json

M.A.DAHDEH ([email protected]) 293

Correction – Communication client-serveur
Un 1er exemple
 Etape 1 : Configurer le serveur : json-server (2/2)
3. Servir les images: json-server fournit également un serveur web statique. Toutes les ressources que nous
plaçons dans un dossier nommé public du dossier json-server seront servies par le serveur à l’adresse:

Vous pouvez afficher les images contenues dans le dossier publics->images en tapant ce qui suit
dans la barre d'adresse de votre navigateur:

http://localhost:3000/images/<image name>.png

M.A.DAHDEH ([email protected]) 294

 Correction – Communication client-serveur
Un 1er exemple
 Etape 2 : Configuration de l'URL du serveur (Json-Server) et HttpClientModule
:
1- Créez un nouveau fichier nommé baseurl.ts dans le
dossier Shared et mettez à jour son contenu comment
suit :
2
1

2- Importer BaseUrl et HttpClientModule dans

app.module.ts

M.A.DAHDEH ([email protected]) 295

 Correction – Communication client-serveur
Un 1er exemple
 Etape 3 : Mise à jour du fichier contact.service.ts

Injection de HttpClient dans

contcat.service.ts, pour effectuer des
requêtes HTTP en précisant chaque
fois la méthode et l’URL.

M.A.DAHDEH ([email protected]) 296

Correction – Communication client-serveur
Un 1er exemple
 Etape 4 : Mise à jour du fichier contacts.component.ts

M.A.DAHDEH ([email protected]) 297

 Correction – Communication client-serveur
Un 1er exemple
 Etape 5 : Mise à jour du fichier contact-detail.component.ts et contact-detail.component.html

2
1

M.A.DAHDEH ([email protected]) 298

 Correction – Communication client-serveur
Un 1er exemple
 Etape 6 : Mise à jour du fichier edit-contact.component.ts

M.A.DAHDEH ([email protected]) 299

 Correction – Communication client-serveur
Un 1er exemple
 Etape 6 : Mise à jour du fichier edit-contact.component.ts

M.A.DAHDEH ([email protected]) 300

Exercice 2 – Communication client-serveur
Un 1er exemple
#9
Entant que utilisateur
authentifié
je veux modifier un contact

M.A.DAHDEH ([email protected]) 301

Correction– Communication client-serveur
Un 1er exemple
 Etape 1 : Mettre à jour le fichier contact.service.ts

M.A.DAHDEH ([email protected]) 302

Correction– Communication client-serveur
Un 1er exemple
 Etape 2 : Mettre à jour le fichier app-routing.module.ts

Nous utiliserons EditContcatComponent

pour ajouter et modifier un contact
id = -1 (Ajout d’un nouveau contact)
id =idContact (Mise à jour d’un contact)

M.A.DAHDEH ([email protected]) 303

Correction– Communication client-serveur
Un 1er exemple
 Etape 3 : Mettre à jour le fichier contact.component.ts

M.A.DAHDEH ([email protected]) 304

Correction– Communication client-serveur
Un 1er exemple
 Etape 4 : Mettre à jour le fichier contact.component.html

M.A.DAHDEH ([email protected]) 305

Correction– Communication client-serveur
Un 1er exemple
 Etape 4 : Mettre à jour le fichier edit-contact.component.ts

M.A.DAHDEH ([email protected]) 306

Correction– Communication client-serveur
Un 1er exemple
 Etape 5 : Mettre à jour le fichier edit-contact.component.html

M.A.DAHDEH ([email protected]) 307

Exercice 3 – Communication client-serveur
Un 1er exemple
#6 BNF #7 BNF
Gérer les erreurs de Ajouter un spinner en
connexion au serveur attendant la réponse du
serveur

M.A.DAHDEH ([email protected]) 308

Correction 3 – Gérer les erreurs #6 BNF
Un 1er exemple
 Etape 1 : Créer un service pour gérer les erreurs de connexion au json-server

$ ng g s services/process-httpmsg

M.A.DAHDEH ([email protected]) 309

Correction 3 – Gérer les erreurs #6 BNF
Un 1er exemple
 Etape 2 : Capturer les erreurs de connexion avec Pipe () et CatchError() lors de
l’appel d ’une requête HTTP

M.A.DAHDEH ([email protected]) 310

Correction 3 – Gérer les erreurs #6 BNF
Un 1er exemple
 Etape 3 : Gérer les erreurs dans subscribe ()

M.A.DAHDEH ([email protected]) 311

Correction 3 – Gérer les erreurs #6 BNF
Un 1er exemple
 Etape 4 : Afficher les erreurs dans la vue du composant

M.A.DAHDEH ([email protected]) 312

Correction 3 – Gérer l’attente du serveur
Un 1er exemple #7 BNF

M.A.DAHDEH ([email protected]) 313

En savoir plus !
 A la place de json-server, vous pouvez utiliser le service FireBase de
google :
• Authentification
• Une base de données
• Stockage de Fichiers
 Pour finir vous allez vouloir faire un build de votre application pour
préparer vos livrables et c’est la commande ng build qui va vous y aider

$ ng build --prod

M.A.DAHDEH ([email protected]) 314

Fin du cours …

La réussite est avant tout une question de volonté et de

confiance en soi.

Bon courage

M.A.DAHDEH ([email protected]) 315