Il y a beaucoup d'agitation en ligne autour de l'idée que "tout le monde peut créer une application web" de nos jours. En tant que personne ayant eu des difficultés avec la programmation par le passé, j'ai toujours été sceptique face à cette affirmation. Mais avec les derniers outils de création d'applications web alimentés par l'IA, il semble que ce rêve soit enfin à portée de main pour quiconque dispose d'une bonne idée et d'un peu de persévérance.

Il existe de nombreuses plateformes proposant des workflows basés sur l'IA pour les personnes sans formation en développement, comme v0, Replit et Bolt. Cependant, mon outil préféré actuellement est Lovable, que nous allons explorer dans ce tutoriel. Pourquoi Lovable ? Il offre une expérience utilisateur exceptionnelle, une intégration transparente avec Supabase pour les bases de données, et même une gestion automatique des erreurs. De plus, il génère certaines des interfaces les plus élégantes que j'ai pu voir.

Dans ce tutoriel, nous allons créer un système de suivi des retours clients — considérez cela comme le "hello world" de la création d'applications web full-stack avec l'aide d'un ingénieur logiciel IA.

Voici le plan pour créer une application web de suivi des retours clients :

• Rédigez un prompt pour générer l'interface utilisateur.
• Configurez Supabase pour gérer la base de données.
• Connectez Supabase à votre interface utilisateur.
• Publiez et déployez votre application.

Les outils que nous allons utiliser :

• Lovable (Gratuit pour les tests, 20$/mois pour des limites de prompts plus élevées)
• Supabase (Compte gratuit)

Commençons à créer une application de retours clients !

Étape 1 - Écrire un prompt pour générer l'interface utilisateur

Commencez par rédiger un prompt pour générer l'interface utilisateur. Décrivez-la de manière concise. Faites-en sorte que la description soit complète et couvre les principaux aspects de l'application. Voici le prompt pour vous aider à démarrer.

Prompt :

Crée une application qui m'aide à suivre les retours clients.

Assure-toi que les utilisateurs peuvent ajouter des retours, incluant une description, un type de retour et le nom du client. Ensuite, liste tous les retours sur la page principale.

Fais l'interface élégante !

‍

‍

Cliquez sur le joli bouton fléché dans le coin inférieur droit. La magie va commencer à opérer. 

‍

‍

Au bout d'environ une minute et demie, une interface utilisateur simple mais élégante a été créée. Elle n'est pas sophistiquée, mais vous pouvez lui demander d'ajouter des éléments d'interface. 

‍

‍

Cliquez sur 'Add Feedback' pour ouvrir un formulaire. Saisissez un nom et sélectionnez le type de retour. Rédigez votre commentaire et cliquez sur 'Submit Feedback'. Il apparaîtra ensuite sur la page principale. 

‍

‍

Pour s'assurer que Loveable respecte des règles et directives spécifiques lors de la création de l'application, cliquez sur l'icône d'engrenage en haut de la fenêtre de prévisualisation, accédez au module de gestion des connaissances, puis cliquez sur 'Manage Knowledge'.

‍

‍

Ajoutez quelques directives et règles que Loveable devra suivre pendant qu'il travaille sur votre projet. Utilisez le texte suivant comme exemple de ce qui peut servir de directives. Cliquez sur 'Save' une fois que vous avez terminé.

Conception adaptée aux mobiles

• Concevoir d'abord pour les appareils mobiles, puis adapter pour les écrans plus grands
• Utiliser des éléments d'interface adaptés au tactile
• Implémenter des gestes pour les actions courantes (balayage, pincement pour zoomer)
• Prendre en compte les zones accessibles au pouce pour les éléments interactifs importants

La page est très simple. Ajoutons quelques éléments d'UI (interface utilisateur) pour la rendre plus attrayante. Dans cet exemple, nous allons ajouter une barre de navigation en haut de la page. 

Prompt:

Ajoute une Navbar. Le nom de l'application est feedback.app.

‍

‍

Le code a créé une barre de navigation en haut de la page avec le nom de l'application qui s'affiche dans la Navbar. C'est plutôt élégant. Vérifiez si la barre de navigation est responsive en cliquant sur l'icône de téléphone portable dans le coin supérieur droit du panneau de prévisualisation.

‍

‍

Vous pouvez également annuler toute modification dans l'application. Par exemple, je souhaitais ajouter un pied de page à la page.

‍

‍

Après avoir soumis un prompt, je n'étais pas satisfait de son apparence.

‍

‍

J'ai donc cliqué sur le bouton 'Restore version' et supprimé le pied de page.

‍

‍

Étape 2 - Configurer Supabase pour gérer la base de données

Actuellement, l'application ne peut pas enregistrer les modifications. Si vous ajoutez des commentaires et actualisez la page, les données ne seront pas sauvegardées et disparaîtront. Ce problème peut être résolu avec Supabase. Il s'agit d'une base de données backend qui permet à votre application de sauvegarder les données et de les afficher aux utilisateurs finaux chaque fois qu'ils accèdent à la page. Alors, configurons Supabase. Si vous utilisez Supabase pour la première fois, rendez-vous sur Supabase et créez un compte gratuit. 

‍

‍

Dans le tableau de bord, cliquez sur 'New Project'. Renseignez les détails de votre organisation, ajoutez le nom du projet, créez un mot de passe pour la base de données, puis cliquez sur 'Create new project'.

‍

‍

Le projet prendra quelques minutes à s'initialiser. Une fois créé, rendez-vous dans le 'table editor' et créez une nouvelle table. 

‍

‍

Remplissez le nom et la description de la table et modifiez l'entrée 'created at'. Nommez le contenu et sélectionnez 'Text' pour le type de colonne. Cliquez sur 'Save'.

‍

‍

Vous pouvez ajouter des données directement dans le tableau en cliquant sur le bouton 'Insert' (le bouton vert) en haut et en remplissant le champ de données.

‍

‍

Ensuite, créez un utilisateur dans l'onglet d'authentification. Cet utilisateur servira à se connecter à l'application de feedback. Cliquez sur le lien 'Authentication' dans la barre latérale puis sur 'Add user'. Saisissez votre adresse e-mail et votre mot de passe, puis cliquez sur 'Create User'.

‍

‍

Étape 3 - Connecter Supabase à votre interface utilisateur

L'étape suivante consiste à lier la table Supabase que vous avez créée à l'application de feedback. Dans la fenêtre Lovable, cliquez sur 'Supabase' en haut de la page. Connectez votre Supabase à Lovable. Une fois la connexion établie, retournez sur le lien Supabase, cliquez sur le nom du projet et sélectionnez le projet auquel vous souhaitez connecter votre application. 

‍

‍

Confirmez la connexion en cliquant sur 'Connect'.

‍

‍

Pour les connexions utilisateur, rédigez un prompt demandant à lovable d'ajouter l'authentification à l'application.

Prompt:

Ajouter l'authentification.

‍

‍

Cliquez sur 'Apply changes' dans la fenêtre de prompt. 

‍

‍

Utilisez l'adresse e-mail et le mot de passe que vous avez créés dans Supabase. Cliquez sur 'Sign In'.

‍

‍

Vous pouvez maintenant ajouter des commentaires ; les éléments ajoutés apparaîtront lors de l'actualisation de la page. 

‍

‍

Étape 4 - Publiez et déployez votre application

Une fois que vous avez terminé la création de l'application, vous pouvez la publier. Cliquez sur le bouton 'Publish' dans le coin supérieur droit de la fenêtre d'aperçu, puis cliquez sur 'Deploy'.

‍

‍

L'application sera publiée sur un sous-domaine. Vous pouvez aller dans les paramètres et choisir votre propre domaine pour le déploiement.

‍

‍

Vous pouvez également modifier le nom de votre projet pour un nom de domaine plus attractif. Par exemple, si vous souhaitez le nommer feedback app plutôt que customer-voice-capsule. Allez dans 'settings' en haut de la fenêtre de prévisualisation et repérez 'Rename project.' Cliquez sur le bouton correspondant et renommez votre projet. Sélectionnez 'also rename repository' et cliquez sur 'Rename Project.' N'oubliez pas de redéployer votre application en cliquant sur le bouton 'Publish' puis sur 'Redeploy.'

‍

‍

Le nom de domaine a été modifié. 

‍

‍

Vous pouvez personnaliser votre application autant que vous le souhaitez. Lovable créera une application esthétiquement attrayante avec les fonctionnalités désirées. Comme toujours, expérimentez et utilisez des prompts pour ajuster les éléments de l'interface utilisateur. Il peut créer des applications complexes en quelques heures au lieu de plusieurs mois. 

‍