Utiliser Lovable : votre première application, étape par étape
Un parcours complet de Lovable, reconstruit à partir d'un vrai projet de débutant — prompts structurés, mode Plan, Google Agenda, corrections de bugs, scan de sécurité et publication en PWA. Chaque étape est illustrée.
Lovable en bref
- Le premier prompt s'articule autour de deux choses : ce que fait l'application (l'objectif) et comment l'utilisateur la parcourt (le parcours). Une à deux fonctionnalités suffisent pour démarrer.
- Avant d'envoyer, passez du mode Build au mode Plan. Lovable pose d'abord des questions de clarification, puis rédige un plan que vous pouvez corriger avant toute ligne de code.
- Quand quelque chose cloche, corrigez avec un prompt précis — « les tâches doivent démarrer au quart d'heure le plus proche, jamais dans le passé » vaut mieux que « corrige les horaires ».
- Avant de publier, lancez le scan de sécurité approfondi — « Try to fix all » est gratuit. Une phrase bien tournée transforme l'application en PWA installable sur votre téléphone.
Lovable AI Tutorial for Beginners - Build Your First App
Vidéo source de:Kevin Stratvert11:40
Les captures d'écran proviennent de la vidéo source et sont créditées avec des liens horodatés. Le texte est notre propre rédaction, basée sur la transcription intégrale — les faits correspondent à l'enregistrement.
Ce tutoriel est un résumé illustré indépendant pour celles et ceux qui préfèrent lire. Pour soutenir le créateur, regardez la vidéo originale réalisée en partenariat avec Lovable, liée ci-dessus.
Créer une application dans Lovable, étape par étape
- 1
Faire le tour de l'espace de travail
Après l'inscription, vous arrivez dans l'espace de travail Lovable. La barre latérale regroupe Accueil, Recherche, Ressources et Connecteurs, avec vos discussions récentes en dessous. La zone de prompt au centre est le point de départ de toute application ; les collections de modèles se trouvent juste en dessous si vous cherchez l'inspiration.
L'espace Lovable : la zone de prompt au centre, chats et connecteurs à gauche.Voir à 0:40 - 2
Rédiger un premier prompt structuré
Avant d'écrire quoi que ce soit, clarifiez deux choses : l'objectif (ce que fait l'app) et le parcours (comment l'utilisateur la traverse). Ce projet est une app voix-vers-agenda : vous pensez vos tâches à voix haute, elle les place dans Google Agenda. Énoncez les contraintes — chaque tâche dure 30 minutes sauf indication contraire, l'utilisateur confirme avant enregistrement — et décrivez le style avec des mots comme épuré, élégant, minimal. Terminez par : « Pose-moi toutes les questions nécessaires pour comprendre exactement ce que je veux. »
Le premier prompt complet : objectif, parcours, contraintes, style, invitation aux questions.Voir à 3:20 - 3
Passer en mode Plan avant d'envoyer
Ouvrez le menu Build sous la zone de prompt et choisissez Plan — « discuter avant de construire » (bascule avec Alt+P). En mode Plan, Lovable pose d'abord ses questions et rédige un plan, ce qui l'empêche de construire la mauvaise application. Pour un premier projet, c'est l'habitude la plus rentable.
Le menu Build/Plan : choisir Plan pour discuter avant de construire.Voir à 2:40 - 4
Répondre aux questions de clarification
Lovable revient avec des questions — des choix visuels comme la couleur d'accent, puis des choix fonctionnels : transcription vocale gratuite intégrée ou service tiers, connexion de Google Agenda via le connecteur Lovable, etc. Répondez franchement ; des réponses vagues deviendront des fonctionnalités vagues.
Questions de clarification : choisissez une couleur d'accent, puis répondez aux choix fonctionnels.Voir à 4:12 - 5
Lire le plan et l'approuver
Le plan se découpe en sections accessibles — look and feel, écrans et parcours, fonctionnement — plus les détails techniques. Même non-technicien, lisez les écrans et le parcours : c'est votre application sur le papier. Si quelque chose cloche, tapez la correction dans la zone de prompt au lieu d'approuver ; puis appuyez sur Approve quand tout correspond.
Le plan généré : relire, demander des changements, puis approuver.Voir à 5:00 - 6
Connecter Google Agenda quand c'est demandé
À mi-construction, Lovable se met en pause et vous demande de connecter votre Google Agenda. Cliquez sur le bouton de connexion, connectez-vous avec votre compte Google et liez-le au projet. Dans cette démo, l'agenda est figé sur le vôtre ; vous pourrez ensuite passer à une connexion par utilisateur pour partager l'app.
À mi-parcours, Lovable vous demande de lier votre Google Agenda.Voir à 5:35 - 7
Tester en dictant vos tâches
Quand l'aperçu apparaît, cliquez sur le micro et parlez vraiment : « Je dois envoyer le rapport TPS avec une nouvelle couverture à Bill, et le récapitulatif des clients à Charles. » Arrêtez l'enregistrement, et l'application transforme votre élocution en cartes de tâches en attente de validation.
Premier test vocal : l'app transcrit votre flot de parole en tâches.Voir à 5:50 - 8
Corriger avec des prompts précis
Premier bug : les tâches étaient placées à la seconde près où vous les avez dictées. La correction tient en une instruction précise : « Les tâches doivent démarrer au quart d'heure le plus proche (et jamais dans le passé), pas à l'heure actuelle. » Lovable consigne le changement sur une petite carte — c'est le bénéfice d'avoir soigné le plan en amont.
Un prompt précis cale les tâches sur des créneaux de 15 minutes.Voir à 8:00 - 9
Lui apprendre votre langage des dates
Dites « appelle Kevin demain à 10 h » et il programme 3 h du matin — l'app ne sait pas encore interpréter les dates relatives. Donnez-lui les règles : reconnaître demain, hier, vendredi 15 h ; « le matin » signifie avant 11 h, l'après-midi va de 13 h à 16 h ; « lundi prochain » désigne celui de la semaine suivante, pas celui qui arrive. Plus vos exemples sont précis, moins vous corrigerez après coup.
Règles vocales de dates : les exemples de moments et de durées, un à un.Voir à 7:40 - 10
Débugger par capture d'écran en mode Plan
Les horaires décalés d'environ sept heures — un bug de fuseau horaire. Collez la capture des mauvais horaires directement dans la zone de prompt et décrivez votre observation : « Ça ressemble à un problème de fuseau, les heures sont décalées d'environ 7. » Repassez en mode Plan pour la correction ; si le plan est trop technique, ajoutez : « Je ne suis pas technique, explique-moi avec des mots que je comprends. »
Capturez le bug, décrivez-le, et le mode Plan produit la correction.Voir à 8:55 - 11
Publier et réclamer votre URL
Avant de publier, un dernier prompt fait passer l'app de votre agenda à une connexion par utilisateur, pour que personne ne touche à vos événements. Cliquez ensuite sur Publish en haut à droite : vous obtenez une URL lovable.app gratuite (les domaines personnalisés sont en Pro), choisissez la visibilité publique, et renseignez titre, description et image sociale.
Le flux de publication : votre URL lovable.app gratuite et les métadonnées.Voir à 9:45 - 12
Lancer le scan de sécurité et ajouter la PWA
Avant la mise en ligne, Lovable recommande un scan de sécurité approfondi — précieux pour du code généré par IA. Les corrections via « Try to fix all » ne coûtent aucun crédit. Ajoutez ensuite la touche mobile en une phrase : « Fais en sorte que je puisse l'installer comme icône d'application sur mon téléphone. Utilise un micro turquoise comme icône. » Lovable génère le manifeste PWA et les icônes tactiles.
Le scan de sécurité se corrige gratuitement — le prompt PWA la rend installable.Voir à 10:40 - 13
L'installer sur votre téléphone
Publiez la mise à jour, ouvrez l'URL dans le navigateur du téléphone et touchez l'icône de partage. Choisissez « Ajouter à l'écran d'accueil », confirmez — et l'icône de l'app atterrit sur votre écran d'accueil. Un appui, et elle tourne en plein écran comme une application native, sans passer par l'App Store.
« Ajouter à l'écran d'accueil » transforme l'app publiée en icône mobile.Voir à 11:00