Scraping Cinéma : présentation des données

00:00:00 :Maintenant qu'on a récupéré les films dans le back-end, on va les afficher en front-end d'une façon un peu plus intéressante que ce qu'on a ici avec un simple listing qui ne contient même pas les horaires.
00:00:10 :Une petite modification que je vais faire aussi avant de repartir dans Composer, c'est d'enlever tous ces commentaires qui sont ajoutés à chaque fois.C'est une caractéristique que vous avez probablement remarqué avec les intelligences artificielles, c'est qu'elles sont un petit peu trop explicites des fois.
00:00:24 :Là vous voyez, on a un commentaire pour chaque ligne pour des choses qui sont assez logiques.On comprend que là c'est pour formater la date, donc on n'a pas besoin de dire qu'on va convertir la date de scrapping, qu'on va récupérer les clés dans la movies, tout ça est assez explicite, assez facile à comprendre, donc on va enlever ces commentaires ici.
00:00:43 :C'est bien d'avoir des commentaires, mais quand vous faites juste commenter une ligne qui se commente toute seule, ça n'a pas beaucoup d'intérêt.Et là vous voyez qu'on revient à quelque chose qui est un peu plus facile à lire.
00:00:52 :D'ailleurs vous voyez qu'on fait pas mal de choses ici dans la fonction Index, on va récupérer le dernier fichier JSON, on l'ouvre ici aussi.Peut-être qu'on pourrait faire toute cette opération à l'intérieur de cette fonction ou alors faire deux fonctions séparées, à voir.
00:01:04 :Pour l'instant on a une fonction qui va récupérer le fichier et ensuite on fait ces quatre lignes de code ici, directement dans l'index, donc à voir, on pourrait organiser ça un petit peu mieux.
00:01:14 :On pourra faire un refactoring si on le souhaite par la suite, pour l'instant je vais laisser ça comme ça.Donc je vais rouvrir mon composer ici, je vais faire un nouveau composer parce que là on va continuer avec des choses qui sont un petit peu séparées de ce qu'on a fait.
00:01:25 :Là on a juste fait la partie back-end, maintenant on va s'intéresser vraiment à styliser le front-end, donc ça va être séparé et différent de ce qu'on vient de faire ici dans le fichier Python, donc je crée un nouveau composer pour ça.
00:01:36 :Je vais garder le app.py dans mon contexte, je vais aussi ajouter mon index.html comme ça il aura directement les deux fichiers dont il a besoin pour travailler, et je vais mettre mon prompt que j'ai préparé là encore à l'avance puisqu'il y a pas mal de choses,on va le passer ensemble en détail, en revue, donc je vais le coller ici, donc je lui explique
00:01:54 :qu'on va s'intéresser à la partie front-end, je vais lui mettre le index.html ici à la fin, donc je vais mettre le contexte dans les parenthèses après cette première phrase,je lui explique donc un peu en bullet points ce qu'on va vouloir faire, donc on va afficher une carte avec les horaires du jour courant, par cinéma, et les informations principales
00:02:11 :dans des petits badges, durée, genre, je lui dis de mettre aussi le synopsis du film sur la carte.En bas de la carte, donc là vous voyez j'explique bien où est-ce que je veux avoir cette information,en bas de la carte, après les horaires du jour, mets un bouton voir plus qui ouvre une
00:02:24 :modale avec les horaires complets, trié par jour et par cinéma.La modale doit reprendre les informations du film, je veux pouvoir fermer la modale en cliquant en dehors de la modale dans l'espace vide, donc là encore c'est quelque chose qu'il pourrait choisir de faire lui-même, si je ne le précise pas peut-être qu'il
00:02:39 :va me mettre un bouton, peut-être qu'il va me faire ce comportement par défaut, je ne sais pas, moi je souhaite pouvoir cliquer en dehors de la modale pour la fermer, donc je l'indique.
00:02:47 :Je lui explique aussi d'afficher 3 ou 4 cartes, là encore on peut enlever cette option de choix et lui dire précisément ce qu'on veut, parce que là il va devoir choisir entre 3 ou 4, donc là je vais lui dire par exemple que j'en veux 4 et je lui demande, je lui
00:02:59 :précise, même si là encore on peut espérer qu'il le fasse tout seul, qu'il faut que ce soit responsive.Pour les badges, là encore c'est tiré de mes expérimentations, j'ai remarqué que s'il ne lui donnait aucune indication sur les badges, il allait utiliser les badges classiques de Daily UI qui sont Primary, Secondary et des choses comme ça, ce qui est assez
00:03:16 :moche parce que ça nous donne du rose, du violet et du bleu, un truc comme ça, donc les 3 couleurs ne vont pas très bien ensemble quand elles sont mises côte à côte, donc je lui indique directement qu'il peut utiliser des couleurs un peu plus neutres, Default,Neutral et Ghost sont 3 variantes des badges dans Daily UI qui sont en ton de gris, donc
00:03:33 :ça donne quelque chose d'un peu plus satisfaisant visuellement.Donc ça donne déjà une bonne base, comme je vous dis, là c'est vraiment le moment où il faut expérimenter avec votre prompt, moi ce que je me suis rendu compte c'est que quand il y a pas mal de choses à faire comme ça, le mieux c'est de faire un prompt et
00:03:47 :si ça ne marche pas de ne pas essayer de corriger par la suite avec d'autres prompts,mais de revenir en arrière, donc vous allez voir à chaque fois qu'on fait un stop meet ici, il nous crée un checkpoint, donc si jamais avec ce prompt là ça vous fait par
00:03:58 :exemple une modal qui n'est pas comme vous voulez, ou ça fait des comportements un peu bizarres au niveau du visuel, et bien plutôt que d'essayer par la suite de fixer ça et de construire sur un château de cartes en fait, plutôt que de construire sur des bases solides, moi je vous conseille de revenir au début en faisant un restore et en modifiant
00:04:14 :ce prompt initial pour le préciser, pour mettre plus de choses, plus d'indications,donc là c'est vraiment le processus que j'ai fait avec ce prompt au début comme je vous l'ai dit, j'avais fait quelque chose d'assez simple, du style créer des cartes pour afficher les films et les horaires, et finalement ça m'a affiché tous les horaires
00:04:29 :sur les cartes, donc ça faisait des cartes immenses, donc finalement après j'ai dit que je voulais afficher une modal, après sur la modal j'ai dû préciser que je voulais un bouton voir plus parce qu'il avait pris le choix de faire un clic en fait sur l'image du film pour pouvoir ouvrir la modal, donc je ne trouvais pas ça très explicite, pas
00:04:44 :très au niveau de l'UX, de l'user experience, je ne trouvais pas ça très bien, donc je l'ai précisé à chaque fois, et après une fois qu'on a un prompt qui est bien ficelé dès le départ, ça donne un résultat bien meilleur à la fin.
00:04:57 :Je vais aussi rajouter, j'ai oublié, la stack, donc je le précise, on a fait une règle pour la stack, peut-être qu'il va aller la chercher lui-même là encore, mais je le précise, donc utilise ma stack, donc at stack.mdc pour savoir quels outils utiliser.
00:05:12 :Je fais un submit en mode agent, et on va le voir se mettre au travail.Donc là c'est bien, effectivement il a remarqué que sur le back-end pour l'instant on envoyait uniquement les informations de titres, puisque c'est ce qu'on lui avait demandé d'afficher,donc là il va aller récupérer plus d'informations, la durée, le genre, le synopsis, l'image
00:05:31 :et les schedules, et il va maintenant passer au front-end, donc dans le front-end vous voyez comment ça s'active, il va faire des cartes avec l'image si elle existe, le titre,la duration avec des badges, ensuite il va faire les séances, donc il va récupérer uniquement la première séance, et ensuite il affiche seulement certains schedules, donc
00:05:54 :là vous voyez qu'il fait aussi un slice ici, peut-être que ce n'est pas quelque chose que je vais garder, moi je vais afficher tous les schedules, peu importe combien il y en a en fait sur la carte au départ, et ensuite il va faire la modal, donc avec le bouton
00:06:06 :voir plus ici, la modal, donc ça a l'air pas mal, l'image url, il y a un petit peu de répétition de code ici, peut-être qu'on pourrait arranger ça par la suite, et les horaires complets, donc là il enlève le slice et il affiche tous les horaires, et on a un backdrop ici qui permet de fermer, donc on a un bouton qui permet de fermer et
00:06:22 :aussi le backdrop, avec peut-être du javascript, je ne sais pas comment il va gérer ça pour fermer quand on clique sur ce backdrop, peut-être que c'est géré automatiquement par des ui, je ne suis pas sûr de ça, mais on va aller voir du coup dans notre site, alors là je crois que j'ai toujours mon serveur qui fonctionne effectivement dans mon terminal,
00:06:40 :donc je retourne sur Brave, j'actualise, et là on espère, mais souvent vous voyez qu'on a des petits problèmes, des petites choses à régler, donc là, voilà, dit object has no attribute times, donc je pense qu'en fait il n'a pas vraiment compris la structure de mon json, alors peut-être qu'il ne va pas les chercher, là vous voyez que les fichiers
00:06:57 :sont grisés, donc je pense qu'en fait il n'a pas accès à ce dossier data, donc peut-être parce que je pense que c'est dans le gitignore, si je vais voir ici dans le gitignore, je lui ai mis les movies pour ne pas qu'il les affiche avec git, et je pense que c'est ça
00:07:10 :qui fait qu'en fait il n'arrive pas à trouver la syntaxe de mon fichier, parce que si je me souviens bien, par défaut les fichiers qui sont dans gitignore ne sont pas utilisés dans le contexte, donc je vais lui donner ce contexte moi-même, parce que là je pense qu'en fait il m'a fait plein de choses qui ne sont pas bonnes, je pense que c'est pareil
00:07:28 :dans le app ici, c'est pour cette raison qu'il n'avait pas trouvé le movies, parce qu'il n'a pas accès à ces informations, donc je vais lui donner ici, je vais lui dire donc utilise mes fichiers json, donc là je vais lui dire movies, on va lui donner par exemple celui-là, peu importe ils sont tous pareils, peu importe la date, donc utilise le format
00:07:50 :de mon fichier json pour déterminer les informations à afficher, parce qu'en ce moment ça ne marche pas. Donc je pense qu'il n'avait pas cette information, vu qu'on ne l'avait pas
00:08:02 :mis dans le contexte et que par défaut il est ignoré avec le gitignore, donc ça vous voyez encore des petites choses qu'il faut prendre en compte, donc là il va aller modifier ça, vous voyez là poster url à la place, non portrait image pardon, à la place de poster url, donc je pense que vous voyez là il avait vraiment fait de la déduction, il
00:08:21 :s'est dit bon ok pour les images il a dû utiliser poster url alors qu'en fait non c'était portrait image, pareil pour les formats ou d'autres choses ici, il va maintenant adapter le index, donc là vous voyez peut-être que ce serait mieux dans ce cas-ci de faire ce que je vous ai dit tout à l'heure, c'est-à-dire de revenir au début, de faire un restore
00:08:37 :à ce point-là et de lui donner le json directement dans mon prompt initial, plutôt que d'essayer de corriger du code existant, là je ne suis pas sûr que ça va marcher ou que ça va donner quelque chose de bien, donc je reviens dans Brave, j'actualise et ça semble pas mal,
00:08:50 :donc là vous voyez il est quand même assez intelligent, il arrive à retomber sur ses pieds et on a quelque chose d'assez satisfaisant, je vais voir si la modale fonctionne bien,ça fonctionne bien, je clique en dehors, ça fonctionne bien aussi et je dois avoir un bouton fermé aussi en bas qui me permet de la fermer, donc c'est vraiment très cool,
00:09:06 :on a même des informations s'il y a d'autres cinémas, donc là je vais les afficher, comme j'avais dit je pense que je préfère avoir toutes les horaires ici, les badges il a bien utilisé le default, ghost etc, donc ça fonctionne bien, donc on a quand même quelque chose de fonctionnel, de sympa visuellement, si je teste le responsive aussi ça fonctionne,
00:09:25 :donc il a bien respecté ça également, donc vous voyez dans ce cas-ci ça fonctionne bien,je n'ai pas grand chose à dire, c'est vraiment juste au début les données JSON qu'il n'avait pas, je vais accepter tout et on va partir de cette base pour la suite puisque là on a créé
00:09:38 :pas mal de code, on va voir si on fait un petit refactoring aussi, en frontend forcément ça crée beaucoup de code rapidement, donc c'est une bonne suggestion que je vous donne de quand même aller voir régulièrement ce qui se passe, soit vous n'y connaissez pas grand chose en frontend, vous
00:09:52 :le laissez faire, mais ça peut créer des effets de bord assez rapide et vous pouvez vous retrouver avec un sac de nœuds assez difficile à démêler par la suite, si vous connaissez un minimum dans le frontend je vous conseille de quand même aller faire des vérifications assez régulièrement pour
00:10:05 :vérifier que le code se tient et que ça ne devient pas quelque chose de trop moche rapidement,souvent il y a des répétitions aussi comme je disais, donc dès le départ dans le plan de par exemple lui dire que vous allez travailler en composant, de faire un composant pour la carte,
00:10:18 :ça c'est quelque chose qu'on peut faire après coup aussi, mais si vous pouvez le faire dès le début c'est mieux, donc voilà pensez à ça à chaque fois, allez voir votre code, dans les prochaines parties on va essayer d'ajouter quelques fonctionnalités dans le frontend, de cleaner un petit peu tout ça au niveau du back et du front, et ensuite on s'arrêtera là parce que sur le front
00:10:33 :on peut passer des heures à faire un truc super complexe, moi j'ai pas envie d'avoir quelque chose de très complexe, juste quelque chose de fonctionnel, et par la suite on verra quand on va mettre tout ça en ligne sur notre serveur.

check_circle Prérequis

Rechercher sur le site

Formulaire de contact

Inscris-toi

Rechercher sur le site

Formulaire de contact