스크립트
00:00:00L'ingénierie de boucles est devenue pratiquement essentielle dans notre façon d'utiliser les agents IA aujourd'hui, et ce
00:00:04parce que les agents peuvent réellement fonctionner de manière autonome beaucoup plus longtemps et continuer sur leur lancée. Nous allons donc
00:00:09vous présenter trois boucles différentes, organisées par niveaux pour plus de simplicité.
00:00:13Le niveau un vous montre l'unité de base et la manière de l'utiliser efficacement. Le niveau deux vous montre comment intégrer
00:00:18cette unité dans une usine, et le niveau trois libère enfin la majeure partie de votre temps et rend le tout véritablement
00:00:23agentique. Comme cette vidéo regorge d'informations, nous avons placé des repères temporels ci-dessous afin que
00:00:28vous puissiez revenir à n'importe quel moment si vous en avez besoin. De plus, nous allons
00:00:33utiliser Claude Code dans cette vidéo, mais les systèmes que nous allons vous présenter fonctionneront également avec Codex
00:00:38et concernant les outils, nous utilisons Warp et VS Code. Ils sont tous les deux faciles à installer et il vous suffit
00:00:43d'ouvrir un seul dossier dans les deux et de nous suivre. Avant de passer à la manière dont vous
00:00:48implémentez l'ingénierie de boucles dans le Vibe Coding, nous devons expliquer ce qu'est une boucle. Auparavant, lorsque vous
00:00:53conceviez quelque chose, vous étiez déjà dans une boucle. Vous donniez une consigne à l'agent et il commençait
00:00:57à construire. Ensuite, une fois terminé, il vous demandait essentiellement de vérifier et si c'était erroné, vous donniez
00:01:02une autre consigne à l'agent et il se remettait au travail. Vous étiez déjà dans une boucle. Désormais, une boucle d'agent
00:01:07c'est lorsque vous vous retirez de ce processus et que cette partie de vérification incombe également à l'agent. Et
00:01:12la direction naturelle que nous prenions car, à y réfléchir, construire avec des agents n'est pas
00:01:17ce qui prend le plus de temps. Ils le font de manière autonome en arrière-plan. Ce qui requiert réellement
00:01:21votre attention, c'est de vérifier si l'agent a réussi ou non. Mais votre agent ne peut effectuer la
00:01:26vérification que s'il connaît le résultat correct. C'est le cœur de la boucle. Mais il y a
00:01:30d'autres composantes. Tout d'abord, il y a l'élément qui lance la boucle. Ensuite, il y a la boucle elle-même.
00:01:35Et à la fin de chaque boucle, il doit fondamentalement y avoir un contrôle de vérification, qui décide si l'
00:01:41agent a terminé ou non. Et ce contrôle de vérification doit être décidé par vous. Ainsi, dans une boucle d'agent,
00:01:46la partie que vous conservez est celle qui vous a toujours appartenu. C'est celle qui décide
00:01:50si vous arrêtez l'agent ou si vous avez besoin qu'il travaille davantage. Vous ne pouvez pas vraiment déléguer cela. Maintenant,
00:01:55vous vous demandez peut-être pourquoi nous passons soudainement à l'ingénierie de boucles et pourquoi cela ne fonctionnait pas
00:01:59il y a un an ? La réponse est que les modèles ne pouvaient pas vraiment fonctionner aussi longtemps. Et maintenant, avec les nouveaux
00:02:04modèles qui sortent, ils peuvent essentiellement travailler sans vous pendant des heures. Voici donc sur quoi
00:02:08nous faisons tourner tout cela. C'est une application de prise de rendez-vous pour un salon. Quelqu'un arrive sur le site,
00:02:13choisit un coiffeur, puis peut voir les horaires disponibles de ce coiffeur sur différents jours et réserver un
00:02:17rendez-vous. Et puis il y a la connexion du personnel car chaque salon utilisant ceci aura un
00:02:22réceptionniste pour l'exploiter. Ils approuvent ou refusent les demandes entrantes et gèrent le calendrier
00:02:27pour les différents coiffeurs du salon. À l'heure actuelle, il manque beaucoup de choses ici. Il n'y a pas de page d'
00:02:31accueil et il y a d'autres fonctionnalités importantes que nous devons encore ajouter. C'est la session Claude Code
00:02:36où nous l'avons construit. Nous avons créé ce dossier loop engineering et à l'intérieur, nous avons demandé à Claude
00:02:41Code de configurer le projet. L'application elle-même se trouve dans ce dossier loop salon et c'est juste une application Next.js.
00:02:46Si c'est la première fois que vous entendez ce nom, ne vous inquiétez pas. Vous dites simplement au modèle que vous voulez
00:02:51créer une application Next.js et commencer à construire à partir de là, et il s'en charge pour vous. C'est l'une
00:02:55des manières les plus populaires de créer de vrais sites web comme celui que nous construisons ici. Maintenant, il y a
00:03:00certaines choses que vous devez avoir dans votre dossier. D'abord, nous avons notre Claude.md et tout ce qu'il indique, c'est d'aller
00:03:04consulter le fichier Agents.md. C'est parce que nous pourrions avoir besoin d'exécuter plus d'un agent dans ce dépôt,
00:03:09et pas seulement Claude Code. Nous utilisons ce fichier car presque tous les autres agents utilisent les instructions de
00:03:14l'Agent.md comme règles sur ce qu'il faut faire à chaque ouverture d'une nouvelle session. Seul Claude Code utilise Claude.md.
00:03:21Et à l'intérieur du fichier Agents.md, nous n'avons pas vraiment eu à écrire quoi que ce soit nous-mêmes. Ensuite, nous avons ce fichier
00:03:27appelé design.functional.md qui couvre toutes les parties cliquables de l'application avec lesquelles l'utilisateur doit réellement
00:03:33interagir. Et la conception de celles-ci provient de ce fichier. Et si vous l'avez remarqué,
00:03:36l'application ressemble à Duolingo. C'est parce que nous avons copié le design de Duolingo dedans.
00:03:41Ensuite, il y a certaines compétences que vous devriez connaître. La première est Grill Me, que nous avons utilisée pendant que nous
00:03:45construisions cette première version. Elle continue de vous poser des questions jusqu'à ce que l'agent comprenne clairement
00:03:50ce que vous voulez. Il y a aussi d'autres compétences ici, et nous y reviendrons plus tard. Et vous remarquerez
00:03:55que ce projet est déjà construit. Nous l'avons fait exprès. Lorsque vous commencez quelque chose de nouveau,
00:03:59la première chose que vous faites est un MVP, c'est-à-dire fondamentalement la version fonctionnelle la plus rudimentaire de votre
00:04:04produit qui ne fait que l'essentiel et rien d'autre. Et vous ne voulez pas construire cela avec une boucle.
00:04:08Un MVP est de toute façon rapide à construire. Mais pour y ajouter une boucle, vous devriez décider à quoi ressemble le travail accompli
00:04:13avant même que l'agent ne commence. Et à ce stade, vous ne savez pas vraiment où va le produit
00:04:18pour l'instant. Résoudre cela finit donc par vous prendre plus de temps que de construire vous-même la première version.
00:04:23Mais avant de commencer le niveau un, ce serait formidable si vous vous abonniez à la chaîne et cliquiez sur
00:04:27le bouton de soutien. Ce petit geste de soutien compte beaucoup pour nous. Cela nous amène donc au niveau un de
00:04:33l'ingénierie de boucles. Ici, nous travaillons avec une boucle qui a un seul objectif et la vérification
00:04:37passe essentiellement de vous à l'agent. Et l'endroit où nous faisons cela est la page d'accueil,
00:04:42ce qui semble être le mauvais endroit pour cela car une page d'accueil n'est qu'un seul écran.
00:04:47L'agent peut essentiellement la construire en une seule exécution et si quelque chose ne va pas, cela peut être corrigé avec une seule
00:04:51consigne et non plusieurs. Mettre une boucle autour d'une page d'accueil demanderait plus de travail que la page elle-même.
00:04:57Mais ici, nous voulons une page d'accueil riche en mouvements utilisant la compétence GSAP. Tout s'anime,
00:05:02et à y réfléchir, c'est la partie qu'on ne peut pas vraiment vérifier rien qu'en la regardant une fois. Avec les animations,
00:05:07il y a tellement d'endroits où l'agent peut commettre des erreurs et cela demande beaucoup d'allers-retours. C'est
00:05:12en fait un très bon moyen de vérifier si quelque chose a besoin d'une boucle : si cela nécessite beaucoup d'allers-retours
00:05:16avec l'agent. Maintenant, avant d'en configurer une, il y a un problème de dénomination qui perturbe les gens et
00:05:21vous allez y faire face dès que vous ouvrirez le menu oblique dans Claude Code. Il y a une commande appelée
00:05:25loop et il y a une commande appelée goal, et l'ingénierie de boucles correspond fondamentalement à goal. La commande loop
00:05:30exécute une consigne sur une minuterie, donc toutes les cinq minutes ou toutes les heures, elle se déclenche à nouveau, que quelque chose ait changé
00:05:35ou non. Mais la commande goal est celle qui continue de fonctionner jusqu'à ce que la chose que vous avez demandée soit réellement
00:05:40terminée. Ainsi, lorsque nous parlons d'ingénierie de boucles, nous utilisons la commande goal. La commande loop est également utilisée dans
00:05:45certaines formes ou flux de travail d'ingénierie de boucles, mais nous ne l'utiliserons pas ici. La commande goal elle-même est assez
00:05:51simple. Vous tapez slash goal puis vous écrivez l'objectif que vous voulez atteindre et vous indiquez également au
00:05:56modèle comment vérifier s'il l'a atteint ou non. Ensuite, à la fin de chaque tour, un modèle plus petit lit
00:06:00la conversation et décide si l'agent doit continuer à travailler là-dessus ou si la condition
00:06:05est remplie ou non. Ainsi, pour démarrer la page d'accueil, nous avons à nouveau utilisé la compétence grill me et nous lui avons dit que nous avions besoin d'
00:06:11un fichier de spécifications pour cette fonctionnalité. Avant d'entrer dans les détails de ce que nous lui avons dit, vous devez voir le dossier
00:06:16features à l'intérieur du projet. Chaque dossier s'y trouvant correspond à une fonctionnalité que l'agent doit achever et
00:06:21chacun de ces dossiers contient deux choses. Il y a un fichier de spécifications, où tout ce qui concerne cette
00:06:25fonctionnalité est consigné, et il y a un dossier de vérification qui commence vide et se remplit pendant que l'
00:06:31agent exécute la boucle pour cette fonctionnalité. Ensuite, nous lui avons indiqué quelles compétences utiliser. La première est
00:06:35la compétence GSAP, celle qui permet d'obtenir ces pages d'accueil magnifiquement animées, mais une animation
00:06:41aussi lourde ralentit considérablement la page. Nous lui avons donc dit d'utiliser également la compétence optimize, qui
00:06:45réexamine la page et récupère de la vitesse sans supprimer l'animation. Nous lui avons également donné une image
00:06:50de référence à suivre, qui était cette page d'accueil avec les illustrations dessus. Et la dernière chose que
00:06:55nous lui avons dite concernait le contrôle. Normalement, c'est la partie où vous et l'agent faites des allers-retours,
00:06:59où vous regardez la page, vous lui dites ce qui ne va pas et il va corriger cela. Nous lui avons donc dit que pour
00:07:04vérifier réellement le design, il devait utiliser l'outil spécifique nommé dans notre fichier global Claude.MD, qui est
00:07:11celui qui s'applique à tous les projets sur la machine au lieu d'un seul. Ce qu'il a donc écrit correspond
00:07:15aux deux en même temps. C'est la spécification pour construire la page et c'est la liste de contrôle de vérification qui est
00:07:20exécutée sur cette page. Et c'est pourquoi l'outil de capture d'écran du fichier global s'est retrouvé là,
00:07:25car cet outil prend les captures d'écran beaucoup plus rapidement qu'en ouvrant un navigateur complet à chaque fois.
00:07:30Vous pouvez faire une pause ici et lire toute la consigne si vous le souhaitez. Cela rend tout cela beaucoup plus clair.
00:07:34Après cela, Grill.me a entamé ses questions et nous en a posé toute une série concernant la page d'accueil.
00:07:39Ensuite, nous lui avons dit une dernière chose, et c'est ce qui a transformé la spécification en objectif. Nous lui avons dit d'écrire le fichier
00:07:45de spécifications comme un objectif afin que nous puissions l'exécuter avec la commande goal, et il a apporté quelques autres modifications suite à cela,
00:07:50ce qui signifiait qu'à partir de ce moment-là, tout ce que nous avions à faire était d'exécuter la commande goal et de lui donner le fichier
00:07:55de spécifications de la page d'accueil. Refaire tout cela pour chaque fonctionnalité est le travail que vous ne voulez pas répéter.
00:08:00Nous avons donc créé la compétence goal writer. Elle contient tout ce que nous venons de voir, y compris cette ligne unique.
00:08:06Et ce qu'elle fait, c'est créer les dossiers à l'intérieur du dossier features avec les fichiers de spécifications déjà écrits sous forme d'objectifs.
00:08:11Ensuite, il s'est mis au travail et a fait une première passe, puis une seconde où il a eu la
00:08:16la liste à nouveau et s'évaluait elle-même en boucle, encore et encore. Après cela, elle s'est arrêtée et à ce moment-là,
00:08:21elle avait tourné pendant 38 minutes et était revenue avec une seule erreur, à savoir le clignotement de l'une des mascottes.
00:08:26Voici donc ce qu'elle a produit. Après lui avoir donné un dernier prompt de correction, les mascottes clignotent de
00:08:31la manière voulue, et cette unique erreur est la seule chose que la vérification ne pouvait pas détecter, car une
00:08:36capture d'écran ne saisit toujours qu'un seul instant, et l'intervalle entre deux clignotements est trop court pour que
00:08:42deux captures d'écran puissent le capturer. En dehors de cela, les illustrations sont vraiment réussies et s'inscrivent
00:08:46dans le style de Duolingo que nous visions, qui est le même style que celui déjà présent dans l'
00:08:50application principale. Elle a également suivi de près la référence, et cliquer sur réserver maintenant vous plonge directement dans l'
00:08:55application pour que vous puissiez commencer à l'utiliser. À présent, tout ce qui suit repose sur une certaine configuration.
00:09:00Il y a trois choses dont cette application a besoin que votre propre ordinateur ne peut pas faire seul, et vous n'allez pas
00:09:05exploiter vous-même aucune d'entre elles, alors ne vous inquiétez pas pour cette partie. Actuellement, tout ce que vous avez construit se trouve
00:09:10dans un seul dossier sur votre ordinateur, et c'est la seule copie existante nulle part ailleurs. Si votre ordinateur tombe en panne ou
00:09:15que vous supprimez le mauvais fichier, tout le projet disparaît avec lui. C'est la première chose qui doit
00:09:20changer, et c'est GitHub qui résout ce problème. Claude écrit le code du projet dans votre dossier et GitHub prend ce
00:09:25code en ligne et le conserve dans un dépôt, qui est fondamentalement ce même dossier vivant sur leur site plutôt que
00:09:31seulement sur votre machine. La deuxième chose est que l'application ne se souvient de rien pour l'instant. De vraies personnes
00:09:36vont l'utiliser, donc ces réservations doivent être enregistrées quelque part, sinon quelqu'un réserve un
00:09:41rendez-vous, rafraîchit la page et tout disparaît simplement. Vous avez donc besoin d'une base de données, et celle que nous
00:09:45utilisons est Supabase. Et enfin, personne d'autre ne peut réellement accéder à votre application car elle
00:09:50ne tourne que sur votre propre ordinateur. Elle doit donc être déployée, ce qui signifie simplement qu'elle est placée quelque part sur Internet
00:09:55où d'autres personnes peuvent l'ouvrir, et Vercel s'en charge. Maintenant, tout ce que vous avez réellement à faire sur ces trois
00:09:59plateformes, c'est de créer un compte, ce qui consiste à aller sur chaque site web et à cliquer sur se connecter avec Google.
00:10:04Il n'y a rien à configurer ni à installer. Tout ce qui suit passe par l'agent, et
00:10:08la raison pour laquelle cela fonctionne est que ces trois plateformes disposent d'une CLI. Votre agent ne peut pas cliquer partout sur un site web
00:10:14de la même manière que vous le faites. La CLI est donc une application destinée à l'agent pour utiliser la plateforme. Normalement, vous auriez besoin de
00:10:20créer un dépôt sur GitHub, un projet sur Supabase et sur Vercel, mais Claude peut simplement le faire en utilisant les CLI.
00:10:26Ainsi, après avoir créé vos comptes sur les trois plateformes, vous revenez vers l'agent et vous lui dites que vous
00:10:31souhaitez qu'il utilise ces trois services via la CLI. Il va vous donner une commande pour chacun d'eux, et vous devez
00:10:37les exécuter dans un autre terminal. Votre agent se trouve déjà dans votre terminal, vous en ouvrez donc un
00:10:41second et vous y coller cette commande. Elle va installer la CLI pour vous, puis vous connecter
00:10:46à votre compte. Elle ouvre une page dans votre navigateur. Vous l'approuvez ensuite, et l'
00:10:51authentification est terminée. À partir de ce moment-là, votre agent peut tout faire sur cette plateforme et vous n'avez plus
00:10:56jamais besoin de rouvrir ces sites. Et vous n'avez pas vraiment à vous souvenir de tout cela, car nous avons placé un
00:11:00fichier de configuration gratuit dans la description. Il vous suffit de confier ce fichier à l'agent pour qu'il prépare
00:11:05l'application Next.js pour vous et vous guide à travers tout le reste nécessaire pour connecter ces trois services.
00:11:10connectés. De plus, comme les règles de ces plateformes changent constamment, ces plateformes ont publié
00:11:16des compétences pour l'agent. GitHub n'a pas vraiment besoin d'une compétence. Sa structure n'a guère changé
00:11:21et ne change toujours pas, nous n'en avons donc pas pour ce service. Mais nous avons cette compétence de déploiement sur Vercel qui indique
00:11:26essentiellement à l'agent comment utiliser la CLI Vercel pour déployer votre projet automatiquement. Et puis nous avons
00:11:31celle de Supabase ainsi que celle des bonnes pratiques Supabase. Et là encore, elles s'activent automatiquement, de sorte que chaque fois que votre agent
00:11:37a besoin d'utiliser l'une de ces deux plateformes, il les utilise de lui-même et vous n'avez pratiquement
00:11:42rien à faire. Cette base de données Supabase va se remplir de données et votre projet
00:11:47va être mis en ligne sur Vercel. Nous laisserons les liens vers ces compétences dans la description ci-dessous. Mais avant
00:11:52de passer au niveau suivant, écoutons un mot de notre sponsor, Hedra. Il est facile de la regrouper
00:11:57avec des agents comme Manus qui effectuent des recherches et planifient un projet. Hedra fait cela aussi. La différence réside
00:12:02dans ce qui se passe après qu'elle vous a remis une vidéo finie, pas un document, pas un diaporama. Pensez à Claude combiné à Canva.
00:12:08Vous lui parlez et elle construit à vos côtés. Nous l'avons testée dans un espace et avons demandé une courte vidéo
00:12:13promotionnelle pour une application. La partie intéressante n'était pas la vidéo, mais de voir comment l'agent y est parvenu.
00:12:18Il y a d'abord eu quelques questions de clarification, puis un projet de plan. Au lieu de deviner, Hedra a cherché
00:12:23le sujet par elle-même et a rapporté de vraies découvertes. À partir de là, le script complet a atterri sur le canevas,
00:12:28l'agent nous a guidés à travers celui-ci et la vidéo promotionnelle finale est sortie. Celle-ci s'adresse vraiment à tous ceux qui font
00:12:33leur marketing en solo, sans monteur ni rédacteur derrière eux. Hedra permet fondamentalement à une seule personne de faire
00:12:38ce qui nécessitait auparavant toute une équipe. Vous pouvez l'essayer gratuitement sur Hedra.com et utiliser notre code pour obtenir 50 % de réduction
00:12:43sur votre premier mois. Le lien et le code se trouvent dans la description ci-dessous. Cela nous amène donc au niveau
00:12:48suivant. Le niveau deux s'appelle la boucle de l'usine logicielle. Dans ce niveau, vous planifiez collectivement plusieurs
00:12:53fonctionnalités et les placez dans une boucle afin que votre agent puisse continuer à travailler toute la nuit sur une liste de fonctionnalités sans
00:12:59s'arrêter dès qu'une fonctionnalité est terminée. Comme ces boucles peuvent devenir très longues, il faut un système de suivi pour lui indiquer
00:13:04si la liste de fonctionnalités qui lui a été confiée est achevée ou non. Sa boucle d'objectifs se termine une fois que
00:13:09toutes les fonctionnalités de la liste ont été cochées. Maintenant, lorsque vous planifiez de nouvelles fonctionnalités,
00:13:13vous ne devez pas seulement rédiger ce qu'il faut créer, vous devez également concevoir l'interface utilisateur. C'est ce qu'on appelle un
00:13:18prototype, et il s'agit d'une version entièrement cliquable de l'application qui ne fonctionne pas réellement. Il y a deux raisons majeures
00:13:23de construire un prototype d'interface utilisateur avant de commencer le développement. La première raison est qu'avec un
00:13:28prototype, vous pouvez vérifier si ce que vous imaginiez construire correspondait réellement à ce que
00:13:33vous vouliez faire. Et la seconde raison est que ce prototype devient un moyen pour l'agent
00:13:37qui travaille en boucle de vérifier si ce qu'il a construit est correct ou non. Dans l'usine,
00:13:42vous avez la liste et l'agent parcourt cette liste en boucle, en traitant chaque élément un par un. Mais comment
00:13:48traite-t-il chaque élément individuel ? Lorsque l'agent principal sélectionne un élément, il ne fait pas le travail de construction
00:13:53lui-même. Il confie la tâche à un sous-agent, et ce sous-agent réalise la fonctionnalité. Mais que se passe-t-il si le
00:13:58sous-agent commet des erreurs lors du développement et que votre application est ruinée ? C'est pourquoi l'agent principal crée une copie
00:14:03du dossier appelée une branche, et l'agent travaille sur celle-ci. Lorsque l'agent a terminé, il ne procède pas lui-même
00:14:07à la vérification. Cela nous amène à une autre règle très importante en ingénierie de boucles : l'agent qui effectue le travail
00:14:13ne doit jamais le vérifier. La vérification doit toujours être confiée à un autre agent disposant d'une fenêtre de contexte fraîche.
00:14:18Puisque c'est exactement ainsi que fonctionnent les sous-agents, l'agent principal transmet la branche à un agent de révision
00:14:24adversnariale. Cela signifie que cet agent doit toujours partir du principe qu'il y a des erreurs dans le travail accompli.
00:14:29C'est de cette façon qu'il est utile pour détecter les bugs. Par conséquent, s'il y a un problème signalé par l'agent de révision
00:14:34adversnariale, l'agent principal doit relancer l'agent de construction, et cela continue en boucle jusqu'à ce que la fonctionnalité
00:14:39soit cochée dans la liste. Une fois cette fonctionnalité achevée, il doit intégrer le travail de cette branche
00:14:44sur l'application déployée afin que les utilisateurs puissent commencer à l'utiliser. Ainsi, si vous l'ignorez,
00:14:48la version principale du code sur GitHub est celle qui s'affiche réellement sur l'application déployée sur Vercel.
00:14:53Par conséquent, si la branche est fusionnée avec la version principale, la fonctionnalité de cette branche sera intégrée à l'application
00:14:58déployée. C'est là que votre approbation finale intervient. Lorsqu'une fonctionnalité est terminée, une demande de fusion est créée.
00:15:03Une demande de fusion est une requête visant à fusionner la branche de fonctionnalité avec la branche principale. Dans cette demande,
00:15:08l'agent joindra également des captures d'écran. Mais si vous voulez être absolument sûr, vous pouvez tester si la fonctionnalité
00:15:13fonctionne réellement sur votre ordinateur dans le dossier en demandant à Claude de basculer sur cette branche, puis
00:15:18en la testant. Si tout est correct, vous pouvez valider la fusion. Si l'on jette un nouveau coup d'œil à nos compétences,
00:15:22vous pouvez voir que nous disposons désormais de cette nouvelle compétence de fonctionnalité. Lorsque vous invoquez cette compétence, elle va essentiellement
00:15:27indiquer à l'agent qu'un dossier doit être créé ici et que chaque dossier doit contenir un fichier spec.md
00:15:33ainsi que d'autres éléments pour sa vérification. Comme vous pouvez le constater, nous avons défini ici deux fonctionnalités.
00:15:38Une première fonctionnalité consistant à ajouter une page de services présentant chaque membre du personnel du salon. Et la
00:15:43seconde est que chaque fois qu'une personne a une séance avec un coiffeur du salon, elle peut ajouter un
00:15:48avis par l'intermédiaire de la réceptionniste, qui fait office d'administrateur. À présent, au lieu d'utiliser la compétence de nouvelle fonctionnalité ici,
00:15:53nous utilisons directement la compétence de rédaction d'objectifs. Toutes ces compétences sont interconnectées. Ainsi, si nous
00:15:58ne voulons pas qu'une fonctionnalité devienne un objectif, si nous voulons simplement travailler sur la fonctionnalité sans boucle,
00:16:03nous n'utilisons pas le rédacteur d'objectifs. Mais si nous l'utilisons, cela va déclencher la compétence de nouvelle fonctionnalité et
00:16:08ajouter des règles pour transformer un fichier de spécifications en un objectif exécutable. Comme nous l'avons
00:16:13déjà discuté, vous devez concevoir l'interface utilisateur de la fonctionnalité avant de commencer à l'implémenter. C'est pourquoi
00:16:18la compétence de nouvelle fonctionnalité fait appel à la compétence d'interface utilisateur fonctionnelle, qui lui indique essentiellement
00:16:23qu'un dossier nommé mocks doit être présent dans l'application et que le fichier HTML à l'intérieur de ce dossier mocks sera
00:16:29un prototype entièrement fonctionnel de toute l'application. Et il comportera les vues
00:16:33destinées à la fois à la réceptionniste et au client. Il ne doit y en avoir qu'un seul exemplaire dans chaque
00:16:37dossier, et la compétence d'interface utilisateur fonctionnelle ne créera cela que si ça n'a pas déjà été fait. Et
00:16:42évidemment, puisqu'elle est déclenchée chaque fois qu'une nouvelle fonctionnalité est créée, à l'intérieur de chaque dossier de fonctionnalité,
00:16:47il va également ajouter un fichier HTML. Il va maintenant prendre l'application déjà clonée et ne garder
00:16:53que la partie modifiée par la fonctionnalité pour l'afficher uniquement. Par exemple, nous avons cette fonctionnalité de services
00:16:58ici. Et si nous ouvrons sa maquette, vous pouvez voir que nous allons ajouter une page de services complète à l'application,
00:17:04et elle sera accessible via ce bouton. Si vous cliquez sur Réserver maintenant et choisissez un coiffeur,
00:17:08il vous demandera d'abord quel service vous souhaitez effectuer avec ce coiffeur. Cela n'a pas encore été
00:17:13réellement implémenté dans l'application, et ça ne l'était pas non plus dans le clone, mais ça l'est dans ce prototype
00:17:19de fonctionnalité. Cela vous aide donc à visualiser si ce que vous créez correspond vraiment à vos attentes. Et cela devient
00:17:24également un moyen pour la boucle de vérifier réellement si ce qu'elle construit est correct ou non. Après cela,
00:17:29nous lui avons dit d'écrire les deux fonctionnalités, et elle a essentiellement créé les dossiers pour les avis de session
00:17:33et les services. Voici l'interface utilisateur pour les avis de session. Encore une fois, vous pouvez la consulter du point de vue
00:17:38du client et du réceptionniste. Le réceptionniste va ajouter les avis au nom du client,
00:17:43parce que c'est ainsi que nous imaginons le fonctionnement du site pour l'instant. Cela ne se produirait pas sur un vrai site,
00:17:47mais comme il s'agit d'un site de démonstration, nous inventons simplement des fonctionnalités. Puisque nous avons maintenant plusieurs fonctionnalités
00:17:52à traiter, nous avons essentiellement besoin d'une liste pour les suivre. C'est pourquoi nous avons cette compétence de lot de fonctionnalités,
00:17:57qui utilise simplement ce fichier Markdown Q, qui n'est qu'un tableau unique répertoriant les fonctionnalités.
00:18:02Par exemple, à l'heure actuelle, la boucle est toujours en cours et elle construit la première, tandis que
00:18:06la seconde est toujours à faire, et elle va simplement les marquer une par une. Vous avez donc
00:18:11simplement besoin d'invoquer la compétence et de lui indiquer les fonctionnalités souhaitées. Ensuite, comme vous pouvez le voir,
00:18:16elle a indiqué qu'elle écrivait les deux fichiers et a ajouté ces fonctionnalités. Une fois les ajouts effectués,
00:18:21elle vous donne pratiquement la commande de l'objectif à exécuter. Nous l'avons légèrement modifiée et nous avons exécuté le fichier de file d'attente
00:18:26dans un objectif, qui ne devait s'arrêter que lorsqu'aucune ligne ne serait plus à faire ou en cours de construction, ce qui signifie
00:18:31qu'elles étaient toutes terminées et passées à l'état fait. Et le travail a commencé. Cela continue
00:18:36sur la première fonctionnalité et, comme nous vous l'avons déjà dit, elle utilise d'abord un sous-agent pour construire
00:18:41les éléments, puis pour vérifier et valider son travail, elle lance un agent contradicteur. C'est toujours en cours,
00:18:46cela fait environ trois heures et nous allons vous montrer le résultat final une fois que ce sera terminé. Comme vous pouvez
00:18:51le voir, nous avons ouvert GitHub et nous avons notre projet de salon en boucle juste ici. Si vous ne le trouvez pas,
00:18:55vous pouvez simplement demander à l'agent de vous fournir ce lien et vous pourrez l'ouvrir. Donc, ici,
00:19:00vous verrez cet onglet de demande de tirage et, après l'avoir ouvert, vous découvrirez la demande de tirage que
00:19:04l'agent a préparée pour votre examen. Si vous regardez cela, il nous a donné le résumé complet puis
00:19:09il nous a effectivement fourni les captures d'écran des pages, prouvant ainsi que le travail requis
00:19:13a bien été réalisé. Une fois que nous avons tout examiné, nous pouvons simplement fusionner la demande de tirage. Et comme
00:19:18vous pouvez le voir, nous avons la version hébergée en direct juste ici. Elle n'a pas de domaine, ce qui explique pourquoi elle se termine
00:19:23par Vercel. Mais comme vous pouvez le constater, nous voulions que cette fonctionnalité de services soit ajoutée. Et maintenant, si nous allons
00:19:27dans la fonctionnalité de services, nous obtenons tous les services proposés par le salon. Et si nous accédons à l'option de réservation
00:19:33instantanée, nous pouvons réellement voir que chaque coiffeur dispose de ses propres services. Et avant de pouvoir les réserver,
00:19:37vous devez essentiellement sélectionner le service. La même chose se produira lorsque nous fusionnerons cette
00:19:42seconde demande de tirage également. Et tout ce que nous avons abordé ici, nous l'avons fondamentalement expliqué
00:19:47d'une manière qui vous permet d'aller le construire vous-même. Une compétence n'est en réalité que des instructions écrites placées
00:19:51dans un fichier. Il n'y a donc rien ici que vous ne puissiez pas réellement fabriquer par vous-même. Mais si vous ne
00:19:56souhaitez pas passer par tout cela, l'intégralité du dépôt se trouve dans AI labs pro, qui est notre communauté.
00:20:01C'est essentiellement tout le système, tel que vous venez de le voir, avec chaque compétence déjà présente
00:20:05à l'intérieur. Si vous avez trouvé de la valeur dans ce que nous faisons et souhaitez soutenir la chaîne, c'est
00:20:10la bonne façon de le faire. Le lien sera dans la description. Il ne reste donc plus que deux choses
00:20:14pour vous à faire dans tout ce processus. Vous devez désormais planifier la fonctionnalité et donner l'autorisation
00:20:19finale avant que la fonctionnalité ou la modification ne soit envoyée à vos utilisateurs. Aucune de ces tâches ne requiert réellement
00:20:24votre présence devant votre ordinateur portable, en particulier la partie planification. Vous décrivez ce que vous voulez, il vous pose
00:20:28des questions jusqu'à ce qu'il comprenne et il vous construit le prototype, et tout cela peut être fait depuis votre
00:20:33téléphone. S'il s'agit d'un petit changement, vous pouvez également donner l'autorisation finale depuis votre téléphone.
00:20:37C'est là qu'intervient le niveau trois, dont l'objectif principal est de supprimer votre dépendance vis-à-vis de votre ordinateur portable.
00:20:43À cette fin, nous avons trouvé une très bonne application appelée Paseo. Elle exécute votre agent sur votre propre ordinateur portable et
00:20:48vous offre une fenêtre dessus depuis votre téléphone. Votre agent se trouve donc toujours sur votre machine avec tous
00:20:52vos fichiers, toutes vos compétences et toutes vos interfaces de ligne de commande déjà connectées. Et tout ce que vous avez construit dans
00:20:57cette vidéo continue de fonctionner. Claude Code peut également le faire en utilisant la fonction de contrôle à distance intégrée,
00:21:03mais de nombreux éléments y sont défectueux. Par exemple, pour les compétences, vous n'avez pas vraiment de menu pour exécuter
00:21:07les compétences dans la fonction de contrôle à distance de Claude. C'est donc l'application gratuite et nous allons la mettre en lien
00:21:12en bas. Nous n'allons pas entrer dans les détails de tout ce qu'elle fait, seulement l'essentiel pour que vous puissiez commencer
00:21:17avec elle. L'application dispose d'un système d'espace de travail où chaque espace de travail est essentiellement un dossier et vous ouvrez
00:21:22différents chats à l'intérieur et elle exécute Claude Code elle-même, vous n'avez donc pas besoin d'un autre
00:21:26abonnement séparé pour cela. Ensuite, il y a un autre élément très intéressant, c'est qu'elle ne
00:21:31s'exécute pas seulement sur votre ordinateur portable, elle peut également fonctionner sur un Mac mini que vous avez connecté. Ainsi, depuis votre ordinateur portable, vous pouvez
00:21:35contrôler votre Mac mini et depuis votre téléphone, vous pouvez également contrôler ce Mac mini. Et au lieu de
00:21:40l'interface de terminal complète, c'est beaucoup plus soigné. Cela ressemble à Cursor, mais toutes les fonctionnalités sont toujours
00:21:45présentes. La commande d'objectif fonctionne, tout comme toutes les autres commandes obliques que nous avons créées. Nous avons donc ouvert
00:21:49le dossier d'ingénierie de boucle ici, y avons créé une session et nous y définissons une nouvelle fonctionnalité.
00:21:54Il y a aussi une nouvelle compétence ici qui est la compétence de prévisualisation mobile et nous y reviendrons dans
00:21:59un instant. Maintenant, pour vous montrer à quoi cela ressemble sur mobile, nous avons le téléphone mis en miroir ici même et c'est
00:22:03exactement la même interface que celle que vous obtenez sur votre ordinateur. Vous bénéficiez de toutes les fonctionnalités de Claude Code et de vos commandes
00:22:09obliques prêtes à l'emploi également. Donc, pour démarrer une nouvelle fonctionnalité, vous exécutez simplement la commande oblique de nouvelle fonctionnalité
00:22:14directement sur votre mobile. Nous avons implémenté le flux de connexion pour le côté client, qui n'était pas
00:22:18implémenté auparavant. Ensuite, il y a une partie très intéressante. Il va évidemment rédiger
00:22:22l'intégralité du fichier de fonctionnalité, mais pour vous montrer à quoi ressemblent les maquettes, il peut nous fournir des images directement dans
00:22:27l'interface et ces images s'affichent également sur votre mobile, vous permettant ainsi de vérifier l'interface utilisateur directement sur
00:22:32votre téléphone. Mais la raison pour laquelle nous avons exécuté cette compétence de prévisualisation mobile est qu'elle déploie les maquettes HTML sur des liens et
00:22:37ce sont des déploiements gratuits sur Vercel, ce qui vous permet, lorsque vous cliquez sur le lien, d'accéder
00:22:42à la maquette réelle et de cliquer partout pour utiliser correctement l'application au lieu de vous contenter de regarder
00:22:47des images, et c'est vraiment ce que vous voulez lorsque vous faites fonctionner cette usine depuis votre téléphone.
00:22:51Ceci nous amène à la fin de cette vidéo. Si vous souhaitez soutenir la chaîne et nous aider à continuer à faire
00:22:56des vidéos comme celle-ci, vous pouvez le faire en utilisant le bouton de super merci ci-dessous. Comme toujours, merci d'avoir regardé
00:23:01et je vous vois dans la prochaine.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기