Créer une application avec Lovable : tutoriel pas à pas

Quel exemple allons-nous construire ?

Nous prenons un cas d’école, inventé pour ce tutoriel. Une petite entreprise de rénovation fait ses devis dans un tableur. Les tarifs changent d’un fichier à l’autre. Personne ne sait quels devis sont envoyés ou acceptés.

L’objectif est un outil de devis interne :

• un catalogue de prestations avec un prix unitaire ;
• un formulaire pour créer un devis à partir de ce catalogue ;
• une liste des devis avec leur statut (brouillon, envoyé, accepté, refusé) ;
• un accès réservé à l’équipe.

Adaptez l’exemple à votre métier. Les étapes restent les mêmes.

De quoi avez-vous besoin avant de commencer ?

• Un compte Lovable. L’inscription se fait par e-mail, Google, GitHub ou Apple. L’offre gratuite suffit pour suivre ce tutoriel.
• Une description de votre process actuel. Qui fait les devis, quelles informations ils contiennent, quels statuts vous suivez.
• Quelques données d’exemple. Quelques prestations réelles de votre catalogue suffisent.

Si vous découvrez l’outil, commencez par Lovable c’est quoi.

Comment créer l’application étape par étape ?

1. Donner le contexte du projet

Lovable propose un champ « Knowledge » au niveau du projet. Ce texte est pris en compte à chaque demande, selon la documentation. Écrivez-y le contexte métier une fois pour toutes :

Outil interne de devis pour une entreprise de rénovation.
Utilisateurs : le gérant et deux chargés d'affaires.
Un devis contient : client, adresse du chantier, lignes de prestations
(quantité, prix unitaire), date, statut.
Statuts : brouillon, envoyé, accepté, refusé.
Interface en français.

2. Planifier avant de construire

Passez le chat en mode Plan. Ce mode analyse la demande et propose un plan que vous validez avant toute modification. Il coûte 1 crédit par message, plus d’éventuelles recherches, selon la documentation. Demandez :

Propose un plan pour un outil de devis interne. Première version
sans connexion ni base de données, avec des données d'exemple.

Lisez le plan. Retirez ce qui ne sert pas. Validez.

3. Construire la première version sans base de données

Le guide officiel conseille de commencer sans connexion ni base de données : il y a moins de choses qui peuvent casser. Vous ajoutez les deux ensuite. En mode Build, si vous n’êtes pas passé par le plan :

Crée un outil de devis : une page catalogue des prestations,
une page pour créer un devis en choisissant des prestations,
et une liste des devis avec un filtre par statut.
Utilise des données d'exemple réalistes. Pas de connexion
ni de base de données pour l'instant.

La première version prend quelques minutes. Elle s’affiche dans l’aperçu, à droite du chat.

4. Tester dans l’aperçu

Cliquez partout. Créez un devis. Changez un statut. Passez l’aperçu en vue mobile : vos chargés d’affaires ouvriront peut-être l’outil sur un chantier.

5. Corriger une chose à la fois

Le guide officiel le répète : une modification par demande, puis vérification. Décrivez précisément le problème et l’endroit :

Sur la page de création de devis, le total ne se met pas à jour
quand je change une quantité. Il doit se recalculer à chaque
modification.

Pour les retouches visuelles, la barre d’outils de l’aperçu permet de sélectionner un élément et de dire ce qui doit changer. Pour un texte, l’édition directe ne demande aucune requête.

Chaque version est enregistrée. Si une modification casse quelque chose, vous revenez à la version précédente. Pour mieux formuler vos demandes, voyez les prompts Lovable.

6. Ajouter la base de données

Les devis doivent maintenant être enregistrés. Demandez :

Enregistre le catalogue et les devis dans la base de données
à la place des données d'exemple.

Lovable active son backend intégré, qui crée une base PostgreSQL avec les tables nécessaires. Vous les consultez dans More → Database. Vous pouvez aussi importer votre catalogue existant : joignez le fichier CSV dans le chat et demandez d’ajouter les lignes, la documentation l’indique comme méthode d’import.

7. Ajouter la connexion

Ajoute une connexion par e-mail et mot de passe.
Seuls les utilisateurs connectés accèdent à l'outil.

Le backend intégré gère l’inscription et la connexion. Pour un outil interne, pensez à désactiver les inscriptions libres dans More → Users → Settings : seuls les comptes que vous ajoutez pourront entrer. La page tarifs cite d’ailleurs l’ajout d’une authentification comme exemple de demande à 1,20 crédit (consultée le 26/10/2026).

8. Vérifier les règles d’accès

Lovable crée des règles de sécurité au niveau des lignes de la base, appelées RLS. Elles décident qui voit quelles données. Vérifiez-les dans More → Database → Manage → Policies, puis précisez votre besoin :

Tous les utilisateurs connectés voient tous les devis.
Seul l'auteur d'un devis peut le modifier.
Les visiteurs non connectés n'ont accès à rien.

Nous expliquons la RLS simplement dans l’article Lovable et Supabase.

9. Passer la liste de contrôle sécurité

Avant de publier, la documentation recommande de vérifier :

1. aucune clé secrète dans le code de l’interface ;
2. les règles RLS activées et testées sur toutes les tables ;
3. une visibilité réservée pour un outil interne ;
4. les alertes critiques de la vue Sécurité traitées.

10. Publier

Cliquez sur Publish en haut à droite. Lovable propose une adresse en lovable.app, que vous pouvez modifier. Pour un outil interne, choisissez la visibilité Invite only : seules les personnes ajoutées y accèdent, après connexion. Sur Free et Pro, la limite est de 10 personnes par projet, selon la documentation consultée le 26/10/2026.

Retenez une chose : le site publié ne bouge plus tant que vous ne cliquez pas sur Publish changes.

Combien de crédits prévoir ?

Nous ne pouvons pas vous donner un total fiable : le coût dépend de la complexité de chaque demande. Les repères officiels sont les exemples de la page tarifs, de 0,50 crédit pour une retouche de bouton à 1,70 crédit pour une page complète avec images. L’offre gratuite donne 30 crédits par mois au maximum. Le détail est dans Lovable prix et crédits.

Quelles erreurs éviter ?

• Tout demander dans le premier message. Une version simple d’abord, puis des ajouts.
• Des demandes vagues. « Ça ne marche pas » coûte des crédits. Dites ce qui se passe, où, et ce qui devrait se passer.
• Publier sans vérifier les accès. Un outil de devis contient les coordonnées de vos clients.
• Changer de backend en cours de route. Lovable ne migre pas automatiquement un projet entre son backend intégré et Supabase. Choisissez au départ.

Le guide complet apprendre Lovable reprend chacune de ces étapes plus en détail.

Pour la vue d'ensemble, lisez le guide complet : Apprendre Lovable : le guide complet pour non-développeurs.