Claude Code vient de tuer toutes les agences Shopify
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Configurer des boutiques Shopify n'a jamais été aussi simple car il suffit désormais de combiner cela avec les
00:00:04agents IA que vous utilisez pour coder et de les laisser tout gérer. Mais connecter simplement Claude Code à
00:00:09votre boutique ne suffit pas en soi. Pour finir avec une boutique qui ne ressemble pas à une boutique Shopify générique
00:00:14comme toutes les autres, vous devez y combiner quelques éléments clés dans votre configuration.
00:00:19À la fin de cette vidéo, vous connaîtrez tout le flux de travail que vous pouvez utiliser pour mettre en place votre
00:00:23propre pipeline Shopify de bout en bout afin de commencer à vendre vos produits immédiatement.
00:00:28Vous devez suivre quelques étapes pour préparer la construction de votre boutique. La première
00:00:32chose dont vous avez besoin est un compte partenaire Shopify ; allez sur le navigateur pour vous inscrire. Le compte
00:00:37partenaire est important car il vous donne accès à des outils de développement qui vous permettent d'expérimenter avec
00:00:41la plateforme. C'est essentiellement un bac à sable pour vos boutiques, où vous pouvez créer votre application comme
00:00:46vous le feriez normalement, tout en utilisant des outils de développement comme les faux paiements et les utilisateurs tests pour que vous
00:00:51puissiez tester l'application avant sa mise en ligne. Et plus tard, si vous pensez que votre application est prête à commencer
00:00:56à vendre, il suffit d'ajouter les intégrations de paiement et vous pouvez facilement faire passer le compte de développement au
00:01:01compte marchand où vous pouvez commencer à vendre de vrais produits à de vraies personnes.
00:01:05Une fois l'application créée dans le projet, il est temps d'installer l'interface de ligne de commande (CLI) de Shopify. Vous pouvez le faire en
00:01:10copiant la commande d'installation depuis la documentation de la CLI et en l'exécutant dans le terminal. Une fois lancée, vous
00:01:15serez invité à choisir entre une application React ou une application d'extension. Nous avons choisi l'application React car c'est
00:01:20ce que nous développons le plus souvent et qu'il est plus facile de personnaliser l'application de cette façon. Ensuite, vous pouvez choisir la
00:01:26langue que vous voulez utiliser et nous avons choisi TypeScript pour sa sécurité de typage et ses fonctionnalités de sécurité par
00:01:31rapport à JavaScript. Une fois cette configuration effectuée, toutes les dépendances nécessaires pour
00:01:37exécuter l'application seront installées. Après l'installation des dépendances, le projet sera prêt et lorsque vous l'exécuterez, vous
00:01:41verrez un modèle de base de l'application à partir duquel vous pourrez commencer à apporter des modifications. Une fois la CLI
00:01:46installée, il y a d'autres choses à installer, en commençant par la boîte à outils IA de Shopify qui
00:01:51s'ajoute au processus de construction. La partie la plus importante est le protocole MCP (Model Context Protocol) et la commande d'installation pour ce
00:01:56MCP pour tous les agents de codage IA se trouve dans la documentation. Comme nous utilisions Claude Code, nous avons copié la commande
00:02:03pour Claude et installé le MCP, et vous pouvez faire de même avec n'importe quel outil de codage de votre choix. Une fois que le MCP
00:02:08est installé, il expose ses outils à Claude, mais le MCP seul ne suffit pas car tous les outils qu'il contient
00:02:14sont essentiellement là pour aider Claude à mieux construire. Le MCP n'a aucun moyen de transmettre les modifications à votre boutique exécutée
00:02:19dans le cloud. Il contient juste des documents et des connaissances sur l'API Shopify ainsi que d'autres validations. Donc
00:02:25cette configuration ne suffisait pas pour construire seul. Et c'est pourquoi la CLI est importante car c'est
00:02:30en fait le pont entre l'application Shopify et la configuration locale. En plus du MCP, vous devez également
00:02:35installer le plugin. Le plugin est important car il contient plusieurs agents et compétences regroupés.
00:02:40Vous pouvez l'installer en suivant les commandes d'installation. Après avoir exécuté les commandes d'installation,
00:02:44exécutez la commande de rechargement des plugins et tous les agents et compétences seront prêts à l'emploi.
00:02:49Maintenant que la configuration principale est terminée, mais avant de commencer réellement à construire, vous devez préparer le projet
00:02:53lui-même. La première chose à configurer est le fichier Claude.md, qui est essentiellement le fichier pour guider
00:02:59l'agent sur les pratiques que vous voulez qu'il suive. Le Claude.md que nous avons ajouté contient toutes les meilleures pratiques dont
00:03:05nous parlons toujours. Nous avons une vidéo complète dédiée à ce sujet où nous passons en revue les meilleures pratiques pour
00:03:10le fichier Claude.md, que vous pouvez consulter sur la chaîne. En dehors de Claude.md, vous avez besoin d'autres
00:03:15choses également. Par défaut, Claude génère des SVG et les utilise comme espaces réservés pour les images. Mais
00:03:21ces SVG ne suffiront pas pour les visuels de notre boutique, nous avons donc créé une compétence pour combler le manque. Nous avons créé une
00:03:26compétence de génération d'images Gemini, qui permet à l'agent dans lequel vous l'installez d'appeler la CLI Gemini et
00:03:32de l'inviter à générer des images pour le site web. La compétence contient des instructions sur la façon d'appeler la CLI Gemini
00:03:38et où enregistrer les images générées. Et parce que la CLI Gemini a l'intégration de la génération d'images, il n'y a
00:03:44pas besoin d'une clé API distincte, vous pouvez donc utiliser cette compétence directement en vous appuyant sur l'authentification
00:03:50de la CLI Gemini. En dehors de la génération d'images, nous avons également construit une autre compétence pour notre propre facilité. La compétence de prototype
00:03:55fonctionne de telle sorte que chaque fois que vous demandez un changement de design à l'agent, il crée d'abord un fichier HTML
00:04:01que vous pouvez prévisualiser, et une fois prévisualisé, il applique ce changement au design de l'application. Le
00:04:05fichier skill.md contient des détails sur l'ensemble du flux de travail divisé en deux phases. Une fois que ces compétences sont en
00:04:11place, il y a des hooks que vous configurez et connectez dans le fichier settings.json à l'intérieur du dossier .claud
00:04:17Ces hooks agissent essentiellement comme des garde-fous pour Claude. Par exemple, le script pré-outil peut
00:04:22arrêter Claude avant qu'il ne pousse les changements directement sur l'application sans votre approbation. Vous pouvez configurer autant
00:04:28de hooks que vous voulez. Donc, avec cette configuration en place, nous étions prêts à construire l'application. Mais avant de passer
00:04:33à la suite, un mot de notre sponsor, Willow Voice. Si vous passez la majeure partie de votre journée à taper des e-mails,
00:04:37des messages Slack, des documents et des invites (prompts), vous travaillez beaucoup plus lentement que vous ne le devriez. Willow Voice vous permet de
00:04:42parler au lieu de taper n'importe où sur votre ordinateur, et le texte apparaît instantanément. Ce n'est pas comme votre
00:04:47dictée intégrée qui se trompe un mot sur deux. Willow est trois fois plus précis, et il
00:04:52formate tout correctement avec des paragraphes et une structure. La meilleure partie est qu'il s'adapte à ce que vous
00:04:57faites : formel lorsque vous rédigez un e-mail, décontracté sur Slack, et technique lorsque vous codez.
00:05:02Il apprend comment vous écrivez au fil du temps pour que la sortie sonne comme vous, pas comme un robot. Plus de 100 000 professionnels
00:05:07l'utilisent quotidiennement, et il est certifié SOC2 avec conformité HIPAA et sans rétention de données, donc vos mots
00:05:13restent privés. Je l'utilise depuis la semaine dernière, et revenir à la saisie manuelle semble douloureusement lent maintenant.
00:05:18Téléchargez Willow Voice gratuitement en utilisant le lien dans la description. Une fois cela en place, vous pouvez
00:05:23simplement demander à Claude ce que vous voulez construire. Vous devez décrire la page d'atterrissage que vous voulez,
00:05:27tout comme nous avons mentionné le style que nous voulions pour la page d'atterrissage. Et parce que nous avions
00:05:31configuré la compétence, il a chargé la compétence de prototype en premier. Donc, au lieu d'apporter les changements directement sur
00:05:36l'application réelle, il a écrit du code HTML avec lequel il a finalisé le design, puis a attendu notre approbation.
00:05:41Il a également ouvert le design dans un nouvel onglet afin que nous puissions le prévisualiser. La première version qu'il a construite
00:05:46avait l'air propre et fonctionnait bien visuellement, mais il utilisait des sections fictives sur la page d'atterrissage là où les
00:05:51images auraient dû se trouver. Étant donné que nous avions installé la compétence de génération d'images, il aurait dû charger
00:05:55cela directement et utiliser la génération d'images dès le départ. Nous lui avons donc demandé à nouveau d'utiliser la compétence de
00:06:00génération d'images et de générer réellement des images pour ces sections fictives. Après avoir donné cette directive,
00:06:05il a lancé plusieurs CLI Gemini via l'outil bash et les a ouvertes en mode YOLO afin que la CLI
00:06:12Gemini ne soit pas bloquée par une demande de permission. Claude a lancé plusieurs terminaux et tous ont
00:06:17commencé à générer des images en parallèle. La génération d'images prend plus de temps, vous devez donc attendre qu'elle
00:06:22se termine. Une fois les images prêtes, vous pouvez consulter le site web et il paraîtra beaucoup plus poli. Et
00:06:27puisque les invites de génération d'images étaient également contrôlées par Claude, les images correspondaient très bien au style de l'interface.
00:06:33Maintenant que les visuels sont ajoutés, le site web était complet. Vous pouvez itérer sur le design à ce
00:06:38stade. Comme nous n'avions plus de changements à apporter, nous avons demandé à Claude de procéder et d'implémenter l'application dans la boutique.
00:06:43Il vous posera quelques questions sur la façon dont vous voulez que l'application soit implémentée, comme si vous
00:06:48voulez qu'elle soit synchronisée avec la boutique en ligne ou non, ce que nous avons fait, donc nous avons choisi cette option. Une fois que vous répondez à ses
00:06:53questions, il a procédé à la conversion du design HTML en l'application elle-même, pas directement vers l'application principale,
00:06:58mais vers l'application de développement que nous avions créée. Il a reproduit le design à l'identique et vous pouvez prévisualiser l'application
00:07:03vous-même pour voir qu'il a complètement imité le design. Maintenant, c'était une bonne chose d'utiliser la prévisualisation HTML
00:07:08avant de l'implémenter réellement dans l'application, car ce processus prend beaucoup de temps. Et si vous
00:07:13itériez sur le design en utilisant ce processus, cela aurait gaspillé beaucoup de temps et de jetons. Le prototypage
00:07:18HTML était beaucoup plus rapide et plus facile pour itérer. Aussi, si vous appréciez notre contenu, envisagez
00:07:23d'appuyer sur le bouton “hype” car cela nous aide à créer plus de contenu comme celui-ci et à atteindre plus de personnes.
00:07:28Jusqu'à ce stade, l'application est synchronisée avec l'URL réelle de la boutique. Le design que vous venez de construire est sur le serveur
00:07:34local pour prévisualisation sur la machine locale et il se trouve également à l'intérieur de la prévisualisation du thème, qui est l'endroit où il
00:07:39a essentiellement expédié le thème vers l'application de développement pour que nous puissions le prévisualiser en direct. Ce n'est pas la version finale,
00:07:44c'est juste un brouillon. Nous lui avons donc simplement dit de synchroniser le direct et il a utilisé la CLI Shopify et les outils
00:07:50MCP pour synchroniser le design avec l'URL principale configurée pour la boutique Shopify. Et après cela,
00:07:55Claude aura mis à jour le design en direct sur votre application. Maintenant, de même, vous pouvez lui demander de mettre à jour toutes les
00:08:00autres pages de votre site web et il suivra le même processus. Il commencera par prototyper les sections,
00:08:05puis les mettra à jour dans l'application réelle et enfin les synchronisera avec la boutique hébergée. Mais il y a quelques choses
00:08:10que vous devrez encore faire pour que votre boutique soit prête. À ce stade, vous ne pourrez pas ajouter
00:08:14de produits car la mise à jour des produits et leur préparation pour l'implémentation nécessitent l'API d'administration Shopify.
00:08:20Cela ne peut pas être fait sans l'API d'administration car c'est ce qui vous donne accès aux parties principales de
00:08:25la boutique comme la page “À propos”, les produits et d'autres fonctionnalités de gestion. Jusqu'à présent, nous ne faisions que
00:08:30apporter des modifications au thème et appliquer ce thème à la boutique elle-même pour les visuels. Afin de connecter
00:08:35l'API d'administration, vous devez l'authentifier avec la boutique en utilisant la CLI Shopify. Une fois que vous entrez la
00:08:41commande d'authentification avec votre lien d'authentification, cela ouvrira le navigateur à partir duquel vous pourrez vous authentifier. Après
00:08:46cela, vous pourrez créer des pages liées à la boutique et il utilisera le MCP Shopify et l'outil CLI
00:08:52ensemble pour mettre à jour les autres sections de la page. Maintenant, vous pouvez lui demander d'ajouter d'autres produits à
00:08:56votre boutique afin de commencer à vendre. Mais pour ajouter des produits, vous devez configurer les permissions
00:09:01pour la boutique Shopify afin qu'elle puisse accéder aux outils via l'API d'administration. L'ajout de produits nécessite plus
00:09:06de permissions que celles que nous avons données précédemment. Nous n'avions ajouté que la permission d'écriture de contenu, mais pour ajouter
00:09:11des produits, nous avons besoin de permissions supplémentaires comme l'écriture de produits et la lecture et l'écriture de publications.
00:09:16Donc, vous devez exécuter à nouveau la commande d'authentification mais avec des permissions ajoutées. Une fois cela fait,
00:09:20vous pouvez demander à Claude d'ajouter des produits à votre site. Et une fois qu'il l'a fait, vous pouvez vérifier l'application et voir
00:09:25les produits listés ici avec la boutique prête avec les détails des produits et les fonctionnalités de panier et
00:09:30vous pouvez également vérifier les produits dans le panneau d'administration. Mais quiconque visite votre boutique ne pourra toujours pas effectuer
00:09:35d'achats à ce stade. Pour que la boutique soit réellement prête à vendre des produits, vous devez ajouter des détails
00:09:40de paiement afin que les paiements puissent être traités. Vous devrez également choisir un forfait car à moins de le faire,
00:09:45quiconque visite votre boutique devra entrer un mot de passe pour la voir, ce qui n'est évidemment pas faisable. Donc,
00:09:51une fois que vous avez choisi votre forfait, vous pourrez commencer à vendre vos produits. Maintenant, l'ensemble du guide de configuration
00:09:55et toutes les compétences créées ici peuvent être trouvés dans AI Labs Pro pour cette vidéo et pour toutes nos précédentes
00:10:02vidéos d'où vous pouvez télécharger et utiliser cela pour vos propres projets. Si vous avez trouvé de la valeur dans ce que nous faisons
00:10:07et voulez soutenir la chaîne, c'est la meilleure façon de le faire. Le lien est dans la description.
00:10:11Cela nous amène à la fin de cette vidéo. Si vous souhaitez soutenir la chaîne et nous aider à continuer à faire
00:10:16des vidéos comme celle-ci, vous pouvez le faire en utilisant le bouton “super thanks” ci-dessous. Comme toujours,
00:10:20merci d'avoir regardé et je vous verrai dans la prochaine.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video