Aller au contenu
Version de test La formation s'écrit au fur et à mesure : tes retours comptent.
Autivia Formation

Étape 10 · Créer une page web et un petit outil

Créer un petit outil qui te sert vraiment

  • 45 à 75 min
  • 0 € de plus (abonnement de l'agent déjà en place)
  • Leçon 3 sur 7
  • Relue le 26 octobre 2026
Suivre cette leçon avec le compagnon dans Claude Code
/formation-ia:suivre m10-l03

1. À 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 fautClaude Code, un dossier vide, une idée d’outil tirée de ta vie
CoûtRien de plus que ton abonnement
Durée45 à 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 :

OutilCe qu’il fait
Partage de dépensesChacun saisit ce qu’il a payé ; l’outil dit qui doit combien à qui.
MinuteurUn compte à rebours pour une séance de sport, un exercice, une cuisson.
Liste de coursesTu 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

  1. Déroule toi-même chaque cas de test, dans l’outil, et compare avec le résultat attendu.
  2. 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é.
  1. 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.

1Que faut-il écrire AVANT de demander à l'agent de coder ton outil ?
2Trois amis : Léa a payé 60 €, Hugo 30 €, Sam rien. Que doit afficher une calculatrice de partage correcte ?
3Tu entres « 12,50 » et l'outil affiche un résultat absurde. Qu'est-ce que ça t'apprend ?

Pour vérifier par toi-même : code.claude.com, developer.mozilla.org

Fin de la leçon