00:00:00>> Bonjour, je suis Pauline de Vercel et dans la vidéo d'aujourd'hui,
00:00:03je vais vous montrer comment utiliser
00:00:05l'intégration Git de v0 pour faire passer
00:00:08vos idées du prototype à la production.
00:00:11Alors, dans cette vidéo,
00:00:12nous allons construire un blog,
00:00:14le connecter à GitHub,
00:00:15tester de nouvelles fonctionnalités en toute sécurité avec
00:00:18des branches, puis le déployer en direct sur le web.
00:00:21À la fin, vous devriez comprendre le flux de travail complet.
00:00:25Alors, plongeons dedans.
00:00:27D'accord, nous sommes dans v0.
00:00:30Je vais commencer par créer un blog simple.
00:00:33Je vais simplement décrire ce que je veux dans le chat.
00:00:35Ce que nous allons faire ici, c'est créer
00:00:37une page de blog moderne avec
00:00:42un en-tête, un article à la une et une grille d'articles récents.
00:00:53Conseil de pro, vous pouvez aussi changer le modèle d'ici.
00:00:57Nous avons donc plusieurs modèles.
00:00:59Nous avons Mini, Pro, Max,
00:01:01et Opus également.
00:01:03Vous pouvez donc changer cela pendant que vous discutez.
00:01:07Super, j'aime beaucoup.
00:01:09v0 a donc généré cette mise en page de blog épurée pour moi.
00:01:13Apportons quelques ajustements pour le personnaliser un peu.
00:01:17Alors, faisons en sorte que le,
00:01:21oh, si je sais orthographier,
00:01:23faisons un dégradé du bleu au violet pour l'arrière-plan de l'en-tête.
00:01:32Parfait. J'ai maintenant un blog qui me convient.
00:01:36Mais pour l'instant, cela n'existe que dans v0.
00:01:40Je dois sauvegarder mon travail dans un endroit plus permanent.
00:01:43À terme, je veux le déployer en direct,
00:01:45et c'est là que l'intégration Git intervient.
00:01:48Nous allons donc nous diriger ici vers la barre latérale
00:01:52où vous pouvez voir le logo GitHub et la connexion Git.
00:01:56Comme c'est la première fois que je connecte ce projet,
00:01:59v0 me demande de connecter mon compte GitHub et de nommer mon dépôt.
00:02:04Ce que nous allons faire, c'est procéder à la connexion.
00:02:06Le compte cible est le mien.
00:02:08Je suis dans tous ces comptes,
00:02:10mais pour l'instant, j'utiliserai mon compte personnel Pauline.
00:02:13Ce nom de dépôt me convient,
00:02:15nous allons donc le laisser tel quel et
00:02:16cliquer sur créer le dépôt.
00:02:18Et voilà, v0 est en train de créer
00:02:21le dépôt et de pousser tout mon code vers GitHub.
00:02:24Génial. Maintenant, voyons ce qui se passe réellement sur GitHub.
00:02:29Regardons cela de plus près.
00:02:31Regardez tout ce code que v0 a généré.
00:02:34C'est correctement structuré avec tous les fichiers de configuration nécessaires.
00:02:38Mes composants sont là,
00:02:40le répertoire app, et
00:02:41tout est organisé et prêt à l'emploi.
00:02:43Vous vous demandez peut-être : « Qu'ai-je vraiment gagné à me connecter à GitHub ? »
00:02:48D'abord, mon code est sauvegardé en toute sécurité.
00:02:51Si quelque chose tournait mal,
00:02:53j'ai tout mon historique.
00:02:55Ensuite, je peux expérimenter plus
00:02:57librement sans craindre de changements destructeurs.
00:03:00Nous verrons cela en action dans un instant avec les branches,
00:03:02et troisièmement, j'ai une voie vers la production.
00:03:04Je peux déployer ce blog en direct.
00:03:06Voyons cela en action en ajoutant une nouvelle fonctionnalité.
00:03:09Disons que je veuille ajouter une section « À propos de l'auteur »,
00:03:14mais je ne suis pas encore sûre à 100 % du rendu final.
00:03:17Je ne veux pas perdre cette version.
00:03:19C'est là que les branches interviennent.
00:03:21Une branche est comme une version parallèle de
00:03:24votre projet où vous pouvez expérimenter en toute sécurité.
00:03:27D'accord. Ce que nous allons faire ici, c'est dupliquer cette branche.
00:03:31Appelons cette branche « author-bio ».
00:03:36Remarquez ici en haut,
00:03:38je suis maintenant sur la branche author-bio.
00:03:41Ma branche principale est toujours telle que je l'ai laissée, intacte.
00:03:45Nous pouvons maintenant expérimenter librement ici.
00:03:48Nous voulons donc ajouter cette bio de l'auteur.
00:03:50Nous allons simplement demander à v0 d'ajouter une section bio d'auteur.
00:03:56D'accord, incroyable.
00:03:59Il a ajouté ce nouveau composant de bio d'auteur.
00:04:02Maintenant, faisons un rafraîchissement rapide de l'aperçu ici.
00:04:06Nous devrions pouvoir voir où il l'a ajouté.
00:04:10Et voilà. Il y a une nouvelle section « À propos de l'auteur ».
00:04:13Juste pour rappel,
00:04:15nous avons effectué les changements dans cette branche,
00:04:18la branche author-bio,
00:04:19ce qui signifie qu'aucune modification
00:04:22n'a été apportée à la branche principale pour l'instant.
00:04:24Cette branche est donc libre pour nos tests.
00:04:27Si nous voulions changer le texte,
00:04:29ou le style, nous pouvons le faire librement ici.
00:04:33En regardant cela,
00:04:35je pense que la bio de l'auteur devrait être un peu plus compacte.
00:04:38Laissez-moi l'ajuster pendant que je suis encore dans cette branche,
00:04:40juste pour vous montrer.
00:04:41Rends la bio de l'auteur plus compacte.
00:04:46D'accord, super.
00:04:48Vous voyez que v0 a rendu la section auteur plus compacte
00:04:52et précise qu'il a globalement réduit les marges.
00:04:56C'est bien mieux.
00:04:57J'en suis très satisfaite.
00:04:58Nous pouvons donc ouvrir une PR et pousser ces changements.
00:05:03Voyez comment ce flux de travail protège ma branche principale.
00:05:06Je peux itérer autant de fois que je veux dans cette branche d'essai,
00:05:10mais la branche principale reste stable jusqu'à ce que je sois satisfaite.
00:05:13Très bien, la bio de l'auteur me convient maintenant.
00:05:16Il est temps de fusionner cela dans ma branche principale.
00:05:18Je vais créer une Pull Request.
00:05:20Une Pull Request ou PR consiste essentiellement à demander
00:05:25d'intégrer mes changements de la branche author-bio
00:05:28vers la branche principale.
00:05:30C'est la manière formelle de proposer des modifications.
00:05:32Nous allons donc ouvrir une PR directement ici.
00:05:35Et nous allons cliquer ici pour voir la PR elle-même.
00:05:44Cela nous emmène directement sur GitHub.
00:05:46Et comme vous pouvez le voir,
00:05:47nous avons les deux commits que nous avons faits sur v0.
00:05:51La création de la bio de l'auteur et sa version plus compacte.
00:05:56Et si nous allons ici dans « files changed »,
00:05:58vous pouvez examiner le code exact que v0 a modifié.
00:06:03Dans un cadre d'équipe,
00:06:04c'est ici que vos collègues réviseraient votre code
00:06:07et laisseraient des commentaires.
00:06:08Pour les projets en solo,
00:06:09c'est votre vérification finale pour vous assurer
00:06:11que tout semble correct.
00:06:13Ces changements me conviennent.
00:06:14Je vais donc fusionner cette Pull Request.
00:06:17Retournons sur v0 ici.
00:06:20Et comme vous pouvez le voir, nous pouvons fusionner la PR.
00:06:23Nous allons simplement faire cela.
00:06:29Et si nous retournons sur GitHub,
00:06:31vous pouvez voir qu'elle a été fusionnée.
00:06:34Cette fonctionnalité fait officiellement partie de notre code principal.
00:06:38Tout est maintenant en ligne.
00:06:39Nous pouvons aussi aller dans les paramètres ici,
00:06:42regarder le projet Vercel et le voir sur Vercel.
00:06:46Comme vous pouvez le voir, notre déploiement a réussi.
00:06:51Et si nous cliquons ici sur nos domaines, le voilà.
00:06:55Mon blog est en ligne sur Internet.
00:06:57Vous voyez notre en-tête avec le dégradé,
00:07:00les articles du blog.
00:07:01Et si je descends ici, notre bio d'auteur.
00:07:06En gros, tout ce que j'ai construit dans v0
00:07:08a été fusionné via Git en toute sécurité
00:07:10et est maintenant déployé et accessible au monde entier.
00:07:13C'est le même flux de travail que les
00:07:14équipes de développement professionnel utilisent chaque jour.
00:07:17Vous construisez dans v0, gérez votre code avec Git
00:07:20et déployez ensuite avec Vercel,
00:07:22un flux de production complet.
00:07:25J'espère que cela vous aidera à comprendre
00:07:27comment utiliser l'intégration Git de v0 avec plus d'assurance.
00:07:30Essayez ce flux de travail vous-même.
00:07:32Commencez par quelque chose de petit, créez une branche,
00:07:34expérimentez et déployez.
00:07:36Si vous avez des questions,
00:07:38venez nous retrouver sur notre espace communautaire à community.vercel.com.
00:07:41Merci beaucoup d'avoir regardé.