Un outil local utile

Cette leçon est encore en test : elle s'améliore avec les retours des apprenants. Si quelque chose n'est pas clair, c'est la leçon qu'il faut corriger, pas toi.

À la fin de cette leçon, tu sauras

faire construire un outil à partir de ta spécification ;
comprendre où sont ses données, et ce qui peut les effacer ;
prévoir une sauvegarde que tu peux exporter et réimporter ;
vérifier chaque critère toi-même.

Pourquoi ça t’intéresse

Une page qui affiche des informations, c’est bien. Un outil qui garde tes données d’une fois sur l’autre, c’est ce qui change ton quotidien : un carnet d’emprunts, une liste de suivi, un petit calcul qui revient. Cette leçon le construit en un seul fichier, sans serveur ni compte. Mais un tel outil a une limite qu’il faut connaître avant de lui confier quoi que ce soit : ses données vivent dans ton navigateur.

Avant de commencer


Il te faut	Claude Code (appli ou terminal), en mode Manuel, ta spécification (leçon 1), et un navigateur
Coût	L’abonnement de l’agent : Claude Pro au minimum, 18 € par mois hors taxes en facturation mensuelle, ou 15 € par mois hors taxes avec l’abonnement annuel de 180 € payé d’avance ; prix affichés sur claude.com/pricing au 24/10/2026
Durée	90 minutes
Rappel	Teste avec des données inventées, jamais avec les vraies informations de quelqu’un

Comprendre en 3 minutes

Où sont les données ? Un outil en un seul fichier, sans serveur, garde souvent ses données dans le stockage local du navigateur. D’après MDN (la documentation de référence du web, 24/10/2026), ces données sont conservées entre les sessions du navigateur et n’ont pas de date d’expiration. Mais :

elles sont liées à ce navigateur, sur cet ordinateur : un autre navigateur ou un autre ordinateur montre en principe un outil vide (pour une page ouverte depuis un fichier, le comportement exact dépend du navigateur : lors de notre essai du 28/10/2026, Chrome donnait le même stockage à toutes les pages ouvertes depuis un fichier ; demande donc à l’agent de donner à chacun de tes outils son propre nom de stockage) ;
en navigation privée, elles sont effacées quand le dernier onglet privé est fermé ;
effacer les données de navigation les efface aussi.

D’où la sauvegarde. Un bouton « Exporter » qui enregistre un fichier, un bouton « Importer » qui le recharge. C’est ta copie, à ranger avec tes autres copies (module 5, leçon 6).

Construire, puis vérifier. L’agent construit selon la spécification. Toi, tu vérifies chaque critère de « C’est réussi si », un par un. Demande-lui comment vérifier chacun : c’est une liste d’essais à faire.

Faire ensemble

1Étape 1 : Construire

Dans Claude Code, sur ton dossier de projet, en mode Manuel :

Lis specification.md. Construis la version minimale dans un seul fichier, [nom].html, exactement selon la spécification.
Pas de bibliothèque, rien chargé depuis Internet. Ne crée aucun autre fichier.
Ensuite, dis-moi comment vérifier chaque critère de « C'EST RÉUSSI SI » moi-même, en 1 ligne par critère.

Lors de notre essai du 24/10/2026, pour le carnet d’emprunts du club, l’agent a construit un fichier de 382 lignes, sans bibliothèque, et donné un essai par critère (par exemple : « Notez 3 emprunts et marquez-en 1 « Rendu » : la liste affiche exactement 2 lignes »).

2Étape 2 : Vérifier chaque critère

Ouvre l’outil par un double-clic (leçon 2). Fais chaque essai de la liste, avec des données inventées, et coche.

Lors de notre essai, nous avons fait ces vérifications automatiquement, dans un vrai navigateur (Chromium), en ouvrant le fichier comme par un double-clic : tous les critères ont passé, y compris « aucune requête vers Internet » et un emprunt de 15 jours marqué en retard, et pas celui de 14 jours. Après avoir fermé et relancé le navigateur, les emprunts étaient toujours là.

3Étape 3 : La sauvegarde, pour de vrai

Clique sur Exporter : un fichier .json arrive dans ton dossier de téléchargements (ou ton navigateur te demande où l’enregistrer, selon son réglage).
Range-le dans ton dossier de copies.
Pour t’entraîner : ouvre l’outil dans un autre navigateur (le carnet y est vide), puis Importe le fichier. Tout doit revenir. Sans second navigateur : supprime tes emprunts d’essai un par un, avec le bouton de suppression de ton outil, puis importe le fichier. N’efface pas pour cela les données de navigation de tout ton navigateur : cela efface aussi les cookies et les données des autres sites.

Lors de notre essai, l’effacement a été fait par un script de test : 2 emprunts, puis 0 après effacement, puis de nouveau 2 après l’import.

4Étape 4 : Comprendre l’outil

Explique-moi [nom].html en 6 lignes, sans jargon : où sont enregistrées les données, ce qui se passe quand je clique sur chaque bouton, et ce qui pourrait effacer les données. Ne modifie rien.

Pour comparer avec un résultat déjà fait, tu peux ouvrir l’exemple du carnet d’emprunts (ressources) : c’est l’outil construit lors de notre essai.

Faire toi-même

Fais construire ton outil à partir de ta spécification.
Vérifie chaque critère, avec des données inventées, et coche-les dans la spécification.
Fais un export, range-le, et entraîne-toi à le réimporter.
Note dans ton journal : où sont les données, et comment les sauvegarder.

Ressources à télécharger

Exemple : le carnet d’emprunts du club : l’outil construit lors de notre essai (données inventées, rien chargé depuis Internet).

Vérifier

C’est réussi si :

l’outil s’ouvre par un double-clic et respecte chaque critère de ta spécification ;
tu as vérifié chaque critère toi-même, avec des données inventées ;
un export, puis un import, rendent toutes les données ;
tu sais dire ce qui peut effacer les données de l’outil.

Erreurs fréquentes :

croire l’agent quand il dit « tout marche », sans vérifier ;
tester avec les vraies données de quelqu’un ;
utiliser l’outil en navigation privée, et tout perdre en fermant ;
ne jamais exporter de sauvegarde.

Conserver et reprendre

Exporte une sauvegarde à chaque séance d’utilisation importante, et range-la avec tes copies.
Enregistre une version de l’outil qui marche (leçon 5).

Pour aller plus loin

facultatif

Un outil partagé entre plusieurs personnes (chacune voit les mêmes données) demande un serveur et une base de données : c’est un autre niveau, avec des coûts, des comptes et des données personnelles à protéger. Commence toujours par la version locale.

Mots nouveaux

4 mots expliqués

Mot	Ce que ça veut dire
Stockage local	L’espace où le navigateur garde les données d’une page, sur ton ordinateur
Exporter	Enregistrer les données de l’outil dans un fichier
Importer	Recharger les données depuis ce fichier
Données inventées	Des exemples sans rapport avec de vraies personnes, pour tester

La construction et les vérifications des étapes 1 à 3 ont été jouées réellement avec Claude Code 2.1.310, puis dans Chromium sans écran (rapport de tests, T54). Les séances d’essai avec Claude Code ont été jouées en mode non interactif (claude -p), une seule fois chacune : ce que tu verras peut différer (demandes d’autorisation, formulation, nombre de questions). La persistance après relance du navigateur a aussi été vérifiée dans WebKit, le moteur de Safari (T64). À vérifier : l’outil n’a pas été essayé dans Safari lui-même, ni dans Firefox ni Edge ; d’après MDN, le stockage local peut poser problème quand la page est ouverte depuis un fichier, selon le navigateur.