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
language: FR
WEBVTT
Donc là je vais juste remettre ce que tout a fait, un base, comme ça je l'ai, et etc.
Il faudrait...
Alors ce que j'ai fait c'est que j'ai fait carrément un autre répertoire.
Je suis pas sûr que... bref.
Oui, ignore ce truc là, c'était une fausse manip de ma part.
Je vais faire un autre répertoire Python, pour ranger le script Python.
Bon c'est un peu le bazar, parce que là c'est fixeur, c'est du JavaScript, du Node.js.
Là je l'appelle Python pour l'instant.
C'est pas très très grave, c'est un bac à sable.
Donc j'ai infifié essay.py, et puis ce que je voudrais te montrer c'est la syntaxe,
ça va être un petit peu comme Axios tout à l'heure, ça va être une librairie.
Il y a toujours, il y a les deux dimensions si tu veux.
Quand tu regardes une technologie, enfin un langage de programmation,
afin de savoir si... là je me remets sur mes slides tout à l'heure.
Alors on va mettre ça ici.
Quelques langages, quelques librairies par un langage non exhaustif.
Alors JavaScript, son petit nom JS, slash Node, Node.js sous-entendu.
Client, serveur.
Donc le client c'est quoi ? Le client c'est ce qui consomme les API, c'est celui qui fait les requêtes.
Le serveur c'est celui qui envoie les réponses.
On a vu tout à l'heure, avec Postman on fait des requêtes, on reçoit des réponses.
Donc nous on a utilisé Axios.
Là on vient d'utiliser Axios.
On va voir que côté serveur on utilisera un truc qui s'appelle express.
On fera ça juste après là.
Je pense qu'on aura le temps déjà de commencer nos premières fonctions côté API aujourd'hui.
On pique.
Là on va utiliser un truc qui s'appelle aio-http.
Alors pourquoi ? Parce qu'en fait il y en a d'autres.
Il y a request, il y a httpx.
Pareil, il y a deux choses que Axios et il y a deux choses que express.
Mais après recherche, je me suis aperçu que pour ce cours-là aio-http allait être le plus simple.
Parce que c'est pas un cours piton en fait, c'est un cours sur les API.
Donc on recherchait à faire au plus simple.
Tout en revanche, le côté serveur, on utilisera une autre librairie qui s'appelle Flask.
Pourquoi différentes librairies ? Parce que la logique n'est pas tout à fait la même d'un côté et de l'autre.
Tu te souviens, on disait programmation événementielle justement avec callback.
Dans le premier cas de figure, on dit je m'abonne à tel événement.
Donc en gros, ça veut dire qu'il y a sûrement un thread quelque part qui écoute.
Soit il y a un thread qui écoute, soit on s'est enregistré dans une liste quelque part.
Et quand l'événement se produit, il y a un nœud central dans l'exécution qui va voir la liste des abonnés et qui les prévient.
Les mécanismes comme ci ou comme ça.
Et dans le deuxième cas, on contacte une ressource en donnant le callback au moment où on contacte.
Donc dans un cas en fait, on dit préve-moi quand tu veux.
Dans le deuxième, on dit j'aimerais ça et voici comment m' répondre.
Mais attention, je ne vais pas attendre des heures.
Le deuxième cas, c'était donc je fais une requête en passant le callback et en disant je ne vais pas attendre des heures.
Ça, c'est le côté client le plus souvent.
C'est-à-dire qu'il va y avoir quand même cette notion de time-out de la requête.
Si je fais la requête auprès de la ressource, si j'attends trop longtemps, ça va forer.
C'est même moi qui vais, c'est même moi, côté client, qui va annuler la demande.
Le premier mode en revanche de dire s'il se passe ça, voilà ce qu'il faut appeler.
Ça va être une logique qu'on va trouver plutôt côté serveur.
Parce que une API, quand on dit serveur, c'est-à-dire le côté API.
Du côté de l'API, on va être ouvert en permanence sans pouvoir prédire quand est-ce qu'on va nous appeler.
Donc en fait, on va se comporter exactement comme un serveur web.
On va ouvrir une connexion sur un port sur notre machine et on va écouter ce port en permanence
en attendant des jours, des semaines s'il faut que quelqu'un nous contacte via le web, via sport sur votre machine.
Et quand il va nous contacter, on va regarder ce qu'il nous a demandé.
Et donc en fonction de ce qu'il nous a demandé, on va appeler telle méthode ou telle méthode.
Donc on va être vraiment sur une logique qui va ressembler beaucoup à un abonnement à un événement.
Donc voilà, c'est pour ça qu'on a des librairies différentes parce qu'elles permettent de simplifier le code,
à faire en quelques lignes ce qu'il nous demanderait des dizaines et des dizaines si on faisait en natif.
Donc on va maintenant installer celle-là parce qu'on va faire un client en python.
Je me mets ici dans le terminal et je vais faire pip install iohttp.
pip c'est l'équivalent pour python de npm, ce qu'on va faire.
pip install iohttp, donc normalement je vais déjà installer chez moi.
Donc moi il me dit pas la peine, tu l'as déjà installé.
Donc ça devrait jouer.
C'est bon, ça a été chargé. Super.
Et maintenant on va copier du code que j'ai trouvé en ligne.
Alors attends, je vais pas m'embêter. Je vais carrément mettre l'onglet.
Voilà, donc il nous donne un exemple qui est pas mal. On va le prendre tout de suite.
Je vais mettre ça.
Le premier snippet que je trouve, je vais mettre chez moi.
Et puis je crois que ça va marcher du premier coup.
Mais je vais partir ici, faire ici url="
Et je vais récupérer celle de mon premier exemple, fixer.
Et ici à la place de l'http.pyton.org je vais mettre url="
Là je peux presque essayer d'exécuter ça et voir ce qui va se passer.
Sans même encore mettre le token. Justement déjà si le code fonctionne.
Donc je vais essayer.
Ouais, j'ai vu ça, j'ai vu ça. C'est pour ça que je dis que je croise les doigts.
Alors, Python file.
Il a pas émetté. Effectivement, non module name de...
Ici, depuis là je mets pip install io-http.
Il dit qu'il est déjà assez bizarre.
Non, je pense pas.
Est-ce que c'est parce qu'il a lib de flood down ?
Ah, attends, attends.
Non, sur Python non.
Si je vais dans cd.pyton.
Là je fais pip install io-http.
Est-ce qu'il va me mettre...
Je vais mettre un stackoverflow.
Ouais, je voulais pas aller aussi loin que ça, mais il faut peut-être effectivement utiliser un environnement...
Pile moi mon version, est-ce que c'est ça ?
3.12, ouais c'est pour ça. Ok, j'utilise une autre version de Python.
Alors attends.
C'est un truc de version de Python parce qu'il y en a plusieurs sur l'ordi.
Alors, Ctrl Shift P, Python Select Interprete.
Voilà.
Est-ce que ça, ça va changer ?
C'est genre avant que c'est le même.
Python Select Interprete.
Ah ok, je l'avais pas eu.
Écoute, on va essayer.
Ah ouais, pas mal.
Alors j'ai fait Ctrl Shift P.
J'ai tapé Python, j'ai mis Select Interpreteur.
Et il faut choisir le 3.9.
Du coup on a les mêmes machines, normalement tu dois pouvoir le faire aussi.
Ouais, tu tapes Python et après tu scroll un peu et c'est Python Select Interpreteur.
Tu l'avais, tu l'avais, yes. Il est 3.9.
Voilà.
Donc tu devrais maintenant pouvoir recopier
le code qui se trouve ici.
Je vais t'envoyer le lien que tu as trouvé.
Alors tu fais F5 ?
Voilà.
Donc ce que j'ai fait chez moi, c'est que j'ai simplifié un peu.
J'ai mis ici URL égale, pour l'instant je mets juste le premier, là,
DataFixer.io à payer les tests.
J'ai remplacé ici sur la ligne avec Async with Session.
J'ai mis du coup URL.
Et puis le seul truc que je viens juste de changer, c'est après HTML,
j'ai enlevé leur petit bidoui pour écrire que le début.
Donc j'ai juste mis HTML.
Je vais faire le token.
Donc c'est ce qui est le plus important.
C'est bon ? Oui.
Donc maintenant je vais tuer le token.
C'est pas mal.
On va regarder.
Access key égale.
Et puis après du coup, il faut que tu utilises URL with token sur tailing 11.
Voilà, ça devrait être bon.
Donc tu vois, il y a eu un petit temps d'attente avant qu'il renvoie tout,
mais très léger.
Nous on simulera, je sais pas si on aura le temps de faire ça aujourd'hui,
mais on le fera demain en tout cas, on simulera une API qui prend du temps
pour bien voir à quel point ça peut être important de faire
de l'asynchrone au niveau programmation.
Au niveau programmation encore une fois.
Alors, écoute, c'est pas mal.
Donc là on s'est munis pour l'instant, c'est assez régimentaire,
mais on s'est munis d'un bout de code qui fonctionne en JavaScript
et d'un bout de code qui fonctionne en Python.
On va aller interroger une API,
s'identer qu'on va voir la documentation de l'API,
de quoi elle a besoin, et on traduit ça
dans la construction de notre oracle dans le code.
Et donc maintenant, ce que je propose, c'est que
ça attaque un petit peu à l'autre côté.
Pour ça, avant la fin de la journée, avoir vu les deux côtés au moins,
on va rester sur des trucs relativement simples.
On ira plus dans la complexité de domaine encore.
Mais comme ça on aura vu l'autre côté qui est intéressant aussi.
Je vais du coup créer encore un autre répertoire,
parce que maintenant ce que je vais faire, je reviens à ma slide.
Maintenant ce que je voudrais c'est faire le côté serveur.
Alors on peut choisir d'abord Python, d'abord JavaScript,
on va prendre JavaScript juste parce que ça va plus vite,
je le connais mieux, etc. mais on fera aussi le Python.
Ça c'est des grands standards, je vais l'inscrire Python,
et bien sûr on fera C Sharp aussi.
Donc c'est pas mal d'avoir des bouts de code qui traînent
qu'on a réussi à faire fonctionner si jamais on a besoin.
Donc nous on va faire maintenant avec Express.
C'est pour ça que là où on avait un programme ici,
je reviens sur la machine, donc dans fixer.io,
tu vois j'avais fait npm install axios,
et ça m'a créé tout ça, ça m'a créé Node Modules,
Package, Package ici.
Donc ce répertoire était devenu de facto un projet Node.
C'est pour ça que je vais faire un autre répertoire,
parce que maintenant je suis côté serveur.
Je vais d'ailleurs l'appeler ServerJS.
Et donc ici je vais créer un FIFI,
je vais l'appeler MainJS.
Il n'y a pas de convention particulière.
Et ici je vais faire mon console log coucou,
juste pour assurer que je serais dans le bon terminage.
Je fais F5.
Alors ça va être une Node.js effectivement.
F5 j'ai dit.
J'ai tout fermé, c'est ça un view.
Debug console.
Terminal, input.
F5.
Ok c'est bon.
Je n'aurais pas dû fermer la fenêtre.
Ok, donc maintenant que je suis ici,
et que je suis dans le bon répertoire,
je vois ici Terminal, formation API,
non tu vois je ne suis pas dans le bon répertoire.
Je vais descendre d'un cran, je vais aller dans ServerJS.
Parce que je veux que tout ce qui va importer là,
je vais mettre mon npm install,
comme pour Axios pour tout à l'heure,
je voudrais qu'il le mette dans ce répertoire.
Donc je descend ici, ServerJS.
Et maintenant je vais faire,
ça va être npm install mais express.
Tout simplement.
64 packages.
Et express il a plein d'autres dépendances.
Ok.
Alors on va aller voir la doc.
On a ouvert ici Axios, on a ouvert ensuite IOHTTP,
à cette époque-là on va aller voir JS Express.
Alors il y a un peu plus de choses à expliquer
pour piger ce qui se passe,
mais je t'ai expliqué l'essentiel tout à l'heure en fait.
En disant que je vais m'ouvrir une connexion sur un port,
et je vais pouvoir écouter en permanence.
Getting started Hello World, est-ce qu'il est bien leur Hello World ?
Ouais il est pas mal.
Il est pas mal.
Donc nous on va pas faire get.
Ah si pardon, excuse-moi.
Justement, très très important.
Donc on prend de la différence.
On va lire le code du Hello World ici,
et essayer de comprendre ce qui se passe.
Quand j'utilisais Axios,
qui est une librairie cliente
pour aller attaquer un web service,
une web appelée,
et bien voilà, performing get request.
Donc j'avais ici Axios, mon objet,
un peu plus de formes,
et j'ai mis un peu plus de formes,
et je faisais get.
La méthode get dans Axios,
c'est une requête de type get.
Qui renvoie, bon c'est une promise,
mais peu importe, c'est du JavaScript.
Mais le plus important c'est qu'après je lui passais ici un callback.
Et ce callback c'était
quand j'obtenais une réponse à ma requête.
D'où le nom de la fiche,
donc ici, get,
c'est une requête vers la librairie,
la, pardon, vers la pays.
Et ensuite,
on passe au moyen d'une autre fonction,
le callback pour la réponse.
Maintenant, dans Express,
on est de l'autre côté en fait,
on est côté réception, on est côté APU.
Donc,
tout ça c'est
les préliminaires.
C'est pour dire, je vais créer une application
qui va écouter, je vais me mettre sur le port 3000,
c'est intéressant, c'est du web, mais je peux me mettre sur un autre port
que le port 80, par défaut.
Le plus important, je vais sauter tout de suite,
c'est ça, c'est l'ISAM.
C'est-à-dire que ça,
ça va être une exécution bloquante
qui va ouvrir une connexion sur,
alors le port il est là, 3000,
et qui va,
alors je sais depuis,
il faudrait qu'on lise la doc,
cette méthode-là,
est-ce qu'elle l'exécute au début,
ou à chaque fois qu'elle reçoit un truc,
je sais pas, on va regarder dans la doc, mais en tout cas, il passe une méthode.
Je pense que c'est au démarrage.
Donc ça doit s'exécuter à mon avis qu'une fois.
Et ça, ça va bloquer, c'est-à-dire que ça va rester ouvert tout le temps.
Donc, typiquement,
ce programme-là,
il va s'arrêter de, il va se déconnecter de ce port
et il va s'éteindre, en fait, que si j'interromps le programme,
genre avec Ctrl-C, ou si je reboot la machine.
Donc ce programme-là, il est très rudimentaire.
Un vrai programme, il va avoir peut-être des instructions
pour s'arrêter dans certains cas, etc.
Mais lui, là, il bloque sur la ligne 11,
enfin, la ligne 9-10-11,
quoi, l'instruction,
il reste bloqué dessus, et puis il peut rester des jours et des jours
à la place, là.
Et là, il met un callback.
Mais c'est un callback, donc, côté serveur.
Donc derrière l'API, si tu veux,
là, ils disent, si tu reçois une requête GET à cette adresse,
alors t'appelles cette méthode.
Et là, tu vas pouvoir en mettre plusieurs, en fait. Tu vas pouvoir en mettre un, puis deux, puis trois, puis quatre.
Et après, tu fais l'issue.
Dans le cadre de notre API bancaire, là,
on a des instructions comme ça dans la LSI, c'est boum, boum, boum, boum,
pour chacun des points d'entrée, là. Voilà.
Et à chaque fois, une méthode particulière qui fait un boulot.
Et rec res, c'est la requête, la réponse.
Donc l'objet réponse, en fait, il est res, là.
Il est prémaché, déjà. C'est pour ça que Express, c'est vraiment pratique à utiliser.
Il fait presque tout le boulot, déjà, pour nous.
Rec,
à l'intérieur de cette méthode-là,
va nous donner accès à tout ce qu'il y a dans la requête.
Donc si, par exemple, dans la requête,
je vais retourner sur notre code.
Attends, je vais trouver du JavaScript, parce que c'est du JavaScript.
Voilà. Si nous, dans notre requête, on lui mettait un paramètre
dans l'URL accessKey,
et bien, côté, ici, là,
avec rec, je pourrais le récupérer, ce paramètre.
Ce sera sûrement un truc du genre rec.params.accesskey.
Tout à fait, pareil, que ça va être un truc comme ça.
Pareil, si on avait mis un header,
donc ici, si on avait un header authorization,
ben, pareil, côté, ici, là, ce serait rec.headers.authorization.
Donc là, on pourrait tout récupérer, ce qu'il y a dans la requête.
Et en fonction de, justement, tous ces paramètres,
on peut récupérer tout ce qu'il y a dans la requête.
Et en fonction de, justement, tous ces paramètres,
on va choisir ce qu'on fait.
Et puis, res, c'est trop facile, rien. Res.find.
Et là, on lui envoie ce qu'on veut.
Donc là, il se font une version très simpliste
qui renvoie juste,
en réponse, un texte.
Mais on va aller regarder dans la doc,
et en fait, il va y avoir moyen d'envoyer des headers,
les fameux headers de la réponse, là.
Tu vois. C'est à ce moment-là qu'on va aller mettre
ces dans res....
Alors, il y a sûrement plein de syntaxes différents,
on va regarder.
Et donc, ça, c'est plutôt ce qui va aller dans le body.
C'est le pédop.
Voilà. Donc, on va se le faire, celui-là.
Et puis, on l'exécutera sur notre machine.
Et puis, on essaiera de l'appeler depuis l'autre code, en fait.
Donc, on va faire du code qui l'envoie vers l'autre.
Alors, potentiellement, on va peut-être avoir un souci,
parce que le problème qu'on va avoir, c'est quoi ?
C'est un bête problème réseau, en fait.
C'est qu'on va pas pouvoir avoir sur la même machine
une connexion qui écoute sur un port,
et puis une autre connexion qui essaie de se faire sur ce port-là
et puis, on va pouvoir avoir un autre type de machine.
Ça va pas marcher. Donc, ce qu'on essaiera,
c'est de s'envoyer de ta machine à la même.
Voilà. Donc, on peut copier ça, par exemple,
pour essayer de faire un début.
Ouais, c'est ça. NPM install express
dans un répertoire ici.
Il faut faire attention à la bande.
Je vais enlever le console.
Là, je vais juste copier ce qu'il y a dans express.
Je l'enregistre.
Et puis, main.js, je vais le garder tout à l'heure.
C'est bien comme nom, je trouve.
Je vais juste renommer ça hello world.
Et puis, voilà. Maintenant qu'il s'appelle hello world,
je vais l'exécuter.
Donc, c'est du node.js, effectivement.
Et là, normalement, ce qu'il va faire...
Alors, tu vois, là, il me fait une petite alerte parce qu'il me dit
« Ouh là là, attends, t'essaies de te connecter au réseau,
est-ce que c'est pas une activité suspicieuse ? »
Non. Il se trouve que je sais ce que je fais, donc je vais dire
que j'autorise, autorise, allow access.
Voilà. Donc, si je vais dans debug console maintenant,
on me dit... Ouais, c'est ça.
La méthode qui est là, pardon, ici, là.
Ça, c'est une fonction.
C'est une syntaxe alternative en JavaScript, là.
Je sais pas si t'as déjà vu ça.
C'est plutôt que d'écrire function, tu peux écrire comme ça.
Voilà.
L'équivalent, c'est ça. C'est function et sans la flèche.
Voilà. C'est pareil.
Et là, tu le regardes, il me met ici,
« example app listening on port »
à le port. Et là, il est en train d'écouter, en fait.
Et tu as vu que l'exécution ne s'arrête pas.
Il est en train d'exécuter des trucs en boucle.
Il attend qu'on lui envoie quelque chose
sur le port 3000.
Et il va répondre « hello world ».
Quoi qu'on lui envoie, il en fait rien de toute façon.
Parce qu'ici, regarde.
Il ne fait rien avec Rec.
Donc, si tu veux, on va regarder
comment on peut faire ce communiqué dans ma file.
Je te laisse déjà peut-être faire tourner le truc chez toi.
Et puis, je vais chercher les adresses
pour qu'on puisse...
on 2024-03-18
language: FR
WEBVTT
Ah oui, justement.
Alors,
moi aussi, j'ai essayé,
là sur un site qui est vraiment qui s'appelle
whatismyip.com
dans l'AVM.
Je vais noter aussi, en fait c'est possible
que cette IP locale là, elle ne marchera pas.
Parce que moi aussi,
j'ai 10.36.
10.36.
Toi c'était 18 ? 10.3, on va la noter quand même.
Ah ouais, du coup c'est la même.
Ok.
Ok, bon, alors écoute, on va essayer.
C'est quoi tu dis ?
18.
Ok.
Alors attends, donc on va essayer tout ça.
Est-ce que chez toi,
ça tourne maintenant le Hello World ?
Ok, bah écoute, essaye.
Et je vais essayer de te contacter.
Voilà. Moi de mon côté,
alors tu peux regarder, je vais aller
récup... je vais essayer, aller 10.03.
18, on va essayer celle-là.
Essay.js,
là, là je suis côté client maintenant,
tu te souviens ? Alors je vais en faire un,
je vais faire save as, on va le simplifier.
Pas grave, toi tu peux laisser
jusqu'à demain s'il faut s'exécuter.
Y'a aucune urgence.
Donc, test.
Express.
API.
Alors,
console.coco, on va simplifier.
Console.coco, ça dégage.
URL.
Ça va être juste une IP maintenant.
Euh, non, il faut que je mette
HTTP par exemple.
Je vais mettre...
...
...
...
Le port 3000, parce que
t'as mis 3000 toi.
Voilà.
Const Axios,
je vais pas mettre de paramètres, on va pas s'embêter.
Pour l'instant, je simplifie à mort.
Function d'end,
finalis, ça dégage aussi.
Et en cas d'erreur,
ça m'intéresse d'avoir là.
Et s'il y a une réponse,
je vais afficher la réponse.
Tu vois ce que je vais faire.
Je vais afficher
les data si y'a.
Plus simple, tu meurs.
Je vais exécuter ça.
Et voir si j'arrive à te contacter.
Est-ce que...
Tu m'as répondu à le voir.
C'est bon.
Voilà.
Donc là, toi t'as un début d'API.
Alors, c'est une API pour l'instant.
T'as vu, y'a même pas de...
T'as pas le slash.
Et puis les fonctions que remplit l'API.
Mais c'est un embryon là, tout à fait.
Donc ce que tu pourrais faire maintenant,
tu vois, c'est ici.
Tu vas ajouter maintenant ici,
pour chacune des fonctions
que tu veux que ton API remplisse.
Tu vas dire...
Bonjour, par exemple.
Au revoir.
Et puis, tu as un API qui est...
Qui peut dire...
Hello, bye.
Et puis là...
Ask me slash...
Bonjour.
En slash...
Au revoir.
Tu vois, moi je pourrais faire ça, si tu veux.
Et...
Bah tiens, on va faire ça.
Ça va être à ton tour de m'appeler, justement.
Je vais te remettre mon code tout de suite.
Et on va faire comme ça.
Je peux faire ça ? Yes.
Voilà, comme ça tu peux recopier ça, si tu veux.
Alors moi je prépare l'API de mon côté.
Je vais l'exécuter.
Moi si j'en ai mon adresse,
c'est ça.
Tu sais quoi ? Je vais te copier tout ça
dans le...
dans le...
dans le...
Voilà.
Alors là il me met object object
parce qu'effectivement ça me gène.
Je peux mettre reg.
Alors ce qui est bien ici,
c'est que comme c'est apparemment
bien foutu,
il me met l'autocompletion.
Il connaît bien Express là.
Et puis donc il me met...
Est-ce que j'ai par exemple client ?
Non.
Origin.
Origin et URL.
C'est pas ça que je veux. C'est adresse peut-être.
Non. Qu'est-ce que j'ai ?
À quoi j'ai accès ?
Bays URL, c'est bien ça.
Je ne sais pas comment ça mais...
Body c'est bien.
Headers il devait y avoir forcément.
Voilà.
Tu vois j'ai les headers.
Ça c'est obligé.
Hostname, est-ce que c'est toi ça ?
Ah IP, voilà il est là.
Tiens regarde, IP.
Comme ça.
Reçu requête.
Allez on va mettre reçu requête 2.
Espaces.
IP.
Tac tac.
Je vais fermer ça maintenant.
Qu'est-ce qu'on avait encore on a dit ?
Ah oui headers.
Bah tiens t'auras...
On va faire que tu vas m'envoyer
en headers.
Ah oui il y a hostname aussi.
Et params, voilà les fameux paramètres d'URL.
Alors on va faire que tu vas m'envoyer
comme un paramètre d'URL
qui va s'appeler
ID par exemple.
Params.id
Ouais ? Ouais ouais.
Et puis reg.URL
Et moi je vais mettre l'IP,
le reg.params.id
url.
Donc id ce sera en minuscule.
Alors attends, faut que je redémarre du coup moi.
C'est parti.
Voilà c'est bon.
Alors j'ai
enigre 12.
Ah c'est peut-être moi qui fait pas comme il faut.
Alors attends c'est peut-être comme ça.
Ah ouais mais je vois bien le 12 là.
Donc je pense que ça doit être un truc comme ça.
Genre qu'il faut que je fasse peut-être.
Alors essaye-moi.
Tu m'appelles à la racine ?
On va réessayer ça avec ça.
Avec l'id.
Bon je sais pas pourquoi.
Il faudrait regarder la doc d'express pour
pour finir cet exemple correctement.
Mais tu vois l'idée c'est que en fait
là on peut construire une vraie
interaction
logique quoi.
Ils ont bien c'est ça.
Ah ouais alors
est-ce que ça marche ça ?
Ou est-ce qu'il vaut mieux passer par
params ?
Peut-être essaye avec params on va voir
la différence et moi je vais chercher
pendant ce temps dans la doc
d'Axios.
Pardon de l'Express.
En fait de mon côté je vais faire un truc moins plus.
D'accord.
Non c'est très bien comme ils ont fait le truc
en fait avec params.
Est-ce que ils ont appelé ça un trône ?
Non que params du coup.
On est pas loin
mais en fait ils ont fait un truc vachement bien.
Donc regarde.
Dans Express les params
en fait.
Ce que j'essayais de faire moi dans mon code ici
avec params je voulais aller un petit peu vite.
Alors dans Express
c'est pas
la même chose ici params
que ça là.
Tu te souviens ici
regarde disons
slash v2 slash la slash nbbo
et là un truc qui peut être
un peu variable. Donc qui va prendre cette valeur là.
Par exemple si tu regardes la murelle complète
ça va être slash v2 slash last
slash nbbo
ça c'est le chemin
ça c'est le head point.
Avec en plus une valeur
qui va te choisir
au dernier moment par la personne qui fait la peine.
Si c'était des
currencies tu vois ça se trouve ce serait un truc
genre un euro
ou une yen
etc.
C'est ça les params dans Express.
Donc c'est encore avant
le point d'interrogation là.
Tu vois ici
on construit un chemin comme ça.
Je ne vais pas trouver rapidement
mais c'est pas grave on va faire un autre exemple
en utilisant les params il n'y a pas de soucis.
Donc je vais faire du coup
une route différente.
On va juste faire comme ça.
On veut dire que ici
sli bonjour
je vais te mettre ça dans la doc
carrément on va faire ça bien.
Your name
envoi slash
your name
ok
Donc moi ce que je vais te demander
c'est de passer ici
si tu m'envoies
je vais simplifier ici
reçu requête de l'IP
machin
requête url ça c'est bon.
Si tu m'envoies
quoi que ce soit à la racine
je vais te dire ask me bonjour avec your name
ou au revoir avec your name.
Donc là je fais un petit peu la même chose
que là tu vois je documente
en te disant ce qu'il faut que tu m'envoies.
Et maintenant
en suivant la doc
de express là
les paramètres ça va s'indiquer par un
deux points de doc.
Je vais le faire comme ça.
Je vais l'appeler juste name
pour faire plus simple.
Pareil avec au revoir
au revoir slash
deux points name
et maintenant ici
avec le nom
rex.params.name
rex.params.name
parce que je l'ai mis
avec ici
deux points nanana
si tu me contacte il va parser
la requête comme ça et il va ranger
la valeur que tu vas me passer
dans rex.params.name
Je vais le retrouver
côté serveur comme ça.
Donc en fait express voilà il me lâche
vachement le boulot si tu veux.
Et ce que je vais faire c'est que moi
quand je vais te répondre je vais t'appeler par ton nom.
Hello
name
du coup c'est avec
params.name
et je vais le mettre dans la réponse.
Goodbye
Il y aura un slide de démon aussi.
Donc on a parlé de haute
qui souvent
est confondue
les anglais ils diront
l'autre quoi.
Mais si on veut être précis
il faut qu'on distingue l'identification
de la trist.
Alors
il y a ce truc qui s'appelle
haute
alors c'est un truc
donc
il y a un produit commercial
qui s'appelle haute zero et il faut pas
confondre parce qu'il est très bien placé
dans les résultats google et c'est très bien
haute zero. Mais c'est un produit commercial
c'est une
librairie qui fait des trucs de identification
etc. Et moi ce genre de jeu
de parler c'est haute.
Donc il faut aller voir ici
soit dans wikipedia soit
dans le site web
ou haute.
Voilà
c'est un standard
open source donc à ne pas confondre
avec haute zero.
Je vais même le mettre dans le
dans le doc, on va le mettre là.
Il a très bien choisi ce tournant pour que tout le monde s'embrouille
et viennent acheter leurs produits
mais bravo à eux.
Tant mieux pour eux.
Non c'est très bien, c'est vraiment très bien compris.
Donc haute c'est quoi ?
L'idée c'est que, imagine
on est une startup, on fait une application
mobile pour permettre
aux gens qui utilisent Instagram
d'avoir
des statistiques
sur leur compte
de gérer plus facilement
leurs followers etc.
Du monde actuel
de l'économie actuelle.
Donc nous
nos utilisateurs par exemple
vraiment c'est des gens qui vont nous payer
15 dollars peut-être par mois
pour avoir
des outils très puissants
pour gérer leur compte Instagram.
C'est vraiment des gens qui ont besoin de ça
parce que c'est leur job, ils sont prêts à payer.
Et nous on va leur fournir
des fonctionnalités
au niveau de notre interface
que Instagram n'a pas prévu.
Par exemple on va
prendre en compte
qui les a unfollow
récemment,
qui est-ce que eux
ils follow et que
je ne sais pas si tu connais
Instagram et tout ça.
Qui est-ce que eux ils suivent
et qui ne les suivent pas en retour.
Vraiment toute une logique si tu veux
de gens qui font de la com
dans la réseau social.
Nous on a ces fonctionnalités.
Le problème c'est que notre application
on écrit du code
et puis au moment où on va se connecter
à l'API d'Instagram
c'est dangereux
si notre code
il a accès
potentiellement à
n'importe quel compte Instagram.
Instagram lui ne nous donnera
jamais l'autorisation
il ne nous fait pas confiance
pour dire
non non mais t'inquiète
si je te dis
de modifier le compte
de Monsieur Machin, fais le.
Instagram ne nous fera jamais confiance à ce point là.
Donc ce qui va se passer
c'est que contrairement à une application traditionnelle
si j'écrivais une application traditionnelle
pour me connecter à une API
j'aurais
dans mon application
un token.
C'est ce que j'ai fait là depuis ce matin là.
J'ai un token
ce token permet à mon appli
d'attaquer l'API
et de dire c'est moi
l'API dit d'accord
et m'autorise
là jusqu'à maintenant je n'ai fait que de la lecture
donc c'est pas très grave.
Tout le monde a a priori les mêmes droits
après si tu payes t'as accès à plus de trucs
bien sûr on a vu mais grosso modo
une fois que t'as le token
tout le monde peut voir les mêmes trucs.
Dans les cas comme celui que je viens de dire
avec Instagram, on est dans un cas
où en fait on va vouloir cloisonner
vachement les informations.
C'est à dire que si
tu viens avec tel
token
tu vas pas pouvoir voir tout.
Tu vas pouvoir voir que les infos
d'un utilisateur en particulier.
C'est à ça que sert OOTH
c'est
à permettre de dire
au moment d'arriver devant l'API
de dire hey c'est moi
j'ai les autorisations pour voir
le compte de Monsieur David
Roullain.
Tu peux me faire...
Fais moi confiance pour te dire
même de faire des
modifs dans le compte par exemple
supprimer tel poste
ou publier telle image ou je ne sais quoi.
Bien sûr que Instagram veut
cette possibilité.
C'est des gens, Instagram, Facebook
les banques, tout ce que tu veux.
Les business qui ont des api
puissantes
ont tout intérêt
à offrir des fonctionnalités les plus
avancées possibles
et qui permettent donc ce mode
de fonctionnement où on va faire
les choses
comme on dit en français déjà
au nom de
quelqu'un d'autre.
C'est très voulu mais pour
le réaliser on va avoir ce qu'on appelle
une authentification
à...
il y a trois pattes en fait.
Il y a moi mon application
la start up, il y a
l'utilisateur
qui
utilise mon application
pour accéder à son compte
Instagram. Donc ça c'est la deuxième
pâte, c'est l'utilisateur.
La troisième pâte c'est Instagram.
Il y a trois acteurs dans l'histoire.
Dans une configuration
traditionnelle, t'as que deux pattes.
T'as mon app
et l'api.
Donc c'est simple.
Dans le cas que je décris c'est plus compliqué
et donc il y a une solution. Alors il n'y a pas que au-haut
mais c'est la plus populaire.
L'idée c'est quoi ?
C'est que chaque utilisateur
en utilisant la même base
de code
va pouvoir ici grâce à au-haut
se connecter à son compte Instagram
à lui.
Au-haut il va faire quoi ? Il va dire
en gros, c'est aussi une api
d'ailleurs.
Mais c'est une api qui va me renvoyer
un token en fait. Et après ce token
je pourrais m'en servir dans l'api d'Instagram.
Donc comment ça marche ?
En gros
mon code va contacter
un chemin particulier
dans l'api Instagram
qui va être
en fait où derrière le code ça va être
au-haut. C'est-à-dire
si je fais une analogie là
ça va être des chemins particuliers
comme ça tu vois.
Et à l'intérieur là dans les méthodes
ça va être du code
de la librairie au-haut.
Qui va
renvoyer comme réponse
un challenge
pour que
l'utilisateur
s'identifie ?
Le challenge, alors le plus simple
c'est pas le plus courant
mais ça existe.
Le challenge qu'il peut renvoyer
c'est par exemple, donne-moi ton user
en outre-face si c'est vraiment
pire.
L'exemple de
tu dis
le premier c'est le blanc
Pierre. Il dit
je suis Pierre, je voudrais mon compte Instagram
mais dans cette application. Donc c'est mon code
qui fait la requête
donc le code qu'il utilise
va dire, si t'es vraiment Pierre
donne-moi le mot de passe de Pierre.
Ouais, bah
la
ouais, c'est à dire
ça a dû déjà t'arriver
quand tu vas
sur un site et tu veux créer un compte
et il te dit, si tu veux tu peux te loger avec Google
ou il te dit, tu peux te loger avec
Facebook. Et bien ça c'est au-haut.
C'est exactement ça.
Là c'est vraiment au-haut
qui est mis en offre.
Ta desktop là ?
Ah ouais, je savais.
Ok, je ne savais pas qu'on pouvait.
Ouais.
Le
le au-haut
en fait permet
d'empêcher un
programmeur malveillant
d'utiliser
le compte Instagram
de quelqu'un à son insu. Donc
si tu as installé cette application
et que tu dis je suis
enfin je voudrais, voilà
mon compte Instagram c'est ça par exemple.
Tu vas dire voilà mon compte Instagram.
L'application va essayer de se loger.
Et en fait, Instagram
il dit ouais
moi qui me dit que
le programmeur là au moment où
Instagram reçoit la requête, il a
aucune idée que c'est vraiment l'utilisateur
qui est derrière. C'est peut-être un
compte piraté. Donc qu'est-ce qu'il fait ?
Il renvoie un challenge et il dit, si t'es vraiment Pierre
donne-moi le mot de passe de Pierre.
Et donc ça s'affiche dans l'app et c'est pour ça que t'as ce
truc où il te dit, êtes-vous
bien sûr de vouloir autoriser
l'application à faire ci avec votre compte Instagram ?
C'est ça un truc de challenge.
Voilà c'est ça. C'est à dire
le user mot de passe c'est
pas forcément le plus
voilà le plus
courant.
Alors tu soulèves un autre truc
qui est l'authentification de facteurs.
On en parlera. C'est encore
un autre truc l'authentification
de facteurs.
C'est un prince.
Il peut y avoir de l'authentification
de facteurs avec OAuth
comme
comme processus
pour vraiment identifier
que c'est Pierre et que c'est pas un
compte piraté avec un développeur maveillant.
Mais l'authentification
de facteurs c'est un truc plus générique
qu'on va trouver dans la sécurité
informatique qui consiste à dire
je vais pas me satisfaire d'un mot de passe
il me faut encore un deuxième.
Donc c'est pas forcément
dans les API
et dans OAuth. C'est plus généreux
comme concept.
Mais effectivement avec OAuth
des fois t'as
deux facteurs.
Du genre
tu veux clodier avec ton compte Microsoft
ou avec ton compte machin. Il te dit ouais ben attends
prends encore tout. Ok
et t'as peut-être volé le mot de passe de Pierre
donc est-ce que t'as bien le mobile
de Pierre ?
C'est ça l'idée.
Et ça arrive.
Donc ça c'est pour
OAuth. On
fera peut-être un exemple demain.
C'est un petit peu ambitieux mais c'est possible. On avance
relativement vite donc on verra.
C'est intéressant
mais c'est même pour des développeurs
expérimentés c'est un peu casse-tête. Donc
c'est pour ça que je dis qu'on maîtrise
quand même les bases avant.
Parce que en gros c'est quoi ?
C'est beaucoup d'allers-retours
en fait. Donc il faut bien comprendre
en fait
tu appelles en donnant un call back
c'est pas normal.
Tu appelles une méthode
d'une
pointe d'une API
en précisant un call back
de ton côté.
C'est vraiment assez avancé
comme usage. Et comme ça
OAuth va te dire si ça réussit
fais ça.
Je vais essayer de te montrer un exemple si on peut faire ça.
Ça peut être intéressant en fait.
Deuxième
sujet
qui a rien à voir pour le coup.
C'est un tout autre sujet mais c'est un truc qu'on va aussi trouver
un peu plus récent
comme paradigme mais c'est très
intéressant.
Ça a apparu
j'aurai du mal à dire quand ça a apparu exactement
c'est plus récent.
Donc le webfook
c'est
tu vas
donner
à un système. C'est vraiment une description
générale là que je fais. Il y a plein de
façons différentes dont c'est utilisé
après concrètement.
Le principe général c'est
tu contacts un système
en général
via une API
et tu lui dis s'il se passe
tel truc.
Voici une URL que je voudrais que
tu contacts.
C'est vraiment de l'abonnement.
On est proche de ce qu'on avait dit
sur la programmation événementielle
où on va dire s'il se passe tel événement à telle méthode
mais tout ça c'est dans du code.
Ça reste à l'intérieur du code et puis
ça s'exécute en mémoire.
Là c'est la même
philosophie mais via le web en fait.
On va dire s'il se passe ça. Alors voilà
je voudrais que toi le système
tu contacts cette URL.
Et donc s'il se passe ceci préviens-moi
le webhook c'est
l'adresse que moi je fournis.
Et ensuite l'événement se produit
et le système contacte cette URL.
Alors peut-être que cette URL
la truc chez moi.faire c'est peut-être
un site web que je héberge. Il est
pas forcément.
Tu vois contrairement à
un appel à une API
ou en fait c'est depuis là
où j'ai envoyé la requête
que je vais attendre la réponse.
Donc c'est ping pong quoi.
Un appel d'API.
Webhook c'est encore plus
décentralisé
dans le sens où
je vais dire à un système
tiens j'ai cette URL là
où je...voilà peut-être
je vais pas chez un OVH ou un fourmagnac
j'ai mis un truc
qui écoute et
ça ça contacte cette URL.
Donc ça
je le signale parce que
c'est en train de devenir assez à la mode
et on sort
un tout petit peu du cadre
de l'API traditionnel
dans le sens où l'API traditionnel c'est
je...requête
réponse
réponse
au même endroit d'où vient la requête.
Ça peut être intéressant on fera peut-être
un petit exemple rapide là-dessus.
Alors ici
le truc de dire si il se passe ceci
alors taillez en main c'est pas obligé d'être un appel
API ça peut être
par exemple GitRub
tu vois ce que c'est un GitRub.com ?
Ouais c'est pour héberger
des repositories Git
Donc GitRub
par exemple
il permet
de pour un repository
donné, un projet avec du code
d'automatiser certaines tâches
donc tu vas aller dans
les paramètres du projet
tu vas dire bah voilà si
à chaque fois que je te pousse du code
si je mets un tag spécial
alors tu lances par exemple
une compilation je sais pas quoi.
Voilà.
Et tu vas peut-être mettre par exemple
dans cette automatisation
alors cette automatisation
ça va s'écrire dans des fichiers de config
en fait c'est vraiment du texte
structuré, ça s'appelle du yaml
mais peu importe
sur un format d'instruction
comment ça s'inscrit
tu mets ces instructions d'automatisation
et tu vas dire
dedans par exemple
si je te pousse du code avec tel tag
fais telle action
envoie moi un mail à telle adresse
si telle
ou telle personne
a poussé du code sur telle branche
envoie moi un mail tu vois pour
si quelqu'un a supprimé un truc
envoie moi un mail je sais pas quoi
mais ça peut aussi être
contact ce webhook
et pour le coup
c'est pas du tout un appel d'API
le webhook là c'est juste
dans un fichier, dans un script de configuration
à un moment donné tu mets webhook
machin un truc
le webhook c'est un concept
et c'est pas
forcément toujours lié à un appel d'API
par contre
au moment
où le webhook il est activé
on est dans une
interaction de type API
c'est à dire que le système ici
il va contacter cette adresse
et ça va être
vraiment minimal dans le sens où
le système il en a
mais rien à faire de la réponse
l'idée du webhook
c'est que tu veux être prévenu
mais c'est vraiment
le, tu sais le
le livreur
qui vient, qui jette le colis
contre ta porte
et qui se barre en courant, il s'en fout totalement
si tu reçois un mail ou pas
on lui a dit d'envoyer un truc à cette adresse là
mais voilà, il s'intéresse pas
il a autre chose à faire
donc c'est en ça que je dis
que c'est un peu comme une API
parce que toi ici, en fait
ton webhook il va écouter
en espérant que le système va un jour
lui dire quelque chose mais
c'est juste pour être prévenu et faire
quelque chose en interne, en fait la réponse
tu peux la faire mais elle sert à rien
voilà
on trouve ce thème de plus en plus
maintenant dans la littérature, donc faut qu'on trouve ce que c'est
pareil, on pourrait parler d'autres choses
les websockets
y'a beaucoup de choses à dire
mais
je parlerai un petit peu de
de websockets et de webRTC
etc.
parce que c'est juste la culture
des échanges sur le web
entre systèmes
nous on est vraiment focus sur
les API, le web traditionnel
donc notre JavaScript
plus express, puis ton plus flash
ça c'est pour pouvoir faire une API
qu'est-ce qu'il nous reste à faire
17 heures
on peut se faire encore
une demi-heure comme on avait dit
je propose
ça va tu tiens le coup, c'est pas trop rassurant
c'est bon ? Cool
alors ce que je propose
c'est que on va juste essayer
d'aller un peu plus loin
premier exercice
que je vais te proposer
on va se prendre
il n'y a même pas 5 minutes, on va faire jusqu'à 17 heures
ouais, 17 heures, 10 heures, on va faire
en fait tu vas
appeler le même ici
mon hello world là
qui tourne
je vais le laisser tourner
tu vas l'appeler
mais cette fois-ci depuis le client
Python pour montrer que
on peut utiliser une techno de chaque côté
qui n'a rien à voir avec l'autre
donc juste réécrire le client que tu as fait
je l'ai mis ici, texte express
le tien il est mieux maintenant
refaire ça en Python
on va faire un autre script
ça va ?
je vais l'exécuter en permanence
comme ça, tu peux tester quand tu veux
et je vais aller me faire couler un café
parce que j'ai pas pris de poster
donc je te laisse 5-6 minutes
et puis on va voir
j'arrive