v0 par Vercel : Un guide avec un projet de démonstration

Qu'est-ce que la v0 de Vercel ?

v0 de Vercel est un outil de génération de code alimenté par l'IA qui aide les développeurs à construire des composants d'interface utilisateur (ou des pages entières !) en utilisant des invites en langage naturel. Au lieu de coder manuellement un bouton, un formulaire ou un tableau de bord, vous décrivez ce dont vous avez besoin via l'interface de chat, et la v0 génère du code React et CSS Tailwind prêt à la production en quelques secondes.

Pour rappel, Vercel est une plateforme conçue pour le déploiement et l'hébergement d'applications web, qui met l'accent sur l'optimisation des performances et la rationalisation du processus de développement. Elle est surtout connue pour Next.js (un framework React populaire) et propose l'hébergement d'applications frontales avec une mise à l'échelle automatique et une intégration facile.

Je pense que v0 est un excellent ajout à la suite d'outils de Vercel, et fait des merveilles pour la productivité de leurs clients (nous, les développeurs). Et comme beaucoup d'autres outils d'IA, c'est un bon moyen d'ouvrir la porte aux utilisateurs non techniques, comme les concepteurs et les chefs de produit, pour qu'ils contribuent au processus de développement.

Il est particulièrement utile pour le prototypage rapide, pour stimuler la productivité en réduisant le travail frontal répétitif, et pour l'automatisation de la conception au code, par exemple en convertissant les fichiers Figma directement en composants fonctionnels. Vous pouvez également publier rapidement votre projet à l'aide de Vercel, ce qui facilite l'hébergement et le déploiement.

Combien coûte la v0 ?

v0 propose actuellement 3 niveaux de prix pour les particuliers. Le premier niveau est gratuit, mais le nombre de messages disponibles par jour est limité. Vous pouvez effectuer une mise à niveau pour 20 $/mois, ou 200 $/mois pour une utilisation intensive. 

La tarification varie selon les entreprises et commence à 30 $ par utilisateur et par mois.

Projet de démonstration : Application de gestion des abonnements avec v0

Construisons un tableau de bord de gestion des abonnements qui permette aux utilisateurs de curer et de gérer tous leurs abonnements (par exemple, logiciels, magazines, adhésions) en un seul endroit. L'application peut avertir les utilisateurs des paiements à venir, de l'expiration des essais et des abonnements non utilisés.

La description ci-dessus est l'invite exacte que j'ai saisie dans l'interface de discussion de la version 0.

Après environ 30 secondes, v0 a généré 10 fichiers. L'onglet code me permet de voir ces fichiers tandis que l'interface de chat reste disponible et explique le code généré.

Vous pouvez cliquer sur le bouton l'onglet en haut de la page pour voir l'application :

Cependant, la meilleure façon de le visualiser est de cliquer sur la deuxième icône en partant de la droite dans le coin supérieur.

Cela ouvrira un nouvel onglet sur votre appareil avec l'aperçu complet de votre application. Jetons un coup d'œil sur les nôtres :

Comme vous pouvez le constater, la v0 a généré une application web entièrement fonctionnelle à partir d'une seule invite. C'est assez impressionnant. L'ajout d'un nouvel abonnement fonctionne réellement et se reflète dans le reste de l'application.

Toutefois, la barre de navigation située à gauche n'est pas fonctionnelle et constitue une perte d'espace. Revenons à notre aperçu et supprimons-le. Nous pouvons demander à l'enlever dans le chat, mais nous pouvons aussi faire un changement rapide en appuyant sur le bouton de la souris en haut (première icône en partant de la gauche). Nous sélectionnons le composant que nous voulons modifier (dans ce cas, la barre de navigation) et demandons simplement à v0 de le supprimer.

Et voici le résultat !

D'accord, et maintenant ?

Il y a quelques autres boutons en haut qui méritent d'être mentionnés. En cliquant sur le bouton Historique, vous pouvez voir les différentes versions de votre application, et en cliquant sur une version spécifique, vous y reviendrez.

Vous pouvez également déployer votre application avec Vercel en un seul clic :

La nouvelle application sera accessible à partir d'un lien que vous trouverez dans la même fenêtre modale une fois le déploiement terminé, et plus de détails sur le déploiement lui-même seront visibles à partir de votre compte Vercel.

La création et le déploiement de cette application m'ont pris... 15 minutes. Et cela inclut le temps qu'il m'a fallu pour faire les captures d'écran de ce tutoriel ! 

À titre de référence, coder quelque chose comme cela à partir de zéro m'aurait pris une journée entière, si ce n'est plus.

Bonus : Exécuter le code localement

Si vous souhaitez ajouter ce code à votre machine et y accéder via VS Code (ou tout autre éditeur de code que vous utilisez), vous pouvez créer un nouveau dossier de projet via le terminal.

Ensuite, créez un nouveau projet Next.js :

npx create-next-app@latest my-folder-name

Assurez-vous d'être dans le bon répertoire avec cd my-folder-path.

A partir de là, vous pouvez retourner au projet v0 et cliquer sur le bouton "Add to codebase" en haut à droite, copier la commande générée et la coller dans le terminal. Lorsque vous êtes invité à créer un fichier components.json, entrez Y et appuyez sur Entrée pour toutes les invites suivantes.

Vous pouvez maintenant ouvrir le bon dossier dans VS Code et voir tout le code généré. Lancez npm run dev et naviguez vers http://localhost:3000 dans votre navigateur pour exécuter votre application localement .

Au-delà de l'essentiel : Que peut faire d'autre la v0 ?

D'accord, la v0 est assez bonne pour générer du code à partir d'une simple invite. Mais que peut-il faire d'autre ?

1. Téléchargez des fichiers Figma pour un code instantané

Vous pouvez télécharger une conception Figma dans la v0, et elle générera automatiquement les composants React + Tailwind correspondants. Cette fonction est idéale pour les concepteurs qui souhaitent convertir rapidement des maquettes en code opérationnel.

2. Utiliser des modèles communautaires

Vous n'avez pas besoin de partir de zéro. v0 fournit des modèles communautaires pour les modèles d'interface utilisateur courants, que vous pouvez utiliser, modifier et intégrer dans votre projet.

3. Intégrations (fonction bêta)

v0 met en place des intégrations tierces, facilitant la connexion avec des bases de données et d'autres outils de stockage. Cette fonctionnalité est encore en version bêta, mais elle promet de rendre la v0 encore plus puissante. Vous pouvez consulter la liste des intégrations disponibles en vous rendant dans les paramètres de votre projet et en cliquant sur l'icône + à côté de la section des intégrations.

4. Variables d'environnement

v0 permet de définir des variables d'environnement afin que vous puissiez configurer les clés API, les connexions aux bases de données et d'autres secrets en toute sécurité.

Limites de la v0

Malheureusement, la v0 n'est pas parfaite pour tous les cas d'utilisation. Ce sont les limites dont vous devez être conscient :

• Pas de prévisualisation du backend: v0 générera du code backend si vous le demandez, mais vous ne pourrez pas prévisualiser une application si elle comporte une logique backend.
• Pas d'intégration réelle avec GitHub: la v0 ne s'intègre pas encore avec GitHub. La seule façon de synchroniser votre code est de copier-coller le code dans votre projet local (ou d'utiliser la fonction "Add to codebase"), puis de le pousser manuellement sur Github.
• Le code généré doit être affiné: Bien que propre, le code peut nécessiter des ajustements pour l'optimiser. Les fichiers sont parfois très longs et il se peut que la bibliothèque de composants de votre choix ne soit pas prise en charge.
• Pas idéal pour la gestion d'états complexesLa version 0 est vraiment bien adaptée à l'interface utilisateur, mais pas à une logique d'application complète.
• Pas idéal pour les non-développeurs: Dès que vous essayez d'ajouter une logique quelque peu complexe, la v0 peine à fournir une fonctionnalité fonctionnelle. Si vous n'êtes pas un développeur, vous rencontrerez rapidement des erreurs que vous ne pourrez pas corriger ou vous vous retrouverez dans l'impossibilité de personnaliser l'application à votre guise. 

Conclusion

v0 de Vercel est un outil utile pour la génération de composants d'interface utilisateur, le prototypage et même la transformation des conceptions en code. Il est encore en cours d'évolution, mais c'est déjà un bon choix pour les développeurs qui cherchent à accélérer leur travail sur le front-end. 

Essayez-le sur v0.dev et voyez si cela correspond à votre processus de développement !