Ship 26 NYC - Atelier - D'init à déploiement en 30 minutes
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Bonjour à tous. Bienvenue. Je m'appelle Gordon Diggs. Je suis responsable ingénierie chez Stripe.
00:00:08Et moi, c'est Colin Wren. Je suis également ingénieur chez Stripe.
00:00:11Super. Donc pour ce hackathon, nous allons partir de zéro et déployer une application
00:00:17en utilisant divers fournisseurs de services, idéalement en 30 à 40 minutes. Mais d'abord, nous voulons
00:00:24nous assurer que tout le monde ici a le prérequis minimum pour travailler là-dessus. Il vous faut donc un
00:00:29ordinateur portable. Il vous faut un environnement de codage agentique, que ce soit Claude Code, Codex ou
00:00:35Cursor. Et ça ne marche pas vraiment avec un téléphone ou une tablette. Donc si vous n'avez pas d'
00:00:43ordinateur, posez-vous et observez. C'est très bien aussi. Mais super. Pour les 10 premières minutes environ de
00:00:51cet atelier, nous allons parler de Stripe Projects, vous donner des idées d'applications et vous
00:00:56configurer dans la CLI. Et pendant les 30 minutes suivantes, vous utiliserez votre agent pour créer une application
00:01:02du début au déploiement, et provisionner des services avec Stripe Projects. À la fin, vous pourrez soumettre votre
00:01:09app déployée sur notre classement. Et ensuite tout le monde pourra voter pour les apps qu'ils aiment. Et
00:01:16il y aura peut-être un gagnant. On verra. Commençons par un aperçu de ce qu'est Stripe Projects,
00:01:22qui est un nouveau produit de Stripe permettant à vous ou à votre agent de provisionner de l'infrastructure
00:01:28rapidement et en toute sécurité. Stripe Projects est un plugin pour la CLI Stripe qui vous permet, à vous ou à votre agent,
00:01:36de provisionner des services comme de l'hébergement, des bases de données, des noms de domaine, etc. La plupart des services proposent des offres
00:01:44gratuites et payantes. Vous n'aurez donc pas nécessairement à dépenser d'argent pendant ce hackathon. Mais pour tout ce qui
00:01:51est payant, Projects centralise vos paiements via Stripe de manière unifiée pour que vous payiez l'ensemble de
00:01:59vos services cloud avec un seul moyen de paiement. Une fois le fournisseur connecté, Projects sauvegarde les
00:02:09variables d'environnement pertinentes sur votre machine locale et dans le cloud, et elles restent disponibles pour que vous puissiez les
00:02:15récupérer sur d'autres machines, etc. Encore une fois, pour cet atelier, utiliser uniquement les offres gratuites
00:02:21convient parfaitement. Voici les catégories actuelles de fournisseurs. Colin, je crois que tu masques un peu
00:02:28le QR code. Voilà donc le genre de catégories que nous proposons. Pour la liste complète des fournisseurs, il vous suffit de lancer
00:02:35“Stripe projects catalog” dans la CLI ou de consulter la page des fournisseurs sur ce QR code.
00:02:40Super. Génial. Certains d'entre vous ont peut-être déjà une idée du type de projet qu'ils veulent
00:02:47créer. C'est parfait. Mais si ce n'est pas le cas, nous voulions vous donner quelques exemples d'apps
00:02:52conçues avec Projects. Ces applications devraient vous donner une idée réaliste de ce qui peut être créé et
00:02:58déployé en environ 30 minutes, pour vous éviter de vous lancer dans un plan trop ambitieux vu le temps imparti.
00:03:04Voici donc quelques exemples d'apps créées par des employés de Stripe lors des premiers tests de Projects.
00:03:10Toutes ces apps sont déployées en ligne et beaucoup utilisent des fournisseurs d'hébergement, de base de données et d'authentification.
00:03:17Ici, nous avons le tableau de bord d'analyses GitHub. C'est un tableau de bord personnalisé pour extraire les données de l'API
00:03:22GitHub. Il utilise de l'hébergement web, une base de données et un fournisseur d'auth. On a aussi “Happiness Jar” ici. C'est un moyen très sympa
00:03:27de vous laisser des notes au fil de la journée pour remplir votre bocal de joie. Il utilise de l'auth, une base de données
00:03:33et de l'hébergement. Et enfin “My Garden”. C'est une petite app de jardinage. Vous pouvez y répertorier vos plantes et programmer des rappels
00:03:40pour les arroser ; elle utilise l'hébergement et une base de données. Pour finir, nous avons “Tiny Tails”. C'est une petite app
00:03:45qui utilise un agent pour recommander des livres adaptés aux tout-petits sur différents sujets. Celle-ci utilise des API d'IA/LLM et
00:03:52de l'hébergement. Donc voilà, pensez simplement à des projets d'une envergure similaire, que vous pouvez
00:03:57concevoir dans le temps imparti. Et une fois votre idée de projet définie, nous passerons
00:04:02le reste de l'atelier à la développer à l'aide d'agents. Il est important de démarrer avec un bon prompt quand
00:04:08vous travaillez avec des agents. En particulier, vous devez préciser quels types de services vous voulez utiliser. Dites par exemple :
00:04:13“Je veux le déployer. Je veux utiliser une base de données”, ce genre de choses. Vous pouvez être spécifique sur
00:04:17le type de service souhaité. Vous pouvez dire “Je veux utiliser Vercel pour l'hébergement”, ou bien vous pouvez laisser
00:04:21votre agent choisir pour vous dans le catalogue Stripe Projects. Ainsi, vous pouvez
00:04:26dire : “Je veux une base de données”. Stripe Projects en choisira une et l'initialisera pour vous. Et à la toute fin
00:04:32de cet atelier, comme Gordon l'a mentionné, nous avons un classement sur projects.dev où vous soumettrez votre
00:04:38projet et voterez pour ceux que vous préférez. Et rien qu'en partageant votre projet ici,
00:04:45vous obtiendrez des crédits Stripe. Gordon va maintenant vous guider pour vous lancer avec Stripe
00:04:50Projects. Super. Très bien, allons-y. Comme je l'ai dit, pour effectuer cet atelier, vous avez besoin de
00:04:58trois choses. Enfin, quatre en comptant l'ordinateur portable, mais il vous faut un environnement agentique, un compte Stripe,
00:05:05et la CLI Stripe. Nous avons un guide du participant. Ce serait une excellente idée de le scanner.
00:05:11Il vous fournira toutes les informations présentes dans les prochaines diapositives, mais vous les aurez
00:05:15directement sous la main. Je vous conseille donc vraiment de scanner ce QR code. Je vous laisse une minute pour le faire.
00:05:21C'est toujours terrifiant quand vous donnez une conférence et que tout le monde sort son téléphone,
00:05:23mais comme c'est moi qui vous le demande, c'est bon. Et si vous n'avez pas encore de compte Stripe,
00:05:30c'est également gratuit, vous pouvez scanner ceci. Je crois que ça mène à [dashboard.stripe.com/register](https://www.google.com/search?q=https%3A%2F%2Fdashboard.stripe.com%2Fregister).
00:05:38Ça fera très bien l'affaire. Je vous laisse une minute pour le scanner si besoin.
00:05:47Super. Ensuite, il vous faudra la CLI Stripe avec le plugin Stripe Projects.
00:05:52Vous pouvez exécuter cette commande NPX très pratique juste ici. Veillez à cocher Stripe
00:05:58best practices et Stripe projects lorsqu'on vous demandera les compétences que vous souhaitez ajouter. Ensuite,
00:06:05voici un prompt que vous pouvez utiliser dans votre environnement agentique pour installer la CLI Stripe.
00:06:13Ou si vous souhaitez l'installer directement sur Mac, vous pouvez faire un simple “brew install”. Sur Windows, utilisez Scoop.
00:06:23Ça fonctionne aussi. Je n'ai jamais utilisé Scoop parce que je ne développe pas vraiment sur Windows,
00:06:27mais Homebrew est génial. Donc ça, je connais. Parfait.
00:06:33Donc oui, après avoir exécuté toutes ces commandes, le plugin Stripe Projects devrait être installé.
00:06:40Vous pouvez vérifier qu'il est correctement installé en exécutant « stripe projects --help »,
00:06:44comme montré ici. Est-ce que quelqu'un rencontre des difficultés de configuration ? Ou levez la main si vous avez besoin d'
00:06:51un peu plus de temps pour installer la CLI Stripe Projects. D'accord, on va attendre encore une minute ou deux,
00:06:57et nous enchaînerons. Mais oui, encore une fois, lancez simplement “stripe projects --help”. Si vous voyez
00:07:02un message d'aide s'afficher, c'est que tout est bien installé et prêt à fonctionner.
00:07:08Si vous avez toujours des soucis, nous passerons vous aider dans quelques minutes. Ne vous inquiétez pas
00:07:13trop pour ça.
00:07:14Très bien. J'espère que tout le monde a réussi l'installation. Sinon pas de soucis, faites-nous signe plus tard et nous viendrons vous aider.
00:07:26Une fois installé, rendez-vous dans le dossier où vous voulez créer votre projet et lancez “stripe projects
00:07:35init”. Vous pouvez optionnellement lui passer le nom de votre projet. Sinon, il utilisera simplement le nom
00:07:40du dossier. Lorsque vous lancez cette commande init, elle génère quelques fichiers clés. Elle va
00:07:45créer un dossier .projects contenant un fichier state.json et un state.local.json. Ces fichiers sont la source de vérité pour
00:07:53savoir quels comptes vous utilisez, ainsi que les informations de vos fournisseurs et ressources pour ce projet précis.
00:07:59Vous verrez également un fichier de compétence CLI Stripe Projects. C'est une compétence qui va indiquer à votre agent
00:08:08comment utiliser la CLI Stripe Projects. Et dès que vous commencerez à ajouter des services à votre projet,
00:08:14nous récupérerons les clés secrètes de ces services pour les ajouter à votre fichier .env. Nous téléchargerons aussi les compétences d'agent
00:08:24associées à ces services dans le dossier .agent/skills pour apprendre à votre agent comment utiliser au mieux
00:08:31ces services. Vous devriez maintenant avoir tout ce qu'il faut pour commencer à coder. À toi la main, Gordon. Super.
00:08:37Génial. Parfait. C'est votre tour. Vous pouvez commencer à développer. Vous avez environ 30 minutes pour créer votre
00:08:45projet. Si vous avez des questions sur Stripe Projects, nous y répondrons avec plaisir. Levez simplement
00:08:50la main. Si vous avez besoin d'aide pour configurer votre environnement, nous pouvons venir vous donner un coup de main.
00:08:57Je laisse quelques infos à l'écran. Voici certaines commandes utilisables dans Stripe Projects.
00:09:03On a parlé d'”init” et de “catalog”, qui permet de voir les fournisseurs. Utilisez “add” pour ajouter
00:09:10un fournisseur ou un service. “Open” ouvrira directement le tableau de bord du fournisseur. La synchronisation des variables
00:09:19d'environnement se fait aussi facilement. Et si vous voulez suivre vos dépenses, il y a une commande pour ça. Enfin,
00:09:24Et vers la fin, lorsque vous vous préparez à partager votre projet, il y a "Stripe project share",
00:09:29qui partagera simplement la stack que vous avez sélectionnée, c'est-à-dire la liste des fournisseurs choisis.
00:09:34Et si vous avez besoin de votre ID de compte, vous l'obtiendrez là aussi. Merci d'être ici.
00:09:40Merci pour votre participation. Nous avons environ 30 minutes. Développez, déployez, levez la main si vous avez
00:09:46des questions et soumettez vos projets ici. Je me remets sur cette diapositive. C'est le guide de
00:09:55participation qui contient toutes les informations de la présentation. Voilà. Est-ce que quelqu'un
00:10:01souhaite partager l'idée d'application qu'il est en train de construire ? Si vous pouvez vous interrompre 10 secondes
00:10:08pour nous la partager.
00:10:12Oui. Celle que j'envisage de créer est une application que j'ai déjà essayé de développer seul,
00:10:22mais je veux tenter de la faire avec cet outil. C'est en fait une app pour trouver des partenaires d'entraînement pour
00:10:31des arts martiaux comme le Jiu-Jitsu, par exemple. J'ai remarqué que c'est quelque chose qui n'existe pas. Imaginons
00:10:36par exemple que votre club soit fermé, que ce soit le week-end ou que vous soyez en voyage, et que vous vouliez vous entraîner,
00:10:40mais toutes les salles sont fermées. S'il y a quelqu'un près de chez vous qui pratique, il n'y aurait aucun moyen de le
00:10:43savoir, sauf peut-être grâce à cette app qui vous permettrait d'entrer en contact avec quelqu'un d'autre qui cherche
00:10:48aussi un partenaire, et vous pourriez vous entraîner ensemble. Génial. Ce serait mon idée.
00:10:52Je tente le coup. Génial. Bonne chance, c'est super. Parfait. C'est un excellent
00:10:56exemple parce que vous aurez besoin d'un hébergement web, d'une base de données,
00:11:00d'authentification et d'un nom de domaine. Vraiment au top.
00:11:04Super. Si vous avez d'autres questions sur Stripe Projects ou Stripe en général,
00:11:08nous avons un stand juste à côté. Je vais y faire un tour, et je suis sûr que Colin aussi.
00:11:12N'hésitez pas à passer pour discuter de Stripe, on a quelques goodies Stripe et autres. Merci
00:11:17à tous d'être venus et j'espère que vous aimerez utiliser Stripe Projects. Super. Merci à tous.