Apps multipages Streamlit et tunnel Cloudflare

Session du 01 juin 2023 à 20h00

Développement Web & Frameworks

Outils & IDE

DevOps & Environnement

Deviens membre Premium

Cette session de mentorat est réservée aux membres Premium. Rejoignez-nous pour accéder à toutes les rediffusions des sessions de mentorat !

Premium

+100h de formations
+180 exercices de code
+100h de mentorats en rediffusion
20 projets
Mentorats groupés hebdomadaires
Support individuel avec nos mentors

Découvrir les formules

Voir le détail des fonctionnalités

Apps multipages Streamlit et tunnel Cloudflare

Création d'un app multi pages avec streamlit
stockage en cache d'une variable avec st.session_state
Création d'un tunnel Cloudflare pour déployer une app local sans ouvrir de ports
si on a le temps: présentation de Kuma (outil de monitoring)

Rechercher dans la transcription

00:00:00 :La dernière fois j'avais utilisé l'API OpenAI pour utiliser chatgpt mais en mode API et pas en mode prompt chat. Je vais essayer de le faire en live et on verra si ça marche.

00:00:51 :Pour le programme, vous avez vu, ce que l'on propose c'est qu'on fasse, parce qu'en fait dans, vous savez moi j'aime bien cette application là, streamlit pour faire des dashboards etc.

00:01:06 :Je ne sais pas si vous avez vu mais en fait on peut faire des applications qui sont multi pages sur streamlit, c'est à dire on n'est pas contôné à une seule page sur le dashboard,on peut faire plusieurs pages donc ça c'est intéressant. Mais du coup dès qu'on entre

00:01:19 :dans le multi page, il faut utiliser le session state, c'est ce qui permet à streamlit de mettre en mémoire cache des datas ou tout ce que vous voulez comme data type, ça peut être des listes, des dictionnaires ou quoi que ce soit. Comme ça en fait quand vous

00:01:38 :passez d'une page à l'autre vous gardez votre data parce que si vous ne faites pas ça, en fait il n'enregistre pas votre donnée, par exemple quand vous cliquez sur un bouton ou vous utilisez une liste déroulante, vous allez perdre ce que vous faites. Voilà donc

00:01:51 :on verra ça et après si on a le temps, je vous en avais parlé la dernière fois, on créera un tunnel avec Cloudflare. En fait Cloudflare c'est un service de reverse proxy

00:02:05 :qui permet de, bah en fait ça fait office de reverse proxy, je n'ai pas d'autres mots,ça permet de mettre en mémoire cache des fichiers statiques et ça permet aussi de se protéger des attaques, des dos etc. Donc en fait quand vous avez un site et avec un

00:02:26 :nom de domaine, c'est toujours intéressant d'avoir un Cloudflare derrière par exemple parce qu'en fait tout ce qui va passer par votre nom de domaine, en fait vous mettez votre nom de domaine chez Cloudflare et toutes les requêtes qui arriveront sur votre nom de domaine, elles passeront d'abord par Cloudflare et donc du coup un peu la sécurité etc,

00:02:47 :la mise en cache, et bah c'est Cloudflare qui va s'en occuper, c'est pas vous. Donc je trouve que c'est intéressant et en fait les tunnels aussi ça permet de mettre en production une application que vous faites tourner en local n'importe où. Et en fait

00:02:59 :souvent quand on fait ça, avant que les systèmes comme Cloudflare et tout ça avec les tunnels apparaissent, bah on est obligé d'ouvrir des ports. Par exemple si vous faites tourner

00:03:09 :votre application Django sur le port 8000, et bah si vous voulez accéder depuis internet à votre application Django, il faut via votre box ouvrir le port 8000 etc et ça rend un peu plus vulnérable votre réseau parce que vous ouvrez un port dans votre trafic. Un

00:03:30 :port c'est vraiment, faut le voir comme, imaginez que votre ordinateur, votre réseau c'est un immeuble et chaque fenêtre de l'immeuble c'est une application. Ouais voilà, port

00:03:48 :égal porte. En gros si chaque fenêtre c'est une application, enfin chaque pièce de votre immeuble c'est une application, la fenêtre c'est ce qui permet d'interagir avec le monde extérieur. Donc en fait quand vous avez des applications que vous voulez, dont vous voulez

00:04:02 :rendre accessible à l'extérieur, vous êtes obligé d'ouvrir une fenêtre. Donc après vous avez beau contrôler ce qui se passe, ce qui rentre et ce qui sort de la fenêtre,vous n'êtes pas à l'abri de quelqu'un qui rentre sans que vous le sachiez etc.

00:04:15 :Donc c'est un peu le principe, quand vous avez une application, les applications elles tournent sur votre local host, sur votre réseau local, donc ça c'est votre immeuble,et le port c'est, il définit où est-ce qu'il sort, où est-ce qu'il rentre etc.

00:04:29 :Voilà donc moins de sécurité et voilà. Donc Cloudflare, le tunneling via Cloudflare permet en fait de pallier ce problème et de ne pas ouvrir des ports, on peut lier notre application via des tunnels. Voilà donc, voilà pour le programme et si on a terminé

00:04:51 :je vous ferai une présentation de Kuma. Kuma en fait c'est un outil qu'on va installer avec un docker container, ça permet de faire du monitoring d'applications web. Donc imaginez

00:05:03 :par exemple vous avez un site web WordPress que vous hébergez sur un VPS, une application Django sur un autre etc. Kuma vous permet de monitorer un peu l'état de santé de

00:05:16 :tous vos services. Donc ça peut être intéressant un peu si par exemple vous faites tourner des applications pour des clients ou je ne sais quoi, et bien en fait Kuma vous donne un dashboard unique dans lequel vous voyez apparaître tous vos services et du coup vous pouvez contrôler s'il est down, si il est, vous voyez rapidement, vous avez un historique

00:05:38 :etc. donc c'est super bien foutu. Et avant ce genre d'outil était hyper complexe à mettre en place avant docker parce qu'en fait il faut mettre en place une base de données pour la configuration, pour les datas etc. alors que maintenant avec docker on peut faire

00:05:53 :ça en… je ne connais pas Sentry, je vais regarder, d'ailleurs je vais commencer à partager mon écran. Vous voyez mon écran là normalement. Alors soit tu me parles de

00:06:31 :Sentry, c'est ça la Sentry.io. Est-ce que c'est pareil, j'ai pas l'impression.Et en fait Kuma, donc ça c'est le mien, je vais peut-être pas montrer celui-là.

00:07:02 :Bon je vous montrerai, vous verrez. Mais du coup je ne suis pas sûr que ce soit la même chose, tu me diras si tu connais. Ok bah du coup on va commencer par créer notre application

00:07:20 :streamlit multi page. Non mais je veux dire tu regarderas quand moi je te montrerai Kuma et puis comme ça tu pourras rebondir en disant ouais ouais c'est pareil. Ok donc là on a

00:07:46 :notre environnement, on est content, on va installer rapidement streamlit. Vous avez remarqué si vous utilisez streamlit en ce moment mais il y a un problème de compatibilité avec urllib3 qui permet de faire des requêtes HTTP etc. Vous allez voir en fait si je lance,

00:08:13 :si je crée une application directement, je vais l'appeler main.py.Donc si c'était facile pour vous, alors viens avec moi de faire cette belle body.Vous voyez j'ai un problème là, vous inquiétez pas si vous utilisez Streamlit et que vous avez ce problème là, ça se règle facilement, il faut mettre à jour une certaine libre,

00:09:09 :donc vous voyez moi souvent ce que je fais, je vais directement, vous allez voir que j'ai déjà été le voir récemment, il faut juste mettre, voilà il faut mettre cette version là de URL libre 3, et là normalement tout va bien. Ok donc là on est sur, on va voir

00:09:52 :sur notre application Streamlit assez classique, donc là maintenant ce qu'on va faire, déjà je sais pas si vous avez déjà vu, mais sur une application Streamlit, vous pouvez changer la tête un peu, vous pouvez éditer le thème de votre, bon voilà on est pas en train de faire du fontaine etc, mais en fait ici si vous faites settings, et que vous

00:10:23 :dites edit active theme, si par exemple vous voulez un background qui est noir, donc on va dire, en fait noir c'est quoi, c'est 0, il a 0 couleur, ok, donc on dit on veut que ce soit noir, on veut que le texte il soit en blanc, on va le mettre comme ça, voilà

00:11:01 :bon imaginons qu'on veut changer le thème, et donc là vous dites ok bah je suis content,mais si jamais, attendez je vais le sauvegarder tout de suite, ah oui par contre là c'est un peu chiant, secondary, je vais le mettre en bleu, ok, donc là vous avez votre thème,

00:11:31 :vous êtes content, par contre si vous faites pas ce que je vais vous montrer là, edit copy to clipboard, comme ça vous l'aurez après, imaginez que maintenant vous arrêtez votre application et vous la relancez, ah là il a pas gardé en mémoire les trucs,donc en fait il y a un moyen simple de faire ça, c'est que vous voyez quand j'ai fait

00:11:53 :settings, ici edit active thème, j'ai fait là copy thème to clipboard, et après en fait il suffit de créer au sein, à la racine de là où il y a votre application streamlits,donc là, attendez je zoom, qu'est ce qu'il me fait, comment on fait pour zoomer dans PyCharm si vous savez, dans l'explorateur, je sais pas si on peut, ah c'est chiant sur

00:12:25 :les settings, ici sur le navigateur, si quelqu'un sait je suis preneur, je suis PyCharm macOS,parce que j'imagine que là vous voyez pas bien, non ça marche pas, en fait là ça marche, ici ça marche avec commande plus et commande moins quand je suis à l'intérieur,mais là j'arrive pas à le, dans settings, et tu m'échanges font size avec le scroll,

00:13:01 :peut être qu'après tu pourras le faire en scrollant, dans les settings, ouais, et là tu m'attends édition générale, c'est où ça, c'est dans les trucs là sur le côté,si tu tapes mouse ou font size, mouse production, je sais pas si ça te prouve, je sais pas si ça te prouve, bon tant pis, c'est juste que vous voyez pas bien l'éditeur de texte

00:14:00 :ici mais je vais vous le décrire, donc là en gros vous avez votre éditeur d'optimisation,donc là j'ai mon fichier, mon application principale, il suffit juste de créer dans la même racine, vous créez un dossier qui s'appelle.streamlit, et là vous créez

00:14:20 :un fichier, il vous le dit config.toml, donc new file config.toml, donc là vous copiez,en fait vous savez le truc que j'ai édité tout à l'heure ici, je vais dans settings et j'ai fait edit active time, et là vous changez tout ce que vous voulez et vous faites copy to clipboard, et en fait là vous pouvez mettre, vous le copiez, et du coup si je relance

00:14:57 :mon application, et ben en fait il me prend directement le truc, et ce qui est pas mal aussi c'est que vous voyez ici quand je fais settings, custom theme, je pense que si je faisais un autre thème, j'ai jamais testé mais, je dis super thème et puis ici on va

00:15:18 :changer, je vais le laisser comme ça, je pensais que vous voyez ici en mettant un autre thème, ça ça marche, oh non ça marche pas, je pensais qu'en mettant un autre thème on l'aurait à dispo, je pense qu'il y a un truc ici qu'on peut faire, voilà. Donc ça c'était

00:15:42 :juste une petite astuce si vous voulez customiser votre thème et puis garder la config. Donc c'est déjà intéressant. Maintenant, imaginez que vous voulez créer une application avec

00:15:56 :plusieurs pages, donc c'est assez simple en fait, il suffit de faire, donc on va aller ici, il faut créer un nouveau dossier, vous le créez à la racine, donc en fait ça marche comme ça, c'est pas une config que vous devez changer, c'est juste en fonction des dossiers que vous mettez dans votre dossier de travail. Donc là on va dire, on va créer un dossier

00:16:18 :qui s'appelle pages, donc page en anglais, et à l'intérieur de ce truc là, vous allez,attendez, j'ai, qu'est-ce que j'étais en train de vous dire, ouais, donc là dans le dossier page que vous avez créé, vous créez vos nouveaux fichiers, donc là on va dire,qu'est-ce qu'on peut faire, on va dire, créer, créer, je sais pas, joueur, et on va en créer

00:17:04 :une autre, listing, joueur, imaginez que vous avez une application avec, je sais pas, des joueurs de basket, et puis il y a, d'un côté vous pouvez en créer, de l'autre côté vous pouvez les lister, donc là j'ai juste mis, je vais faire import dans les deux, stream link rst, voilà qu'est-ce qui s'est passé, ok, donc là vous dites st point, c'est quoi

00:17:53 :? st point white, donc là on est dans création, joueur, et ici, on est dans st point white,listing, joueur. Ok, donc maintenant, si je retourne, si je retourne dans mon application,

00:18:20 :vous voyez qu'en fait il m'a créé, il m'a créé en fait ici, les pages que je voulais,alors que la création joueur et listing joueur, donc là c'est assez simple, pourquoi il ne m'a pas pris, j'ai oublié la tite, il est juste en fait, via une disposition de mes

00:18:53 :dossiers, je peux facilement organiser mon application ici en plusieurs, et en plus ici vous pouvez modifier, donc ça vous crée automatiquement une sidebar, ils appellent ça dans stream link, parce que vous pouvez aussi créer des sidebars comme vous le souhaitez, mais en gros vous pouvez juste en organisant votre dossier comme ça, mais bon, il faut bien

00:19:13 :qu'il s'appelle pages, vous pouvez avoir plusieurs pages. Ben oui, là, je n'ai pas fait de front, c'est pas trop moche, donc oui, moi je m'en passe. C'est énorme, c'est

00:19:32 :énorme. Après tu as un petit peu de personnalisation, tu peux personnaliser, en fait, ici le config.toml pour ceux qui connaissent, ça ressemble un peu à un fichier css quand même, tu vois,on met un peu la config, mais bon c'est très léger, il n'y a pas de… voilà. Et donc

00:19:48 :ce qui est cool, c'est que juste en mettant à un bon endroit, et ce que vous pouvez faire aussi, c'est que imaginez que vous créez un autre fichier python, on va l'appeler…comment on peut l'appeler… parce que je veux que ça corresponde bien… ouais, en fait là ce que vous voyez, c'est que vous avez createJoueur et listingJoueur, donc il

00:20:14 :y a createJoueur qui arrive avant listingJoueur, mais imaginez que vous voulez en fait faire apparaître le listingJoueur avant, en fait pour ça il suffit simplement de renommer votre fichier et vous lui mettez, createJoueur on a dit, vous lui mettez un chiffre comme ça avec un underscore, rename, refactor, rename, là pareil. Donc là en fait vous

00:20:42 :voyez si je mets à jour listingJoueur, il m'a bien mis le listingJoueur avant le createJoueur grâce à la numérotation que je lui mets. Là vous voyez mon fichier il s'appelle 1

00:20:55 :underscore listingJoueur et 2 createJoueur.py. Donc ça vous permet aussi d'ordonner un peu vos pages, comment elles sont faites, etc. Maintenant ce qu'on va faire c'est

00:21:08 :que on va dire qu'on va créer un joueur dans l'application createJoueur, donc on va dire qu'est-ce que je pourrais faire, en fait ce que je peux faire par exemple on va créer une place joueur, on va dire, en fait moi ce que j'aime bien c'est séparer un peu le, parce que même si c'est pas moi qui ai des, si c'est pas du frontend ça reste

00:21:36 :un peu du front, donc ce que j'aime bien c'est séparer au maximum le front et la logique. Donc on va se créer ici, donc on va pas le mettre dans les pages, je vais réfléchir

00:21:52 :comment je fais pour pas qu'il apparaisse dans mes pages, je vais essayer de le mettre là, je pense que si je le mets là, on est dans createJoueur, je vais créer une classe qui s'appelle joueur, et puis je vais lui définir un joueur, donc ça va être un name,

00:22:32 :et puis on va dire une équipe, en Django en fait ici on ferait un forainquet pour l'équipe,mais on va voir si on va le faire. Et donc là on va dire name égale, name égale, et

00:23:04 :on va faire un REPR. N'hésitez pas à me dire pour les débutants etc si vous êtes perdus avec les classes. Ouais Gabriel. J'ai toujours un doute, c'est REPR par rapport

00:23:32 :à STR, ça sert à quoi déjà? Moi aussi je t'avoue que, en fait déjà ce qui est sûr c'est que sur Django c'est le STR, et je crois que c'est lié, on peut faire des tests après, mais c'est lié au print, en fait tu sais quand t'es en console interactive,

00:23:50 :il y en a un des deux, quand tu feras juste, tu mettras ton objet et tu feras enter, il y en a un des deux qui va t'afficher ou non la méthode, et pareil il y en a un des deux qui t'affichera le print, en fait il y en a un des deux qui est appelé quand tu fais

00:24:05 :le print, je sais plus lequel c'est, je crois que c'est le REPR qui est appelé quand tu fais le print, et le STR il est vraiment utilisé pour représenter ton objet dans une base de données ou des choses comme ça. Ok d'accord. Mais en gros c'est ça le truc. Donc là on

00:24:21 :va dire ok on retourne self.name dans l'équipe, et puis là on va lui dire, ok on va le faire en même temps, ok donc là on a notre joueur etc, donc je pense que là c'est bon, et du coup maintenant ce qu'on va faire c'est que, désolé je lis en même temps le chat de

00:25:04 :Salvatore, voilà exactement. Merci Salvatore, dites moi ce que vous en pensez, mais c'est à peu près ce qu'on a dit, mais là au moins c'est beaucoup plus clair ce qu'a écrit Salvatore, c'est à peu près ce que j'ai déjà vu, et du coup a fortiori c'est lié au print, parce qu'en fait le STR c'est ce qui est appelé quand vous faites un print,

00:25:37 :alors que le REPR, comme l'a dit Salvatore c'est plutôt pour des besoins internes, donc c'est pour ça que, peut-être je me suis trompé dans le Django, Gabriel raconte moi si je me trompe, mais dans le Django c'est le STR qu'on met, c'est pas le REPR. Non

00:25:54 :t'avais le STR, quand tu fais la fiche de re-administration c'est bien le STR. Ok.Donc maintenant on va dire qu'on veut créer un label qui nous permet d'entrer le nom de notre joueur, donc on va dire stNomJoueur, du coup c'est du textinput, et donc là on va dire nom joueur, et on va dire que l'équipe, on va mettre une select box, et là on va

00:26:41 :mettre une liste de choix, on va la mettre ici directement, bon du coup je vais mettre foot parce que je connais pas trop le basket, même si je connais pas trop le foot non plus,on va mettre l'ILOST, le Racine club de Lens pour les puristes, et puis on va mettre l'Olympique

00:27:08 :Lyonnais, je veux pas créer d'embrouilles, j'essaye de mettre un peu tout le monde mais je peux pas mettre toutes les équipes de France. Et donc là je crois, comment on fait

00:27:18 :pour définir, select box, ok il suffit juste de lui rentrer la liste ici, on va voir si ça marche déjà. Ok donc nom joueur, et puis ouais, PSG, Lille, machin, ok y'a tout

00:27:40 :qui fonctionne, j'aime bien en mettre une qui est non attribuée, comme ça on en a une par défaut, et puis non attribuée, comme ça on a tout ce qu'il faut, non attribuée comme ça elle est par défaut, ce que j'aime bien faire aussi, pour que ça soit un peu

00:28:07 :plus beau, je vais mettre sur deux colonnes, je vais créer une colonne 1 et une colonne 2, st.columns2, et on va dire with col1, on va mettre le nom du joueur, et with col2,

00:28:31 :on va mettre l'équipe. Pourquoi tu mets un with déjà avec streamlite? C'est un peu comme un context manager, je vais le faire comme ça, ça fera les deux, on peut faire comme ça aussi, on peut combiner les différents éléments, donc là j'ai créé, t'es obligé de les initialiser tes colonnes, mais après ce que tu peux faire, c'est tu peux faire

00:29:03 :st, tu peux directement mettre col1, et col2 normalement, ça ça fonctionne aussi. Moi j'aime bien mettre un with comme ça je sais où est-ce que j'en suis, je le vois mieux,c'est plus visuel. Non pas de soucis, il y a deux méthodes de faire, moi je préfère

00:29:28 :quand même avec le with parce que j'y vois plus clair, mais sache que tu peux combiner les deux. Ok donc là on peut rentrer un nom de joueur et une équipe, et on va dire qu'une

00:29:39 :fois qu'on a fait ça, on va dire if nomJoueur and équipe, donc là en gros on dit, si ils ont rentré quelque chose on peut créer notre objet, donc là on va dire joueur, et là on crée notre joueur avec le nom qu'on a récupéré et l'équipe. Et puis on va dire

00:30:08 :st.successJoueurCréé, et comment on va l'écrire, on va même dire, on va se servir du str parce que normalement si on a bien écrit notre méthode qui permet d'afficher de manière cool notre objet on peut s'en servir, donc si normalement je fais juste joueur, il va bien m'afficher le nom joueur dans l'équipe, machin, créé. Donc on va

00:30:35 :tester ça tout de suite, et donc là je vais dire Jean-Mich, on va lui dire OPSG,et voilà. Je vais peut-être mettre équipe, je ne veux pas qu'il me crée quelqu'un

00:30:54 :qui me crée si l'équipe a les noms d'attribués. En fait vous avez vu, à peine j'ai rentré le nom de mon joueur, donc Michel, Mich pour les intimes, et voilà. Donc là pourquoi

00:31:20 :même le créé, non attribué créé, non attribué, ah oui parce que j'ai écrit comme ça. Donc du coup pour la question de Jean-Phil, j'ai deux possibilités, soit, je relance,

00:31:52 :on va dire Lionel Messi, donc là voilà, dès que j'ai respecté cette condition là,qui est nom joueur, qui est nom vide, équipe nom vide, et en plus équipe n'est pas égal à attribué, il me le crée, donc là j'ai pas vraiment de validation. Ce que je pourrais

00:32:12 :faire c'est créer un bouton, je pourrais dire if nonjoueur machin, et comme ça on a plus besoin de mettre non attribué parce qu'on peut très bien créer un joueur sans lui attribuer d'équipe. On va remettre une condition avec un bouton, on va dire if st

00:32:31 :bouton crée le joueur, et donc là on fait ce qu'il faut, donc là si j'enlève tout ça, en fait vous voyez le bouton il n'existe pas, si je mets Neymar Junior, dès que je mets quelque chose non vide dans Neymar il m'affiche le bouton, donc là soit on a le

00:33:04 :choix de dire il a pas d'équipe, donc là on dit crée joueur, donc Neymar attribue Neymar joueur dans l'équipe, pourquoi il ne l'a pas mis ici, dans l'équipe, et si je mets PSG par exemple, ouais Neymar Junior dans l'équipe, PSG, crée. Voilà, du coup

00:33:42 :où est-ce qu'on en est? Chômage. Ouais c'est vrai, en plus, ça je vais le dégager,je dis pas besoin. Voilà un peu le principe, on peut faire de la validation des données

00:33:56 :comme ça, donc là on est content, par contre imaginez que maintenant on veuille lister les joueurs, c'est sûr qu'en fait là on a une application qui est frontend uniquement,en vrai vous savez quand je fais créer joueur, je dirais le mettre dans une base de données qui est accessible, mais là imaginons qu'on a juste notre application Streamlit et que

00:34:20 :tous les joueurs qu'on crée on veut les récupérer dans listing joueurs ici, là vous voyez j'ai rien, et si par exemple ici je fais st.white genre joueur, bah voilà

00:34:33 :en fait y'a aucun moyen qu'ils comprennent que j'ai créé un joueur etc. Donc ce qu'on va faire ici nous c'est qu'on va se créer, on va la créer, où est-ce qu'on va la créer ? Je vais la mettre ici, en fait on va se créer une liste, notre petite base de données

00:34:52 :un peu manouche, où en fait on va se créer nos joueurs, on va se créer la liste de joueurs,attendez j'ai réfléchi, donc là c'est là où on va devoir utiliser le st.sessiondata

00:35:14 :qui va permettre de mettre en cache tous les objets qu'on crée. Donc il faut d'abord vérifier qu'il existe pas if joueur, parce que joueur ça va être une liste, not in st.session8, on va dire st.session8 joueur, égal, et en fait là on va dire que on a,

00:35:42 :comment je vais le mettre, je vais le mettre en mode liste, voilà donc en gros ici j'initialise ma liste de joueurs, en fait je l'initialise dans la variable sessionState qui est en fait une variable cache qui reste dans la session de Streamlit. Donc je dis si la liste de joueurs

00:36:06 :n'a pas encore été créée, bah tu l'as créée mais tu l'initialises à une liste vide. Et donc maintenant ce qu'on va faire c'est qu'à chaque fois qu'on va créer

00:36:14 :un joueur, au lieu de faire rien comme ici où on a dit joueur créé, et bah on va la mettre, on va l'appliquer, on va faire un append dans notre liste de joueurs qui est en fait un objet, donc en fait notre liste en elle-même c'est un objet dans notre

00:36:36 :sessionState. Et donc là on va faire append parce qu'en fait là on est sûr que normalement la liste de joueurs c'est bien une liste, là on va faire un append de notre joueur.

00:36:44 :Donc là normalement on a rien changé, si je retourne la création joueur, ah mais en fait je me suis planté, vous m'avez rien dit, j'étais dans le main. J'en ai juste

00:37:19 :besoin dans la création joueur. Ouais je voulais mais en fait ici tout ce qui est la logique du code, tout ce qui est équipe, la classe etc, il faudrait le mettre dans un fichier init ou quelque chose comme ça pour que ce soit plus propre. Mais en fait

00:37:46 :je sais que là si je le fais en live avec vous je vais perdre du temps parce qu'il va y avoir des problèmes, il faudra que je l'ajoute dans le pass, on peut le faire mais j'ai peur qu'on perde un peu de temps. Je le ferai après si on a terminé, là je

00:38:00 :veux pas vous embêter avec ça, mais oui ce qui est mieux c'est de vraiment séparer au maximum tout ce que vous faites avec Streamlit et la logique du code. Donc là typiquement

00:38:10 :la classe etc il aurait fallu la mettre ailleurs. On va peut-être se faire un petit print,à chaque fois on voit un peu la tronche de notre session state, surtout des joueurs pour être sûr qu'ils nous les affichent bien. Donc on va recommencer mais maintenant en

00:38:32 :fait si on a bien fait le truc, on va mettre Olive et Tom, oula qu'est-ce qu'il se passe,ouais non parce que j'étais plus dans mon truc, Olive qui joue à l'OSC Créateur et Joueur, donc là si on va voir, vous voyez ici que petit à petit il va afficher nos

00:38:59 :objets et en plus il utilise la méthode string qu'on a définie, qui l'affiche pas notre objet un peu n'importe comment. Si je recréais un autre, je lui mets Tom, et Tom lui joue

00:39:10 :au Racing Club de Lens, Créate Joueur, voilà j'ai créé le joueur donc là en fait ma liste elle se met à jour petit à petit. Et donc maintenant si je vais dans mon application

00:39:19 :qui est Listing, en fait le session state il est partout dans mon application donc je peux m'en resservir ici sans avoir besoin de le recréer. On peut dire que, on va vouloir

00:39:30 :les afficher donc comment on va faire ça, on va dire tout simplement for Joueur in st.session state équipe, st.write joueur. Donc là j'ai créé mes joueurs et si je vais dans listing

00:39:53 :joueur qu'est ce qu'il me fait, session state as no k équipe. C'est pas un import? Ah non c'est joueur. Voilà donc là on a bien la liste de tous nos joueurs. Et pourquoi

00:40:15 :je le mets comme ça? Donc là on a bien nos joueurs, si j'en crée un autre, notez ma culture footballistique et les noms de joueurs que je mets. Qui joue à l'OL, on

00:40:35 :crée le joueur et maintenant si je vais voir dans listing, j'ai Jean-Michel qui a apparu.Et voilà, et en fait si par exemple on imaginait qu'on veuille supprimer un joueur, on peut dire, comment on pourrait faire, on pourrait dire, je veux dire update list. Ok, st.write

00:41:16 :je sais pas ce que vous en pensez, est-ce que vous voulez que je continue à faire ça là ou qu'on passe à un autre sujet parce que là je vois l'heure qui tourne, je pense que vous avez un peu compris, en fait on pourrait dire qu'on liste les joueurs et puis on en

00:41:33 :sélectionne un et puis on le supprime. Voilà c'est ce que j'allais faire là mais si ça vous intéresse moins dites moi, enfin je sais pas ce que vous en pensez mais c'est peut-être mieux qu'on voit autre chose. Dites moi dans le chat ce que vous en pensez.

00:41:52 :Oui je pense que c'est moins intéressant ce que j'allais faire là. Après voilà vous avez compris, vous pouvez manipuler le session state et puis vous pouvez stocker vos joueurs.

00:42:13 :Voilà c'est quand même assez bien fait. Voilà donc maintenant imaginons on est là,qu'est-ce qu'on va faire. J'ai cette application là et j'aimerais, elle est tellement super

00:42:28 :et hyper sophistiquée que j'aimerais la partager avec le monde, avec vous par exemple.Ce qu'on va faire c'est qu'on va créer le tunnel pour que vous, vous puissiez y accéder d'internet alors que là sachant que vous voyez elle tourne en local sur mon adresse IP locale ici. Donc là il n'y a aucun, si vous tapez ça dans vos URL il n'y a aucun

00:42:52 :moyen que ça fonctionne et que vous l'atteignez. Donc ce qu'on va faire, je vais aller sur mon compte Cloudflare, je le fais comme ça en séparé pour pas faire de bêtises quand même pour pas que vous voyez trop de trucs que je veux pas dévoiler mais normalement il n'y a pas de secret. Je vérifie qu'il n'y a pas trop d'infos.

00:43:38 :Ok je peux vous montrer ça. Ok donc là je vais pas rentrer dans le détail de la configuration Cloudflare, c'est un autre sujet, mais en gros déjà pour que ça fonctionne il faut quand même un nom de domaine. Donc moi mon nom de domaine c'est pacdef.net, c'est un

00:44:05 :truc que je paye je crois que c'est 5 euros par an, je l'ai pris chez Namecheap, il y a plein de fournisseurs de nom de domaine comme Godaddy, Borg, Pig, je sais pas quoi,il y en a vraiment plein, c'est quoi que tu utilises toi? LWS.fr, Made in France, sur

00:44:28 :Yonos, enfin bref vous avez vraiment l'embarras du choix, vous choisissez celui que vous voulez.Et en gros une fois que vous avez votre nom de domaine vous pouvez vous amuser un petit peu avec Cloudflare, il faudra juste, mais bon si un jour vous le faites je peux vous aider à le faire, il faudra déplacer les serveurs name chez Cloudflare. Parce qu'en

00:44:49 :fait si vous voulez faire du tunneling etc, il faut que vos noms de domaine soient hébergés chez Cloudflare. En fait vous avez un fournisseur de nom de domaine, donc n'importe lequel

00:45:00 :que vous voulez, et après vous déplacez vos serveurs chez Cloudflare, donc c'est gratuit,il n'y a pas de soucis, vous faites ce que vous voulez. Donc là vous pouvez avoir plusieurs

00:45:09 :noms de domaine différents, moi je vais faire avec le mien ici, je vais vérifier que voilà.Donc là vous pouvez voir, c'est votre tableau de bord, et ce qui nous intéresse nous ça va être les DNS. Donc en fait les DNS, attendez je vais l'afficher ici parce que j'en ai

00:45:23 :plusieurs. Celui-là je ne voudrais pas trop le montrer. Ouais je vais le montrer ici comme ça. En gros là c'est mes différents enregistrements DNS, donc là vous voyez j'ai plusieurs services

00:45:39 :qui tournent, j'en ai plus au-dessus mais c'est parce qu'il y a des adresses IP publiques que je ne préfère pas montrer. Et ici on a les différents services qui sont sous proxy,

00:45:55 :donc là vous voyez ici ils sont sous proxy, donc ça veut dire que les fichiers statiques ils sont gardés en mémoire cache. Ouais, le CNAME en fait c'est ce qui permet de faire

00:46:05 :le lien entre ton nom de domaine et l'adresse IP publique qui peut changer. Donc nous ce qu'on va faire ici, on va aller dans, c'est dans Traffic Cloudflare Tunnel, et donc là on va ajouter un tunnel, donc on va lancer un, on va foutre ça. Donc là on est dans

00:46:34 :l'interface qui nous permet de créer des tunnels, donc vous allez voir ça c'est simple,on va dans Access, Tunnel, donc là vous allez voir que j'ai déjà des tunnels qui tournent,bon bref, soit. Donc là on va créer un tunnel, donc là on va dire Tunnel App Joueur. Ok

00:46:54 :vous en faites pas si vous ne vous captez pas, enfin si vous ne retenez pas tout, l'idée c'est juste de vous montrer ce qu'on fait en fait. Donc là on a plusieurs moyens de

00:47:04 :mettre en place notre tunnel, donc avec Windows en fait il vous explique à chaque fois comment vous pouvez faire. Moi ce que j'aime bien c'est utiliser Docker, donc en fait pour

00:47:13 :utiliser le tunnel il faut avoir un container Docker qui tourne sur la machine sur laquelle tourne l'application, donc là en l'occurrence c'est mon ordinateur avec mon local. Il faut

00:47:24 :juste que, vous voyez il me donne la commande, donc moi j'ai juste à la copier, je fais tourner ça et du coup ça va faire le lien entre Cloudflare et mon application, ça s'appelle un connecteur. Donc ici je copie, ok, il va peut-être me falloir, donc il faut que j'active

00:47:42 :quand même les services, il faut que je lance Docker quand même. Voilà ça va.Tu joues le rôle d'hébergeur du coup?Ouais exactement, ça s'appelle du, c'est du home hosting, si tu tapes ça sur internet,sur Youtube, t'as plein de tutos qui disent, si jamais tu veux faire un home lab ou que

00:48:29 :tu veux héberger toi-même, c'est de l'auto-hébergement en fait, si tu veux héberger tes propres applications,c'est tout à fait possible, notamment avec ce genre de, après le mieux normalement quand tu fais de l'auto-hébergement c'est d'utiliser un serveur Nginx, qui en fait ça te permet d'ouvrir une seule porte, donc le port 80, et à partir du port 80 tu distribues une fois

00:48:51 :que t'es rentré à l'intérieur de ton réseau, mais bon ça c'est un peu plus compliqué,on pourra en parler plus tard, mais voilà, tu peux tout à fait faire du web hosting chez toi, donc imagine, je sais pas, t'as un Raspberry Pi ou un vieux PC ou un vieux

00:49:04 :truc, tu t'en sers comme serveur et tu peux faire tourner des applications comme ça gratuitement parce que t'as juste l'électricité à payer pour ton PC qui tourne.

00:49:11 :Et Cloudflare, Cloudflare tu payes rien du tout là?Cloudflare non, tout est gratuit, tu dois rentrer quand même ta carte, ta carte bleue,ton numéro de carte bleue quand tu veux utiliser les tunnels, t'es pas obligé, en fait, tant que t'utilises juste le proxy etc les DNS t'as pas besoin de rentrer ta carte bleue,

00:49:30 :c'est juste quand tu veux rentrer les tunnels, il faut ta carte bleue, mais ce qu'on fait nous ça reste gratuit, en fait ils demandent la carte bleue parce que tu peux vouloir ajouter des utilisateurs admin à ton tunnel etc, ça c'est payant, mais franchement si jamais tu veux le faire y'a aucun souci, tu peux sans aucun souci, Cloudflare si tu peux regarder

00:49:50 :sur internet, c'est une société très sérieuse, connue mondialement, donc il y aura aucun problème si vous rentrez votre carte bleue et vous paierez jamais rien.

00:49:59 :Quand vous faites votre tunnel etc, y'a bien un plan gratuit, vous le sélectionnez, c'est hyper clair, y'a pas d'embrouilles.Donc là je lance, vous voyez ce que j'avais dans Cloudflare ici, il me disait de lancer ce connecteur là pour qu'on puisse connecter le tunnel, donc là c'est ce que j'ai fait

00:50:21 :là dans mon avis de commande, j'ai juste rajouté un tir et dé pour que le docker que je lance se lance en background, c'est à dire que je récupère la main etc.

00:50:30 :Donc là je lance, et vous, qu'est ce qu'il me dit, ah oui, c'est ce que je dois mettre après le run, donc là je vous montre juste, là vous voyez il dit bah j'ai pas de connecteur,et dès que je vais lancer le truc, là il est en train de voir que j'ai mis un connecteur,

00:50:53 :donc là vous voyez je suis connected.Maintenant on va faire next, et donc là ça va être tout simple, on va dire que, comment on va l'appeler, on va l'appeler team docstring, team docstring, ok, team docstring, ok, donc là on choisit notre nom de domaine, donc ça vous êtes obligé de l'avoir, et ici

00:51:18 :vous dites que vous voulez du, je sais pas, je vais peut être mettre juste du HTTPS,et donc là vous mettez juste l'URL locale sur lequel tourne votre application, avec le port, voilà, on rentre ici, service url, pourquoi il est pas valide, il faut que je vire ça, pas besoin, ok, save tunnel, ok, maintenant si on va voir public hostname team

00:51:51 :docstring, et donc là maintenant si je vous envoie l'application, vous pouvez aller dessus normalement, allez y tester, ça fonctionne, je vous laisse tester, vous me dites si ça fonctionne bien, mais normalement c'est bon, c'est équivalent, ça marche, ça marche,donc voilà c'est un moyen vraiment assez simple de mettre rapidement en production

00:52:18 :ou même en test en fait, parce que bon là j'ai pas envie que l'application elle tourne tout le temps sur mon PC, et puis que, imaginez qu'on gagne en popularité et puis qu'on a 5 millions de vues par jour, bah votre PC il va crasher, mais si je sais pas, vous travaillez

00:52:37 :avec un client, moi je fais souvent ça en fait quand j'ai des petites missions, que je travaille avec un client et que je veux lui montrer rapidement où est-ce que j'en suis, j'ai pas envie d'aller m'embêter à le déployer sur python anywhere ou des choses comme ça, bah je fais ça en fait, je le fais tourner sur mon PC, je lui mets

00:52:52 :un tunnel et je lui envoie avec mon domaine, et comme ça il peut tester directement, et puis voilà quand c'est terminé je coupe, et voilà.

00:52:59 :Je vois Fernando avec la Freebox Delta, tu peux installer plusieurs VM.Tu peux faire, c'est quoi que tu fais exactement, je sais pas si t'as un micro là ou si tu peux juste expliquer sur le chat, tu mets en place une VM, une machine, tu mets en place une machine virtuelle sur la Delta, voilà, sur la Delta, ok, et ça est intégré dans

00:53:30 :la box quoi, et du coup tu peux, elle a sa propre adresse IP que tu peux accéder via internet, voilà, oui via internet, ok, bah c'est cool, je savais pas, et du coup les ports, c'est pas, ils peuvent quoi, ouais, 2Go de RAM, ouais 2Go de RAM franchement pour

00:53:47 :un, genre un 6, un petit truc ouais pour des petits, ouais ouais tu fais une application Django, tu vois un truc, et mais du coup le port il se configure tout seul, genre il ouvre les ports etc comme il veut? Et oui en fait tu configures, t'as un point de configuration,

00:54:02 :tu configures tout ce que tu veux dedans.Ouais, ah oui, et en fait le fait que ça soit une machine virtuelle ça permet d'isoler quand même ton réseau local, ah oui après tu peux le lier, t'as des options et tout pour le lier, d'accord, ah oui bah c'est vachement pratique ça, comme ça tu te fais

00:54:16 :pas chier, la box est tout le temps allumée, ouais la box est tout le temps allumée, en fait c'est dessus tu fais tourner tes machines virtuelles, ouais mais c'est classe ça, et ça par contre ouais du coup la Delta, ouais c'est un abonnement qui est un peu plus cher

00:54:31 :pour avoir la Delta, bah c'est le haut de gamme de chez Free, ouais d'accord, ah bah c'est classe ça, et du coup tu t'en sers ou c'est juste t'as vu qu'on pouvait faire ça? Ouais je m'en sers pour mes caméras, ah oui les caméras de surveillance et tout

00:54:45 :ça? Ouais.Ok bah c'est cool, merci de l'info, je regarderai, ça peut être intéressant, et est-ce que tu peux, est-ce que tu connais Proxmox? Proxmox? Proxmox, ouais, ça dit quelque chose de

00:54:59 :nouveau? C'est un hyperviseur de machines virtuelles, en fait ça te permet de, tu vois je le mets ici, ça te permet de gérer plusieurs machines virtuelles comme un, bah un peu comme un monitoring en fait, et voilà si t'en as plusieurs peut-être, regarde de ce côté là Proxmox, c'est en fait, ce serait une machine virtuelle pour les gouverner tous

00:55:24 :tu vois, c'est un truc où tu peux gérer plusieurs machines virtuelles, c'est un hyperviseur de machines virtuelles, voilà, j'ai pas d'autres mots.D'accord, je crois que c'est pas ça.

00:55:36 :Bon regarde, peut-être que ça peut te servir dans ce que tu fais.Bah euh, voilà les gars, c'était un peu ce que je voulais vous montrer, je vérifie qu'il y ait pas de femmes dans l'assemblée, mais je crois pas.

00:55:55 :Malheureusement d'ailleurs, on est un peu, il y avait quelques dames avant, mais je crois qu'il y a quand même quelques dames dans la communauté, mais pas beaucoup dans les monteurs.

00:56:19 :Voilà, bon vous m'avez créé plein de joueurs, Céline ouais de temps en temps, vous m'avez créé des joueurs et tout ça, et d'ailleurs ça m'intéresse, mais je pense que ça va pas marcher, est-ce que si par exemple, là si quelqu'un peut aller faire le test, là si je vais dans listing joueurs, listing joueurs c'est un bug moi, il faut que vous retourniez

00:56:50 :sur create joueurs, parce que session state je l'ai créé dans create joueurs, donc en fait si vous parcourez pas la page, il va pas le mettre à jour.

00:57:00 :Mais ouais, donc en fait le truc c'est que ça reste du cache, si par exemple, là Gabriel était dessus par exemple, fais créer un ou deux joueurs, ok donc j'ai pris le co, après ça marche ouais.

00:57:20 :Et vas-y dis nous Gabriel quand t'as créé tes joueurs, et si par exemple tu vas dans listing, tu les vois apparaître, et est-ce que si Salvator il va, ou je sais pas, Fernando quand vous voulez, allez sur listing, il voit que les miens, j'ai un écho là, je sais

00:57:44 :pas ce que c'est, Gabriel je crois, merci.Ouais donc en fait là ça illustre bien que c'est vraiment que du cache, vous voyez en fait ça enregistre dans le cache de votre navigateur, c'est pas, mais bon c'est normal après on l'a pas mis dans une base de données accessible à tout le monde etc, mais c'est

00:58:04 :pour que vous compreniez le principe un peu, c'est juste la donnée en cache, et surtout aussi que si vous avez des données importantes ou des choses comme ça, n'ayez crainte,ça reste dans le cache, ça reste chez vous.

00:58:17 :C'est pas hébergé sur les serveurs de streamlit ou quoi, c'est vraiment que chez vous dans votre navigateur, dans vos cookies etc.Ben voilà, c'était un peu ce que je voulais vous montrer, je vous montrerai la prochaine fois Kuma si vous voulez, mais si vous voulez je peux vous le montrer ici, sur mon propre,

00:58:39 :donc là en fait j'ai un, j'ai différents services qui tournent sur différentes plateformes,et donc en fait ça vous donne accès, donc là par exemple ça c'est mon site web perso,après là c'est mon gatekeeper, c'est mon serveur ngix, ou en fait sur mon instance linode, c'est un, en fait c'est ce que je vous disais, c'est au lieu de créer plein

00:59:15 :de tunnels sur mon instance linode, j'ai créé un seul lien avec un serveur ngix, et c'est le serveur ngix qui distribue les requêtes aux différentes applications, enfin bref on verra ça plus tard, et après voilà j'ai un truc portainer sur une machine qui tourne chez moi, et en fait vous voyez, ça me permet de voir, bon c'est surtout pour ceux là,

00:59:43 :j'ai une santé à 99% de mon site web, et puis je peux voir, là j'ai un historique,je peux voir quand est-ce qu'il a été down, les dernières 24h, vous voyez ici j'ai un liste, bon je sais pas, ce qui s'est passé à 18h26, il y a eu un problème, il était

00:59:58 :hors ligne, voilà, ça peut vous donner des informations intéressantes pour une application que vous avez, que vous avez le ping en gros, le temps de réponse quand vous envoyez une requête, voilà, donc là vous voyez je sais pas ce qui s'est passé, soit j'ai eu plein de requêtes d'un coup et du coup le temps en millisecondes, le temps de réponse il

01:00:26 :a explosé, vers le 31 mai, je sais pas trop ce qui s'est passé, donc ça vous permet un peu de surveiller vos différents services dans une seule plateforme, vous devez pas aller voir l'une l'autre, si ça vous intéresse je vous montrerai la prochaine fois comment on fait pour déployer ce genre de services, pour vérifier vos propres services.

01:00:52 :Bon ben voilà, est-ce que ça vous a intéressé, est-ce que vous avez des questions dessus,ben cool si ça vous a plu, t'en avais une mais t'avais zappé, bon je suis sûr que tu vas la retrouver hein Gabriel, ben merci à tous, et puis bonne soirée, puis on continue

01:01:37 :comme ça, merci pour vos questions, vos interactions etc, c'était cool comme toujours, à bientôt,bonne soirée.Salut tout le monde, PA va voir sur Twitter l'E3, salut!