Session du 20 avril 2023 à 20h00
Développement Web & Frameworks
DevOps & Environnement
Deviens membre Premium magic_button
Cette session de mentorat est réservée aux membres Premium. Rejoignez-nous pour accéder à toutes les rediffusions des sessions de mentorat !
Premium
- check +100h de formations
- check +180 exercices de code
- check +100h de mentorats en rediffusion
- check 20 projets
- check Mentorats groupés hebdomadaires
- check Support individuel avec nos mentors
API Django REST et dashboard Streamlit
Cette vidéo montre comment concevoir un backend Django REST Framework pour stocker des marques de voitures et leurs ratios associés. Vous verrez ensuite comment développer un frontend interactif en Streamlit qui interroge l’API pour afficher les données en temps réel. L’exemple fil rouge d’un vendeur de voitures permet de comprendre concrètement la communication entre backend et dashboard. Enfin, une introduction à l’orchestration avec Docker et Docker Compose illustre comment préparer ce type d’application pour une exécution locale ou une future mise en production.
00:00:00 :Ok, ça enregistre et je vais partager mon écran.Du coup, Péa, je t'envoie sur Twitter ou sur le site Docstring l'image du screen.Je propose qu'on commence, je ne sais pas si vous avez pu regarder un peu le programme,est-ce que ça vous intéresse? Je pense que les autres ont du son.
00:00:42 :Est-ce que quelqu'un d'autre? Mais bon, je crois que Salvator a confirmé.Tu as déjà quitté et revenu, Seb? Est-ce que là maintenant tu nous entends?
00:01:17 :Oui, c'est bon, je suis sorti de l'agent Vue et du coup maintenant ça marche.Très bien, comme quoi, il ne faut pas se prendre la tête des fois.
00:01:31 :J'aurais dû essayer tout de suite.Salut! Alors, ce que je vous propose aujourd'hui, est-ce que là c'est assez grand?Alors en fait, ce qu'on va faire, on va faire une…On va imaginer en gros qu'on est un vendeur de voitures et que les voitures c'est quoi,elles sont réparties en marques, donc ça peut être Renault, Peugeot, Ferrari pour
00:02:18 :les plus chanceux etc. et dans chaque marque il y a un modèle.Et donc en fait on va se dire, imaginons qu'on veuille, que le vendeur de voitures il veutque en fonction de la voiture choisie, donc je sais pas, j'ai dit une bêtise, une Twingo,donc en fait Twingo c'est un modèle d'une voiture Renault.
00:02:38 :Donc en gros, le vendeur de voitures ce qu'il va vouloir c'est, il va se dire, en fonctionde la marque, je vais appliquer un prix, un ratio sur mon prix, je vais faire x2 oux1 ou x3, j'ai dit des bêtises mais c'est juste un exemple.
00:02:54 :Attendez je vais couper ma caméra, y'a pas besoin.Donc en gros on va se dire que le vendeur de voitures il veut qu'en fonction de lamarque de la voiture il applique un certain ratio.
00:03:03 :Et donc en fait ça, ça va être notre back-end, ça va être le back-end, il va dire en faitça va être une API qui va tourner avec une base de données dans laquelle on va mettretoutes les marques de voitures et à chaque marque de voiture on va associer un ratio.
00:03:20 :Donc ça va être tout simple, on va faire un modèle simple dans Django avec un nomgenre Peugeot et le ratio associé.Et ensuite on va avoir un front-end, donc là ça va être le dashboard, donc on vautiliser Streamlit, et en fait le front-end il va permettre justement de sélectionner
00:03:39 :la marque puis le modèle et en fait en fonction de la sélection on va afficher le modèleet la marque, enfin le modèle et la marque et le ratio que le vendeur doit appliquer.
00:03:53 :Et en fait pourquoi on va faire ça, pourquoi on va faire une API? Parce qu'en fait leback-end ici on va commencer par une app Django mais pour que le front-end puisse discuteret interroger automatiquement le… Est-ce que ça marche? Ouais.
00:04:10 :Ok bon c'est un peu nul mais… On va utiliser ça.En fait le front-end il va interroger le back-end, le front-end en fait on va lui sélectionnerle modèle, enfin la marque, la marque elle va interroger le back-end qui va dire pourcette marque là tu mets ce ratio par exemple 2 et en fait une fois qu'il aura eu son
00:04:32 :ratio de 2, il va l'afficher sur le front-end.Et donc c'est la raison pour laquelle on doit avoir une API ici et non pas une applicationDjango parce qu'en fait l'API elle va permettre, elle va donner une interface entre le front-endqui va être un dashboard en Streamlit et interagir avec la base de données, l'application
00:04:53 :Django.Ok est-ce que c'est clair pour vous pour le petit problème qu'on se donne? Ok etdu coup si on a le temps je vous montrerai comment on fait pour orchestrer tout ça avecDocker et Docker Compose et si on n'a pas le temps je le ferai la prochaine fois.
00:05:19 :Donc là ce que je vous propose c'est qu'on fasse rapidement le projet Django, on transformetout ça en API REST Framework et après de l'autre côté on fait le front-end avecStreamlit et on fait interagir les deux.
00:05:30 :Ok donc c'est parti, ici j'avais un truc qui existait déjà, je vais me le garderen correction.Ok donc on va partir d'un nouveau projet.
00:05:56 :Comment je vais le faire?Ok donc on va commencer, est-ce que vous voyez assez bien? Là c'est bon? Moi jesuis pro VS Code PyCharm, je le trouve lourd et je le trouve un peu, il essaie trop defaire trop de choses à ma place et ça ça m'énerve un peu, je sais pas pour ceux qui
00:06:59 :utilisent PyCharm ici, je trouve il assiste trop et du coup ça m'énerve.Peut-être que je l'ai mal réglé, j'ai toujours été VS Code donc voilà.
00:07:12 :Ok donc attendez je vérifie, ok donc on va d'abord créer notre back-end, donc on vacréer un dossier back-end et dans le back-end on va créer notre projet Django, ok et doncpour ça on va d'abord créer l'environnement virtuel etc comme d'habitude.
00:07:38 :Donc python m venv ok source venv bin activate ok et là on va déjà tout installer, doncon va faire Django, le rest framework je sais jamais si je dois, c'est comme ça, je vaisavoir besoin de quoi d'autre, pour l'instant c'est tout.
00:08:10 :Ok on va démarrer notre projet, donc là on fait Django admin start project et là onva dire, comment je l'avais appelé dans mon truc, vendeur voiture, je vais juste l'appelervoiture. Et donc là on a notre voiture, on va aller créer directement nos modèles,
00:08:39 :donc là je suis dans back-end, ok voiture, voiture voiture, on va d'abord créer notreapplication maintenant, parce qu'en fait là on a créé un projet Django mais maintenanton va créer une application, donc on fait python voiture, j'aurais pas dû l'appelercomme ça parce que ça va être chiant, bon tant pis, voiture, attendez je vais le supprimer
00:09:17 :parce que sinon ça va m'amener à des confusions.Et donc là j'ai mon projet, comment je l'avais appelé, je l'avais appelé marque et je vaisl'appeler API, ok. Maintenant je vais créer mon API, mon application pardon, donc python
00:10:07 :voiture back-end manage start up et donc là on va l'appeler marque, ok. Donc là on a,pourquoi il est là lui? Attendez je fais n'importe quoi là.
00:10:48 :Ok, désolé, une minute s'il vous plaît, ok.Je repars d'un truc propre.J'installe mes trucs.Je crée mon projet.Et là, je vais créer maintenant mon état.
00:12:10 :Je vais créer tout de suite mon dossier de fronteine.Là, je suis dans mon backend, j'ai tout ce qu'il faut.On va aller créer nos premiers modèles.
00:12:46 :On va créer une voiture qui va hériter des modèles.La marque va être un modèle.sharfield.On va lui dire max 200 seulement.On va lui donner ce ratio.
00:13:31 :On va commencer avec 1 comme ratio.On va mettre un flottant.Là, on a notre modèle.On va déjà voir si tout fonctionne bien.On va faire les migrations.
00:13:55 :C'est bon.On va créer un utilisateur pour pouvoir commencer à renseigner des choses.On va faire create super user.On va mettre admin.Maintenant, si je run mon serveur, on a bien ce qu'il faut.
00:14:50 :Là, si je vais dans admin et que je fais admin pass.J'ai peut-être pas fait la migration.Pourquoi il m'emmerde?Qu'est-ce qu'il fait?Putain, à chaque fois.
00:15:25 :Je trouve qu'il y a encore une fois...Basically, c'est sympa.Pourquoi j'ai pas ma base désonée? Est-ce que quelqu'un voit quelque chose? C'estun truc tout con, je sais pas si tu as vu.
00:16:16 :J'ai pas fait gaffe donc c'est Timmy ça a renseigné l'application?C'est ça que j'ai dû oublier, bien vu.Tch tch tch.Je peux pas commentaire mon application, mais qu'est-ce que je fais?
00:16:52 :Tch tch tch.Euh...Tch tch tch.J'ai pas si tu me dis du coup, le nom de ton projet c'est quoi? C'est Vendeur voiture back-end?
00:17:26 :Ouais c'est Vendeur voiture back-end, là j'ai mon application marque.Attends pourquoi la base est donnée ici? Et j'ai deux dossiers, putain y'a un problème là.
00:17:58 :ça sera plus simple parce que là je suis en train de perdre du temps pour rien.Tch tch tch.Ok bon imaginons que je fasse pas de la merde et qu'on a bien notre projet qui se crée, donc en gros ici on a créé déjà notre modèle,donc qui est ici, donc on a la marque et le ratio avec ici un modèle de voiture, ok, donc là normalement si je vérifie et que j'ai pas fait n'importe quoi,
00:18:44 :je vais quitter ça et je vais aller directement...Ok.Là c'est mon application, vous voyez que j'ai rien et si je vais dans admin, ok donc là j'ai bien les voitures, donc j'en avais créé quelques unes,donc vous voyez à chaque fois j'ai créé une marque de voiture, est-ce que c'est assez grand pour vous?
00:20:03 :Je vais zoomer un peu. Ouais ok.Donc là j'ai créé mes différents modèles, déjà pour ceux qui connaissent Django ou ceux qui connaissent pas, est-ce que ça va?
00:20:20 :Bon là j'ai un peu patouillé mais normalement ça devrait aller.Donc là vous voyez si jamais je voulais rajouter un nouveau modèle, je le fais ici mais je vais pas le faire.
00:20:29 :Ok et donc maintenant ici je vais vous montrer comment on fait pour transformer ça en API REST,donc il suffit juste de créer une nouvelle application, vous voyez ici quand on crée une application, si je fais un startup,et bien là en fait il suffit juste de créer une application qui s'appelle API et dans l'API on va créer des serializers.
00:21:03 :Ok donc en fait vous voyez ici il suffit juste d'importer le module dans framework, on importe les serializers,on importe le modèle qu'on veut serialiser, donc moi ici c'est voiture, et ici j'écris le nom de mon modèle,et je le dis juste serializer, mais ça c'est une convention vous pouvez l'appeler comme vous voulez ici,
00:21:28 :mais c'est juste pour vous rappeler qu'ici c'est bien le serializer de marque, de la marque en fait de l'app,mais ici j'aurais pu l'appeler voiture, peut-être voiture serializer ça aurait été plus clair.
00:21:39 :Et en gros ici classe méta c'est juste pour définir quel est le modèle que vous utilisez pour votre serializer,donc là c'est voiture et vous définissez tous les fields.
00:21:47 :Donc là en gros si je vous montre ce que ça donne, donc là c'est juste le serializer,et une fois que vous avez fait votre serializer, il faut créer les vues qui permettent justement d'afficher directement votre objet serialisé,donc là on fait ça avec un viewset, c'est un peu comme sur Django quand vous définissez vos vues avec des méthodes ou avec des classes,
00:22:11 :là on utilise des classes mais vous auriez très bien pu utiliser des vues, c'est juste qu'en fait le viewset il vous permet d'avoir les méthodes get et les méthodes post,c'est à dire visualisation ou poster sur la base de données un objet.
00:22:29 :Donc là ce que vous voyez c'est que juste on prend, ça sert à rien d'essayer d'apprendre ça par coeur,juste vous voyez la documentation comment on fait un serializer à partir d'un modèle,là je vous montre juste les grandes lignes, donc là on y est, on a le serializer,
00:22:50 :et sur les urls c'est un petit peu particulier, il faut juste créer des routes qui vont vous permettre d'avoir les bons urls en fonction de vos bonnes méthodes,mais bon ça c'est pareil je ne vais pas rentrer dans le détail, ça sert à rien, c'est pas grave.
00:23:05 :Ok donc là si on lance, je n'ai pas défini de route,j'ai pas défini d'url pour la route globale, par contre j'en ai défini une pour l'API,vous voyez que si je vais dans l'API, donc en fait là j'arrive dans l'API REST Framework,c'est lui qui m'a défini tout seul un peu, ça je vous avais déjà montré je crois, les urls,
00:23:47 :donc ça c'est grâce aux routes que j'ai créé, et donc là vous voyez ici,il me sort un Json, donc une sérialisation de tout ça, vous voyez ici Ferrari avec 1,il me retrouve bien là, je retrouve Ferrari avec 1 etc.
00:24:03 :Et si par exemple ici je changeais, que j'allais dans Mazda et que je mettais 3,je fais save, et qu'ici j'actualise, vous voyez le Mazda il me l'a bien sorti,donc là j'ai bien un fichier Json de tous mes éléments qui sont dans ma base de données.
00:24:21 :Et en fait le fait d'utiliser les Viewset, au lieu de définir uniquement la méthode GET,en fait il me définit aussi automatiquement une méthode POST,donc là si par exemple je veux rajouter un nouveau modèle, je dis je sais pas moi,un autre modèle Bugatti, et là je lui mets un ratio de 5, je peux le faire directement ici.
00:24:46 :Donc là il me dit ok c'est posté, et donc là si je reviens j'ai bien mon autre modèle qui arrive,une nouvelle marque.Ouais Gabriel?
00:24:56 :Du coup là ton modèle que tu as rajouté avec Bugatti, il va être dans ta base de données ou?Oui oui il y est, tu vois Bugatti il est apparu ici.
00:25:07 :C'est parce que tu passes par les classes, mais si tu passes par des méthodes, par des fonctions,ça c'est plus compliqué à faire non?Non en fait oui c'est un peu plus chiant à faire, en fait tu dois définir,mais c'est un peu comme, c'est vraiment le même mécanisme que les classes Viewset et,
00:25:24 :comment ça s'appelle? MCV, non c'est,Function Base View ou Class Base View.Donc c'est exactement le même concept.D'accord.Sauf que là c'est pour les API.
00:25:37 :Ok donc là c'est, voilà en gros ce qu'on a fait, si je résume,on a créé un modèle dans Django, une base de données classique,et on a juste sérialisé, c'est à dire on a autorisé une vue JSON de nos modèles,de notre base de données, et en fait pourquoi on sérialise?
00:25:56 :Parce que sérialiser ça permet d'interagir avec d'autres scripts,en fait on peut pas, voyez ce que j'ai fait ici,ce que j'ai fait ici, là dedans, je peux très bien le faire avec un script,et en fait c'est ce que vous voyez ici, je vous avais déjà montré avec Postman,
00:26:13 :si je fais, si j'accède ici à cette URL là, je vais créer un nouveau,donc ça c'est mon URL, je me mets en méthode Get, et si je fais Send ici,voilà, en fait depuis n'importe où, je suis pas forcément dans un webbrowser,ici vous voyez je suis dans Postman, et ici il me sort même le script que je devrais taper,
00:26:41 :c'est pas très grand pour vous, voyez ça c'est le script Pluton qui me permettrait d'accéder à tout ça,donc je peux même le faire pour vous montrer, si je fais Pluton import request,et que je tape cette URL là, et que je fais réponse, ça j'en ai pas besoin,
00:27:19 :je fais réponse.text, vous voyez qu'en fait j'ai récupéré toutes mes données depuis un script,donc ça c'est toutes les données de ma database, accessibles depuis n'importe quel script,et donc c'est pour ça qu'en fait on va pouvoir créer d'autres applicationsqui viennent attaquer un peu la base de données, et qui viennent lire les trucs.
00:27:47 :Oui oui tu peux faire, en fait ça tu vois, ça c'est vraiment un script Pluton,donc depuis n'importe où tu peux faire ça et récupérer toutes tes données.
00:27:55 :Donc c'est ça l'intérêt de l'API, et après tu vois moi ces données là,je peux aller les balancer par exemple dans Streamlit, dans un dashboard ou quoi que ce soit.
00:28:05 :Ok donc on est là, où est-ce que j'en suis maintenant?Donc là c'est clair pour tout le monde, j'ai fait mon modèle,et j'ai sérialisé, et j'ai mon API, et je suis content.
00:28:18 :Ok, c'est à peu près tout pour le back-end, est-ce que c'est clair pour vous pour le back-end?Ok bon bah s'il n'y a pas de remarques, pas de questions, je continue.
00:28:42 :Ok, merci.Maintenant, de quoi?Je vais passer mes soirées sur le back-end, j'ai la tête bien chargée du coup.Ouais j'imagine ouais.Ok donc maintenant on va passer au front-end, et on reviendra au back-end après quand on va lier les deux.
00:29:03 :Donc là maintenant en fait ça va être tout simple, ce qu'on va dire c'est que,on va avoir, donc là pourquoi il me fait chier, c'est parce que...
00:29:12 :Ouais ok. Donc là imaginez maintenant qu'on veuille faire ça,bah je pense que je vais vous le montrer directement avec le docker compose.Ok, donc maintenant si je vais sur mon...
00:29:31 :Donc là je suis sur mon dashboard, ou en gros, je vous fais la démo en gros du truc,donc maintenant vous allez chez QION PEUGEOT,et vous allez dans le menu, vous allez sur les informations,vous allez sur les informations, vous allez sur l'options,et vous allez sur la table de données,
00:29:50 :donc maintenant vous allez chez QION PEUGEOT,en fonction de PEUGEOT que j'ai sélectionné, il me sort des modèles,mais ça je vais vous montrer après,et donc là vous voyez modèle 308, appliquer le ratio 1,et si par exemple je vais voir le Mazda,si je vais voir la Mazda, et que je sélectionne n'importe laquelle,
00:30:13 :j'ai bien le ratio de 3.Ok, donc en gros comment on a fait ça?Donc ici j'ai défini mon dashboard de Streamlit,ici il faut imaginer que par exemple,on simule comme si on allait scraper sur un site webtous les modèles disponibles de PEUGEOT,tous les modèles disponibles de RENAULT,
00:30:35 :et tous les modèles disponibles de Mazda.Bon là je les ai écrits à la main pour que ça soit plus simple,mais il faut imaginer qu'on scrape en gros un site web,et on a accès à des informations là.
00:30:49 :Après moi ici ce que je fais c'est assez simple,c'est juste que je prends en fonction de la marque qu'on a sélectionnée,donc là c'est PEUGEOT,vous voyez on sélectionne la marque,et si la marque c'est autre chose qu'un tiret,donc c'est PEUGEOT, RENAULT ou Mazda,et bien en fait c'est là où on va venir attaquer l'API qui tourne à côté,
00:31:11 :donc ça l'API elle tourne à côté grâce au Docker Compose,que je vais vous montrer après,mais là vous voyez bien que c'est l'URL de mon back-end que je vais chercher,et il y a une petite subtilité ici,c'est que dans mon URL je fais un search avec le nom de la marque,
00:31:27 :parce que vous voyez,en fait si je retourne ici,j'ai un petit bouton qui est ici,Filter, je peux vous montrer comment on fait,Filter ici si je fais Search PEUGEOT,en fait,vous voyez en fait,ce petit bouton là,Filters, il est assez simple à mettre en place,
00:32:34 :il suffit d'aller dans votre API que vous avez développé,donc là je retourne,c'est dans votre API, dans le Viewset,vous voyez ici, j'appelle Filter Backends,donc en gros je lui dis,j'ai un écho, vous l'avez ou pas?
00:32:59 :Non, ça marche nickel.Ok, non pardon, j'ai un truc, j'avais une résonance.Donc là en fait, il suffit d'utiliser ce petit attribut là,où en fait vous dites Search Fields,donc ça veut dire que le bouton Search,vous voulez qu'il aille chercher sur quoi?
00:33:15 :Là sur marque,et vous utilisez quoi comme Filter Backends?Le Search Filter qui est un filteur qui vient de l'API REST Primer,donc en gros, il n'y a besoin de rien installer,vous mettez juste ça,et en fait il va aller chercher,il va vous mettre à disposition un bouton ici,
00:33:33 :vous voyez qu'en fait si je ne le mets pas,je ne vais pas le faire,mais en gros si je ne mets pas ça,je n'ai pas ce petit bouton là.
00:33:39 :Et donc moi ce qui m'intéresse,c'est qu'en fait quand je fais Filter,si je mets une autre et que je mets Mazda,donc je recherche,et en fait si je vais voir l'URL,il m'a créé l'URL automatiquement,donc moi je vais chercher le format de l'URL,donc ça veut dire que quand j'écris un URL
00:33:56 :avec point d'interrogation Search égale le nom de la voiture,il va aller me chercher l'objet que je veux.Donc si je retourne dans mon Frontend,dans mon Dashboard,c'est ce que je fais ici en fait,une fois que j'ai sélectionné ma marque,avec le premier,ici le premier Select Box,
00:34:20 :donc là j'ai Renault,une fois que j'ai sélectionné,en fait je crée un nouvel URLqui va aller chercher le ratio correspondant.Et donc en fait la réponse de cette URL,ça va être le ratio que je veux,donc c'est comme ça que je l'affiche en fait ici,donc là c'est une petite manip,
00:34:35 :mais je vais chercher dans la réponse de mon API,je vais chercher le ratio,et après c'est juste de l'affichage,mais je peux aller dire,le ratio à appliquer c'est le ratio que j'ai trouvé dans la base de données.
00:34:50 :Donc vous voyez ici Mazda, Turbo,le ratio à appliquer sur le modèle Turbo de la marque Mazda C3,et ainsi de suite,et après on peut faire ce qu'on veut,il n'y a pas de limite,mais au moins comme ça en fait,vous voyez que j'ai vraiment deux applications qui sont distinctes,
00:35:12 :qui ne tournent pas sur le même port,en fait là mon Dashboard,il tourne sur le port 8501,alors que mon application de mon API,elle tourne sur le port 8001,donc vous pouvez imaginer en fait que vos applications,elles tournent sur différents serveurs,un localement chez vous,un je ne sais pas sur un VPS,
00:35:32 :ou des choses comme ça,et voilà,donc là c'est vraiment un exemple concret de à quoi ça sert une API.En fait l'API,elle sert à faire le lien entre votre Dashboard et votre application.
00:35:44 :Donc voilà un peu pour le fonctionnement,le lien entre l'API et le Dashboard,voilà à quoi ça sert.Voilà,donc si vous avez des questions là-dessus,n'hésitez pas,sinon je peux vous montrer un peu le concept de Docker,et de Docker Compose si ça vous intéresse.
00:36:14 :Voilà sur JSON.Ouais et juste quand tu vas chercher,parce que je n'utilise jamais les JSON,quand tu vas chercher des informations sur un JSON,faut importer le module du coup ou pas?
00:36:30 :Non en fait JSON,en fait quand tu utilises Streamlit,tu dois,non tu n'as pas besoin parce que regarde tu sais quand j'ai fait,quand j'ai fait ce script là,je n'ai pas eu besoin d'aller le chercher,en fait la réponse c'était un JSON,mais après oui si tu veux,
00:36:55 :si tu veux,si tu veux lire plus facilement les JSON,tu fais juste un import JSON,c'est un truc building de Python,et là tu peux,mais en fait ce module là,il te sert surtout,vous ne devez rien voir là,le module JSON,il te sert surtout à lire un fichier JSON externe,
00:37:17 :ou alors à envoyer des données,un dictionnaire dans un fichier externe.Dans un fichier externe,tu vois ce n'est pas,là je n'ai pas eu besoin,parce que la réponse,de toute façon le JSON c'est un dictionnaire en fait dans Python,donc dès qu'il trouve un dictionnaire,il n'a pas besoin de JSON.
00:37:36 :Je vois qu'il y a Seb qui a,ben ouais pourquoi pas,après je ne sais pas les autres,est-ce que vous voulez voir un peu Docker,ou est-ce que vous voulez qu'on regarde l'application de Seb,de Screamlit qu'il a fait?
00:37:56 :Du coup on peut voir oui pour,vas-y Seb, ok.Ben vas-y Seb,comment tu veux,aller en ligne quelque part,ou tu peux nous la montrer?
00:38:15 :Ok,ok let's go.Waouh la classe!Putain ça jette hein!Donc du coup tu as fait,ben je ne sais pas,vas-y si tu veux présenter,dis-nous un peu,donnez-nous un petit bouton.
00:38:39 :Ouais,donc là j'ai mis une petite nav bar,ouais,il veut changer,ah ouais,en fait tu ne vois pas ma souris quand je fais ça.
00:38:49 :Non,je vois,là du coup tu as ton sidebar là à gauche,il y a un client qui a plusieurs entreprises,ouais,il sélectionne son entreprise,et en bas de la sidebar,c'était pour montrer qu'on peut afficher des éléments différents,dans l'entreprise 1,on trouve le truc avec les onglets,
00:39:08 :qu'on trouve dans l'entreprise 2,au milieu.Ouais,ouais ça c'est les tabs,voilà,ok,ouais franchement c'est top,ouais j'ai fait un camembert,ouais,ça c'est le,et ça tu as utilisé quoi,tu as utilisé matplotlib pour les camemberts?
00:39:24 :Ouais,pour tous les graphs,parce qu'en fait tu as,je vais vous le montrer après dans le stream lead directement,ouais,en fait tu peux utiliser directement,plotly,et en fait ça te permettrait d'avoir des graphes qui sont interactifs,je ne sais pas si tu as déjà vu,non,
00:39:42 :ça marche vachement bien,et du coup là tu,c'est des fichiers Excel à la base,voilà,pardon,non,pas de souci,et du coup c'est des fichiers Excel,et là tu as fait comment,parce que tes fichiers Excel,ils sont où,comment ça se fait qu'ils fonctionnent?
00:39:58 :Ben ils sont hébergés pour l'instant sur Streamlead,mais il y a un moment,là tu as fait quoi,tu les as chargés,en fait ils sont,ah oui ils sont dans ton GitHub en fait,voilà,ils sont dans mon GitHub,et ils sont dans mon stream,et il y a plein d'autres,
00:40:13 :il y a plein de dataframe.Ce que tu pourrais faire en fait,c'est faire un bouton,un bouton Upload,et comme ça tu uploads ton fichier,et tu n'as pas besoin de mettre,parce que là imagine,bon là c'est des données bidons,mais imagine c'est des données sensibles,que tu ne veux pas héberger sur le GitHub,
00:40:30 :ben tu peux te dire je mets un bouton,comme ça les gens ils uploadent leurs données,et en fait elles sont uniquement dans le cache,dans le cache mémoire du web browser,et elles ne sont jamais vues,ni stockées,en fait Streamlit,je leur avais posé la question,ils ne stockent pas les data sur leur serveur,
00:40:48 :ils sont vraiment juste dans le cache,et une fois que tu as coupé ta session,la donnée elle disparaît.Ben après j'ai essayé un truc,je n'ai pas réussi,mais les fichiers sont hébergés sur un Sharepoint,je pourrais les lier directement,mais je galère un peu.
00:41:02 :Ouais là après Sharepoint,avec les autorisations et tout ça,c'est un peu compliqué,mais là c'est une bonne,c'est un bon exemple d'API,parce qu'en fait je pense que Sharepoint,ils mettent en place des API.
00:41:15 :Oui ils les ont mais bon.Donc là tu vois typiquement en fait,il faudrait que,tu vois là j'ai dit une bêtise,je reviens sur mon truc,là tu te retrouves avec,tu définis un URL,et la réponse du get,tu vois ici en fait,l'URL on l'a défini,
00:41:35 :on fait un request à cette URL,et il rapatrie ton fichier tu vois.Ah mais je vais te lancer dessus,parce que...Ah ouais non mais franchement,c'est super, bien...
00:41:49 :C'est pour faire une petite démo au client,pour montrer un peu commentje peux afficher les choses.Ah ouais bien joué,attends où est-ce que je l'ai perdu?
00:41:56 :Mais il faut, oui après,et puis après il faut que je me penchesur le problème de l'authentification.Ouais en fait l'authentification,tu vas avoir du mal à la géreravec Streamlit,il va falloir que tu la gèresavec l'API.
00:42:10 :En fait tu vois ici,ce qui est pas mal aussi avec les API,c'est que imagine tu définis,tu fais une app Django.Donc là imagine qu'on a ça,là tu vois j'ai jamais,là je suis dans l'interface admin,donc j'y accède via un mot de passe,et ici,
00:42:28 :là j'ai pas de,j'ai pas défini d'authentification,mais c'est possible.En fait on peut rajouter facilementun bouton ici,je sais pas si je vous l'avais déjà montré,et en fait ton authentification,tu la fais via ton API,t'as pas besoin de t'embêteravec tes modèles Django,tes at-logging, etc.
00:42:51 :Tu peux gérer l'accès à tes donnéesvia soit un mot de passe d'un utilisateurou sinon carrément des tokens,comme des clés d'API,pour accéder aux données.
00:43:02 :Donc tu pourrais très bien imaginerqu'en fait toi t'as une clé d'APIque t'as dans un fichier en local,que tu transmets à ton dashboard,Streamlit,et une fois qu'il l'a récupéré,et en fait tu vois ici quand tu fais les requests,tout à l'heure quand j'ai montré,quand j'ai montré ici là,
00:43:20 :je vais zoomer un peu,en fait ici les headers,ça sert justement à balancer les tokensd'autorisation pour tes API.Donc là tu pourrais imaginerque tu balances ton token,et s'il n'y a pas le token,et bien en fait t'as pas de réponse ici.
00:43:34 :La réponse elle n'est pas là.Non, ça ne sera pas le site.Donc ouais, ça peut être un bon exemple.Il dépend le site en ce moment-là,c'est super sympa.
00:43:44 :Ouais, c'est cool.Je continue à regarder un peu.C'est pratique, c'est leur truc pour le boulot,moi ça me serait trop utile.Ouais, après moi je vais présenter ça au clientet je le revends de mon côté,en passant par le cabinet.
00:44:01 :Ouais, c'est classe.Là je vois que t'as mis du ST DataFrame.Ouais.Je l'ai pas mis sur ce fichier là encore,mais j'ai fait un pivot data.
00:44:11 :Ah ouais, ça c'est bien.Que j'arrive à afficher pareil sur ce site aussi.Est-ce que t'as utilisé pivot table JS,la librairie JavaScript?Non, sur Panda.
00:44:24 :Ah oui, mais du coup c'est pas un…parce qu'en fait moi ce que j'avais…je crois que je vous l'avais montré une fois.Le tableau croisé dynamique, ouais.
00:44:32 :Ouais, t'as des tableaux croisés dynamiques.La librairie elle s'appelle pivot table JS,JS pour JavaScript.Et en fait c'est hyper stylé parce que tu peux,à partir de ton DataFrame,tu peux proposer un tableau croisé dynamique.
00:44:49 :Tu vois ce que c'est le tableau croisé dynamique en Excel?Ah bah oui, oui.Et en fait là c'est un tableau croisé dynamique,mais interactif que tu peux slider un peu,tu peux prendre tes cellules, les bouger, etc.
00:44:59 :Et c'est vachement bien.Attends, je te mets ici.Ça le fait, mais ça fait un tableau croisé dynamiqueparce qu'à la base ça met bien mes mois en colonne,et il met compte en ligne avec le total par mois.
00:45:13 :Ouais, mais du coup ça reste un fichier statique.Mais c'est statique, oui.Ouais.Mais il peut juste finir.Le client il peut pas le manipuler,mais imagine par exemple si t'avais,donc là t'as janvier, février,et je sais pas, je dis une bêtise,mon temps, qu'est-ce qu'on pourrait dire,
00:45:30 :sans taxe, enfin hors taxe et toute taxe,et en fait tu pourrais avoir une petite cageque tu coches oui ou non,enfin tu vois genre taxe, oui ou non,et donc ça il pourrait le mettre dans son tableau croisé dynamiqueet le mettre et l'enlever à souhait.
00:45:43 :Ouais.Ouais mais j'approfondis, j'approfondis.Ouais, ouais, bah vas-y continue.Attention il va l'arriver.C'est hyper intéressant.Ouais, ouais, c'est clair, c'est cool.C'est long à faire un truc comme ça par exemple ou pas?
00:45:57 :Là, j'ai bossé, alors un petit peu le soir,la semaine dernière, mais même pas une heure,tous les soirs et samedi toute la journée.Voilà.
00:46:07 :Ouais ok.On va dire une journée et demie de travail tu fais ça quoi.Après je suis à Sonjango,donc je prends pas le temps pour faire autre chose,mais ouais c'est intéressant.
00:46:16 :Ça moi c'est temporaire, après j'aimerais mieux,mais Django c'est plus long à prendre.Ouais.J'ai déjà proposé des trucs comme ça,et après je ferai des vrais trucs avec Django.
00:46:28 :Ça t'a pas paru compliqué à faire du coup?Ah bah non, c'était franchement une journée et demie à peu près là,et encore on était en fatigué,donc je suis sûr que tu peux réduire le temps.
00:46:38 :T'arrives à faire ça.Ouais, ouais, franchement Streamlit c'est vachement accessible.C'est très simple.Et si après vous pouvez combiner ça avec du Django,avec des API etc, c'est vraiment pas mal,parce que là vous voyez ce qu'on a fait,on a développé le petit dashboard,et puis on a une API qui tourne à côté,
00:46:57 :qu'on peut interroger, ça marche bien.Et il y a un truc, je sais pas si t'avais déjà vu Seb,qui est pas mal, parce qu'en fait,je sais pas si t'as vu, mais moi mon dashboard il a cette tronche là.
00:47:11 :En fait ce que tu peux faire,ici tu vas dans settings, tu vois là sur la droite,tu fais settings et tu fais...De quoi?
00:47:21 :On peut l'enlever après, j'ai vu les vidéos.Ouais, tu peux l'enlever.Et donc là si tu fais edit active theme,en fait tu peux changer ta couleur de fond etc,donc tu dis bah en fait je veux que mon background il soit,attention les yeux ça va être rouge, tu vois.
00:47:35 :Et ce qui est pas mal, c'est qu'en fait,une fois que t'as un peu tuné ton thème,tu peux faire copy thème to clipboard,et en fait il suffit juste que t'ailles à l'endroitoù t'as ton truc là, ton dashboard,tu crées un dossier qui s'appelle.streamlit,
00:47:53 :et tu crées un fichier qui s'appelle config.toml,et tu peux juste coller le thème que t'as défini.Et on peut aussi lui appliquer du CSS, j'ai vu comme ça.
00:48:04 :Ouais, tu peux appliquer du CSS, tu peux rajouter un footer,tu vois ici là c'est mettre streamlit,mais si tu veux mettre made by the Seb,tu vois c'est possible, t'as plein de choses.
00:48:19 :Ouais c'est super intéressant en fait,c'est facile en fait, les capacités que ça apar rapport à la facilité de mise en œuvre.Ouais, et en fait à la base streamlit ça a été mis en placepour les modèles de machine learning,c'était pour les data scientists qui développaient justement
00:48:37 :les modèles de machine learning, et qui, c'était des data scientists,donc c'était pas des mecs qui faisaient du content.Alors là ils ont pas besoin d'une courbe visuelle.
00:48:44 :Voilà c'est ça, donc en gros pour mettre en place,pour mettre à disposition leurs modèles de machine learning,comme ça, parce qu'en fait tu vois, tu mets dans ton github,tu mets ton modèle, le truc il tourne,donc voilà, c'est un peu pourquoi ça a été développé.
00:49:00 :Voilà.C'était l'étang.Ouais.Vous vous embêtez pour les deux, dernière question du coup?Bah vas-y, on est là pour ça.Je pense que vous, que ce soit, enfin,pour apprendre Streamlight vous avez passé par la docou vous avez fait des tutos, merde, YouTube ou...
00:49:18 :Ouais on peut se tutoyer hein.Bah les deux.Au début j'ai commencé par regarder les tutos YouTubepour voir tout ce qu'on pouvait faire,et puis après au fur et à mesure de ce que je fais,j'allais voir la doc plutôt pour...
00:49:32 :parce qu'elle est pas trop mal faite,elle est super bien faite même je trouve.Voilà, moi j'ai pas trop d'expérience sur les autres docs.Mais au mieux, tu as les catégories de...
00:49:48 :Ouais, tu vois ici tu as API référence.Et voilà, tu as tous les thèmes là.Et là tu as tout, ouais.Par exemple, tu vois, si tu discomment je fais pour faire un input widget,donc si par exemple je veux un bouton,bah là ils te disent en gros,
00:50:03 :ils te décrivent le bouton, ce qu'il faut mettre dedans.Et à chaque fois tu as une petite démonstration en dessous,donc là je fais toujours, ouais,tu vois tu as la démonstration à chaque fois,ce petit morceau de code là, ça te fait, c'est Hello.
00:50:16 :Hello.Et donc tu vois après tu as le download bouton,tu as vraiment tout ce qu'il faut quoi.Et toi Pierre c'est pareil,tu as appris sur YouTube plus que ta doc ou...
00:50:30 :En fait moi comment j'ai découvert ça,j'ai découvert ça dans le cadre quand j'avais faitmon second diplôme de Data Engineering.Ils nous avaient montré ça rapidement tu vois,et puis après j'ai commencé à regarderles petits trucs ici, et puis voilà.
00:50:48 :En fait c'est ça, c'est mon parcours.Et puis voilà, en fait c'est surtout la doc,moi j'ai fait que de la doc ici,je trouve qu'elle est vachement bien faite,et j'ai même pas eu besoin d'aller voir YouTube,parce que je trouve que c'est assez simple,assez intuitif, et donc il n'y a pas besoin.
00:51:07 :Enfin Seb je ne dis pas qu'il y a besoin,c'est juste que moi j'ai juste regardé la doc,et j'ai pas été voir de tito YouTube,mais il y a peut-être plein d'infos sur YouTube.
00:51:17 :Et la communauté Screamit est vachement bien faite,sur Twitter et tout, les gens sont hyper accessibles,les développeurs.Il y a des réponses déjà sur le site.
00:51:29 :Ouais.Jean-Phi c'est quoi ça?Merci.Ah je t'ai appris, Algomius, je ne connais pas.C'est un gars qui fait pas mal d'expos,et qui est hyper simple,et il a main sur Panda et tout ça,et tu trouves pas mal de trucs.
00:51:52 :C'est lui, c'est ce petit gars là?Ouais.Il a l'air sympathique.Il fait pas mal de choses pour Python,et moi souvent, pour me retrouver un truc facile au départ,je commence par ça, puis après je cherche autre chose.
00:52:09 :Ok, c'est intéressant,je regarde, il a l'air d'avoir des trucs pas mal.Son site est un peu à l'ancienne, je trouve.Ouais, ouais, ouais, ça fait le vieux professeur qui est un peu simple.
00:52:20 :Ouais, voilà, c'est ça.Il fait des trucs tout cool, sans se prendre la tête.Ah, exactement, ouais.J'aime bien ce genre de gars.Vraiment, le gars il se fait pas chier avec du front-end,ça se voit qu'il a vraiment tout fait à la main,il a tout codé à la main, il y a zéro framework là-dedans.
00:52:36 :Je pense que si on va voir...Ouais, tu sens le truc...Ah, il y a quand même...Ouais, tu sens le truc propre, quoi, le truc de...
00:52:57 :Ok, ouais, c'est intéressant, j'irai voir.Ah oui, c'est surtout des vidéos YouTube, en fait.Et là, c'est un site web qui répertorie toutes ces vidéos YouTube.
00:53:08 :Ok, bah merci du partage.Bah, voilà.Et toi, du coup, là, Gabriel, je vois pas mal sur Twitter en ce moment,tu es toujours sur ton projet de Django, là.
00:53:28 :Ouais, je le pousse...J'avais fait il y a quelques semaines le tuto à Clivo, là, sur The Dock Shop,et là, moi, j'ai tout repris de zéro, donc j'ai fait ça, j'ai même intégré Stripe,et je mets en place la gestion des stocks,tu vois, je vais débrouiller un peu par moi-même,
00:53:48 :je fais mes propres modèles, je fais faire les fonctions,et je customise tout, et du coup, ça me prend du temps,parce que des fois, bah, je galère un peu, quoi.
00:53:57 :Et Stripe, j'ai jamais utilisé, c'est quoi, en fait,un API qui te permet de gérer des paniers, c'est ça?Ouais, pour commander, je sais pas si je peux t'envoyer un screen,peut-être pas.
00:54:11 :C'est ça, ouais, ça va gérer ton paiement, en fait, par carte.Mais du coup, dans le cadre de ton projet, c'est quoi,c'est des paiements fictifs que tu fais?
00:54:21 :Ouais, c'est ça, tu peux...T'as un mode test, et puis,avec le mode faire des faux paiements, ça fait une sécurité bancaire, boum.Et tu vois vraiment pas ce que t'as fait, quoi,comme si c'était en réel.
00:54:34 :Donc, carvail avec des webhooks,donc tu récupères une fois que ton paiement est terminé,tu te dis, bah, qu'est-ce qui se passe?Je supprime ton panier, je déduis du stock, enfin, toi, c'est...
00:54:45 :Ah oui, d'accord, en fait, il gère aussi le...Mais Stripe, il fait quoi? Il gère pas le stock, lui,il gère juste le paiement.C'est le...
00:54:54 :C'est vraiment le paiement, ouais.Donc en gros, toi, t'as un compte, ton compte à toi,et à chaque fois que t'as un order,t'as lié l'API pour que...
00:55:06 :Ouais, c'est ça, avec l'API.La documentation, j'ai un peu de mal avec, mais...Du coup, pour cette partie-là, je me sers beaucoup du Citoyen Thibault,parce que j'ai un petit peu de mal avec leur API.
00:55:19 :Voilà, du coup, je mettais...J'ai pris pas mal de notes sur...Voilà, l'application, c'est Store, pour le...Store, ok, et dans le...J'ai vu dans...
00:55:35 :Dans les vues, dans mes vues.Ouais.Et tu regardes, bah...Donc t'as pas mal de vues, hein.Là, hier, je me suis mis sur la vue carte, tu vois.
00:55:47 :Où est-ce que je peux aller, du coup,voir une vue où il y a une utilisation de l'API Stripe?Tout en bas.Bonne soirée, Salvatore.
00:55:56 :Bonne soirée, c'est ça.Là, tu commences la Stripe, ici, c'est le webhook.Ok.Donc là, je...C'est là, ici, qu'est-ce que je fais déjà?Tac, je récupère le...
00:56:09 :Tu vois, il y a un isEventType,donc c'est à la ligne 141.Ouais.Parce qu'en fait, il te suit carrément tout le code que t'as à copier-coller.
00:56:17 :Ah oui, d'accord.Et là, après, tu personnalises.Donc là, c'est une fois que la session est complétée, que t'as payé,je récupère un peu ce que je veux.
00:56:27 :Et du coup, là, j'ai deux fonctions qui sont juste en ligne 50.51.Que tu retrouves juste en bas, donc, Complete Order.Ouais.Tu vois, et dans Complete Order,je récupère l'idée du Stripe du clientpour l'associer à mon modèle, en fait.
00:56:48 :Et je fais ma...Mon User.card Order OK.Et donc ça, le Order OK, en fait, va faire en sorte de s'écrire une panier,de passer toutes les orders en dessous,donc en commandé, avec une date,et d'élire de mon stock.
00:57:04 :C'est une méthode que j'ai créée, en fait, dans mon modèle.D'accord.Et l'appel à l'API Stripe, il est où, en fait?Euh... Attends, parce que comment elle est appelée?
00:57:16 :Une France de Pâles?Ouais, t'as le module Stripe installé, puis t'as l'API Key,si il faut que tu renseignes.Ah oui, d'accord, là, t'as la clé de l'API.
00:57:26 :Ouais.Bon, j'ai passé beaucoup de temps là-dessus,c'est là où je galère le plus.OK, ouais, c'est déjà un beau projet.Ouais, tu sais, j'ai fait beaucoup de choses dans mes méthodes,dans les méthodes de mon modèle.
00:57:48 :Ah oui, Stripe Web, ah oui, d'accord.Là, tu vois, ça ressemble un peu à ce qu'on a écrit tout à l'heure,à une requête avec un payload.
00:58:04 :OK, ouais, c'est intéressant.Ciao, Raphaël.Ouais, comme ça, oui, quand l'utilisateur renseigne son adresse en Stripe,je la récupère et j'utilise Getter Create pour créer l'adresse,en fait, dans mon adresse de données.
00:58:30 :OK.Bon, c'est intéressant.Merci pour le partage de vos différents trucs, c'est aussi intéressant.Désolé, au début de la session, j'ai un petit peu cafouillésur l'organisation du truc.
00:58:51 :Je l'avais fait juste avant et puis, en fait,quand je prépare juste avant et que j'essaye de le refaire,c'est plus chiant qu'autre chose parce que j'essaye de reproduirece que j'ai fait juste avant et du coup, je bafouille.
00:59:05 :Mais voilà, ce que je voulais vous montrer, c'était un peu l'interaction APIet puis dashboard et je ne sais pas si ça vous intéresse que je vous montrela prochaine fois la mise en prod avec Docker et Docker Compose.
00:59:17 :Ah, carrément, ouais.Mais OK, j'essaierai de faire ça simplement.Je vais téléporter la question sur Twitter, mais j'ai du mal, sans exemple,à voir comment ça marche.
00:59:29 :Ouais, ouais, on verra ça.En fait, c'est surtout, il faut voir ça, le Docker, c'est pour la production,surtout, c'est pour la mise en prod.
00:59:40 :Sinon, tu t'emmerdes pas trop avec, enfin, il y a des cas de figureoù tu t'emmerdes avec du Docker, etc., en local, mais sinon,c'est beaucoup pour de la production, du partage, quoi.
00:59:55 :OK.Oui, avec un truc de Django, tu peux tout faire en production sur un hébergeur,entre guillemets, mais une fois que tu travailles avec System.Lite, par exemple,
01:00:06 :tu as besoin de Docker, non, c'est ça?Ben non, c'est pareil, en fait, tu vois, j'ai des, sur un, tu vois, regarde si,par exemple, attends, je peux te faire un exemple.
01:00:22 :Attends, je vais me connecter en SSH sur un des VPS que j'ai.Attends, parce que, je sais pas comment, parce que j'ai mon adresse IP,j'aime pas trop qu'elle soit l'adresse IP du VPS, enfin, bref, en gros,tu peux lancer sur un VPS, tu lances ton Stream.Lite, tu sais,
01:00:53 :comme on fait d'habitude, Stream.Lite, run, machin, et t'as une adresse IP,tu peux y accéder depuis n'importe où.Je sais pas si c'est assez clair.
01:01:04 :Attends, je vais peut-être, à partir de ça, je peux en lancer un nouveau.Attends, je fais juste un test.Ok, donc tu vois, là, je suis en SSH sur mon VPS,si je veux voir les trucs que j'ai, j'ai quelques trucs,mais si, par exemple, je dis, en fait, je vais créer un truc,
01:01:50 :mkdir Stream.Lite, cd app Stream.Lite, ok,donc là, je vais créer rapidement mon Vance pour faire mon...Et donc là, tu vois, si je fais, je vais faire nano,en fait, nano, c'est un éditeur de texte en mode console,je fais nano app.py et je fais import Stream.Lite as st,
01:02:32 :et je fais st marston hello gab, donc ok, je...Maintenant, je fais Stream.Lite run app, je vais...Je sais pas ce qu'il va m'afficher, mais je vais pas installer.
01:03:14 :De toute façon, je vais pas pouvoir, parce que du coup,il va me donner une adresse IP, mais en gros, là, tu vois,je lance mon Stream.Lite à partir de mon VPS,
01:03:24 :tu vois, de ma machine distante, et à partir de l'adresse IPdu serveur, je peux accéder à mon application Stream.Litesans problème. Donc t'as pas besoin de...
01:03:38 :Docker, c'est pas fait pour... parce que j'ai pas d'interface graphiqueou quoi que ce soit, c'est plutôt pour interagir plus facilement.Tu vois, par exemple, l'API et le dashboard, si je les déployaisavec des Dockers, ce serait plus simple, parce que j'ai pas besoinde m'occuper de déployer une fois, enfin, de lancer mon application,
01:03:56 :mon API, de lancer mon dashboard à côté et de faire interagir les deux.Avec le Docker, je peux le faire tout en même temps.C'est peut-être pas très clair maintenant, mais j'essaieraide vous montrer quelque chose de plus simple la prochaine fois,un truc plus clair.
Aucune occurrence trouvée pour « ».
