Comment créer une application mobile avec l’IA

Avant d’ouvrir un outil de création par IA, notez les bases en langage simple.

Restez concis :

• à qui l’application s’adresse
• la tâche principale qu’elle aide à accomplir
• les 3 à 5 écrans nécessaires au départ
• les données que chaque écran affiche ou collecte
• si les utilisateurs ont besoin de comptes
• si des paiements sont nécessaires

Exemple pour un simple suivi d’habitudes :

• utilisateurs : personnes qui suivent leurs habitudes quotidiennes
• tâche principale : marquer les habitudes comme terminées chaque jour
• écrans : accueil, détail d’une habitude, ajout d’une habitude, profil
• données : nom de l’habitude, fréquence cible, historique des complétions
• comptes : oui, si la progression doit se synchroniser entre appareils
• paiements : non, sauf si vous prévoyez une formule payante

Cette étape est importante, car l’IA fonctionne mieux avec des contraintes qu’avec des idées trop larges comme « crée-moi une app de fitness ».

Dans Moremade, vous décrivez l’application en langage courant et l’agent IA écrit le code source. Les applications mobiles sont créées en React Native avec Expo.

Votre premier prompt devrait couvrir :

• l’objectif de l’application
• le public cible
• les écrans requis
• les actions clés sur chaque écran
• le style visuel
• ce qu’il ne faut pas inclure pour l’instant

Gardez la première version étroite. Demandez un brouillon utilisable, pas le produit final.

Crée une application mobile pour iPhone et Android appelée Habit Day. Elle aide les utilisateurs à suivre leurs habitudes quotidiennes. Crée quatre écrans : Accueil, Détail d’une habitude, Ajouter une habitude et Profil. Sur l’écran Accueil, affiche les habitudes du jour avec un bouton clair pour les marquer comme terminées. L’écran Détail d’une habitude doit afficher le nom de l’habitude, la fréquence cible, des notes et l’historique récent des complétions. L’écran Ajouter une habitude doit permettre à l’utilisateur de saisir un nom, de choisir une fréquence quotidienne ou hebdomadaire, puis d’enregistrer. Utilise une mise en page propre et simple, avec de grandes zones tactiles et des couleurs neutres. N’ajoute pas encore de paiements, de fonctionnalités sociales ou de notifications.

Ce niveau de détail produit généralement un meilleur premier résultat qu’une demande en une seule ligne.

Après la première génération, utilisez l’aperçu en direct pour examiner l’application comme le ferait un utilisateur. Repérez les états manquants, les libellés peu clairs, les espacements maladroits et les problèmes de navigation.

Moremade vous permet de modifier l’application par chat, et inclut aussi un inspecteur visuel ainsi qu’une vue du code. Utilisez l’inspecteur visuel lorsqu’un élément précis ne va pas, comme la taille d’un bouton ou les marges internes. Utilisez le chat lorsque la modification touche au comportement ou à la mise en page sur plusieurs écrans.

Les bons prompts de suivi sont concrets. Par exemple :

• « Sur l’écran Accueil, déplace le bouton d’ajout d’habitude en bouton d’action fixe en bas et fais apparaître les habitudes terminées sous les habitudes incomplètes. »
• « Ajoute un état vide sur l’écran Accueil qui explique quoi faire avant qu’il n’existe des habitudes, avec un bouton qui ouvre Ajouter une habitude. »
• « Rends l’écran Profil plus simple : supprime les avatars fictifs, affiche seulement le nom, l’adresse e-mail et un bouton de déconnexion. »

Les cycles de révision courts fonctionnent mieux. Faites un groupe de changements liés, vérifiez à nouveau l’aperçu, puis continuez.

Le premier brouillon d’une application n’a pas toujours besoin d’un backend. Si l’application est seulement un prototype ou une démonstration locale, vous pouvez valider le parcours avant d’ajouter des comptes ou des paiements.

Lorsque vous avez besoin de fonctions backend, Moremade inclut des connecteurs intégrés pour Supabase et Stripe.

Utilisez Supabase lorsque vous avez besoin :

• de la connexion utilisateur
• d’une base de données pour les données de l’application
• du stockage de fichiers

Les cas typiques incluent les applications de tâches avec progression enregistrée, les marketplaces avec comptes utilisateurs ou les outils internes où les données doivent persister.

Utilisez Stripe lorsque vous avez besoin :

• d’abonnements payants
• d’achats ponctuels
• d’un paiement avec des prix que vous définissez

N’ajoutez pas Stripe s’il n’y a pas de véritable étape de paiement dans le parcours utilisateur.

Une instruction pratique pourrait être :

• « Ajoute une connexion par e-mail avec Supabase et stocke les habitudes par utilisateur afin que chacun ne voie que ses propres données. »
• « Ajoute un écran de paiement Stripe pour un forfait premium, mais garde la version gratuite utilisable sans paiement. »

Ajoutez ces éléments après que les écrans principaux fonctionnent. Sinon, vous finissez par déboguer en même temps le périmètre produit et les détails d’intégration.

Une application mobile qui semble correcte dans un cadre de type navigateur peut quand même échouer sur un vrai appareil.

Vérifiez les bases sur iPhone et Android si possible :

• la taille des zones tactiles
• le retour à la ligne du texte sur les petits écrans
• le clavier qui masque les champs de formulaire
• les longues listes et le défilement
• les états de chargement et les états vides
• le comportement du bouton retour dans la navigation

Comme Moremade crée des applications mobiles en React Native avec Expo, vous travaillez vers une vraie base de code d’application plutôt que vers une maquette. Cela rend les tests sur appareil utiles très tôt.

Pendant vos tests, formulez les corrections comme des demandes précises :

• « Le bouton d’enregistrement est caché quand le clavier s’ouvre sur Ajouter une habitude. Garde le bouton visible au-dessus du clavier. »
• « L’écran Détail d’une habitude a besoin de plus d’espace entre le champ des notes et la liste de l’historique des complétions. »
• « Sur Android, rends le titre de l’en-tête plus court et empêche-le de passer sur deux lignes. »

C’est généralement à ce moment-là que l’application commence à paraître vraiment solide.

Lorsque vous avez une version digne d’être partagée, vous pouvez publier depuis Moremade.

Ce que propose Moremade :

• publication en un clic vers un sous-domaine gratuit yourname.moremade.ai
• connexion d’un domaine personnalisé sur les offres payantes
• achat de domaine dans Moremade
• export ZIP du code source complet à tout moment
• envoi du code source vers GitHub

Pour une revue interne ou un premier retour, le sous-domaine gratuit suffit généralement. Si l’application fait partie d’un projet client ou d’un lancement public, utilisez une offre payante et connectez un domaine personnalisé.

L’historique des versions est disponible sur les offres Standard et Pro, ce qui est utile dès que plusieurs séries de modifications commencent.

Même si vous publiez depuis Moremade, vous n’êtes pas bloqué sur la plateforme. Le code source peut être exporté en ZIP ou envoyé vers GitHub.

La plupart des problèmes viennent du périmètre et d’instructions vagues, pas de l’outil lui-même.

Faites attention à ces erreurs :

• demander trop de choses dans le premier prompt
• mélanger les objectifs de prototype et les exigences de production
• ajouter la connexion et les paiements avant que le parcours principal fonctionne
• donner un retour de design du type « rends-le meilleur » au lieu de nommer le problème
• ne pas tester sur un vrai téléphone
• oublier les cas limites comme les listes vides, les mauvaises saisies de formulaire et les états de chargement lents

Un meilleur processus est :

1. créer la plus petite version utile
2. revoir attentivement l’aperçu
3. affiner avec des prompts précis
4. ajouter les données ou les paiements seulement quand c’est justifié
5. exporter le code une fois la direction stabilisée

Cette approche garde l’application compréhensible et réduit les reprises.