Passer au contenu principal

​
Bienvenue sur Lovable

1

Premiers pas avec les fondamentaux de Lovable

2

Comprendre l'interface et les contrôles

3

Utiliser les fonctionnalités d'édition et l'historique des versions

4

Mettre en place l'authentification et la gestion des utilisateurs

5

Utiliser les bases de données Supabase et les Edge Functions

6

Intégration GitHub et gestion du code

7

Partager des projets et recueillir les retours de la communauté

8

Explorer des ressources et des modèles supplémentaires

​
Tutoriels Lovable

Dans ce tutoriel, nous vous accompagnons pas à pas dans la création d’une application de suivi des calories propulsée par l’IA avec Lovable, avec authentification, un design responsive élégant, l’intégration OpenAI et le déploiement en production.
1

Mise en place des bases

La base de tout projet Lovable, c’est un bon Prompt. Pour cette application, voici un exemple :
Créez une application de suivi des calories avec les fonctionnalités suivantes :
Page d'accueil, tableau de bord et page des repas.
Champs de saisie pour les descriptions ou images de repas, avec analyse alimentée par GPT-4.
Suivi quotidien des progrès et intégration avec Supabase pour l'authentification et la gestion de la base de données.
Interface utilisateur élégante et adaptée aux mobiles.
Une fois que Lovable a généré l’ossature de l’UI :
  • Passe en revue la configuration de la navigation et le design de la landing page.
  • Itère sur le prompt pour affiner la mise en page et garantir la responsivité sur mobile.
Indique clairement que tu commences par l’UI. Lovable fonctionne au mieux lorsque les tâches sont découpées en étapes claires. Par exemple, définis la navigation, la structure des pages et les thèmes de design dès le début dans le prompt.
2

Conception de l’interface utilisateur

Lovable met l’accent sur une approche étape par étape, comme lorsqu’on construit un bâtiment :
  • Commence par l’échafaudage : planifie la structure de ton app (par exemple, parcours utilisateur, mise en page).
  • Ajoute la première couche : crée des pages vides avec des éléments de design de base.
  • Peaufine les détails : ajoute des couleurs, des animations et une bonne compatibilité mobile.
Si tu as des designs préconçus dans Figma, tu peux prendre des captures d’écran et les inclure dans ton prompt Lovable. Fournir des images en haute résolution permet d’obtenir de meilleurs résultats.
3

Intégrer Supabase pour le backend et l’authentification

Une fois que l’UI est prête, il est temps d’ajouter des fonctionnalités backend :
  1. Crée un compte Supabase puis un projet.
  2. Relie-le à Lovable en appuyant sur le bouton « Connect Supabase ».
  3. Pour le stockage des données, Lovable va générer des tables SQL. Par exemple :
  • Une table profiles pour stocker les informations des utilisateurs.
  • Une table meals liée aux utilisateurs pour suivre les entrées quotidiennes.
Utilise des règles de sécurité au niveau des lignes (Row-Level Security, RLS) dans Supabase pour garantir la confidentialité des utilisateurs. Lovable peut gérer cela automatiquement pour toi.
4

Intégration d’OpenAI pour l’analyse des repas

La magie de cette app réside dans ses capacités d’IA. Pour analyser des repas :
  1. Obtiens une clé API OpenAI depuis ton tableau de bord développeur.
  2. Utilise GPT-4 pour analyser des descriptions de repas ou des images.
  3. Assure-toi que les clés API sont stockées de manière sécurisée dans des Fonctions Edge pour empêcher tout accès non autorisé.
Fonctionnalités à inclure :
  • Analyser les descriptions de repas : Estimer les valeurs nutritionnelles (calories, protéines, glucides, lipides).
  • Reconnaissance d’images : Importe une photo de repas, et GPT-4 en extraira une description et des données nutritionnelles.
Astuces pro pour l’intégration d’OpenAI :
  • Utilise la fonctionnalité de function calling pour obtenir des réponses structurées, afin de garantir que les données sont correctement formatées pour l’insertion dans la base de données.
  • Teste la fonctionnalité en demandant à l’app d’analyser des entrées de repas simples comme « 2 œufs ».
5

Mise en œuvre des paiements avec Stripe

Pour monétiser l’app, ajoute des paiements par abonnement :
  1. Crée un compte Stripe et configure un produit (par exemple, « Offre Standard » à 12 $/mois).
  2. Intègre Stripe avec Lovable en ajoutant la Clé API et l’ID de prix du produit.
  3. Redirige les utilisateurs non payants vers la page d’accueil. Seuls les utilisateurs payants peuvent accéder à l’app principale.
Conseils supplémentaires :
  • Active le portail client de Stripe pour permettre aux utilisateurs de gérer leurs abonnements (par exemple, annuler ou mettre à jour leurs moyens de paiement).
  • Teste les paiements en mode test de Stripe en utilisant les informations de carte bancaire de test fournies.
6

Tests et débogage

Les erreurs font naturellement partie du développement, et Lovable simplifie le débogage :
  • Utilise le bouton « Try to Fix » chaque fois qu’une erreur de build survient.
  • Pour les problèmes de backend, consulte les Journaux Supabase pour des rapports d’erreurs détaillés.
  • Si tu déploies sur Netlify, vérifie les journaux de déploiement pour toute anomalie de build. Partage les journaux avec Lovable pour obtenir des correctifs adaptés.
Si tu es bloqué, reviens à une version précédente en utilisant la fonctionnalité « Revert » de Lovable. Cela permet d’économiser des crédits et du temps.
7

Déploiement de votre application

Une fois que ton app est prête, déploie-la avec Lovable ou Netlify :
  1. Utilise la fonctionnalité de déploiement de Lovable pour héberger l’app sur un domaine par défaut.
  2. Pour les domaines personnalisés :
Mets à jour les métadonnées de ton app (favicon, balises meta, image Open Graph (OG)) pour améliorer ta marque et ton référencement (SEO).
Dans ce tutoriel, nous allons te montrer comment créer une landing page époustouflante et entièrement interactive pour un assistant e-mail propulsé par l’IA, en utilisant Lovable, 21st.dev et Supabase — avec des animations, des intégrations d’API et un déploiement fluide!
  • Design propulsé par l’IA & améliorations de l’interface utilisateur
  • Ajout d’animations & d’éléments interactifs
  • Intégration d’améliorations d’e-mails IA avec l’API Groq
  • Configuration d’un formulaire de contact avec Resend
  • Déploiement de la page avec Lovable Launch
La session a mis en avant les capacités de Lovable à itérer rapidement et à produire des résultats prêts pour la mise en production.
1

Authentification

  • Les utilisateurs peuvent s’inscrire, se connecter et gérer leurs profils grâce à l’intégration avec Supabase.
  • Des sessions utilisateur sécurisées permettent de proposer des expériences personnalisées.
2

Soumission de feedback et vote

  • Les utilisateurs peuvent envoyer des retours avec des titres, des descriptions et des images.
  • Chaque retour affiche le nombre de votes et prend en charge les votes positifs en temps réel.
3

Tableau de bord administrateur avec résumés IA

  • Les administrateurs peuvent consulter tous les retours, filtrer par nombre de votes et trier les entrées.
  • Des résumés alimentés par l’IA identifient des informations exploitables à l’aide d’OpenAI et des Edge Functions de Supabase.
4

Suivi de la présence des utilisateurs

Des indicateurs de présence en temps réel affichent les utilisateurs actifs sur la plateforme.
5

Pages de feedback détaillées avec commentaires

Chaque retour dispose d’une page dédiée pour les discussions, permettant aux équipes de collaborer et de hiérarchiser efficacement.
6

Pièces jointes

Les utilisateurs peuvent joindre des images aux retours, stockées de manière sécurisée grâce aux capacités de stockage de Supabase.
L’objectif de cette session était de créer une application qui permet aux développeurs, designers ou consultants de proposer des services par abonnement — un modèle économique inspiré de plateformes comme DesignJoy.
1

Authentification et gestion des utilisateurs

L’authentification a été la première fonctionnalité mise en place, établissant un cadre solide pour la gestion des utilisateurs. L’équipe a souligné l’importance d’intégrer l’authentification dès le départ pour éviter des problèmes lors de la montée en charge de l’app.
  • Intégration de Supabase pour les inscriptions, connexions et la gestion des profils utilisateur.
  • Sessions utilisateur persistantes pour améliorer l’expérience sur l’app.
2

Intégration des abonnements Stripe

La session a montré comment intégrer Stripe pour la gestion des abonnements :
  • Permettre aux utilisateurs de s’abonner à différents paliers tarifaires.
  • Gérer le statut d’abonnement, en s’assurant que seuls les utilisateurs payants accèdent aux fonctionnalités premium.
3

Tableau de bord et gestion des tâches

  • Tableaux de bord spécifiques à chaque utilisateur avec des tableaux de tâches et une fonctionnalité de glisser-déposer.
  • Mises à jour des tâches en temps réel pour une collaboration fluide.
4

Chatbot IA

La session s’est conclue par l’intégration d’un chatbot IA, illustrant comment OpenAI peut ajouter des fonctionnalités dynamiques aux apps. Cette fonctionnalité pourrait être étendue pour servir d’assistant virtuel, de concierge ou d’interface de requête de données.
  • Intégration d’OpenAI pour fournir un chatbot capable de répondre intelligemment aux questions des utilisateurs.
  • Construit en un seul Prompt, mettant en avant l’efficacité de Lovable.
5

Débogage itératif et affinage

L’équipe a relevé des défis de débogage en temps réel, offrant des éclairages précieux pour le dépannage. Les techniques incluaient :
  • Utiliser les journaux de console et les messages d’erreur pour identifier les problèmes.
  • Revenir à des versions précédentes de l’app pour éviter de rester bloqué dans des états défaillants.
  • Guider l’IA de Lovable avec des invites détaillées pour garantir des corrections précises.
Dans ce tutoriel, nous approfondissons le développement d’applications propulsées par l’IA, l’ingénierie de Prompt et l’automatisation de workflows avec l’invité spécial de Lovable, ‪Mark Kashef‬ !
  • Comprendre la création de Prompts IA efficaces
  • Les quatre niveaux de l’ingénierie de Prompt
  • Techniques et bonnes pratiques de méta-Prompt
  • Stratégies de débogage pour les workflows IA
  • Créer une application IA avec Lovable & Make.com
  • Intégrer Visual Edits & Tailwind CSS pour la conception de l’interface utilisateur (UI)
Dans ce tutoriel, nous allons créer une plateforme d’événements de type Luma en utilisant Lovable et Supabase – en live!
  • Comment intégrer Supabase à Lovable
  • Configurer l’authentification et la gestion des utilisateurs
  • Configurer les bases de données et les commentaires en temps réel
  • Tester les performances et gérer plusieurs utilisateurs
  • Déboguer en live et optimiser les performances
Dans ce tutoriel, nous allons vous montrer comment utiliser Lovable, un outil de création no-code alimenté par l’IA, pour créer une application de journal personnel full-stack sans écrire une seule ligne de code!
  • Concevez l’interface de votre application instantanément
  • Importez votre design et générez une application fonctionnelle
  • Connectez Supabase pour le backend et l’authentification
  • Implémentez GPT-4o pour des fonctionnalités alimentées par l’IA
  • Déployez une application full-stack en quelques minutes!
Dans ce tutoriel, nous allons créer un CRM simple mais puissant en utilisant Lovable pour le développement, Supabase pour le stockage des données et Resend pour l’automatisation des e-mails.
  • Comment utiliser Resend pour l’automatisation des e-mails
  • Configurer les e-mails d’authentification avec Supabase
  • Créer un tableau de bord d’administration et un système de gestion des contacts
  • Créer et personnaliser des modèles d’e-mail
  • Ajouter une inscription à la newsletter et une fonctionnalité d’envoi d’e-mails de diffusion
Créer des expériences web interactives et engageantes devient encore plus facile grâce aux dernières mises à jour de Lovable!
1

Personnalisation de l’UI sans effort avec les modifications visuelles

L’une des plus grandes améliorations de Lovable est la possibilité de modifier instantanément les éléments d’interface sans consommer de crédits d’IA. Vous pouvez désormais :
  • Modifier le texte directement sur votre projet.
  • Ajuster les couleurs et styles des boutons en temps réel.
  • Importer et remplacer des images en toute fluidité.
  • Survoler les éléments pour effectuer des ajustements rapides.
Les utilisateurs peuvent désormais sélectionner du texte, changer des couleurs ou remplacer des icônes facilement, sans avoir besoin de l’intervention de l’IA, ce qui permet un processus d’itération de design plus fluide.
2

Débogage avancé et gestion des erreurs d’API

Auparavant, les utilisateurs rencontraient des difficultés pour gérer les erreurs liées aux intégrations d’API tierces. Lovable permet maintenant de :
  • Faire remonter des messages d’erreur plus riches pour un débogage facilité.
  • Éliminer les fenêtres contextuelles non pertinentes, afin de se concentrer sur les problèmes critiques.
  • Activer la détection d’erreurs pilotée par l’IA pour des corrections automatiques.
Au lieu de submerger les utilisateurs avec des fenêtres contextuelles génériques, Lovable transmet désormais le contexte des erreurs directement à son IA, qui peut décider quand un problème doit être traité et comment le corriger.
3

Créer des arrière-plans dynamiques et des animations

Lovable prend désormais en charge l’intégration fluide d’éléments animés et interactifs à l’aide de p5.js et d’autres bibliothèques.

​
Exemple de projet : site web d’agence de voyage avec drapeaux interactifs

Une démonstration en direct récente a montré comment créer une landing page pour une agence de voyage comprenant :
  1. Une section hero animée avec des drapeaux qui apparaissent et se déplacent dynamiquement en réponse aux interactions de la souris.
  2. Une section à défilement sticky qui change en fonction de la position de défilement de l’utilisateur.
  3. Des effets de survol interactifs où les images réagissent aux mouvements de l’utilisateur.

​
Comment implémenter des effets animés

Pour créer ces effets, les utilisateurs ont suivi ce processus simple :
  • Définir l’animation souhaitée :
Rendez l’arrière-plan interactif avec des éléments flottants qui s’éloignent lorsqu’on les survole.
  • Utiliser p5.js pour générer les effets :
    • Implémenter un motif de fumée chromatique.
    • Remplacer les images statiques par des animations dynamiques de drapeaux.
  • Améliorer l’expérience utilisateur avec des interactions basées sur la physique :
    • Faire bouger les éléments dynamiquement en fonction des actions de l’utilisateur.
Si une animation ne fonctionne pas, utilisez la fonctionnalité Chat mode de Lovable pour déboguer et affiner l’effet avec l’aide de l’IA, étape par étape.
4

Importer des éléments personnalisés depuis des bibliothèques externes

Avec 21st.dev, les utilisateurs peuvent désormais intégrer des composants d’UI préconçus de manière fluide dans leurs projets Lovable.
  1. Parcourez 21st.dev pour trouver un design de bouton.
  2. Copiez le Prompt généré par l’IA.
  3. Collez-le dans Lovable et remplacez un bouton existant.
Cette approche accélère les workflows de design et permet de créer des interfaces plus soignées et visuellement cohérentes.
Cette même méthode fonctionne pour importer des préréglages d’animation depuis motion.dev, ce qui facilite l’ajout d’effets de mouvement de haute qualité sans code personnalisé.
Dans ce tutoriel, nous allons voir comment créer un CRM personnalisé (Customer Relationship Management, ou système de gestion de la relation client) en utilisant Lovable et Clerk.
Dans ce tutoriel, nous allons créer pas à pas un CRM sur mesure (Customer Relationship Management, ou gestion de la relation client) en utilisant Lovable et Make.

​
Conçois, façonne ta marque et lance un véritable micro-SaaS, en direct !

Apprendre l’espagnol n’a jamais été aussi interactif ! Imagine une application qui non seulement t’apprend l’espagnol à travers des conversations, mais qui crée aussi des interactions vocales en temps réel, des cours dynamiques et un contenu visuellement captivant — entièrement propulsé par l’IA. Ce tutoriel t’aide à suivre, étape par étape, ce que Kristian et Harry ont construit :
1

Poser les bases

Avant de mettre en place des fonctionnalités d’IA, nous nous sommes concentrés sur la création de fondations solides pour l’application avec Lovable. Cela incluait la configuration de l’authentification, la structuration du tableau de bord et la mise en place de la gestion des utilisateurs.
2

Système d’authentification

  • Intégrer Supabase pour l’authentification côté backend.
  • Activer l’inscription et la connexion par e‑mail et mot de passe.
  • Créer un système de profil pour stocker les préférences utilisateur et la progression d’apprentissage.
3

Tableau de bord et navigation

  • Concevoir une barre latérale intuitive pour la navigation.
  • Créer des sections pour le chat, les cours et les paramètres utilisateur.
  • Garantir une interface responsive pour une expérience fluide sur tous les appareils.
4

Profils utilisateur et stockage des données

  • Ajouter une structure de base de données pour stocker la progression des utilisateurs.
  • Concevoir des paramètres de gestion de profil permettant aux utilisateurs d’ajuster leurs préférences d’apprentissage.
1

Cours générés par l’IA

Pour rendre l’apprentissage interactif, nous avons mis en place un système de génération de cours piloté par l’IA à l’aide du modèle GPT d’OpenAI. Voici comment il fonctionne :
  1. Les utilisateurs choisissent un sujet (par exemple « Questions à poser à un barbecue »).
  2. Lovable appelle une Fonction Edge OpenAI pour générer 10 questions engageantes en espagnol.
  3. Les utilisateurs complètent des quiz, suivent leur progression et reçoivent des retours de l’IA sur leurs réponses.
2

Améliorer l’engagement des utilisateurs

  • Questions générées dynamiquement : Chaque quiz est généré par l’IA, garantissant un contenu nouveau et unique à chaque fois.
  • Retour interactif : L’IA fournit des explications pour les bonnes et les mauvaises réponses afin d’améliorer l’apprentissage.
  • Suivi de la progression : Les utilisateurs peuvent enregistrer les cours et y revenir plus tard, ce qui renforce la mémorisation et la pratique.
3

Renforcer l’engagement visuel avec Replicate

Pour ajouter un élément d’apprentissage visuel, nous avons intégré le modèle de génération d’images Flux Schnell de Replicate :
  • Bannières de cours automatisées : Chaque cours génère dynamiquement une image correspondant au sujet.
  • Expérience visuelle immersive : Les visuels pilotés par l’IA renforcent l’engagement et la rétention des utilisateurs.
  • Traitement d’images rapide : Grâce à l’API de Replicate, les images sont générées en temps réel sans ralentir l’expérience.
4

Conversations vocales en temps réel

Une étape majeure dans le développement de l’application a été l’ajout de pratique de l’espagnol à l’oral en temps réel à l’aide de l’API WebRTC temps réel d’OpenAI :
  • Tuteur IA interactif : Les utilisateurs peuvent parler directement avec une IA qui répond dynamiquement en espagnol.
  • Assistance à la prononciation : L’IA fournit des corrections et des suggestions en temps réel.
  • Conversations fluides : Le flux naturel de la conversation donne l’impression d’interagir avec un tuteur humain.
1

Définir le concept et l’audience

Avant d’aborder le branding, nous avons défini nos objectifs principaux :
  • Chat assisté par IA pour des conversations en espagnol en temps réel.
  • Quiz automatisés pour des sessions d’entraînement rapides.
  • Apprentissage structuré avec enregistrement des leçons et suivi de la progression.
Cela a aidé à orienter nos choix de branding pour qu’ils restent alignés avec l’objectif de l’application.
2

Nommer l’app & choisir le domaine

Nous voulions un nom court et mémorable qui reflète le parcours d’apprentissage. À l’aide de l’IA, nous avons généré des idées et retenu Ruta (espagnol pour « route » ou « chemin »).

​
Processus :

  • Génération de noms à l’aide de l’IA pour trouver des mots espagnols accrocheurs.
  • Test d’options comme “Camino” et “Verbo,” mais “Ruta” s’est démarqué.
  • Vérification de la disponibilité du domaine et réservation immédiate de rutaapp.com.
3

Créer une identité visuelle

Nous avons rapidement conçu la marque :
  • Logo : une icône inspirée d’une boussole, issue de bibliothèques de design et modifiée dans Figma.
  • Association de polices : une typographie moderne et en gras pour le logo et une police lisible pour l’interface de l’app.
  • Palette de couleurs : une palette bleue Tailwind CSS pour symboliser le voyage et la découverte.
  • Inspiration de style : expérimentation avec le néo-brutalisme, en ajustant contraste, ombres et bordures pour créer une interface utilisateur visuellement attractive.
4

Construire une expérience utilisateur cohérente

Avec Lovable, nous avons assuré une cohérence visuelle dans toute l’app :
  • Landing page : générée par IA avec une section hero dynamique et engageante.
  • Tableau de bord & pages de cours : conçus pour correspondre à l’identité de la marque.
  • Stylisation itérative : application d’éléments néo-brutalistes pour tester différents styles de design.
  • Tests du parcours utilisateur : vérification d’une navigation fluide, de l’inscription jusqu’au chat en temps réel.

​
Tutoriels de la communauté

Découvrez les tutoriels de la communauté Lovable ici.