- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans la section précédente, on avait créé un graphique avec des valeurs que l'on avait entrées nous-mêmes.Dans cette partie et les parties suivantes, on va commencer à récupérer les données de notre APIque l'on avait créé dans la première partie pour modifier notre graphique,donc pour afficher différentes devises et afficher les valeurs de ces devises.
00:00:20 :Donc là, j'ai toujours mon graphique que l'on avait fait dans la partie précédente.Je vais retourner à l'intérieur de mon fichier views.pyet dans ce fichier views.py, on va importer notre API pour pouvoir l'utiliser.
00:00:32 :Donc ici tout en haut, je vais faire import et je vais importer le fichier API.Donc le fichier API qui est à l'intérieur de mon dossier source, je peux l'importer directement en important juste API comme ceci.
00:00:43 :Et on va utiliser ici notre fonction que l'on avait créé à l'intérieur de cette API qui était la fonction getRate.Si jamais vous ne vous souvenez plus de ce qu'il y avait à l'intérieur de cette fonction,il y a un raccourci très pratique sur PyCharm, c'est CMD B ou CTRL B sur Windows
00:00:59 :qui vous permet d'accéder directement au fichier qui contient cette fonction et à cette fonction en tant que telle.Donc là, on est à l'intérieur de notre fichier API.
00:01:07 :Vous voyez qu'automatiquement, il l'a ouvert et on se retrouve dans la fonction.Donc ça nous permet de voir par exemple ici que l'on retournait deux choses.
00:01:14 :Donc on va devoir récupérer ces deux choses à l'intérieur de notre vue ici.Donc je vais récupérer ces deux choses dans des variables.Je vais les appeler Days et Rates puisqu'on va récupérer la liste de jours et la liste des devises.
00:01:27 :Donc je vais mettre égal et c'est égal à ma fonction.La fonction, il fallait qu'on lui donne une devise, une ou plusieurs devises en fait à récupérer.
00:01:35 :Donc pour l'instant, on va juste indiquer une devise et on va dire que c'est le USD.Donc là encore le dollar américain, on va prendre ça comme exemple.
00:01:43 :Et on avait par défaut une étendue de jours qui était de 30 jours.Donc je vais quand même la remettre ici.Donc vous voyez que par défaut ici on a Days qui est égal à 30.
00:01:52 :Pour l'instant, je vais le remettre à 30.Donc ça ne sert pas à grand chose mais on va voir dans les prochaines parties comment modifier en fait cette valeur en fonction des paramètres de l'URL.
00:02:01 :Donc pour l'instant, je le mets comme ça on l'a et on fait juste mettre la valeur par défaut.Ces données que j'ai récupérées, donc Days et Rates, il va falloir que je les passe à mon fichier HTML, donc à mon template ici.
00:02:12 :Donc pour ça, je vais utiliser le contexte.On l'avait vu dans une des parties d'introduction de cette formation qu'on pouvait passer en fait des valeurs depuis notre vue jusqu'à notre template grâce à ce dictionnaire contexte ici.
00:02:24 :Donc ce que je vais faire, c'est faire une première clé ici que je vais appeler Data qui va contenir les données de mes devises.Donc on va mettre notre dictionnaire Rates ici qui contient les devises.
00:02:44 :Donc ça, ça va être notre variable Days.Donc ça, je vais pouvoir le récupérer à l'intérieur de mon fichier index.html.Donc je viens dans mon fichier ici et plutôt que d'avoir ces valeurs que l'on avait mis en dur dans la partie précédente, donc avec des valeurs un peu arbitraires,
00:02:58 :et bien cette fois-ci, on va intégrer les valeurs que l'on a envoyées avec le contexte.Donc ce qu'on va utiliser ici, c'est le nom des clés, donc Data et Days Labels.
00:03:07 :Donc pour les jours ici, plutôt que de mettre cette liste, on va insérer notre variable.Donc pour ce faire, on utilise les doubles accolades, donc comme ceci.
00:03:15 :Alors attention, des fois on peut avoir des problèmes vu qu'on utilise déjà des accolades ici en JavaScript.Dans ce cas-ci, ça ne pose pas de problème, mais je préfère vous prévenir.
00:03:23 :J'ai déjà eu des problèmes en essayant d'intégrer des variables comme ceci à l'intérieur de JavaScript.Donc ce qu'on peut faire généralement, c'est essayer de mettre en fait ces valeurs à l'intérieur de notre fichier HTML,donc pas dans le script ici, on va toujours être dans le fichier HTML, mais pas dans la partie JavaScript,
00:03:39 :vraiment dans la partie HTML avec un tag qui va être par exemple caché, mais qui va contenir ces valeurs,et on pourrait ensuite récupérer ces valeurs comme on l'a fait ici en récupérant notre élément de chart.
00:03:50 :Donc c'est une manière de faire, il y en a plein d'autres.C'est assez courant d'avoir ce genre de petites erreurs en fait en web,puisqu'on a beaucoup de technologies différentes qui s'imbriquent les unes dans les autres,donc ne vous inquiétez pas, c'est assez courant d'avoir des erreurs.
00:04:04 :Ça fait partie du jeu, je ne veux pas trop vous faire peur.Dans ce cas-ci, ça fonctionne, mais je préfère vous prévenir.Donc à l'intérieur ici de mes doubles accolades, je vais indiquer le nom de la clé,donc la clé DaysLabels qui me permet de récupérer tous les jours.
00:04:17 :Donc dans mon template, je vais l'intégrer ici,et on va voir par la suite qu'il faudra rajouter quelque chose.Pour l'instant, je vais juste la mettre comme ça, et on verra sur notre page web ce que ça va nous donner.
00:04:27 :Dans Data ici, on a notre liste des valeurs.Je vais mettre la même chose, donc des accolades,et je vais remplacer ces valeurs par cette fois-ci Rate,qui est notre dictionnaire que l'on a envoyé ici.
00:04:37 :Alors j'ai mis Rate, mais en fait non, ce qu'il faut mettre c'est Data.Donc vous voyez, bien faire attention.On peut des fois mettre la même chose.
00:04:43 :On pourrait mettre Rate ici pour ne pas s'en mêler,puis là aussi on pourrait mettre Days pour avoir la même chose.C'est vraiment à vous de voir.
00:04:50 :Là, vu que c'est des données, je préfère mettre Data.Mais après, bien entendu, il faut faire attention de mettre les bonnes valeurs ici.Donc là c'est Data qui est le nom de la clé que l'on passe en contexte.
00:04:59 :Donc si je reviens ici et que j'actualise,alors là on n'a rien, donc c'est normal en fait si vous actualisez trop vite,comme on l'avait déjà vu dans une partie précédente,votre serveur n'aura pas eu le temps de se remettre en place.
00:05:10 :Donc là j'actualise une fois de nouveau, et je n'ai rien sur ma page web.Donc qu'est-ce qui se passe ici ?On peut en fait aller inspecter les erreurs de JavaScript,là encore avec les DevTools de Chrome.
00:05:21 :Donc en faisant un clic droit, on va aller dans Inspect,et on va se rendre dans l'onglet Console ici.Et là vous voyez qu'on a une syntaxe erreur,et pour aller voir où se trouve cette erreur de syntaxe,on peut cliquer ici tout à droite sur le lien qui nous est retourné avec le numéro de la ligne.
00:05:37 :Donc on voit que l'erreur se situe à la ligne 26.Donc je clique dessus, et on voit ici qu'on a des données qui sont un petit peu bizarres.
00:05:45 :Donc le problème ici c'est qu'en fait Django a intégré notre variable à l'intérieur du fichier HTML,et elle a un peu interprété cette variable.Donc par exemple les guillemets qu'on avait, elle les a convertis en symboles HTML,et ça nous a posé des problèmes ici puisqu'on n'a pas ce qu'on avait dans notre vue,
00:06:01 :c'est-à-dire tout simplement des guillemets, donc des chaînes de caractère en fait avec les dates.Donc pour ça on va devoir rajouter quelque chose comme je vous disais ici,c'est en fait ce qu'on appelle des filtres.
00:06:11 :Donc le filtre qu'on va rajouter, on va le mettre après une barre droite comme ceci,donc une barre verticale.On va rajouter le filtre safe qui va nous permettre d'indiquer à Djangoque l'on ne veut pas en fait avoir cette interprétation de nos caractères.
00:06:24 :Donc on veut vraiment les guillemets.Si jamais vous voulez voir une liste de tous les filtres,vous pouvez vous rendre dans la documentation de Django.
00:06:31 :Vous avez une page built-in template tags and filters.On va retrouver notamment tous les tags, comme par exemple pour les bouclesque l'on avait vu dans une partie précédente.
00:06:40 :Et si vous allez ici à droite, vous avez une partie built-in filter reference.Et si on descend, on va retrouver notre tag safe avec l'explicationqui vous dit effectivement ici que ça va empêcher d'avoir le escaping de HTML.
00:06:52 :Donc on va revenir ici et on va faire la même chose pour notre deuxième variable.Donc pour data, on va mettre une barre et on va mettre safe.
00:07:00 :Si je reviens sur mon site que j'actualise, cette fois-ci notre graphique s'affiche bien.Donc vous voyez ici dans notre code source qu'on a bien cette fois-ci les guillemetsqui séparent notre chaîne de caractère, donc c'est ce qu'on voulait.
00:07:10 :Par contre, on n'a pas encore les valeurs qui s'affichent.Alors pourquoi ? Et bien tout simplement parce que si on regarde nos data ici,auparavant si vous vous souvenez bien, on avait juste une liste et là on a notre dictionnaire.
00:07:20 :Donc c'est normal puisqu'on a envoyé directement notre dictionnaire.Dans data ici, si je reviens dans ma vue, on a envoyé rate.Et rate, si vous vous souvenez bien à quoi ça ressemblait,on avait un dictionnaire avec en clé les devises et en valeur les valeurs de chaque devise.
00:07:35 :Donc là le problème c'est que nous on veut uniquement les valeurs de USD.Donc pour l'instant là encore on va le mettre en dur, on va mettre des crochetset on va indiquer qu'on veut uniquement les valeurs de la devise USD.
00:07:46 :Et dans les prochaines parties on verra comment rendre ça un peu plus dynamique,notamment via l'URL.Donc là je vais mettre rate de USD, je reviens dans mon site web, j'actualise.
00:07:57 :Donc là encore j'actualisais un peu vite, je vais réactualiser une fois de nouveau.Et cette fois-ci vous voyez qu'on a bien notre graphique qui s'affiche.
00:08:04 :Et si je regarde dans mon code source, on a bien uniquement les données iciet non plus le dictionnaire au complet.Donc tout est bon, on a les données, on a les jours.
00:08:13 :Je vais fermer cette page ici puisque je n'en ai plus besoin.Et on a notre graphique qui s'affiche.Donc c'est parfait, c'est exactement ce qu'on voulait.
00:08:20 :Et vous voyez qu'on a vraiment en fait pas grand chose ici.On a une ligne de code qui va chercher les données de notre API.
00:08:26 :On envoie ces données à notre template HTML.Et là on a juste remplacé les données que l'on avait mises en dur dans notre scriptpar ces variables et il suffit juste de rajouter le filtre safepour faire en sorte qu'on n'ait pas une interprétation de ces données avec le HTML.
00:08:41 :Mais c'est vraiment tout ce qu'il y avait besoin de faire.Dernière chose que je vais vous montrer puisque je l'avais oublié.J'avais oublié de vous le montrer en fait dans une partie précédenteet je vous avais dit que je vous montrerais.
00:08:50 :C'est ce paramètre fill qui est à false.Donc par défaut il est à true si je l'enlève et que je reviens sur mon siteet que j'attends un petit peu cette fois pour ne pas avoir d'erreuret pour que le serveur ait le temps de se rafraîchir.
00:09:01 :Donc voilà c'est bon.Vous voyez qu'on a par défaut ici une couleur en dessous de notre ligne.Donc par défaut le fill est à true.
00:09:08 :Moi je ne voulais pas cette couleur donc c'est pour ça que j'avais mis le fill à false.Mais si vous voulez vous pouvez l'enlever ou le mettre à true.
00:09:14 :Et si vous voulez également changer la couleur c'est possible en spécifiantbackground color ici et en spécifiant là encore une couleur RGB.Donc je pourrais mettre RGB.
00:09:23 :On peut mettre la même couleur.Je peux mettre 255, 128, 128.On n'oublie pas la virgule ici pour séparer les différents éléments de notre dictionnaire.
00:09:31 :J'actualise et là on a bien cette couleur qui apparaît tout en dessous de notre graphique.Donc c'est très pratique.On peut bien entendu modifier cette couleur ici.
00:09:39 :On peut mettre n'importe quoi dans le RGB et on va avoir une couleur qui va s'adapter ici.On pourra même mettre de la transparence en spécifiant un RGBA.
00:09:48 :Donc en spécifiant la couche alpha pour avoir de la transparence.Ce qui est par défaut je crois le cas puisque si j'enlève cette couleuret que je reviens vous voyez qu'on voit encore un peu en transparenceles lignes du graphique en dessous.
00:09:59 :Donc à vous de voir ce que vous préférez.Moi je l'ai mis à false puisque je voulais juste la couleur de la ligne.Mais si vous voulez avoir une couleur pour votre graphique,vous pouvez bien entendu remettre ce paramètre à true avec une couleur de background.
00:10:11 :Donc voilà pour cette partie dans laquelle on a récupéré les données de notre API.Et dans les prochaines parties on va voir comment rendre ça un peu plus dynamique avec l'URLpour pouvoir spécifier un nombre de jours et des devisesqui vont être différentes en fonction de l'URL que l'on entre sur notre page.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.