Comment créer une application de commande de restaurant avec IA

Avant d’ouvrir le générateur, listez la version la plus simple qui serait utile à un client.

Pour une application de commande de restaurant, cela signifie généralement :

• un écran d’accueil avec le nom du restaurant, les horaires d’ouverture et les options de livraison ou de retrait
• un écran de menu avec des catégories comme entrées, plats, boissons et desserts
• des détails pour les éléments avec des tailles, des extras, le niveau de piquant ou des notes
• un écran de panier avec modification des quantités et total de commande
• un écran de paiement avec les coordonnées du client et le paiement
• un écran de confirmation de commande

Décidez ensuite quelles données sont nécessaires :

• catégories du menu
• noms des plats, descriptions et prix
• options comme fromage supplémentaire ou taille de boisson
• frais de livraison, minimum de commande et règles de taxe si vous souhaitez les afficher

Décidez aussi si les utilisateurs ont besoin de comptes. Beaucoup d’applications de restaurant n’ont pas besoin de connexion pour une première version. Si l’objectif est simplement de permettre aux clients de passer des commandes payées, vous pouvez souvent commencer avec le menu, le panier et le paiement. Ajoutez des comptes plus tard seulement si vous avez besoin d’adresses enregistrées, d’un historique des commandes ou de fonctions de fidélité.

Moremade fonctionne mieux lorsque le premier prompt ressemble à un bref cahier des charges produit. Soyez précis sur les écrans, le comportement et le style visuel. Demandez une première version simple plutôt que tous les cas particuliers d’un coup.

Un bon premier prompt doit couvrir :

• la plateforme : site web ou application mobile
• le public : les clients du restaurant
• les écrans principaux
• ce qui se passe dans le panier et au paiement
• l’orientation design
• toute décision technique déjà connue

Exemple de premier prompt :

Crée une application mobile pour un restaurant local appelé Cedar Grill en utilisant React Native avec Expo. Crée un écran d’accueil, un écran de menu avec catégories, un parcours de détail d’un article, un panier, un paiement et une confirmation de commande. Les clients doivent pouvoir ajouter des articles, choisir des options comme la taille ou des extras, modifier les quantités et laisser une note pour la cuisine. Utilise une interface propre et moderne avec de grandes images de plats, des couleurs chaudes et neutres, et des boutons bien visibles. Commence avec des données d’exemple pour des burgers, salades, frites, desserts et boissons. Fais en sorte que l’application soit pensée d’abord pour le mobile et facile à faire évoluer plus tard avec les paiements Stripe et Supabase pour les données du menu.

Cela suffit pour obtenir une première version exploitable. Vous pourrez préciser les détails dans la conversation après avoir vu l’aperçu.

Une fois que Moremade a généré l’application, examinez l’aperçu en direct comme vous le feriez pour la première ébauche d’un designer. N’essayez pas de tout corriger d’un coup. Parcourez le chemin principal du client : consulter le menu, ouvrir un article, l’ajouter au panier, modifier la quantité et accéder au paiement.

Utilisez l’inspecteur visuel si vous voulez pointer un bouton, une carte ou un bloc de texte précis pour le modifier directement. Utilisez le chat pour les changements de comportement ou les retouches de design plus larges. Si nécessaire, ouvrez la vue du code pour inspecter la structure des écrans.

Trois prompts de suivi utiles :

• "Rends le menu plus facile à parcourir sur mobile : ajoute une barre de catégories fixe en haut, réduis la longueur des descriptions dans la liste et affiche le prix de façon plus visible."
• "Change l’écran de détail d’un article pour que les options obligatoires doivent être sélectionnées avant que Ajouter au panier soit activé. Ajoute des extras sous forme de cases à cocher et un champ texte pour les notes d’allergie."
• "Améliore le parcours panier et paiement : affiche clairement le sous-total, les frais de livraison et le total, fixe l’action principale en bas, et ajoute un sélecteur d’heure estimée pour le retrait ou la livraison."

Travaillez par petites itérations. Générez, vérifiez, ajustez et recommencez. Cela donne généralement un meilleur résultat que d’écrire un seul très long prompt avec toutes les exigences d’un coup.

Gardez la première version simple. Ajoutez ensuite les intégrations selon les besoins réels de l’application.

Utilisez Stripe si vous voulez un vrai paiement. Moremade dispose d’un connecteur Stripe intégré pour le paiement avec les prix que vous définissez. Pour une application de commande de restaurant, c’est l’étape suivante naturelle une fois que le panier et les totaux semblent corrects.

Utilisez Supabase si vous avez besoin de données dynamiques ou de comptes utilisateurs. Supabase peut gérer :

• les tables de base de données pour les plats et les catégories
• la connexion si les clients ont besoin de comptes
• le stockage de fichiers pour les images du menu

Une séquence pratique est :

1. Commencez avec des données d’exemple du menu dans l’application générée.
2. Affinez les écrans et le parcours de commande.
3. Connectez Stripe pour le paiement.
4. Déplacez les données du menu vers Supabase si vous avez besoin de mises à jour plus simples ou de plusieurs emplacements.
5. Ajoutez la connexion seulement s’il existe un vrai besoin de profils enregistrés ou d’historique des commandes.

Cela évite l’erreur fréquente de construire les systèmes de compte avant que l’expérience de commande elle-même fonctionne bien.

Une application de commande de restaurant vit ou meurt selon son ergonomie sur petit écran. Testez-la sur un vrai téléphone, pas seulement dans un navigateur desktop redimensionné.

Vérifiez ces points :

• les onglets de catégories sont faciles à toucher
• les noms des articles et les prix tiennent sans retour à la ligne gênant
• les groupes d’options sont clairs et ne sont pas cachés sous la ligne de flottaison
• le bouton du panier reste visible quand il le faut
• les totaux se mettent à jour correctement lorsque les quantités ou les extras changent
• les champs de paiement sont faciles à remplir sur mobile

Testez aussi de vrais scénarios de commande :

• ajoutez deux articles similaires avec des options différentes
• supprimez un article et vérifiez que les totaux se mettent à jour
• passez une commande à emporter et une commande en livraison si les deux existent
• essayez des options obligatoires incomplètes et vérifiez que l’application bloque les ajouts invalides au panier

Utilisez l’historique des versions au fur et à mesure. Si une série de changements dégrade le parcours, revenez en arrière et essayez un prompt plus ciblé.

Une fois le parcours de commande fonctionnel, vous pouvez publier directement depuis Moremade.

Les options sont simples :

• avec le plan Free, publiez sur un sous-domaine yourname.moremade.ai
• avec les plans payants, connectez un domaine personnalisé
• vous pouvez aussi acheter des domaines dans Moremade

Pour un test interne, le sous-domaine gratuit suffit généralement. Pour un vrai lancement de restaurant, utilisez un domaine personnalisé sur un plan payant afin que les clients voient l’adresse web du restaurant.

Si vous voulez conserver une portabilité totale, exportez le code source sous forme de ZIP à tout moment ou poussez-le vers GitHub. Moremade génère du vrai code React + Tailwind pour les sites web et du React Native avec Expo pour les applications mobiles, donc vous n’êtes pas lié à un runtime propriétaire.

La plupart des problèmes viennent d’une volonté d’en faire trop trop tôt.

Évitez ces erreurs :

• Commencer avec des prompts vagues. "Crée une application de restauration" est trop ouvert. Nommez les écrans, les actions et le style.
• Ajouter la connexion avant d’avoir confirmé le parcours de commande. Les comptes sont souvent facultatifs pour une première version.
• Mélanger la logique de livraison, les fonctions de fidélité, les outils d’administration et la commande client dans une seule première version. Commencez uniquement par la partie client.
• Ignorer les règles de modification. Les commandes de restaurant nécessitent souvent des choix obligatoires comme la taille, l’accompagnement ou la cuisson.
• Ne pas tester les longs noms de menu et les cas limites. Les vrais menus contiennent des éléments maladroits, pas seulement des cartes d’exemple propres.
• Publier sans vérifier les totaux. Vérifiez le sous-total, les frais et le montant final avant de connecter les paiements.

Une règle utile consiste à faire fonctionner d’abord un seul parcours propre : ouvrir l’application, choisir un article, configurer l’article, l’ajouter au panier, payer, voir la confirmation. Après cela, étendez les fonctionnalités.