Préparer la stack
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Dans cette partie, j'ai juste ouvert le projet tel qu'il est depuis GitHub dans Cursor.Donc là, on a récupéré les sources de GitHub, on les a ouvertes et ça vous donne un aperçu de ce que ça peut être.
00:00:12 :Si par exemple, on vous dit de commencer d'un projet et de ensuite devoir améliorer ce projet, dans ce cas-ci avec une interface web.Donc là, on part avec des données existantes.
00:00:20 :On a déjà un gitignore, un requirements avec des choses à l'intérieur et un dossier de scrapping avec des datas qui sont exportées.Donc on va devoir partir de ça pour faire notre interface web.
00:00:30 :Les choses sont déjà assez bien rangées.Vous voyez que la partie scrapping est isolée dans son dossier et qu'on a également les datas qui sont disponibles ici avec un timestamp sur les JSON.
00:00:47 :Qu'est-ce qu'on va faire dans cette partie ?On va configurer notre projet pour pouvoir utiliser Cursor avec l'intelligence artificielle.Ce qu'on va faire, c'est qu'on va ajouter ce qu'on appelle des règles.
00:01:04 :Dans Cursor, c'est assez récent.Avant, on avait des règles générales au niveau de l'éditeur.Là, maintenant, on peut faire des règles au niveau du projet.
00:01:11 :Donc les règles pour l'éditeur, vous pouvez les retrouver ici en haut à droite dans les préférences.Vous avez ici des règles pour AI.Vous voyez que moi, j'ai tout simplement mis une seule règle ici qui est de toujours répondre en français.
00:01:23 :Et on va utiliser dans ce cas-ci des règles spécifiques au projet.Pour ça, je fais commande Shift-P pour lui dire que je veux faire une nouvelle règle, donc NewCursorRule.
00:01:39 :Ce que je vais faire ici, c'est définir la stack qu'on va utiliser pour ce projet.Je vais créer un fichier que je vais appeler tout simplement stack.
00:01:47 :Ça va me créer, vous voyez ici, un fichier .md qui est un fichier en fait en markdown.Donc on va pouvoir mettre par exemple du code, du titre.
00:01:56 :Donc ça, c'est la syntaxe markdown.Et ces fichiers, en fait, c'est tout simplement des règles qui vont être utilisées par la suite par notre intelligence artificielle.
00:02:03 :Soit automatiquement, il va probablement comprendre en fait des fois ce qu'on veut faire.Si on lui dit qu'on veut commencer à créer les bases de notre site web et qu'on a un fichier stack,probablement qu'il va être assez intelligent pour comprendre qu'il faut utiliser ces règles pour savoir quels outils il va devoir utiliser pour faire la base de notre site web.
00:02:20 :Mais on peut également ajouter ces éléments dans le contexte en faisant un at et en mettant les règles nous-mêmes ici.Donc là, par exemple, si je fais at stack, on retrouve bien notre règle ici stack.mdc.
00:02:31 :Donc là encore, c'est toujours mieux d'être le plus explicite possible, de passer tout ce qu'on peut au contexte.Également dans la description ici, je vais indiquer que c'est la stack qui est prévue pour ce projet.
00:02:40 :Donc stack pour le projet et je vais même rajouter pour le projet web.Parce que là encore, si je mets juste pour le projet, il pourrait penser que c'est la stack qui va être utilisée pour le projet en général.
00:02:50 :Donc même pour la partie scrapping.Là dans ce cas-ci, ça va vraiment être la stack uniquement pour la partie web.Donc bien important toujours d'être le plus explicite possible, même si là encore vous allez voir avec le contenu du fichier,il va pouvoir conclure, déduire en fait de ce qu'on a mis ici avec back-end et front-end qu'on parle uniquement de la partie web.
00:03:09 :Mais c'est toujours bien d'être le plus explicite possible.Ça vous force vraiment l'IA en fait à être très précis dans ce que vous dites.Il faut vraiment voir ça comme un employé un peu bête.
00:03:19 :Je trouve ça une analogie assez classique.Mais vraiment un employé vraiment très bête.Donc un employé qui ne sait absolument rien.Et donc si vous ne lui dites pas exactement ce qu'il faut faire, il va prendre des libertés.
00:03:32 :Et c'est en fait la même chose dans l'entreprise.Même si votre employé n'est pas stupide, même s'il est très intelligent,si vous ne lui dites pas exactement ce que vous voulez, il va devoir faire des choix.
00:03:41 :Donc ces choix, si l'employé est très intelligent, ils vont être peut-être intelligents.C'est à vous de voir si votre employé est bon ou pas.Mais dans le cas de l'IA, ça va être assez aléatoire.
00:03:50 :Des fois, ça va être des bons choix.Des fois, ça va être un petit peu chaotique.Donc toujours être le plus explicite possible.Donc là, pour le back-end, on va utiliser tout simplement Flask.
00:03:58 :Et pour le front-end, on va utiliser DeziUI qui est une librairie de composants assez connue.On a les templates Flask aussi qui vont être tout simplement utilisés pour l'affichage principal de l'application.
00:04:09 :Et j'ai spécifié JavaScript pour les interactions.Là encore, on pourrait utiliser d'autres librairies comme par exemple AlpineJS.Peut-être qu'on le fera par la suite.Pour l'instant, je vais rester le plus simple possible.
00:04:19 :Et on va voir déjà avec ça ce qu'il nous fait.Pour les librairies de composants bien importants, là j'ai mis DeziUI.Il y a pas mal de librairies qui sont disponibles.
00:04:27 :Mais il faut faire très attention de la popularité, je dirais, de ces librairies.Alors vous pouvez bien sûr ajouter les documentations.Mais de mes expériences, ça ne marche pas très bien.
00:04:35 :Il y a une autre bibliothèque, par exemple, que j'aime bien, qui est assez neuve, qui s'appelle FrankenUI.Et cette bibliothèque, j'ai fait des tests avant de faire cette formation.
00:04:43 :Et ça ne marchait vraiment pas du tout.Même en lui passant la documentation, même en lui donnant les liens de la documentation sur le web, etc.
00:04:50 :Ça ne marchait pas du tout.Pour vous donner un petit exemple, en fait, dans cette bibliothèque de composants, donc FrankenUI,il y a un préfixe qui est uca- et ensuite on a, par exemple, uca-button, etc.
00:05:02 :Et ce qui était assez drôle, c'est que lui, en fait, il a remplacé tous les uca par fr.Donc mon intuition, c'est que justement, probablement, peut-être à cause de règles comme ça,qui sont de toujours répondre en français, des choses du genre,ou puisque je lui écris aussi en français,
00:05:15 :il s'est dit, ok, je vais adapter le code pour ne pas lui mettre uca,qui est United Kingdom, donc les anglais.Et il a, en fait, tout simplement remplacé le uca par fr.
00:05:23 :Donc peut-être que si j'avais été au Portugal, donc c'est le cas actuellement, je suis au Portugal,peut-être qu'il aurait mis piti aussi pour Portugal, ou je ne sais pas, US pour les Etats-Unis.
00:05:33 :Donc, voilà, très intéressant de voir des fois les libertés qu'il prend.Mais dans ce cas-ci, du coup, même en lui passant la documentation,même après lui avoir dit, ok, c'est pas fr, c'est bien uca,qu'est-ce qu'il a fait quand je lui ai dit que c'était uca ?
00:05:46 :Il a dit, ok, donc en fait, tu utilises UIKit comme ça.Donc probablement que UIKit utilise uca aussi, je ne sais pas.Mais voilà, il est encore parti dans d'autres choses.
00:05:57 :Donc, voilà, raison pour laquelle je pense qu'il est important d'utiliser des choses qui sont assez connues.C'est un petit peu problématique aussi, parce que forcément ça fait un effet de serpent qui se mord la queue.
00:06:11 :C'est-à-dire, par exemple, quelque chose que je n'aime pas beaucoup,c'est de voir beaucoup de débutants qui utilisent Next.js,parce que c'est une librairie très populaire en front-end,mais qui est assez lourde, et je vois de plus en plus de gens qui utilisent Next.js
00:06:23 :pour faire des sites statiques, des front-page, des choses très simples.Parce que forcément, c'est une librairie qui est très connue,donc l'IA va vous faire des choses aux petits oignons avec ça.
00:06:32 :Le problème, c'est que vous allez utiliser un bazooka pour tuer une mouche.Donc là, moi, ce que j'aime bien avec des UI, c'est que c'est quelque chose quand même d'assez simple, d'assez léger,qui fait vraiment le taf pour la plupart des choses dont on a besoin.
00:06:43 :On pourrait aussi utiliser directement Tailwind.Tailwind, c'est une bibliothèque qui maintenant est très bien documentée, très connue.Donc Tailwind, de base, sans avoir de librairie de composants, ça marche bien aussi,c'est juste qu'il va là encore prendre beaucoup de liberté si vous ne lui donnez pas des règles précises.
00:06:56 :Donc dans d'autres projets comme Docstring, par exemple,j'ai des librairies de composants que j'ai moi-même faites,et ça, je lui donne dans des règles pour lui dire,voilà, quand t'as un bouton, tu utilises ça, quand t'as un dropdown, tu utilises ça.
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.
