Étape 10 · Créer une page web et un petit outil
Créer un petit outil qui te sert vraiment
Suivre cette leçon avec le compagnon dans Claude Code
/formation-ia:suivre m10-l031. À la fin de cette leçon, tu sauras
- Décrire un besoin en une fiche courte : ce que l’outil fait, pour qui, comment on sait qu’il marche.
- Écrire des cas de test avec leur résultat attendu, avant le code.
- Faire construire un mini-outil qui tourne dans ton navigateur, dans un seul fichier.
- Tester l’outil avec tes cas et faire corriger ce qui ne va pas.
2. Pourquoi ça t’intéresse
Chaque été, Thomas part en vacances avec quatre amis. Au retour, c’est la même soirée de calculs sur un coin de nappe : qui a payé l’essence, les courses, la location, et qui doit combien à qui. Une petite page avec quelques cases à remplir et un bouton « Calculer » réglerait ça en deux minutes, sur le téléphone de n’importe qui. Ce genre d’outil, tu peux maintenant le faire toi-même, à condition de bien dire ce qu’il doit faire et de vérifier qu’il le fait.
3. Avant de commencer
| Il te faut | Claude Code, un dossier vide, une idée d’outil tirée de ta vie |
| Coût | Rien de plus que ton abonnement |
| Durée | 45 à 75 minutes |
4. Comprendre en 3 minutes
Un bon petit outil, c’est un besoin précis, des critères clairs et des cas de test écrits avant le code. L’agent écrit le programme ; toi, tu écris l’examen.
Image mentale : tu commandes un meuble sur mesure. Tu ne dis pas au menuisier comment tenir son rabot. Tu lui donnes les dimensions, l’usage, et tu vérifies à la livraison que le tiroir s’ouvre.
Exemples de mini-outils dans le navigateur, sans compte ni installation :
| Outil | Ce qu’il fait |
|---|---|
| Partage de dépenses | Chacun saisit ce qu’il a payé ; l’outil dit qui doit combien à qui. |
| Minuteur | Un compte à rebours pour une séance de sport, un exercice, une cuisson. |
| Liste de courses | Tu coches les repas de la semaine, il regroupe les ingrédients. |
Un cas de test, c’est une situation et le résultat attendu, calculé par toi à la main. Exemple : « 2 personnes, l’une a payé 40 €, l’autre rien : la seconde doit 20 € à la première. »
Garde l’outil dans un seul fichier HTML, sans envoi de données vers internet : ce que tu saisis reste sur ton appareil.
5. Faire ensemble
On prend l’exemple du partage de dépenses. Adapte ensuite à ton idée.
Étape 1 · Écrire la fiche besoin
Dans un nouveau dossier, crée besoin.md :
# Outil : partage de dépenses
Pour qui : moi et mes amis, sur téléphone.
Ce que ça fait : je saisis des noms et ce que chacun a payé ;
l'outil affiche qui doit combien à qui, avec le moins de remboursements possible.
Critères de réussite :
- fonctionne dans un seul fichier index.html, sans connexion ;
- lisible et utilisable sur téléphone ;
- accepte les montants avec virgule (12,50) ;
- affiche un message clair si une saisie est vide ou négative.
Cas de test (résultat attendu calculé à la main) :
1. Léa 60, Hugo 30, Sam 0 -> Sam doit 30 à Léa.
2. Ana 40, Ben 0 -> Ben doit 20 à Ana.
3. Tout le monde a payé 25 -> personne ne doit rien.
4. Montant « 12,50 » -> accepté comme 12,50 €.
Étape 2 · Discuter avant de produire
Lance claude dans le dossier, mode plan (Maj+Tab) :
Lis besoin.md. Avant d'écrire du code, dis-moi :
- comment tu comprends le besoin, en 3 phrases ;
- ce qui est flou ou ce que j'ai oublié (arrondis, nombre de personnes…) ;
- ton plan en 3 étapes.
Complète besoin.md avec tes réponses (par exemple : « arrondir au centime »). Valide le plan.
Étape 3 · Construire
Laisse l’agent faire la première étape, ouvre index.html dans ton navigateur, essaie. Continue étape par étape.
Étape 4 · Passer l’examen
- Déroule toi-même chaque cas de test, dans l’outil, et compare avec le résultat attendu.
- Pour chaque écart, une demande précise :
Cas de test 4 : je saisis « 12,50 » pour Ana, l'outil affiche [ce que tu vois].
Attendu : 12,50 €. Corrige uniquement ce point, puis dis-moi ce que tu as changé.
- Après correction, repasse tous les cas, pas seulement celui qui échouait.
6. Faire toi-même
Choisis un outil utile dans ta vie (un des trois exemples, ou ton idée : convertisseur de recettes, tirage au sort des tâches ménagères, compteur de points pour un jeu de société). Écris sa fiche besoin avec au moins quatre critères et quatre cas de test dont tu as calculé le résultat à la main, dont un cas « bizarre » (saisie vide, zéro, très grand nombre). Fais construire l’outil, puis fais-lui passer tous les cas.
Résultat attendu : un dossier avec besoin.md et index.html ; tous tes cas de test passent, et tu as noté ceux qui ont échoué au début.
7. Vérifier
- Ma fiche besoin contient le public, l’usage, au moins quatre critères et quatre cas de test.
- J’ai calculé les résultats attendus moi-même, avant de lancer l’outil.
- L’outil tient dans un seul fichier et s’ouvre dans le navigateur.
- Tous mes cas de test donnent le résultat attendu.
- Après chaque correction, j’ai repassé tous les cas.
- Pour l’exemple du partage : « Léa 60, Hugo 30, Sam 0 » donne bien « Sam doit 30 € à Léa », et rien pour Hugo.
8. Ce que tu gardes
Garde le modèle de fiche besoin dans ton carnet de bord : besoin, critères, cas de test. C’est la même logique que la vérification du module 3, appliquée à un programme. Note aussi les cas qui ont échoué au premier essai : ce sont ceux que tu penseras à tester la prochaine fois.
9. Pour aller plus loin
- Publie ton outil comme ta page (leçon 2), si tu veux le partager.
- Demande à l’agent d’ajouter dans la page un petit texte « Comment ça marche » pour tes futurs utilisateurs.
Vérifie ta compréhension
3 questions, sans note. L'explication s'affiche après ta réponse.
Pour vérifier par toi-même : code.claude.com, developer.mozilla.org