Passer au contenu principal

​
Aperçu de Lovable

Bienvenue dans ce guide pas à pas pour créer une application full‑stack avec Lovable : Lovable Dashboard Pn

​
Présentation de la plateforme Lovable

1

Étape 1

Pour commencer, rendez-vous sur lovable.dev et créez un compte. Une fois inscrit, vous pourrez créer votre premier projet.
2

Étape 2

Saisissez simplement un prompt initial pour démarrer, et Lovable fera le reste ! C’est le point de départ de tout projet sur Lovable, où vous pouvez donner vie à vos idées instantanément.
Chez Lovable, la simplicité est essentielle :
  • Ici vous lancez votre projet avec un simple prompt.
  • Explorez tous les projets, y compris les plus récents et les projets mis en avant.
  • Démarrez avec un modèle issu de notre sélection soigneusement choisie.
  • Personnalisez votre expérience en affichant et en modifiant votre profil.
  • Gérez votre compte pour vérifier vos crédits mensuels et ajuster vos paramètres.
  • Expérimentez avec les fonctionnalités Labs comme Chat mode — activez-les ou désactivez-les.
  • Mettez à niveau ou rétrogradez votre formule en toute simplicité.
Dans Lovable, chaque projet suit un workflow structuré :
  • Modifiez facilement grâce à une interface de chat.
  • Joignez des images pour des modifications précises et pour vous inspirer.
  • Sélectionnez et modifiez visuellement les composants pour une expérience de conception fluide.
  • Basculez facilement entre le mode édition et Chat mode.
  • Suivez les modifications avec l’historique des versions et revenez à n’importe quelle version précédente.
  • Naviguez facilement entre les pages de votre projet.
  • Activez le remixage ou renommez votre projet selon vos besoins.
  • Utilisez Lovable Cloud (ou intégrez Supabase) pour les fonctionnalités backend.
  • Collaborez via GitHub pour modifier et gérer votre code.
  • Publiez, déployez et partagez votre projet avec un lien d’aperçu (pensez à republier après des modifications).
  • Basculez entre la vue web et la vue mobile pour un design responsive.
  • Actualisez la fenêtre modale d’aperçu pour voir immédiatement les mises à jour.
  • Ouvrez directement votre projet en utilisant le lien d’aperçu.
Les paramètres de chaque projet vous permettent de :
  • Afficher les principaux détails du projet comme le nombre total de modifications et la date de création.
  • Configurer des connaissances personnalisées pour adapter le contexte de votre projet.
  • Connecter un dépôt GitHub pour une collaboration fluide.
  • Ajuster la visibilité du projet selon vos besoins.
  • Gérer l’affichage du badge (disponible uniquement pour les offres payantes).
  • Renommer votre projet à tout moment.
  • Supprimer votre projet (⚠️ zone à risques).
Vous pouvez toujours accéder rapidement à :
  • Tableau de bord pour une vue d’ensemble de vos projets.
  • Paramètres du compte pour gérer votre profil et vos préférences.
  • Documentation et Support client pour obtenir des conseils et de l’aide.
  • Déconnexion en toute sécurité de votre compte Lovable.

​
Démarrer ton projet

Il existe plusieurs façons de commencer avec Lovable, selon tes préférences et tes ressources :
Le système basé sur les Prompt de Lovable simplifie la création d’applications.
  • Décris simplement ce que tu veux construire dans le champ de Prompt.
  • Plus tu es précis, meilleurs seront les résultats.
  • Commence avec des invites claires et détaillées.
  • Tu peux affiner et ajuster ton projet au fur et à mesure.
Exemple :« Crée un tableau de bord avec connexion utilisateur, ventes mensuelles dans un graphique en courbes et données démographiques des clients dans un graphique en secteurs. »
Tu peux remixer un projet public existant ou l’un de tes propres projets. Le Remixage te permet de réutiliser l’état actuel d’un projet comme point de départ et de construire dessus. C’est un excellent moyen d’explorer de nouvelles idées, d’apporter des ajustements ou d’itérer avec différentes modifications tout en préservant la version originale.
Tu peux uniquement remixer les projets publics d’autres utilisateurs si le projet n’est pas connecté à Supabase.
Si tu as une maquette dans Figma, prends une capture d’écran de n’importe quelle partie de celle-ci. Tu peux coller la capture directement dans Lovable ou faire glisser le fichier image. Une fois que tu appuies sur Entrée, Lovable convertira ta maquette en code fonctionnel.
1

Étape 1

Utilise Excalidraw ou tout autre outil similaire pour esquisser ton interface.
2

Étape 2

Prends une capture d’écran de ton dessin, puis colle-la ou fais-la glisser dans Lovable. La plateforme transformera ton croquis en code fonctionnel.
Plus d’informations ici.
Si tu veux reproduire une page web existante :
1

Étape 1

Prends une capture d’écran en utilisant des raccourcis comme Cmd+Shift+4 sur Mac ou des outils comme l’extension Chrome GoFullPage.
2

Étape 2

Colle ou fais glisser la capture d’écran dans Lovable. Lovable recréera la structure de la page web dans ton projet.
Plus d’informations ici.

​
Modifier votre projet

La fonctionnalité Custom knowledge dans Lovable sert de plan directeur pour votre projet, en regroupant fonctionnalités, design et objectifs au même endroit.
Visual Edits vous permet de sélectionner des éléments sur la page et soit de les modifier instantanément (par exemple mettre à jour du texte ou des couleurs), soit d’utiliser des prompts pour ajuster les fonctionnalités et la mise en page.Consultez Visual Edits pour plus d’informations.
La vitesse est importante lorsque vous créez des applications pilotées par l’IA, mais la stabilité et le contrôle le sont tout autant. C’est pourquoi nous avons amélioré la gestion des versions pour rendre le suivi des modifications simple et fluide.
1

Revenir instantanément à des versions antérieures ou essayer une autre approche

Vous pouvez afficher un aperçu d’une ancienne version fonctionnelle, puis revenir à cette version si nécessaire, ou modifier un message passé et revenir en arrière pour explorer une autre approche. Rien n’est perdu — toutes les modifications effectuées après ce point restent dans la discussion et peuvent être réappliquées à tout moment.
2

Ajouter aux favoris les modifications clés

Gardez votre travail organisé en ajoutant aux favoris les modifications importantes, ce qui permet de les retrouver et de les revisiter facilement plus tard.
3

Historique des versions intuitif

Le panneau d’historique fonctionne désormais comme dans Google Docs, ce qui facilite le suivi des modifications.
Joignez des images directement à la discussion pour ajouter du contexte à vos invites. Cela facilite l’illustration d’idées ou de concepts qui sont plus parlants en image qu’en texte.
Intégrez votre projet avec GitHub pour itérer sur votre application en toute fluidité. Vous pouvez apporter des modifications au code dans GitHub ou dans votre IDE préféré, tout en gardant tout synchronisé avec Lovable.
Voir l’intégration GitHub pour plus d’informations.

​
Ajouter des fonctionnalités full‑stack à votre projet

Si vous devez ajouter des fonctionnalités de backend à votre application, vous pouvez :
  • Connecter le backend intégré de Lovable : Lovable Cloud
  • Utiliser l’intégration native Supabase de Lovable
Il existe de nombreuses façons de connecter Stripe à Lovable, mais la manière la plus simple consiste à utiliser les liens de paiement intégrés de Stripe. Consultez l’intégration Stripe pour plus d’informations.
Consultez l’intégration Resend pour plus d’informations.

​
Déployer et publier votre projet

Obtenez les meilleurs résultats en suivant notre guide Mettre en œuvre les bonnes pratiques SEO et GEO.
Vous pouvez ajouter un domaine personnalisé à l’aide de :
  • Entri (intégré à Lovable)
  • Netlify
  • Vercel
  • Namecheap
Consultez Domaine personnalisé pour plus d’informations.
Une fois que votre projet est prêt, publiez-le pour générer une URL partageable. Cela facilite la présentation de votre application ou son partage avec vos collaborateurs et autres intervenants.
Consultez Publier pour plus d’informations.