Module 4

No-code et Vibe Coding

60 min

Objectifs d’apprentissage

Définir une version minimale d’application
Décrire les écrans, données et comportements
Tester un prototype sans confondre apparence et fonctionnement

1. Définir les deux approches. Le no-code assemble des interfaces et des règles avec des outils visuels. Le vibe coding décrit en langage naturel ce qu’un outil comme Lovable doit construire ; du code peut être généré derrière l’interface. Dans les deux cas, vous restez responsable des besoins, des tests, de la sécurité et des limites. Une belle page n’est pas la preuve d’un service fonctionnel.

2. Cadrer une version minimale. Écrivez une phrase : « Pour [public], l’application permet [tâche] afin de [résultat]. » Limitez la première version à un problème et quelques actions essentielles. Pour BIZNIS AI : enregistrer des ventes fictives, afficher le total et préparer une synthèse. Excluez provisoirement paiement, gestion de stock complète et données réelles. Dessinez le parcours sur papier avant de générer les écrans.

3. Décrire les données. Une vente peut contenir date, produit, quantité, prix unitaire et montant calculé. Précisez champs obligatoires, unités et erreurs attendues : quantité vide, prix négatif ou produit manquant. Le montant vient d’une multiplication déterministe, pas d’une estimation du modèle. Utilisez uniquement des données fictives pour le prototype d’apprentissage.

4. Donner un cahier des charges testable. Décrivez chaque écran, action et résultat attendu, y compris les états vide, chargement et erreur. Exemple : « Si aucun enregistrement n’existe, afficher zéro et un message explicite. » Demandez une modification ciblée à la fois et testez après chaque changement. Conservez une version stable avant une modification importante lorsque l’outil le permet.

5. Comprendre les limites techniques. Des données conservées dans un navigateur ne sont pas automatiquement disponibles sur un autre appareil. Plusieurs utilisateurs exigent une gestion d’accès et un stockage adaptés. Une interface de chat sans service de génération connecté n’est pas un assistant actif. Ne collez jamais de clé privée dans une page ou un prompt public ; un appel nécessitant un secret doit être protégé côté serveur.

6. Tester avant de partager. Vérifiez calculs, erreurs de saisie, rechargement, affichage sur téléphone et comportement sans connexion. Utilisez des libellés lisibles, des contrastes suffisants et une navigation au clavier. Faites exécuter une tâche à une autre personne sans intervenir. Notez ce qui fonctionne vraiment, ce qui est simulé et ce qui reste à construire. Vérifiez les conditions et coûts de l’outil avant publication.

Cahier des charges BIZNIS AI — démonstration

Construis un prototype pour enregistrer des ventes fictives en HTG. Champs : date, produit, quantité entière positive, prix unitaire positif. Calcule le montant et le total sans IA. Affiche une liste et un état vide. Refuse les valeurs invalides avec une explication. Aucun paiement, aucun compte, aucune donnée réelle. Si le stockage est limité à cet appareil, indique-le. Ajoute un brouillon de synthèse basé uniquement sur les totaux ; s’il n’y a pas d’IA connectée, marque-le comme simulation. Prévois une mise en page utilisable sur téléphone.

Exercice pratique

En 25 minutes, rédigez un cahier des charges pour ce prototype et dessinez deux écrans : saisie et récapitulatif. Si vous avez accès à un outil, construisez et testez une version ; sinon, réalisez une maquette papier. Livrable : cahier des charges, maquette ou lien, et tableau de cinq tests avec entrée, résultat attendu et résultat observé. Ne marquez pas « réussi » un test qui n’a pas été exécuté.

Corrigé proposé de l’exercice

Le périmètre acceptable comprend uniquement les ventes fictives, la liste, les montants et une synthèse prudente. La saisie contient des unités et des validations ; le récapitulatif indique clairement si les données sont locales ou si la synthèse est simulée.

Cinq tests proposés : liste vide → total 0 HTG ; 10 × 250 → montant 2 500 HTG ; quantité −1 → refus ; produit vide → message de validation ; écran étroit → champs et actions lisibles sans débordement. Consignez les résultats réellement observés. Sur papier, indiquez « scénario prévu, non exécuté ».

Un prototype ne prouve pas que les accès, la sauvegarde multiappareil ou les appels IA sont prêts. Le dossier doit nommer ces limites et une prochaine étape. Une correction ciblée de l’erreur de quantité est préférable à une refonte visuelle qui ne résout pas le problème.

Quiz de connaissances

1. Qu’est-ce qu’une version minimale utile ?

2. Comment calculer le montant d’une vente ?

3. Où ne faut-il jamais placer une clé privée ?

4. Des données dans le navigateur sont-elles automatiquement multiappareils ?

5. Que noter pour un test non exécuté ?

À retenir