03 — Mettre en place son environnement — Bac à sable — développer avec un agent IA

@diagram:lesson-contract
duration :: 9 min lecture
deliverable :: Un dossier projet initialisé avec SPEC.md, NOTES.md, Git et règles agent
outcome :: Environnement prêt à accueillir le premier prototype guidé du module 4

Choisir sa stack : les critères de décision pour débutant

Trois questions tranchent le choix. Réponds-y dans l’ordre, et la stack se décide presque seule.

1. Quel est ton niveau d’aisance actuel ?

Tu n’as jamais touché à du code → HTML/CSS/JS vanilla. Un seul fichier pour commencer, aucune config.
Tu as déjà fait du JavaScript ou du React → Vite + React. Plus proche des pratiques pro, structure prête à évoluer.
Tu veux juste tester une idée métier rapidement → HTML/CSS/JS ou un outil no-code comme Bubble ou Glide. L’agent CLI peut générer un prototype Vite directement.

2. Que veux-tu apprendre dans ce parcours ?

Comprendre chaque ligne de code → HTML/CSS/JS simple. Pas de magie, tout est lisible.
Construire quelque chose de plus proche du web moderne → Vite + React. Composants, état local, npm.
Aller vite sur un prototype métier sans se soucier du code → outils no-code ou agent CLI avec template.

3. Quelle est la contrainte de validation ?

Tu peux ouvrir index.html directement → HTML/CSS/JS.
Tu dois lancer npm run dev → Vite + React.
Tu utilises un agent CLI comme Claude Code en autonomie → les deux fonctionnent, mais Vite génère un projet plus structuré.

Recommandation par cas d’usage :

Cas d’usage	Stack recommandée	Raison
Premier prototype, profil non-dev	HTML/CSS/JS vanilla	Zéro friction, tout visible
Apprentissage web moderne	Vite + React	Pratiques professionnelles
Projet à faire évoluer (API, multi-pages)	Vite + React	Structure extensible
Prototype métier rapide	No-code ou agent CLI avec template	Vitesse de validation

Les deux options conviennent au parcours fil rouge. Le module 4 prend Vite + React, mais tu peux suivre chaque concept en HTML/CSS/JS.

Visualiser son environnement de travail

@diagram:vscode-mock

Choisir un environnement simple

Tu peux travailler avec :

VS Code + extension IA si tu veux une interface familière ;
Cursor si tu veux un éditeur orienté IA ;
Claude Code, Codex ou OpenCode en terminal si tu veux déléguer des tâches multi-fichiers ;
un mélange des deux : éditeur pour lire, agent terminal pour exécuter.

Pour ce parcours, le choix recommandé est : éditeur + terminal + Git. L’outil IA vient par-dessus.

Étape 1 — Crée un dossier propre

mkdir fiche-produit-ia
cd fiche-produit-ia

Crée tout de suite deux fichiers de contexte :

touch SPEC.md NOTES.md

NOTES.md reçoit tes décisions au fil de l’eau : stack retenue, contraintes, bugs rencontrés, commandes utiles.

Étape 2 — Vérifie les outils

Lance ces commandes, ou demande à ton agent de les exécuter :

node --version
npm --version
git --version

Node.js absent → installe une version LTS. Avec un agent coding, fais-lui d’abord établir le diagnostic avant qu’il touche à quoi que ce soit :

Vérifie si Node.js, npm et Git sont disponibles. Ne modifie rien sans me dire ce qui manque.

Étape 3 — Initialise Git

Git te garde un point de retour si une version qui marchait casse.

git init
git status

Une fois une première version stable :

git add .
git commit -m "init prototype fiche produit"

Tu n’as jamais utilisé Git ? Retiens une chose : un commit, c’est un point de sauvegarde.

Étape 4 — Choisis une stack minimale

Deux options raisonnables pour le projet fil rouge.

Option A — HTML/CSS/JS simple

Choisis-la pour comprendre chaque fichier.

index.html
style.css
app.js

Option B — Vite + React

Choisis-la pour un projet plus proche des pratiques web modernes.

npm create vite@latest fiche-produit-ia -- --template react
cd fiche-produit-ia
npm install
npm run dev

Pour un premier passage, HTML/CSS/JS suffit. Pour un parcours dev web, Vite + React te resservira davantage.

Étape 5 — Donne des règles à l’agent

Crée AGENTS.md ou CLAUDE.md selon l’outil. Contenu minimal :

# Règles projet

- Lire SPEC.md avant toute modification.
- Ne pas ajouter d'authentification, paiement ou backend sans demande explicite.
- Après modification, indiquer les fichiers changés.
- Fournir la commande de test ou de lancement.
- Préférer du code simple et lisible.
- Si une dépendance est nécessaire, expliquer pourquoi avant installation.

L’agent relit ce fichier à chaque session : tu ne réécris plus les mêmes consignes.

Étape 6 — Premier prompt d’environnement

Lis SPEC.md et AGENTS.md.
Propose une stack minimale pour ce prototype.
Donne l'arborescence des fichiers et les commandes de lancement.
Ne code pas encore.

Tu tranches ensuite entre les options proposées.

Check-list de validation

@diagram:checklist
item-1 :: Tu as un dossier projet dédié.
item-2 :: SPEC.md existe.
item-3 :: NOTES.md existe.
item-4 :: Git est initialisé ou tu sais pourquoi tu ne l'utilises pas.
item-5 :: Tu connais la commande de lancement.
item-6 :: L'agent a des règles écrites dans AGENTS.md ou équivalent.

Pièges fréquents

Travailler dans Téléchargements ou Bureau. Les fichiers se perdent vite.
Installer des outils au hasard. Diagnostique avant d’installer.
Confier les clés API dans le chat sans contrôle. Passe par des variables d’environnement, ne commit jamais un secret.
Oublier Git. Quand l’agent casse quelque chose, un commit propre te rend la version d’avant.

Suite conseillée

Passe au module 4 pour construire la première version du prototype, étape par étape.