Une IA adorable : Un guide avec un projet de démonstration

Lovable est un service de conversion de texte en application qui permet à tout un chacun de créer des applications fonctionnelles sans aucune compétence en programmation. Nous pouvons décrire nos idées d'application par le biais d'une interface de chat, et la plateforme transforme ces descriptions en une application réelle et fonctionnelle.

Dans ce tutoriel, je vous montrerai comment utiliser Lovable en construisant quelque chose de pratique - je vous guiderai pas à pas dans la construction et la publication d'une application mobile de liste de tâches simple mais complète avec persistance des données, authentification de l'utilisateur, rappels par e-mail et abonnements payants.

À la fin, j'aborderai également certaines des limites de Lovable, notamment les problèmes de sécurité, son manque potentiel de rapidité pour les développeurs qui disposent déjà de leurs propres outils et bibliothèques, et les difficultés auxquelles les non-programmeurs peuvent être confrontés lors du débogage.

Qu'est-ce que Lovable AI ?

Grâce à l'IA, Lovable nous permet de transformer nos idées en applications pleinement fonctionnelles en les décrivant. Cela signifie que nous pouvons facilement contourner les complexités du codage traditionnel, rendant la création d'applications à la fois accessible et efficace pour les non-développeurs ainsi que pour les développeurs à la recherche d'un moyen plus rapide de prototyper des applications.

Lovable utilise React et Vite pour le frontend. React est une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur, connue pour sa flexibilité et son efficacité. Vite, quant à lui, est un outil de construction qui offre une expérience de développement plus rapide et plus légère. Ces cadres facilitent la création d'applications en gérant la logique complexe de l'interface utilisateur, ce qui garantit que nos applications sont non seulement fonctionnelles, mais aussi réactives et fluides.

Pour le backend, Lovable utilise Supabaseune alternative open-source aux solutions traditionnelles de backend. Supabase est essentiellement une collection d'outils qui créent un système de backend, y compris le stockage de base de données, l'authentification et les fonctions de cloud. Il fonctionne en conjonction avec notre application pour gérer les données et permettre une fonctionnalité en temps réel.

Lovable ne permet pas d'éditer le code qu'il produit directement dans son interface. Cependant, nous avons la possibilité de lier le code de notre application à un dépôt GitHub. Cette connexion signifie que toute modification apportée au code sur GitHub est directement répercutée dans l'application, ce qui permet un développement collaboratif et un contrôle des versions.

Cette configuration combine la facilité d'une interface sans code avec la flexibilité et le contrôle qu'offre GitHub. Cependant, j'ai souvent regretté de ne pas pouvoir éditer le code directement pour y apporter de petites modifications.

Construire votre premier projet avec Lovable

Pour commencer

Pour commencer avec Lovable, nous devons d'abord nous rendre sur leur site web et créer un compte gratuit.

Une fois notre compte gratuit créé, nous pourrons envoyer cinq messages par jour à l'assistant IA de la plateforme. C'est un grand défi de voir jusqu'où nous pouvons progresser dans ces limites.

Dans le premier message, nous décrivons brièvement notre projet. 

Notez que ma description est assez courte. J'ai également essayé de donner une description très détaillée de toutes les fonctionnalités dans le premier message, mais cela n'a pas très bien fonctionné parce que la plupart de ces fonctionnalités nécessitent un backend. Lorsque le projet est initialement créé, il n'est pas automatiquement connecté à Supabase, et l'invite échoue.

C'est le résultat que nous avons obtenu avec cette invite :

L'application était assez fonctionnelle à ce stade. Il a permis de créer, de supprimer et de marquer des éléments comme étant terminés dans la liste des tâches. À ma grande surprise, les données persistaient lorsque l'application était actualisée !

Pour ce faire, Lovable utilise le stockage local, qui stocke les données dans une base de données locale du navigateur. Cette méthode présente l'avantage de ne pas nécessiter de connexion internet, mais aussi l'inconvénient de ne pas permettre le partage des données entre les appareils.

Voyons comment remplacer cela par une base de données backend en connectant notre projet à Supabase.

Connexion à Supabase

Supabase est une plateforme open-source qui fournit une infrastructure de base pour nos applications. Il offre une gamme de services, notamment le stockage de bases de données, l'authentification et les API, ce qui en fait une solution complète pour la gestion des données d'application. 

Lors de la création d'une application de liste de tâches, par exemple, Supabase devient essentielle si nous voulons que les données de notre application persistent sur plusieurs appareils et utilisateurs. Contrairement au stockage local, qui ne stocke les données que dans le navigateur d'un seul appareil, Supabase nous permet de stocker les données dans le cloud. Cela signifie que nos utilisateurs peuvent accéder à leurs listes de tâches depuis n'importe quel appareil et voir les mises à jour en temps réel.

En outre, les services d'authentification de Supabase nous aident à gérer les inscriptions et les connexions des utilisateurs, en veillant à ce que les données de chaque utilisateur restent sécurisées et privées. En connectant notre application à Supabase, nous libérons tout le potentiel de notre application.

L'un des avantages de l'utilisation de Supabase pour construire nos applications est sa nature open-source. Le fait d'être open-source signifie que Supabase ne nous oblige pas à utiliser un fournisseur de cloud spécifique, ce qui offre plus de flexibilité dans la façon dont nous gérons le backend de notre application. Bien que nous ayons la possibilité d'utiliser les services hébergés de Supabase pour des raisons de commodité, nous avons également la liberté d'héberger nous-mêmes nos applications en utilisant Docker si nous le préférons. Cette flexibilité nous permet de choisir l'environnement d'hébergement qui répond le mieux à nos besoins, que ce soit pour des raisons de rentabilité, de performances ou de conformité.

Pour connecter notre projet à Supabase, nous suivons les étapes suivantes :

1. Cliquez sur le bouton Supabase dans le coin supérieur droit.

2. Une fenêtre contextuelle s'affiche, nous invitant à nous inscrire à Supabase.

3. Après l'inscription, nous cliquons à nouveau sur le bouton Supabase pour autoriser Lovable à accéder à notre compte. Vous serez invité à créer une organisation.

4. Une fois l'organisation créée, nous pouvons la sélectionner et autoriser Lovable à accéder à notre compte Supabase par l'intermédiaire de cette organisation.

5. Cliquez à nouveau sur le bouton Supabase et créez un projet. Cela nous redirigera vers le site web de Supabase, où nous pourrons configurer le projet.

6. Enfin, retournez sur le site web de Lovable et cliquez une dernière fois sur le bouton Supabase. Sélectionnez ensuite le projet que nous venons de créer. L'IA est alors invitée à mettre à jour le code pour se connecter à ce projet.

Voilà, notre application a maintenant un backend !

Comme mentionné ci-dessus, il est préférable de se connecter au projet Supabase avant de demander à Lovable d'implémenter toute fonctionnalité nécessitant un backend, car il semble qu'il n'aime pas écrire le code avant d'être connecté. Notez que ce n'est pas vraiment la façon dont les ingénieurs travaillent - les ingénieurs du front peuvent écrire le code du front sans que le backend soit mis en œuvre.

Ajout de l'authentification des utilisateurs

Avec notre application connectée à un projet Supabase, nous pouvons maintenant demander à Lovable d'ajouter l'authentification de l'utilisateur.

Tout d'abord, l'IA va créer les tableaux de la base de données pour notre application. Une fois que c'est fait, nous devons l'approuver manuellement en cliquant sur le bouton "Appliquer les changements" dans la fenêtre de chat.

Nous ne serons pas toujours invités à accepter les modifications de l'IA, mais dans certains cas, cela est nécessaire car certaines modifications (comme les mises à jour de la base de données) peuvent affecter l'application en production même si elle n'est pas publiée.

Une fois la base de données mise à jour, le code d'authentification des utilisateurs est mis à jour et les mises à jour des tâches sont enregistrées dans la base de données.

Cependant, cette fois-ci, il se heurte à l'erreur suivante : "Construction non réussie". Lorsque cela se produit, nous pouvons voir l'erreur et le bouton "Essayer de la résoudre" en haut de la page pour tenter de résoudre automatiquement le problème.

Dans ce cas, il suffit de cliquer sur le bouton pour résoudre le problème, et l'application est désormais pleinement fonctionnelle avec l'authentification de l'utilisateur et le stockage des données dans la base de données. Ainsi, si vous utilisez l'application sur plusieurs appareils, vous pouvez toujours accéder à votre liste de tâches.

Publier l'application

Pour publier l'application, nous pouvons utiliser le bouton "Publier" dans le coin supérieur droit.

Une fois publié, nous pouvons y accéder en utilisant le lien fourni au bas du menu.

Elle est accessible au public en ligne et permet à quiconque d'utiliser l'application. Nous pouvons également créer un domaine personnalisé si nous en avons un. Nous ne couvrirons pas ces détails ici, mais Lovable a un tutoriel sur leur documentation.

Notez que nous devons cliquer sur le bouton "Redéployer" chaque fois que nous apportons des modifications à l'application. Dans le cas contraire, ces changements ne seront visibles que sur l'interface de Lovable et non par les utilisateurs qui utilisent l'application via l'URL de l'application.

Capacités avancées de Lovable

Connexion à GitHub

Lovable ne nous permet pas de modifier directement le code, il nous permet seulement de visualiser le code et les modifications qu'il apporte.

Pour pouvoir modifier le code, nous devons connecter le projet à GitHub, qui est une plateforme largement utilisée pour héberger et collaborer à des projets de code en utilisant le contrôle de version. Cela permet à plusieurs utilisateurs de contribuer, de réviser et de gérer les changements de manière efficace.

Pour vous connecter à GitHub :

1. Connectez-vous à votre compte GitHub et créez une organisation gratuite.

2. Dans Lovable, cliquez sur le bouton "Editer le code" dans le coin supérieur droit.

3. Cliquez ensuite sur "Connect to GitHub".

4. Sélectionnez l'organisation que nous avons créée à la première étape.

Lorsque GitHub est connecté, le code reste synchronisé avec le dépôt GitHub. Cela signifie que nous pouvons utiliser des outils comme VSCode pour travailler sur notre projet localement. Notez qu'il faut un certain temps à Lovable pour récupérer les modifications après qu'elles aient été poussées vers le dépôt.

Rappelez-vous que l'application elle-même ne se redéploie pas automatiquement. Pour voir les changements apportés à l'application, nous devons la publier à nouveau.

Fonctions du cloud

Ce que nous avons appris jusqu'à présent nous permet de créer une application capable de gérer une base de données en ligne et une interface utilisateur frontale pour créer, lire, mettre à jour et supprimer ces données, ce que l'on appelle souvent une application CRUD.

Les fonctions cloud offrent un moyen puissant d'ajouter une logique personnalisée et des opérations complexes à nos applications sans avoir à gérer des serveurs physiques. Ils nous permettent d'exécuter le code du backend en réponse à des événements tels que des modifications de la base de données, des requêtes HTTP ou d'autres déclencheurs. Cela peut s'avérer particulièrement utile pour des tâches telles que l'envoi de notifications par courrier électronique, le traitement de données ou l'exécution de tâches programmées.

En utilisant des fonctions cloud, nous gagnons en flexibilité pour gérer efficacement des fonctions complexes et les faire évoluer en fonction des besoins, tout en garantissant une expérience utilisateur transparente et réactive. Essentiellement, ils nous permettent d'étendre les capacités de nos applications au-delà de la simple gestion des données, en les rendant plus dynamiques et plus utiles.

Un excellent exemple d'utilisation d'une fonction cloud dans une appli de liste de tâches est l'envoi de rappels par courriel pour les tâches à venir. Imaginons que nous souhaitions rappeler aux utilisateurs les tâches qu'ils doivent effectuer prochainement. Nous pourrions écrire une fonction cloud qui vérifie dans la base de données les tâches dont l'échéance approche et qui envoie automatiquement un rappel par courrier électronique à l'utilisateur.

Nous pouvons demander à Lovable de mettre cela en œuvre pour nous :

Certaines fonctions nécessitent l'accès à des API externes qui requièrent une clé API pour fonctionner. Dans ce cas, la solution mise en œuvre utilise l'API Resend, Lovable a donc demandé la clé API pour terminer la mise en place du service. 

Ajouter des abonnements avec Stripe

Il ne sert à rien de créer une application si les utilisateurs ne peuvent pas s'y abonner. Demandons à Lovable de mettre en place des abonnements dans l'application en utilisant Stripe.

Nous pouvons utiliser l'invite suivante :

Il m'a demandé de fournir ma clé Stripe, comme dans l'exemple précédent. Nous pouvons obtenir cette clé à partir de notre compte Stripe.

Enfin, il a indiqué que l'identifiant du prix de l'abonnement était manquant. Pour cela, nous pouvons retourner dans Stripe, créer un produit d'abonnement et copier l'identifiant du prix. Puisque Lovable n'avait pas de bouton demandant l'ID du prix comme il l'avait fait pour la clé API, nous pouvons le fournir dans le chat :

Pour compléter l'implémentation, nous pouvons lui demander de n'autoriser que les utilisateurs abonnés à créer des tâches et à publier la version mise à jour de l'application.

Tout a fonctionné du premier coup !

Créer une application mobile que nous pouvons installer

L'application créée par Lovable n'est pas une application web progressive (PWA). Ce n'est qu'un site web et cela signifie que nous ne pouvons pas l'installer sur un appareil mobile et l'utiliser comme s'il s'agissait d'une véritable application pour téléphone au lieu d'un site web.

Cependant, il est très facile de remédier à ce problème avec une simple invite :

Grâce à ces changements, si nous ouvrons le lien vers l'application sur notre appareil mobile, nous pouvons l'installer et l'utiliser comme s'il s'agissait d'une application installée nativement.

Les limites de l'aimable

Malgré le potentiel de Lovable, il est important de tenir compte de ses limites.

Préoccupations en matière de sécurité

Bien que Lovable offre un moyen attrayant de créer des applications sans codage, il soulève des inquiétudes quant à la sécurité des applications, en particulier pour les personnes qui n'ont pas d'expérience en matière de codage. Comment les utilisateurs peuvent-ils être sûrs que la base de données de leur application dispose des mesures de sécurité nécessaires pour empêcher tout accès non autorisé, par exemple lorsqu'un utilisateur ajoute des tâches à la liste d'un autre utilisateur ?

Cet aspect crucial n'a pas été mentionné dans les invites du processus de création de l'application, ce qui a laissé des vulnérabilités potentielles non examinées. Les utilisateurs qui n'ont pas de connaissances techniques peuvent avoir du mal à évaluer et à gérer ces problèmes de sécurité.

Lovable est-il vraiment plus rapide pour les développeurs ?

Pour les développeurs qui disposent déjà de leur propre ensemble d'outils et de bibliothèques de code, la question qui se pose est la suivante : Lovable est-il vraiment plus rapide ?

De nombreux développeurs ont perfectionné leur art en créant une bibliothèque interne d'extraits de code et de modules auxquels ils font confiance et qu'ils connaissent bien, qui englobent souvent des fonctions telles que les paiements, l'authentification et les opérations CRUD. Ceux-ci sont adaptés à leur style et à leurs préférences technologiques.

Lovable peut ne pas offrir le même niveau de contrôle sur les technologies utilisées, ce qui peut être un inconvénient pour ceux qui sont habitués à des systèmes et à des flux de travail particuliers. Bien que la plateforme offre un moyen facile de créer rapidement des prototypes, les développeurs pourraient trouver plus efficace de s'en tenir à leurs outils et méthodes existants, surtout si l'on considère l'intégration transparente et la familiarité qu'ils offrent.

Débogage pour les non-programmeurs

Si Lovable facilite considérablement la création d'applications sans codage, la manière dont les non-programmeurs sont censés gérer les situations où les solutions automatiques ne suffisent pas et où une intervention manuelle est nécessaire suscite de vives inquiétudes. Que se passe-t-il lorsque la plateforme rencontre un problème qu'elle ne peut pas résoudre automatiquement ? Qui s'occupe de ces goulets d'étranglement lorsque les utilisateurs visés n'ont pas de compétences en matière de codage ?

Sans la possibilité de se plonger dans le code, un non-codeur peut se sentir bloqué et ne pas savoir quelles sont les étapes à suivre. Cette dépendance peut conduire à des projets bloqués et à des frustrations, les obligeant éventuellement à embaucher un programmeur ou à demander une aide extérieure, ce qui peut entraîner des coûts et des retards supplémentaires.

Conclusion

En fin de compte, si Lovable rend le développement d'applications accessible, son succès pour les non-programmeurs dépend largement de la manière dont il aide les utilisateurs lorsque les choses deviennent plus complexes qu'un simple message-guide.

Je pense que Lovable tient vraiment sa promesse de rendre le développement d'applications accessible à tous. Malgré la limitation de l'envoi à cinq messages par jour, il est possible de créer une application fonctionnelle efficace.

La plateforme montre une forte capacité à gérer des flux de travail plus complexes, ce qui nous permet d'effectuer une personnalisation détaillée de l'application. Cela signifie que même dans le cadre d'interactions limitées, nous pouvons transformer des idées d'applications créatives en applications fonctionnelles.