Designing Web APIs


language: FR

                  WEBVTT
Mais tu as bien quelque chose dans le presse-papiers ? T'es sûr ?
Et maintenant, ce que je voudrais utiliser, je vais juste désouvrir un tout petit peu.
Tu vois toujours bien mon écran ?
Alors maintenant j'ai ici l'URL.
Et puis tu as vu les paramètres ?
Donc si je retourne sur mon doc d'Axios là,
il dit que soit je peux faire justement les fameux paramètres d'URL,
soit je peux les passer comme ça.
Params, id, machin.
Un peu comme on faisait dans Postman.
Donc plutôt les passer comme ça, moi ça serait plus facile.
Alors plutôt que de copier l'URL là, moi je vais faire comme ça.
Je vais faire un copy et je vais mettre ici une variable.
Donc dans JavaScript, tu déclares ça comme ça, tu fais var url
égale et entre guillemets je vais mettre...
Et puis on a dit clé API.
Je vais la appeler var token.
Pareil, entre guillemets.
Et maintenant je vais utiliser ça dans le code.
Donc ici à la place de slash loser, je vais virer tout ça et je vais mettre url.
Et puis params ici je vais mettre access key.
Et puis ce qu'il fait, c'est que s'il reçoit une réponse, il fait console log.
S'il reçoit une erreur, il fait console log.
Donc quoi qu'il arrive, je vais voir le résultat dans le terminal.
Alors c'est parti, j'enregistre.
Apparemment...
Donc j'ai reçu une réponse avec un statut de 100.
Ok, c'est pas mal.
Maintenant, il y a plus de choses en fait.
Maintenant je pense qu'il me faut response.body.
Tu sais, je t'avais dit ce qui m'intéresse en fait.
Dans la plupart des réponses HTTP, ça va être le fameux payload synonyme.
payload égale body égale data
Ça va être les données du message.
Ici, si je lance le racine du web service send.
Dans la réponse, j'avais 9 headers.
Et puis ce qu'ils appellent ici body.
Bon, on va le faire nous-mêmes directement.
On va faire ici, response.
Alors je sais plus si c'est data ou body du coup.
Je crois que ça va être une data.
Ça dépend de...
Ça c'est Axios en fait qui choisit d'appeler ça comme il veut.
Alors soit ils appellent ça payload, soit ils appellent ça body, soit ils appellent ça data.
On va essayer encore.
Ouais, c'est ça regarde.
J'ai success-true, timestamp, base-eur.
C'est ce que j'avais dans post-pandemique.
Donc ça s'appelle data dans Axios.
Je vais enlever le point de vue parce que j'aime pas.
Maintenant je pourrais m'amuser à faire la même chose avec chacune.
On va pas les refaire toutes évidemment.
Tu as compris le principe ?
Ce qui est intéressant, donc là ce qu'on a fait c'est qu'on s'est mis du point de vue
pour l'instant d'un client qui consomme une API.
On n'est pas encore du tout au côté programmation d'API.
C'est ça, depuis le code.
Donc on pourrait construire toute une application autour de ça.
Mais je vais d'abord justement parler un peu de...
plus concrètement qu'est-ce qui se passe là dans ce code.
Parce que c'est important de pire.
Je vais garder celui-là, il est bien.
Et c'est pour l'js. Je vais en faire une copie.
Callback 5.
Et là-dedans dans Callback 5, simple, je vais virer la première ligne de commentaires.
Le console de cocoon.
Je vais garder URL et tokens parce que j'en ai besoin.
Axios j'en ai besoin aussi.
Par convention, ce que je vais faire c'est que je vais mettre l'équoir là.
En premier.
C'est vraiment juste une magnifique évolution.
Ok.
Et là je vais un petit peu simplifier le code. Je vais enlever des trucs juste.
Ce que je vais faire c'est que je ne vais pas m'intéresser au catch et au finally.
Le catch pour l'instant je vais le mettre en...
en commentaire.
Et le finally je vais carrément le virer.
Donc je vais mettre ça plus loin. Je m'intéresse là que à...
Axios get URL.
Axios get URL avec un objet param et puis d'elle fonction.
En fait, min de rien ça va être important cette orientation.
On va enlever une petite.
On peut faire comme ça. Ça va marcher.
Donc ce que je fais ici c'est que...
j'utilise Axios pour faire une requête de titget.
Avec des paramètres.
Enfin pardon, des arguments que je passe à la fonction.
Premier argument l'URL, deuxième argument les paramètres.
Et...
Ça, ça va me retourner.
Un truc, alors ça c'est pas du tout dans l'objectif du cours, on va expliquer ça.
Mais on est sur ce qu'on appelle de la programmation asynchrone.
C'est ce que je te disais, c'est pour ça que quand je disais qu'en faisant du web service...
on était synchrone, on était pas asynchrone.
Il fallait nuancer parce que du point de vue processus métier,
si tu regardes les choses de nouveau, on est synchrone.
Dans le sens où je fais ma requête.
Si j'ai pas de réponse, je m'arrête, je peux pas aller au bout du travail.
Donc je fais la requête et je suis en attente de la réponse pour pouvoir continuer mon processus métier.
Donc de ce point de vue là, je suis synchrone.
Et comme je te disais, si on va regarder avec une loupe les instructions,
les instructions elles-mêmes elles sont asynchrônes par contre.
Il faut définir de quoi on parle maintenant.
Alors asynchrone, ça veut dire quoi ?
Ça veut dire que...
Tu peux...
Tu as déjà fait de la programmation asynchrone ?
Vraiment au niveau des instructions ?
D'accord, oui oui, ok.
Donc tu vois les principes quoi.
C'est-à-dire tu...
Genre en programmation événementielle et tout ça.
Voilà, ok.
Bon, bah là l'idée c'est que...
Tu as deux grands paradigmes.
T'as effectivement la programmation événementielle.
Alors événementielle c'est en gros tu vas dire...
Bah voilà, s'il se produit tel événement,
alors prévenez-moi via cette fonction.
Première méthode.
Du coup c'est un peu je m'abonne à tel sujet quoi.
L'approche c'est de dire...
Je contacte une ressource.
Et je sais pas quand elle va me répondre.
Et comme je vais pas bloquer l'exécution de mon code,
je vais en même temps que je contacte la ressource,
fournir la méthode qu'il faut appeler pour me répondre.
Le fameux callback.
Bon, c'est à peu près la même chose.
C'est à dire que cette fonction callback là,
dans un cas ou dans l'autre, ça va être la même.
Sauf que dans le premier cas t'as dit...
S'il se produit cet événement,
alors appelez-moi cette fonction.
Dans le deuxième cas, c'est explicitement que tu dis
je voudrais ça s'il vous plaît.
Voici la fonction qu'il faut appeler pour moi.
La fonction va avoir la même forme.
Donc nous dans le cas des AT&T Web,
on va plus souvent être sur du...
Enfin, justement, côté client,
quand on va contacter un AT&T Web,
on va être dans le cas où on va donner un callback.
On va recevoir la réponse.
Alors comment ça se passe ?
Ici, Axios.get, ça renvoie à ce qu'on appelle en JavaScript.
Alors ça c'est du JavaScript.
On renvoie une promise.
Une notion JavaScript.
On trouve aussi dans d'autres langages.
L'idée c'est quoi ?
C'est que...
Promise égale un objet à qui on peut passer une fonction callback.
Voilà.
On va faire très très simple.
C'est...
Donc le get là, c'est pour ça qu'à la suite on fait point, venn,
et là on passe le callback.
Donc en argument de cette fonction, on signifie den,
on met une fonction.
Alors je t'explique tout ça,
parce que en fait,
on va enregistrer ça comme un callback simple.
Donc cette fonction qui n'avait pas de nom,
je vais dire affiche résultat.
C'est ma fonction.
Et là, je vais passer affiche résultat.
Ça c'est exactement équivalent.
On va exécuter ça pour en avoir une cournante.
C'est la première fois qu'il va se fiffier, donc il me demande.
Bon, ça continue de marcher.
Alors je vais pouvoir un petit peu peut-être recompacter ça.
Maintenant que j'ai une pleine d'explications, je vais refaire...
Je t'enverrai aussi ces fichiers là par retransfer.
C'est sur la machine.
File, save as.
Callback simple 3.
On va...
Maintenant que j'ai tout dépiauté pour expliquer,
je vais pouvoir le recompacter dans un autre sens.
Alors, ouais, le param, je laisse comme ça.
Je laisse comme ça.
Ça c'est pas mal.
Puis du coup, en cas d'erreur, je vais justement...
aussi faire le même principe, c'est-à-dire que plutôt que de mettre une...
une fonction ici, je vais en faire une autre qui va être...
function, affiche, erreur.
Transponse.
Transponse.load.
Ici, je vais mettre erreur.
Je m'embête pas pour l'instant.
Je vais faire un peu pareil ce... voilà.
Affiche, erreur.
Voilà.
Là, j'ai deux callbacks.
Ici et là.
Ce sont des fonctions normales, mais elles deviennent...
dans ma tête, maintenant je les appelle des callbacks,
parce que je m'en sers comme des callbacks.
Donc ce terme callback.
Pareil, c'est un truc qu'on va trouver...
on verra d'autres synonymes.
Callback.
La fonction.
Transponse.
Ça va jusqu'à?
On va pas tarder, c'est quand même un petit test qui a fait.
Mais maintenant, ce que je te propose,
c'est de reprendre...
Alors par exemple, qu'est-ce qu'on va se faire?
On va reprendre celui d'Rtable.
Allez, on va se faire faire un micro exercice de 10 minutes.
On va reprendre celui d'Rtable.
Et on va essayer de le réécrire.
Donc on va faire un nouveau fichier.
On va l'appeler rtable.js ou je sais pas quoi.
On va essayer de réécrire l'appel ici qui nous a envoyé des résultats.
Sauf que maintenant, on a un truc particulier,
c'est que c'est plus un paramètre du URL, c'est un header.
Donc ce qu'il va falloir faire,
c'est aller chercher dans la doc d'Axios.
Je vais te laisser faire comment mettre un header.
On va voir là, tu peux chercher par exemple Axios header.
Comment faire pour passer des headers dans ta roquette.
Je te laisse essayer, je te laisse un peu tâtonner éventuellement 5-10 minutes
jusqu'à 15 heures.
Et puis je te montre après 15 heures.
Et après on se frappe.
Ça va?
Ouais.
Ouais.
Ouais, tu peux, mais il y a beaucoup plus simple en fait.
Vraiment tu peux passer en paramètre les headers.
Il y a plusieurs façons de faire.
Alors il y a plein de petits snippets par exemple sur Stack Overflow.
On peut trouver dans la doc aussi.
Je vais t'en montrer un.
Parce que c'est vrai que la doc,
ça dépend des technos, mais des fois les docs sont pas les plus clairs.
Là je vais trouver par exemple ici des snippets sympas.
Voilà, la main qui est bien par exemple.
Voilà, celui-là il est cool par exemple.
Alors, je vais regarder l'idée.
Ça va être, je vais te montrer sur mon écran.
Ça c'est vrai qu'on a pas encore vu JSON tout ça.
Donc ici l'idée ça va être que,
tu peux ici mettre d'autres clés si tu veux.
Ça va être tout dans les mêmes acolades en fait.
Et là tu vas avoir une vieille gueule.
Tu vas avoir au même niveau headers.
À priori, je ne mettrai pas mon main à couper,
mais de ce que je lis là, ça a l'air d'être ça.
De toute façon il y a plusieurs syntaxes possibles.
Je suis prêt à parler.
C'est comme ça.
Alors c'est ça, il faudrait lui mettre,
en fait il faut qu'il y ait, tu vois, si tu vois mon écran là,
il faut bien qu'il y ait les deux.
C'est-à-dire il faut bien créer la clé qui s'appelle
Authorization, avec un 1 majuscule.
Il faut respecter cette syntaxe-là.
Il faut mettre la value que tu as mis effectivement,
d'erreur à la clé de code.
Donc en fait ce qu'il va falloir faire c'est,
ici, comme il nous indique dans le syntaxe,
alors si c'est un cover-file on fait confiance,
il va falloir mettre cette clé là, comme Postman a fait, à gauche,
et puis à droite la valeur que toi t'as rangée dans une variable
que tu as appelée aussi Authorization, mais c'est pas grave.
À gauche on va mettre du coup Authorization avec un grand A,
parce que c'est le mot qu'il faut,
et à droite ça va être ton nombre variable à toi.
Par contre ça sera deux points.
Par contre ce sera pas égal, ce sera deux points.
Juste pour la syntaxe.
Voilà, par exemple.
Il faut essayer, à mon avis, ça va marcher.
Oui, ça devrait marcher.
Et t'as bien remplacé l'URL aussi par un bon visage.
Ça devrait être bon.
Alors pourquoi il n'est pas content.
Ah oui, il faut fermer.
Parce que tu ouvres la collade rouge sur la lignée cell,
il faut la refermer.
C'est au niveau de params, par exemple sur la ligne 22.
Je pense que tu as commenté.
Ah oui, c'est debug console je crois.
Ah, regarde, il t'a mis records.
Ah oui, c'est bon.
Après il ne déplie pas, mais ça c'est un peu chiant,
on pourra faire ce qu'il faut.
Oui, mais c'est bon.
Si tu vas dans Postmas, c'était ça.
Il y avait records et une liste avec d'autres trucs.
Oui, c'est bon, super.
Voilà, ça c'est fait.
On peut se récompenser avec un...
C'est hors du goûter.
Ça te va ? On prend encore 10 minutes au moins ?
Donne un petit quart d'heure si tu as besoin.
Allez, à toute.

on 2024-03-18

Visit the Designing Web APIs course recordings page

4 videos