Claude Code pour les gestionnaires de produits : Créer et expédier avec l’IA

1. Claude code intro: Maintenant, imaginez cela un instant. Vous êtes chef de produit. Vous avez passé une semaine à rédiger un PRD de dix pages. Votre équipe d'ingénieurs n'est pas vraiment intéressée par la lecture du PRD. Votre équipe de conception a étudié le PRD, mais elle a en fait créé quelque chose de très différent Et à la fin, tu as l' impression : « Hmm ». Le résultat est toujours très mauvais. Mais voici la vérité. Personne ne se soucie vraiment de votre PRD. Si vous êtes un chef de produit que vous constatez que vos utilisateurs rencontrent des problèmes, que vous avez parlé à quelques utilisateurs et que vous pensez pouvoir créer quelque chose de super intéressant, eh bien, allez-y et créez-le. Et si vous voulez créer un produit réel, dans ce cas, vous devez comprendre GlotCD Et oui, il y a un cordon dedans, mais cet outil n'est pas réservé aux ingénieurs. Si vous êtes un chef de produit qui a une bonne compréhension de la technologie, dans ce cas, vous pouvez utiliser GlotCD pour créer un produit fonctionnel, puis vous pouvez le présenter membres de votre équipe ou même à vos collègues, et vous pouvez simplement prendre en compte les commentaires et la conception au stade du prototype Et vous pouvez réellement le présenter aux membres de votre équipe, à vos parties prenantes, et vous pouvez recueillir davantage de commentaires et itérer cette fonctionnalité plus rapidement Et après l'IA, presque tous les chefs de produit utilisent ces outils d'IA tels que le code caillot ou le curseur antigravitationnel pour créer des produits Maintenant, en tant que chef de produit, vous ne remplacez pas un ingénieur, vous l'aidez à passer du vous l'aidez à passer du prototype à la fonctionnalité finale plus rapidement et vous économisez 30 points de vente à temps. Alors, salut, je suis Navdeep. Je travaille en tant que chef de produit depuis près de six ans. Et dans ce cours, je vais vous aider à comprendre ce qu'est Claude Code ? Comment l'utilisez-vous efficacement ? Et que pouvez-vous créer avec Claude Code ? Et je sais que la plupart d'entre vous ne sont pas des ingénieurs et que vous n' avez peut-être pas de très bonnes connaissances techniques, mais c'est parfaitement normal. Dans ce cours, je vais vous aider de la rédaction de votre première demande dans Claude Code à la création et à l'expédition du produit, puis vous pourrez partager le lien avec votre ami, qui pourra simplement le consulter, vous faire part de ses commentaires, et vous pourrez simplement itérer plus rapidement quelques heures au lieu d'attendre des semaines, pour la conception ou les fonctionnalités réellement mises en œuvre votre première demande dans Claude Code à la création et à l'expédition du produit, puis vous pourrez partager le lien avec votre ami, qui pourra simplement le consulter, vous faire part de ses commentaires, et vous pourrez simplement itérer plus rapidement en quelques heures au lieu d'attendre des semaines, pour la conception ou les fonctionnalités réellement mises en œuvre par votre équipe d'ingénierie. Nous allons donc procéder étape par étape. abord, je vais vous aider à comprendre comment installer lot Cod dans votre système comment rédiger votre première invite ? Et je vais vous donner quelques instructions de base sur les contextes, le modèle que vous devez choisir, comment utiliser le plan, comment implémenter les choses. Et où exactement pouvez-vous déployer votre produit afin pouvoir le montrer aux membres de votre équipe ? Et pas seulement cela, je vais vous montrer un flux de travail que vous pouvez utiliser pour créer un produit fonctionnel. Et nous allons créer une compétence qui pourra vous aider à rationaliser l'ensemble du flux de travail. Et devinez quoi ? Vous n'avez pas besoin de savoir comment écrire un code et vous n' avez même pas besoin d'écrire une seule ligne de code, mais vous devez avoir une base technique de base. Donc, si vous êtes quelqu'un qui a toujours voulu créer un produit rendre vivant et que vous souhaitez qu'il plus rapidement de l'idée au produit, passe plus rapidement de l'idée au produit, alors ce cours sera parfait pour vous. À la fin du cours, vous serez en mesure de transformer votre idée en produit concret que vous pourrez expédier, la présenter aux utilisateurs, recueillir des commentaires et la développer. Donc, si vous êtes enthousiaste à l'idée de créer quelque chose de cool et d'apprendre le code cloud , allons-y directement 2. 1 Qu'est-ce qu'un code claude: Alors, bonjour, tout le monde. Ceci est notre première vidéo du cours, et dans cette vidéo, je vais vous montrer ce qu'est Clot Code et comment exactement vous pouvez l'installer Je vais donc simplement écrire des chiens Clot Code, et cela m'amènera à la page de documentation de Cloud Code, puis nous allons l' installer dans notre système Maintenant, si vous utilisez macOAS, dans ce cas, vous pouvez utiliser Homebrew pour installer Claude Code dans Si vous utilisez Windows, étape d'installation est différente. L'idée principale est installer une interface de ligne de commande ou une CLI pour le code Cloud afin de pouvoir interagir avec Claude Code directement à l'aide de la CLI. Voici donc la documentation officielle de Claude Code. Si vous passez une à deux minutes sur cette page, vous comprendrez beaucoup mieux Clot Code Et je vais zoomer et vous expliquer certaines choses. Comme vous pouvez le voir sur votre écran, clot Code est un outil de codage agentique . Cela signifie qu'il utilise un agent pour lire votre base de code, éditer des fichiers, exécuter des commandes et qu'il peut être intégré à vos outils de développement. Et Claude Code est disponible sur votre terminal. Donc, si vous êtes sur Mac, si vous tapez terminal, cela ouvrira un terminal. C'est un terminal très ennuyeux que les gens utilisent peut-être beaucoup de nos jours. Vous pouvez donc utiliser Claude Code dans ce terminal. Vous pouvez l'utiliser dans votre IDE. Donc, si vous utilisez Cursor, le code VS ou tout autre environnement de développement intégré, vous pouvez l'utiliser. Ils ont une application de bureau et vous pouvez également l'utiliser dans le navigateur. Donc, si vous accédez au téléchargement de Claude AI Slash, vous pouvez voir où exactement vous pouvez utiliser Claude Vous pouvez donc utiliser Claude dans Excel en installant simplement leur extension. Vous pouvez l'utiliser dans PowerPoint, Word. Ils ont notre DixoApp. Vous pouvez utiliser Claude Code dans le terminal de tous ces IDE, JetBrain En fait, vous pouvez également le faire depuis Slack. Et ils ont une application mobile , disponible sur l'App Store et le Play Store, et ils ont une extension Chrome. Dans ce cours, nous nous concentrons uniquement sur Claude Code, leur outil de codage agentique, et nous ne nous concentrons pas sur une interface de chat Claude ou Claude Cow qui consiste plutôt à effectuer votre travail quotidien feuille Excel ou un autre document de plan C'est tellement parfait. Voyons comment utiliser et installer Claude Code ? 3. 2 comment installer du code de claude: Vous pouvez donc utiliser Claude Code directement dans votre terminal depuis ce terminal. Vous pouvez utiliser Claude Code dans VSCode. VSCode est donc un IDE populaire de Microsoft. Vous pouvez installer leur application de bureau. Vous pouvez l'utiliser depuis le navigateur Web, et vous pouvez également utiliser quelques autres identifiants. Maintenant, le moyen le plus simple d'utiliser Claude Code ou l'installer dans votre système est d'utiliser un terminal. Vous pouvez donc utiliser l'installation native, qui est simplement une commande curl pour installer Claude Code Et voici leur programme d'installation natif. Je pense qu'ils ont récemment supprimé le package NPM. Vous pouvez également installer Claude Code en utilisant Homebrew. Homebrew est un programme d' installation simple sous Mac, et sous Windows, ils ont inet Je n'utilise pas Windows. J'espère que cela fonctionnera également sous Windows. C'est tellement parfait. Je vais utiliser une installation native, qui fonctionne très bien sous Mac et Windows. Parfait. Vous voulez le copier et vous allez dans n'importe quel terminal de votre choix. Maintenant, dans le terminal, il y a quelques commandes très populaires. Je vais augmenter la taille du terminal pour qu'il soit visible par tout le monde. Maintenant, dans le terminal, si vous voulez voir exactement où vous vous trouvez actuellement, vous pouvez taper LS pour liste, et cela vous indiquera l'endroit où votre terminal est ouvert. Vous pouvez donc voir que mon terminal se trouve dans le dossier racine, où je peux voir mon manuel, mon document Disons que je voulais créer un dossier dans le document où je pourrais travailler en toute sécurité avec Clot Code. Évidemment, vous pouvez simplement taper CD, qui est commande, et taper le dossier auquel vous souhaitez qu'il accède. Et maintenant, vous pouvez voir que je suis dans le dossier des documents. Si vous tapez LS, vous verrez tout le document ou le sous-dossier contenu dans ce dossier de documents. Vous pouvez donc installer Cloud Code n'importe où. Comme il s'agit d'une installation globale, je vais appuyer sur Command V pour coller la boucle que nous avons copiée depuis la documentation officielle de Cloud, puis nous allons simplement l'installer Encore une fois, vous pouvez utiliser Homebrew ou une installation native pour installer Claude Code Ce ne sont que deux options différentes. Ils ne font rien de différent. Il s'agit d'un installateur natif, qui vous donne simplement une CLI pour parler à Claude Code, qui est un outil agentique et parfait Maintenant, vous pouvez voir que le code Claude a été installé, voici une version, et voici un emplacement. Peu importe d' où vous l'installez, il est généralement installé globalement dans votre système. Parfait. Maintenant, je peux créer un dossier, vous n'avez plus besoin de vous souvenir de toutes ces commandes car je travaille avec Claude Code depuis un certain temps. Mais généralement, si vous devez créer un répertoire ou un dossier, une commande bash très courte est MKDIR, et maintenant vous pouvez créer un Je vais l'appeler Cloud code parce que je suis en train de créer un cours sur le Cloud Code. Cela va maintenant créer un dossier. Si vous utilisez LS, qui est à nouveau répertorié dans le dossier, vous y verrez un nouveau dossier. Maintenant, vous pouvez simplement le copier et taper CD pour accéder au dossier. Parfait. Oups, quelque chose ne va pas, ou je rate le E à la fin Là-bas. Alors maintenant je suis dans ce dossier et c'est parfait. Nous pouvons initialiser le code du caillot. Donc, si vous revenez à la documentation, et la raison pour laquelle je vous renvoie simplement à la documentation afin que vous compreniez si quelque chose ne va pas ou si quelque chose ne se passe pas correctement, vous savez où débugger C'est tellement parfait. Vous pouvez également installer le Claude Code en utilisant l' autre méthode, puis vous pouvez démarrer Claude Code dans n'importe quel projet en faisant un CD dans votre dossier, puis tapant simplement Cloud super simple. Vous pouvez donc simplement taper Claude et la session Claude Code démarrera. Encore une fois, il s'agit d'une séance. C'est tellement parfait. Maintenant, vous en avez beaucoup sur cette page, et je vais vous l' expliquer étape par étape. 4. 3 introduction à la première session de code: Il y a donc certaines choses que vous devez d'abord comprendre lorsque vous initialisez votre quatrième session dans Cloud Code Je suis donc déjà connecté à Cloud Code. Dans votre cas, vous êtes peut-être déconnecté. Alors laissez-moi d'abord me déconnecter, puis je vais vous montrer comment vous reconnecter. Ainsi, lorsque vous ouvrez Claude Code pour la première fois et que vous tapez Cloud, il vous demandera quelques informations, comme « Hé voulez-vous avoir un mode sombre, un mode clair et vous pouvez simplement appuyer sur flèches haut et bas pour voir visuellement lequel vous préférez ? Par exemple, il y a un mode clair, un mode sombre, un mode clair. Je pense qu'Auto One me semble bon. Il correspond à mon terminal, puis il vous offre trois options. Bonjour, souhaitez-vous utiliser Claude Code avec votre abonnement J'espère que 90 % d'entre vous utiliseront cette option. Mais ils ont également un compte console Enthropy qui est simplement votre tarification basée sur l' ABI, et vous avez une plateforme tierce comme Badock, Microsoft Foundry Dans mon cas, j'utilise l'abonnement Claude Code. Je vais cliquer dessus , puis il me faudra me connecter à la Terre, je vais simplement autoriser et perfectionner. Maintenant, nous y voilà. Claude Code est maintenant prêt à être utilisé. Parfait. Je vais appuyer sur Entrée , puis il m'affichera une note de sécurité. Je vais à nouveau appuyer sur Entero. Cela dit : « Hé, voulez-vous utiliser la configuration du terminal Claude Code ou souhaitez-vous modifier certains paramètres Bien entendu, nous allons examiner la partie des paramètres un peu plus tard, mais laissez-moi vous expliquer ce que vous pouvez voir sur votre écran, qu'est-ce que c'est exactement ? Je pense avoir installé un plugin qui vous donne plus d'informations sur un code Cloud normal. Il se peut que vous ne le voyiez pas. Je pense que l'interface change également beaucoup plus. Si vous regardez cette vidéo bout de quatre, cinq ou six mois, vous trouverez peut-être une interface complètement différente tout nouveau modèle. J'enregistre cette vidéo le 14 mai. J'espère que si vous le regardez d'ici la fin de l'année, vous trouverez peut-être une interface différente. Parfait. Vous pouvez maintenant voir le numéro de version de Claude Code. Je suis sur la version 2.1 0.141. C'est simplement pour vous assurer que vous pouvez désormais utiliser la dernière version chaque fois que vous l'utilisez. Et chaque fois que vous utilisez cette commande Bash, une version la plus récente est installée sur votre système. Ça dit : « Bon retour ». Maintenant, je peux voir mon modèle Opus 4.7 avec 1 million de fenêtres contextuelles, et mon mode est très élevé. Et je suis sur le plan Claude Max. Vous pouvez prendre un plan à 20$ si c'est ce que vous voulez. Et je suis dans le dossier Document Slash Claude Code. Parfait. Cela me montre donc également les nouveautés de Claude Code. Tu n'as pas à t'inquiéter à ce sujet. Il s'agit souvent de petites sorties ici et là. C'est tellement parfait. Permettez-moi maintenant vous aider à comprendre certains éléments du code Cloud. Chaque session cloud possède un contexte. Vous pouvez voir que mon contexte actuel est 0.0. Je vais simplement demander, hé, êtes-vous ? Et il va me répondre quelque chose et vous verrez alors que ce contexte va lentement commencer à se remplir. Rien qu'en cas de hausse, le contexte a diminué de 3 %. Maintenant, c'est un coût dont vous n'avez pas à vous inquiéter, car je suis abonné, et voici la durée de votre session Combien de temps dure une session ? Maintenant, je vous recommande vivement de participer à la même session afin d' avoir une bonne quantité de contexte. Il s'agit donc de savoir comment installer Claude Code et comment l'initialiser Dans la vidéo suivante, je vais vous expliquer tous les paramètres de Claude Code et comment vous les utilisez exactement. 5. 4 ghostly a new terminal: C'est tellement parfait. Dans cette vidéo, je vais vous montrer tous les paramètres présents dans Claude Code. Et pour être très honnête, vous n'avez pas à vous inquiéter à ce sujet, car dans la plupart des cas, vous ne les utilisez peut-être pas. Mais je vous explique simplement cela parce que vous devriez avoir une base solide au cas où vous voudriez vérifier les choses par vous-même. Ainsi, chaque fois que vous tapez une barre oblique dans Claude Code, cela vous donne beaucoup plus d'options Pourquoi je vous montre comment utilisez-vous Claude Code dans votre terminal et non dans votre application de bureau ? C'est parce que vous pouvez tout voir de manière très brute et que c'est facile à utiliser. En fait, je vous recommande d'installer un nouveau terminal bien meilleur que le terminal natif, et le nom de cette application est Costi En fait, laissez-moi fermer celui-ci, le terminal que j'utilisais. Permettez-moi d'utiliser Claude dans Kosti. Je vais simplement taper quit et cela quittera la CLI. Ma CLI ou la CLI Claude est maintenant sortie. Si je tape clair, tout est perdu. Maintenant, je vais utiliser Claude Code dans Kosti. Maintenant, si vous ne voulez pas utiliser la CLI, vous pouvez simplement accéder au dossier du document, accéder à votre dossier Claude Code ou simplement cliquer dessus avec le bouton droit de la souris et dire « Hé, je veux ouvrir une nouvelle fenêtre osti ici Maintenant, comme vous pouvez le constater, j'ai tellement de types de terminaux différents. J'ai mon terminal natif, j'ai Warp car un autre terminal est installé sur mon système J'ai du sti et du CMAC. Dans votre cas, vous ne trouvez que ces deux options. Et si vous installez osti, vous trouverez ces deux options supplémentaires J'ai quatre types de terminaux différents, donc peut-être que je suis un peu plus obsédé par les terminaux, je suppose. C'est parfait. Laissez-moi zoomer un peu pour que vous puissiez tout voir, et nous allons taper LS pour voir la liste. Où en sommes-nous exactement ? Ensuite, je vais taper Claude Code pour accéder au dossier. Je ne peux pas entrer dans le dossier. Oh, je suis déjà dans le dossier Claude Code. En fait, si vous voulez revenir en arrière, tapez simplement CD double point, et vous retournerez en dehors de votre dossier. Je vais donc revenir sur Claude Code parce que je viens d'en sortir parfait. Maintenant, je peux taper clairement et tout effacer. Et pour initialiser Claude, je vais taper Claude. Parfait. Maintenant, vous pouvez voir Claude dans votre CSTE, qui est un très, très bon domino Comme vous pouvez le constater, les choses sont plus claires, plus nettes. Ils ont l'air géniaux. Je vais faire un zoom arrière un peu. Voilà. Voici votre code Claude. 6. Configuration de 6 claude code: Je vous expliquais les différentes options que j'ai dans Claude Code. Maintenant, dès que vous tapez une barre oblique, vous verrez un tas de ces options Et si j'apprends Claude Code pour la première fois, je me dis : « Whoa, c'est quoi exactement ça ? Je n'ai aucune idée de ce qui s'y passe. C'est tellement parfait. Un excellent moyen de commencer consiste simplement à commencer consiste simplement apprendre quelques configurations dans le code Cloud. Je vais taper slash config, et cela va ouvrir le panneau de configuration pour moi Maintenant, c'est très facile à comprendre, et je vais passer peut-être 5 minutes à vous expliquer les choses les plus importantes et à vous en dire plus, vous pouvez tout apprendre par vous-même. Le premier est autocompact. Cela doit être vrai dans la plupart des cas. Le compactage automatique est une fonctionnalité que Claude a développée pour qu'une fois le contexte plein, il puisse le compacter, puis repartir à zéro. Le contexte est un cerveau temporaire dans lequel le gloat code CLI stocke l'ensemble de votre base de code et de vos instructions et s'exécute en fonction de ces instructions Maintenant, une fois que le cerveau est plein, il doit compresser cette mémoire et c'est ce qu'est l'autocompactage Le suivant montre une cassette. Cela est vrai. Tu peux avoir un pourboire. Le mouvement redish est essentiellement une fonctionnalité de la CLI qui évite tout scintillement Je vais vous dire les choses les plus importantes à ce sujet, sinon nous passerons des heures ici. Le mode de pensée est essentiellement une façon de penser de Claude. Voulez-vous voir cela sur l'interface utilisateur ou non ? La suggestion rapide est la suivante : lorsque vous tapez quelque chose, souhaitez-vous que Claude vous aide avec différentes suggestions afin que vous puissiez mieux rédiger votre prochaine invite ? Laissez-moi voir ce qui est important d'autre. Mode d'autorisation par défaut. L'arbre de travail est un concept distinct que je vais vous expliquer. Ensuite, il y a une ambiance automatique qui approuve automatiquement tout. Sois ignoré. Je pense qu'il y a beaucoup d'autres choses que je peux vous expliquer au fur et à mesure que nous avançons dans le cours. Et laissez-moi vous expliquer les choses les plus importantes. Lorsque vous accédez à votre configuration, vous pouvez appuyer sur Tab pour passer des paramètres à la configuration, de l'utilisation aux statistiques. Permettez-moi de vous montrer quelques points importants. Ainsi, lorsque vous regardez le statut, vous pouvez voir votre numéro de version, les sessions auxquelles vous participez actuellement, la méthode de connexion, l'organisation et d'autres informations de base. Je pense que je vais cacher cette information. Lorsque vous examinez la configuration, il s'agit de la configuration différente que vous pouvez personnaliser en fonction de vos besoins. Celui par défaut est excellent, nous n'allons donc pas y toucher. Je vais vous expliquer ce qu'est exactement le mode compact, mode réflexion et tout ce qui se trouve dans la configuration. Ensuite, vous avez la consommation qui indique quantité de Claude que vous avez utilisée dans votre limite actuelle de cinq heures ou dans votre limite hebdomadaire. Il vous indique donc votre limite hebdomadaire de tous les modèles, le modèle Sonnet, qui a également récemment lancé Clot Design Ensuite, il vous montre les statistiques générales. Comme vous pouvez le constater, j'ai beaucoup utilisé du code Cloud en avril et mai, et cela montre que mon modèle préféré est Opus 4.7, le dernier en date. C'est le total des jetons que j'ai consommés, donc juste les statistiques de haut niveau. Je vais donc en sortir et vous aider à comprendre les choses en les construisant réellement. Donc, au lieu de perdre plus de temps à vous expliquer quelles sont ces configurations, construisons quelque chose et ensuite nous allons l'utiliser. 7. 23 claude vs codex et curseur sor: Maintenant, avant de poursuivre le cours, je voudrais que vous abordiez un point très important. Donc, pour le moment, vous ne pouvez utiliser Claude Code que si vous êtes abonné. Leur abonnement commence donc à 20$ par mois et passe à 200$ par mois selon votre consommation. Maintenant, j'ai personnellement un abonnement maximum de 100$, mais je comprends. Beaucoup d'entre vous ne veulent pas vraiment payer 20$ juste pour utiliser Claude Code. Je vais donc vous montrer quelques alternatives que vous pouvez utiliser, et vous pourrez faire exactement la même chose avec ces alternatives. La première alternative est le Codex. Maintenant, Codex propose un plan gratuit qui vous permet d' utiliser son agent de codage sans payer beaucoup d'argent Maintenant, ils ont d' autres plans comme un plan Go en Inde, qui ne vous coûte que 400 roupies Ils ont un plan plus, qui coûte environ 20$, et ils ont également un plan de 100$. Donc, si vous êtes quelqu'un qui souhaite simplement essayer ces agents de codage AI, Chat GPT est un bon point de départ Ils vous offrent une utilisation limitée du Codex sur un plan gratuit, et je suppose que si vous voulez simplement créer quelque chose de très petit, juste pour expérimenter avec ces agents de codage AI, vous pouvez utiliser Codex CLI, simplement cliquer sur Codex, puis installer puis Cela va fonctionner exactement de la même manière, tout comme Claude, et je vais vous montrer comment vous utilisez le Codex, tout comme Claude Code suffit donc de consulter la documentation du développeur, cliquer sur la CLI, et vous pouvez installer la CLI du Codex et commencer à l'utiliser immédiatement. Il s'agit de la première alternative. niveau gratuit du Codex est assez généreux et vous pouvez créer certaines choses vous-même. autre option ou alternative Open Cod est une autre option ou alternative à Claude et Codex Maintenant, Open Cod est très populaire parce qu'il est open source. Maintenant, vous pouvez utiliser tous les modèles populaires d' OpenCD , comme Kimi k two, le modèle Quin, le modèle Deep Seek, et ils ont également OpenAI et le modèle et ils ont également OpenAI et Si vous allez sur leur page de tarification, vous pouvez utiliser Open Cord gratuitement ou ils ont leur plan à partir de 5$ le premier mois. Comme tout autre agent de codage, ils ont également une CLI Vous pouvez donc simplement vous rendre chez leurs développeurs, cliquer sur CLI, installer OpenCOD et commencer à l'utiliser immédiatement. Tous ces agents de codage AI sont vraiment bons, et je ne trouve aucune différence majeure entre Claude, Codex et Open Cod C'est donc la troisième alternative qui s'offre à vous. Le quatrième est Cursor. Maintenant, Cursor est un IDE. Cela signifie que vous pouvez installer Cursor dans votre système. Mais si vous vouliez utiliser leur CLI, eh bien, ils ont aussi une CLI. Vous pouvez simplement continuer, installer leur CLI et commencer à les utiliser. Dans cette vidéo, je vais choisir Codex parce que je trouve que le niveau gratuit du Codex Codex est assez généreux et que beaucoup de personnes peuvent l' utiliser Et ils ont de très bonnes limites. Je vais cliquer sur CLI et je vais installer la CLI. Vous ouvrez donc n'importe quel terminal, vous pouvez simplement utiliser votre terminal natif ou vous pouvez utiliser notre terminal comme Cost que j'ai installé dans mon système. Vous pouvez simplement installer Codex CLI globalement en tapant simplement NPMiglobal et en installant OpenAI Codex. C'est ça. Vous pourrez installer leur CLI, puis vous pourrez taper Codex pour simplement démarrer, et oui, s'il vous demande de vous connecter, tapez simplement slash login, slash Logout pour vous connecter et Logout, et vous pouvez changer de modèle en tapant slash model Maintenant, si vous utilisez le Codex, je vous recommande d' utiliser le dernier modèle, mais de réduire l'effort ou le raisonnement à niveau moyen afin ne pas vraiment épuiser vos limites très rapidement Et désactivez également le mode rapide s'il est activé. Donc, si vous voyez qu' il existe un mode rapide, vous pouvez simplement le désactiver. Tapez simplement slash fast et vous pouvez désactiver le mode rapide. Parfait. Et maintenant, vous pouvez commencer à utiliser le Codex comme n'importe quel autre agent de codage, qu'il s'agisse de code caillot, de code ouvert ou de Cursor CLI, ils sont tous exactement les mêmes Même si je tape juste quelque chose pour vous, vous pouvez taper une barre oblique, et vous verrez beaucoup d'options exactement identiques, tout comme Claude Slash Model vous donnera accès à toutes les options de modèles dont vous disposez L'autorisation Slash vous permettra de modifier l'autorisation du Codex. Slash Memories, Sky Slash Skills, critique de canulars. La plupart des caractéristiques et fonctionnalités, quelles que soient celles présentes dans Claude Code seront exactement les mêmes. Je vous recommande d'utiliser codex HatGPTS si vous ne voulez pas vraiment payer pour Et vous pouvez également essayer quelques autres CLI. Cursor vous offre une très bonne limite dans le niveau gratuit Cursor propose donc également un niveau gratuit généreux. Parfait. Je vais taper slash quid pour fermer Codex ou slash Logout pour simplement De la même manière, vous pouvez simplement ouvrir le document CLI d'Open Cod et vous pouvez l'installer. Vous pouvez également faire la même chose avec Cursor. Parfait. C'est une façon d' utiliser n'importe quelle alternative au cloud si vous ne voulez pas vraiment payer. 8. 7 premier chat avec claude code: Tellement parfait. Maintenant, lorsque vous créez quelque chose dans Claude Code, vous devez comprendre qu'il s'agit d'un agent de codage. Cela signifie qu'il peut faire beaucoup de choses pour vous, mais vous devez les spécifier, les approuver et piloter ce modèle pour obtenir le résultat souhaité. Cela signifie que si vous lui donnez quelque chose, il fera un excellent travail lorsque vous spécifierez tout et que vous l' orienterez dans la bonne direction Commençons donc par créer une petite application à faire. Application que presque tout le monde a utilisée et créée. Nous allons donc créer une application Todo en utilisant Clot Code. Maintenant, vous pouvez le construire de deux manières. Soit vous pouvez simplement taper « Hey, pouvez-vous m'aider à créer une application Todo ? Maintenant, il y a une autre fonctionnalité intéressante que Claude Code a dans sa CLI. Si vous maintenez la touche espace de votre clavier enfoncée, vous n'avez rien à saisir. Vous pouvez réellement parler et il le saisira pour vous. Je vais donc lui donner l'autorisation audio. Seras-tu capable de le construire pour moi ? Oups, aucun microphone n' a été détecté ou j'ai le problème J'utilise donc mon Macbook Pro en mode fermé, et j'ai connecté mon écran pour qu'il ne détecte pas le micro, mais vous pourrez simplement le faire depuis votre propre système En fait, j'utilise une autre fonctionnalité de synthèse vocale. J'utilise Whisper flow, donc je peux aussi l'utiliser. Oh, même problème. Je pense que le couvercle est fermé, et c'est pourquoi je ne peux rien enregistrer. C'est parfaitement bien. Nous devons le taper. Je vais donc simplement lui poser une question, et voyons comment il répond et que demande-t-il ? Donc, si vous observez attentivement, cela revient à réfléchir à mon message avec beaucoup d'efforts. Et ce que vous voyez sur votre écran est un mode de réflexion. Cela signifie qu'il me montre ce qu' il pense et comment il pense exactement. Maintenant, dès que j'ai tapé quelque chose, au lieu de me répondre, il me pose un tas de questions, ce qui est vraiment bien Cloud Card est vraiment douée pour comprendre les compromis. Cela signifie que s'il existe cinq manières différentes de construire quelque chose, il vous demandera exactement  : « Hé, j'ai ces trois options. Tu m'aides à comprendre lequel est bon pour toi. Par exemple, il dit : «  Comment l' application Todo devrait-elle stocker les données Est-ce qu'il stocke les données dans le stockage local ? Cela signifie que vous allez simplement ouvrir cette application Todo dans votre système, et dès que vous l'actualisez, les données disparaissent Maintenant, la raison pour laquelle il a dit que c'était une méthode recommandée, c'est parce que mon message était très générique. Je n'ai rien précisé sur la technologie tex que vous devriez utiliser, comment vous devriez la construire , quelles devraient être caractéristiques et fonctionnalités que nous devrions avoir ? Quels seront mon identifiant, mon authentification, mon stockage ? Comme je n'ai rien précisé, cela me pose un tas de questions du type : «  Voulez-vous utiliser le stockage local, qui est le site du client, et dès que vous actualisez, vos données disparaissent. Voulez-vous utiliser Vercel pour le déployer, le publier pour la base de données, ou souhaitez-vous l' avoir en mémoire Maintenant. Ce n'est qu' une démonstration. Je ne veux évidemment pas créer quelque chose uniquement sur la base d'une si petite invite. Mais vérifions toutes les questions. Je vais appuyer sur l'étape 1 pour passer à la question suivante. Ensuite, il me demande : « Hé, quel style souhaitez-vous utiliser ? Voulez-vous utiliser tailwind, une méthode CSS pour styliser votre application Voulez-vous utiliser le composant SAD SN, CSS brut, puis je dois le soumettre. Maintenant, je vais évidemment appuyer sur Escape. Comme vous pouvez le constater, vous pouvez sélectionner l'onglet et la flèche pour accéder à toutes ces questions ou appuyer sur Escape pour annuler. Évidemment, je vais appuyer sur Escape parce que c'est une invite trop petite pour construire quoi que ce soit. Donc, si vous appuyez sur Escape, tout cela disparaîtra. Voilà. Il indique que l'utilisateur a refusé de répondre à la question. Parfait. Maintenant, je vais taper la même invite et si vous voulez le faire, vous pouvez soit copier et coller, soit appuyer sur la touche Aero lorsque vous êtes dans le terminal Voilà. Maintenant, je vais poser une question. Dites-moi simplement si vous le pouvez ou non. Maintenant, j'ai explicitement mentionné si vous pouvez construire quelque chose ou non, si oui, quelle est la meilleure option ? Maintenant, si je pose des questions ouvertes, c'est parce que je veux que Claude m'aide également à réfléchir mon problème dans le cadre de la session Claude Code. Parfait. Maintenant, si vous pouvez voir la réponse : « Hé, c'est la technologie textuelle que je recommande, vous pouvez utiliser Nextes, qui est simplement un framework basé sur React and Tailwind, SACN et Local Stories pour créer rapidement une application todo raffinée pour vous, voulez-vous que je la développe  ? Maintenant, si vous lisez attentivement, la plupart des PM n'ont aucune idée de ce que sera un routeur d'applications l'année prochaine, de ce qu'est Tailwin, de ce qu'est le SAT CN, ce qu'est le stockage local Et tu n'as pas vraiment besoin de le savoir. Il ne s'agit que du framework frontal, mais vous devez disposer d'une base technique de base sur tous les éléments de votre application To. Et pour cela, vous devez utiliser un mode plan. 9. Mode plan dans le code cluade: Je vais donc utiliser le mode plan. C'est tellement parfait. Maintenant, je pose une question très simple. Pouvez-vous continuer, créer un plan pour moi et créer l'application Studio que je peux utiliser dans mon navigateur tous les jours ? Il devrait avoir une connexion, inscription et d'autres fonctionnalités de base en place, et pose-moi simplement une question quand vous avez réellement un rendez-vous. Et je vais simplement appuyer sur Entrée. Maintenant, si vous réfléchissez bien, j'ai mentionné la création d'un plan. Claude dispose désormais d'un mode plan, qui vous permettra de découvrir leur plan. Il créera d'abord un plan, demandera son approbation, puis seulement il commencera à le construire. Car n'oubliez pas que le problème avec l'approche ci-dessus est qu'elle a été directement lancée lors de la création de l'application Studio. C'est tellement parfait. Maintenant, il est passé en mode plan, a créé un plan pour moi, puis il va me demander si vous voulez que je crée cette application pour vous avec ce plan ou non. Il est donc en train d'élaborer un plan. Il ne l'a pas finalisé. Comme vous pouvez le voir, c'est lui qui a décidé du texte tout seul. Et évidemment, nous pouvons expliquer pourquoi il a choisi le texte le plus souhaitable pour le code clot. Comme l'année prochaine, c'est un test de combat pour le front end. Drizzle ORM est très populaire ces derniers temps. PostCRS est la base de données la plus recherchée. Il utilise un fournisseur Oath, et comme vous pouvez le voir, il s'agit de votre textag, votre couche d'authentification Il dispose d'une inscription, d'une connexion, déconnexion, d'un itinéraire protégé, base de données, d'une interface utilisateur et peut déployer des éléments pour vous Il fait beaucoup de choses. Et si je ne suis pas une personne technique, ma première question serait : Hé, je n'en ai absolument aucune idée, mais laissez-moi quand même lire ceci et voir ce que Claude m' a suggéré. Il indique que pour la combinaison de l'authentification et de la base de données, il s' agit du plus grand choix architectural. Alors choisissez-en un avec soin. Voulez-vous utiliser la base de données Clerk ou Neon, ou souhaitez-vous utiliser Super Base Il s'agit de deux combinaisons différentes. Donc, en tant que personne non technique, je n'en ai aucune idée, mais je vais quand même choisir ce que Claude m'a suggéré. La première option est donc Clerk pour l'authentification de connexion et Non pour le choix en tant que base de données. Disons que je vais choisir la première option, puis pour V one, je vais simplement l' intégrer à mon plan et créer un plan. Encore une fois, j'ai répondu rapidement à la question parce que je voulais voir le plan et ensuite je déciderai si je voulais changer les choses ou non. Je vous conseille donc de passer en mode Plan. Et créez un plan pour moi. Ensuite, j' approuverai ce plan. Le mode plan est donc un mode très populaire. Si vous tapez Plan dans le terminal Claude Code, cela vous montrera que vous pouvez activer un mode plan pour votre session en cours et que vous pouvez mieux planifier les choses, car personne ne veut simplement agents de l' IE commencent à exécuter des tâches sans en comprendre les aspects commerciaux , techniques et commerciaux. Comme vous pouvez le constater, le cloud réfléchit en ce moment. Il utilise constamment les jetons d'entrée et de sortie et Yeah. Cela vous donne donc également le processus de réflexion du type « Hé, il n'y a pas de base de code à explorer ». Je passe directement au plan, et j'utilise ce texto C'est tellement parfait. Comme vous pouvez le constater, il a créé un plan pour vous et ce plan se trouve dans le plan NOI point Claude, et vous pouvez réellement voir cette réduction si vous accédez à ce dossier spécifique En fait, vous pouvez cliquer dessus en appuyant sur touche Commande et nous ouvrirons cet identifiant interne si vous l'avez installé. Donc, comme vous pouvez le voir, c' est un plan que je vois dans mon terminal opérationnel. Il s'agit donc d'une vue délimitée et, comme vous pouvez le constater, elle m'a préparé un bon plan Je vais fermer ceci parce que vous n'avez peut-être pas de terminal B, et je vais le lire ici. C'est tellement parfait. C'est ton plan que Claude a créé. Comme vous pouvez le constater, il s'agit d'un plan de votre application Todo que vous créez avec l'authentification Vous souhaitez donc créer une application Todo que vous pouvez ouvrir dans votre navigateur et utiliser au quotidien. Il comprend la connexion, l'inscription, connexion et tout le reste. Nous utilisons Clerk pour authentification, base de données Neon PosCRSF Et comme vous pouvez le voir, il s'agit votre textag qu'il a automatiquement sélectionné, puis vous pouvez voir comment il va construire les choses par étapes abord, il installera tout, comme les derniers packages, frameworks, bibliothèques, l'année prochaine, front-end SAD CNF et initialisera ENV où vous pourrez simplement entrer votre valeur, puis dans la seconde phase, il commencera à créer une authentification à l' il commencera à créer une authentification Clerk est simplement votre plateforme d' infrastructure de vérification d'identité plateforme d' infrastructure de vérification qui vous permet de créer des connexions, des inscriptions, etc. Ensuite, vous pouvez voir qu'il est en train de créer votre base de données, certaines actions du serveur afin qu'il puisse effectuer des opérations rudimentaires afin qu'il puisse effectuer des opérations rudimentaires , c' est-à-dire créer, lire , mettre à jour et supprimer vos éléments todo, puis il créera votre interface utilisateur ou votre interface, et enfin, il la peaufinera puis la déploiera quelque part pour que vous puissiez l'utiliser C'est tellement parfait. Ça a l'air super. Maintenant, vous pouvez réellement choisir l'une de ces trois options une fois que vous avez lu votre plan. Disons que je voulais apporter quelques modifications au plan pour ne le déployer nulle part. Laissez-moi d'abord le tester. Je vais donc voir une fois que vous aurez terminé votre développement, ne déployez pas. Exécutez-le localement. Cela signifie qu' avant de déployer quoi que ce soit sur un cloud, je veux juste le vérifier d'abord. Tout va bien pour le reste. Donc, ce que je fais, c'est apporter des modifications au plan avant qu'il ne soit réellement mis en œuvre. Donc, la première option était la suivante : « Allez-y ». Entrez dans le mode automatique et commencez à l'implémenter. La deuxième option était la suivante : allez-y et implémentez-la, mais j' approuverai manuellement la modification. La quatrième option est faire ce petit changement et de me redonner le plan. Je veux donc qu'il apporte quelques modifications et qu'il créera à nouveau un plan. Tellement parfait. Vous pouvez donc voir ces lignes rouges et vertes. Le rouge est ce qu'il a supprimé, et le vert est ce qu'il a ajouté. ce moment, je suis en train de mettre à jour mon plan Il supprime des éléments du plan et en ajoute de nouveaux en fonction des instructions que j'ai données. Et super. Maintenant, il est dit que le résultat escompté est de l'exécuter d' abord localement afin que l'utilisateur puisse le voir, puis de faire les choses plus tard. C'est parfait J' ai deux options. Je peux soit utiliser automde où il approuve simplement tout sans me demander, soit utiliser une modification manuelle Je vais choisir le mode automatique, mais en mode manuel, je dois appuyer ou approuver le bouton d'approbation plusieurs fois. C'est tellement génial. Je vais attendre quelques minutes et le laisser créer l'application Studio. 10. 9 Créer une application à l'aide du code de claude: C'est tellement parfait. Je vais vous expliquer quelques points au fur et à mesure que ce produit se développe. Il a donc créé une tâche qu'il va suivre conformément au plan. Donc, si vous revenez au plan, souvenez-vous qu'il a créé des phases. La première phase va tout installer, la phase deux, elle va implémenter authentification, puis la mise en œuvre de la base , puis l'interface utilisateur, puis elle va peaufiner l' interface utilisateur et l'exécuter localement, puis elle va tout vérifier , puis vous pouvez la créer ici, et enfin, vous pouvez le déployer. Comme vous pouvez le constater, il passe tout en revue par phases et installe la dépendance, les packages et tout le reste. Donc, d'abord, il va être installé l'année prochaine, puis il va s' authentifier de nouveau, puis il va créer une base de données, puis il va effectuer une opération participative s'assurer que tout a été correctement configuré, puis il créera un todo Tout me semble bon. Je reviendrai un jour et ensuite nous vérifierons s'il est capable de créer les deux applications Do ou non. Maintenant, chaque fois qu'il construit des choses, vous pouvez continuer à poser des questions en tapant slash BTW Par exemple, j'ai vu cette option. C'est quoi exactement ? En fait, vous pouvez simplement copier quelque chose ou lui poser quelques questions comme : « Hé, je suis curieux de savoir pourquoi utilisons-nous Clerk pour la connexion et l'inscription C'est un excellent moyen d'apprendre des choses chaque fois que Claude construit quelque chose pour vous. Maintenant, lorsque vous devez taper BTW, sinon la demande sera annulée, et ce sera une mauvaise chose Donc, dès que je tape BTW, il me demande, il me donne des réponses, et cela n'a aucun impact sur le code qu'il écrit Comme vous pouvez le constater, Claude vous permet de vous connecter et de vous inscrire, de réinitialiser votre mot de passe et vérifier votre e-mail en une dizaine de lignes de code. Cela signifie qu'en écrivant dix lignes de code, vous aurez accès à un identifiant, à une inscription, à un mot de passe, à un e-mail, à un identifiant social et à un agent d'encodage LLM qui adore gagner du temps. C'est pourquoi, pour régler rapidement les choses, ils l'utilisent Il comporte des composants pré-stylisés et sera intégré native à Versal l'année prochaine. Il vous permet de gérer les utilisateurs en temps réel. Il vous a donc donné une réponse très rapide. Parfait. Vous pouvez appuyer sur Escape et cette réponse sera supprimée. Et nous revenons à l'agent de codage AI, qui construit et met en œuvre des choses. C'est tellement parfait. Maintenant, tout est fait. Comme vous pouvez le constater, toutes les étapes sont terminées, et si vous voulez commencer à l'utiliser, il a créé une base de données pour moi, ou il me demande en fait d'en créer une, puis vous pouvez exécuter votre application localement C'est tellement parfait. Maintenant, il me demande de faire certaines choses importantes pour que cette application fonctionne localement. Cela signifie donc que, hé, téléchargez d'abord votre base de données Neon, alors allez sur cette console, créez un projet, copiez la chaîne de connexion, puis replacez simplement la base de données R ici Maintenant, une question que vous avez peut-être en tête, maintenant, quel est cet exemple d'ENV Local et d'ENV Pourquoi me demande-t-il de créer une base de données, coller une URL et des clés d'API ? De quoi s'agit-il exactement et pourquoi mon produit ne fonctionne pas ? Si vous allez chez Local host 3,000, vous ne verrez rien. Quelque chose ne va pas. Maintenant, je voulais vous montrer quelques choses supplémentaires avant revenir à Claude Dextropp, qui vous donnera une bien meilleure Je vais donc d' abord cliquer sur Quit, ce qui va fermer ma session Claude Code dans la CLI et taper à nouveau Cloud. Maintenant, lorsque vous tapez à nouveau Cloud, une nouvelle session est initialisée Mais je n'en ai aucune idée parce que vous voyez, si vous regardez bien, le contexte est nul, et je n'ai littéralement aucune idée de ce sur quoi je travaillais. Pour ce faire, vous devez taper un CV, vous donnera toutes vos sessions précédentes. N'oubliez pas que c'était ma session précédente où je créais une application à deux. Je vais cliquer. Je vais appuyer sur Heroky et non. Et maintenant, ma séance reprend. Parfait. Comme vous pouvez le voir, j'utilisais Opus 4.7, mon contexte était de 13 %. Et si vous voulez vérifier tout cela, vous pouvez réellement changer de modèle. Vous pouvez taper slash model pour changer de modèle. Maintenant, évidemment, la valeur par défaut est de 4,7 avec 1 million de fenêtres contextuelles, ce qui est le meilleur du secteur, et la plupart d'entre vous ne construisez pas de projet compliqué, mais si vous créez un projet très complexe comportant plusieurs microservices et une base de code importante, vous avez un mode effort Combien d'efforts voulez-vous que ce modèle fasse preuve ? Donc, si vous appuyez sur la barre oblique Effot, vous verrez apparaître un maximum faible, moyen-élevé. Maintenant, pour vous, Medium va très bien fonctionner. Si vous essayez de créer quelque chose de nouveau à partir de zéro, taille moyenne est largement suffisante. Maintenant, je vais revenir à Xi parce que j' ai beaucoup de jetons à brûler, mais vous devriez opter pour le forfait moyen si vous optez pour un forfait à 20 dollars. Une autre chose que vous pouvez vérifier est de taper usage pour vérifier la quantité de code du caillot que vous avez brûlée Maintenant, j'ai ajouté cette jolie barre intéressante en dessous de chaque session qui m'indique immédiatement l' utilisation. Vous pouvez également utiliser certains plugins comme Codex bar pour me permettre d' utiliser Codex et Cloud Vous pouvez simplement accéder au navigateur Web et installer la barre Codex, et cela vous donnera la même chose que la barre Codex Je vais vous indiquer l'utilisation de votre code cloud, Cursor, quel que l'agent de codage que vous utilisez. Une autre chose que vous pouvez utiliser est la configuration ou vous pouvez vérifier l'état. Et c'est tout. Je vais à nouveau quitter ça 11. Introduction à l'application de bureau Claude: Ouvrons-le dans l'IDE car les terminaux sont vraiment mauvais en termes d'interface. En fait, je peux le fermer et continuer à partir d'une application de bureau Claude. Alors je vais dire : « Hé, je veux juste arrêter. Je n'aime pas la CLI, je veux utiliser l'application Claude. Je vais maintenant utiliser l'application de bureau Claude. Téléchargez l'application Cloud dextro. Vous pouvez l'installer dans votre système, puis vous pouvez simplement vous connecter et autoriser, puis vous pouvez utiliser Claude Code dans et autoriser, puis vous pouvez utiliser l'application Claude Dktoapp La raison en est que vous aurez une bien meilleure interface. Maintenant, je l'utilise déjà pour mes multiples projets. C'est tellement génial. Maintenant, permettez-moi également de vous donner un petit outil à Claude DextoApp afin que vous sachiez en quoi c'est différent du terminal ? Comment cela vous donnera un et une apparence plus visuels aspect et une apparence plus visuels si vous n'êtes pas une personne technique. Comme vous pouvez le voir dans l'application Claude dextro, vous disposez de trois modes mode chat où vous pouvez discuter avec Claude, le mode vache, qui vous aide principalement dans vos tâches quotidiennes, et le mode codage, où vous pouvez réellement écrire un code, et vous pouvez voir toutes vos sessions ici. Ensuite, vous pouvez voir votre profil, je suis sur un plan maximum, et vous pouvez voir quelques modes ici et là. Ensuite, vous verrez que votre cloud fonctionne localement ou sur le cloud ? Maintenant, dans ce cas, mon code s'exécute localement, j'ai donc choisi localement, et vous pouvez ensuite choisir où se trouve exactement votre code. Mon code se trouve dans mon document et dans ce dossier, Claude Code, et je suis sur une branche méchante. Je vais expliquer pourquoi vous avez besoin d'une branche , Je vais expliquer pourquoi pourquoi elle existe pourquoi elle a créé un arbre et ce qu'est exactement un arbre. Ensuite, vous pouvez voir qu'il dispose de quatre modes différents. Demandez-vous l'autorisation à chaque fois que vous effectuez une action dans mon code, ou acceptez-vous automatiquement, êtes-vous en mode plan, ou avez-vous une autorisation de contournement dangereuse ? Je vais t'expliquer davantage. Mais en gros, vous pouvez accéder à l'Automde qui approuve automatiquement tout votre code, et vous n'avez pas à cliquer manuellement sur oui, oui, oui, autant de fois C'est ton chat. Vous avez un mode différent. Pour le moment, mon micro ne fonctionne pas. C'est le modèle que j'ai choisi, qui est votre adversaire de 4,7. Vous pouvez le changer comme vous le souhaitez. 12. 11 Meilleure GUI pour claude avec curseur IDE: Voici donc ma base Cord, et je vais vous expliquer dans les dix prochaines minutes ce qu'elle contient et ce que nous allons faire pour intégrer et exécuter ce produit localement. Je vais donc utiliser Cursor à cette fin. Vous pouvez utiliser n'importe quel identifiant de votre choix. Vous pouvez installer VS Cord, Cursor, windsurf, op, comme bon vous semble Nous allons donc commencer de haut en bas, et je vais passer 10 minutes à vous expliquer l' ensemble de la base de code, non pas pour vous apprendre quelque chose, mais simplement pour vous donner une compréhension de haut niveau. En haut, vous pouvez voir un arbre de travail, créé parce que j'ai ouvert l'application de bureau Claude où une case à cocher d'arborescence a été L'arbre de travail est un moyen de travailler sur plusieurs fonctionnalités en créant simplement un clone de votre élément de code C'est ça. Vous n'êtes pas obligé de le comprendre maintenant, mais nous y reviendrons plus tard. En dessous, vous pouvez voir un dossier Clerk, next, drizzle, node modules, public, SRC et un tas de ces fichiers Comprenons-les un par un. Le fichier le plus important pour vous où se trouve votre base de code réelle est le SRC SRC est votre source où se trouve la majeure partie de votre base de code. Si vous cliquez sur l'application, c'est là que se trouve l' interface principale de votre application. Comme vous pouvez le constater, nous utilisons routeur d'application NextGS afin que vous disposiez de différents composants dans votre application de tâches C'est donc votre composant de formulaire à faire où il contient tous les champs du formulaire. Il y a un onglet de filtre, il y a un onglet d'éléments à faire. Une fonction de liste est en cours. Vous pouvez donc voir tous les différents composants. Vous disposez alors d'une fonctionnalité de connexion et d'inscription dans votre application. Où nous utilisons Clerk pour ne pas avoir à écrire beaucoup de code inutile ou où cet agent d'IA n'a pas à le faire pour vous. Ensuite, il y a une couche intermédiaire qui autorisera chaque demande, et puis vous avez nwt local C'est important. Alors, qu'est-ce que EnVs ? ENV est donc l'abréviation de variable d' environnement. C'est le secret que tu dois cacher à tout le monde. Il s'agit donc d'un exemple de fichier qui signifie que le point local nv réel n'est pas créé, et je dois y mettre tout mon secret Tout d'abord, je vais accéder au tableau de bord du greffier et saisir ma clé publiable Je vais également entrer ma clé secrète ici et je vais entrer l'URL de ma base de données. Je vais donc aller sur console point Neon point tech, et je vais d'abord saisir l'URL de ma base de données Vous pouvez créer un nouveau compte. 13. 12 configuration de l'environnement et des clés pour votre produit: Tout d'abord, laissez-moi vous expliquer ce que sont les variables d'environnement. Ainsi, lorsque vous utilisez un produit, vous devez vous autoriser à en être le propriétaire ou non. Par exemple, si vous entrez dans un bâtiment, vous devez dire au responsable de la sécurité que vous travaillez ici ou que vous êtes venu ici pour une réunion. Vous devez donc vous autoriser. Ainsi, lorsque vous utilisez un autre produit, vous devez dire au système prendre mes clés et autoriser si je suis la bonne personne ou non. Maintenant, dans ce produit, nous utilisons Clerk. Pour l'authentification et l'autorisation, nous utilisons la base de données Neon PoSCRS pour stocker nos données Donc, si vous ouvrez Clerk, vous verrez qu'il s' agit d'un produit ou d' un outil SAS qui vous permet de créer rapidement l'authentification et l' autorisation des utilisateurs. Parfait. Vous pouvez donc vous connecter et simplement commencer à les utiliser. Pour les utiliser avec succès, vous devez évidemment créer une application et faire plusieurs choses afin de pouvoir ensuite payer pour cette application si vous souhaitez disposer de fonctionnalités supplémentaires. Vous avez donc besoin d'une clé publiable et d'une clé secrète, que vous pouvez obtenir depuis leur Je vais donc créer une application dans leur tableau de bord, et comme vous pouvez le voir, vous pouvez ajouter tous ces composants pour simplement créer votre flux de connexion et d'inscription. Maintenant, si tu ne veux pas faire toutes ces choses ennuyeuses tout seul, j'ai un raccourci pour toi. Ce raccourci consiste à utiliser la CLI pour effectuer tout ce travail, automatiquement à l'aide de l'agent AI. Mais je ne vais pas le faire. Je vais simplement créer une application et je vais le faire à mon insu pour que vous compreniez ce que nous faisons Encore une fois, tout cela est géré par notre application. Nous allons trouver un endroit où nous pouvons générer notre clé API. Voilà. Là, je peux voir la clé API. Encore une fois, si vous regardez attentivement, cela est caché exprès, intentionnellement, et cela devrait l'être. Je vais le cacher exprès, et je vais taper cette clé d'API, puis nous allons continuer. Maintenant, pour la base de données Neon, vous pouvez vous inscrire, faire la même chose et créer un projet Dès que votre projet sera créé, vous verrez qu'il vous donne quelque chose qui est à nouveau caché. Si vous cliquez dessus, il est visible. Je vais le brouiller ou le cacher pour le moment. Parfait. Maintenant, j'ai configuré ma base de données Neon, mes ENV pour Clerk et tout va bien. 14. 13 Gérer votre produit localement: Parfait Maintenant, j'ai configuré ma base de données Neon, mes ENV pour Clerk et tout va bien. Commençons par ça. Je reviens à la CLI ou au terminal, et une fois que tout sera opérationnel localement, nous l' utiliserons réellement dans Claude Dextoppp Génial. Comme vous pouvez le constater, voici notre application Todo. Utilisons-le. Je vais donc utiliser mon adresse e-mail pour m'autoriser à accéder à cette application Todo, puis nous allons l'utiliser Écrivons Todo et ensuite nous verrons comment les choses fonctionnent L'année prochaine me posera donc un problème. Nous allons le résoudre plus tard. Écrivons un Td. D'accord. OK, voilà. Vous pouvez voir que vous pouvez ajouter une date à cette tâche, et vous pouvez en ajouter d'autres Vous avez fait des tâches actives et toutes les tâches à effectuer. C'est parfait Il dispose d'un mode sombre et d'un mode clair, et les choses se présentent bien. Vous pouvez également le supprimer . Cette application Studio a donc l'air incroyable. C'est tellement parfait. Supposons maintenant que vous souhaitiez apporter des modifications à cette application Studio. Nous allons maintenant fermer le Ghostty et travailler directement avec Claude DeXtropppo . Vous pouvez également continuer à travailler depuis Vous pouvez également continuer à travailler 15. 14 Commettre et pousser votre code sur github: Nous allons donc d' abord déployer cette application dans un environnement hostile au Cloud afin que vous puissiez la partager avec votre ami. Maintenant, pour ce faire, vous pouvez configurer manuellement les choses InverSelo, vous pouvez donner un certain contrôle à votre CLI, et je vais utiliser l'approche CLI Maintenant, je vais voir si j'ai écrit une invite d' une manière très peu technique, mais j'ai mentionné les aspects techniques, et je vais vous montrer ce que j'ai écrit. Alors, hé, déployez ceci parce que je veux montrer ce projet à mon ami. Vous pouvez le déployer sur Versal et utiliser l' interface de ligne de commande C'est intéressant car vous pouvez soit ouvrir le tableau de bord, copier-coller les clés, variable d' environnement, soit utiliser leur CLI, qui effectuera l'autorisation et tout le reste par elle-même. C'est tellement parfait. Je vais appuyer sur Entrée , puis il fera certaines choses pour moi. Il vérifiera d'abord l'état du projet, puis initialisera le VerSLCI, me demandera de me connecter à VerSL, puis il créera un projet en versal Ensuite, je pourrai partager ce projet avec mon ami. Parfait Voyons s'il est capable de tout faire ou non. De plus, vous pouvez voir que j'ai écrit 9 000 nouvelles lignes de code, et ce code n'est validé nulle part ailleurs. J'espère donc qu'avant qu'il ne déploie quoi que ce soit, il sera validé quelque part Je pense que cela ne va pas s' engager quelque part. Donc, pour valider votre code, vous devez le valider sur GitHub Et en fait, laissez-moi le faire d'abord pour que vous compreniez cela. Vous allez de l'avant et validez ce code dans GitHub. Maintenant, il y a quelques points que vous devez comprendre Chaque fois que vous écrivez du code, vous ne voulez pas perdre l'accès à ce code lorsque vous créez quelque chose de nouveau. Ou disons que vous créez la fonctionnalité numéro un et que vous voulez simplement qu'elle déploie cette fonctionnalité, qu'elle soit disponible pour l'utilisateur, puis que vous souhaitiez qu'elle lance une nouvelle fonctionnalité. Vous avez donc deux options. Vous pouvez soit créer deux branches différentes de votre code afin de pouvoir travailler sur deux fonctionnalités même temps et les fusionner, soit vous pouvez terminer une fonctionnalité, puis vous la validez, puis vous commencez à travailler sur une nouvelle fonctionnalité. Nous allons donc discuter du branchement GitHub, manière dont vous pouvez valider, envoyer et fusionner votre code, et nous en discuterons longuement Mais pour le moment, je veux juste valider mon code sur mon profil GitHub à l'aide de Git, puis nous verrons quoi ressemblera le code validé Plus tard, je vais vous expliquer pipeline CICD de l'ensemble de ce processus, qui est un peu écrasant en ce moment Il crée donc un wrapper GitHub, qui est simplement un dossier dans GitHub pour stocker votre code, puis il le diffuse virtuellement Donc, même si je perds l' accès à ce système, je pourrai toujours avoir accès au code. C'est tellement parfait. Il utilise mon identifiant GitHub et a créé un dossier virtuellement sur GitHub où se trouve toute ma base de code Comme vous pouvez le voir, j'ai créé une application todo et tout mon code se trouve dans GitHub, et maintenant je peux y accéder, ouvrir où je veux Et dans le document Lisez-moi, tout est clairement mentionné. Si vous regardez bien, il n'y a pas d'ENV ici. Cela signifie qu'elle n'a pas engagé les ENV. Je suppose que c'est un dépôt privé. Je peux le rendre public si vous le souhaitez, aller dans les paramètres et le rendre public. Mais encore une fois, ce n'est pas très important. Toute votre base de code se trouve ici et dans une autre vidéo, je vais vous expliquer comment vous pouvez réellement publier, valider et fusionner votre base de code ? Et quelles sont ces branches et en quoi sont-elles utiles ? ce moment, comme vous pouvez le voir, je suis sur une branche principale, ce que voit normalement un utilisateur. Vous pouvez par exemple créer de nouvelles branches. Chaque fois que je voulais créer une nouvelle fonctionnalité, je ne veux pas que mes vrais utilisateurs voient ce qui ne fonctionne pas et ce qui ne l'est pas. Qu'est-ce que cette nouvelle interface utilisateur ? En quoi consiste cette nouvelle fonctionnalité ? Je souhaite travailler dans une nouvelle branche, où je pourrais tester des choses de manière isolée et les construire. J'ai donc créé une nouvelle branche Dev. Visuellement pour vous, vous pouvez également le faire à partir du code. Laisse-moi changer de succursale. Nous allons donc passer à la branche Dev, puis nous améliorerons le produit et apporterons d'autres modifications. Donc, plus tôt, c'était sur la branche moyenne. Maintenant, il va passer la branche en DF et c'est parfait. Nous sommes maintenant sur une branche de développement. Vous gérez donc une succursale locale et une succursale distante. Nous sommes donc maintenant passés à la branche def locale, qui suit la branche distante réelle. C'est tellement parfait. Vous avez une commande bash que je ne veux pas expliquer pour vous embrouiller, mais elle est parfaite Les choses se présentent très bien jusqu'à présent. Commençons maintenant à apporter des modifications. Il y a maintenant un problème que nous avons observé avec notre produit. L'interface utilisateur était très petite, j'ai dû redémarrer le serveur, mais les polices et tout le reste semblaient très petits. Je lui ai donc demandé si nous pouvions améliorer l'interface utilisateur globale et agrandir afin que je puisse l'utiliser sur mon ordinateur de bureau et mon application mobile ? Allons voir ça. Maintenant, l'avantage d'utiliser Claude Dktoapp est que vous pouvez voir, vous pouvez voir quels fichiers ont été édités, ce qu'AllCDE a été supprimé, tout ce qui a été ajouté de manière très agréable C'est pourquoi j'aime Claude Dextoapp pour Claude Code et Parfait Laissez-moi ouvrir un terminal dans le Claude Dektop Apple pour essayer de l'exécuter Je ne sais pas si vous utilisez NPM ou PNPM. Parfait Et si vous actualisez cette page, vous constaterez que votre projet est opérationnel. Parfait La police est maintenant plus grande et vous pouvez la voir clairement sur votre écran. Voyons si c'est optimisé pour les mobiles ou non. Je vais donc changer la réactivité de l' iPhone 12 Pro et la rendre parfaite Ceci est également optimisé pour les mobiles. Il y a un problème l'année prochaine que nous pourrons résoudre plus tard, mais les choses se présentent donc bien. Tout a fonctionné, et maintenant je veux qu'il déploie ce projet, et je voulais partager cela avec mon ami. Dans ce cas, nous allons utiliser Vercel pour déployer ce projet sur un sous-domaine spécifique Nous devons acheter un nom de domaine réel , ce que nous ferons plus tard. 16. 15 déployer votre projet sur vercel: Maintenant, je vais voir. Hé, allez-y et déployez-le sur Vercel pour que je puisse le partager avec mon ami et l'utiliser Et je vais quitter cette commande C pour la quitter et je vais fermer le terminal. Comme vous pouvez le voir, mon projet est en train de déployer mon projet sur Vercel, puis je vais ouvrir ce projet dans un lien spécifique que je pourrai partager avec mon ami et qu' il pourra l'utiliser comme produit réel N'oubliez pas que nous avons configuré notre back-end, notre front end configuré et que tout fonctionne parfaitement. Et au fur et à mesure que nous le déploierons, je suis sûr que nous tomberons sur de nouveaux types de problèmes L'objectif de la création d'un produit est de continuer à résoudre les problèmes afin que vous sachiez ce qui se passe et que vous ayez un contrôle approprié. Nous déployons donc maintenant le front-end de nos projets sur Vercel. Il indique donc que la construction a échoué car votre base de données, votre URL et vos clés de greffier n' ont pas été configurées. OK, il est donc dit que j'ai besoin d' autorisation explicite de votre part pour entrer vos clés dans Vercel Je vais donc vous donner la permission. Tellement parfait. Je veux que vous utilisiez mes clés locales et que vous les transmettiez à Versale&VS Maintenant, vous pouvez le faire manuellement si vous ouvrez Versal Dashboard, et je vais également vous le montrer En attendant, vous verrez que j'ai un tas de produits et laissez-moi voir que notre application Todo est ici Vous allez dans les paramètres et vous verrez les variables d' environnement. Donc, pour le moment, nous sommes en prévisualisation, y a donc pas de variable d' environnement. Vous pouvez créer des variables d' environnement et écrire vos clés et votre payeur de valeur ici, puis il utilisera ces clés pour exécuter votre projet. Je vais fermer ceci pour le moment car nous faisons tout directement depuis la CLI. Il n'est pas nécessaire d' ouvrir le tableau de bord. Je vais donc terminer et nous allons battre. D'accord, j'ai donc rencontré un problème car mon déploiement était bloqué par les mauvais noms d'utilisateur GitHub J'ai donc passé un peu de temps à résoudre ce problème. Donc, si j'ouvre les mots Tableau de bord, regardez le déploiement, vous pouvez voir que plusieurs déploiements ont été bloqués Et si je vais dans le déploiement, cela indique que le déploiement a été bloqué parce que l' e-mail de l'auteur du Commit était celui-ci. Voici le nom d'adresse de mon MacBook. Il doit s'agir d'un e-mail. Ce n'est pas valide et je dois m' assurer que j'utilise l' adresse e-mail ou le nom d'utilisateur. J'ai donc passé du temps. En fait, j'ai demandé à Claude de régler ce problème. Cela m'a donné un coup de pouce. J'ai suivi ces étapes manuellement. Je peux même demander à Claude de le faire pour moi, et j'ai pu résoudre le problème. Maintenant, cela me rappelle une petite chose que vous devez comprendre, c'est le débogage Vous pouvez déboguer des éléments depuis le terminal, mais l'un des outils les plus importants que vous pouvez utiliser pour déboguer est la CLI et le tableau de bord lui-même Maintenant, comme vous pouvez le voir, l'application est prête, je vais ouvrir l'application et je vais vous montrer à quoi elle ressemble exactement. Vous pouvez donc partager ce lien avec votre ami et il pourra explorer n'importe quelle application que vous avez créée à l'aide de Clot Code. Il vous donne donc un petit lien que vous pouvez partager avec votre ami. Bien évidemment, vous pouvez configurer votre propre nom de domaine si vous avez du fromage P ou un nom de domaine. Mais disons que pour l'instant, vous pouvez partager ce lien et qu'ils puissent explorer ce produit spécifique. Je vais donc me connecter , puis je vais créer un to do, et je vais vous montrer oui comment fonctionne le produit dans son ensemble ? Parfait. Je suis connecté et si je crée un todo, disons que je voulais prendre le petit déjeuner et que je crée des todos au hasard Voici mes todos. Je peux simplement le marquer comme terminé. Supposons que je crée un logo ou que je me déconnecte et que je me reconnecte, une chose importante que vous remarquerez est que mes données sont persistantes. Cela signifie que le produit est déployé sur le cloud et que mes données ne sont perdues nulle part ailleurs. Ainsi, quelles que soient les actions que vous effectuez, vous créiez quelque chose de nouveau, mettiez à jour, que vous le modifiiez ou que vous le supprimiez, les données sont préservées. Vous pouvez l'ouvrir sur votre téléphone portable. Vous pouvez l'ouvrir sur votre ordinateur portable et tout fonctionne parfaitement. Il s'agit donc d'une interface mobile. Vous pouvez également faire la même chose en utilisant votre application mobile. Et vous pouvez, vous savez, encore améliorer cela et le rendre meilleur. Utilisez un type de police différent et ajoutez des fonctionnalités et des fonctionnalités supplémentaires également des fonctionnalités et des fonctionnalités supplémentaires dans cette application Studio. 17. 17 introduction aux compétences de claude: C'est tellement parfait. Pour expliquer les compétences, je vais taper compétences Claude Code. Désormais, une compétence est simplement un fichier de balisage contenant des instructions spécifiques qui étendent les capacités de Claude Code pour effectuer une certaine action En fait, si vous lisez la documentation, elle indique clairement que vous pouvez créer, gérer et partager des compétences pour étendre les fonctionnalités du Cloud Code. Et vous devez créer une compétence avec fichier ED à points qualifié contenant les instructions appropriées. Maintenant, vous vous demandez peut-être, eh bien, qu'est-ce qu'une compétence et pourquoi en avez-vous besoin ? Supposons que Claude ne comprenne pas le système de conception de votre entreprise. Vous pouvez réellement créer une compétence en mettant en évidence tous les systèmes de conception que vous avez dans votre entreprise, et vous pouvez simplement les ajouter. Ou disons que vous avez un pipeline CICD spécifique que vous souhaitez suivre, dans lequel vous pouvez créer une compétence, et que les gens créent différents types de compétences afin que Claude puisse travailler d'une manière prédéfinie au lieu de simplement prendre une direction aléatoire Maintenant, c'est l'une des compétences les plus populaires utilisées par beaucoup de gens, et la raison pour laquelle je vous dis d'utiliser une compétence spécifique créée par quelqu'un d'autre, c'est parce qu' elle est facile à utiliser. En fait, nous pouvons explorer de nombreuses compétences au sein de Claude Code. Je vais donc ouvrir le même dossier et initialiser une session fantomatique, et je vais vous montrer où se trouve exactement la compétence Nous allons donc passer au service et ouvrir une fenêtre fantomatique ici. Ensuite, je vais taper Claude juste pour l'initialiser et vous pouvez également faire le même processus sous Windows Maintenant, vous pouvez reprendre une dernière session en tapant simplement CV ou vous pouvez démarrer une nouvelle session. Je vais reprendre la dernière session que j'utilisais dans leur application de bureau, et maintenant je vais taper slash Skills Cela me montrera toutes les compétences disponibles qui sont présentes, et je peux les utiliser. Maintenant, bon nombre de ces compétences sont installées par moi. Nombre d'entre eux sont présents sur leur marché. Je vais donc me rendre sur leur marché et vous montrer quelles sont toutes les compétences disponibles et comment vous pouvez les utiliser. Afin d'étendre les fonctionnalités de Claude Code, Cloud Code a créé un marché où les utilisateurs peuvent réellement ajouter leur identifiant et leurs compétences afin que Claude Code puisse les utiliser pour les orienter dans une direction spécifique Je vais donc d'abord vous montrer ce qu'est une place de marché. Comment pouvez-vous l'utiliser exactement ? Comment pouvez-vous utiliser les différents plugins du marché, et ces plugins peuvent ou non avoir des compétences en la matière. Permettez-moi donc d'aller sur Marketplace et d'ouvrir le plug-in Marketplace. Je vais donc taper plug in, et vous pouvez voir que vous avez près de 165 plugins. Maintenant, en fait, vous pouvez trouver un plugin de tous les outils que nous avons utilisés, et ce plugin sera simplement un serveur MCP Tapons donc Clerk et voyons s'ils ont une boucle de connexion. Ils n'ont pas Neon, oui, ils ont un plugin qui vous permet d'utiliser leur serveur MCP et vous pouvez créer, modifier, supprimer des bases de données et faire toutes sortes de choses directement dans En fait, vous n'avez même pas besoin de MCP. Vous pouvez réellement utiliser leur CLI. Les deux fonctionnent. Voici donc Neon. Quel est l'autre produit que nous avons utilisé ? Je suis sûr qu'ils auront également un plug-in universel. Je suppose que je l'ai déjà installé. Vous allez dans le plugin installé, vous pouvez voir que WordL est déjà installé. J'ai ajouté un serveur Figma MCP, Gmail et un Le serveur MCP est essentiellement un moyen de donner accès à leur API afin que Claude puisse l'utiliser parfaitement Et puis j'ai un plugin Claude Hut qui me donne ces statistiques. Donc, si vous cliquez sur Escape, c'est Claude Hut, qui vous donnera toutes les statistiques juste en dessous du code Claude. Les plugins peuvent donc tout faire, qu'il s'agisse d'améliorer la CLI Claude Code leur permettre de donner accès à certaines tâches. Je vais donc y retourner, ouvrir Plug-in Marketplace et voir tout qui s'y trouve et ce qui a été installé. 18. 18 créez votre première compétence en code claude: OK, parfait. Je vais maintenant vous expliquer ce qu'est une compétence, comment vous pouvez créer une compétence dans Claude Code et comment vous pouvez réellement l'utiliser. Supposons que vous soyez chef de produit et votre travail consiste à résoudre les problèmes des utilisateurs. Vous parlez donc à plusieurs utilisateurs, comprenez leur problème, puis vous essayez de résoudre ce problème. Supposons que vous soyez également un créateur qui sait utiliser Cloud Code et que vous aimez créer des solutions. Ainsi, chaque fois que vous utilisez Cloud Code et que vous souhaitez qu'il exécute une certaine série de tâches d'une manière spécifique, vous devez lui donner beaucoup de contexte, ce qui est parfois accablant. Supposons, par exemple, que vous ayez une liste de cinq à dix problèmes auxquels vos utilisateurs sont confrontés, que vous souhaitiez rédiger davantage de scénarios et cas et que vous souhaitiez simplement réfléchir davantage au problème avant de réellement élaborer une solution Mais vous ne savez pas exactement, hé, quelle est la bonne façon de réfléchir à un problème ? Vous pouvez réellement développer une compétence et l'appeler PM brainstorming Chaque fois que vous tapez, utilisez la compétence de brainstorming PM, et cette compétence comportera un certain nombre d'actions que le Claude effectuera qui, en termes techniques, consiste à donner une liste de balises afin qu'il comprenne vraiment bien votre approche . Supposons, par exemple, qu'un utilisateur souhaite ou exporte des fonctionnalités dans votre produit. Votre première question serait, hé, pourquoi en ont-ils besoin ? Vous vous demanderez donc si l'Excel est différent des données affichées dans le tableau de bord ? Cela signifie qu'il doit y avoir plus de données disponibles dans Excel que celles affichées dans le tableau de bord. C'est pourquoi ils en ont besoin. Une autre raison pourrait être qu'ils voulaient utiliser ces données ailleurs, ou qu'ils voulaient partager ces données avec quelqu'un, ou qu'ils voulaient les réconcilier. Vous souhaitez donc lui donner un ensemble spécifique d' actions que vous effectuez en tant que Premier ministre pour résoudre un problème, ou le nombre de commerçants confrontés à ce problème. Donc, si votre liste de questions était du genre : « Hé, je veux que vous compreniez quel est le problème, combien de personnes y sont confrontées ? Pourquoi souffrent-ils ? Et quelles sont les solutions possibles ? Et quel est le compromis entre chaque solution et les autres scénarios que nous devons gérer ? Il s'agit d'une liste de procédures ou de mises en garde habituellement suivies par un chef de produit. Maintenant, si vous ne voulez pas effectuer vous-même tous ces processus manuels, vous pouvez créer une compétence. Vous pouvez simplement créer une compétence et la nommer exemple chasseur de commentaires ou analyseur de commentaires Vous pouvez nommer une compétence comme vous le souhaitez. La prochaine fois que vous recevrez un commentaire ou un problème, il vous suffira de taper « Hey, use Feedback Analyzer » pour analyser les commentaires que nous recevons d'un marchand Allons-y, créons une compétence spécifique, appelons-la analyseur de feedback ou vous pouvez créer une autre compétence appelée génération d' idées qui fait exactement la même chose, par exemple quelle est la nouvelle idée, comment elle peut rapporter de l'argent ? Comment est-ce lié ? Comment cela résoudra-t-il le problème ? Combien de problèmes d'utilisateurs seront résolus, niveau d'effort pour le créer. C'est tellement parfait. Vous avez l'habitude de poser ou de répondre à de nombreuses questions avant de commencer la mise en œuvre. Je vais donc ouvrir Claude Code, puis nous allons créer une compétence. Parfait. Permettez-moi donc de zoomer un peu. C'est tellement parfait. Maintenant, pour créer une compétence, vous pouvez ouvrir un éditeur de code, écrire le markdown vous-même, ou vous pouvez utiliser un créateur de compétences ou vous pouvez utiliser un plugin qui peut vous aider à créer une compétence Ce plugin, créateur de compétences, il suffit de cliquer dessus, présenter, d'installer le plugin, et c'est génial. Vous précisez maintenant qu'il est parfait. Je lui dis que je suis chef de produit. Je veux que vous créiez une compétence afin que lorsqu'une équipe commerciale mon équipe de gestion de projet ou , mon équipe de gestion de projet ou notre PDG nous donne une idée intéressante et intéressante, nous vérifiions une série de questions que nous devons leur poser pour comprendre l' ampleur du problème, les différentes manières dont nous pouvons le résoudre, et vous puissiez me poser d' autres questions pour comprendre le contexte du problème, puis essayez de lui attribuer une note de un à dix en termes d'efforts nécessaires. Quels en sont l'impact et les avantages ? Et vous pouvez utiliser la recherche sur le Web pour comprendre où se trouve notre entreprise ou où se situe notre produit dans le paysage concurrentiel Et vous pouvez utiliser le plugin de création de compétences que nous venons d'installer pour créer cette compétence. Permettez-moi d'appuyer sur Entrée et voyons s'il est capable de créer une très bonne idée, des compétences de brainstorming pour nous ou non Attendons donc peu et nous verrons s' il peut donner un nom intéressant et intéressant à la compétence et s'il est capable de créer cette compétence ou non. Si c'est le cas, quel que soit le markdown, il inscrira cette compétence spécifique et nous pourrons ensuite simplement l'améliorer ou la modifier encore et voir dans quelle mesure le résultat nous sera renvoyé Cela me pose donc un tas de questions : comment la compétence devrait-elle mener l'entretien avec vous ? La compétence doit donc me poser trois à quatre questions à la fois pour comprendre la profondeur du problème. Ensuite, il me demande : « Hé, quel résultat voulez-vous obtenir à la fin ? Je veux un mémo de type PM parfait qui me montre le problème, l'utilisateur concerné, le cadre, ou je dirais qu' un tableau de bord ou un verdict parfait est préférable, qui utilise un score RC Oh, parfait. Celui-ci est meilleur. C'est plus qualitatif. À la tonne, voulez-vous qu'une tonne soit repoussée honnêtement, qu'il s'agisse d'un analyste neutre ou d'un défenseur du diable ? Peut-être rétorquer honnêtement et soumettre. Je lui ai donné ces trois réponses à toutes les questions qu'il m'a posées pour créer une compétence appropriée pour moi. Maintenant, cet outil de compétence est vraiment bon car maintenant, si je pose une question précise, il n'hallucinera pas et ne me donnera pas une longue réponse Je vais exactement me dire que, hé, c'est ce que tu devrais suivre. OK. Comme vous pouvez le constater, il a créé une compétence pour moi et l'a baptisée évaluateur PM Ida qui me posera un tas de questions, puis cela me donnera le résultat de RICE, à savoir votre portée, votre impact, votre confiance et vos efforts, et IS et Moscou, ce impact, votre confiance et vos efforts, et IS et Moscou, sont tous des cadres de gestion de produits différents, sont tous des cadres de gestion de produits différents, et cela me donnera la décision d'y aller, de ne pas y aller, d' avoir besoin de plus d'informations, de verdict et d'essayer de m'y opposer honnêtement. Je vais cliquer sur Oui et il le créera pour moi. Il a créé cette compétence et permettez-moi d' essayer de l'ouvrir dans une bien meilleure interface. Alors maintenant, vous pouvez voir que cela a créé cette compétence pour moi. Il a donné à cette compétence un nom, une idée de PM, un évaluateur, et cette compétence a une description et un processus étape par étape approprié indiquant que vous êtes un évaluateur principal de PM Cela dit donc que vous êtes un modèle mental senior de premier ministre dans le domaine d'une compétence. Vous êtes déclenché lorsque quelqu'un demande au PDG demander cette fonctionnalité spécifique ou que l'équipe commerciale demande pourquoi, et vous devez d'abord examiner l'énoncé du problème et lui poser des questions telles que qui la pose ? Quel est le problème, qui est confronté au problème. Ensuite, vous devez recueillir des preuves et obtenir un impact. Ensuite, vous devez voir si seul un groupe spécifique de personnes en a besoin, puis vous devez les évaluer en utilisant la méthode RICE. Vous pouvez également utiliser la méthode Ice ou Moscow pour le faire. Ensuite, vous devez leur donner un verdict final. C'est tellement parfait. Dans l'ensemble, cela semble bon. Je veux dire, tu peux passer plus de temps à le lire si tu veux. Mais l'idée principale de la compétence est d'effectuer un certain ensemble d' actions à chaque fois afin de gagner du temps et de ne pas avoir à spécifier le même ensemble d' instructions à chaque fois. 19. 19 Utiliser vos premières compétences: Donc, si vous regardez attentivement, je vais vous donner un message du genre : « Hé, mon PDG dit que, les gars, nos marchands sont confrontés à des problèmes. Ils ne sont pas en mesure de voir le statut des paiements sur la page d'accueil, et c'est pourquoi ils ne sont pas en mesure d'analyser et réconcilier correctement les choses à la fin de la journée. s'agit d' un traitement simple je vais administrer au caillot Comme il contient des mots similaires à ceux de mon PDG, il va identifier l'intention et utiliser automatiquement cette compétence, puis il me permettra de prédire un verdict Et je vais écrire. Peux-tu m'aider ? Voyons si elle initialise et utilise la compétence que nous venons créer et si elle me donne la réponse telle que je l'ai demandée Il est donc dit : « Hé, voulez-vous que j'utilise cette compétence pour répondre à cette demande ou à cette question ? Parfait. Je vais dire oui. Et si vous regardez la réponse, elle me donnera la réponse de la même manière que je le demande habituellement aux gens chaque fois qu'ils ont des idées ou des problèmes. Il utilise donc cette compétence pour effectuer toutes sortes d'actions, que je devais auparavant spécifier ligne par ligne. Hé, fais ceci d'abord, puis fais ça d'abord, puis fais ça. Vous pouvez donc voir qu'il me pose d'abord un tas de questions, puis il me donnera la réponse. Quel commerçant se plaint ? Combien me donnent le nom si tu veux. De quel type de marchand s'agit-il ? Est-ce une peur que d' identifier ce qu'ils ne sont pas en mesure de voir et ce que le commerçant essaie exactement d'accomplir à partir de son tableau de bord ? Et à quoi ressemble la page d'accueil actuelle ? Tellement génial. Vous pouvez voir qu'il vous pose un tas de questions simplement en utilisant cette échelle. Vous pouvez évidemment taper votre réponse. Je vais donc simplement appuyer sur la touche Tab, et cela me donne également une réponse, une réponse hypothétique, ce qui n'est évidemment pas correct dans le monde réel, mais je vais simplement appuyer sur Entrée et voyons voir, à partir d'une réponse aussi petite, elle est capable de me donner un verdict parfait ou Au premier round, j'ai répondu que la plupart des entreprises le demandaient, cinq commerçants se sont plaints de l'assistance et qu'il s' agissait principalement d'un problème de réconciliation. Après avoir lu ceci, il m'interroge maintenant deuxième round sur les preuves et l'impact. Quel pourcentage du chiffre d'affaires de l'entreprise représentent donc ces cinq commerçants qui se plaignent par le biais de l'assistance ? Qu'est-ce qu'une réconciliation interne brisée en particulier ? Quels sont les résultats que nous visons et comment les mesurons-nous ? Et en termes d'efforts rudes, la réconciliation peut être réalisée en quelques semaines ou en quelques trimestres. Cela dépend de la profondeur à laquelle vous voulez le construire. Vous pouvez donc répondre au deuxième tour, et il me donnera ensuite la réponse. Donc j'ai raison. Voyons voir, je vais taper des choses très faibles maintenant, juste pour pouvoir contourner tous ces tours et obtenir une réponse prévisible. Tellement génial. Vous pouvez maintenant voir la réponse. Je suppose que cela ne me pose pas d'autres questions. Cela m'a donné un énoncé du problème, le score Rice, le score I, et vous pouvez évidemment en savoir plus à ce sujet. Si vous êtes chef de produit, vous savez exactement ce que sont le riz et l'IS. Rice est donc votre portée, impact, votre confiance et vos efforts. Par exemple, si vous créez cette fonctionnalité, combien de marchands pouvons-nous atteindre avec cette fonctionnalité ? Quel est l'impact sur notre produit ? Dans quelle mesure sommes-nous convaincus que cela résoudra le problème et combien d'efforts cela demandera-t-il ? Il en va de même pour les yeux, l'impact, la confiance, la facilité et Moscou. Est-ce une fonctionnalité indispensable ? C'est ainsi que vous développez une compétence et que vous l'utilisez dans le scénario du monde réel afin ne pas avoir à écrire un ensemble d'instructions spécifique à chaque fois. Génial. Maintenant, je vais installer un plugin très populaire qui utilise des compétences pour résoudre un problème de développement logiciel. Le nom du plugin est superpower, qui possède 12 à 15 compétences permettant de résoudre un ensemble spécifique de problèmes 20. 21 Pourquoi et comment utiliser SDLC C: Claude Code est donc génial. Cela peut vous aider à construire tout ce que vous pouvez imaginer, et c'est un très bon outil qui peut vraiment accélérer l'ensemble du processus. Mais il y a un gros problème. Si vous regardez comment le produit est construit, avant même l'arrivée de l'IA, il a été conçu avec une planification et une compréhension appropriées de tout. C'est pourquoi vous devez comprendre le cycle de vie du développement logiciel et savoir comment cela fonctionne exactement. Maintenant, pour vous expliquer cela, je vais simplement ouvrir le bloc-notes et vous montrer quelles sont les principales étapes suivre lorsque vous créez un logiciel Alors laisse-moi t'écrire quelque chose , puis je te montrerai. Ainsi, chaque fois que vous voulez créer quelque chose, vous devez d'abord écrire l'exigence. Ensuite, cette exigence inclut le problème que nous sommes en train de résoudre, l'impact que nous avons sur notre produit existant. Quelles fonctionnalités développons-nous ? Et quand je parle d'interaction, je parle d'interface utilisateur et d'expérience utilisateur. Vous devez configurer correctement la manière dont vous allez mesurer l'utilisation et les analyses de cette fonctionnalité, ainsi que la manière dont vous allez la publier et la déployer. Maintenant, si votre produit utilise plusieurs autres produits fonctionnalités ou microservices, vous devez également écrire sur les scénarios de test afin de connaître ces éléments à l'avance en cas de panne connaître ces éléments à l'avance en Vous devez également créer pipelines CI et CD afin que tout fonctionne correctement Il y a donc beaucoup d'autres choses qui se sous le capot lorsque vous créez le logiciel lui-même. Et je viens de vous donner un tout petit morceau de gâteau pour vous aider à comprendre l'ensemble du processus. Maintenant, ce processus doit être suivi de manière idéale lorsqu'un produit est réellement fabriqué. Et lorsque vous travaillez avec Claude Code, celui-ci ne suit pas un cycle de vie de produit spécifique. Pour ce faire, nous allons utiliser les compétences. Voyons donc ce que sont les compétences et comment nous pouvons les utiliser. 21. 22 compétences exceptionnelles pour le cycle de vie du développement de logiciels: Parfait. Comme vous pouvez le voir, le plugin Superpower Puddle est maintenant activé, et maintenant je vais vous montrer toutes les compétences que ce plugin m'apporte Maintenant, la superpuissance est simplement un plugin doté de nombreuses compétences qui permet à Claude Code travailler d'une manière spécifique. La première compétence de la superpuissance est le brainstorming. Cela signifie que chaque fois que nous essayons de créer un produit spécifique, nous résolvons un problème. Et lorsque vous résolvez un problème, vous réfléchissez en fait à une solution différente pour le même Supposons donc que vous développiez produit spécifique pour un groupe de personnes, que vous souhaitiez réellement approfondir, comprendre davantage de problèmes qui y sont associés et comment pouvez-vous le résoudre de manière bien meilleure ? Cette compétence vous aidera donc à mieux résoudre un problème en faisant du brainstorming et en posant d'autres questions une autre compétence consiste à rédiger Comment pouvez-vous rédiger efficacement un plan approprié, le parcourir plusieurs fois, et cela est très similaire au fonctionnement de votre mode plan En fait, vous pouvez demander à Claude : « Hé, dressez la liste de toutes les compétences fournies par le plugin Superpower, et à quoi servent-elles ? Et il vous indiquera exactement quelles sont les compétences inhérentes à la superpuissance et celles qui peuvent exactement vous aider à atteindre La première compétence consiste donc à utiliser le superpouvoir. Donc, si vous venez de le mentionner, vous utiliserez simplement compétences de superpuissance pour décider quoi réfléchir, quoi écrire, comment exécuter, comment construire, Il n'est donc pas nécessaire de spécifier une compétence spécifique. Il suffit d'écrire en utilisant les superpouvoirs. Ensuite, vous avez la compétence de brainstorming, dont nous avons expliqué qu' elle explorera les exigences relatives à l'intention de l'utilisateur, conception avant toute mise en œuvre Ensuite, vous avez vos compétences en matière de plan de rédaction, qui inscriront vos exigences Specsa dans un plan détaillé en plusieurs étapes Ensuite, il y a la compétence d'exécution du plan qui exécutera le plan écrit de la manière appropriée et souhaitée. Ensuite, vous avez le développement piloté par un sous-agent où vous n'avez pas à spécifier qu'il lance plusieurs agents parallèles pour le développer plus rapidement. Il le fera pour vous. Il en va de même pour les agents parallèles Dispatch, vous disposez d'un développement piloté par les tests, qui rédigera d' abord des scénarios de test avant de créer quoi que ce soit. Ensuite, vous avez le débogage systématique, qui vous aidera à écrire les échecs de test appropriés, déboguer les choses pour vous et à écrire les correctifs appropriés Ensuite, vous avez un flux de travail Git, puis vous utilisez l'arbre de travail Git, qui créera un arbre de travail, puis isolera vos fonctionnalités afin que vous puissiez créer plusieurs éléments en même temps. Ensuite, il y a une vérification avant la fin, qui vérifiera toute la mise en œuvre dans l'ensemble des sessions avant qu'elle ne déclenche réellement un PR. Ils possèdent donc beaucoup de ces compétences qui vous aideront à travailler correctement de la manière spécifique que vous souhaitez. Maintenant, comment allons-nous l' utiliser et quand allons-nous l'utiliser ? Maintenant, pour utiliser ces choses, je vais créer quelque chose comme un vrai produit, puis nous utiliserons la superpuissance pour construire plus efficacement avec crotcd 22. 23 claude vs codex et curseur sor: Maintenant, avant de poursuivre le cours, je voudrais que vous abordiez un point très important. Donc, pour le moment, vous ne pouvez utiliser Claude Code que si vous êtes abonné. Leur abonnement commence donc à 20$ par mois et passe à 200$ par mois selon votre consommation. Maintenant, j'ai personnellement un abonnement maximum de 100$, mais je comprends. Beaucoup d'entre vous ne veulent pas vraiment payer 20$ juste pour utiliser Claude Code. Je vais donc vous montrer quelques alternatives que vous pouvez utiliser, et vous pourrez faire exactement la même chose avec ces alternatives. La première alternative est le Codex. Maintenant, Codex propose un plan gratuit qui vous permet d' utiliser son agent de codage sans payer beaucoup d'argent Maintenant, ils ont d' autres plans comme un plan Go en Inde, qui ne vous coûte que 400 roupies Ils ont un plan plus, qui coûte environ 20$, et ils ont également un plan de 100$. Donc, si vous êtes quelqu'un qui souhaite simplement essayer ces agents de codage AI, Chat GPT est un bon point de départ Ils vous offrent une utilisation limitée du Codex sur un plan gratuit, et je suppose que si vous voulez simplement créer quelque chose de très petit, juste pour expérimenter avec ces agents de codage AI, vous pouvez utiliser Codex CLI, simplement cliquer sur Codex, puis installer puis Cela va fonctionner exactement de la même manière, tout comme Claude, et je vais vous montrer comment vous utilisez le Codex, tout comme Claude Code suffit donc de consulter la documentation du développeur, cliquer sur la CLI, et vous pouvez installer la CLI du Codex et commencer à l'utiliser immédiatement. Il s'agit de la première alternative. niveau gratuit du Codex est assez généreux et vous pouvez créer certaines choses vous-même. autre option ou alternative Open Cod est une autre option ou alternative à Claude et Codex Maintenant, Open Cod est très populaire parce qu'il est open source. Maintenant, vous pouvez utiliser tous les modèles populaires d' OpenCD , comme Kimi k two, le modèle Quin, le modèle Deep Seek, et ils ont également OpenAI et le modèle et ils ont également OpenAI et Si vous allez sur leur page de tarification, vous pouvez utiliser Open Cord gratuitement ou ils ont leur plan à partir de 5$ le premier mois. Comme tout autre agent de codage, ils ont également une CLI Vous pouvez donc simplement vous rendre chez leurs développeurs, cliquer sur CLI, installer OpenCOD et commencer à l'utiliser immédiatement. Tous ces agents de codage AI sont vraiment bons, et je ne trouve aucune différence majeure entre Claude, Codex et Open Cod C'est donc la troisième alternative qui s'offre à vous. Le quatrième est Cursor. Maintenant, Cursor est un IDE. Cela signifie que vous pouvez installer Cursor dans votre système. Mais si vous vouliez utiliser leur CLI, eh bien, ils ont aussi une CLI. Vous pouvez simplement continuer, installer leur CLI et commencer à les utiliser. Dans cette vidéo, je vais choisir Codex parce que je trouve que le niveau gratuit du Codex Codex est assez généreux et que beaucoup de personnes peuvent l' utiliser Et ils ont de très bonnes limites. Je vais cliquer sur CLI et je vais installer la CLI. Vous ouvrez donc n'importe quel terminal, vous pouvez simplement utiliser votre terminal natif ou vous pouvez utiliser notre terminal comme Cost que j'ai installé dans mon système. Vous pouvez simplement installer Codex CLI globalement en tapant simplement NPMiglobal et en installant OpenAI Codex. C'est ça. Vous pourrez installer leur CLI, puis vous pourrez taper Codex pour simplement démarrer, et oui, s'il vous demande de vous connecter, tapez simplement slash login, slash Logout pour vous connecter et Logout, et vous pouvez changer de modèle en tapant slash model Maintenant, si vous utilisez le Codex, je vous recommande d' utiliser le dernier modèle, mais de réduire l'effort ou le raisonnement à niveau moyen afin ne pas vraiment épuiser vos limites très rapidement Et désactivez également le mode rapide s'il est activé. Donc, si vous voyez qu' il existe un mode rapide, vous pouvez simplement le désactiver. Tapez simplement slash fast et vous pouvez désactiver le mode rapide. Parfait. Et maintenant, vous pouvez commencer à utiliser Codex comme n'importe quel autre agent de codage, qu'il s'agisse de code caillot, de code ouvert ou de Cursor CLI, ils sont tous exactement les mêmes Même si je tape juste quelque chose pour vous, vous pouvez taper une barre oblique, et vous verrez beaucoup d'options exactement identiques, tout comme Claude Slash Model vous donnera accès à toutes les options de modèles dont vous disposez L'autorisation Slash vous permettra de modifier l'autorisation du Codex. Slash Memories, Sky Slash Skills, critique de canulars. La plupart des caractéristiques et fonctionnalités, quelles que soient celles présentes dans Claude Code seront exactement les mêmes. Je vous recommande d'utiliser codex HatGPTS si vous ne voulez pas vraiment payer pour Et vous pouvez également essayer quelques autres CLI. Cursor vous offre une très bonne limite dans le niveau gratuit Cursor propose donc également un niveau gratuit généreux. Parfait. Je vais taper slash quid pour fermer Codex ou slash Logout pour simplement De la même manière, vous pouvez simplement ouvrir le document CLI d'Open Cod et vous pouvez l'installer. Vous pouvez également faire la même chose avec Cursor. Parfait. C'est une façon d' utiliser n'importe quelle alternative au cloud si vous ne voulez pas vraiment payer. 23. 24 artefacts pour le design: Vous pouvez désormais utiliser Claude, JA JBD ou n'importe lequel de ces grands modèles de langage pour créer un artefact en direct que vous pouvez utiliser rapidement et voir si l' interface de conception est bonne ou non J'ai simplement écrit : « Hé, je suis en train de créer une application Todo Je veux que tu crées un design pour ça. Le design doit d' abord être mobile avec une navigation, et comme il s'agit d'une application Todo, je veux que vous créiez une tâche Donc soit je peux le taper , soit parler, et vous écrivez simplement le texte pour moi. Il doit avoir une date d'échéance. Vous devriez choisir un créneau du matin, de l'après-midi et du soir. Souhaitez-moi juste un bonjour, bon après-midi dans cette application en haut de la page d'accueil, et vous pouvez me poser quelques questions si vous en avez, et vous devez créer un artefact en direct pour cela Maintenant, l'avantage d'un artefact en direct est que je peux rapidement créer un artefact, l'utiliser rapidement et voir si je suis satisfait du design ou non, et je peux le répéter dans le chat Et cela peut être fait en utilisant Claude et Chat GBT. En fait, permettez-moi de le copier et de créer un artefact en direct en utilisant également Chat GPT Je vais donc créer un artefact vivant et utiliser un ha GPT moderne Alors maintenant, il me pose un tas de questions. Je veux que mon nom apparaisse sur la page d'accueil. Le design doit être épuré et minimal. Et oui, je veux une véritable API de synthèse vocale que je puisse utiliser dans cette conception. Parfait. Maintenant, il est en train de créer un artefact pour moi que je peux réellement ouvrir et utiliser sur cette interface de discussion, et je peux l'éditer ou l' améliorer encore Maintenant, c'est juste un moyen très rapide de créer un design, mais ce n'est pas la bonne façon de le faire. Je vais vous montrer comment utiliser le design des caillots pour bien faire les Maintenant, n'oubliez pas qu'il ne s'agit que d'un design frontal. Il ne s'agit pas d'un produit réel. Parfait. Dans l'ensemble, le design semble bon, même si je suppose que je ne suis pas en mesure de sauvegarder quoi que ce soit Je suppose qu'il n'y a aucun moyen d' économiser, sinon cela ne fonctionnera pas. C'est juste un design pour que je puisse itérer et améliorer ce design ici Regardons le résultat de Claude. Claude a donc créé quelque chose qui semble bien pire. Comme si ce n'était pas optimisé pour les mobiles. Je peux voir le calendrier. Je peux voir le bouton plus, mais le résultat est correct, pas le bon résultat que je m' attendais à ce que Claude fasse. C'est tellement parfait. Même si vous accédez au code source de cet artefact, tout cela est un fichier JSX, l'app point GSX Cela signifie qu'il ne s'agit que d'une interface. Toutes ces valeurs sont des codes en dur codés sous forme de paire clé-valeur, et il n'y a pas de backend, et c'est un bon point de départ. Mais encore une fois, ce n'est pas la bonne façon de créer un design. Je vais donc terminer ces deux points, et je vais vous montrer comment créer réellement ce design en utilisant le design de caillots. 24. 25 temps pour améliorer le design: C'est tellement parfait. Vous savez maintenant comment créer un produit et comment le rendre vivant. Le prochain grand défi auquel vous serez confronté est lié au design. Comment donnez-vous à votre produit un look exceptionnel ? Je vais donc commencer une session fantomatique, et je vais vous aider à comprendre comment donner à votre produit une apparence incroyable Je vais donc taper Claude pour initialiser Claude, et vous pouvez voir que j' utilise Opus 4.7 avec 1 million de fenêtres contextuelles Mes efforts sont très importants. Vous pouvez le réduire à moyen si vous travaillez sur un projet simple, et vous pouvez faire la même chose avec n'importe quel agent d'IA que vous utilisez, qu' il s'agisse de Clotde, Codex, Open Code Donc, si vous partagez le lien de votre application avec quelqu'un, sa première réaction sera : « Hé, c' est bien, mais ce n'est pas génial ». Par exemple, j' ai pris le temps de créer un très bon design pour cette application Todo, et je vais vous le montrer Maintenant, vous pouvez utiliser Figma ou Clot Design ou tout autre outil pour créer ce Si vous regardez la phase todo proprement dite, elle vous indique le nom de l'utilisateur Il y a un noir dans le mode clair, il vous montre un petit calendrier hebdomadaire. Il vous montre toutes les tâches à effectuer, terminées et en attente. Maintenant, il existe une autre fonctionnalité qui vous permet attribuer l' heure à votre tâche, ce qui vous permettra simplement de classer votre tâche dans une catégorie comprenant le matin, la charge de travail et la nuit. Et vous pouvez voir, il y a une page d'accueil. Il y a une page d'aperçu, il y a une page de profil. Et il y a un bouton plus. Dans la première version, nous pouvons peut-être supprimer Insight, mais nous devrions avoir une page de profil, une page d'accueil et le design général, et celui-ci devrait être optimisé pour les mobiles . Deux options s'offrent à vous. Soit vous copiez et collez, soit vous glissez ou déposez une capture d'écran si vous en avez, mais le problème est que beaucoup d'entre vous ne savent pas comment utiliser Figma ou comment utiliser un outil de conception professionnel Vous vous retrouvez donc avec une simple expérimentation. Vous continuez à demander à Claude Code jusqu'à ce que vous soyez satisfait du design Maintenant, il n'y a rien de mal à cette approche. C'est génial. Mais la meilleure façon d' itérer et de créer un design pour un produit réel est d'utiliser le design dans le cloud Dans la vidéo suivante, je vais vous montrer comment utiliser design des caillots et comment améliorer réellement le design de votre application 25. 26 introduction au design de claude: Il a maintenant deux options. Vous pouvez créer une structure filaire de votre application ou votre design ou créer des maquettes haute fidélité Dans la plupart des cas, j'espère que vous voulez éviter la partie filaire et créer directement des maquettes haute fidélité Je vais cliquer sur Créer, et cela me donnera une interface de discussion que je pourrai utiliser pour créer un design. Vous pouvez donc ajouter un système de conception, vous pouvez simplement mettre un fichier HTML qui peut agir comme un système de conception. Vous pouvez simplement enregistrer votre système de conception au format PDF. Vous pouvez faire toutes sortes de choses, mais je suppose que la plupart d'entre vous ne savent pas ce qu'est un système de conception Nous allons donc ignorer cette option En fait, n' utilisons pas la capture d'écran. Je vais vous montrer comment créer un très bon design sans même donner de référence. Et vous pouvez simplement glisser-déposer le fichier Figma au cas où vous travailliez dans une installation professionnelle où vous avez le fichier Figma J'ai écrit un message du type « Hey, je suis en train de créer une application Todo et je veux que vous créiez un design pour elle Ce design doit d'abord être mobile avec navigation dedans. Il s'agit d'une application Todo Je peux créer une tâche en tapant le nom d'une tâche ou je peux dire chaque tâche doit avoir une date d'échéance et un créneau horaire, comme le matin après-midi soir, et vous devez faire en sorte que la page d'accueil de l'application soit vraiment belle et optimisée pour les mobiles et simplement me souhaiter bonjour, bon après-midi, selon l'heure à laquelle j'ouvre l'application. Et pendant que vous en créez le design, posez-moi des questions si vous avez en tête et utilisez une police cool, comme fictory, et un système de design frontal comme SATCN Voici, encore une fois, une très courte demande que je viens de donner à Claude Code. Et comme vous pouvez le constater, il y a un tas de questions avant de commencer à créer un design pour moi. Alors, quel nom devrait-on utiliser pour nous ? Je peux peut-être utiliser mon nom. On me demande maintenant de choisir une ambiance. Est-ce que ça va être calme et minimal ? Est-ce que ce sera une couleur ferme et amicale, un look moderne, peut-être un style calme et minimal ou une touche chaleureuse et amicale, et ma couleur préférée est le bleu, alors je vais opter pour le bleu Je peux demander. Pour ajouter quelques exemples de tâches afin que le design soit beau, il ne devrait y avoir que trois emplacements. Et il me demande de choisir un style de calendrier. Peut-être que ce type de style de calendrier est bon. Je souhaite avoir une navigation mobile qui ressemble à celle-ci. Permettez-moi peut-être de zoomer un peu plus pour vous. Ce type de navigation par le bas semble donc bon. J'en veux quelques-uns, juste un design raffiné ou choisissons trois variantes du design. Je pense que ces polices ont l'air bien. Je vais donc cliquer sur Continuer pour accélérer le processus et vous montrer exactement comment Claude Design crée le design de notre application pour nous ? 26. Conception de 27 claude: Maintenant, j'ai ce que j'ai produit grâce à clod design, et comme vous pouvez le constater, ces designs sont incroyables Je vais maintenir la touche Commande enfoncée et zoomer un peu, et comme vous pouvez le voir, il a suivi les directives que je lui ai données au départ, qu'il devrait utiliser la couleur bleue. Le design doit être accrocheur. Et comme vous pouvez le constater, il me souhaite un bon après-midi. Et je peux voir toute la tâche ici. Il y a une page dédiée où je peux parler et enregistrer un texte todo J'ai créé une autre variante plus minimale et plus calme. Et je suppose que cela a créé une troisième variante. C'est tellement parfait. J'ai créé trois variantes pour moi. Personnellement, j'aime bien la variante numéro un. Alors allons-y et choisissons la variante numéro un. Mais avant cela, je voulais juste expliquer que vous pouvez réellement utiliser le mode d'édition et que vous pouvez modifier le composant en ajoutant simplement un commentaire. La conception des caillots est donc vraiment bonne. Vous pouvez augmenter ou diminuer les choses ici, et c'est vraiment une bonne amélioration. Vous pouvez donc modifier la taille, la couleur, la hauteur de ligne du composant. En fait, vous pouvez simplement ajouter un commentaire, et il fera des choses pour vous. Vous pouvez donc ajouter un commentaire et simplement taper quelque chose et cela changera cela. Par exemple, disons que je ne veux pas que ça vienne ici. Supprimez-le donc d'ici et il le supprimera pour vous. Je pense que je dois l'envoyer à Claude, et voilà. Il va commencer à travailler et il va le supprimer d'ici. Vous pouvez donc apporter de vrais changements simplement en ajoutant un commentaire. C'est tellement parfait. Dans l'ensemble, je pense que j'aime la variante de design. A, le B est plus minimal et professionnel et le C est trop coloré. Je vais donc choisir A, je suis sûr que beaucoup d'entre vous aimeront peut-être le B, qui est plus minimal, mais l'un d'eux me semble super coloré et beau, et je me suis souvent trompé en matière de design. Je vais donc rafraîchir la page. Il dit qu'il a supprimé ce vendredi 22 h et c' est parfait. Maintenant c'est fini. C'est tellement génial. J'adore les variantes, non ? Supprimez donc B et C et créez plus de wireframe. Et une fois cela fait, je vais utiliser cette variante et améliorer notre application. Je vais donc vous montrer comment vous pouvez réellement partager cela et l'utiliser dans votre projet Cloud Code. C'est tellement parfait. La sortie de conception est maintenant prête. Vous pouvez voir que c'est le flux de base de notre application Todo, et ce sont les autres écrans qui sont importants dans cette application Todo Il me montre donc la date, le rappel. Dois-je répéter cette tâche ou non ? Et tellement parfait. Permettez-moi de rafraîchir la page, et je suppose que cette partie sera supprimée. La question suivante que vous vous posez peut-être maintenant est savoir comment implémenter exactement ce design dans mon application Todo ? Vous avez donc deux options. Vous pouvez soit exporter chacune de ces images en PNG, soit télécharger du HTML, puis glisser-déposer, ce qui est une méthode très inefficace à implémenter Vous pouvez donc télécharger le PNG et demander à Claude de l' implémenter, mais ce n'est pas la bonne façon de procéder. Je vais vous montrer comment exactement demander à Claude Code de mettre cela en œuvre. Vous pouvez donc le télécharger sous forme fichier zip et simplement le faire glisser dans votre code Claude pour qu'il puisse commencer à implémenter ces composants, puis configurer également le backend L'autre option est que vous pouvez l'envoyer ou le transmettre à Claude Code. Vous pouvez donc le télécharger sous forme JipFle, puis simplement demander à Claude Code de le faire pour vous, ou vous pouvez l'envoyer ou transférer la session à Claude Disons que je vais copier cette commande et la transmettre à Claude Code pour voir s'il est capable de l' implémenter ou non.