Lorsque vous apprenez à coder - que ce soit avec l'IA ou non - le projet type est presque toujours une application de liste de tâches. C'est pratiquement un rite de passage pour les nouveaux développeurs.

En plus d'être un outil pratique, c'est une excellente façon de mettre vos compétences en pratique et de créer quelque chose de fonctionnel. Alors, commençons et construisons-en une avec Bolt !

Commençons !

Étape 1 - Rédiger un prompt pour construire la première version de l'application

Le meilleur aspect des applications de codage IA est que vous pouvez leur donner un prompt simple et elles généreront le code source d'applications entièrement fonctionnelles en quelques minutes !

Pour l'application de liste de tâches, voici le prompt que nous allons utiliser. Notez que nous le gardons simple et clair - pas de mention de langages de programmation ou de termes techniques - juste une explication directe de ce que nous voulons que l'application fasse.

Prompt:

Crée une application de liste de tâches. Je serai le seul utilisateur donc pas besoin de système d'inscription/connexion. Cependant, elle nécessite une base de données pour stocker mes listes de tâches.

Cliquez sur la flèche bleue pour commencer.

Bolt vous dirigera rapidement vers son mode de construction, avec le code généré à droite et la conversation à gauche.

Ne vous inquiétez pas si le code vous semble incompréhensible. Ce n'est pas nécessaire de le comprendre !

Sur la gauche, Bolt vous tiendra informé en vous fournissant des mises à jour sur ce qu'il construit et en détaillant chaque étape au fur et à mesure.

Après un petit moment, le panneau de droite passera de l'onglet "Code" à l'onglet "Preview". Il pourrait sembler vide au début, mais pas d'inquiétude, c'est tout à fait normal !

‍

Étape 2 - Connecter une base de données pour stocker les éléments de la liste de tâches

Actuellement, si nous essayions d'utiliser notre application, toutes les tâches ajoutées disparaîtraient dès que nous actualiserions la page. Ce ne serait pas très utile !

Pour résoudre ce problème, nous avons besoin d'un moyen de stocker nos tâches, et c'est là qu'intervient la base de données. Ce concept s'appelle la 'persistance' — cela signifie simplement que les données restent sauvegardées même après avoir fermé l'application.

Dans la conversation, vous verrez Bolt vous demander une connexion Supabase. Supabase est une plateforme qui héberge des bases de données. Une fois que vous aurez lié votre compte Supabase à Bolt, celui-ci configurera automatiquement une base de données pour votre projet.

Cliquez sur le bouton "Connect to Supabase" dans le coin supérieur droit de l'écran.

Si c'est la première fois que vous connectez Supabase dans Bolt, une fenêtre d'autorisation apparaîtra - acceptez-la simplement pour continuer. Si vous avez déjà établi une connexion auparavant, Bolt passera directement à la configuration de la base de données pour votre application.

Supposons que ce soit votre première connexion à Supabase. Après avoir cliqué sur le bouton 'Connect to Supabase', vous serez redirigé vers la fenêtre de connexion API de Supabase. Connectez-vous ou créez un nouveau compte. Une fois le compte actif, il vous sera demandé d'accorder des permissions d'accès à Bolt. Cliquez sur 'Authorize Bolt'.

Retournez sur Bolt. Sélectionnez l'organisation avec laquelle vous souhaitez connecter la base de données. Cliquez sur 'Connect project'.

‍

Après environ 30 secondes, vous verrez apparaître une invite concernant les 'Supabase Migrations'. Cela signifie simplement que Bolt configure les tables nécessaires dans Supabase pour votre application. Cliquez simplement sur 'Apply changes' pour continuer.

À ce stade, vous devriez voir la première version fonctionnelle de votre application sur la droite.

Vous pouvez ouvrir votre application dans un nouvel onglet en cliquant sur le carré avec une flèche diagonale en haut à droite.

Si un message d'avertissement s'affiche, pas d'inquiétude - cliquez simplement sur 'Connect to Project' pour continuer.

Votre application de liste de tâches s'ouvrira dans un nouvel onglet.

Étape 3 - Testez l'application et effectuez des modifications à l'aide de prompts

Cette application est magnifique ! Elle dispose d'une mise en page épurée et conviviale avec un design professionnel - bravo, Bolt !

Nous apprécions particulièrement l'inclusion des onglets 'All', 'Active' et 'Completed' pour les tâches. Nous ne l'avions même pas demandé, mais maintenant que c'est là, cela semble être un ajout parfait.

En coulisses, Bolt a utilisé le modèle d'IA Claude's Sonnet 3.7, reconnu pour sa proactivité et sa créativité dans le développement de fonctionnalités.

Un test rapide d'ajout de tâches montre que tout fonctionne parfaitement - excellent travail !

À présent, ajoutons une façon de réorganiser les tâches par priorité. Nous allons demander à Bolt de s'en charger pour nous.

Saisissez le prompt suivant directement dans le chat, puis cliquez sur la flèche bleue pour continuer.

Prompt:

C'est parfait ! Crée une fonction pour réorganiser les tâches créées par priorité.

Comme précédemment, Bolt va commencer à générer et mettre à jour le code tout en vous tenant informé dans le chat.

Une fois que Bolt aura terminé, vous devrez approuver une nouvelle migration Supabase puisque la base de données est mise à jour pour prendre en charge la fonctionnalité de priorité. Cliquez simplement sur "Apply changes" lorsque vous y êtes invité.

Actualisez l'onglet de prévisualisation. Vous pouvez maintenant voir les options pour modifier la priorité des tâches et réorganiser la liste selon la priorité.

Étape 4 - Publier l'application

Pour l'instant, l'URL de prévisualisation de notre application ne fonctionne que lorsque Bolt est ouvert. Mais la bonne nouvelle est que Bolt permet de déployer facilement l'application directement depuis l'éditeur.

Il suffit de cliquer sur le bouton 'Deploy' en haut à droite.

Bolt va alors commencer à déployer votre application sur Netlify (une plateforme d'hébergement) et vous tenir informé dans le chat. Si l'aperçu de votre application disparaît momentanément, ne vous inquiétez pas - c'est tout à fait normal !

‍

Une fois le déploiement terminé, vous recevrez une URL pour accéder à votre application en ligne.

Si vous avez votre propre compte Netlify, vous recevrez également un lien pour transférer le projet vers votre compte. L'avantage principal de cette démarche est que vous pourrez configurer un nom de domaine personnalisé pour votre application.

‍

Et voilà, c'est tout ! N'oubliez pas d'expérimenter avec vos prompts. Il s'agissait d'une application simple. Vous pouvez créer des applications complexes avec Bolt sans toucher à un éditeur de code. Avec votre imagination, tout est possible. Les possibilités sont infinies.