Premiers pas avec v0 : Du prompt à la mise en production
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Voici une page de destination d'événement que j'ai créée moi-même en quelques minutes.
00:00:05Elle intègre même une expérience d'essayage virtuel propulsée par l'IA.
00:00:09Mon patron m'a confié ce projet et V0 m'a aidé à transformer mes idées en un vrai logiciel.
00:00:14Dans cette vidéo, je vais vous présenter V0 et vous montrer comment créer des projets étape par étape.
00:00:19Alors, qu'est-ce que V0 ?
00:00:21L'IA permet de générer du code très facilement.
00:00:23V0 exploite cette puissance dans un format qui permet à quiconque de créer de vraies applications
00:00:28et des sites web, ou de collaborer avec des développeurs.
00:00:30V0 est conçu pour vous aider à passer de l'idée au déploiement le plus rapidement possible.
00:00:36Voici comment fonctionne V0.
00:00:37Vous décrivez l'application, l'agent ou le site web que vous souhaitez, puis V0 génère le code
00:00:42dans un aperçu en direct.
00:00:43Vous pouvez faire des modifications et ajuster votre projet simplement en discutant avec V0,
00:00:48dites-lui quels changements apporter, et il les fera pour vous.
00:00:49V0 génère de vrais logiciels en utilisant Vercel et Next.js, mais ce n'est pas juste un créateur de sites.
00:00:56Il peut concevoir de vraies applications, les connecter à des IA et des bases de données,
00:01:00et générer du code que les développeurs peuvent utiliser et déployer.
00:01:02C'est possible parce que V0 est conçu par Vercel, les créateurs du framework Next.js,
00:01:08qui est utilisé par des marques comme Under Armour, Stripe et Notion.
00:01:11Ainsi, quand V0 conçoit et déploie votre application Next.js, vous utilisez le même code
00:01:15et la même infrastructure sécurisée que les plus grandes entreprises du monde.
00:01:19Présentons quelques projets pour voir V0 en action et découvrir à quel point il est facile de démarrer.
00:01:24Disons que je fais partie d'une équipe marketing et que j'ai deux grands projets à réaliser cette semaine.
00:01:27Premièrement, je dois créer une page d'événement pour le lancement d'un nouveau produit.
00:01:31Deuxièmement, je dois mettre à jour une page de destination sur notre site web.
00:01:34Commençons d'abord par la page de l'événement.
00:01:36L'événement est une soirée de lancement pour une nouvelle montre appelée "Son of Ali".
00:01:41Je veux que cette page soit élégante et captivante pour susciter l'engouement et offrir
00:01:45une expérience d'essayage virtuel interactive pour inciter les visiteurs à s'inscrire.
00:01:48Je vais donc demander exactement cela à V0.
00:01:53J'ai fini de rédiger mes instructions.
00:01:54Je vais maintenant soumettre ma demande, et V0 va commencer à créer.
00:01:59Pendant que V0 travaille, je veux vous montrer ce qui le rend si puissant.
00:02:02Si vous cliquez sur "Settings" (Paramètres), puis sur "Integrations", vous verrez toutes les intégrations
00:02:07disponibles dans V0.
00:02:09Tout d'abord, vous pouvez voir que V0 intègre déjà l'IA.
00:02:12Il utilise le SDK IA pour concevoir des fonctionnalités intelligentes et l'AI Gateway pour donner
00:02:17à votre application un accès automatique à des centaines de modèles d'IA.
00:02:20Vous pouvez également créer ou vous connecter à des bases de données pour alimenter le backend de votre application,
00:02:25et même accepter des paiements via Stripe.
00:02:27Grâce à ces intégrations, vous pouvez créer de véritables applications full-stack dopées à l'IA.
00:02:32Très bien, allons voir où en est notre page d'événement.
00:02:34V0 a terminé la première version, alors testons-la.
00:02:38Je vais téléverser une photo de moi, et l'application devrait nous proposer les quatre
00:02:44générations d'essayage virtuel de montre que nous avons demandées.
00:02:49Super, V0 a bien pris en compte mes instructions et a mis à jour le code.
00:02:55Si l'on regarde l'éditeur, on peut voir que V0 modifie activement le code Next.js.
00:03:00L'éditeur permet également aux développeurs de relire et de modifier facilement le code.
00:03:04Voilà, V0 a fini d'appliquer les changements et le résultat est excellent.
00:03:09Avant de publier cette page, je veux la partager avec mon équipe pour avoir leurs retours.
00:03:12Je peux cliquer sur "Share" (Partager), copier le lien et envoyer la discussion ainsi que l'aperçu à mon équipe.
00:03:18Ce qu'ils verront dans cet aperçu sera exactement ce que les utilisateurs verront
00:03:22lors de la publication, je n'ai donc pas à craindre de mauvaise surprise au moment du déploiement.
00:03:26Une fois que mon équipe a validé la page, je peux lui attribuer une URL personnalisée et la publier.
00:03:31De plus, cela a automatiquement créé un projet sur Vercel pour cette création V0
00:03:36que je viens de réaliser.
00:03:37En cliquant sur "Inspect on Vercel", je peux aller examiner ce projet de plus près.
00:03:42Dans ce projet, j'ai accès aux analyses, aux erreurs et à l'historique complet des déploiements.
00:03:48Parfait, j'ai publié cette application en production.
00:03:51Je peux maintenant visiter le site en direct. C'est ce que les utilisateurs verront,
00:03:56et je peux partager ce lien pour qu'il soit accessible publiquement.
00:03:59Ce qui est vraiment génial avec V0, c'est que je peux choisir d'ajouter un domaine personnalisé.
00:04:03Je peux personnaliser le sous-domaine en ".vercel.app", acheter un domaine ou lier
00:04:09un domaine que je possède déjà.
00:04:10Comme il s'agit d'une page pour un événement unique, je vais juste personnaliser le domaine de base
00:04:14et la publier à nouveau.
00:04:15Super.
00:04:16À présent, le domaine est mis à jour et je peux accéder à la même page à cette nouvelle adresse
00:04:21que je viens de configurer.
00:04:23Et voilà, c'est tout.
00:04:24V0 a déployé mon application sur l'infrastructure de Vercel, et elle est désormais publique et accessible à tous.
00:04:30Passons maintenant à mon second projet : mettre à jour une page de destination
00:04:34déjà publiée sur notre site marketing.
00:04:36Notre équipe de développement gère le site et contrôle les versions du code via GitHub.
00:04:41Je dois donc effectuer cette mise à jour en m'intégrant à leur flux de travail.
00:04:44Heureusement, V0 permet de faire exactement cela de manière très simple.
00:04:48Je vais ouvrir une nouvelle fenêtre V0 et cliquer sur "Import from GitHub" (Importer depuis GitHub).
00:04:52J'ai déjà l'URL du dépôt GitHub auquel je souhaite accéder, je vais donc
00:04:56la coller dans la barre du haut et cliquer sur "Import".
00:05:01Et en un instant, V0 importe le dépôt.
00:05:05Maintenant que le dépôt est importé dans V0, je suis prêt à faire ma modification.
00:05:08Je souhaite ajouter une bannière tout en haut de cette page marketing pour rediriger les internautes
00:05:12vers la page d'événement que nous venons de créer, afin qu'ils s'inscrivent
00:05:17au lancement de la montre "Son of Ali".
00:05:18Je vais donc demander cela à V0.
00:05:21Pendant que V0 applique les modifications, je vais cliquer sur l'onglet "Git".
00:05:27Vous pouvez voir que V0 a automatiquement créé une branche pour moi, ce qui permettra
00:05:31aux développeurs de relire et de tester mes modifications avant de les fusionner
00:05:35sur le site principal.
00:05:36Parfait, V0 a fait le changement, il est maintenant temps de créer une "Pull Request" (PR)
00:05:42pour que mon équipe puisse l'examiner.
00:05:44Je vais cliquer sur "Open PR" (Ouvrir la PR), puis sur "Open pull request".
00:05:49Maintenant, si je clique sur "View PR", je peux voir que ma pull request a bien été ouverte sur GitHub.
00:05:54Et comme notre site est hébergé sur Vercel, un build d'aperçu a été automatiquement généré.
00:05:59Ainsi, non seulement nos développeurs peuvent relire le code, mais le reste de l'équipe
00:06:03peut voir à quoi ressemble la mise à jour et laisser des commentaires.
00:06:06Et voilà, c'est tout.
00:06:07Je viens de modifier notre site marketing tout seul, sans avoir à créer un ticket pour l'ingénierie,
00:06:11et ils peuvent valider ce changement au sein de leur processus habituel.
00:06:15Nous avons conçu V0 pour toutes les équipes qui collaborent avec des développeurs, que ce soit le marketing,
00:06:19le produit, les fondateurs, ou même les ingénieurs eux-mêmes.
00:06:22Avec V0, n'importe qui peut transformer ses idées en vrais logiciels et collaborer sur des applications
00:06:27et des sites existants.
00:06:28Rendez-vous sur v0.app et déployez votre premier projet dès aujourd'hui.