Codage Vibe pour créer un produit numérique avec l'IA Cursor

1. Introduction du cours: Salut, voilà. Bienvenue sur les partitions de be coding with Cursor. m'appelle Fassel et je serai votre guide tout au long de ce voyage passionnant, duquel nous explorerons comment l'IA et les outils sans code redéfinissent ce que signifie coder Dans un monde où la technologie évolue plus rapidement que jamais, programmation traditionnelle n' est plus le seul moyen de créer des produits numériques Des outils tels que le curseur changent la donne et rendent la création de logiciels accessible à tous, même sans écrire une seule ligne de code. Dans ce cours adapté aux débutants, nous plongerons dans le monde passionnant du codage, qui est une façon créative, intuitive et basée sur l'IA de créer des applications. Vous n'avez pas besoin d'expérience en programmation, mais simplement de curiosité et de volonté d'expérimenter. Voici donc ce que nous allons aborder. Nous allons donc d'abord parler codage et nous allons comprendre ce que c'est, comment il fonctionne et en quoi il est parfait pour les non-codeurs et les penseurs créatifs Ensuite, nous commencerons par créer notre première application à l' aide du curseur, et je vous tiendrai par la main tout au long de ce voyage. Je vais donc vous montrer les instructions exactes que vous êtes censé utiliser, comment configurer Cursor sur votre système et comment lancer votre première application Et tout cela sans même toucher le clavier pour écrire le code. Nous n'allons pas écrire une seule ligne de code. Ensuite, nous allons avoir notre deuxième application, qui serait une version un peu avancée de notre application dans laquelle nous créerions un blog à l'aide curseur et nous apprendrons comment personnaliser la configuration et lancer un journal personnel pour partager entièrement nos apprentissages à l' aide de l'IA Tout cela sans aucune expérience en programmation, vous gagnerez en confiance pour créer davantage en faisant cela, et vous serez en mesure de mettre en œuvre des idées que vous êtes prêt à développer depuis si longtemps. À la fin de ce cours, vous serez non seulement familiarisé avec le codage, mais vous aurez également deux applications fonctionnelles, et vous aurez également l' état d'esprit et le bon ensemble d' outils pour continuer à développer sans aucune barrière traditionnelle. Ce cours s'adresse aux étudiants, aux créateurs, aux indépendants, aux entrepreneurs ou à toute personne désireuse de créer des objets sympas en utilisant le pouvoir de l'IE Pas de contexte, pas de problème. J'ai une solution pour toi ici. Alors, êtes-vous prêt à créer votre première application avec juste des vibrations et de la curiosité ? Commençons. 2. Qu'est-ce que le codage vibrant: Maintenant, quel est ce terme « coder » ? Comprenons donc que le codage n' est pas une technique de programmation formelle. Bien sûr, il y a le code des mots dedans, d'accord ? Mais il ne s'agit pas d'une technique de programmation formelle. Il s'agit plutôt d'une façon basée sur le flux créatif de créer des objets à l'aide de l'IA. Permettez-moi de vous expliquer cela à l'aide de quelques exemples, puis laissez-moi développer cela. Imaginez que vous avez une idée de petite application ou une fonctionnalité spécifique que vous souhaitez intégrer à un produit existant. D'accord ? Disons que vous n'avez qu' une idée d'application, d'accord ? Et dans le passé, si vous aviez une idée et si vous vouliez la concrétiser, vous deviez apprendre un langage de programmation, d'accord, ou vous deviez en comprendre la syntaxe, et vous deviez également écrire chaque ligne de code vous-même. D'accord ? C'est une façon de faire les choses plus tôt si vous le faites vous-même ou si vous pouvez engager un développeur pour vous-même. Cela nécessitait beaucoup de temps, connaissances spécialisées ou d'argent si vous embauchez un développeur, n'est-ce pas ? Le codage en ligne change complètement ce paradigme. OK, je change complètement ce paradigme. Et au lieu de coder des choses vous-même ou d' engager un développeur, vous créez essentiellement des logiciels à l'aide de l'IA. Ici, l'IA est synonyme d'intelligence artificielle. D'accord ? Pour le dire simplement , le codage est une approche de création de logiciels dans laquelle vous utilisez le langage naturel. Langage naturel, c'est-à-dire la langue dans laquelle vous communiquez et dans laquelle vous parleriez à vos amis et à votre famille. C'est ce qu'est le langage naturel, qui est un anglais simple ou un langage humain, d'accord ? Et vous utilisez ce langage naturel pour dire à un outil d'intelligence artificielle ou d'IA ce que vous voulez et l'IA générera le code pour vous. D'accord ? C'est donc ce qu'est le codage. Maintenant, ici, tout d'abord, vous n'avez pas besoin de beaucoup de connaissances en programmation. Donc auparavant, vous deviez écrire, vous savez, vous deviez apprendre le langage de programmation, vous deviez comprendre sa syntaxe, son fonctionnement. Vous devez écrire vous-même chaque ligne de code, n'est-ce pas ? Maintenant, il y a un changement dans ce domaine avec le codage. Vous n'allez pas écrire chaque ligne de code. Vous allez simplement dire à l' IA de l'écrire pour vous, et l'IA va écrire le code ici. D'accord ? Donc, ce qui se passe ici, c'est l'IA qui fait le travail. L'IA écrit du code, et vous n' êtes plus un programmeur, mais vous êtes en fait l' architecte et le constructeur. D'accord ? Vous planifiez donc essentiellement l'ensemble de l'application. Maintenant, c'est l'IA qui écrit le code, non ? La responsabilité du codage est assumée par l'IA. Vous êtes donc passé au second plan et vous vous occupez des tâches de haut niveau, comme planifier votre application en fonctionnalités qu'elle devrait comporter, comment ces fonctionnalités devraient-elles fonctionner et si le résultat fourni par l'IA correspond à vos besoins ou non, n'est-ce pas Vous êtes donc comme un architecte et constructeur qui conçoit tout, comme les plans, puis vous vous assurez que chaque brique de ce plan en utilisant ce plan en particulier est posée correctement, Donc, en tant qu'architecte, vous planifiez des choses. OK. C'est quelque chose que j'ai mentionné. Désormais, AI est votre équipe de construction à plusieurs échelles super efficace D'accord ? C'est donc comme un constructeur. Où vous expliquez votre vision à l' IA dans un langage parfaitement clair, d'accord ? Vous élaborez les choses et vous ajoutez autant de détails que possible, et l'IA fera le gros du travail à votre place. Vous n'avez pas nécessairement besoin de savoir comment poser toutes les briques vous-même, mais l'IA fera le travail à votre place, d'accord ? Maintenant, ce terme de codage gagne en popularité car avec lui, même les non-codes ou les personnes ayant une connaissance limitée du codage peuvent créer des choses rapidement. Et même si vous êtes ingénieur, vous pouvez réellement accélérer le processus de développement. D'accord ? Vous décrivez donc ainsi ce que vous voulez faire Ce que vous voulez un logiciel fasse dans un anglais simple Cela peut être aussi simple que de créer une simple page Web avec un titre intitulé «  My Firsts be app » et un bouton dont le texte change lorsque vous cliquez dessus OK. Vous pouvez même lui demander d'écrire un script Python qui prend une liste de nombres et renvoie la moyenne. D'accord ? Il s'agit donc d'un simple script Python que vous pouvez obtenir à partir de l'IA. Vous pouvez même créer une petite application Web de suivi des tâches dans laquelle vous pouvez ajouter des tâches, les marquer comme terminées et afficher la liste de toutes les tâches. Voici donc quelques exemples de la façon dont vous donnez les instructions ou l'invite à l'outil d'IA, et l'outil d'IA fera le travail à votre place. Maintenant, cela ressemble à la façon dont vous confieriez une tâche ou expliqueriez une fonctionnalité à quelqu'un, n'est-ce pas, à quelqu' un que vous avez embauché. Donc c'est comme ça que ça fonctionne ici, d'accord. Et oui, c'est ce que c'est. Maintenant, comment ça marche. Laissez-nous donc comprendre le fonctionnement de tout ce processus de codage. D'accord ? Tout d'abord, vous donnez des informations à l'IA en langage naturel, gros, et vous présentez votre ambiance Maintenant, ce que je veux dire par ambiance ici, c'est que vous décrivez ce que vous voulez que le logiciel fasse dans un anglais simple , d' accord, et que ajoutez autant de détails que possible et que vous êtes aussi élaboré que possible OK. Maintenant, l'IA va interpréter vos informations ici. Il va analyser votre description de toutes les fonctionnalités et de ce que vous voulez. Et il va comprendre votre intention les fonctionnalités requises et la logique sous-jacente. C'est donc là que l'IA interprète vos exigences. Ensuite, il passe au mode de génération de code, dans lequel, sur la base de son interprétation, l'IA va générer le code réel Comme un vrai code, je veux dire, des fichiers DML, des fichiers CSS, fichiers Jascript, des fichiers Python, selon le type d'applications que vous créez, Ensuite, il y a une observation de l'exécution qui se produit. Vous exécutez donc le code généré pour voir s'il fonctionne comme prévu. Maintenant, bien sûr, vous n'avez pas besoin de savoir comment exécuter l'application. Vous pouvez demander à l'IA elle-même, d'accord ? Et tu peux juste suivre les instructions, d'accord ? Et la plupart des outils de codage informatique. Donc oui, nous allons utiliser certains outils pour coder en I, et la plupart des outils de codage ont environnement intégré dans lequel vous pouvez exécuter le code immédiatement. OK. Ensuite, il y a cette étape de feedback et de raffinement. C'est donc une étape très importante, d'accord ? Il est donc rare, selon vos besoins, que la première tentative soit parfaite. D'accord ? S'il y a des erreurs ou si la fonctionnalité n'est pas correcte, vous fournissez les commentaires à l'IA et, en langage naturel, par exemple, vous pouvez dire : « Hé, ce bouton ne fonctionne pas et rien ne se passe si je clique dessus ». D'accord ? Vous pouvez dire, hé, rendre la couleur d'arrière-plan de la page Web bleu clair, ou vous pouvez ajouter une fonctionnalité, ou vous pouvez demander à l'IA d'ajouter une fonctionnalité au suivi des tâches qui me permet de supprimer la tâche. Vous pouvez donc ajouter des instructions de cette façon. Et en fonction de vos instructions, cela va itérer, non ? Si vous voyez un message d'erreur, vous pouvez le mettre en page ainsi qu'une entrée dans l'IA, et cela se réparera pour vous. D'accord ? Et puis il va y avoir une répétition, alors vous répétez les étapes 1 à 5 jusqu'à ce que vous obteniez le résultat souhaité. Et c'est un processus conversationnel, peu comme travailler avec un assistant humain C'est ce que je veux dire ici. C'est ainsi que tout le processus va fonctionner, d'accord ? Et la taille présente de nombreux avantages ici, et le principal avantage ici, selon moi est une accessibilité accrue C'est parfait. C'est peut-être le plus grand avantage pour vous. Vous n'avez pas besoin de connaissances approfondies en programmation pour commencer à créer. Cela abaisse considérablement la barrière à l'entrée. Même les non-codeurs peuvent commencer à avoir des pages de destination, à créer des objets, à déployer des objets, et vous pouvez donner vie à vos idées , créer des prototypes fonctionnels, des MVP en moins de temps que ce qu'il faudrait avec le codage traditionnel Ici, vous vous concentrez essentiellement sur l'intention, et vous pouvez vous concentrer sur ce que vous voulez construire et pourquoi plutôt que de vous enliser dans la syntaxe et les détails d' implémentation spécifiques d'un langage de programmation D'accord ? Maintenant, il y a aussi quelques limites. Tout n'est pas bon. Vous savez, les limites peuvent être liées à la qualité et à la sécurité des codes. Le code généré par l'IA n'est peut-être pas toujours optimisé, efficace ou totalement sécurisé. Bien entendu, pour que les applications soient prêtes à être mises en production, l'examen humain et la compréhension du code généré restent cruciaux. Mais je dirais que c'est un bon point de départ si vous créez un produit, n'est-ce pas ? Le codage Complexity I est excellent pour les projets simples et le prototypage rapide Mais pour les projets très complexes, systèmes à grande échelle qui nécessitent une meilleure compréhension de l'architecture logicielle, les pratiques de codage traditionnelles restent essentielles. D'accord ? Et aussi, la dernière limite concerne l'effet boîte noire. Maintenant, ce que je veux dire ici, c'est que vous obtiendrez un code fonctionnel que vous ne comprendrez même pas complètement. Vous ne comprenez donc pas le code, mais le code fonctionne pour vous, n'est-ce pas ? Cela peut donc être une bonne ou une mauvaise chose. C'est bon pour obtenir des résultats rapides, mais moins idéal pour acquérir connaissances approfondies en programmation ou pour les itérer ultérieurement et ajouter des fonctionnalités personnalisées Donc oui, cela pourrait être un inconvénient, d'accord ? Donc oui, ce sont quelques avantages et, vous savez, des limites que je tiens à souligner. Et j'espère que vous comprenez bien tout ce concept du codage PE. 3. Outils pour le codage de vibration: Je veux juste parler un peu des différents outils qui existent pour vous permettre de faire du codage PE. D'accord ? L'un des outils est donc le curseur, et il s'agit d'un éditeur de code IE, comme il est indiqué ici dans Big Fonts. Donc, cet IDE, en gros tous les éditeurs de codage, vous permet d'utiliser EI et il va simplement écrire tout le code pour vous. D'accord, il connaît donc votre base de code. C'est cela qui vous permet de modifier en langage naturel. D'accord, cela vous permet de créer des logiciels plus rapidement, en gros. C'est ce qu'il fait. D'accord. Et oui, c'est le site officiel de Cursor. Ensuite, vous avez également ce qu' on appelle Gu co-pilot, qui est similaire à celui de Kursor Cela vous permet également de créer des logiciels plus rapidement. Et voici à quoi ça ressemble ici. D'accord ? Et il existe un identifiant appelé Visual Studio Code. Il s'intègre également très facilement dans le code de Visual Studio. donc ce qu'est le co-pilote de Github C'est donc ce qu'est le co-pilote de Github. Il s'agit de votre site officiel. Ensuite, vous avez un plet qui vous permet également d'utiliser l'IE et de créer des logiciels En dehors de ceux-ci, il existe des LLM ou des modèles d'apprentissage des langues comme Hatchibt Cloud Tous ces outils aident utilisateurs à ne pas avoir d'éditeurs de code dédiés, mais vous pouvez utiliser ce modèle d'apprentissage des langues à usage général ou des LLM pour générer du code par invite, puis vous pouvez copier-coller le résultat dans votre environnement de développement 4. Configurer le curseur sur la machine locale: Le moment est donc venu d' installer et de configurer le curseur sur notre système. Donc, ce que je vais faire rapidement, c'est dire télécharger ici. Vous verrez donc le bouton de téléchargement en haut à droite. OK ? Et si vous utilisez un Mac ou un autre système d'exploitation, vous allez voir ce bouton apparaître pour votre système d'exploitation. Vous pouvez cliquer sur tous les téléchargements et voir sur quelles machines cette application est disponible. Vous pouvez voir qu'il est presque disponible sur toutes les applications ici. Vous pouvez même choisir la version si vous avez des exigences de version spécifiques. Je vous recommande de cliquer sur Télécharger ici ou ici au centre de la page principale pour télécharger sur votre système. Je dirais télécharger. Les téléchargements du logiciel, nous nous dirigerons également vers la page de tarification ici. Maintenant, j'aimerais parler un peu des prix ici, d'accord ? Donc, ici, c'est un plan gratuit, et c'est sur le plan gratuit que nous allons travailler. OK ? Je ne vais pas vous proposer ou vous demander de faire une mise à niveau ici. La version gratuite vous donne une limite décente, d'accord, pour travailler sur vos projets. Nous allons donc commencer par la gratuité. Mais si vous êtes un utilisateur sérieux qui souhaite beaucoup utiliser le curseur, vous pouvez certainement passer à différentes options payantes. Il existe différentes versions payantes ici pour 20$ ou 200$ par mois. Mais la gratuité est ce dont nous avons besoin pour ce cours en particulier. Et ici, vous avez également des plans d' équipe. OK ? Maintenant, en jetant un œil aux fonctionnalités, vous pouvez également explorer les fonctionnalités ici, telles que les modifications multilignes, les réécritures intelligentes, le tap tap tap OK. Donc, en gros, vous devez simplement appuyer sur la touche Tab, et cela vous permet de passer d'une modification à l'autre des fichiers Il existe de nombreuses fonctionnalités. Vous pouvez explorer cette page dans son intégralité. Je ne vais pas parler de chacune d'entre elles ici, et je vais en fait vous montrer toutes ces fonctionnalités, d'accord ? Mais si tu veux lire, tu peux. Maintenant, une fois le logiciel téléchargé vous pouvez simplement double-cliquer dessus et l'installer comme n'importe quel autre logiciel que vous installeriez sur votre système d'exploitation. Je peux donc voir la configuration ici. Je vais dire que j'accepte ensuite. Il demandera où il doit installer ce logiciel en particulier. Vous pouvez donc voir qu'il s'agit d'une exigence d'affichage gratuite pour Windows. Et pour Mac, ce sera pareil. Ensuite, il va créer un dossier Menu Démarrer dans le menu Démarrer pour moi. Sur Mac, cela peut être différent. Je vais dire le suivant, et je dirai le suivant ici. Je vais dire installer. L'installation prendra quelques minutes. Ce n'est pas un logiciel complexe, vous l'installez comme n' importe quel autre logiciel. Une fois cette installation terminée, vous devez cliquer sur Ouvrir. Vous pouvez donc voir ici que l'installation est terminée. Vous pouvez maintenant appuyer sur le curseur de lancement et dire « terminer ». OK ? Il va donc ouvrir Cursor pour vous. Vous pouvez donc voir ici que Curso est ouvert, et ici, il demande à s'inscrire Vous pouvez donc vous inscrire et créer un compte si vous le souhaitez. Je vous recommande cependant de vous inscrire ici. Je vais donc vous dire de vous inscrire, et cela vous mènera à la page Web, et ici, il vous montrera différentes manières de vous inscrire. Vous pouvez donc dire Google Github ou vous inscrire par e-mail Je vais donc rapidement créer mon compte ici. Maintenant, une fois l'authentification terminée, vous allez voir ce type de message Bien, nous allons donc revenir à Cursor. Voici donc ce qu'est Cursor. Maintenant, il me demande d' importer des paramètres depuis le code VS. VS code n'est qu' un autre éditeur de codage. OK ? Je peux importer les paramètres à partir du code VS ou je peux dire sauter et continuer. Alors je vais juste repartir à zéro, d'accord ? J'ai également installé du code Visual Studio ou du code VS sur ce système , et c'est pourquoi cette invite. Je vais donc dire Skip et continuer. Et il me demande de choisir le thème. Vous pouvez choisir un thème en fonction de vos besoins et de vos goûts. Vous pouvez même explorer des thèmes. Je vais vous dire de continuer. OK. Et là, il s'agit de me demander quel type de conclusions clés je souhaite obtenir. Je vais choisir le code VS et savoir si vous souhaitez partager des données avec le curseur pour améliorer. Je vais laisser ça sans contrôle OK. Je vais partir. OK. Il n'y a donc aucune possibilité de s'échapper, je vois. Je vais donc dire que je vais bien et que nous allons continuer. Et nous vous dirons de continuer. OK ? Donc oui, c'est ce qu'est l'IDE ici, comme vous pouvez le voir, laissez-moi zoomer un peu. OK. Maintenant, permettez-moi vous donner un aperçu de ce que nous voyons ici. Donc, ici en haut, bien sûr, vous pouvez voir les options du menu comme n'importe quel autre logiciel, d'accord ? Ou vous pouvez voir que vous êtes dans la version d'essai professionnelle. OK ? Vous n'êtes pas dans la sion illimitée. Vous êtes en période d'essai de la version pro. OK ? Vous avez un procès depuis un certain temps. Maintenant, pour en savoir plus sur votre période d'essai, vous pouvez vous rendre ici. Si vous consultez les tarifs de Cursor, vous verrez ici que le forfait gratuit inclut un essai de deux semaines pour P. Donc, pendant deux semaines, vous avez cette version d'essai payante. OK ? C'est donc ce que nous sommes. C'est pourquoi nous proposons un essai Pro et vous pouvez passer à un nombre illimité. Vous pouvez ouvrir un projet, cloner un dépôt, connecter à YSSH. Ce ne sont là que quelques options. Et sur le côté droit, vous avez une fenêtre de discussion. OK ? Vous pouvez le voir et ce que je recommande, c'est que lorsque vous l'ouvrirez , d' accord, ici au centre, vous verrez ce projet ouvert. Je vous recommande donc de cliquer sur Ouvrir un projet ici et d'ouvrir un dossier dans lequel vous allez faire tout le travail. Et ce que j'ai fait, c'est que lorsque j'ai dit ouvrir un dossier, cela m'a ouvert une sorte d'exploseur, et j'ai accédé à ce dossier appelé be coding, et je dirais de sélectionner le OK ? Maintenant, au moment où vous sélectionnez un dossier, vous pouvez voir un changement dans l'interface ici sur le côté gauche, d'accord ? Et ici, vous pouvez voir ce dossier de codage ici, et ici vous pouvez créer un nouveau fichier, vous pouvez le voir, mais nous n'allons pas créer nouveau fichier et partout dans ce dossier, nous allons laisser l'IA faire le travail. Vous pouvez voir quelques options ici, comme get search et tout ça. OK. Et c'est ici que la liste complète des fichiers apparaîtra sous le code en cours de codage. Et ici, dans le volet central, vous pouvez voir cette division. Ici, dans le volet central, vous allez voir le code apparaître. Donc, si vous sélectionnez un fichier, le code apparaîtra ici. OK. Ensuite, dans le panneau de discussion AI, vous pouvez discuter ici avec le modèle AI. Vous avez maintenant ce qu' on appelle ajouter du contexte ici et c'est une fonctionnalité puissante qui permet de référencer un fichier spécifique ou tout autre élément du genre que vous souhaitez ajouter comme contexte lorsque vous parlez à l'IA. Ainsi, par exemple, ici, vous pouvez ajouter des fichiers de code de dossier, des documents, toutes sortes de conversations passées, des terminaux, même des articles Web, que vous pouvez ajouter ici. Maintenant, dans la fenêtre de discussion, si vous cliquez ici, vous verrez la demande et le manuel de l'agent. OK ? Voici les modes ici. Maintenant, le mode agent est un mode dans lequel , si vous mentionnez quelque chose ici lorsque le mode agent est sélectionné, vous dites « Bonjour, je veux modifier ma page de destination et mettre à jour la couleur Donc, quoi que vous mentionniez ici, le modèle d' IA va directement modifier le code. Bien entendu, vous aurez le choix entre accepter ou rejeter, mais c'est ce qu'est le mode agent Ask, c'est simplement poser des questions sur la base de code, et cela ne va pas mettre à jour ou modifier votre code. Manuel signifie que le mode manuel est conçu pour apporter des modifications ciblées lorsque vous savez exactement quelles modifications sont nécessaires et où. OK ? Il s'agit donc essentiellement d'un mode permettant des modifications de code précises avec un ciblage explicite des fichiers. OK ? Ici, vous devez savoir quelles modifications vous souhaitez apporter, et c'est pourquoi cela s'appelle le mode manuel. OK, voici donc les différents modes ici. Nous allons essayer ce mode, alors ne vous inquiétez pas si vous n'êtes pas sûr ou si vous n'avez pas compris de quoi il s'agit. OK. Ici, vous avez la possibilité d'ajouter nouveaux chats ou des agents d'arrière-plan et tout cela. Et voici Automde, d'accord ? Donc, automde signifie que ce sera essentiellement le cas, si vous le désactivez, vous avez la possibilité de changer de modèle OK, si vous le rendez automatique, le modèle sera basé sur une certaine logique rétrospective OK ? Mais si vous ne voulez pas le faire, si vous souhaitez sélectionner un modèle en fonction de vos besoins, vous pouvez également le faire. Et le mode Max, ce qui signifie qu'il permettra un maximum de contexte. Vous pouvez le voir ici dans la fenêtre contextuelle. OK ? Et bien sûr, si cela ajoute un maximum de contexte, cela vous coûtera plus cher. OK ? Voilà ce que c'est, et je vais m'assurer que je suis en mode automatique. Il s'agit donc de l' interface ici. Jusqu'à présent, j'espère que cela a été utile. 5. Notre première application avec Vibe Coding: Le moment est donc venu de commencer à coder par effacement et de créer notre première application sans même écrire une seule ligne de code et laisser l'IA écrire et tout faire. D'accord ? Donc, ce que je vais faire, c'est utiliser le curseur ici, tout d'abord, et je vais avoir besoin d'un autre modèle d'IA qui jouera un rôle de soutien, et vous pouvez utiliser n'importe quel modèle d'IA comme Hat Tipty ou Gemini Donc je vais utiliser Chat Chipty, d'accord ? Et je vais ouvrir les deux dans deux fenêtres différentes. J'ai donc ici le curseur. Ce que je vais faire, c'est suivre ce curseur et j'ai ici cette option. Ajoutez deux fenêtres. Je vais l'ouvrir en mode partagé comme ceci, non. Et il y a une raison à cela. D'accord ? Donc, en gros, dans ce LLM en particulier, je vais demander toutes les informations génériques Je vais donc faire semblant de ne pas savoir coder. Et en tant que non-codeur, comment pouvez-vous coder des choses ? Dans ce LLM en particulier ou dans ce modèle d'IA sur le côté droit, je vais poser des questions et aider à obtenir de l' aide pour générer des instructions que je peux essentiellement saisir aide pour générer des instructions ici Et ici, je vais vraiment faire écrire à l'IA. D'accord. Revenons donc ici sur le côté droit, et je vais dire au modèle d'IA : « Hé, je ne m'y connais pas en codage ou en programmation, d'accord ? Je souhaite créer une application simple ou devrais-je dire, une simple application Web dont le titre indique ma première application et le bouton E. Et un bouton qui change l'arrière-plan de l'ensemble de l'application de manière aléatoire. D'accord. La couleur de fond est celle que je peux voir. D'accord ? Vous pouvez donc présenter vos idées ici, d'accord ? Et vous pouvez mentionner ici que je m'en sers. D'accord ? J'utilise le curseur pour la même chose. D'accord. Et s'il te plaît , partage le plan avec moi. D'accord ? Maintenant, une chose à noter ici , c'est que je demande un plan, non ? Je ne demande rien d' autre. Je demande un plan. Donc, ici, je suis architecte. Je fais des projets et je me considère comme un constructeur ou un architecte qui planifiera l'ensemble de l'application Donc, il va planifier, il va partager l' intégralité du plan avec moi, d'accord ? Et voyons quel résultat nous obtiendrons ici. Je vais donc simplement dire Enter et voyons quelle sortie il obtient. OK, il connaît donc mon nom parce que je me suis inscrit. Pas de soucis du tout. Vous n'avez pas besoin de connaître le codage pour commencer avec des projets simples comme celui-ci, d' accord, bla, bla, bla Et il est dit qu'il a un bouton, il doit changer la couleur de fond de manière aléatoire. OK, donc ici, il a réévalué l'exigence, afin qu'il comprenne ce que je veux dire Il me dit d'ouvrir le curseur, télécharger le curseur, d'ouvrir une nouvelle page Web, et il me donne cette invite. Vous pouvez le voir ici. Donc, il me dit de créer un nouveau fichier, d' indexer le code HTML par points. Ceci est votre page Web principale et tapez cette instruction pour ce logiciel en particulier ici. D'accord ? C'est donc quelque chose qui peut faire, et ici, cela vous a également donné du code. D'accord ? Maintenant, créez une page Web simple avec le titre MF YAP et ajoutez un bouton qui change la couleur de fond de manière aléatoire lorsque vous cliquez dessus OK, donc je vais le copier. Je ne créerai pas de fichier index point tm ou je peux demander à ce modèle d'IA d'ignorer cette partie. Je ne veux pas créer de fichiers moi-même. Mais j'aimerais que Cursor fasse tout pour moi. D'accord ? Je suis dans un dossier en ce moment. Je veux que la première application soit créée dans un dossier là-bas. D'accord ? Donc je vous dis que je suis dans un dossier en ce moment. Le nom de ce dossier est en cours de codage. Et dans ce dossier, je veux que l'application complète soit créée. C'est ce que je suis en train de dire. Donc, ici, c'est parfait. Vous êtes dans l'application. OK, ici, ce que vous pouvez faire c' est nous demander de créer un nouveau dossier, être une application. Donc, ici, vous pouvez voir l'application. Soyez une application. C'est ce que le nom a donné. Cela me dit de créer à nouveau un index ou un fichier HTML. Quand j'ai dit que je voulais créer des fichiers moi-même. Je vais juste le copier, le raconter et répondre ou me donner rom directement en bref. D'accord ? Je veux les informations que je dois donner au COSA. C'est donc ce que je demande ici, et cela vous donne le message exact. Il vous indique donc de créer un dossier nommé be app avec un index ou un fichier HTML indiquant le titre. Vous pouvez donc voir qu'il vous donne le message complet ici. Il a donc fallu quelques répétitions ici ou quelques itérations, c'est ce que je dirais D'accord. Je peux également supprimer ce dossier. D'accord. Je dirais de passer à la corbeille, et je vais préparer le bal de fin d'année en entier. Au lieu de demander, je vais passer en mode agent car je veux que le curseur le code pour moi. Maintenant, au moment où je donne cette commande à Cursor, voyons ce qu'elle fait. Je vais donc simplement l'ouvrir, et vous pouvez voir qu'il a commencé à fonctionner dessus. Il a commencé à répertorier les annuaires. Il a créé un dossier BAP. Il a créé cet index ou code HTML ici, et vous pouvez voir qu'il vous a effectivement donné le résultat. Le dossier IAP a été créé avec un index ou un fichier HTML. Ce fichier affiche My force YAP et, lorsque vous cliquez sur un bouton , la couleur devient aléatoire Voici donc toutes les exigences que nous avons remplies, et vous pouvez voir vous pouvez maintenant ouvrir ce fichier dans le navigateur pour voir votre application en action. D'accord ? Donc, ce que je vais faire, c'est ouvrir un nouvel onglet de navigateur ici et je vais choisir de déposer ce fichier ici, quelque chose comme ça, et je peux simplement appuyer sur Entrée. Vous pouvez également l'ouvrir dans le dossier. En gros, vous pouvez accéder à ce fichier en particulier et vous pouvez simplement double-cliquer car il s'agit d'un fichier HTML. D'accord. Voyons maintenant ici quelle est la sortie que nous obtenons en changeant la couleur de fond. Oups. Tu peux voir à quel point c'est beau. OK, combien de temps cela a-t-il pris ? Cela n'a pas pris beaucoup de temps. Cela n'a pas demandé beaucoup d'efforts non plus. D'accord ? Oui, il y a eu quelques répétitions avec Ched GBT ici parce que cela nous donnait pas le bon résultat Mais, vous savez, c'est IE et, vous savez, il faut parfois du temps pour obtenir le résultat parfait. Jetons maintenant un coup d' œil à la sortie. Ici, il nous est remis un fichier. D'accord ? Ce fichier a ce code couleur vert, d'accord ? Ici, vous pouvez voir accepter et rejeter. Et ici aussi, vous pouvez voir accepter et rejeter. OK, donc cela vous donne l'option selon laquelle, hé, voici les modifications qu'il a apportées à ce fichier. D'accord. Ces modifications sont surlignées en vert, et vous pouvez soit les accepter. J'accepterai donc les modifications après avoir vu le résultat. J'aime bien le résultat. Je vais donc dire d'accepter, et vous pouvez voir que les modifications se trouvent ici. D'accord ? Voici donc ce que vous pouvez faire avec COSO, en gros Si vous souhaitez poser des questions spécifiques sur ce code, vous pouvez passer à ask More et vous pouvez dire : « Hey, pouvez-vous expliquer le code en moins de 500 mots ». Par exemple, vous pouvez poser des questions. Si vous voulez comprendre quelque chose, si vous n'êtes pas clair sur quelque chose, vous pouvez voir que cela m' explique tout. Vous pouvez voir la structure HTML, il y a une balise body, body l'utilise et vous pouvez voir comment fonctionne JavaScript et comment il fonctionne. L'utilisateur voit ce bouton, en cliquant dessus, change la couleur de fond en couleur aléatoire. Et nous avons utilisé le CSS HTML dans Gs dans un seul fichier pour plus de simplicité. Vous pouvez également lui demander d'avoir des fichiers séparés, c'est tout à fait votre choix. Je peux donc lire à ce sujet. Je peux dire, pouvez-vous séparer le HTML, le CSS et le S pour moi ? D'accord. Vous pouvez donc lui demander de le faire. Et c'est absolument ce qu'il va faire. Vous pouvez voir qu'il est séparé. D'accord. Je me rends compte que nous sommes en mode demande, donc cela ne change pas le code. D'accord ? Ce que je peux faire, c'est que je vais le copier, vous avez également une option ici. Appliquer au code HTML de l'index. Appliquer au code HTML à points d'index. Tu peux voir. Mais je ne vais pas le faire. Je vais parler du mode agent. Peux-tu, oups. C'est donc ce qui va arriver. Je vais juste copier cette invite ici. D'accord. Ou j'enverrai nouveau cette invite en mode agent à partir d'ici. D'accord ? Vous pouvez donc le faire également. Il va tout générer, et il va créer trois fichiers maintenant. L'un d'eux est le fichier HTML , que nous avons déjà. Ensuite, nous avons le fichier CSS et le fichier GS. Attendons un moment jusqu'à ce que la sortie soit générée. Parfois, cela peut prendre un certain temps. Maintenant, j'ai le résultat, et si vous faites défiler l'écran vers le haut , vous pouvez voir qu'il a donné tous les résultats, donc il a mis en évidence toutes les modifications qu' il a supprimées en rouge et les modifications qu'il a ajoutées en couleur verte. Vous pouvez voir que vous avez la possibilité de tout accepter ou de tout rejeter. Vous pouvez donc voir ici, vous pouvez voir le stick sauf le rejet. Et ce verrou à code, vous devez l'accepter et le rejeter. Ce bloc de code, vous devez l'accepter et le rejeter. Et vous avez ce bouton, tout accepter. Donc, si vous ne savez pas coder, accord, tout ce que vous avez à faire est de tout accepter. D'accord, parce que vous n' allez rien comprendre, et vous voulez passer du temps à le comprendre ou à l'apprendre. D'accord ? Donc, je minimise simplement cela, oups Donc, s'il vous arrive de fermer la fenêtre AI, vous pouvez simplement cliquer sur ce bouton AIPane en haut D'accord. Je vais simplement désactiver l'AIPane, mais vous pouvez voir ici que les fichiers ont été générés OK, vous pouvez voir comment ils ont été générés, et je vais juste voir Accepter tout dans la fenêtre de discussion elle-même, et vous pouvez voir comment les trois fichiers ont été créés. D'accord. Et tu n'as écrit aucun code. Si vous êtes frais, cela fonctionnera toujours de la même manière. Tu peux voir. Vous pouvez voir que cela fonctionne de la même manière. C'est bon. Maintenant, si vous voulez changer quoi que ce soit, si vous voulez ajouter quelque chose, vous pouvez itérer dessus si vous voulez ajouter quelque chose, vous pouvez itérer dessus et cela fera le travail à votre place Donc, oui, c'est la première application que nous avons créée. J'espère que cela a été génial. 6. Notre deuxième petite appli complexe Un blog Version 1: Bien, il est donc temps de passer à notre prochain projet Et ce que je vais faire, c'est ici, je suis dans le même dossier, je code. J'ai créé un nouveau chat en cliquant sur ce nouveau chat. Icône ici dans le curseur, et ici dans le HathPT, j'ai également créé un nouveau chat Cette application particulière que nous allons créer sera donc un peu plus complexe que la précédente. Et cela impliquerait quelques fonctionnalités. Donc, en gros, ce sera une application de blog, et je vais donner cette invite à HatGBT Je vais donc dire à JAGBR que je souhaite créer un bloc, d'accord, où je pourrais partager mes apprentissages quotidiens OK ? C'est mon objectif personnel qui explique pourquoi je le construis. Ajouter un nouveau bloc devrait être aussi simple que d'ajouter un nouveau fichier, d'accord ? Maintenant, je ne sais pas comment faire. Je dis juste à HatGBT qu'il faut ajouter un nouveau blog parce que j'en ajouterais un nouveau tous les jours, non ? Puisque je le fais pour créer et partager mes apprentissages quotidiens et documenter mes apprentissages quotidiens L'ajout d'un nouveau bloc devrait donc être aussi simple que la création d'un nouveau fichier. OK ? J'ai besoin de filtres de base utilisant des balises, donc de filtres simples. L'application doit être moderne et belle. OK ? Et je me sers du curseur. OK, accroche-toi. J' utilise le curseur pour le construire. Je n'ai aucune connaissance en programmation. C'est donc quelque chose que je dis explicitement à Chat JBD OK ? Maintenant, veuillez me faire part d'un plan avec lequel je pourrais travailler et le mettre en place immédiatement. De plus, j'ai indiqué où je me trouve Je suis donc dans le dossier en train de coder, et je veux que le projet réside dans un nouveau dossier à l'intérieur de ce dossier. OK. Ce sont donc les choses que j'ai mentionnées ici. OK. Maintenant, devrions-nous dire envoyer ? Disons envoyer et voyons quelle sortie nous obtenons ici. Je vais donc simplement étendre HTGBDoe puisque nous y travaillons. Vous pouvez donc voir ici. Voici le résumé des objectifs. Ici, il s'agit de reculer sur vos objectifs et de vous dire que, hé, c'est ce que j'ai compris Vous devez donc vérifier vos filtres de balises, ajouter un blog équivaut à un nouveau fichier, bloguer en tant que revenus quotidiens, design moderne et magnifique, design moderne et magnifique, construit à l'aide d'un curseur, aucune connaissance en codage. OK, donc hGBD l'a bien saisi. Maintenant, viens ici. vous informe et vous donne des informations sur la structure du projet. Ça dit Next J. Nous allons donc utiliser Next Js. OK. Ce n'est pas grave si vous ne savez pas quel est le prochain G, il vous indique simplement, et il vous indique également qu'il s'agit d'un framework Web moderne. Donc c'est tout à fait normal. Nous n'avons pas besoin de le savoir. Fichier MDX Maintenant, le fichier MDX est le fichier Markdown que l' application utiliserait Avons-nous dit à Chat JB que je voulais utiliser des fichiers MDX ? Non. Cela nous indique donc que nous utiliserons des fichiers MDX parce que nous voulons que les fonctionnalités soient très simples L'ajout d'un nouveau bloc doit être aussi simple que l'ajout d'un nouveau fichier. assez juste. Maintenant, utilisez le CSS pour de beaux styles. D'accord, il a donc suggéré d' utiliser le CSS tailwind Je ne sais pas ce qu'est le CSS tailwind. En fait, je sais, mais nous faisons semblant de ne pas le savoir et de ne pas écrire une seule ligne de code Donc, tailwind CSS, interface utilisateur CN dure pour les composants de l'interface utilisateur modernes, qui consiste en un filtrage fin et automatique l'aide de balises dans les matières premières OK ? C'est donc quelque chose qu'il a mentionné. Maintenant, il vous demande de créer un dossier de projet ici, d'accord ? Et il vous donne le plan complet ici, l' installation des dépendances et tout ça. OK. Maintenant, je ne veux pas écrire ce bout de code. Cela m'a donné un plan décent, mais je ne veux pas le faire. Donc, ce que je vais dire, c'est que je ne veux pas exécuter de commandes et écrire du code. Partagez avec moi des instructions que je peux donner un cours en fonction OK. Et je veux qu'il me donne une liste d'instructions, donc je ne vais me donner qu'une seule invite qui ferait la magie OK, donc je dis ça, donne-moi un message qui indiquerait au curseur de faire tout ça. Il me dit donc d'exécuter cette commande, il me dit de faire ceci, de faire cela. OK, c'est bon. Vous pouvez lire ceci. Il vous demande également de créer ce dossier. Vous pouvez le voir ici. D'accord, créez un dossier de projet, puis créez essentiellement cette application My Blog à l'aide de cette commande. Je ne veux pas faire ça. Donc, je vous conseille de ne me donner qu'une seule invite qui ferait toute la magie. Alors, accrochons-nous, et cela vous donne cette invite magique à saisir le curseur Cela vous indique donc de créer une application de blog professionnelle moderne en utilisant Next Js tailwind, CSS MDX Je souhaite ajouter de nouveaux articles de blog en plaçant simplement des fichiers MDX dans le dossier de publication OK. Et chaque article doit être accompagné d' un titre, date et de balises. OK, c'est bon. Sur la page d'accueil, affichez la liste de tous les articles avec des fiches triées d'abord par Actualités. Incluez un style magnifique en utilisant la typographie Tailwind. Partagez les composants de l'interface utilisateur CN et ajoutez un filtre de balises sur le dessus sous forme de boutons ou peut-être de puces pour filtrer les publications. C'est très bien. Ajoutez également un mode clair ou foncé. C'est quelque chose que nous n'avons pas demandé, mais qui a été ajouté. Euh, tout doit avoir l'air propre et minimal, adapté aux mobiles. Oh, donc un problème ici, c'est de penser que, d'accord, c'est adapté aux mobiles, donc c'est bon. Il s'agit d'une application Web. Ce n'est pas un problème. C'est une application Web adaptée aux mobiles. C' est ce que cela signifiait. Je pensais que c'était penser que nous voulions créer une application mobile, mais ce n'est pas le cas. Je vais donc venir ici. Laissez-nous le reconstituer ici. Il n'a donné aucune information sur le dossier ici, d'accord ? Je suppose donc que Cursor fera le travail en fonction de cela. OK, donc c'est fait. Et laissez-moi vous envoyer ici, peut-être. OK ? Voici donc l'invite. OK, je ne veux pas qu'il y ait une fonctionnalité supplémentaire ici. Chaque article doit donc figurer sur la page d'accueil, inclure un beau style, ajouter un remplisseur de balises Ajoutez également le mode lumière et basculez entre le mode DO. Je ne veux donc pas que cela passe en mode lumière et en mode Doc. Je vais juste le supprimer et je dirais set. Si vous le souhaitez, n'hésitez pas à l' inclure, mais je viens de le supprimer. Maintenant, nous allons attendre que toute la magie opère, d'accord ? J'ai donné cette invite au curseur. OK ? Maintenant, il ne va pas exécuter les commandes. D'accord, la création du projet implique l'exécution de commandes sur ma machine locale. Il ne va donc pas exécuter les commandes tout seul, donc je vais approuver les commandes. Je vais m'occuper de ça. C'est donc lui qui gère ça. Tu peux voir. Vous souhaitez utiliser TurboPac ? Je vais juste appuyer sur Entrée ou tu peux dire oui. OK ? Vous pouvez donc voir qu'il fonctionne maintenant ici. OK. Alors laissez-moi passer en plein écran, et laissez-moi développer cela un peu pour que nous puissions voir ce qui se passe. Vous pouvez voir ici si vous souhaitez installer le turbo pack. Alors j'ai dit, par ici. J'appuie simplement sur Entrée. OK ? Et vous pouvez tout voir ici. OK ? Il s'agit essentiellement d'exécuter la commande du terminal. Nous allons attendre un moment. OK. Il génère donc le prochain ensemble de code. Vous pouvez voir le dossier des blocs apparaître ici, n'est-ce pas ? Et il va bloquer le dossier et exécuter à nouveau certaines commandes. Donc je vais dire : « Courez, OK ». Et je vais vous dire de courir à nouveau. Il exécute quelques commandes. Je pense que cela installe automatiquement toutes les dépendances dont notre projet a besoin sur le pilote automatique OK, nous sommes juste en train d'approuver commandes et de ne rien faire, n'est-ce pas Donc c'est terminé, et je pense que cela génère quelques commandes supplémentaires. C'est donc approuver ça. Et je pense que cela génère une autre commande, exécutez. Donc je ne fais qu'exécuter des commandes ici. Procéder. Je vais juste dire « Enter ». OK. OK, que s'est-il passé ? OK. J'ai dit oui. Vous devez appuyer sur Y ici, puis vous pouvez voir qu'il installe la dépendance. Nous attendrons donc un moment, une fois que cela sera terminé. La commande est donc terminée et elle crée cette publication de répertoire pour que notre publication y réside. Je vais dire exécuter et le répertoire est créé. Attendons un peu ce qui se passe. OK. Vous pouvez donc voir qu'il fait du bon travail ici. Vous pouvez voir qu'il recherche des fichiers, répertorie des fichiers, fait tout le reste. Et vous pouvez voir tout cela se produire dans ce dossier de blocs. OK ? Je ne touche pas au code et je ne fais rien ici, mais nous pouvons simplement le voir comme ça pour voir ce qui se passe. OK, j'ai listé 15 objets par bloc, n'est-ce pas ? Donc, non, je ne pense pas que cela se produise. J'ai donc un AL. Nous allons exécuter cette commande. C'est tout à fait normal. C'est bon. Cela génère une commande supplémentaire. OK. Et je vais m'occuper de ça. OK. Nous allons donc attendre un moment. OK. Il attend une approbation. J'ai donné mon accord, non ? Quelle sorte d'accord, exécuter cette approbation pour exécuter ça. Je vais m'occuper de ça. OK. OK, donc au bout d'un moment, il a exécuté pas mal de commandes. Cela a changé beaucoup de code, puis j'ai enfin cette commande où elle me demande d'exécuter l'application. Donc, ce qu'il fait, c' est qu'il me dit de lancer un blog sur CD et d' exécuter NPM run deep OK ? Donc, de l'intérieur du dossier de blocage, il me demande de lancer l'application. Je dirais donc un terminal ouvert, et ils devraient idéalement démarrer l'application. Vous pouvez voir que l'application démarre. Je vais venir ici. À l'hôte local, laissez-nous actualiser. OK, nous avons donc notre blog ici. Tu peux le voir. Vous pouvez voir qu'il a également généré quelques publications. Vous pouvez voir Hello world. Vous pouvez cliquer sur Hello World. Tu peux y retourner. Vous pouvez passer à Suivant et choisir Conseils. Vous pouvez le voir, et vous pouvez filtrer, gros, Intro, je peux filtrer Bienvenue, choisissez ensuite les conseils. Selon vos besoins, vous pouvez ajouter d'autres blocs, et oui, c'est notre blog simple qui a été créé. Maintenant, si vous venez ici, nous avons ce dossier de blocs Win dans lequel nous avons une bonne pose. Donc, dans la publication, nous avons ce type de fichiers qui sont comme des fichiers Markdown. OK, MD Markdown. Et je vais simplement accepter tous les changements de code. OK ? Il s'agit donc du fichier Markdown que nous avons, et si vous souhaitez publier un nouveau blog, vous devez écrire le fichier Markdown comme OK ? Vous pouvez voir comment les fichiers ont été générés. OK, il s'agit donc de la version 1.0 de notre application, et je trouve que c'est une application très décente sans que nous n'écrivions aucune sorte de code, nous n'avons pas écrit une seule ligne de code, n'est-ce pas ? Et ce que nous avons fait, c'est que nous avons obtenu ce magnifique résultat ASE du blog. Cela peut être un très, très bon blog si vous voulez créer votre propre présence en ligne, y écrire des articles. C'est donc quelque chose que vous pouvez commencer. 7. Améliorer le codage itératif de notre application de blog: Après avoir publié la première version du blog, il est donc temps de lui demander d'ajouter de nouvelles fonctionnalités. Je vais donc vous montrer comment vous pouvez itérer sur le blog ou sur n'importe quel type de projet et y ajouter de nouvelles choses OK. Avant d' aller plus loin, je voudrais vous rappeler que nous travaillons à partir de ce projet de codage électronique, qui comprend ces deux projets. L'un est un bloc et l'autre est un IAP. Maintenant, ce dossier SRC est créé, je crois, par COSO lui-même, et il ne contient rien Donc, par erreur, cela a peut-être créé cela ici. Je vais le supprimer, ainsi que je vais le supprimer pour vous puissiez voir que ce dossier SRC est également supprimé. Nous n'avons plus que deux dossiers. Le blog est un projet sur lequel nous travaillons. Maintenant, ce que je recommande, c'est que parfois Curso peut être confus et si vous êtes dans un répertoire parent Donc, en ce moment, nous sommes dans un répertoire parent du projet de bloc, mais nous travaillons en fait sur le blog. Parfois, Curso peut être confus et commencer à créer des fichiers ici dans ce dossier et cela ne fera pas partie du projet de bloc. Ce que je vais faire, c'est changer et ouvrir rapidement le projet de bloc et passer à ce répertoire afin que Curso ne soit jamais confus Pour cela, je vais passer au dossier. Je vais dire dossier ouvert. Maintenant, lorsque vous ouvrez le dossier, vous allez voir cet exploseur comme celui-ci, rendez-vous sur le blog et dites simplement de sélectionner le pli OK ? Vous pouvez donc voir que l' ensemble du Curso va redémarrer, et maintenant vous êtes dans le projet de bloc, d'accord ? Et tu peux demander à Coso de le gérer. Hey, pouvez-vous m'aider à gérer ce projet ? OK ? Parce que si vous venez ici, nous avons redémarré Curso en fait, nous avons changé Donc ça va être fermé, non ? Je lui ai donc demandé de lancer l'application, mais cela m'a donné des étapes. OK ? Je ne veux donc pas de marches. Je vais le dire. Pouvez-vous m'aider à mener à bien ce projet ? Ne me donnez pas d'étapes, mais à vous de le faire, quelque chose comme ça. OK, il est donc assez clair que vous devez le faire. OK. Il me demande donc d'exécuter cette commande d'installation. Je vais juste dire, OK. Et puis il dira : Exécutez cette commande, NBMRunTab. OK. J'ai donc juste cliqué sur Ouvrir le terminal, et cette commande a juste été lancée, et maintenant vous devriez pouvoir voir le blog sans aucun problème OK, maintenant nous pouvons lui demander de traiter n'importe quoi, selon votre choix. Donc, tout d'abord, je vais le raconter. Je vais dire à Cursor d' ajouter une mise en page en grille ici. Il s'agit donc d'une mise en page de liste, et si vous ajoutez d'autres blocs, elle sera présentée sous forme de liste. Alors laissez-moi vous montrer en ajoutant plus de blocs, d'accord ? Je peux donc dire, s'il vous plaît, ajoutez plus de blocs, ajoutez Please au lieu de plus de blocs, je dirais, veuillez ajouter trois blocs et y inclure le format du code source. OK ? Nous verrons donc également comment fonctionne le formatage du code source, car il s' agit d'un bloc de codage que j'ai commencé. Je dis juste que c'est un bloc de codage. Vous pouvez créer un blog de recettes, vous pouvez créer, vous savez, un blog de partage d'images ou un blog de photographie selon ce que vous faites. OK ? Je viens de mentionner qu'il s'agit d'un blog de codage, et attendons qu'il ajoute les nouveaux blocs. Il dit donc qu' il lit des messages et deux autres fichiers, et vous pouvez voir où il génère de nouveaux fichiers ici. OK, à cause d'une erreur ici, il n'a pas pu lire ce fichier et il est passé à autre chose, donc je suppose que cela va le réparer pour nous. OK ? Nous pouvons donc attendre un moment. Je vais voir si nous assistons à des changements. Vous pouvez voir les changements ici, n'est-ce pas ? Donc, si vous allez voir les composants fonctionnels de React ici, vous pouvez voir que le code a été ajouté. Le code a été ajouté ici, non ? Voici à quoi ressemblera le formatage du code, vous pouvez le voir, d'accord ? Donc oui, vous pouvez également lui demander de s'améliorer. OK ? Donc tu peux le dire ici. C'est comme ça que ça se passe. Vous pouvez vous demander de changer de couleur ou quelque chose comme ça. Vous pouvez donc prendre la capture d'écran. Vous pouvez reconstituer la capture d'écran. OK. Vous pouvez voir que le code affiché n' est pas bien formaté , bien formaté Et le surlignage syntaxique n' est pas approprié. J'ai donc transmis l' image ici, et en la regardant, cela va nous aider à nous améliorer, n'est-ce pas ? Je vais donc accepter toutes les modifications apportées jusqu'à présent, et nous attendrons de savoir quel type de modifications il propose pour le moment. OK. Alors voilà, attendons. OK. Nous avons donc combien de blocs ? Nous avons cinq blocs prox Laissez-nous attendre ici. OK, nous allons donc attendre que tout le code soit terminé. Maintenant, regardez, quelles que soient les modifications apportées par CO, je les ai toutes acceptées jusqu'à présent, n'est-ce pas ? J'appuie sur le bouton «   Tout accepter » ici. Maintenant, si vous donnez cette commande à Cursor et à ce qu'elle génère maintenant, si vous ne voulez pas accepter, si vous voulez rejeter, vous pouvez appuyer sur le bouton de rejet ici. Il y aura donc un bouton de rejet qui apparaîtra une fois la génération terminée. OK ? Maintenant, une autre chose intéressante que je voudrais souligner, c'est la recherche. Vous pouvez voir qu'il recherche quelque chose sur le Web ici. OK, il cherche comment il peut mettre en évidence la syntaxe dans le prochain Gs 15. C'est ce qu'il va rechercher. Je vais donc vous dire de continuer. OK ? Il demandait la permission. OK. Nous attendrons que la solution complète soit mise en œuvre. Il me demande d'installer certaines commandes. Je l'ai accepté et il l' installera pour moi. Attendons que l' installation complète soit terminée. J'ai fait beaucoup de recherches, certaines commandes l'ont fait, puis il me demande. Cela me donne la solution dont nous avons besoin pour ajouter le traitement MDX et rehype Highlight Cela peut être une bibliothèque ou quelque chose comme ça et cela demande également que nous devions saisir. C'est ce que tu veux faire ? Je vais dire oui, s'il te plaît, fais ce que tu veux pour le faire fonctionner OK ? Donc je donne la permission, d'accord ? S'il vous plaît, faites ce dont il a besoin et mettez-le en place. Nous allons attendre un moment. L'application est donc déjà en cours d'exécution. Il a apporté quelques modifications et l'application est déjà en cours d'exécution, mais elle me donne toujours cette commande d'exécution. L'application s' exécute ici sur la gauche, donc je vais juste voir sauter ici, et là, elle me donne ce bouton « Tout accepter » car il a apporté de nombreuses modifications au code. Je ne vais pas accepter tous les changements ici. Pourquoi ? Parce que je vais d'abord tester l'application. Je vais venir ici. Il y a un problème, il semble que mon application ait commencé à générer des erreurs. Si vous y allez, allez ici il y a une erreur sur la page détaillée de la publication. Je vais le copier OK, ici, et je vais aussi le retranscrire ici. OK. Et je dirais que je comprends cela lorsque je visite cette URL. Je dois donc le donner à l'IE ou au cours la description de l'erreur et le moment où l'erreur se produit. OK ? C'est ce qui se passe lors de ma visite. Corrigez pour moi, s'il vous plaît. OK. Je te demande donc de réparer. Attendons maintenant que cela soit réparé. Maintenant, gardez à l'esprit que je n'ai accepté aucune des modifications. Ce bouton est toujours là, non ? Je n'ai pas accepté. Si tu veux. S'il n'est pas en mesure de générer ou s'il n'est pas en mesure improviser sur cette fonctionnalité en particulier, nous aurons la possibilité de rejeter toutes les modifications et nous reviendrons à l'état dans lequel se trouvait le projet avant de demander cette fonctionnalité C'est donc l'avantage de ne pas accepter tous les changements ici. Les modifications ont été appliquées, mais nous ne les avons pas acceptées. Donc, si vous venez ici, vous pouvez voir toutes ces couleurs ici , n'est-ce pas ? Donc, si vous pouviez accéder à ce fichier. Vous pouvez voir toutes ces choses vertes, ont été ajoutées et les choses rouges ont été supprimées. OK ? Voici donc les modifications qui sont apportées. Maintenant, au moment où je dis, sauf que ce truc rouge sera supprimé et que ce truc vert sera ajouté. C'est ce qu'il fait ici. OK ? Donc, d'accord, ça me donne cette option ici, d'accord ? Je vais donc choisir celui qui convient le mieux. Cela me donne deux options pour résoudre le problème. Je vous conseille de choisir celui qui vous convient le mieux et qui fonctionnera selon vous, allez-y. OK. Je vais donc simplement le mentionner et il commencera à le réparer. OK, il y a donc eu pas mal de changements ici, vous pouvez le voir, d'accord. Et il y a eu quelques itérations ici, et cela indique que l'erreur doit être corrigée Alors revenons en arrière. Et laissez-moi me rafraîchir. Permettez-moi de faire une petite mise à jour. Laisse-moi te rendre visite. OK, maintenant vous pouvez voir que la mise en évidence de la syntaxe est meilleure. Vous pouvez voir la couleur et tout est maintenant pratiquement rétabli. C'est donc la coloration basée sur des mots clés que vous pouvez voir ici. Même pour JavaScript, voyons voir, oui. C'est donc bien mieux. OK. Vous pouvez demander ce type d' améliorations et vous pouvez répéter ce que vous avez facturé Par exemple, demain, si je veux changer cette liste au format grille, je peux le demander. OK ? C'est quelque chose que nous pouvons faire. J'espère que cela a été utile, d'accord. Je mentionnerai également ici que parfois, il se peut que l' on ne trouve pas la bonne réponse dans son intégralité. Il y aurait un petit va-et-vient avec le curseur ou le modèle DAI qui est utilisé ici sous le capot Alors ne vous inquiétez pas, ne vous inquiétez pas. Il est important que vous fournissiez les bonnes informations à l'IA ici et elle fera le travail à votre place. Par exemple, si vous voyez une sorte de message d'erreur ici ou si vous ne voyez pas le résultat tout de suite, vous pouvez prendre la capture d'écran et la transmettre ici et vous pouvez dire : «   Bonjour, veuillez vérifier la capture d'écran ». C'est ce que je vois. Et c'est là que je vois que lorsque j'étais sur cette page en particulier, c'est une page, et s'il te plaît, corrige-la pour moi. Donnez autant d' informations que possible, quel que soit le message d'erreur que vous voyez, quel que soit le message que vous voyez, il fera le travail à votre place. OK. Donc, oui, j'espère que cela a été utile jusqu'à présent. 8. Ce qu'il faut savoir sur le curseur: Il est donc temps que je parle de certains des trucs et astuces que vous devez connaître lorsque vous travaillez avec le curseur Ces conseils et astuces peuvent vous aider à obtenir le résultat souhaité de manière meilleure et plus rapide. OK ? Donc, la première chose dont je voudrais parler, c'est le contexte ici, d'accord ? Vous pouvez désormais ajouter du contexte à votre chat. Contexte, c'est-à-dire donner une sorte de contexte au modèle AM utilisé, d'accord ? Donc ici, je peux parler de contexte, et je peux d'abord ajouter un dossier, afin de pouvoir ajouter tout ce bloc de dossiers. OK ? Donc, ce dossier contient mon code source ici. Je donne donc ce dossier entier comme contexte, et je peux taper le message et l'envoyer à Koso Cela peut donc permettre d'obtenir une meilleure réponse de la part de Cursor, car il sait que vous faites référence ou vous parlez à propos de ce trouve dans ce pli en particulier. OK ? C'est donc une question de contexte. Vous pouvez ajouter différents types de contexte. Vous pouvez ajouter des fichiers spécifiques si vous le souhaitez. Ainsi, dans le blog, vous pouvez également ajouter un fichier particulier si vous le souhaitez. Ou vous pouvez ajouter une sorte de documentation ici, d' accord, ou vous pouvez ajouter n'importe quelle sorte de discussions passées. Ainsi, quelles que soient les discussions que vous avez eues par le passé, vous pouvez également les ajouter en tant que contexte. OK. Il est donc possible que dans les discussions précédentes, Cursor vous ait donné quelque chose que vous attendiez maintenant, et qu'il ne soit pas en mesure de générer la même chose maintenant. Vous pouvez donc donner le contexte de votre conversation passée, puis poser les questions à Cursor. Vous pouvez ajouter Git en tant que terminaux contextuels. Donc, si vous utilisez plusieurs terminaux ici et si vous recevez une erreur sur l'un des terminaux, vous pouvez ajouter ce terminal comme contexte. Vous pouvez ajouter n'importe quoi depuis le Web. Vous pouvez donc sélectionner le Web ici et vous pouvez simplement ajouter une URL ou quelque chose comme ça, et Cursor va lire cette URL pour vous. D'accord, en plus, si vous utilisez une sorte de bibliothèque ou de framework, par exemple, ici, lorsque nous les avons utilisés, nous avons vu des noms tels que tailwind et Next has, n'est-ce pas Vous pouvez donc ajouter documentation officielle de ces bibliothèques. Ici, par exemple, nous allons parler de vent arrière, donc vous pouvez dire vent arrière Et vous pouvez le voir ici, tailwind CSS official. Il s'agit donc de la documentation officielle qui existe avec le curseur. Vous pouvez donc simplement l'ajouter dans la poursuite suivante que nous utilisons également. Je dirais que le prochain J que vous pourrez voir l'année prochaine est officiel. Vous ajoutez donc la documentation, ces deux documentations ici pour que le curseur fasse référence. Vous pouvez voir que si vous cliquez dessus, c'est le lien qui sera ajouté aux discussions CSS Et ici, vous pouvez voir nexts.org slash TOC. Vous pouvez accéder à cette documentation officielle ici en cliquant sur le lien et en l'ouvrant dans le navigateur. OK ? Voici donc comment vous pouvez améliorer l'interface utilisateur. plus, vous pouvez ajouter des éléments tels que des images et tout cela si vous rencontrez des erreurs. OK ? Il s' agit donc d'ajouter du contexte. Je voudrais parler des paramètres, certains paramètres ici. Donc, si vous allez ici pour un fichier, dans le fichier, vous aurez des préférences, et dans les préférences, vous aurez les paramètres du curseur. OK ? Alors laisse-moi cacher cette AIP de bascule ici, Voici quelques paramètres que vous pouvez voir et parcourir pour le curseur. OK ? Vous pouvez jouer avec certains paramètres. L'un des paramètres importants dont je voudrais parler est celui des règles ici. Qu'est-ce que les règles ? Vous pouvez donc voir les règles ici. Et si vous cliquez sur cette icône à propos, le discours s'ouvrira pour vous. OK ? Quelles sont donc les règles ? La règle n'est donc rien d'autre qu'une sorte de règles que vous souhaitez mentionner ou une sorte de directives que vous souhaitez mentionner. Vous pouvez donc voir ici. Oh, d'accord, Rules. Si je clique ici sur les règles, tu peux voir. Il ne s'est donc pas chargé correctement, j'ai donc dû cliquer sur les règles. Ainsi, avec les règles, vous pouvez contrôler le comportement du modèle d' agent à l'aide d' instructions réutilisables et limitées. Vous pouvez donc ajouter des règles comme, par exemple, me donner réponses concises, d'accord, quelque chose comme ça. Ou si vous êtes enclin à utiliser un framework particulier. Vous pouvez donc ajouter une règle disant que, hé, utilisez toujours Next Chase pour tous mes projets, quelque chose comme ça. Et il existe plusieurs types de règles, des règles basées sur des projets, des règles basées sur l'utilisateur, des mémoires ou des règles de curseur. OK ? Vous pouvez donc mentionner tous ces types de règles ici. Vous pouvez donc voir un exemple ici, d'accord ? Voilà, vous avez ajouté un paramétrage. C'est ainsi que la règle est appliquée ici. C'est ce qu'il dit. Je veux vous montrer un exemple de règles ici. OK, alors quand je fais défiler la page vers le bas, je peux voir quelques exemples de règles. Vous pouvez le voir ici. C'est l'une des règles. Ainsi, lorsque vous travaillez dans un répertoire de composants, utilisez toujours Tailwind pour le style, frame of motion pour les animations et suivez notre convention de dénomination des composants Vous pouvez voir que c'est l'une des règles. Vous pouvez donc le copier-coller dans votre page de règles. C'est pour le répertoire ABI. Vous pouvez voir le code standard ici. Donc, en gros, toutes ces règles ne sont rien, mais vous définissez le comportement du modèle AIM et vous dites que c'est ce à quoi on s'attend toujours. Ainsi, plutôt que de saisir et de communiquer le modèle d'IA à chaque fois que vous posez des questions, vous pouvez définir les règles globales ici pour l'agent. OK. Vous pouvez donc voir que vous pouvez définir des règles basées sur les utilisateurs, d'accord ? Vous pouvez gérer vos règles utilisateur personnalisées ici. Vous pouvez définir des règles en fonction des projets ici, d'accord. Et oui, cela peut t'aider à faire beaucoup de choses, d'accord ? Et vous pouvez également ajouter quelques souvenirs ici. Vous pouvez donc voir différents souvenirs ici. OK ? Et vous pouvez voir quels souvenirs ne sont rien que les informations dont l'agent se souvient à votre sujet. Vous pouvez donc également le gérer à partir d'ici. Si vous souhaitez supprimer un élément de la mémoire, vous pouvez le faire supprimer. OK. Voici donc quelques points importants que vous devez prendre en compte lorsque vous travaillez avec Cursor et qui peuvent vous aider à obtenir une meilleure réponse avec ce modèle d'IA. 9. Conclusion du cours: Nous voici arrivés à la fin de notre voyage dans le monde du codage par curseur. Tout au long du cours, nous avons exploré comment créer des expériences numériques puissantes sans codage traditionnel, simplement en collaborant avec des outils d'IE tels que le curseur. Nous avons commencé par comprendre ce qu'est le codage numérique, une façon nouvelle et intuitive de créer qui donne la priorité à la créativité, l'intention et à la collaboration humaine avec l' IE Nous avons vu comment le curseur vous permet de créer votre premier effort d'application. Utiliser le langage naturel et les instructions. Ensuite, nous sommes allés plus loin en créant un site de blocs complet, le tout sans avoir besoin d'une formation en programmation. Tout au long de ce cours, vous avez pu constater quel point il peut être simple à quel point il peut être simple de donner vie à des idées avec l'aide de l'IE. n'y a aucune erreur de syntaxe, aucune installation, aucune expérience préalable, juste de la curiosité et de la vision. Vous avez appris à faire confiance au processus, communiquer avec votre assistant IE et à créer de véritables projets en toute simplicité. Mais n'oubliez pas que ce n'est que le début. L'avenir de la création réside dans des outils tels que le curseur, et plus vous expérimentez, plus vous deviendrez confiant et innovant. Continuez donc à explorer, continuez à vous demander et n'ayez pas peur de repousser les limites de ce que vous pensez pouvoir construire Merci de m'avoir rejoint dans ce voyage. J'espère que ce cours a été instructif, stimulant et surtout une introduction amusante aux possibilités du développement de l'IA sans code ce cours, dans la section des projets, vous trouverez un projet de classe, que je vous encourage vivement à compléter et à partager avec l'ensemble de la classe. Joyeux bâtiment.