Créez une Application Complète en 25 Minutes avec l’IA : Base de Données, Paiement et OpenAI

Aujourd’hui, il est possible de créer n’importe quelle application avec le design et les fonctionnalités de votre choix, d’intégrer de l’intelligence artificielle et même d’ajouter un système de paiement, le tout en quelques minutes et sans coder. L’IA que nous allons explorer s’appelle Lovable, et vous allez voir que ses capacités sont vraiment impressionnantes.

Présentation de l’interface Lovable

L’interface de Lovable est assez classique pour un logiciel d’IA. Vous disposez d’une fenêtre de chat avec laquelle vous pouvez interagir pour lancer n’importe quelle requête et demander de créer toutes les applications souhaitées.

Un aspect particulièrement intéressant de Lovable est sa dimension communautaire. Vous pouvez accéder à l’ensemble des templates créés par la communauté, récupérer des sites web que d’autres utilisateurs ont décidé de mettre en public, et consulter l’ensemble des discussions et des prompts qu’ils ont utilisés. C’est très pratique pour vous donner des idées, comprendre comment les autres utilisateurs interagissent avec Lovable, et voir quels résultats ils obtiennent.

Lorsque vous démarrez un projet, vous pouvez choisir de le lancer en mode public ou privé.

Création d’un site immobilier avec un prompt simple

Commençons avec un prompt très standard :

« Crée un site pour mon business de conseil en immobilier sur Paris. Ajoute des fonctionnalités différenciantes pour me démarquer des concurrents. »

Ce prompt permet d’avoir quelque chose de standard tout en laissant Lovable être proactif et proposer de bonnes idées de fonctionnalités. C’est à double tranchant car on lui demande de faire preuve d’énormément d’initiative, ce qui peut parfois être un peu indigeste pour l’IA.

Après seulement 7 minutes d’attente, notre site est prêt ! Examinons ce que Lovable nous a proposé.

Analyse du design et des fonctionnalités initiales

Du point de vue du design, le résultat est plutôt satisfaisant. Nous avons :

• Une page d’accueil avec différentes sections
• Une liste des services proposés (conseil en acquisition, investissement locatif, etc.) avec la possibilité de cliquer pour demander conseil
• Une section présentant des propriétés sélectionnées (sans images pour l’instant)
• Un espace pour réserver une consultation privée
• Une section témoignages (également sans photos)
• Une partie contact avec une carte Google Maps

En cliquant sur la section « Propriétés », nous accédons à une page listant différents biens. La page « À propos » contient des informations sur le cabinet avec des chiffres (factices) et une présentation de l’approche unique du cabinet.

Pour une première maquette ou un MVP (Minimum Viable Product), c’est déjà très impressionnant, surtout pour un prompt simple et 7 minutes d’attente !

Optimisation du design et ajout de fonctionnalités

Lovable permet d’optimiser le site de plusieurs façons :

1. Via le chat : vous pouvez interagir directement pour demander des modifications
2. Mode édition manuelle : en cliquant sur « Edit », vous pouvez sélectionner une partie spécifique et effectuer des modifications manuelles (changer le texte, la couleur, ajuster le padding, etc.)

Commençons par régler quelques problèmes d’accessibilité de couleur. Le bouton blanc n’apparaît pas bien lorsqu’on ne passe pas le curseur dessus. En prenant un screenshot et en partageant cette information avec Lovable, l’IA comprend rapidement le problème et effectue les modifications nécessaires en quelques secondes.

Ensuite, nous constatons qu’aucune photo n’apparaît sur le site. Nous demandons à Lovable d’en ajouter. Après quelques ajustements, toutes les images sont correctement intégrées, y compris les visages pour les témoignages.

Création de pages détaillées pour les biens immobiliers

Actuellement, lorsqu’on clique sur les biens immobiliers, aucune page détaillée ne s’affiche. Demandons à Lovable de créer une page pour chacun des biens, accessible en cliquant sur la photo.

Le résultat est impressionnant ! Chaque bien dispose maintenant d’une page détaillée avec :
– Des caractéristiques précises (surface, année de construction)
– Des prestations
– Des informations sur le quartier
– Des boutons d’action pour contacter un agent

Ajout d’un calculateur d’emprunt

Pour enrichir notre site, demandons à Lovable d’ajouter une fonctionnalité de calculateur d’emprunt/taux. L’IA crée une page dédiée avec :

• Un slider pour sélectionner le montant du prêt
• Des champs pour le taux d’intérêt annuel et la durée du prêt
• Un calcul automatique des mensualités
• Un tableau d’amortissement avec des courbes dynamiques
• Des conseils pour le prêt

Intégration de Google Maps avec les prix par arrondissement

Pour aller plus loin, nous voulons ajouter une visualisation du prix au mètre carré par arrondissement parisien, avec la possibilité de sélectionner les arrondissements sur une carte Google Maps.

Pour cela, nous devons d’abord obtenir une clé API Google Maps :

1. Se rendre sur la console Google Cloud
2. Créer un compte si nécessaire (gratuit avec des crédits)
3. Créer un projet
4. Rechercher « Google Maps » dans la barre de recherche
5. Aller sur Google Maps Platform, puis sur « Keys and Credentials »
6. Créer une clé API et la copier

Après avoir partagé cette clé avec Lovable, nous obtenons une carte interactive montrant les prix par arrondissement parisien. On peut sélectionner un arrondissement directement sur la carte ou via un menu déroulant, et voir les prix moyens pour un bien de 75 m².

Connexion à une base de données avec Supabase

Passons maintenant à l’étape suivante : connecter notre site à une base de données pour créer un espace client. Lovable s’intègre directement avec Supabase, ce qui simplifie considérablement le processus.

Voici les étapes pour configurer Supabase :

1. Créer un compte sur Supabase (gratuit)
2. Cliquer sur « Start a new project »
3. Créer une organisation si nécessaire
4. Nommer le projet (par exemple « lovable »)
5. Définir un mot de passe pour la base de données
6. Sélectionner une région (par exemple Francfort)
7. Cliquer sur « Create new project »

Une fois le projet Supabase prêt, retournez sur Lovable et cliquez sur le bouton d’intégration. Sélectionnez votre projet Supabase et cliquez sur « Connect ». La connexion est établie en quelques secondes.

Maintenant, demandons à Lovable de créer un espace utilisateur avec login et mot de passe. L’IA génère le code SQL nécessaire et met en place la base de données.

Nous souhaitons que les fonctionnalités de carte des prix (Price Map) et de calculateur d’emprunt soient réservées aux utilisateurs connectés. Lovable implémente cette restriction rapidement.

Pour tester, créons un compte :

1. Remplir le formulaire d’inscription (prénom, nom, email, mot de passe)
2. Soumettre le formulaire
3. Vérifier dans Supabase que l’utilisateur a bien été créé
4. Confirmer l’email (dans un scénario réel)
5. Se connecter avec les identifiants

Une fois connecté, nous avons bien accès aux fonctionnalités réservées (carte des prix et calculateur d’emprunt).

Intégration de l’IA d’OpenAI

Pour enrichir encore notre application, intégrons l’intelligence artificielle d’OpenAI. Voici comment obtenir une clé API OpenAI :

1. Se rendre sur la console OpenAI (platform.openai.com)
2. Créer un compte si nécessaire (nécessite quelques crédits, environ 5$)
3. Aller dans Dashboard > API Keys
4. Créer une nouvelle clé en lui donnant un nom (par exemple « lovable »)
5. Copier la clé

Lovable nous propose d’ajouter cette clé de manière sécurisée via un bouton dédié. Une fois la clé ajoutée, notre site est connecté à l’intelligence artificielle d’OpenAI.

Demandons maintenant à Lovable d’ajouter une fonctionnalité qui suggère des quartiers de Paris en fonction des goûts et préférences partagés par l’utilisateur, basée sur les recommandations de l’IA d’OpenAI.

Le résultat est une nouvelle page « District Finder » (Trouveur de quartier) accessible uniquement aux membres connectés. L’utilisateur peut décrire ses préférences, par exemple :

« Je cherche un quartier familial avec de bonnes écoles, des espaces verts, qui soit accessible financièrement et qui me permette de faire du sport facilement. »

En cliquant sur « Obtenir des suggestions de quartier », l’IA analyse la demande et recommande trois quartiers adaptés (dans cet exemple, les 12e, 13e et 15e arrondissements), avec pour chacun une description expliquant pourquoi il correspond aux critères. On peut ensuite cliquer sur « Voir les prix » pour être redirigé vers la carte des prix ou explorer les propriétés disponibles dans ces quartiers.

Intégration d’un système de paiement avec Stripe

La dernière étape consiste à ajouter la possibilité d’encaisser des paiements via Stripe. Voici comment configurer Stripe :

1. Créer un compte sur Stripe si nécessaire
2. Aller dans « Catalogue de produits »
3. Créer un produit (par exemple « Consultation une heure » à 100€)
4. Noter l’ID du produit
5. Aller dans la section API pour récupérer les clés
6. Copier la clé secrète
7. Créer un lien de paiement (Payment Link) pour le produit

Une fois ces informations obtenues, partagez-les avec Lovable et demandez d’ajouter la possibilité de réserver une session d’une heure avec un expert pour 100€ en intégrant le paiement avec Stripe.

Lovable implémente cette fonctionnalité, créant une page de consultation où l’utilisateur peut :

1. Renseigner son nom et son email
2. Choisir une date pour la consultation
3. Cliquer sur « Réserver et payer »
4. Être redirigé vers la page de paiement Stripe
5. Compléter le processus de paiement

Publication du site

Maintenant que notre site est complet avec toutes les fonctionnalités (base de données, espace membre, intelligence artificielle, système de paiement), nous pouvons le publier en cliquant sur le bouton « Publish » en haut à droite.

Lovable génère un nom de domaine par défaut que vous pouvez partager avec n’importe qui. Vous avez également la possibilité d’ajouter votre propre domaine en cliquant sur « Manage domain ».

Conclusion

En quelques minutes seulement, nous avons créé un site web complet pour une agence immobilière avec :

• Un design professionnel et responsive
• Des pages détaillées pour chaque bien
• Un calculateur d’emprunt
• Une carte interactive des prix par arrondissement
• Un espace membre avec inscription et connexion
• Une fonctionnalité d’IA pour recommander des quartiers
• Un système de paiement pour réserver des consultations

Tout cela sans écrire une seule ligne de code, uniquement en interagissant avec l’IA Lovable via des prompts en français simple. C’est une démonstration impressionnante de ce que l’intelligence artificielle permet aujourd’hui en matière de développement d’applications.

Que vous soyez entrepreneur, consultant, ou simplement curieux des possibilités offertes par l’IA, Lovable représente un outil puissant pour concrétiser rapidement vos idées sans compétences techniques préalables.

Informations pratiques

Plans et tarification de Lovable

Lovable propose différents plans :

• Plan gratuit : permet de tester l’outil avec un nombre limité de crédits
• Plan à 20$ par mois : suffisant pour créer des applications complètes (attention toutefois au nombre d’allers-retours limité)

Si vous souhaitez tester davantage les limites sans payer immédiatement, vous pouvez utiliser un lien spécial qui offre plus de crédits gratuits.

Ressources complémentaires

Pour approfondir les sujets autour de l’intégration de l’IA dans un business, vous pouvez consulter la chaîne « ExploreIA Business » qui traite spécifiquement de ces thématiques.

Featured image by Luca Bravo on Unsplash