Invite. Créer. Navire. :: L'IA pour les développeurs Web. Créez x3 fois plus vite.

1. Bande-annonce: Vous êtes développeur web ? Oui, alors laisse-moi te demander quelque chose. Est-ce que le codage semble parfois trop lent ? Passez-vous des heures à Stack or Flow ? Vous voulez construire plus vite, beaucoup plus vite ? Oui Alors j'ai quelque chose pour toi. Découvrez Prompt, Build Ship, une intelligence artificielle pour les développeurs Web, conçue trois fois plus rapidement Un nouveau cours conçu pour vous aider à coder plus rapidement. Dans ce cours, je vais vous enseigner les bases solides de l'IA. Cinq manières dont l'IA peut vous aider Les types d'outils de codage AI. Nous allons créer une petite application Web en suivant le flux de travail de développement Web avec l'IA. De plus, vous devrez relever deux défis dans lesquels vous créerez vous-même des applications Web. C'est pour qui ? Développeurs Web de tous niveaux de compétence. Toute personne qui écrit du code même en dehors de webdv. Imaginez que vous passiez moins de temps à vous concentrer sur des bugs et plus de temps à construire. Ce cours vous aidera à expédier votre projet trois fois plus rapidement. enseigne l'IA aux développeurs Web depuis 2023, et je peux affirmer avec certitude que si vous n'utilisez pas l'IA dans votre flux de travail quotidien, vous êtes en retard Mais ne t'inquiète pas. Je vais tout vous montrer et vous apprendre tout ce dont vous avez besoin pour avancer. Je serais heureuse de vous voir suivre mon cours. 2. Module 2 : Intro: Bonjour, et bienvenue dans le module numéro deux. Dans ce module, nous allons explorer les points suivants. Nous allons commencer par les bases de l'IA générative et son fonctionnement. Ensuite, nous passerons aux IA à usage général les plus populaires. Nous discuterons en détail de chacun d'entre eux. Ensuite, nous passerons aux quatre modes d' interaction avec l'IA, et nous terminerons avec une architecture rapide. Alors allons-y et commençons. 3. Leçon 1 : Bonjour, et bienvenue à la leçon numéro un. Dans cette leçon, nous allons parler fonctionnement réel du Général VI. Et bien sûr, nous allons nous concentrer sur un VIi général basé sur le texte, car le code est du texte, d'accord ? Eh bien, laissez-moi vous montrer quelques diapositives tirées de l' explication officielle de Google. Comme l'explique Google, il en va de même pour les modèles de langage génératifs, le texte. Ces modèles découvrent les modèles de la langue grâce aux données d'entraînement. Cela signifie donc que l'ingénieur alimente la machine de très gros téraoctets de données texte Et puis la machine apprend sur ces gros morceaux de texte. Et les réponses qui proviennent de cette machine sont en fait prédites, non pas calculées par une formule quelconque, mais plutôt prédites. Encore une fois, permettez-moi d' insister sur ce point. C'est une prédiction, mais pas un calcul exact. Encore une fois, l' exemple de Google. Voyons donc cette phrase. Je prépare un sandwich au beurre de cacahuète, et comme vous pouvez le constater, il existe différentes options, variantes comme la gelée, la confiture , la banane, etc. Cela signifie donc que lorsque vous demandez cette invite à la machine, vous pouvez obtenir n'importe laquelle de ces réponses. C'est important C'est le truc. D'accord ? Permettez-moi donc de vous montrer un autre exemple. J'ai demandé à Chat GPT de répertorier toutes les variantes auxquelles la personne peut répondre Bonjour Et comme vous pouvez le constater, nous avons des réponses occasionnelles, un, deux, trois, quatre, cinq, six, sept, huit. Nous avons des réponses amicales, formelles, drôles, énergiques, sarcastiques, brèves Et comme vous pouvez le constater, plusieurs dizaines de réponses différentes. Comme vous pouvez le constater, si vous demandez à un texte de générer A avec bonjour, vous pourriez obtenir certaines de ces réponses. Encore une fois, il ne s'agit pas d'un calcul, mais d'une prédiction. Nous avons donc différentes variantes que vous pouvez obtenir. D'accord, alors pourquoi il est important de comprendre, je veux dire, le principe fondamental du fonctionnement des modèles linguistiques générateurs de langage Parce que plus tard, lorsque vous gagnerez en expérience, vous pourrez potentiellement créer votre propre IA génératrice de langage partir de votre ensemble de données personnalisé. Pourquoi voudrais-tu faire quelque chose comme ça ? Parce que vous pourriez créer un forum de discussion pour une entreprise ou peut-être aimeriez-vous en créer une, par exemple, une application Web de génération de code pour vous-même, pour laquelle vous aimeriez produire des réponses comme Nx Js, NextGS ou C plus plus, et vous aimeriez que les réponses soient aussi précises que possible Donc, dans ce cas, vous devez entraîner votre machine avec un ensemble de données spécifique pour ce domaine, je dirais. Ce serait donc comme des documentations pour le langage, le langage de programmation Cela peut être comme des livres, des livres sur cette langue et, vous savez, des exemples. Il est donc important de comprendre. 4. Leçon 2 : Bonjour Bienvenue à la leçon numéro deux. Dans cette leçon, nous allons explorer les IA à usage général les plus populaires. Par objectif général, je veux dire que ces IA peuvent résoudre différents types de tâches et pas seulement celles de codage. Dans le premier et le plus célèbre, il y a le chat GPT, et le Chat GPT était probablement le premier sur le marché, et c'est pourquoi il est si Alors bienvenue sur le chat GPT. Au centre, nous avons généralement le champ de saisie dans lequel nous pouvons saisir notre invite, puis quelques éléments supplémentaires, tels que télécharger des fichiers, effectuer des recherches sur le Web, des modèles de raisonnement pour informations plus avancées sur l'utilisation du mode vocal pour la reconnaissance vocale. Essayons donc quelque chose avec le chat GPT. Nous allons donc demander à HatGPT de coder le passe-partout HTML de base. Et comme vous pouvez le constater, il a fait son travail avec succès. Nous voyons donc le code HTML de base, et nous pouvons le copier si nous en avons besoin Et il donne aussi généralement quelques commentaires là-bas. cloud est connu pour être la meilleure option pour les développeurs Web et autres professionnels du codage, et de nombreux assistants de codage et éditeurs de code basés sur l'IA utilisent le cloud sous le capot. Nous sommes donc dans le Cloud, et comme vous pouvez le constater, encore une fois, l'interface utilisateur ressemble beaucoup à l'AGBT Nous avons le champ de saisie au centre. Ensuite, vous pouvez, par exemple, choisir le modèle. Voici les modèles gratuits, les modèles pro. Vous pouvez choisir le style de langue. Comme je l'ai déjà mentionné, c'est donc le meilleur choix pour les développeurs Web, et c'est pourquoi ils ont intégré le Github Vous pouvez donc connecter votre compte Github ici, et il fera probablement certaines choses avec votre code depuis votre Github Encore une fois, vous pouvez faire une capture d'écran ou ajouter un fichier. Voyons donc comment fonctionne le cloud. Comme vous pouvez le voir, nous avons demandé à Claude de lister les propriétés de texte CSS. Et vous avez probablement remarqué que c'est un peu différent du chapeau GBT Oui, c'est exact parce que Claude nous donne ce que l' on appelle des artefacts, et ce sont en quelque sorte des documents. Et comme vous pouvez le voir dans ce document, nous avons une très bonne réponse car il contient quelques groupements pour le plaisir, formatage du texte, les ombres, etc., et un petit exemple que, bien sûr, vous pouvez copier comme ça C'était donc Claude. Passons à la suivante. Le numéro trois est donc Gémeaux. Google Gemini a été développé et produit par Google. Bienvenue dans les Gémeaux et comme vous pouvez le constater à nouveau, nous avons le champ de saisie et éléments supplémentaires tels que l'ajout de fichiers Vous pouvez l'ajouter depuis Google Drive, depuis un ordinateur local, et simplement une image. Et bien sûr, vous pouvez utiliser votre microphone pour la reconnaissance vocale. Alors allons-y tout de suite. Nous avons donc demandé à Gemini de nous expliquer s' il s'agissait d'une autre construction en JavaScript. Voyons voir. Comme vous pouvez le constater, c'est du raisonnement, c'est de la réflexion, et nous avons l' explication de base ici. Nous avons le code de base, que nous pouvons copier. Et l'une des choses que fait Gemini, c'est qu'il vous donne parfois le lien vers l'article où il a acquis ses connaissances Donc, plus d' exemples et encore d'autres exemples. Passons donc à la suivante. Et les deux derniers que nous allons examiner sont un Deep Sik. deep sik a été inventé il y a quelques mois, il a été inventé en Chine, et il ressemble beaucoup au GPT, mais il est connu pour ses API gratuites Comme vous pouvez le voir, cela ressemble beaucoup à un Chat GPT, où nous avons la zone de saisie, le modèle DepthKrasoning, la recherche sur le Web et les fichiers Alors écrivons-le dès maintenant. Nous avons donc demandé Deepsk de répertorier les frameworks Jazz les plus populaires. Voyons voir. Cela a donc fonctionné, mais comme vous l'avez probablement remarqué, il a fallu un certain temps, un peu plus de temps que les autres outils pour réellement donner la réponse, mais c'est quand même assez bon. Conclusion. La meilleure solution pour l'IA à usage général qui inclut le codage est donc le HAGPT Pourquoi ? Parce qu'il contient un nombre illimité de messages, que la qualité des réponses et la rapidité sont plutôt bonnes. Et pour ce qui est du codage, le caillot est la solution. Gardez à l'esprit qu'il comporte certaines limites en termes de nombre de messages que vous pouvez utiliser. 5. Leçon 3 : Bonjour, et bienvenue à la leçon numéro trois. Dans cette leçon, nous allons parler de quatre modes d' interaction avec l'IA. Par interaction, je veux simplement dire comment vous pouvez transmettre vos informations, votre bal de fin d'année à l'IA. Donc, le premier et probablement le moyen le plus évident, le plus populaire de parler avec l'IA, interagir avec l'IA est le texte. Nous l'avons déjà vu lorsque vous écrivez simplement quelque chose, que vous demandez quelque chose et que l'IA vous répond. Jetons donc un coup d'œil. Nous sommes donc dans le chat, GPT, l'interface utilisateur, et encore une fois, faisons une simple invite Nous avons donc demandé les choses suivantes. Expliquez ce que le CSS mentionne à l'aide d'exemples. Comme vous pouvez le voir, le ha GPT a commencé à répondre. Voici donc la définition. Nous avons maintenant l'animation CSS de base, l' exemple de changement de couleur avec du code. Explication. Deuxième exemple avec élément mobile et même un troisième exemple. Et à la fin, comme vous pouvez le constater, nous obtenons toujours les propriétés d'animation CSS, comme un tableau avec une description de chaque propriété. La deuxième façon d' interagir avec l'IA est donc l'audio. Pour ce faire, vous devez avoir un micro sur votre téléphone ou sur votre ordinateur. Nous sommes sur le chat, GPT, et comme vous pouvez le voir, cette icône utilise le mode vocal Alors, cliquons. Et pour le moment, comme vous pouvez le voir, l'icône de notre micro est désactivée. Nous sommes donc simplement en mode audio. Alors allons-le. Bonjour, Chad GBT Salut, comment ça va ? Bien. Merci. Pourriez-vous expliquer la différence entre React JS et Next Gs en termes simples. Bien entendu, ReactJS est une bibliothèque JavaScript permettant de créer des interfaces utilisateur, principalement pour des applications d'une seule page Il vous aide à créer des composants qui gèrent leur propre état. NextJS, quant à lui, est un framework construit sur React Il ajoute des fonctionnalités telles que le rendu côté serveur, génération de sites statiques et un routage simplifié, ce qui le rend plus adapté à la création d'applications Web prêtes pour la production. ReactJS est donc comme la base, et NextS est comme une boîte à outils améliorée construite dessus Merci beaucoup. Tu es le bienvenu. Si vous avez d'autres questions, n' hésitez pas à les poser. Comme vous pouvez le constater, nous avons juste essayé de parler par chat, GPT, et nous avons même obtenu de courts résultats avec notre discours et notre réponse Même si vous pouvez utiliser le canal audio, il n'est pas très adapté au codage. La prochaine façon dont nous pouvons interagir avec l'IE est donc l'image. Cela signifie que vous pouvez télécharger une image NAI et demander ou demander à faire quelque chose Cette fois, nous utiliserons donc le Cloud. C'est bon. Nous allons donc télécharger une image qui ressemble à ceci. Comme vous pouvez le voir, c'est comme un simple formulaire de contact. Nous venons donc de télécharger le fichier image en utilisant cette icône, écrivez ici. Cloud a maintenant cette image. Nous devons donc écrire l'invite. L'invite est donc de coder le formulaire sur l'image que j'ai téléchargée. Alors voyons voir. Comme vous pouvez le voir, l'artefact de code a démarré avec les classes HDL et Tail Wing CSS Et vous avez également le contenu sous forme d'image de formulaire. Ça ressemble à ça. Essayons donc autre chose. Passons au Cloud. J'ai demandé à Cloud de créer un aperçu de ce formulaire. Comme vous pouvez le constater, Cloud dispose de ce mode de prévisualisation, mode code et de ce mode de prévisualisation. Et en mode aperçu, vous pouvez parfois voir le composant prêt en action. Encore une fois, ce n'est pas le cas, cela ne fonctionne pas à chaque fois, mais vous pouvez parfois demander à Cloud, par exemple, pouvez-vous créer un aperçu de ce formulaire ? Parfois, comme vous pouvez le voir, il le fait presque automatiquement, car il s'agit du code de réaction et lorsque nous essayons de le faire, uniquement avec le format HTML et CSS, cela ne fonctionnait pas vraiment, mais avec un composant React, vous pouviez parfois avoir un aperçu de votre résultat final. Et la dernière façon de demander à l'IE est une chaîne vidéo. Auparavant, nous téléchargions l'image, et bien sûr, vous pouvez télécharger la vidéo, mais le fait est que ce n'est pas méthode de demande très populaire en ce moment, car, bien sûr, comme vous le savez probablement, c'est une méthode très coûteuse d' utiliser une IA, mais c'est Par exemple, vous pouvez télécharger la vidéo et demander IA spécialisée dans l'IA d'effectuer des opérations vidéo, vous savez, pour recréer la vidéo avec quelques modifications ou prendre le héros principal de la vidéo et créer quelque chose, vous savez, en utilisant ce personnage Ce n'est pas si courant dans le monde du codage. Donc, en conclusion, mon ami, quel est le meilleur moyen de coder ? Quel est le meilleur moyen ? Bien sûr, il s'agit de texte et parfois d'images. 6. Leçon 4: Bonjour, et bienvenue dans la leçon numéro quatre sur l'architecture rapide. Dans cette leçon, je vais vous expliquer les bases d'une conception rapide et d' une architecture rapide L'invite de base comprend trois parties. Le premier est la tâche. La deuxième partie est consacrée au contexte, et la troisième est un exemple. La tâche est une partie obligatoire de l'invite, car sans la tâche, l'ensemble de l'invite est inutile. Et l'exemple d' invite consistant uniquement en la tâche pourrait s'appeler fruits. Et il vous nommera tous les fruits comme la pomme, la poire, la banane. Cela pourrait prendre, vous savez, des fruits des pays du nord, des pays du sud, des pays africains, des pays européens, l'Australie et de la Nouvelle-Zélande, par exemple. Il y aura donc toutes sortes de fruits. Maintenant, la deuxième partie est un contexte, et comme vous pouvez le voir, je le considère comme une bonne chose à avoir. Pourquoi ? Parce que ça donne une direction. Ici, on parle de tropiques. Alors nommez les fruits, les fruits tropicaux. Maintenant, votre invite comporte certaines contraintes dans une certaine direction. Et dans ce cas, IA ne nommera que les fruits considérés comme tropicaux, non ? Et la troisième partie est exemplaire. Et comme vous pouvez le constater, il s'agit d'une pièce optionnelle. Cela signifie que sans exemple, c'est quand même un bon bal de fin d'année, mais un exemple pourrait permettre de se concentrer un peu plus Et nous lui donnons ici un exemple, exemple spécifique comme une mangue. Combiné va sonner comme un nom de fruits, des fruits tropicaux. La mangue en est un exemple. Voici donc mes évaluations personnelles. La tâche vaut donc 50 % contre 100 pour l'importance. Le contexte correspond à 40, et l'exemplaire à 10 % Voyons donc un autre exemple. La tâche consiste donc à construire une ville. Bien entendu, l'IA va vous construire n'importe quel type de ville, par exemple quelque chose à partir de villes existantes, quelque chose de vieilles villes anciennes qui ne sont plus présentées, ou une ville imaginaire issue de sa propre imagination ou d'un jeu ou d'un livre. Et maintenant, dans le contexte de la ville, par exemple, on pourrait dire qu'il devrait y avoir de nombreux arbres, climat nuageux, pluvieux et frais. Et maintenant, bien sûr, nous n'allons pas voir des villes de pays très chauds, mais d'autres de pays très froids. Et ici, nous pourrions même ajouter que la ville devrait ressembler à une vraie ville de notre planète. Un exemple, Seattle, et maintenant elle a, vous savez, direction précise à suivre Prenons donc un autre exemple du monde du codage. La tâche pourrait donc consister à créer un formulaire. Nous comprenons maintenant que le formulaire peut être très long ou très court. Il peut être stylisé de différentes manières, différentes polices, couleurs, tailles. En fonction de notre contexte, nous avons défini certaines contraintes. Par exemple, nous devrions avoir un CSS Tailwind. police doit être composée de fenêtres contextuelles, les couleurs du logo Google et les champs doivent être le nom, l'e-mail et le fo. Et maintenant, nous ajoutons également un exemple que nous dirigeons en quelque sorte Aish afin qu'il puisse s' inspirer de l' image que nous avons téléchargée Je pense donc, mes amis, que vous savez maintenant comment concevoir un prompt. Et encore une fois, vous pouvez l'utiliser non seulement dans le codage, mais aussi dans votre vie réelle et dans différents types de tâches. 7. Exercice: Ce style de pratique. Et pour ce module, vous aurez une très petite tâche, qui consiste à créer une invite simple en utilisant l'architecture appropriée, puis à tester cette invite quatre sites différents que nous avons abordés Le but de cette tâche est donc de comprendre les mécanismes de l'incitation. Donc, pour vous faciliter un peu la tâche, laissez-moi décomposer la tâche en petites étapes La première étape consiste donc à créer une invite simple, et il n'est pas nécessaire de coder, même si le codage sera un peu meilleur car c'est toujours le cours de codage. La deuxième étape consiste à appliquer la règle, le 504010, que nous avons abordée dans les leçons précédentes Souvenez-vous de la tâche, du contexte, de l'exemple, et à l'étape numéro trois, vous accédez aux différentes IA Encore une fois, Chad, ZEPT, Cloud Deep Seek et Gemini essayez d'utiliser cette invite et de voir le résultat par vous-même Encore une fois, dans ce module, notre objectif est de comprendre les mécanismes, afin que vous vous sentiez à l'aise avec l'IA en général. Alors, bonne chance. 8. Module 2 : Résumé: Félicitations pour avoir terminé le module numéro deux. Dans cette leçon, vous avez appris des très importantes, telles que GNAIFoundations, et son fonctionnement, ainsi que des IA à usage général populaires telles que Claude, HATGBT Vous avez également appris les quatre manières dont vous pouvez interagir avec l'IA. Cela signifie du texte, de l'audio, de l'image et de la vidéo. Enfin, il y a une architecture rapide. Vous avez donc appris à bien concevoir et créer rapidement pour obtenir les meilleurs résultats adaptés à votre projet. Encore une fois, félicitations et à bientôt dans le prochain module. 9. Module 3 : Intro: Bonjour, et bienvenue dans le module numéro trois, l'IA générative dans un processus de codage. Donc, mes amis, le fonds commence maintenant parce que nous entrons dans la zone de codage. Bienvenue. Dans le module numéro deux, vous avez abordé les bases essentielles et très importantes de l'utilisation de l'IA générative. Mais maintenant, nous allons passer à la partie médiane. Dans le module numéro trois, nous commencerons par discuter rôle que joue le JNAI dans un processus de développement Web Ensuite, nous verrons les meilleurs aspects de l'IA et les points faibles de l'IA. Enfin, la grande section du module sera consacrée à la présentation des outils et spécifiquement à la génération de code. Nous examinerons les chats à usage général pour le codage, chats spécialisés pour le développement Web, assistants de codage et les éditeurs de code AI. Alors allons-y. 10. Leçon 1 : Bienvenue à la leçon numéro un. Dans cette leçon, nous allons donc explorer rôle que joue le GNAI dans un processus de développement Web Nous verrons quelques cas, des exemples et des choses que vous devez comprendre. Donc, le premier et très important fait que vous devez comprendre est que IA est un ajout agréable à votre processus. Ce n'est pas une chose obligatoire que vous devez avoir. Pourquoi ? Parce que vous pouvez toujours écrire du code sans IA, comme nous le faisons depuis toutes ces années ? C'est important parce que si vous comprenez cela, vous serez parfaitement à l'abri du FOMO, la peur de passer à côté d'une occasion, car ces derniers jours et mois, nous pouvons voir presque tous les jours de nouvelles IA entrer en scène, et nous nous disons parfois : Oh, je dois probablement l'utiliser parce qu'elle va faire quelque chose Oui, probablement, mais il est quand même important de comprendre que c'est bien d'avoir un ajout. Maintenant, nous avons la question. Quel est donc son rôle dans notre processus, quoi cela nous aide-t-il exactement ? Et la réponse est simple. Cela ne fait qu'économiser de l'énergie et du temps. C'est ça. Cela permet d'économiser. Il ne s'agit pas d'ajouter quelque chose de nouveau ou de nécessaire. Cela ne fait qu'économiser de l'énergie et du temps. Oui, cela nous fait réfléchir. Il écrit du code pour nous. Oui, c'est le cas. Mais nous pouvons tout de même le faire nous-mêmes. Encore une fois, je vais insister sur ce point parce que c'est important. Cela ne fait que nous aider à écrire notre code plus rapidement. Non nous remplace. Faisons donc quelques observations. Donc, avant l'ère de l'IA, en tant que développeurs codeurs, nous cherchions les réponses manuellement Nous utilisions donc Google, accédons au stack orflow, lisions des articles, regardions des vidéos YouTube, puis nous résumions ces informations et essayions de mettre en œuvre notre projet Donc, en gros, nous réfléchissions puis écririons du code. Alors, qu'est-ce qui a changé ? À l'ère de l'IA, nous demandons maintenant à l'IA de trouver une solution. Supposons donc que nous ayons cette application, nous aimerions cette fonctionnalité. Comment devons-nous nous y prendre ? Et puis bien sûr, nous donnons des fichiers AIO ou de la documentation d'une bibliothèque tierce et nous demandons de nous donner un code. Donc, en gros, pour résumer, nous vous demandons maintenant de vérifier le code. Avant l'IA, nous pensions et écrivions, et maintenant nous demandons et vérifions. Voyons donc ici un fait intéressant. Comme vous pouvez le voir, c'est du PDG de Google. Il affirme que plus de 25 % du nouveau code de Google est désormais généré par l'IA. Et mes amis, il est très important de comprendre, car c'est la tendance, c'est la direction que prend l'industrie. Et pour être un développeur performant à l'ère moderne, nous devons nous inscrire dans cette direction, participer à cette tendance. Et ce que cela signifie pour nous. Cela signifie donc que le rythme du travail s'est accéléré. Encore une fois, il est important de comprendre que c'est la vitesse qui a augmenté, non les éléments fondamentaux. Encore une fois, comme je l'ai déjà dit, nous pouvons écrire du code nous-mêmes, mais l'IA nous aide à l' écrire plus rapidement, n'est-ce pas ? En ces temps, il est encore plus important d'avoir des compétences de base en codage. Pourquoi ? Parce que oui, à première vue, IA peut créer de nouvelles fonctionnalités, déboguer quelque chose Mais si nous ne comprenons pas exactement ce que l'IA a fait, elle devient inutile. Mais si vous avez de solides compétences en codage, les compétences de base sont fondamentales. Ainsi, vous voyez vous-même les liens entre les éléments, vous savez, les meilleures pratiques sans IA, puis lorsque l'IA vous fournit du code, vous pouvez vérifier ce code et trouver des parties du code moins parfaites, de meilleures solutions que vous pouvez proposer. C'est le truc. Il faut donc d' abord acquérir de solides compétences de base en matière de codage. Nous devons donc d'abord maîtriser les compétences de codage. Ensuite, nous passons au codage avec l'IA. C'est important, mes amis. Si vous voulez être un bon développeur, codeur, pour résumer cette leçon. Vous êtes le leader et l' IA est votre copilote. Vous pouvez toujours être un développeur très productif, mais l'IA peut rendre votre expérience un peu plus agréable. 11. Leçon 2 : Bonjour, et bienvenue à la leçon numéro deux. Dans cette leçon, nous allons explorer les points forts et les points faibles de l'IA en matière de codage. Commençons donc. Mes amis, l' IA fait donc de son mieux pour les sujets formalisés Qu'est-ce qu'un sujet formalisé ? sujet formalisé est donc le sujet, la tâche, le problème qui a une solution spécifique, par exemple, un plus un est toujours égal à deux C'est formalisé. Ainsi, dans le monde du codage, les tâches les plus formalisées sont les algorithmes, car vous entrez une entrée spécifique et vous obtiendrez toujours la sortie spécifique C'est pourquoi, pour les ordinateurs et les machines, il a toujours été plus facile de résoudre ce type de tâches. Et comme les algorithmes existent également depuis de nombreuses années, de nombreuses tâches ont été résolues de différentes manières, et ce sont des solutions connues. C'est pourquoi, dans le domaine des algorithmes, vous obtiendrez le meilleur travail possible en matière d'IA. Alors laissez-moi vous montrer un examen. Donc, pour le moment, nous sommes habillés, et je vais partager la façon dont je pratique habituellement les algorithmes moi-même Il y avait donc une tâche simple pour pratiquer les algorithmes, qui consiste à écrire une fonction qui renverra le nombre de mots d'une chaîne. Et je réfléchissais un peu, entraînant un peu par moi-même sans IA, et j'ai créé une fonction qui, comme vous pouvez le voir, reçoit un paramètre de chaîne et renvoie finalement le nombre de mots de cette chaîne. Et puis ce que je fais habituellement, c'est d'aller sur Cloud ou Chat GBT et de dire les choses suivantes Vérifiez ma solution, faites-moi part de vos commentaires et indiquez la tâche dans la solution. Et comme vous pouvez le constater, cela m' a donné un feedback avec succès , donc peu de considérations, votre fonction gère également les cas de base, mais me donne également des améliorations possibles et des suggestions de tests. Ensuite, comme vous pouvez le voir, je donne une autre invite qui est de me donner d'autres solutions possibles à ce problème. Et comme vous pouvez le constater, il propose une, deux, trois, quatre ou cinq solutions. C'est le problème parce que c'est un algorithme et la machine les manipule très bien. C'est pourquoi, si vous devez travailler avec quelque chose de formalisé, comme des algorithmes ou des problèmes très spécifiques, vous obtiendrez les meilleurs résultats avec l'IA La deuxième chose avec laquelle l'IA est assez bonne pour travailler, ce sont les bibliothèques et les frameworks bien connus. Dans ce cas particulier, vous obtenez de bons résultats car ces bibliothèques et frameworks étant très populaires, il existe de nombreux exemples dans différents articles, dans d'autres sources et dans sa documentation. Cela signifie que l'IA dispose d'un contexte assez riche, et c'est pourquoi elle vous apportera probablement de très bonnes solutions. Par exemple, si vous prenez React et Angular View, ce sont des bibliothèques très connues dans le framework, et c'est pourquoi vous allez obtenir de très bonnes solutions. Suivant. Alors maintenant, parlons du mot IA « pas si bon ». L'IA fonctionne donc bien avec des sujets moins formalisés. Et d'après mon expérience particulière, le premier est le CSS dans développement Web, les styles CSS et en particulier la mise en page. Alors réfléchissons un instant, pourquoi est-ce ainsi ? Tout d'abord, parce que le CSS n'est pas si formalisé, ce n'est pas un langage de programmation C'est pourquoi ce n'est pas si formalisé. Il n'y en a donc pas. Disons qu'en CSS, lorsque vous commettez une erreur, sorte d'erreur, je veux dire, en termes non pas d'erreur de grammaire , mais d'erreur logique, disons que vous utilisez deux fois la même propriété , et que la seconde remplace la première, donc vous n'aurez aucune erreur. Le CSS n'est donc pas si strict. Et si nous parlons de mise en page, si vous travaillez dans le développement Web depuis un certain temps, vous savez probablement que vous pouvez faire mise en page dans, je ne suis pas vraiment sûr, mais cela peut être huit, dix ou 12 manières différentes pour la même chose. Vous pouvez utiliser Flexbox. Vous pouvez utiliser une grille, vous pouvez même en utiliser une partie, par exemple, si vous souhaitez avoir plusieurs colonnes, vous pouvez simplement utiliser un bloc en ligne, et la solution fonctionne toujours C'est pourquoi, pour les styles, c'est bon. Vous devez tout de même avoir une solide expérience. Je dirais si vous voulez l' utiliser spécifiquement pour le coiffage, car vous aimeriez probablement le nettoyer. Mais il en est ainsi. Et, encore une fois, je dirais qu'il fait très mauvais travail en termes de distribution et d'effets visuels. Comme les animations CSS complexes, les effets tels que les effets de survol et les bibliothèques telles que le GSP ou le mouvement du cadreur Encore une fois, parce que lorsque vous créez quelque chose de personnalisé, un effet visuel sur le Web, c'est probablement quelque chose que vous avez trouvé, comme l'inspiration. Ce n'est donc pas quelque chose de courant. C'est pourquoi l'IA ne dispose pas vraiment, encore une fois, du contexte riche pour résoudre efficacement ce problème , car moi-même, vous savez, j'ai beaucoup utilisé GSAP pour la conception de sites Web, animations et d'interactions complexes, et cela m'a donné des résultats, donc Et j'ai l'habitude de visiter les forums, vous savez, pour discuter avec de vraies personnes m' aider à résoudre le problème. Encore une fois, juste pour récapituler, il fait le meilleur travail dans quelque chose de très strict, formalisé comme des algorithmes ou des bibliothèques ou frameworks bien connus , et fonctionne bien avec style et certains effets visuels personnalisés 12. Leçon 3 : Bienvenue à la troisième leçon, Présentation des outils. C'est une très courte leçon pour mes amis. Nous allons simplement examiner très brièvement ce que nous allons aborder dans les prochaines leçons. Vue d'ensemble des outils pour la génération de code. Nous allons donc commencer par des discussions à usage général pour le codage. Plus précisément, il s'agira de JAGBT et Cloud. Ensuite, nous passerons aux échecs spécialisés pour le développement Web, en aux échecs spécialisés pour le développement Web, particulier à l'interface utilisateur, et il s'agit d'un V zéro. À partir de Versell, nous convertirons ensuite l'assistance au codage. Vous avez probablement entendu parler de Github Copilot ou peut-être de Codeon. Enfin, nous verrons l'un des éditeurs de code AI. Alors allons-y. 13. Leçon 4: Bienvenue à la leçon numéro quatre. Dans cette leçon, nous allons discuter et examiner de plus près le point de vue de l' encodage par IA des chats à usage général. Nous allons parler du Cloud et du chat GPT et nous allons commencer par le Cloud Alors d'abord, jetons un coup d'œil aux babillards Web Devina Web Devina, comme vous pouvez le voir, est une compétition de codage par IA, où les développeurs Web évaluent en quelque sorte les LLM pour les meilleurs résultats en Et comme vous pouvez le constater, les Cloud 3.7 et 3.5 occupent tous deux la première et la deuxième place. Voyons d'abord quels sont les avantages et les points forts du caillot. Donc, tout d'abord, c'est un repas gratuit. Vous avez chaque jour un certain nombre de messages gratuits que vous pouvez utiliser. Ensuite, comme vous l'avez vu précédemment sur le babillard, comme je vous l'ai montré dans un aperçu du caillot, il est considéré comme le meilleur pour le codage et il intègre Github, même s'il est en meilleur mode Troisièmement, il dispose d'un mode de prévisualisation, ce qui signifie que vous pouvez demander à prévisualiser le code, ce qui le rend également un peu plus pratique pour le processus. Et la dernière fonctionnalité que nous n'avons pas encore abordée est celle des projets. Ce n'est autorisé que dans la version pro, et plus tard, j'en parlerai rapidement. Donc, l'inconvénient de Cloud est probablement l'un des plus importants et le seul inconvénient que je puisse trouver, c'est qu' il a une faible limite de messages dans un niveau gratuit, car encore , vous pourriez utiliser « pas vraiment sûr , peut-être 810 messages, puis vous devez attendre que les nouveaux messages arrivent. Jetons donc rapidement un coup d'œil à la fonctionnalité du projet. Comme vous pouvez le voir, il n'est disponible que pour la version. Donc, en gros, cela vous permet d'ajouter votre propre base de connaissances, comme vous pouvez le voir ici sur une capture d'écran de leur article. Ainsi, par exemple, il s'agit d'un document PDF, d'un autre document PDF et d'un troisième document PDF contenant des informations différentes qui seront ensuite utilisés dans un contexte de discussion. Et c'est une fonctionnalité vraiment étonnante, car vos réponses deviennent alors plus précises à mesure qu'elles prennent en compte les documents que vous avez fournis. La deuxième caractéristique d' un projet est que vous pouvez définir des instructions personnalisées. Encore une fois, c'est une fonctionnalité étonnante car vous dirigez en quelque sorte l' IA dans la direction dont vous avez besoin. Nous voici donc à Claude, comme vous vous en souvenez probablement lors des leçons précédentes, où je vous ai montré que le logiciel fonctionne très bien avec les algorithmes, et nous avons discuté de la façon dont il offrait une solution analysée pour nos tâches d'algorithme. Dans cet exemple, comme vous pouvez le voir, j'ai demandé à concevoir un tableau de bord de notes dans React. Pourquoi dans React ? Parce que cela nous permet d'en voir un aperçu. Oui, et comme vous pouvez le constater, il a fait un très bon travail. Voici notre code, et nous pouvons également le voir. Nous avons une barre latérale, la barre de notes et la note elle-même. Je veux dire, encore une fois, c'est assez pratique d'avoir cette fonctionnalité. Le deuxième joueur de notre jeu est donc notre chat préféré GBT. Et comme vous pouvez le constater sur une arène de développement web, il partage la quatrième place avec un grog, ce qui reste plutôt bon C'est bon. Et à propos des avantages du chat GPT, je pense que le premier est qu'il s'agit du nombre illimité de messages gratuits Oui, parfois, lorsqu'il utilise son modèle top 04, parfois dans un chat, vous pouvez recevoir un avertissement indiquant que vous n'avez plus de messages gratuits dans ce modèle, mais il fonctionne toujours dans un modèle plus simple, ce qui est plutôt bien car vous pourriez avoir besoin de plus de messages. Oui Et le deuxième avantage, c'est qu'il possède une qualité de code décente, Steel Code, peut-être pas aussi bon que le clade, mais il est quand même bon En ce qui concerne les inconvénients de ha GPT, la qualité de ce code pourrait bien sûr être meilleure, car je me souviens parfois de certains de mes travaux, en particulier pour certains projets complexes impliquant React Next Eh bien, ça n'a pas vraiment fait le meilleur travail, et les vêtements l'ont fait Et bien sûr, il n'y a pas de prévisualisation. C'est donc une arnaque, oui, mais il est important, encore une fois, comprendre que nous couvrons maintenant les discussions à usage général et que le PIB n'est pas un outil de codage Mais c'est quand même quelque chose à considérer. 14. Leçon 5: Bonjour, mes amis, et bienvenue à la leçon numéro cinq. Dans cette leçon, nous allons explorer le chat spécialisé pour le développement Web et le chat Web basé sur l'IA, qui est nul. Alors, le zéro, c'est quoi ? C'est un outil très puissant pour générer des interfaces utilisateur et du code de haute qualité. C'est un outil premium, gratuit, mais il contient des messages gratuits, mais vous avez également une limite. Et une fois que vous aurez atteint votre limite, vous devrez attendre un certain temps ou acheter une version pro. Bien entendu, le V zero a été produit par Versell, qui est également un développeur de Next Gs. C'est pourquoi NextGS et React sont leurs technologies préférées, mais ce ne sont pas seulement React et Next Js, car elles supportent également d'autres technologies Explorons donc rapidement l'interface utilisateur. Encore une fois, comme dans les autres discussions de base, vous avez le champ de saisie de l'interface utilisateur avec l'outil de téléchargement de fichiers avec une certaine amélioration de l'IA Et aussi, il y a une capture d'écran clone, l'importation de Figma, voire le téléchargement du projet Cela signifie que vous pouvez télécharger l'ensemble du projet et demander à le déboguer ou à trouver des incohérences ou peut-être à proposer de nouvelles fonctionnalités Et il y a des porte-plaques, créez la page de destination ou inscrivez-vous. Passons donc rapidement aux instructions chez Vzero. Pour obtenir les meilleurs résultats, vous devez donc bien élaborer les instructions de saisie En fait, ce n'est pas quelque chose dédié spécifiquement à V zéro. Comme vous vous en souvenez probablement, il s'agit de règles spécifiques pour obtenir les meilleurs résultats dans toutes les discussions basées sur l'IA. Ainsi, mieux vous guiderez Vzero, plus vous obtiendrez les meilleurs résultats, plus précis et pertinents Il y a donc quelques recommandations issues de la documentation de V zero. Vous devez donc inclure les fonctionnalités souhaitées de composants spécifiques. Supposons que vous construisiez sélecteur de couleurs et vous compreniez que le sélecteur de couleurs peut être aussi simple que la simple saisie d'un code hexadécimal ou aussi avancé qu'un sélecteur de couleurs Photoshop Il est donc également important de spécifier les préférences de conception. Eh bien, c'est un peu plus simple. Vous spécifiez donc les tailles, la police , les couleurs, le rayon de bordure , etc. Ensuite, il est bon que vous mentionniez des bibliothèques. Cela signifie des bibliothèques ou des frameworks tiers que vous souhaitez utiliser. Il utilise donc le contexte de cette documentation. De plus, pour décrire le contexte ou le cas d'utilisation, cela signifie exactement comment vous prévoyez utiliser le composant, car ce n'est en fait pas quelque chose de très spécifique à Vzero I, juste une bonne et appropriée ingénierie rapide Donc, la taille forte, comme le dit V zero dans leur documentation, c'est une génération d'interface utilisateur. Ils le font avec le chapeau CNUI et les bibliothèques tierces recommandées sont React Three Fiber, Framer Motion, etc. Encore une fois, vous pouvez toujours utiliser vos bibliothèques, mais c'est préférable. Cela signifie que leur réseau neuronal les connaît mieux. Maintenant, un peu plus sur le support technologique. Comme je vous l'ai déjà montré, il ne s'agit pas seulement de la prochaine GS parce qu'ils disent qu'elle est gonflée, remixée, même si ce n'est avec un peu moins de confiance par rapport à l'expertise nécessaire pour réagir ensuite, car encore une fois, le zéro sort avec les mêmes personnes qui développent la prochaine le zéro sort avec les mêmes personnes qui développent la Et aussi, comme vous pouvez le voir, il y a Python , Rust, SQL, etc. Donc, mes amis, si vous développez autre chose, vous le couvrez toujours. Donc zéro pour les développeurs. Encore une fois, d'après leur documentation, ils disent que vous pouvez écrire du code React propre à partir de zéro, résoudre des problèmes, implémenter vos fonctionnalités, n'oubliez pas que vous pouvez télécharger le projet, par exemple En outre, il peut fournir des suggestions de code, et encore une fois, ils indiquent que Ness est toujours à jour Donc, pour les concepteurs, encore une fois, vous pouvez ajouter votre fichier Figma C'est comme une fonctionnalité avancée, c'est une fonctionnalité payante, mais en tant que fonctionnalité gratuite, que nous allons explorer très prochainement, vous pouvez ajouter votre capture d'écran. 15. Leçon 5 (pratique): Mes amis, et c'est un temps d' entraînement à V zéro. Nous allons d'abord découvrir comment utiliser le chat textuel, puis nous nous entraînerons avec des images. Alors allons-y. Bienvenue dans l'application Zero. Et comme vous pouvez le voir, au centre, nous avons le champ de saisie, comme vous l'avez déjà vu dans Cloud et chat GBT Vous pouvez saisir ici votre message. Vous pouvez également télécharger votre projet Figma ou votre capture d'écran depuis votre ordinateur. Là-bas, nous avons des fonctions prédéfinies telles que le clonage de captures d'écran, encore une fois, l'importation de fichiers Figma Vous pouvez même télécharger votre projet ainsi que des instructions prédéfinies page de destination créative ou de formulaire d'inscription Essayons donc d'abord avec une simple invite, telle que la création d'un élément déroulant moderne. Donc, mes amis, comme vous pouvez le voir ici, soit créer le pmt juste avant de prévoir de l'utiliser zéro, et disons que votre crevette n' est pas très polie, vous pouvez utiliser ce petit bouton amélioré Alors essayons-le. Comme vous pouvez le constater, en quelques secondes, notre simple bal de fin d'année est devenu entièrement préfabriqué, bien structuré et pensé rapidement Alors essayons-le. Comme vous pouvez le constater, cela accélère le processus de réflexion, élargissant également un peu plus notre invite. Comme vous pouvez le voir ici, il a créé des structures de projet, des règles de style, des images et des médias, cadres de formatage et des bibliothèques et encore plus de mises en garde Et pour le moment, il fait son processus d'écriture de code, et nous sommes maintenant en mode aperçu. Tara nous avons donc obtenu notre petit formulaire où nous pouvons sélectionner le pays et, comme vous pouvez le voir, je pense même que nous devrions avoir une fonctionnalité de filtrage, ce qui est plutôt génial. Mexique. Nous avons donc choisi le Mexique. Par exemple, j'ai choisi le Brésil et j'étais le Brésil, et il en va de même pour la langue. Pour la première version, c'est plutôt bon. Comme vous pouvez le voir, mon ami, en haut, nous avons l' onglet d'aperçu où nous pouvons voir les perspectives réelles du projet dans un navigateur, ainsi que l'onglet code Nous avons ici quelques fichiers. Le principal est probablement le menu déroulant consultable. C'est donc notre composant, et nous avons la page TSX où nous remplissons le contenu avec les pays et les langues Et ici, si vous comprenez le code et que vous savez ce que vous voulez faire, vous pouvez réellement apporter quelques modifications en écrivant le code. Faisons donc quelque chose de très simple pour comprendre les mécanismes de son fonctionnement. Essayons donc d'ajouter un autre pays. D'accord ? Nous allons donc ajouter, comme vous pouvez le voir ici, la Corée. D'accord ? Donc, comme nous avons la Corée ici, passons au Ko et faisons-en la Corée. Nous devons donc maintenant enregistrer et accéder à l'onglet d'aperçu. Alors voyons voir. Nous avons la Corée. Comme vous pouvez le constater. C'est ainsi que vous pouvez apporter des modifications simples à un code. Je veux également vous montrer un autre moyen d'apporter des modifications ? C'est par le biais de l'invite. Comme vous pouvez le voir, j'ai saisi le message, changez fun en mono. Et encore une fois, il a élargi notre message pour le rendre un peu plus précis, et il a fait son travail Comme vous pouvez le voir ici dans notre composant principal, notre téléphone est passé en mono. Un petit conseil : parfois, lorsque vous utilisez certains messages pour vous demander d'apporter des modifications, votre version, le résultat peut ne pas être celui utilisez certains messages pour vous demander d'apporter des modifications, votre version, le résultat que vous souhaitiez. Donc, soit vous devez vous assurer que votre invite est assez spécifique, soit vous devez utiliser une autre invite pour mieux expliquer quelque chose. Encore une fois, comme vous vous en souvenez probablement en lisant leçons que nous avons tirées des fondements inspirants Maintenant, une autre fonctionnalité très, très utile de V zero est moyen très simple et pratique de naviguer entre les versions. Donc, pour le moment, comme vous pouvez le voir, il est indiqué que la version deux est la plus récente. Et ici, il est écrit «   Version 1 », « Afficher et restaurer ». Voyons donc ce qui va se passer si nous cliquons sur le bouton Restaurer. Terminé. Comme vous pouvez le constater, la police San Serif est revenue à l'ancienne Et maintenant, si vous voulez bien y prêter attention, c'est maintenant la version trois, mais il est dit que les trois ont été créées en restaurant la première version. Encore une fois, c'est l'un des moyens de naviguer entre les versions au cas où quelque chose ne vous plairait pas ou si cette partie de vos mises à jour ne fonctionne pas très bien. Passons à la deuxième partie de cette séance d'exercices pratiques. Supposons donc que nous ayons cette capture d'écran de l'interface utilisateur. Vous vous souvenez que le Figma pour importer le projet Figma est une version payante Supposons donc que vous ayez votre interface utilisateur Figma et que votre version soit gratuite, vous pouvez simplement télécharger une capture d'écran, puis utiliser une capture d'écran telle que disponible en version gratuite Nous allons donc utiliser cette capture d'écran pour demander à V zero de la recréer. Nous sommes donc en V zéro, et vous pouvez faire deux choses à partir de là. Voici donc, comme vous pouvez le voir, une capture d'écran clone. Bouton Après avoir appuyé sur ce bouton, vous serez invité à ajouter votre image, puis juste après le début du processus, cela ne vous obligera donc pas à ajouter votre invite. Supposons que vous ayez vos propres instructions. Donc, dans ce cas, vous feriez probablement mieux d'utiliser un tracé depuis un ordinateur, puis vous pourriez ajouter votre invite. Nous allons donc maintenant utiliser bouton de capture d'écran du clone. Comme vous pouvez le voir, nous avons téléchargé une capture d'écran. Il réfléchit à sa façon de penser. Et comme je vous l'ai déjà dit, il suffit de prendre votre capture d'écran et de commencer à fonctionner immédiatement. Donc, comme vous pouvez le constater, c'est assez simple. Invite, veuillez recréer l'interface utilisateur affichée sur la capture d'écran ci-jointe Donc ça marche. Donc, mes amis, le zéro a terminé son travail, et comme vous pouvez le voir, il a assez bien recréé notre image Il possède tous les composants. Les icônes, les champs de recherche, la barre latérale et la partie principale avec les noms d'utilisateur Et je pense que pour la première itération, il s'est plutôt bien comporté. Et comme vous pouvez le constater, voyons voir, il est même totalement réactif. OK. Pas mieux. Encore une fois, vous pouvez également voir le code. Il a donc créé le CSS et TO WIN configure le fichier principal avec la page que nous voyons et même à l'intérieur composants tels que la barre latérale et la carte utilisateur, qu'il utilise juste là Et je pense encore une fois que pour la première itération, il a fait du très bon travail Encore une fois, une chose très importante à prendre en compte, comme je l'ai déjà mentionné au tout début de notre cours, c'est qu' il ne s'agit pas de calculer, mais de générer, comme une version après l'autre. C'est pourquoi chaque itération sera différente de la précédente Pourquoi c'est important, car si vous demandez cinq fois avec la même image utilisateur, vous obtiendrez probablement cinq variantes différentes de votre code. Et ce n'est pas nécessairement le meilleur en termes d'utilisation du code. Par exemple, à l' heure actuelle, comme nous pouvons le voir, la carte utilisateur comporte un nom, un nom d'utilisateur et une source d'image, et je pense que c'est plutôt bien. Mais permettez-moi de partager la première fois que je l'ai fait auparavant. Comme vous pouvez le constater, c'est un peu différent. Il a donc un nom, un nom d'utilisateur, accord, l'avatar UO, mais maintenant il a une position d'avatar, et chaque carte utilisateur a une position d'avatar différente. Et à mon avis, parce que, vous savez, j'ai une assez bonne expérience du CSS, c'est une très très mauvaise pratique d'avoir, vous savez, aussi strictes valeurs aussi strictes dans une grille parce que lorsque vous utilisez une grille, vous devez utiliser, vous savez, contrôler cela par colonnes et non par des valeurs spécifiques comme ça parce que c'est très confus, vous savez ? Et si vous avez, vous savez, certain nombre d'éléments enfants dans une grille ? Encore une fois, c'est une chose dont vous devez être conscient. Et c'est pourquoi, encore une fois, la deuxième chose dont je vous ai parlé de maîtriser les bases solides ou les instruments que vous utilisez. Parce que lorsque vous connaissez le CSS, vous savez probablement que c'est la position, vous savez, valeurs de position codées en dur ne sont pas très bonnes pour les grilles dynamiques C'est pourquoi vous allez soit demander à refaire ce travail, soit trouver un autre moyen, par exemple en modifiant manuellement les éléments du code Et mes amis, la dernière chose que nous allons examiner rapidement au cours de cette session, ce sont les projets. Comme vous pouvez le voir, nous avons l'onglet Projets ici, et je n'ai créé qu'un seul modèle de ce projet. Et comme vous pouvez le voir ici, nous avons la même interface utilisateur. Mais ce qui compte ici c'est ce petit détail, le cadre du projet. Voyons donc ce qui se passe à l'intérieur. Comme vous pouvez le constater, il comporte plusieurs sections. s'agit donc d'abord d'un projet ver CL, ce qui signifie que vous pouvez connecter un projet VerSL , puis déployer immédiatement tout ce que vous avez créé C'est une bonne idée, car vous pouvez rapidement montrer votre prototype à votre client ou à vos collègues. La deuxième chose, c'est que nous avons des variables environnementales. Cela signifie si vous avez des connexions à des bases de données ou des clés d'API, que vous pouvez viser ici. Mais le personnage principal de ce jeu est celui-ci. C'est une source. Cela signifie qu'ici, vous pouvez ajouter toutes les sources que vous souhaitez dans le contexte du projet. Il pourrait donc s'agir de documentation. Il peut s'agir de fichiers image, de quelques inspirations, qui constituent ensuite un projet que nous utilisons comme contexte Cela signifie que vos réponses seront plus précises et plus proches du résultat final. C'est donc de l'or, mes amis. J'aime beaucoup quand et si vous vous souvenez quand on parlait de Claude, Claude comme dans la version payante de Claude, dans les projets, vous pouvez également ajouter vos sources. C'est pareil. C'est donc une très bonne chose, mes amis. Le dernier aussi, qui est très bon, ce sont les instructions. Encore une fois, vous pouvez définir certaines choses spécifiques que vous aimeriez avoir, ce qui est également très bien. Mes amis, c'est la fin de cette leçon. J'espère que vous avez apprécié. On se voit dans le prochain. 16. Leçon 6: Bonjour et bienvenue à la leçon numéro six : Assistance au codage. Alors, qu'est-ce qu'un assistant de codage ? Il s'agit donc essentiellement de votre copilote, de votre assistant, assistant dans votre identifiant ou votre éditeur Alors, en quoi cela peut-il vous aider exactement ? La première des fonctionnalités les plus populaires est donc probablement la saisie semi-automatique, laquelle l'assistant vous donne des suggestions de codage Comment cela fonctionne exactement, il apprend à connaître votre contexte de codage, puis essaie suggérer, comme le fait n'importe quelle autre IA. Ensuite, vous pouvez choisir une partie de votre code et demander à la refactoriser ou à l'améliorer De plus, les bogues vous aident à les résoudre, et vous pouvez également poser des questions ou des explications sur votre code et d'autres fonctionnalités, comme vous pouvez le constater. Cet assistant de codage est généralement intégré à votre identifiant sous forme d'extensions. Comme vous pouvez le voir, voici une petite capture d'écran du code VS, vous pouvez voir les extensions, les onglets et le code installé. Nous allons parler des plus populaires. La première est donc Github copilot, Github copilot était probablement la première, du moins la plus connue, l'extension la plus populaire, et elle était autrefois payante, mais maintenant elle est premium Github copilot était probablement la première, du moins la plus connue, l'extension la plus populaire, et elle était autrefois payante, mais maintenant elle est premium. Même s'il s'agit d'un abonnement premium, il propose toujours un niveau gratuit très généreux. Je pense que cela représente environ 2 000 saisies automatiques par mois et 50 messages que vous pouvez demander Et le second est un codium qui est une extension gratuite que vous pouvez installer et utiliser dans votre environnement de codage Dans la partie suivante, nous allons donc explorer leur fonctionnement. 17. Leçon 6 (Pratique): Bonjour, et bienvenue à la séance d'entraînement avec l'assistance au codage. Dans cette leçon, nous allons utiliser le Codem. Mais vous pouvez également utiliser le copilote Github car ils sont à peu près Nous allons explorer certaines des fonctionnalités les plus populaires et nous pouvons commencer par la saisie automatique. Donc, comme vous pouvez le voir, nous avons d'abord des mots inversés dans une chaîne. Il faut donc écrire une fonction qui inversera tous les mots de la chaîne passée entre les mots séparés par exactement un espace, n'y ait d'espaces de fin Par exemple, ces stress, ces Uo, comme vous pouvez le voir, ont immédiatement commencé à suggérer une solution, et il vous suffit de cliquer sur un onglet, puis sur un autre onglet, et vous pourriez même passer à la chaîne suivante, et comme vous pouvez le voir, cela a été suggéré sous forme de journal de console. La prochaine étape que vous pouvez faire est d' essayer votre solution dans le terminal et de faire le reste. Passons donc à la prochaine chose qu'il peut faire. Supposons que vous ayez déjà du code qui vous convient. Alors maintenant, vous pouvez surligner le code, cliquer sur le bouton droit. Comme vous pouvez le constater, nous avons ici deux ou trois choses. Le premier est CodeMRFactor, bloc de code sélectionné. Donc, si nous cliquons dessus, nous obtenons quelques suggestions. Commençons donc par quelque chose de simple, ajoutez des commentaires et une docstring au code Comme vous pouvez le constater, cela fonctionne et a fait quelque chose. J'ai créé comme un stylo un format de chaîne, la chaîne inversée et le format de retour, également une chaîne, une chaîne inversée. Et maintenant, vous pouvez accepter ou rejeter. Si vous cliquez sur Accepter, comme vous pouvez le voir, vous avez maintenant le code indiquant ce que le codage vous a fait. Supprimons donc cela pendant un moment. Très bien, sauvegardez et réessayez encore une fois. Encore une fois, refactorisez et allons-y. Rendez cela plus rapide et plus efficace. Essayons ça. Comme vous pouvez le voir, Ed a suggéré une autre solution. Je ne sais pas vraiment si c'est plus rapide ou non parce que c' est un petit bout de code, mais en général, cela a fait quelque chose et peut-être qu' un algorithme plus gros ou une sorte de code, cela suggérera certainement quelque chose de plus rapide. Encore une fois, vous pouvez accepter ou refuser. Rejetons donc simplement, dans ce cas. Ensuite, ce que vous pouvez faire à nouveau, surlignons le texte et demandons Cdim d'expliquer le bloc de code sélectionné Maintenant, comme vous pouvez le voir, il a ouvert un chat où il donne une explication. Il dit donc que c'est une fonction JavaScript qui prend une chaîne en entrée, la divise en tableau Les mots utilisant des espaces comme séparateurs inversent l'ordre et se rejoignent avec les espaces entre les deux Comme vous pouvez le constater, c'est une définition assez correcte de ce qui se passe. Encore une fois, comme vous vous en souvenez, il s'agit d'un chat qui utilise l'IA, un modèle d'IA dissimulé. C'est probablement du caillot, car c'est le plus populaire pour ce type d'outils Et maintenant, ce que nous pouvons faire, c'est demander quelque chose, par exemple suggérer une solution différente. Et comme vous pouvez le voir ici dans le chat, il a présenté trois solutions, une, deux et trois, et c'est à vous de décider ce que vous voulez faire avec ces informations. Essayons donc encore une fois. Je demande donc à notre outil de convertir le code en tapuscrit. Alors voyons voir. Et comme vous pouvez le constater, cela nous a donné quelques variantes. Donc, mon ami, c'était une séance d' entraînement avec CM, et il en va de même pour le copilote Github Et si vous utilisez le code VS, vous pouvez voir ici en haut que vous pouvez commencer à l' utiliser à partir d'ici. 18. Leçon 7: Bonjour et bienvenue à la leçon numéro sept. Dans cette leçon, nous allons passer en revue les éditeurs de code d'IA, et ce sera la dernière catégorie d' outils que nous allons aborder dans ce module. Alors, qu'est-ce que l'éditeur de code AI ? Comme vous l'avez probablement déjà conclu, il s'agit d'un éditeur de code avec des fonctionnalités d'IA intégrées. Moteur AI intégré. Imaginez que vous avez un code VS, mais à l'intérieur de celui-ci, machine d'IA intégrée qui vous aide à coder. Et nous allons explorer le seul élément de ce cours. Le plus populaire de nos jours est le curseur. Jetons donc rapidement un coup d'œil. Alors, mon ami, pendant que nous allons passer en revue les fonctionnalités, vous reconnaîtrez certainement tout, toutes les fonctionnalités que nous avons abordées jusqu'à présent, mais vous les combinerez à nouveau, dans l'éditeur de code. Le premier est donc l'agent, et comme vous pouvez le voir, le mode agent peut effectuer des tâches de bout en bout. Cela signifie du début à fin de manière indépendante. Et tu te souviens du V zéro ? C'est exactement ce que V zero a fait, mais maintenant vous pouvez faire quelque chose comme ça dans l'éditeur de code sans le quitter. Ensuite, un onglet, et comme vous pouvez le voir, il s'agit d'une fonctionnalité de saisie automatique. Il y a même une capture d'écran ici, et c'est la même chose que le codium que nous avons vu dans la leçon précédente Ensuite, discutez, et il s'agit d'un chat GPT ou cloud. Et comme vous pouvez le voir, la commande K, éditons et écrivons votre code avec l'IA, encore une fois, la même chose que nous avons faite dans la leçon de codim Mais ce qui est important pour comprendre, c'est de regarder les prix. Il existe un niveau gratuit et, comme vous pouvez le voir, il propose un essai de deux semaines Au cours de cet essai, vous pouvez utiliser 2000 réussites et 50 demandes premium Ensuite, vous avez soit un petit quota gratuit, soit vous devez passer au niveau pro, qui est payant, comme vous pouvez le voir, pour profiter pleinement du curseur. Et c'est à toi de décider. Vous pouvez soit utiliser des outils gratuits, soit si vous souhaitez ajouter plus de rapidité et de commodité à votre processus, vous pouvez acheter un curseur. Dans la prochaine leçon, nous verrons donc quelques fonctionnalités de cet intéressant 19. Leçon 7 (pratique): Mes amis, avant de nous lancer dans la leçon, je voudrais juste mentionner rapidement une petite chose le fait est que la technologie évolue très rapidement de nos jours, et que l'interface utilisateur de l'éditeur de curseurs, que nous allons examiner, a changé juste après que j'ai enregistré la leçon. Je veux donc juste clarifier les choses pour que vous n'ayez aucun souci pendant le cours. Donc, mes amis, lorsque vous allez voir la leçon, vous verrez l'onglet de discussion et un onglet de composition à l'intérieur de la leçon. Mais très probablement, si vous avez téléchargé ou mis à jour votre curseur, votre éditeur, votre interface utilisateur ressemblera à ceci. Vous allez donc avoir un agent et demander des éléments dans le menu déroulant. Ce sont donc les mêmes choses. Dans l'ancienne version, le chat revient donc à demander une nouvelle version et le compositeur dans l'ancienne version est la même chose qu'un agent dans une nouvelle version. Donc, mes amis, encore une fois, ce les mêmes choses, sauf qu'ils les ont nommées un peu différemment. Passons donc à la leçon. Bonjour, et bienvenue à la prochaine leçon. Dans cette leçon, nous allons explorer l'IA du curseur et ses fonctionnalités dans l'action. Donc, tout d'abord, je voudrais dire qu' il s'agit d'un fork de code VS qui signifie que vous serez confronté transition assez fluide entre le code VS et l'IA du curseur. Par exemple, lorsque je l' installais, il avait également installé toutes les extensions que j' avais dans mon éditeur de code VS, ce qui est très pratique. Donc, la première chose que nous allons examiner, ce sont les paramètres. Vous cliquez donc sur les paramètres du curseur et vous accédez aux paramètres du curseur. Plus précisément, nous nous intéressons à ces règles pour l'IA. Comme vous pouvez le voir ici sous forme d'espace réservé, vous pouvez voir quelques exemples de règles. Utilisez toujours des composants de réaction fonctionnels , etc. Vous souhaitez ajouter ici vos règles globales, car elles s'appliqueront à tous les projets sur lesquels vous travaillerez à l'intérieur de ce curseur. Il faut donc y réfléchir un peu plus attentivement. La prochaine chose dont nous allons parler est donc le maintien des règles du curseur. Et plus précisément, ce que vous voudriez faire est de créer les fichiers de règles du curseur à points. Ce fichier est très important si vous souhaitez obtenir des réponses, des réponses et des solutions précises pour votre projet de codage. Il existe en fait une ressource dédiée spécifique sur Internet. Jetons un coup d'œil. Comme vous pouvez le voir, le nom de ce projet est un répertoire de curseurs. Et ici, vous pouvez voir différents types de règles. Prenons donc le premier, comme vous pouvez le voir ici, c'est un Acument avec des règles En tant que développeur senior expert en React Next, JavaScript, TypeScript, etc. Ensuite, il dit, par exemple, de suivre les exigences de l'utilisateur Scalf à la lettre, droite, et maintenant il définit les règles Maintenant, l'environnement de codage, les directives de mise en œuvre du codage Donc, ce que vous pouvez faire ici, comme vous pouvez le voir, c'est qu'il existe différentes catégories, TypeScript, Python React Next Et vous pouvez aller de l'avant et jeter un œil à ce qui vous intéresse le plus. Très bien, vous pouvez donc simplement cliquer sur Réagir et voir différentes variations. Ensuite, vous pouvez simplement le copier, comme cela est indiqué dans les règles de votre curseur. Ensuite, lorsque vous utiliserez le curseur, ces règles seront appliquées en tant que contexte pour vos tâches. Allons jeter un coup d'œil à ses fonctionnalités. Donc, si vous cliquez sur Commande I, vous obtiendrez, comme vous pouvez le voir, un compositeur. Encore une fois, un compositeur est un agent. Cela signifie donc qu'il effectuera certaines tâches. Nous allons demander à faire quelque chose. Comme vous pouvez le constater, nous demandons construire une calculatrice arithmétique avec quatre opérations mathématiques de base Utilisez HTML, CSS et Vanilla JS. Maintenant, nous cliquons sur Soumettre, et nous allons voir. Comme vous pouvez le voir ici, il est indiqué générer un index HTML. C'est pourquoi ce que fait l'agent. Il fait donc quelque chose en votre nom. Maintenant, il génère un style CSS. Et maintenant c'est le moment d'un script Jazz. Comme vous pouvez le constater, il a fait son travail et a également présenté une brève conclusion sur ce qu'il a fait. Donc pour l'instant, acceptons, voyons le résultat. Comme vous pouvez le constater, nous avons une calculatrice et elle semble plutôt bonne. Beaux effets de survol. C'est plutôt moderne. Et essayons la fonctionnalité, sept plus six, 13. Génial Supprimons. Mettons-le à zéro. Comme vous pouvez le constater, dès la première itération, il a fait un très bon travail. Soirée. Essayons donc d'ajouter des fonctionnalités à l'aide de Composer. Nous allons donc maintenant demander à ajouter de nouvelles opérations telles que queer Root, Second Powers, Sinas et Voyons voir. Comme vous pouvez le voir, il a commencé à fonctionner, travaillant actuellement sur un index HTML. Comme vous pouvez le constater, nous assistons à la mise à jour. Maintenant, il a fait un certain travail en termes de styles et de temps de script. Comme vous pouvez le constater, nous avons quelques nouveautés dans le script, et à la fin, nous obtenons la conclusion « If ». Nous pouvons donc maintenant revoir les modifications, mais pour le moment, nous aimerions les accepter et voir le résultat par nous-mêmes. Comme vous pouvez le voir ici, il les a même regroupées par couleur car c'est un peu une nouvelle catégorie d'opérations. Essayons donc. Cela fonctionne. Essayons encore une fois. Cela fonctionne à nouveau. Comme vous pouvez le constater, il a fait un très bon travail. C'est bon. Allons donc voir un autre type de fonctionnalité , à savoir le chat. Soulignons donc cette fonction, ajoutons un numéro, et comme vous pouvez le voir, elle nous a proposé ce chat et nous a également donné un raccourci Alors cliquons ici, vous verrez qu'il a pour contexte le fichier script, et aussi les lignes spécifiques, donc nous pouvons même les exclure. Le dossier entier et essayez de lui demander de faire quelque chose. Autrement dit, pourriez-vous trouver une solution plus simple ? Essayons donc. Et comme vous pouvez le constater, il nous a au moins fourni un autre code. Et ici, comme vous pouvez le voir, nous pourrions cliquer sur Appliquer. Et puis, à la manière de Git, il nous montre le code appliqué et le code supprimé, et ici nous pouvons soit le rejeter, soit l'accepter. Acceptons donc une seconde, et le nouveau code a été ajouté avec une fonctionnalité de chat. Il existe donc également une fonctionnalité de saisie automatique familière. Cliquons. Comme vous pouvez le voir, nous avons reçu quelques suggestions pour la nouvelle gamme . Et avec l'onglet, nous pouvons le modifier ou simplement l'ignorer. Shri inst ici, par exemple, oui, par exemple, ici, cela suggère d' ajouter un commentaire puis un morceau de code Donc, la dernière chose que nous allons examiner est une commande. Donc, si nous surlignons du code et que nous cliquons sur Commande, nous obtenons cette fonctionnalité de chat en ligne Et ici, par exemple, nous pourrions dire, expliquer le Et comme vous pouvez le voir, nous obtenons une explication en termes de C, ce qui est plutôt bon. Mes amis, dans une leçon très brève, j'espère vous avoir donné les principaux outils que vous pouvez utiliser dans Cursor AI. 20. Exercice: Enfin, nous sommes à la fin du module, et il est temps pour vous de faire l'exercice. L'exercice sera donc assez facile. Vous devez jouer une fois, tester une fois tous les deux que nous avons abordés dans ce module. Le but de cet exercice est de vous faire acquérir les connaissances de base de chaque outil. Voici un moyen simple d'accéder à NAP. Donc, dans un premier temps, vous planifiez votre action pour chaque outil. Par exemple, je vais faire A dans le cloud et discuter GBT, B dans V zéro, C, encodage et D dans curseur Accédez à cet outil ou téléchargez l'outil ou extensions et essayez d' effectuer les tâches. 21. Résumé: Récapitulons donc le module numéro trois. Vous avez beaucoup appris dans ce module. Plus précisément, vous avez utilisé tous les outils dont vous pourriez avoir besoin dans votre carrière de codeur dans vos processus de codage. Mais je vais vous donner quelques conseils importants. Tout d'abord, concentrez-vous d'abord et toujours sur le développement de solides compétences en codage, quel que soit votre niveau. Parce que de solides compétences en codage, cela signifie comprendre l'architecture, comprendre les modèles, les meilleures pratiques, certaines manières d'organiser le code, certaines manières de résoudre des problèmes spécifiques, les comprendre, font de vous un très bon développeur. Et l'IA, même si elle ne vous apporte pas une bonne solution, vous pouvez soit demander à la refaire, soit modifier le bon mot d'une manière ou d'une autre Après cela, allez apprendre les bases. Encore une fois, les bases de l'encodage par IA. C'est précisément ce que vous faites dans ce cours. Qu'est-ce que je veux dire par « fondamentaux » ? Les bases, je veux dire les principes fondamentaux. C'est comme l'alphabet en lecture, car si vous connaissez les lettres, vous pouvez composer des mots, puis des phrases, des chapitres, puis le livre entier. Et vous pouvez déstructurer le livre en éléments de plus en plus petits, car vous savez comment il est structuré et vous connaissez les connexions entre les éléments du système C'est la même chose. Si vous savez comment effectuer tâche simple uniquement dans le cloud ou dans le chat GPT, vous pouvez monter de niveau et l'utiliser dans Cdium , puis disons curseur Ensuite, en effectuant ces opérations de base, vous pourrez développer votre propre style d'utilisation de l' IA dans votre processus. Et l'étape suivante consiste à combiner solides compétences en codage et les bases de l'utilisation de l'encodage par IA, puis vous pouvez passer à des choses avancées. Cela signifie créer des combinaisons insensées ou comment vous pouvez le faire. Parce que j'ai vu certaines personnes sur YouTube, vous savez, comment elles utilisent différents outils, et certaines d'entre elles, vous savez, leur flux de travail ne m'est tout simplement pas vraiment compréhensible. Et puis j'ai pensé aux Blancs comme ça parce que, encore une fois, ils ont finalement trouvé cette préférence personnelle quant à la façon dont ils peuvent combiner les éléments de l'IA dans leur codage, car certaines personnes peuvent être d'accord simplement en utilisant du codium parfois, vous savez, en externalisant certaines choses vers le Cloud Et certaines personnes ont besoin d'un curseur avec toutes ces règles relatives aux fichiers de curseurs, vous savez, toujours le contexte, ayant en contexte l'ensemble de la base de données, désolé, la base de code et la documentation et tout le reste. Certaines personnes préfèrent, par exemple, moi-même Je préfère d'abord planifier mon code, puis confier les petites tâches à l' IA, vous savez, à effectuer. Et d'autres, vous savez, même les bons, les professionnels, disent qu'ils commencent par l'IA et qu'ils laissent le compositeur au curseur faire le travail. Donc, encore une fois, c'est quelque chose de avancé. C'est une préférence personnelle. Mais pour en arriver là, faut maîtriser les bases du codage et de l'IA. Et la dernière chose que je voudrais mentionner est de faire attention au gouffre de la mort. Comme vous pouvez le constater, le gouffre de la mort est quelque chose de métaphorique fait, j'ai vu des personnes, vous savez, encore une fois, essayer de créer l'application complète parfois sans planification, parfois même avec planification, mais en s'appuyant entièrement sur l'IA. Ensuite, ils font la première itération. Ça a l'air bien. Ensuite, ils additionnent quelque chose. Cela fonctionne bien, bien, bien, jusqu'au point où il y a différentes erreurs, différentes incohérences dans l'organisation des fichiers, la structure, peut-être des bibliothèques tierces Le nombre de conflits et d'erreurs devient donc si énorme que l'IA n'est pas capable de tous les résoudre. C'est le truc. C'est donc le cas si vous n'avez pas de bonnes compétences en codage. Encore une fois, je voudrais partager mon approche, alors planifiez votre projet. Et puis, pièce par pièce, petit à petit, allez demander à AI de vous aider à me vendre. J'espère donc que cela vous a été utile. 22. Module 4 : Intro: Bonjour et bienvenue dans le module numéro quatre. Dans ce module, vous allez découvrir les cinq façons dont l'IA peut vous aider à devenir un meilleur développeur Web et à coder plus rapidement. Rappelons donc rapidement ce que nous avons appris dans les modules précédents. Dans le module numéro deux, vous avez donc appris les bases de l'IA. Donc, en gros, comment utiliser correctement les chats IA, comment créer correctement une invite, dans le numéro du module. Troisièmement, vous avez abordé les outils de codage AI tels que les chats, V zero, Codium, l'assistant de décodage et l'éditeur de code AI Cela signifie donc que vous disposez tous les outils nécessaires et des compétences nécessaires pour les utiliser. Donc, dans ce module, le module numéro quatre, nous allons passer à la partie application. Nous aborderons donc cinq manières dont l'IA peut vous aider à améliorer votre flux de travail et devenir un développeur Web plus performant. Et il est important que je le dise de cinq manières différentes, car j'ai beaucoup réfléchi. Et ce sont les cinq principales façons d'utiliser l'IA. Cela signifie qu'il n'y a plus besoin d'y penser, y a-t-il autre chose ? Y a-t-il autre chose que je puisse faire ? Il s'agit donc de cinq méthodes et tout le reste, cela passe simplement par l'une de ces cinq méthodes. Nous allons donc les aborder et espérons-le, vous apprendrez à les utiliser. 23. Leçon 1 : Bienvenue à la leçon numéro un. Dans cette leçon, nous allons faire un bref aperçu que nous allons apprendre dans ce module. Donc, dans le module numéro quatre, nous allons aborder les cinq méthodes et plus. Je t'ai aussi préparé des bonus. La première chose que l' IA peut vous apporter est donc de créer de nouvelles fonctionnalités. Et probablement, si vous vous souvenez de ce que nous avons abordé dans un curseur, éditeur d' IA lorsque nous avons demandé au curseur créer des fonctionnalités pour la calculatrice. Ensuite, il faut refactoriser le code existant parce que parfois, encore une fois, dans le curseur, nous avons indiqué que nous avions pris une fonction et demandé à la simplifier Parce que vous avez très souvent besoin de simplifier votre code ou parfois, disons qu'il a codé des éléments qui ne vous sont pas si familiers, comme une structure, par exemple, encore une fois, dans une calculatrice, il a codé un code JavaScript en classe et que tout le monde ne connaît pas les classes, et peut-être souhaitez-vous simplement avoir des fonctions distinctes. Le troisième est très courant, c' est la correction de bogues, différents types de bogues. Vous savez, il n'y a aucun commentaire ici. Le numéro quatre, c'est de suggérer des solutions. Par exemple, encore une fois, vous aimeriez implémenter quelque chose comme disons que vous avez une fonctionnalité en tête et que vous dites « Oh, j'aimerais la créer ». Mais je ne sais pas vraiment quelle est la meilleure approche ou je ne comprends même pas vraiment comment procéder. Vous pourriez donc demander à l'IA elle peut être à la fois une solution conceptuelle, par exemple , en termes d'explication, une explication de base de ce que vous devez faire, ou une solution de codage. Et numéro cinq, et plus un en prime, c'est une catégorie d'apprentissage, l' apprentissage en tant que développeur Web. Le numéro cinq explique donc le code. Disons, encore une fois, que l'IA a généré du code, ou que vous avez pris du code d'un site Web comme Github ou peut-être un stylo de code et que vous ne savez pas vraiment ce que cela fait Vous pourriez donc demander à l'expliquer Et en prime, le mentor personnel, nous allons aborder ce chapitre en particulier. J'aime vraiment ça. C'est là que vous demanderez à AI d'être votre mentor personnel pour créer un programme de formation. Et puis, lorsque vous avez mis en œuvre une solution, demandez à revoir cette solution. Si vous vous souvenez peut-être, lorsque nous abordions le module numéro deux, je vous montrais la tâche consistant à compter le nombre de mots dans une chaîne, tâche JS et, en fait, cette tâche spécifique. C'était comme un mentorat personnel de la part de l'IA. Ce sera donc un module assez intéressant. 24. Leçon 2 : Bonjour, et bienvenue à la leçon numéro deux. Dans cette leçon, nous allons découvrir que la première façon dont AAA peut nous aider est de créer de nouvelles fonctionnalités. Donc, pour l'ensemble de ce module, nous allons prendre comme exemple un projet, une simple page de commerce électronique. Alors allons-y et voyons. Mes amis, nous sommes à l'intérieur du curseur, et comme vous pouvez le constater, ce qui est intéressant dans l'ère moderne c'est que tout change très vite. Dans le module précédent, que j'ai enregistré, très récemment, l'interface utilisateur était, comme vous vous en souvenez, ici en haut, nous avions le chat, compositeur et l'outil de recherche de bogues, et maintenant la nouvelle mise à jour est sortie, et maintenant nous avons le chat. Ne discutez qu'ici, comme vous pouvez le voir, et l'agent, qui était auparavant compositeur, est là pour demander et éditer également en dessous de cela. Oh, mes amis, au début de la leçon, nous allons rapidement explorer et récapituler le fonctionnement de l'agent dans Cursor Works, ce qui vous sera également très utile J'ai donc préparé une invite très simple : créer un commerce. Page produit des livres, page doit être composée de deux parties. Liste des produits et filtres, liste des produits n'est qu' une grille de fiches, certaines conditions relatives aux fiches concernant l'image, le nom, la catégorie et le prix, les catégories ici et certaines conditions pour les filtres. Il s'agit donc d'un filtre de catégorie pour trois articles, fourchette de prix et la disponibilité. Il existe donc également une simple balise de texte que nous utilisons dans ce cours : HTML CSS et Manila JS. Alors allons-y et voyons. Les styles sont en cours de génération. Maintenant, comme vous pouvez le voir, le fichier contenant les données, les données GS sont en cours de génération, et la dernière chose est un script JS. Mes amis, il a donc terminé sa génération. Cliquez donc sur Accepter A et voyons le projet dans l'environnement du navigateur en direct. Mes amis, nous sommes dans navigateur et nous pouvons voir qu'il a fait sa première itération, où nous voyons les cartes avec une image, un nom, une catégorie et un prix, et des filtres sur ce côté Essayons donc le filtre. Nous cliquons sur une fiction, et nous voyons la fiction. Maintenant, nous voyons tout. Allons-y pour les enfants. Nous voyons des enfants. Faisons une rupture de stock. Nous voyons des ruptures de stock. Comme vous pouvez le voir, nous avons ici un bogue. Vous savez, encore une fois, ce dont nous avons parlé, c'est tout à fait normal d'avoir des bugs. Passons maintenant au prix. Allons-y, je ne sais pas, 16$, 16 à 30$ et nous pouvons voir que nous avons des livres dans cette gamme Alors allons-y et commençons à travailler avec la partie où nous pouvons ajouter des fonctionnalités ou apporter des modifications. Donc, dans un premier temps, comme nous n' ajoutons que six éléments, ajoutons-en d'autres. Faisons ajouter six articles supplémentaires. Et comme vous vous en souvenez probablement, il existe des éléments de contact, et nous pouvons choisir Data JS car les données proviennent de ce fichier. Alors allons-y, mes amis, explorons le dossier. Et comme vous pouvez le constater, nous avons les articles numéros sept, huit, neuf et tout ce qui va jusqu'à 12. Donc six articles et plus. Comme vous pouvez le voir ici, nous avons 12 livres. en avons donc fait un peu, dans ce cas, en ajoutant du contenu Mes amis, nous sommes donc dans une leçon où nous demandons à l'IA de créer certaines fonctionnalités. J'ai donc trouvé une invite. Voyons voir. Ajoutez donc un filtre de saisie de recherche par titre en haut de la page. Le filtrage doit être effectué à chaque frappe de touche. Et comme vous pouvez le constater, il a fait du travail, HTML, du CSS et, bien sûr, du JavaScript. Voyons donc le résultat final. Comme vous pouvez le constater, nous avons le champ de saisie Recherche par titre en haut de la page. Voyons voir. P aussi, le pouvoir de l'habitude. OK, allons-y. Donc, juste P, et il nous montre tous les livres contenant une lettre P. Nous essayons donc de voir 1984, et c'est ce que nous voyons en ce moment. Donc, mes amis, je pense que vous avez l'idée principale que vous pouvez demander à votre outil d'IA. Dans ce cas, il s'agit d'un curseur pour ajouter des éléments. Et encore une fois, il est important de comprendre que l'IA ne fait pas son travail parfaitement, mais qu'il ne s'agit que d'une première ébauche. Ensuite, vous pouvez utiliser vos connaissances en matière de codage pour apporter quelques modifications. Par exemple, si vous souhaitez modifier la largeur de ce champ de recherche ou si vous souhaitez le transformer simplement en icône, puis lorsque vous cliquez dessus pour l'agrandir, etc., vous pouvez le faire vous-même ou demander à AI. J'espère que vous avez une idée générale de la façon de procéder. 25. Leçon 3 : Bienvenue à la troisième leçon. Dans cette leçon, nous allons explorer la deuxième méthode, qui consiste à refactoriser le code existant. Alors allons-y. Donc, à l'heure actuelle, lorsque nous examinons nos fiches produits, nous constatons que la rupture de stock n'est pas une évidence. La façon dont nous voyons les ruptures de stock est donc d' utiliser des couleurs légèrement atténuées sur la carte Mais que se passerait-il si nous voulions être en rupture de stock au même endroit où nous avons d'autres éléments tels que le nom, la catégorie et le prix. Voyons donc comment nous pouvons y parvenir. Nous sommes donc dans le curseur en ce moment, et jetons un coup d' œil au code. Et, vous savez, en regardant un peu notre code, j'ai pu constater que le statut du produit en stock et en rupture de stock est généré ici et que d' autres éléments tels que le nom, la catégorie et le prix sont générés ici. Je viens donc de sélectionner cette ligne, vous pouvez voir entre 25 et 43. Alors voilà, script 25 43, et j'ai demandé un simple bal de fin d'année. J'aimerais donc avoir l'état de rupture de stock dans la classe « Informations sur le produit ». Donc c'est juste là. Alors allons-y et voyons ce que cela va faire. Le curseur a donc terminé sa réflexion, et nous pouvons maintenant voir la différence. Il a donc retiré les articles en rupture de stock d' ici et les a placés là. Donc, pour le moment, acceptons les modifications ici et là. Appuyez ici pour voir le résultat dans le navigateur. tour est joué. Et comme vous pouvez le constater, nous avons des articles en stock et en rupture de stock, ce qui semble plutôt bon, sans aucun inconvénient et tout est assez clair pour le moment Nous allons donc vérifier le filtre. Donc en stock, nous voyons l' Istock et maintenant en rupture de stock. Encore une fois, il est important de noter que c'est toujours une bonne chose il est important de noter que c'est toujours une bonne si vous comprenez le code, car j'ai d'abord examiné le code et demandé une modification spécifique à un endroit précis. Et en ce qui concerne les IA, plus vous êtes précis, plus vous obtiendrez des réponses de qualité plus vous obtiendrez des réponses de qualité, ce qui vous permettra, là encore, d'économiser beaucoup de temps et d'efforts. Et c'est l'une des façons dont vous pouvez construire plus vite deux, voire trois fois. 26. Leçon 4: Bienvenue à la quatrième leçon. Dans cette leçon, nous allons explorer la troisième façon dont l' IA peut nous aider. Corrige un bogue. Alors allons-y. Nous sommes donc dans notre application de librairie, et comme vous pouvez le voir, lorsque nous survolons les livres en rupture de stock, nous recevons ce message Pour une raison ou une autre, nous avons un livre sur les chenilles très affamés. Pour une raison ou une autre, nous voyons l'Arista ici, et comme vous pouvez le voir ici, lorsque je passe le curseur dessus, nous obtenons un comportement très étrange Notre objectif est d'en faire quelque chose , alors corrigez ce bogue. Il est important de préciser que, comme vous l'avez vu dès le début de ce module, IA a créé le code contenant ce bogue dès le début, et nous assistons maintenant à de l'action en direct. Comment pouvez-vous travailler avec cela ? Donc, mes amis, nous sommes dans le curseur. Et encore une fois, nous revenons à ce que je vous ai dit à propos l'ensemble du cours, à savoir que la première chose retenir est de solides compétences en codage. Il s'agit de comprendre comment le projet est construit, de comprendre les connexions. Et les modèles comportementaux de chaque partie de votre application. Et donc, bien sûr, je comprends que l'action de survol provient du CSS Donc, tout d'abord, ce que je vais essayer de faire, c'est de rechercher les éléments du survol Et comme vous pouvez le constater, nous devons survoler les comportements selon notre style. Le premier concerne les filtres, et nous savons que ce n'est pas le cas. Et la seconde, la fiche produit, nous pouvons le voir ici, ne fait que traduire. Cela signifie que ça monte ou descend. Donc ce n'est pas ça. Alors, ensuite. Alors, où trouvons-nous cela ? Donc, probablement, comme nous ne l'avons pas dans notre code HTML généré par programmation, il devrait être ici Et c'est probablement soit avant, ce que nous n'avons pas, soit après notre élément puta Et voala, nous avons ce qu'il faut. Et c'est exactement ce que nous recherchions , car cela indique qu'il s'agit d'un stock et qu'il a une couleur rougeâtre Faisons donc la chose courante, c' est-à-dire supprimer ce code de la compilation dans le navigateur et voir le résultat Et comme nous pouvons le constater, il a fait le travail. Nous ne pensons pas que ce produit soit en rupture de stock. Encore une fois, il s'agit de connaître votre métier, et nous allons maintenant passer à la partie IA. Nous sommes donc de retour dans notre éditeur, et comme vous pouvez le voir, j'ai décommenté l'élément qui suit le pseuda Nous avons donc retrouvé ce bogue. Faisons donc appel à l'IA pour obtenir de l'aide. Et comme vous pouvez le constater, je ne définis aucun contexte, aucun fichier, rien car supposons que nous ne sachions pas d'où vient cette erreur. Et j'ai défini l'invite en langage naturel. Je dis que lorsque je passe la souris sur la carte dont le statut est en rupture de stock, je vois le bloc indiquant ce statut Retirez-le. Je ne dois rien voir sur Hovered. Donc, mes amis, un langage naturel assez simple. Voyons donc ce que cela va faire. Mes amis, il a fait le travail, et comme vous pouvez le constater, à l'heure actuelle, avant que nous n'acceptions le changement, il a supprimé exactement ce blocage que nous avions fait nous-mêmes. Acceptons-le donc. C'est fini, et voyons le résultat. Nous sommes dans notre librairie et il n'y a aucun état de rupture de stock Encore une fois, mes amis, comme vous pouvez le constater, lorsque vous connaissez le code, il est beaucoup plus facile de naviguer dans les actions de votre IA. 27. Leçon 5: Venez à la leçon numéro cinq. Dans cette leçon, nous allons explorer la quatrième façon dont l'IA peut nous aider. Il s'agit donc d'une suggestion de solutions et de meilleures pratiques. Allons donc voir comment cela fonctionne. Nous sommes donc sur notre page eCom, et la fonctionnalité très courante des magasins modernes est un bouton ou un bouton d' ajout à la liste de souhaits quelque part sur une carte Supposons que nous voulions ajouter quelque chose comme ça, que nous ne sachions pas quelle est la meilleure solution ou que nous ne sommes pas sûrs en général. Et nous aimerions avoir une suggestion de solution de la part de l'IA. Allons-y. Nous sommes donc à l'intérieur du curseur dans SAI, et nous savons ce qu'il est important de savoir. Donc, avant, nous utilisions un mode agent pour générer des fichiers dans le code. Et dans ce cas précis, nous aimerions obtenir une sorte de consultation. Nous devons donc passer en mode demande. OK ? Et avant de partir, il est recommandé de définir un contexte pour la base de code. Et lorsque votre projet est assez important, vous ne savez parfois pas exactement comment vous allez faire quelque chose Il vaut donc mieux utiliser l'IA pour avoir une vue d'ensemble, c' est-à-dire votre base de code. C'est donc une invite assez simple, qui dit que je voudrais ajouter que le bouton de liste de souhaits sur la carte devrait être une icône SVG. Quelle serait la bonne approche ? Donnez-moi la feuille de route de mise en œuvre de cette fonctionnalité. Encore une fois, il ne s'agit pas d'une implémentation de la fonctionnalité du code. C'est une sorte de consultation. Allons-y. L'IA a donc terminé son travail, et nous avons maintenant quelques explications. Et cela explique que vous pouvez ajouter un nouvel ensemble. Il vous donne du balisage, styles, une gestion des événements et certaines étapes pour les implémenter Encore une fois, comme je l'ai déjà dit, il s'agissait d'une pratique de consultation. C'est donc à vous de décider ce que vous voulez faire à partir de cette étape. Si vous le souhaitez et que vous voulez le faire vous-même, vous pouvez y aller. Mais par exemple, si vous vous sentez paresseux ou n'êtes pas sûr vous n'êtes pas sûr de pouvoir le faire vous-même, vous pouvez revenir en mode agent et le faire. Donc, mes amis, disons que j'ai aimé sa suggestion, puis je suis passé mode agent et j'ai dit quelque chose comme ça. J'aime les suggestions, allez-y et mettez-les en œuvre. Il a donc implémenté le code comme nous l'avons vu précédemment. Je l'ai accepté, et nous verrons le résultat final. Nous sommes dans notre librairie, et elle possède des fonctionnalités incroyables, comme vous l'avez demandé Et il est important de comprendre que lorsqu'il s'agit de demander des suggestions de solutions ou les meilleures pratiques, vous pouvez parfois simplement utiliser, clader ou discuter avec le GPT, surtout si c'est quelque chose de courant Supposons que vous souhaitiez demander l'authentification sur votre application, vous pourriez simplement poser des questions sur un cas spécifique. Donc, en général, j'utilise le Next Jazz, qui serait la meilleure authentification pour SAS, entre 100 et 1 000 utilisateurs. Et vous pouvez également indiquer votre budget, par exemple. Encore une fois, même le Cloud ou Cha GPT vous donneront, vous savez, quelques suggestions pour vous savez, quelques suggestions choisir la bonne technologie Il en va de même pour les meilleures pratiques, par exemple, si vous prévoyez d'ajouter des images sur votre site Web. Vous pourriez y aller et demander les meilleures pratiques. Supposons que vous ayez créé une page de destination, quel type de graphisme est le meilleur moyen d' utiliser une combinaison de Web PP et GJPG SVG, ou des stratégies de rendu et des réseaux Donc c'est un peu comme ça, mon ami. Vous devez donc choisir la technologie Echo AI en fonction de votre tâche. 28. Leçon 6: Bonjour et bienvenue à la leçon numéro six. Dans cette leçon, nous allons explorer la cinquième façon dont IA peut nous aider en expliquant notre code. Commençons donc. Nous sommes donc dans le vif du projet que nous avons réalisé tout au long de ce module. Supposons que nous aimerions obtenir des explications pour notre script. C'est assez simple, comme vous pouvez le voir, il suffit de demander le commandement, vous et moi discutons. Il est important d'opter pour l'option demander, car nous aimerions simplement obtenir des informations sur l'explication. Et comme contexte, oui, nous avons spécifiquement sélectionné le script z parce que nous aimerions obtenir une explication pour ce fichier en particulier . Il suffit de saisir. Demandez très simplement, en fait, expliquez le code, et appuyons sur Entrée. Comme vous pouvez le constater, j'ai commencé à nous donner une explication. Et bien sûr, vous pouvez parcourir ces explications une par une et commencer à comprendre et à obtenir votre point de vue. Une autre façon de demander à l'IA de nous aider à expliquer le code est la suivante. Disons que nous obtenons la fonction, nous la surlignons et que nous cliquons simplement sur Commande, et nous obtenons ce petit champ de saisie. C'est donc un peu une façon locale de faire en sorte que l' IA fasse quelque chose pour vous. Donc ici, encore une fois, nous lui demandons d'expliquer le code, puis de cliquer simplement sur Enter. Et comme vous pouvez le constater, cela nous donne une sorte de commentaires en ligne que nous pouvons lire. Honnêtement, ces deux méthodes fonctionnent et la même chose que vous pouvez faire avec une extension Codium, dont nous avons parlé précédemment Mais selon mes préférences personnelles, lorsque je demande habituellement à expliquer le code, si c'est quelque chose de très rapide, je pourrais utiliser cette fonctionnalité en ligne Mais surtout, lorsque j' essaie de comprendre le code, j'aimerais y attirer un peu plus d'attention, et je préfère utiliser le chat GPT Oh, mes amis, nous sommes dans le chat GPT. Et encore une fois, lorsque vous répondez à l'invite, vous pouvez être explicite ou vous pouvez utiliser des instructions très courtes, dont j' explique généralement le code La valeur la plus basse par exemple, ce moment, j'ai demandé à un débutant d' expliquer le code ci-dessous. Parfois, je pourrais dire expliquer le code ci-dessous de manière explicite, quelque chose comme ça. Donc, en général, cela suffit parce que, comme nous en avons parlé précédemment, si vous avez une expérience, vous comprenez parfois la situation dans son ensemble et vous avez peut-être besoin de détails. Voyons donc ce que cela va faire. Comme je l'ai déjà mentionné, ce que j'aime vraiment à propos de Chad GPT pour cette tâche spécifique, c'est parce que, comme vous pouvez le constater, il divise notre code en plusieurs parties. Vous voyez les points saillants du code très pratiques que vous pouvez parcourir, puis vous pouvez simplement poser quelques questions supplémentaires sur des points spécifiques que vous n'avez pas bien compris. Encore une fois, c'est juste une préférence personnelle. J'aimerais juste le partager avec vous. 29. Leçon 7: Bonjour, mes amis, et bienvenue à la leçon numéro sept. Et dans cette leçon, j' aimerais que vous partagiez les avantages d'utiliser l' IA pour vous aider à devenir un développeur meilleur et plus efficace. Je vais donc vous montrer comment utiliser l'IA en tant que mentor personnel en IA. Notez donc que si vous vous souvenez de l' époque qui a précédé l'IA, parfois lorsque vous réalisez projet ou que vous appreniez de nouvelles matières, vous vous posiez probablement de nombreuses questions spécifiques sur questions spécifiques sur certains détails ou parce que vous aimeriez comprendre quelque chose ou peut-être certains détails de mise en œuvre. Et il n'est pas très clair pour un débutant dans nouveau sujet d' avoir une vue d'ensemble pour comprendre ces détails. Et, euh, comme précédemment, j'utilisais des forums, des groupes de codage privés où je posais des questions et obtenais les réponses de personnes réelles. Et encore une fois, il peut s' une toute petite chose ou même d'une préférence. Donc, pas quelque chose de spécifique où vous obtiendrez une réponse opiniâtre, pas quelque chose Maintenant, avec l'ère de l'IA, cela a changé la donne pour nous, car vous pouvez désormais avoir un nous, car vous pouvez désormais avoir développeur Web senior avec de nombreuses années d'expérience avec une énorme base de code et c'est un peu comme un cerveau. Cela pourrait répondre à un très grand nombre de vos questions. Jetons donc un coup d'œil. Donc pour cela, je préfère utiliser le chat GPT car, encore une fois, c'est gratuit Il contient un nombre illimité de messages, et c'est généralement suffisant lorsque je souhaite profiter d'une opportunité de mentorat Donc, comme vous pouvez le voir ici, j' aimerais vous le montrer. L'invite de démarrage est assez basique. Veuillez donc répertorier les projets pour débutants pour pratiquer le positionnement CSS et le modèle de boîte. Imaginons qu'il s'agisse d'un nouveau sujet où vous venez lire une période, vous savez, un chapitre de MDN Docs et quelques articles, vous aimeriez vous entraîner pour le comprendre un peu plus en C'est pourquoi je demande d'énumérer, vous savez, un projet permettant aux débutants de pratiquer ce truc. Et maintenant, nous pourrions même, vous savez, prendre du recul et demander d' améliorer cette invite en utilisant la formule d'invite que nous avons apprise précédemment, l'exemple de contexte de tâche, et je le demande La première étape de l'invite consiste donc à utiliser une formule pour l'invite, tester des contextes et des exemples, réécrire l'invite ci-dessous en fonction de cette formule, et j'énonce Et comme vous pouvez le constater, il propose une certaine extension pour les tâches, les contacts et les exemples, et nous avons maintenant le dernier message. Il semble donc maintenant assez étendu. Pouvez-vous donc suggérer un projet convivial pour les débutants qui aide à pratiquer positionnement CSS et le modèle de boîte ? Des exemples pourraient être. Essayons donc ensemble, d'utiliser cette invite. Donc, copions-le. Ça et on verra ce que ça va faire. Génial. Il a terminé son travail et, comme vous pouvez le constater, nous avons quelques idées de projets tels que la mise en page des cartes, barre de navigation simple, un pied de page autocollant, etc. Donc pas mal, vraiment pas de mauvaises idées à mettre en pratique. Maintenant, disons, par exemple, que nous en avons choisi certains, et encore une fois, nous ne savons pas vraiment comment procéder à partir de là. La prochaine étape entre donc en jeu. Maintenant, je vais vous montrer le deuxième bal de fin d'année que j'utilise très souvent, et la version de base ressemble à ceci. Créez un didacticiel étape par étape avec instructions et des explications explicites le nom du projet pour l'application List dans Jazz et je déclare également très souvent que je suis débutant. C'est bon. Et encore une fois, cela a été réécrit, et maintenant nous avons une invite assez limitée pour l' Nous pouvons donc maintenant utiliser cette invite très bien structurée et l'utiliser avec une combinaison de projets que nous aimerions mettre en pratique. Voyons donc la version finale. La façade ressemble donc à ça créez un didacticiel étape par étape convivial pour les débutants avec instructions explicites et des explications pour créer une infobulle en CSS uniquement C'est donc un projet qu'elle a suggéré. Et la deuxième partie, le didacticiel, devrait couvrir la configuration de la structure HTML, style avec CSS et tout ce que vous jugez important. Veuillez vous assurer que chaque étape est clairement expliquée. Voyons donc ce que cela va faire. Chat GBT a donc fait son travail, et comme vous pouvez le constater, nous avons reçu le tutoriel étape par étape, que nous pouvons commencer à pratiquer immédiatement. Nous allons donc passer à la première étape, le code HTML, et les explications, et à la deuxième étape avec CSS. Encore une fois, avec des commentaires. Troisième étape, explicative, CSS et quatrième étape, comment tester cela Et aussi, il vous a indiqué les prochaines étapes. Je pense que dans l'ensemble, c'est un très bon système pour pratiquer quelque chose. Et la dernière chose que j' aimerais partager avec vous dans cette leçon est la suivante. Supposons donc que vous ayez appris une matière, le nouveau concept ait été abordé et que vous l'ayez compris dans une certaine mesure. Ainsi, par exemple, très récemment, j'ai découvert les stratégies de rendu dans Next Has. Donc, après avoir lu, vous savez, la documentation, regardé des didacticiels , des vidéos explicatives, j'essaie de vérifier si j' ai bien compris ces concepts. Et c'est ce que je fais habituellement. Voici donc comment je vérifie ma compréhension du sujet. Ainsi, par exemple, comme je l'ai déjà dit à propos des prochaines stratégies de rendu es. Il y en a donc quatre principaux. Imaginons que je rédige mon résumé. SSR est une option par défaut, CSR NAS climb, da da, da, da, et puis ce que je demande habituellement En fin de compte, est-ce que j'ai raison ou simplement, vous savez, une forme abrégée, correcte. Et puis je vois la réponse de l'IA. Donc, comme vous pouvez le voir, vous avez généralement raison, mais une petite précision concernant le SSR. Et il commence à vous faire part de ses commentaires, puis vous pouvez discuter avec lui, vous savez, poser quelques questions supplémentaires jusqu'à ce que vous obteniez le matériel de la bonne façon. J'espère donc que cela vous a été utile. 30. Exercice: Mes amis, c'est le moment de faire de l'exercice. Il est temps pour vous de mettre en pratique ce que nous avons abordé dans ce module. Tu as beaucoup appris. La tâche est assez simple. Votre objectif est donc de tester chacune des méthodes que nous avons apprises au moins une fois, mes amis, au moins une fois, afin que vous obteniez les connaissances et les sensations de base. Alors d'abord, allez-y et élaborez un projet. Encore une fois, je vous suggère d'utiliser le chat GPT, par exemple, et de demander à vous donner des idées de projets. Idéalement, s'il s'agit de quelque chose de petit, car encore une fois, votre tâche principale est de pratiquer la mécanique, comprendre les principes et les fondements, puis de l'appliquer à quelque chose de plus grand. Ensuite, votre objectif est de planifier les interactions que vous allez utiliser. Permettez-moi de vous donner un exemple. La première étape peut donc être une fois vous avez créé une application que vous souhaitez créer, par exemple, encore une fois, nous utilisons la page de commerce électronique. Vous pourriez donc demander à AI de créer une application en tant que développeur Web débutant, et pour cela, vous pourriez utiliser le curseur. Ensuite, vous pourriez le demander à certaines fonctionnalités, selon ce qui vous convient le mieux. Ensuite, vous pourriez demander à refactoriser le code en tant que développeur Web senior, car, encore une fois, c' était auparavant en tant que débutant Ensuite, vous pouvez créer des bogues et demander à les corriger, ou si vous repérez une boîte, essayer, vous savez, peut-être de réfléchir à des moyens créatifs de gérer cela. Ensuite, vous pourriez lui demander de vous conseiller certaines fonctionnalités que vous pouvez ajouter à ce projet, et à la fin, vous pourriez vous entraîner à expliquer le code. Et mes amis, je vous suggère vraiment d'utiliser un autre outil. Encore une fois, parce que l'idée principale est de trouver votre propre style, quelque chose qui vous convient. Alors allez-y et commencez l'exercice. 31. Module 4 : Résumé: Félicitations pour avoir terminé avec le module numéro quatre. À ce stade, vous disposez de tout ce dont vous avez besoin pour réussir à créer des projets avec l'IA, car tout d'abord, vous avez appris les outils d'IA que vous pouvez utiliser dans votre travail, tels que les chats, les assistants de codage et les éditeurs de code IA. De plus, vous avez appris les manières spécifiques dont vous pouvez utiliser ces outils dans vos projets, et il est maintenant temps de passer à la pratique. 32. Module 5 : Intro: Bonjour et bienvenue dans le module numéro cinq. Dans ce module, nous allons exporter deux vitesses de génération de code. Mes amis, dans les leçons précédentes, vous avez appris avec succès les fondements de l'IA. Ensuite, vous apprenez les outils de codage de l'IA tels que les chats, les éditeurs de code, les chats spécialisés, les assistants de codage. Et dans le module précédent, vous avez abordé les cinq manières d'utiliser l'IA pour le codage. Cela signifie que vous avez maintenant des instruments et que vous savez exactement comment les utiliser. Eh bien, il est temps d'aller découvrir à quelle vitesse vous pouvez les utiliser. Dans le module 5, nous allons donc aborder les première et deuxième vitesses dites d'utilisation de l'IA et celle à choisir. 33. Leçon 1 : Bienvenue à la leçon numéro un. Dans cette leçon, nous allons donner un bref aperçu de ce que nous allons aborder dans le module. Donc, en gros, ce que j' appelle la première vitesse , c'est lorsque vous avez le processus de copier-coller Cela signifie que vous générez du code dans Cloud ou chat GBT, puis que vous le collez dans votre éditeur de code Alors vous avez une erreur. Encore une fois, vous collez ce code dans le chat ou peut-être VZeroExplore quelque chose , puis vous le collez à nouveau. Et la deuxième vitesse, ce que j'appelle l'absence de copier-coller. C'est lorsque vous utilisez quelque chose dans votre éditeur de code, par exemple un assistant de codage ou même l'éditeur de code AI. Dans ce module, nous allons parler des différents aspects de la première vitesse et de la seconde vitesse, avantages et des inconvénients, car ce que vous allez choisir , c'est votre préférence personnelle en fonction de vos conditions. 34. Leçon 2 : Bienvenue à la leçon numéro deux. Dans cette leçon, nous allons explorer la première vitesse. Comme nous l'avons indiqué précédemment, la première vitesse consiste copier-coller du code dans les deux sens, au chat, à générer du code, à l'analyser, puis à accéder à votre éditeur de code, à le coller et à vérifier si tout fonctionne Alors d'abord, couvrons quelques bons côtés, des côtés forts. Bien entendu, il y a un meilleur contrôle de la compréhension car vous effectuez chaque tâche spécifique une par une. , c'est excellent pour apprendre Encore une fois, c'est excellent pour apprendre, car il existe une approche granulaire, et à chaque étape, vous pouvez vous arrêter, réfléchir, tester, puis aller plus loin prochain avantage est que vous pouvez utiliser à peu près n'importe quel chat que vous souhaitez, Chat GPT, Claude, ou même Gemini ou Deep Vous êtes donc en quelque sorte indépendant de votre choix d'outil. Bien entendu, comme il s'agit d'une approche granulaire, il y a moins de risques que quelque chose d'inattendu se produise lorsque vous vérifiez chaque étape, chaque modification de votre code Maintenant, le côté faible, les inconvénients. Donc bien sûr, le flux de travail sera un peu lent car vous devrez aller sur le chat, coller, générer le code, copier, revenir en arrière. De plus, cela nécessite plus d'attention de votre part, encore une fois, car chaque petit bout de code, vous devez le vérifier, coller, vous assurer que chaque petit caractère, y compris les crochets, est inclus, et rien n'est oublié. Et encore une fois, comme cela demande plus d'attention de votre part et beaucoup de mouvements, il y a plus de risques de faire des erreurs. Pour conclure, cette première vitesse convient parfaitement aux débutants en codage et en particulier aux débutants en IA. Encore une fois, même si vous êtes un développeur expérimenté mais pas aussi expérimenté en IA, allez-y et commencez par le speed one. Et deuxièmement, si vous avez un budget ou pas de budget, c'est un très bon point de départ car ils sont quasiment gratuits. 35. Leçon 3 : Leçon, nous allons explorer la deuxième vitesse. Donc, en gros, comme nous l'avons indiqué précédemment, la deuxième vitesse est celle où vous n'avez aucun processus de copier-coller Tout se passe dans votre éditeur de code. Souvenez-vous de Cdium ou du curseur, alors vous comprenez probablement de quoi je parle Tout d'abord, recommençons par la taille forte. L'essentiel est un flux de travail plus rapide car tout se passe dans votre éditeur de code. Vous pouvez immédiatement refactoriser le code, utiliser un agent si vous êtes le curseur Bien entendu, vous disposez d'une bonne fonction de saisie automatique car, encore une fois, le codium ou le curseur connaissent le contexte de votre projet et peuvent immédiatement suggérer quelque chose dans vos styles ou votre script Encore une fois, en ce qui concerne le processus de correction des erreurs, c'est plus facile car il connaît votre base de code et peut ainsi suggérer une solution appropriée beaucoup plus rapidement. Et vous commettez moins d'erreurs car beaucoup de choses se sont passées du côté de l'IA. Maintenant, les points faibles. Encore une fois, si vous aimez contrôler chaque élément de votre code, vous vous sentirez un peu mal à l'aise car l'IA couvre assez bien votre code, comme vous vous en souvenez probablement dans notre cours d'essence. Ensuite, si vous faites trop de codage par IA dans votre processus en général, vous pouvez commencer à atteindre votre niveau de compétence car l'IA fait tout pour vous. Ensuite, bien sûr, vous pouvez obtenir des modifications de code inattendues, car encore une fois, surtout si vous utilisez un agent, il pourrait réécrire de nombreuses parties de votre code Et enfin, vous commencez à dépendre d'un outil spécifique tel que le curseur, qui est peut-être bon et peut-être moins bon. C'est à vous de décider, mais c'est la réalité. Donc, pour résumer, la deuxième vitesse est davantage destinée aux codeurs expérimentés et aux expérimentées dans l'utilisation de l' IA et qui ont également un budget car elles sont payantes, surtout si vous écrivez beaucoup de 36. Leçon 4: Bienvenue à la quatrième leçon. Dans cette leçon, nous allons parler un peu de la vitesse à choisir , car parfois on ne sait toujours pas exactement quoi et comment. Donc, pour résumer rapidement, comme nous l'avons indiqué précédemment, cela ressemble plus à une déclaration canonique selon laquelle la première vitesse convient mieux aux débutants et au codage en IA, et si vous avez des contraintes budgétaires, et la seconde est préférable pour les codeurs expérimentés et les utilisateurs d' IA qui ont un budget pour En fin de compte, je tiens à le souligner à nouveau. Même lorsque vous deviendrez développeur expérimenté et un utilisateur expérimenté du codage par IA, ce sont toujours préférences personnelles qui dépendront de votre exploration de ces outils, vos approches du codage en général et de votre expérience. Parce que encore une fois, comme je l'ai déjà dit, certains développeurs expérimentés se fient totalement à un curseur pour créer la quasi-totalité du projet. Comme on dit, 90 % du code est écrit par l'IA, puis ils se contentent à un curseur pour créer la quasi-totalité du projet. Comme on dit, 90 % du code est écrit par l'IA, puis ils se contentent de vérifier et d'autres développeurs expérimentés peuvent utiliser uniquement, par exemple, Cdium et ils pensent que c'est suffisant pour eux, peut-être juste avec un peu de motte. Encore une fois, ils sont tous deux des développeurs matures expérimentés et performants, mais l'approche des outils et l'utilisation de l'IA peut être très différente, car encore une fois, il est très important de comprendre que parfois, au premier coup d'œil, lorsque vous n'avez pas autant d' expérience avec l'IA, au premier coup d'œil, IA peut créer très rapidement certaines fonctionnalités du code, et vous dites, par exemple, Waouh, j'ai l'impression d'aller tellement vite. Mais vous pourriez alors rencontrer un problème de code ou de connexion entre vos modules, des ou de connexion entre vos modules, sous-systèmes qui ne comprennent pas vraiment pourquoi cela s'est produit et des problèmes de codage potentiels, et vous passerez de nombreuses heures à essayer de comprendre et de résoudre ce problème, sans oublier le temps gagné dans la partie génération de code. Encore une fois, vous devez être prudent et laissez-moi vous faire part de mon approche personnelle, façon dont je fais au moins ces derniers temps. Donc, comme vous pouvez le voir, ce carré avec une bordure épaisse, disons que c'est un projet. C'est un petit excédent ou une application Web que je suis en train de créer. Et les petits carrés qu' elle contient représentent certaines parties de cette application, par exemple une partie d'authentification , des routes, une API, etc. Je planifie donc généralement mon projet en plusieurs parties. Et, bien entendu, vous ne pouvez pas planifier l'ensemble du projet dès le début car c'est impossible. Je veux dire, c'est pourquoi il s'agit d' une sorte de planification flexible. Je ne suis pas comme au début, j'ai besoin d'une authentification, d' une interface pour quelques pages et de quelques API pour récupérer les données Et puis je commence, vous savez, mon projet a déjà une certaine structure, il y a une certaine division des préoccupations. Et fonctionnalité. Ensuite, je peux dire, par exemple, cette partie, je vais utiliser l'IA, et cette partie, je vais le faire moi-même parce que, par exemple, depuis le dernier de mes derniers projets, je pourrais avoir un code d' assez bonne qualité et une solution qui a déjà été mise en œuvre, comme c'est le cas, par exemple, pour authentification ou comme Stripe pour les systèmes de paiement. Et pour les nouvelles choses, vous savez, vous pourriez dire que c'est ce que j'ai l' habitude de dire. OK, essayons avec l'IA. Et encore une fois, je préfère une approche plus granulaire. Cela signifie que je pourrais même diviser cette partie du projet en sous-parties et essayer de les résoudre pièce par pièce. Dans ce cas, j'ai toujours ce contrôle sur mon code et mon projet. Et c'est aussi l'une des bonnes recommandations, comme vous le savez probablement, même lorsque vous effectuez un petit changement, il est bon d'aller le vérifier dans le navigateur. Comment fonctionne-t-il de manière appropriée ? Parce que si vous faites, disons, dix modifications, alors quelque chose ne fonctionne pas, vous devez procéder au débogage des dix modifications, ce qui n'est pas très efficace Encore une fois, comme vous pouvez le dire, il s'agit d'une combinaison d'approches. J'espère que tu trouveras quelque chose par toi-même. Et encore une fois, il est parfois bon, vous savez, de parler à vos collègues, surtout ceux qui sont plus expérimentés que vous, et de voir comment ils abordent, vous savez, l'utilisation de ces outils. Ensuite, vous pouvez, vous savez, copier certaines pièces, tester certaines pièces et voir si elles vous conviennent. 37. Module 5 : Résumé: Félicitations pour avoir terminé avec le module numéro cinq. Et j'espère que vous avez déjà décidé à quelle vitesse vous souhaitez adopter pour les pratiques de codage. Et depuis le prochain module, nous commençons les séances d'entraînement. On se voit là-bas. 38. Module 6 : Intro: Bienvenue dans le module numéro six. Dans ce module, nous allons consolider toutes les connaissances que vous avez acquises tout au long du cours en créant une application Web simple utilisant l'IA, et nous allons suivre ce flux de travail étape par étape. 39. Leçon 1 : Bienvenue à la leçon numéro un. Dans cette leçon, nous allons passer en revue un bref aperçu de ce que nous allons faire. Donc, mes amis, nous allons créer quelque chose de très simple, car notre objectif principal est de mettre en pratique les mécanismes d'utilisation de l' IA dans votre flux de travail de création d'applications Web. Nous allons créer une application de comptoir simple avec un peu de fonctionnalités. Parce que dans ce cas, cela vous est familier, et vous pourriez alors vous concentrer sur des éléments spécifiquement dédiés au flux de travail consistant à utiliser l'IA dans votre code et non sur la manière d'implémenter un élément spécifique concernant l'application elle-même. Comme je l'ai déjà dit, je préfère vraiment l'amélioration progressive tout ce que je crée, car si vous passez de quelque chose de très simple deux plus avancées étape par étape, vous comprenez l'ensemble de la chaîne de vos opérations et vous pouvez toujours déboguer ou passer à quelque chose de plus simple qu'auparavant Alors, quand allons-nous pratiquer cela ? Les bases de l'intégration de l' IA dans votre flux de travail, puis plus tard, vous pourriez vous entraîner une, deux ou trois fois, puis vous verrez certaines choses qui fonctionnent spécifiquement pour vous, puis vous pourrez passer certaines choses qui fonctionnent spécifiquement pour vous, à quelque chose de plus complexe. 40. Leçon 2 : Bienvenue à la deuxième leçon. Et voici la première étape de notre processus d'IA. La première étape consiste à planifier une fonctionnalité de votre application Web. Mon conseil numéro un pour vous est de toujours faire votre planification sur un papier avec un crayon ou un stylo. Pourquoi ? Parce que c'est le moyen le plus simple et le plus rapide de démarrer le projet Parce que dans ce cas, vous ne vous concentrez pas vraiment sur l' aspect technologique de la façon de rendre les choses belles. Il vous suffit d'écrire votre croquis pour créer la version de base de ce que vous aimeriez avoir dans votre projet Donc, dans notre exemple spécifique, nous créons une application de comptoir et nous allons planifier nos fonctionnalités. Nous allons donc avoir certaines choses habituelles. Nous avons donc une fonctionnalité comme un bouton deux plus un, moins un, puis plus dix moins dix, puis aussi plus et moins aléatoires. Donc c'est joli. Et à cette étape, nous avons déjà certaines choses que nous aimerions que notre application fasse. Et les mêmes choses s'appliqueraient à tous vos autres projets. Encore une fois, prenez votre stylo et votre papier et commencez, vous savez, imaginer ce que vous aimeriez votre application fasse et à l'écrire en termes simples 41. Leçon 3 : Bienvenue à la troisième leçon. La deuxième étape de notre flux de travail consiste donc à planifier notre interface utilisateur et la disposition de nos composants et de certains éléments. Encore une fois, comme à l'étape précédente, faites votre premier croquis sur une feuille de papier, car encore une fois, vous allez simplement vous concentrer sur la façon de faire rapidement l'essentiel et vous n'allez pas penser aux couleurs, vous savez, à la typographie et, vous savez, aux beaux éléments Vous allez simplement utiliser les éléments de base dont vous avez réellement besoin dans votre projet. Dans notre cas, encore une fois, nous utilisons le crayon et le papier. Ainsi, comme dans la plupart des applications de comptoir, nous avons la valeur. Ensuite, comme d'habitude, nous avons des boutons plus et moins à proximité, puis quelques boutons juste en bas, plus dix moins dix plus aléatoire et moins aléatoire. Donc c'est à peu près ça. Nous avons donc essentiellement pris nos fonctionnalités, ce que nous avions fait dans la première étape, puis nous avons simplement pensé à notre interface utilisateur et l' avons implémentée sur un papier. va de même pour tout autre projet que vous allez réaliser. Faites-le simplement de la manière la plus simple possible lors de votre première étape. 42. Leçon 4: Bienvenue à la quatrième leçon. La troisième étape de notre flux de travail consiste donc à choisir notre textag et nos packages tiers Donc, mes amis, comme vous pouvez le constater, cette partie ne vient pas au tout début, mais un peu en cours de route, car la partie mise en œuvre est très spécifique à ce que vous préférez, technologies avec lesquelles vous pouvez travailler. Mais encore une fois, le plus important est la fonctionnalité de votre application et, bien sûr, la mise en page, qui passe avant tout. Donc, à cette étape, vous pouvez choisir votre textag Il peut s'agir de langages de brouillage, technologies de style , de frameworks, oui, mais aussi de bibliothèques tierces, et même certaines personnes pourraient penser aux applications Donc, l'endroit où ils aimeraient héberger leur application, peut-être certains processus CICD, mais encore une fois, c'est à vous de décider à ce moment-là Donc, dans notre cas, encore une fois, comme je l'ai mentionné précédemment, nous allons simplement utiliser du HTML, du CSS et du J Script pour des raisons de simplicité. Et aussi ce qu'il est important de mentionner, par exemple, encore une fois, en tenant compte du cadre d' amélioration progressive, disons que GaiNur aimerait utiliser J'aimerais créer l'application de comptoir, puis disons qu' il y a une bibliothèque qui pourrait faire en sorte que l'application change les chiffres, pas seulement en modifiant le contenu du texte de saisie de texte, désolé, mais d'une manière efficace. Vous pouvez ensuite ajouter cette bibliothèque à votre projet, mais l'implémenter ultérieurement. Donc, d'abord, vous implémentez toujours la version de base, puis vous pouvez la faire progresser, l' améliorer jusqu'à une version sophistiquée. Cela va être un peu plus facile car, encore une fois, les fonctionnalités viennent en premier et les effets viennent ensuite. 43. Leçon 5: Oh, bienvenue à la leçon numéro cinq. L'étape numéro quatre de notre flux de travail est donc une étape d'incitation Auparavant, nous avions défini les fonctionnalités, interface utilisateur et la mise en page, la pile de texte, et il est maintenant temps de choisir les outils d'IA. Encore une fois, vous en êtes déjà arrivé là Vous savez donc de quel type d'outils nous disposons et dans quelle situation vous pourriez avoir envie d'utiliser quoi ? Donc, pour ce projet en particulier, encore une fois, nous pourrions utiliser Cloud comme chat , puis copier-coller du code dans notre DE, et nous pourrions utiliser le V zéro ou le curseur. Dans ce cas précis, nous opterions pour zéro. Mais encore une fois, vous pouvez choisir ce que vous voulez. Et il est important de mentionner qu'à ce stade, vous pourriez penser, par exemple, soit utiliser un message texte, soit ajouter votre image de votre interface utilisateur à l'IA, soit une combinaison de ces deux approches Comme vous vous en souvenez, à l' étape numéro deux, où nous étions en train de créer notre interface utilisateur et notre mise en page, cela ressemble à ça. Tout ce que j'ai fait, c'est de l'enregistrer en tant qu' image pour en faire une sorte de capture d'écran. Et cette capture d'écran, nous allons l'ajouter à V zéro, demandant de la recréer Donc, mes amis, nous sommes à l'intérieur de zéro. Comme vous pouvez le voir, j'ai téléchargé une capture d'écran depuis notre application, puis j'ai demandé une chose simple : créer une application de comptoir, utiliser une image chargée telle que référencée, Textag HTML, CSS Voyons donc ce que cela va faire. Le V Zero a donc terminé sa réflexion et notre image de maquette pour l' interface utilisateur est à peu près recréée comme nous l'avons demandé Nous allons donc vérifier la fonctionnalité. Comme vous pouvez le constater, mes amis, cela fonctionne plutôt bien, surtout si l' on considère qu'il s'agit de notre première itération. Et juste pour ajouter encore une fois, vous pouvez utiliser un caillot pour cela Et par exemple, Clot parfois pas en mesure de fournir un aperçu Vous pouvez donc simplement copier-coller le code dans votre identifiant et le vérifier, ou vous pouvez utiliser votre curseur si vous utilisez curseur pour obtenir à peu près le même résultat 44. Leçon 6: Bienvenue dans la leçon numéro six et la dernière étape, qui fait partie de l' itération, consiste à éditer et peaufiner le résultat que vous avez obtenu de Supposons donc que nous aimerions ajouter un bouton de réinitialisation à notre application. Voyons comment cela va être fait. Nous sommes donc revenus à zéro. Encore une fois, comme dans la leçon précédente, je viens de télécharger la capture d'écran avec un bouton de réinitialisation, et je demande simplement une chose simple, comme un bouton de réinitialisation au bas de l'annonce, utiliser une capture d'écran comme référence. Voyons donc ce que cela va faire. Le VZO a donc fait son travail et, comme vous pouvez le voir, il indique que le compteur inclut désormais bouton de réinitialisation en bas de l'application Mais le fait est que, par exemple, comme vous pouvez le voir, VZ ne peut pas prévisualiser ce fichier Encore une fois, cela se produit, et c'est le processus de peaufinage et Et là encore, j' expliquais précédemment qu'en utilisant ces différents instruments, ces différentes IA, vous obtiendrez enfin quelque chose qui vous convient. Et ce genre de situations, peu comme les obstacles que vous rencontrerez votre chemin, vous donnera plus d'expérience. Et encore une fois, les solutions, vous les adapterez mieux à vos situations spécifiques et à votre style de travail. Voyons donc ce que nous pouvons faire ici. Comme vous pouvez le constater, j'ai joué plusieurs fois avec le zéro qui m'invitait à faire zéro qui m'invitait à faire des allers-retours. Comme vous pouvez le constater, le V 2 créé en restaurant le V 1 et les mêmes éléments avec la version 3, mais l'aperçu est toujours fermé Ensuite, j'essaie aussi de dire que je peux voir un aperçu, mais je n'ai toujours pas de chance. Laisse-moi donc penser à une autre solution. J'ai donc décidé de créer un nouveau chat, mais de télécharger ma deuxième version où nous avons un bouton de réinitialisation et la même sonde qu' au tout début. Alors essayons-le. Mes amis, cette approche a réellement fonctionné parce que j'ai un aperçu qui fonctionne avec toutes mes fonctionnalités d'une version précédente, mais comme vous pouvez le voir, avec un bouton de réinitialisation fonctionnel. Et je pense que c'est un très bon exemple de la façon dont l'IA fonctionne réellement, vous savez, et de tous ces obstacles que vous pouvez rencontrer en cours de route Et vous devriez être familiarisé avec, vous savez, ces situations parce que, euh, vous savez, ce qui se trouve sur le chemin devient le chemin. Et en passant par ces différentes situations, vous allez acquérir de l'expérience. Et aussi, ce qu'on aurait pu faire pour vous. Par exemple, supposons que vous utilisiez une version gratuite de V zero et que vos messages soient une version gratuite de V zero arrivés à leur fin. Vous pouvez donc, vous savez, prendre le code tel qu'il fonctionne réellement votre identifiant, puis disons, la dernière partie de la fonctionnalité, qui était un bouton de réinitialisation, vous savez, accéder à un caillot ou discuter GPT et demander, vous savez, modifier si ce n'est été édité avec Vz quelque chose comme ça, mes amis, vous devez être flexible 45. Résumé: Bienvenue sur le résumé du module 6. Mes amis, j'espère vraiment que vous avez expérimenté et appris quelque chose grâce à ce module pratique où nous apprenons le flux de travail, le travail avec l'IA et où nous nous souvenons de mes amis. Tout commence donc par la planification, la planification de vos fonctionnalités, la planification de votre interface utilisateur et de TeXTC Ensuite, dans la deuxième partie, vous accédez à votre IA et vous demandez ce que vous avez prévu, puis vous le modifiez jusqu'à obtenir la version fonctionnelle Je dirais qu' il est bon de travailler une petite partie de votre application car comme vous l'avez probablement vu dans ce cours, parfois fournir le code, IA pouvait parfois fournir le code, ce qui n'est pas vraiment une bonne pratique pour créer des fonctions ou des styles Ensuite, lorsque vous obtenez cette petite partie du code fonctionnel, vous pouvez utiliser votre expérience pour ensuite nettoyer le code et le structurer avant de passer à la partie suivante Donc, la question suivante qui se pose est de savoir ce que nous pouvons faire si notre application est plus qu' un simple compteur et qu'elle comporte plusieurs parties. La réponse ici est assez simple. Donc, si vous vous souvenez probablement de ce schéma d'une leçon précédente, vous devez diviser votre projet en petites sous-parties , puis le faire partie par partie C'est un moyen éprouvé de créer n'importe quel système, pas seulement une application Web, et cela vous facilitera grandement la tâche. Dans ce cas, encore une fois, si vous vous souvenez du gouffre de la mort, vous pourriez facilement ne pas aller dans cette direction et vous épargner des heures à refactoriser et à corriger certaines erreurs qui pourraient être créées en utilisant une approche basée uniquement sur l'IA 46. Module 7 : Intro: Alors félicitations. Vous êtes en fait arrivé au dernier module du cours. Et ce module est entièrement dédié à la mise en pratique et à la consolidation toutes les connaissances que vous avez acquises au cours. Récapitulatif rapide du flux de travail de l'IA. La première étape consiste donc à planifier les fonctionnalités. N'oubliez pas que nous devons le faire sur papier. La deuxième étape consiste à planifier à nouveau UI et LL sur le papier. La troisième étape est une pile de texte et des bibliothèques. L'étape numéro quatre est une invite, et la dernière étape consiste à peaufiner Ce module comportera deux défis. Un par un, après chaque défi, vous recevrez une vidéo de solution avec mes explications. Alors bonne chance. 47. M7 c1 (FINAL): Bienvenue au défi numéro un. Dans ce défi, votre objectif est de créer une application de chronomètre de base, et voici à quoi pourrait ressembler l' interface utilisateur Donc, en haut, vous avez le temps réel, c'est-à-dire les minutes, secondes et les millisecondes, et en bas, vous avez trois boutons pour démarrer, suspendre Ainsi, le bouton de démarrage démarre réellement le chronomètre, les chiffres commencent à augmenter, la pause, le temps s'arrête et se réinitialise tout le temps revient à zéro Mais ce n'est qu'un exemple, vous pouvez construire quelque chose vous-même. 48. Solution 1: Bienvenue dans la partie solution du défi numéro un. Récapitulons donc rapidement les étapes. Le premier est la fonctionnalité du plan. Le deuxième concerne l'interface utilisateur et la mise en page, l'affichage de balises de texte, ainsi que le peaufinage et Commençons donc par l'étape numéro un. Donc la fonction que nous aimerions avoir. Alors démarrez, faites une pause, réinitialisez, puis nous aimerions avoir des minutes, secondes et des millisecondes L'interface utilisateur est donc assez simple. Nous avons prévu une minute , une milliseconde et trois boutons Encore une fois, pour ce qui est de la pile de texte , HDL CSS et JS, et pour cette tâche spécifique, nous avons choisi d'utiliser le Cloud pour nous entraîner également. Encore une fois, comme vous pouvez le constater, l' invite est assez simple. Créez un chronomètre de base, les fonctions de l'application Web commencent à faire une pause, à réinitialiser les minutes, les secondes, millisecondes et la pile de texte Comme vous pouvez le constater, tout ce que vous avez fait au cours de la phase de planification arrive enfin dans vos délais. Et dans ce cas précis, n' utilisons pas la capture d'écran. Essayons simplement d'utiliser du texte. Nous sommes donc dans le Cloud. Nous avons collé notre message, et voyons ce qu' il va faire Comme vous pouvez le constater, Claude a terminé son travail et nous obtenons de bons résultats avec notre crevette Alors testons-le. Il semble que cela fonctionne comme nous le souhaitons. Et allons-y et essayons de faire quelques ajustements. Par exemple, nous aimerions avoir, disons, deux zéros à la milliseconde et trois J'ai donc décidé d'utiliser le bal de fin d'année suivant. Pourriez-vous s'il vous plaît créer le format à partir de asi maintenant ? J'utilise donc les 70 à 6 zéros. Voyons donc ce que cela va faire. Comme vous pouvez le constater, elle a fait ce que nous lui demandions Essayons donc à nouveau. Il semble que cela fonctionne très bien. Jetons donc un coup d' œil au code. Et encore une fois, comme nous en parlions au tout début et tout au long du cours, vous devez d'abord acquérir de bonnes compétences en codage. Et à l'heure actuelle, comme vous pouvez le constater, se tout se trouve dans un seul fichier. Cela signifie HTML, CSS et JS, tout dans un seul fichier, sans distinction entre les préoccupations. Et puis, par exemple, si vous connaissez même les bases d'un JavaScript, vous pourrez utiliser vos connaissances pour les séparer en trois fichiers différents et les utiliser comme projet final que vous aimeriez avoir. Je pense donc que cette vidéo était plutôt bonne, et nous avons obtenu le résultat final dans ce cas, même sans la capture d'écran. 49. M7 c2 (FINAL): Bienvenue au défi numéro deux. Dans ce défi, votre objectif est de créer un générateur de citations aléatoires. Voici donc à quoi pourrait ressembler l' interface utilisateur. En haut, nous avons le vote lui-même, puis le nom de l'auteur, puis ce bouton avec une nouvelle étiquette de citation. Lorsque vous cliquez sur ce bouton, les nouvelles informations doivent être récupérées Ensuite, vous citez le nom du nouvel auteur. Et je vais vous donner un petit indice si vous souhaitez rendre ce défi un peu plus facile, vous devez utiliser les données locales et non les données d'Internet. Donc, sans la demande FIC à l'API externe. Bonne chance 50. Solution 2: Passons à la deuxième solution pour l'application de génération de code aléatoire. Encore une fois, récapitulation rapide des étapes du flux de travail, en utilisant l'IA Encore une fois, fonctionnalités, interface utilisateur et mise en page, pile de texte, invite, puis peaufinage et La fonctionnalité que nous aimerions avoir est d' afficher le code aléatoire sur ButtomClick Nous aimerions voir le code, et l' auteur et les données devraient être hébergés localement. Cela signifie que nous n'utiliserons aucune API pour ce cas spécifique. La prochaine étape est l'interface utilisateur, comme vous pouvez le voir, nous avons le devis. Nous avons le nom de l'auteur et le nouveau bouton de citation. En termes de stack, HTML, de CSS et de JS, et en termes de choix en matière d'IA, nous allons utiliser le curseur pour nous entraîner, et l'invite ressemble à ceci. Créez une application de génération de devis aléatoires. Affichez une nouvelle citation sur un bouton, cliquez, affichez la citation et l'auteur. Les données doivent être stockées localement, Textag HTML CSS et Vanilla JS Encore une fois, si vous avez effectué la bonne étape de préparation, votre message final sera suffisamment contextuel et de qualité pour permettre à l' IA d'obtenir votre première ébauche. Voyons donc cela en action. Donc, mes amis, nous sommes dans le curseur, et j'ai collé l' invite dans le chat N'oubliez pas que lorsque nous utilisons le curseur, nous aimerions utiliser le mode de vieillissement car nous aimerions que nos fichiers soient créés, et essayons de trouver ce qu'il va en ressortir. Et encore une fois, nous n'allons pas utiliser d'image pour ce cas spécifique car notre design est assez basique, ne s'agit que d'un croquis, et nous aimerions voir s' il est possible de trouver quelque chose de plus intéressant. Allons voir donc ça génère du HTML d'index. Les travaux sont en cours. Maintenant, c'est le moment des styles, du travail en cours, des données, et maintenant on travaille sur un fichier JS d'application pour les fonctionnalités JS. Comme vous pouvez le constater, il a même décidé d'ajouter des transitions CSS pour une interaction fluide. Donc, l'agent agit tout seul, c'est l'idée de l'agent. Il a donc terminé son travail et il nous explique brièvement ce qu'il a fait. Alors lisons-le un peu. Comme vous pouvez le constater, cela indique interface utilisateur moderne et épurée avec un arrière-plan dégradé, transitions fluides, un design réactif, effets Her, un stockage local dM. Tu vois, c'est plutôt cool. Donc, prévention des animations dupliquées. C'est bon. Voyons donc à quoi cela ressemblera dans un vrai navigateur. Alors, d'abord, acceptons tout. Nous sommes donc dans le navigateur, et comme vous pouvez le voir, nous avons cette belle interface utilisateur, tellement sympa. Feutre de couleur. Et essayons-le. Waouh. Comme vous pouvez le constater, cela semble plutôt bon et fonctionne comme prévu. Vous pouvez voir, mes amis, que nous avons suivi un flux de travail d'IA très simple, et lorsque vous définissez une tâche spécifique, cela fonctionne plutôt bien. Mes amis, pour ce qui est de la dernière étape en termes de peaufinage et d'édition, j'ai demandé à AI, cursory AI, spécifiquement d' utiliser une police Sera pour une citation, et comme vous pouvez le constater, elle a fait son travail Acceptons le changement et voyons le Et bien, comme vous pouvez le voir, cela a changé de téléphone, et à mon avis, il a l'air plutôt beau. J'espère donc que vous apprendrez quelque chose de nouveau grâce à cette leçon. 51. Actions: Félicitations, mon ami. Donc, jusqu'à présent, vous avez accompli un travail important. Vous avez suivi un cours complet, fait quelques exercices, et dans ce module, vous avez en fait relevé certains défis spécifiques par vous-même. Excellent travail. Je suis vraiment fier de toi, mon ami, et je te souhaite bonne chance passer ces connaissances au niveau supérieur. Donc, ce que je vous demanderais de faire maintenant, c'est partager votre projet. Une petite étude de cas, Little Explications , donne quelques détails sur la façon dont vous créez ces applications Web. Peut-être avez-vous expérimenté et fait quelque chose d' extrascolaire Vous pourriez donc également partager cela avec moi. Et si vous avez des questions, c'est très bien, posez-les, et je ferai de mon mieux pour y répondre. Encore une fois, bonne chance. 52. Résumé: Bienvenue à la fin du module numéro sept. Mon ami, dans ce module, vous avez relevé deux défis très intéressants où vous avez créé vous-même deux applications Web simples. Cela signifie que vous avez désormais une expérience directe de la création d' applications Web à l'aide de l'IA. C'est tellement bon travail. 53. Merci !: Ami, je voulais juste te dire un immense merci. J'apprécie vraiment que vous ayez trouvé le temps de prendre les notes et d' aller jusqu'au bout. Et j'espère vraiment que ces connaissances feront passer votre processus de codage à un niveau supérieur. Vous allez en effet créer les applications beaucoup plus rapidement et sous-traiter le travail fastidieux, le travail ennuyeux à votre copilote Alors bonne chance, mon ami, et merci beaucoup. À bientôt.