Améliorer le front
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Dans cette partie on va un petit peu améliorer notre front puisque pour l'instant vous voyezqu'on affiche pas toutes les horaires, là il m'a rajouté plus 4 autres cinémas moij'aimerais bien tout afficher ici sur la carte, on a aussi des petits bugs comme par exempleici le texte qui est coupé et dans le voir plus les dates aussi ne sont pas dans un format
00:00:17 :très facile à lire avec ce format 2025-02-22 donc je vais faire toutes ces modificationson va utiliser de nouveau notre IA, il y a quand même des petites choses qu'on va pouvoirfaire à la main notamment ici le synopsis qui est coupé donc je vais aller voir ceque ça donne dans le code, si je fais une recherche pour synopsis là on voit qu'on
00:00:35 :a un line clamp de 3 donc qui devrait couper en fait au bout de 3 lignes, là ça ne fonctionnepas puisqu'on a donc on a bien des petits points ici des points de suspension pour coupermais ensuite ça continue donc ça je pense que ça doit être un problème au niveau
00:00:48 :du CSS ou du, ah non là je pense que c'est le P en fait je vais mettre un div à la placepuisque là il avait mis un paragraphe je sauvegarde je reviens on va voir si c'estça effectivement c'était ça donc là vous voyez qu'avec un div ça coupe bien et avec
00:01:02 :le paragraphe on avait un problème avec le overflow j'imagine donc là ça c'est régléon n'a pas eu besoin de l'IA pour ça c'est bon on a économisé un petit peu d'eau selonla dem et si maintenant on s'intéresse aux 4 hauts de cinéma donc ça on va aller voir
00:01:17 :on a le on va rechercher le plus voilà plus tout des schedules cinéma length moins 1ok donc ça c'est donc là il prend juste le premier donc on va enlever ce slice ettout des schedules ok qu'est ce qu'il fait avec le tout des schedules ok il affiche tout
00:01:36 :des schedules movie schedule 0 ok il prend juste ça donc je pense que je vais enleverle 7 on va juste garder le if alors le if aussi normalement on n'a pas besoin de lemettre parce qu'on a fait le filtre dans le back end donc on va simplifier un petit peu tout ça
00:01:48 :on va enlever le plus ici et on va enlever le s parce que normalement ça aussi c'est filtréautomatiquement donc on a tout ça ici on a un h3 on a la boucle séance du jour ok et cinématimes length ça c'est ok c'est pareil en fait il a fait la même chose ici donc je vais enlever
00:02:08 :le 3 je vais enlever le if et on va afficher toutes les informations vous voyez ça faitdéjà un petit peu de ménage je sauvegarde je reviens sur brave j'affiche et là on a letout des schedules donc qui est undefined donc tout des schedules ok donc c'est ça si je reviens
00:02:22 :en avant je sais plus ce qu'ils mettaient dans tout des schedules je vais revenir voilà c'étaitmovie schedule 0 ok donc c'est ça qu'ils mettaient donc je vais revenir je vais refaire lesmodifications que j'avais faites ici voilà donc à la place de tout des schedules c'était movieschedule 0.cinema et je me demande du coup si on va pas faire une double boucle parce que là il
00:02:45 :va prendre juste le premier schedule donc je rafraîchis mais normalement c'est bon donc sije veux voir là à quoi ressemble ça on a le movies on a les schedules et là ah oui ok parcequ'en fait dans schedules on va avoir plusieurs dates ok donc c'est parce qu'en fait il prend la
00:03:01 :première date donc le 0 c'est pas le premier cinéma mais c'est la première date donc c'estla date d'aujourd'hui normalement si on fait le scrapping tous les jours donc si je reviens dansmon index on a bien la date d'aujourd'hui pour un cinéma donc on bouge sur tous les cinémas pour la
00:03:14 :date d'aujourd'hui et on affiche le nom du cinéma et les times dans le batch donc normalement c'esttout bon je reviens ici j'ai effectivement tous les cinémas pour la date d'aujourd'hui qui sontaffichés et si je fais voir plus voilà on a les dates pour les prochains jours et la date pour le
00:03:28 :jour d'aujourd'hui aussi donc ça c'est bon maintenant je vais lui demander de faire unefonction pour transformer ça ici en date qui soit un peu plus facile à lire donc ça ça va être ladate qui va être dans la modal donc si je reviens ici ça va être probablement voilà schedule c'est
00:03:43 :schedule.date donc là ce que je vais faire c'est que je vais prendre cette ligne ici et je vaisfaire un clic droit et on va dire add symbol to new composer et là vous voyez que dans notrecomposer donc il a fait un nouveau composer il a mis notre fichier index je pensais qu'il allait
00:03:56 :mettre aussi les lignes ça c'est là encore quelque chose qui est encore un peu flou entre le chat etle composer si je fais add symbol to current chat là il me met le index aussi je sais qu'on peutafficher les lignes alors c'est peut-être être dans le dans un fichier python et on peut le
00:04:12 :mettre directement les lignes et là il va il va nous afficher les lignes directement après s'ilne le fait pas je peux le je peux le spécifier je peux dire aussi que c'est schedule.date ici
00:04:21 :donc on va lui dire ça on va dire donc je vais lancer un prompt en vocal à la ligne 95 dansle fichier index.html je souhaite modifier l'affichage des dates pour qu'il soit plus
00:04:32 :facile à lire pour un humain pour l'instant on a le schedule.date qui affiche la date auformat iso je souhaiterais afficher par exemple le 27 février 2025 donc voilà pour notre promptlà je vais lui remettre un at index pour qu'il ait bien le bon le bon le bon contexte mais
00:04:51 :normalement voilà il va bien comprendre que c'est ce fichier là je souhaite modifier voilà doncnormalement ça devrait être bon je vais lui laisser faire les modifications avec ça je pensequ'il a compris donc il va peut-être me faire par contre la modification directement voilà c'estce que je me disais donc il fait la modification ici avec je sais pas si ça fonctionne je suis
00:05:10 :plus django que flask je sais pas si stream4time existe si ça ne fonctionne pas en fait il vala créer voilà il va faire c'est ce que je m'attendais à avoir il va créer un filtre customdonc ça c'est des choses qu'on a en django qui sont natifs qui sont disponibles directement dans
00:05:24 :flask comme c'est plus bas niveau en fait il faut créer nos propres templates donc là c'est cequ'il fait ici il fait un filtre à partir de ça on va voir si ça fonctionne il a une locale aussidonc il vérifie qu'on a bien la locale qui est disponible pour afficher les dates en français
00:05:37 :donc je vais lui autoriser à lancer cette commande il vérifie il voit que la locale est bien installéeet que ça devrait fonctionner donc je reviens j'actualise je fais voir plus et là effectivementon a bien 22 février 23 février donc c'est parfait il a bien compris ce que je voulais
00:05:51 :donc c'est parfait ça fonctionne bien on va rajouter une petite dernière chose qui va êtreune possibilité de filtrer les noms des films pour afficher seulement les films qu'on aura misesdans une boîte de texte donc ça je vais le faire également ici je vais faire un nouveau composer
00:06:05 :de nouveau dans le index html et je vais lui demander de faire ça en javascript on pourraitutiliser alpine js aussi mais je vais pour quelque chose d'aussi simple je pense restersur du javascript sans avoir besoin d'ajouter une dépendance donc je vais lui dire ici rajouteune boîte de texte me permet de filtrer les films en fonction de leur nom pour pouvoir filtrer
00:06:26 :les cartes et n'afficher que les films que je souhaite voir là encore comme je vous dis lapensée est probablement un peu plus complexe que ce qu'on pourrait faire avec un texte qui seraitun peu plus concis mais je pense qu'il va là encore comprendre je lui laisse ça vous voyez là
00:06:39 :j'ai pas mis beaucoup de choses je lui ai pas dit qu'il fallait le faire en javascript mais dans lastack on avait dit qu'on voulait utiliser du javascript simple je vois qu'il n'a pas il n'estpas aller chercher ma règle ici il dit voilà le javascript nécessaire donc je pense qu'il a
00:06:52 :compris qu'il n'avait pas besoin de faire plus que ça donc on va voir ce qu'il a fait là il a unform control avec un search input c'est parfait et là voilà il va juste faire un element id il varécupérer en fait ce qu'on va rentrer dans la boîte de texte il va faire ensuite du css assez
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
