Tutoriel : comment créer une application web avec Lovable
Parmi les plateformes facilitant la création d’applications web, Lovable se fait une place de choix pour les débutants, avec son IA intégrée de vibe coding. On peut se servir de l’IA générative intégrée pour générer le code, configurer l’architecture et déployer le projet. Elle propose également un plan gratuit avec 5 crédits par jour et des tarifs intéressants.
Pas besoin de connaître le code, Lovable transforme les descriptions en langage naturel en une application fonctionnelle avec React/Next.js et Tailwind CSS. Elle automatise la création et la connexion à une base de données PostgreSQL avec gestion des utilisateurs. Elle codifie l'interface en décrivant les changements souhaités, sans écrire de CSS. Elle déploie l’application rapidement sur Vercel ou Netlify. Et elle facilite la connexion à OpenAI, Stripe, ou encore Google Maps, en répondant simplement dans le chat.
Afin de mieux comprendre la façon de créer une application sur Lovable, nous allons mettre en place un générateur de quiz interactifs. Pour cela, nous créons un compte sur lovable.dev. Une fois connecté, nous cliquons sur "Créer un nouveau projet". Nous décrivons notre application à l’IA, via le chat de Lovable. Notons que nous pouvons nous aider de l’IA comme Gemini ou ChatGPT pour générer ces prompts, en précisant bien notre demande. A vous de personnaliser le texte selon ce que vous désirez.
Nous écrivons :
Crée une application web pour générer des quiz interactifs. Fonctionnalités requises : 1. Page d'accueil avec deux options : - Coller du texte directement - Entrer une URL 2. Un bouton "Générer le quiz" 3. Page de quiz affichant : - Une question à la fois - 4 options de réponse (A, B, C, D) - Une barre de progression - Un bouton "Suivant" 4. Page de résultats affichant : - Le score final - Les bonnes réponses - Un bouton "Recommencer" Design : Moderne, avec des couleurs bleu et orange, animations fluides.
Pour l'instant, utilise des questions fictives (hardcodées) pour tester l'interface.
Au bout de quelques secondes, après différents messages dans le chat, qui dit par exemple "s’inspirer de Typeform et Kahoot pour l'aspect engageant", l’application apparaît à droite de l’interface.
Nous pouvons désormais tester le quiz, en y collant du texte ou en entrant une URL. A ce stade, nous recevons toujours les mêmes questions, peu importe ce que nous entrons. C’est normal, c’est ce que nous avons demandé précédemment. Si quelque chose ne fonctionne pas, décrivez le problème à l'IA, qui doit le corriger rapidement.
Sauvegarder le quiz
Afin de conserver le quiz en mémoire, nous allons ajouter une base de données. Notons que Lovable se différencie par son intégration native de Supabase, l'alternative open source à Firebase. Cela permet à l’application de gérer des données en temps réel sans configuration ardue. Le système met notamment en place les tables de données. Nous écrivons dans le chat :
Ajoute une base de données Supabase pour sauvegarder les quiz. Crée ces tables : - quizzes (id, title, source_text, created_at, updated_at) - questions (id, quiz_id, text, created_at) - answers (id, question_id, text, is_correct, created_at) Configure les relations : - Une question appartient à un quiz - Une réponse appartient à une question Ajoute aussi les fonctions pour : - Créer un quiz - Récupérer un quiz avec ses questions et réponses
Nous autorisons Lovable lors des demandes d’autorisation. Pour vérifier que Lovable cloud est activé, nous cliquons en haut à droite sur un bouton "Cloud" en forme de nuage. Nous allons sur "Enable" pour le mettre en marche. Si le cloud n’est pas activé, vous pouvez demander dans le chat : Active lovable cloud".
Rendre le quiz interactif
Pour que Lovable génère réellement dynamiquement le quizz, nous lui envoyons cela, à personnaliser selon vos besoins. Avec ce prompt, Lovable doit créer une fonction et utiliser Gemini 2.5 Flash pour générer les questions, récupérer le contenu des URLs quand il le faut, formater les questions en JSON, sauvegarder dans Supabase et afficher les questions dans l'interface :
IMPORTANT : Je veux que l'application génère VRAIMENT les questions à partir du texte ou de l'URL que l'utilisateur fournit. Actuellement, les questions sont fictives. Je veux les remplacer par une vraie génération avec l'IA. Voici ce que tu dois faire : 1. Quand l'utilisateur soumet du texte : - Appelle l'IA pour générer les questions - Génère 5 questions à choix multiples - Pour chaque question, fournis 4 réponses dont 1 seule est correcte - Formate en JSON 2. Quand l'utilisateur soumet une URL : - Récupère le contenu de la page (avec fetch) - Envoie le contenu à l'IA - Génère les questions 3. Affiche les questions générées dans le quiz 4. Sauvegarde le quiz et les questions dans la base de données Supabase Utilise Lovable Cloud (LOVABLE_API_KEY) pour générer les questions. Ne demande pas ma clé OpenAI - utilise la clé Lovable intégrée.
Nous appuyons sur «Allow» pour «Modify database» pour que Lovable crée les tables, sauvegarde les quiz et analyse les données.
Texte ou URL à essayer
Nous testons maintenant la génération réelle d’un quizz à partir d’un texte ou d’une URL. Nous intégrons cette URL dans l’endroit adéquat : https://www.journaldunet.com/seo/1547275-etude-le-nombre-d-avis-clients-explose-sur-les-fiches-d-etablissements-de-google/.
Cela fonctionne. Le quiz généré comporte 5 questions en lien avec l’URL, avec un résultat affiché après le quizz.
Nous essayons avec d’autres textes ou d’autres URL. Lovable adapte bien ses questions. Si cela ne fonctionne pas, vérifiez que Lovable Cloud est bien activé, rechargez la page et testez de nouveau. Sinon, utilisez un texte d'au moins 200 mots sur un sujet clair. Demandez aussi à Lovable : "Génère des questions plus simples et plus pertinentes"
Configuration de l’accès public
Pour mettre en place l’accès public au quiz, nous demandons à Lovable de vérifier les RLS (Row Level Security) actuelles. Ces dernières désignent les règles qui contrôlent qui peut voir ou modifier les données dans la base de données.
Vérifiez les RLS (Row Level Security) actuelles. Je veux que : 1. Les quiz soient PUBLICS (tout le monde peut les voir et les faire) 2. Les utilisateurs anonymes puissent faire le quiz SANS créer de compte 3. Les résultats peuvent être sauvegardés optionnellement avec un compte 4. Après le quiz, proposer : "Créer un compte pour sauvegarder ?" Configurez les permissions Supabase pour l'accès public.
Après avoir effectué l’opération, nous cliquons sur "Allow" au message "Modify database" qui apparaît. Lovable explique alors que "les utilisateurs anonymes peuvent (désormais) faire des quiz sans compte, puis créer un compte optionnellement pour sauvegarder leurs résultats." Si des problèmes subsistent, n’hésitez pas à demander de l’aide à Lovable dans le chat.
Obtenir et partager l'URL du Quiz
Après avoir cliqué sur «Publish» en haut à droite de l’interface graphique, nous pouvons publier l’application, tout en prenant soin si possible de corriger les erreurs signalées via le chat. Lovable propose en effet une solution de déploiement directement sur sa plateforme.
Vous pouvez paramétrer les destinataires. Après cela, Lovable affiche notre URL : https://quizzy-paste-url.lovable.app/. Il doit être possible d’y créer des quiz interactifs. Pour les besoins plus larges, l'intégration avec Vercel ou GitHub peut être intéressante.
Ces différents atouts doivent permettre d’éviter de passer par un développeur. Dans quelques cas critiques, cela peut être cependant intéressant de le faire. Par exemple, lorsque vous n’arrivez vraiment pas à faire marcher l’application ou lorsque vous avez des besoins de sécurité avancés, de conformité ou de maintenance continue . Concernant la sécurité, la plateforme conseille notamment d’éviter d'inclure des informations confidentielles dans le code frontend et d’effectuer des contrôles de sécurité avant la publication.