// Auto-formation

Agents IA de développement 🚀

Prise en main un assistant de code agentique puis construire un site, une PWA et comprendre le chemin jusqu'à la mise en production

🧩 débutant accompagné ⏱️ ~1h15 (Parties 1 à 3) 🎯 Site + PWA déployable

Pour s'initier au développement avec un agent IA sans rester dans la démo magique. Les exercices utilisent Claude Code pour rester concrets, mais les réflexes appris — prompt, contexte, diff, validation, tests — peuvent s'appliquer aussi à Codex, Gemini, Cursor, Copilot...

🎯 À la fin, vous saurez

  • expliquer la différence entre autocomplétion et agent de code ;
  • demander une modification claire à un assistant de code ;
  • lire un diff avant validation ;
  • créer un petit site, puis une PWA installable ;
  • identifier les points de vigilance : sécurité, coût, contexte.

🧰 Avant de commencer

  • un ordinateur Windows, macOS ou Linux avec VS Code ;
  • un assistant agentique installé : Claude Code pour suivre exactement le pas à pas, ou un équivalent (Codex/Gemini/Cursor...) ;
  • une licence Claude Pro (~20 €/mois) — le compte gratuit ne donne pas accès à Claude Code ; Pro suffit largement pour ce cours (à défaut : Max, ou une clé API en pay-as-you-go) ;
  • Node.js 18+ — facultatif pour installer Claude Code (l'installeur natif suffit), mais nécessaire pour le cas pratique (Firebase CLI, Vite, npm) ;
  • un compte Firebase pour aller jusqu'au déploiement ;
  • comptez ~1 h pour la formation (Parties 1 à 3) ; les Parties 4 à 7 sont des mémos à garder pour plus tard, hors temps.
🧭 Comment suivre ce cours

Le parcours court vous donne les fondamentaux et une première PWA. Les commandes affichées sont celles de Claude Code, mais chaque fois que vous voyez « l'agent », pensez « votre assistant de développement ». Les blocs Pour aller plus loin, Firebase, sécurité et liens utiles sont des bonus à faire ensuite, ou à garder comme référence.

🎨 Code couleur des encarts (pour s'y repérer) :

Violet — pédagogie Vert — réalisation Orange — à surveiller Rouge — sécurité

// Partie 01

🗺️Vue d'ensemble⏱️ ~3 min de lecture

Avant de plonger, voici la carte du cours : les 7 étapes, leur durée et ce que chacune vous apporte. Survolez-la maintenant, et revenez-y si vous vous perdez. Le détail vient juste après (Partie 02).

#ÉtapeTempsTypeCe que vous y gagnez
1Comprendre les agents IA de développement cœur4 minLectureComprendre en quoi c'est différent de l'autocomplétion classique
2Installation & branchement à VS Code — exemple Claude Code cœur8 minPratiqueMettre en place un environnement concret et vérifier qu'il fonctionne
3Les 5 fondamentaux d'interaction cœur6 minLecture + essaiApprendre le vocabulaire pour piloter l'outil
4Construire un site web de zéro cœur8 minPratiqueVoir l'agent lire, créer, modifier, et un diff à valider
5Transformer le site en PWA installable cœur6 minPratiqueComprendre les briques d'une app mobile web
6Cas Firebase, règles et déploiement bonus guidé25 minCas pratiqueComprendre le chemin vers une vraie mise en production
7Bonnes pratiques, limites, consommation et auto-évaluation référence10 minLectureAdopter un usage sain, lucide et durable
💡 Conseil

Installez d'abord tout le nécessaire (étape 2) et gardez VS Code et un terminal ouverts. Une fois l'environnement prêt, vous enchaînez les fondamentaux et la pratique sans accroc.

🧵 Fil rouge

Pour voir tout ça sur un projet réel — du démarrage du PC jusqu'à la prod —, la partie 3 déroule un cas concret : une app de location/vente de trottinettes déployée sur Firebase. Claude Code sert ici de véhicule pédagogique, mais la méthode reste valable avec d'autres agents.

✅ Point de contrôle avant de continuer

Vous savez ce que vous allez produire : un premier site, une version PWA, puis éventuellement un déploiement Firebase. Si vous manquez de temps, faites les étapes marquées cœur et revenez aux bonus plus tard.

🔭 Pour aller plus loin

Optionnel — ressources à consulter après le parcours court

  • Cours officiel gratuit « Claude Code in Action » (Anthropic Academy, certificat à la clé) : un parcours pas-à-pas pour passer de l'intro à un usage réel, structuré autour du workflow Explore → Plan → Code → Commit. → anthropic.skilljar.com
  • Anthropic Academy : catalogue de cours gratuits et self-paced (Claude Code 101, Introduction aux sous-agents, MCP…), accessibles sur simple inscription e-mail. → anthropic.skilljar.com
  • Best practices Claude Code : les patterns recommandés par Anthropic pour bien configurer son environnement et passer à l'échelle (sessions parallèles, CLAUDE.md, etc.). → code.claude.com/docs
  • Guide de prompt engineering : la compétence qui fait toute la différence avec un agent — apprendre à formuler des prompts précis et contraints. → docs.claude.com

// Partie 02

🎬Le tutoriel pas à pas⏱️ ~30 min

1️⃣ Comprendre les agents IA de développement (4 min)

🎯 L’idée clé en une phrase

« Un assistant agentique de développement n'est pas une autocomplétion intelligente ligne par ligne. C'est un agent qui peut comprendre un projet, lire des fichiers, proposer ou appliquer des modifications, lancer des commandes selon ses permissions, puis vous présenter un résultat que vous validez. »

La distinction clé à comprendre (souvent confondue) :

Où vit l'agent ? Selon l'outil, il peut vivre dans un terminal, une extension VS Code, un éditeur dédié ou une interface web. Dans ce cours, l'exemple principal est Claude Code : un CLI relié à VS Code via une extension. Avec Codex, Gemini, Cursor ou Copilot, l'interface change, mais les gestes essentiels restent les mêmes.

🧠 Analogie

« Pensez à un développeur junior très rapide et infatigable à qui vous donnez des tâches. Il fait le travail, vous montre son diff, et c'est vous qui faites la code review et qui validez. Vous restez le tech lead. »

📝 Vous décrivez une intention claire : le prompt
🤖 L'agent agit lit, planifie, modifie, lance des commandes
🔍 Il présente un diff ce qu'il propose de changer
Vous validez accepter, corriger ou refuser
↻  On recommence — vous gardez la main à chaque tour
La boucle agentique : une intention en entrée, du code que vous validez en sortie.

Ce qui est transférable d'un assistant à l'autre

Compétence durableDans ce cours avec Claude CodeAvec Codex, Gemini, Cursor, Copilot...
Donner une intention clairePrompt dans le panneau Claude Code ou le terminalMême logique : objectif, contexte, contraintes, critères de réussite
Limiter le contexte@fichier, CLAUDE.md, /contextFichiers attachés, contexte de workspace, règles de projet ou instructions persistantes
Valider les changementsDiff proposé par l'extension, acceptation ou révisionDiff Git, patch, aperçu d'édition ou pull request générée
Travailler par étapesPrompt court, checkpoint, nouvelle demandeMême discipline : petites tâches, tests fréquents, commits réguliers
Tester le résultatL'agent peut proposer ou lancer des commandesLe principe reste humain : vérifier, tester, lire les erreurs, demander une correction ciblée

2️⃣ Installation & branchement à VS Code — exemple Claude Code (8 min)

Pour que le cours reste actionnable, le pas à pas utilise Claude Code. Si vous utilisez Codex, Gemini ou un autre assistant, gardez la même logique et remplacez simplement les commandes et menus par ceux de votre outil.

💳 Bon à savoir

Claude Code est un outil payant : abonnement Claude (Pro 20 $/mois, Max 100/200 $/mois, Team, Enterprise) ou crédits API. ⚠️ Le compte Claude gratuit ne suffit pas — il faut au minimum Pro (le palier suffisant pour ce cours) ; Max ne se justifie que pour un usage quotidien intensif. Pour seulement expérimenter, une clé API en pay-as-you-go (quelques centimes d'usage réel) fait aussi l'affaire.

Installer le CLI — deux méthodes à lancer depuis le terminal VS Code (page officielle : claude.com/download)

méthode 1 [Recommandé] — installeur natif (aucune dépendance)
# Windows 11 — PowerShell (clic droit sur Démarrer → Terminal)
PS> irm https://claude.ai/install.ps1 | iex

# (Mac/Linux, pour info :  curl -fsSL https://claude.ai/install.sh | bash)
méthode 2 — via npm (nécessite Node.js 18+)
PS> npm install -g @anthropic-ai/claude-code
⚠️ Pièges classiques (Windows 11)

1. La commande est refusée ? Windows bloque par défaut l'exécution des scripts PowerShell. Autorisez-les pour votre compte en lançant une fois : Set-ExecutionPolicy -Scope CurrentUser RemoteSigned, puis relancez l'installation.
2. claude n'est « pas reconnu » après l'installation ? Le PATH n'est pas encore à jour : fermez puis rouvrez le terminal (voire VS Code).
3. En cas de doute : claude doctor diagnostique l'installation.

vérifier que ça marche
PS> claude --version   # affiche un numéro de version
PS> claude doctor      # diagnostic de l'installation
✅ Point de contrôle installation

Vous pouvez continuer avec Claude Code si claude --version affiche un numéro de version et si claude doctor ne remonte pas d'erreur bloquante. Avec un autre assistant, l'équivalent est simple : il doit être connecté, voir votre dossier projet, pouvoir proposer des modifications et vous montrer un diff.

L'extension VS Code

  1. Ouvrez VS Code (version 1.98.0 ou supérieure).
  2. Dans le panneau Extensions (Ctrl+Shift+X), cherchez « Claude Code » et installez celle de l'éditeur anthropic (lien direct Marketplace). Le CLI doit être installé au préalable : l'extension l'enrobe.
  3. Lancez-la : icône étincelle ✱ en haut à droite quand un fichier est ouvert, ou Palette Ctrl+Shift+P → « Claude Code ».
  4. À la première connexion, un onglet navigateur s'ouvre pour vous authentifier avec votre compte Anthropic. (Variante : définir ANTHROPIC_API_KEY et lancer VS Code via code ..)
⌨️ Astuce de confort

Dans une session, taper /terminal-setup active Shift+Entrée pour aller à la ligne (au lieu d'envoyer le message) — indispensable pour les prompts multi-lignes.

3️⃣ Les 5 fondamentaux d'interaction (6 min)

Cinq notions suffisent pour piloter l'outil :

➡️ À vous de jouer

Avec ces cinq notions — prompt clair, contexte ciblé, mémoire de projet, diff, checkpoint — vous savez déjà piloter un agent de développement. Le reste, c'est de la pratique : passons-y.

✅ Point de contrôle compréhension

Avant la pratique, formulez mentalement une demande en trois morceaux : objectif, contraintes, critères de réussite. C'est ce qui transforme une demande vague en instruction exploitable.

4️⃣ Construire un site web de zéro (8 min)

Ouvrez un dossier vide dans VS Code, puis votre assistant de code. Dans le parcours Claude Code, ouvrez le panneau Claude Code. Saisissez ce premier prompt :

Prompt 1 — générer la structure
Crée un petit site vitrine pour un café fictif "Café Latitude".
Stack : HTML, CSS et JavaScript vanilla, sans framework.
Sections : header avec navigation, hero avec titre + bouton,
section menu avec 3 produits, et un footer.
Design responsive et propre. Mets le CSS dans un fichier séparé.

Pendant que l'agent travaille, observez : il peut annoncer un plan avant d'agir, puis créer les fichiers (index.html, style.css, script.js). Ouvrez le diff pour lire ce qu'il propose (c'est votre code review), acceptez, puis ouvrez la page dans le navigateur.

Prompt 2 — itération ciblée
Bien. Maintenant rends le header collant au scroll, ajoute un effet
de survol sur les cartes du menu, et passe la palette en tons
chauds (brun/crème).
📌 Le point clé

La qualité du résultat est proportionnelle à la qualité du prompt : vague → générique, précis et contraint → exploitable. Soigner son prompt est le réflexe n°1 à acquérir.

🐞 Si vous tombez sur un bug

Dites-le simplement : « il y a un bug, le menu déborde sur mobile, corrige-le ». L'agent lit, diagnostique et propose un correctif. À retenir : l'agent se trompe parfois — d'où l'importance de relire le diff et de tester.

✅ Point de contrôle site web

Vous devez avoir au minimum trois fichiers, une page qui s'ouvre dans le navigateur, un affichage correct sur mobile, et au moins une itération acceptée après lecture du diff.

5️⃣ Transformer le site en PWA installable (6 min)

📱 C'est quoi une PWA ? (3 briques à connaître)

Une PWA (Progressive Web App) est un site web qui s'installe sur le téléphone et se comporte comme une app native. Trois ingrédients :

  • 📄 Un manifeste (manifest.json) : nom, icônes, couleurs, display: standalone. → rend l'app « installable ».
  • ⚙️ Un service worker : script en arrière-plan qui intercepte le réseau et met en cache → hors-ligne + démarrage rapide.
  • 🔒 HTTPS : obligatoire (sauf localhost). Pas de service worker sans contexte sécurisé.
📄 Manifeste nom, icônes, couleurs → installable
⚙️ Service worker cache → hors-ligne + démarrage rapide
🔒 HTTPS connexion sécurisée (obligatoire)
📱 PWA installable & marche hors-ligne
Trois briques qui s'additionnent : un simple site devient une app installable.
Prompt — laisser l'agent faire le travail
Transforme ce site en PWA installable.
- Crée un manifest.json (nom, nom court, couleur de thème,
  display standalone) et lie-le dans le HTML.
- Génère un service worker qui met en cache les fichiers statiques
  pour un fonctionnement hors-ligne, et enregistre-le dans script.js.
- Ajoute les meta nécessaires (theme-color, viewport, apple-touch-icon).
Explique-moi à la fin comment tester l'installabilité.

Après avoir accepté le diff, vérifiez : le nouveau manifest.json et service-worker.js ; dans les DevTools → onglet Application (Manifest reconnu, Service Worker « activated ») ; et l'icône d'installation dans la barre d'adresse.

✨ Effet « waouh » garanti

DevTools → Network → Offline, puis rechargez : la page se charge toujours. Vous venez de voir qu'« app mobile » ≠ forcément Swift/Kotlin/React Native — une PWA bien faite s'installe, marche hors-ligne, et part d'un simple site.

✅ Point de contrôle PWA

Vous pouvez cocher l'étape si le manifeste est détecté, le service worker est actif, la page reste disponible hors-ligne sur localhost, et le navigateur propose l'installation.

6️⃣ Bonnes pratiques, limites & pour aller plus loin (2 min)

✅ Bonnes pratiques
  • Toujours lire le diff. L'outil accélère, il ne dispense pas de comprendre.
  • Travailler sous Git. Committez avant les grosses tâches ; les checkpoints complètent, ne remplacent pas.
  • Découper. Une grosse demande mal cadrée échoue ; une série de petites tâches réussit.
  • Une mémoire projet courte pour fixer stack et conventions une fois pour toutes : CLAUDE.md avec Claude Code, fichier d'instructions ou règles de workspace avec d'autres assistants.
🚧 Limites à garder en tête
  • L'agent peut se tromper, inventer une API, produire du code qui « a l'air » correct. La responsabilité reste humaine.
  • Outils souvent payants qui peuvent envoyer du code à un service externe. Vérifiez les règles de confidentialité, surtout sur les projets sensibles.
  • Il ne remplace pas la compréhension des fondamentaux — il l'amplifie.
🔭 Ouvertures
  • Connecter des serveurs MCP pour donner à l'agent l'accès à des outils externes (bases, API…).
  • Le mode headless (claude -p "…") pour scripter dans des hooks Git ou pipelines CI/CD.
  • Doc officielle : docs.claude.com/en/docs/claude-code/overview

🔭 Concepts avancés Claude Code

Optionnel — à ouvrir seulement si vous voulez aller au-delà de l'initiation

  • Vue d'ensemble — skills, sous-agents, hooks, MCP, plugins : quand utiliser quoi. → docs
  • Skills & slash commands — instructions et raccourcis réutilisables (.claude/) pour industrialiser des workflows récurrents. → docs
  • Sous-agents — instances spécialisées avec leur propre contexte, pour déléguer une sous-tâche sans polluer la conversation. → cours
  • Hooks — lancer un script à un moment précis (avant/après édition, fin de tâche) pour brancher lint, tests ou garde-fous. → docs
  • MCP — le standard ouvert qui connecte l'agent à des outils externes (GitHub, bases, API). → docs · site
  • Permissions & modesallow-list de commandes, plan mode, auto mode pour réduire les confirmations. → docs
  • Mémoire & contexteCLAUDE.md hiérarchique, compaction (/compact) et checkpoints. → Mémoire · Checkpoints
  • Mode headless & Agent SDK — piloter Claude Code par script (claude -p "…") pour hooks Git ou CI/CD. → docs

// Partie 03

🛴Cas pratique de bout en bout⏱️ ~25 min

🎙️ Le scénario fil rouge

« J'allume mon PC, je veux faire une app web pour téléphone — de la location et vente de trottinettes. Qu'est-ce que j'installe ? Comment je maquette les écrans ? Comment je commence à coder ? Et comment je déploie une version de prod, sachant que côté back j'ai choisi Firebase ? » — un parcours linéaire en 4 étapes.

Version courte

Firebase est proposé ici parce qu'il évite de gérer un serveur : authentification, base de données, hébergement HTTPS et règles de sécurité sont fournis comme services managés. Pour suivre le cœur du cours, retenez simplement : front PWA + Firebase = chemin rapide vers une app publiable.

🔌 Firebase est un exemple, pas une obligation

On choisit Firebase ici parce que c'est un écosystème gratuit, idéal pour un premier projet. Mais comme pour l'assistant, seul le back change : le front PWA et les réflexes d'agent restent identiques. Vous pouvez héberger ailleurs — Supabase, Vercel/Netlify, Azure — et, pour les profils métier, sur l'écosystème Power Platform (piloté depuis VS Code). Détails en fin de cas pratique : « Et si le back n'est pas Firebase ? ».

💚 Pourquoi Firebase pour un projet modeste ?

Optionnel — utile pour la prod, pas indispensable pour comprendre les agents IA

Firebase est un back « clé en main » (BaaS, Backend as a Service) édité par Google : au lieu d'installer et de maintenir un serveur, vous assemblez des briques managées. Pour notre app, les briques utiles sont :

  • 🔐 Authentication — comptes & connexion (e-mail, Google…), sans gérer de mots de passe vous-même.
  • 🗄️ Firestore — base de données NoSQL temps réel (les trottinettes, les locations).
  • 🖼️ Cloud Storage — fichiers volumineux (photos des trottinettes).
  • 🚀 Hosting — déploiement du front en HTTPS sur un CDN mondial (parfait pour une PWA).
  • ⚙️ Cloud Functions — un peu de logique côté serveur, à la demande (paiement, e-mails…), sans serveur permanent.
  • 🔔 Cloud Messaging (FCM) — notifications push. 🛡️ App Check — anti-abus. 📊 Analytics / Crashlytics — mesure & crashs.

L'intérêt financier, en 3 points :

  • ~0 €/mois tant que le trafic reste modeste : on reste dans les quotas gratuits.
  • Pas de coût fixe : le modèle est serverless — aucune machine ne tourne 24 h/24, vous ne payez qu'à l'usage réel.
  • Le gratuit déduit en premier sur le plan Blaze : une petite app paie quelques centimes, pas des dizaines d'euros.

📊 Voir les quotas gratuits chiffrés

Référence — chiffres indicatifs, voir la page officielle pour l'à-jour

ServiceInclus gratuitement
Firestore~50 000 lectures/jour · 20 000 écritures · 20 000 suppressions · 1 Gio stockés
Authentication50 000 utilisateurs actifs/mois (e-mail, Google…)
Hosting10 Go stockés + bande passante incluse · HTTPS + CDN
Cloud Functions2 M d'invocations/mois
Cloud Messaginggratuit, illimité

⚠️ Changements récents à connaître : Cloud Storage n'est plus inclus dans le plan gratuit Spark — il faut le plan Blaze (qui offre tout de même ~5 Go gratuits). Et Blaze n'a pas de plafond « dur » : d'où l'importance des alertes de budget (voir Étape 0). Pour des quotas chiffrés à jour, voir firebase.google.com/pricing.

ÉTAPE 0

🖥️ « J'allume mon PC » : qu'est-ce que j'installe ?

Cinq outils à installer (commandes winget recommandées sur Windows ; sinon, lien de téléchargement) :

OutilInstallerÀ quoi ça sert
VS Code winget install Microsoft.VisualStudioCode
téléchargement
L'éditeur de code
Node.js 18+ winget install OpenJS.NodeJS.LTS
téléchargement · vérif : node --version
Fait tourner les outils de dev (npm, Vite…)
Git winget install Git.Git
téléchargement · vérif : git --version
Historique & versions du code
Assistant agentique
(Claude Code ici)
irm https://claude.ai/install.ps1 | iex ou claude.com/download
+ extension anthropic.claude-code
L'agent de dev. Codex, Gemini, Cursor, Copilot fonctionnent pareil : vérifiez qu'il voit le dossier projet.
Firebase CLI Voir le bloc ci-dessous · doc Piloter Firebase depuis le terminal
installer & connecter Firebase CLI
PS> npm install -g firebase-tools
PS> firebase login          # connexion au compte Google (navigateur)
PS> firebase projects:list  # vérifie la connexion

Enfin, créez un projet Firebase (console.firebase.google.com) sur le plan Blaze, avec des alertes de budget configurées, et activez-y Authentication, Firestore (et éventuellement Storage). Pourquoi Blaze et comment le garder sous contrôle : voir juste en dessous.

💰 Bon à savoir sur Blaze

Dans Google Cloud, un budget = une alerte (notification e-mail à 50/90/100 %) mais ne coupe pas la facturation. Un vrai plafond « dur » demande un mécanisme en plus (Cloud Function déclenchée par l'alerte qui désactive la facturation). Pour un projet pédagogique, des alertes basses + des règles Firestore strictes suffisent à garder le contrôle.

💡 Astuce

Déléguez une partie de la mise en route à votre assistant : « Vérifie que Node, Git et Firebase CLI sont installés et dis-moi ce qui manque avec les commandes pour corriger. »

ÉTAPE 1

🎨 « Comment je maquette mes écrans ? »

D'abord, lister les écrans : accueil/carte des trottinettes dispo, liste/recherche, fiche d'une trottinette, location ou achat, panier/paiement, connexion, profil/mes locations.

Deux approches :

  • [Recommandé] Rapide, dans VS Code : demandez à votre assistant un prototype HTML/CSS cliquable mobile-first. La maquette est déjà du code : la transition vers le vrai développement est naturelle.
  • 🖌️ Plus visuel : utilisez un outil de design ou de maquette IA, puis faites le handoff vers votre assistant de code pour transformer les écrans en composants.
Prompt — maquette cliquable
Crée une maquette cliquable mobile-first (HTML + CSS, sans framework)
pour une app de location et vente de trottinettes. Un fichier HTML
par écran : accueil avec liste (carte + bouton "Louer"/"Acheter"),
fiche détaillée, écran de réservation, connexion, et profil
"mes locations". Relie les écrans par des liens. Données fictives
en dur. Style épuré, palette verte.
📌 Le point clé

Vous maquettez pour valider les écrans et la navigation avant de coder la logique. La maquette est jetable ou recyclable, mais elle évite de coder dans le flou.

ÉTAPE 2

⌨️ « Comment je commence à coder ? »

Stack : un front PWA[Recommandé] React + Vite, ou vanilla pour rester très simple — qui parle à Firebase (Auth + Firestore). Pas de serveur à écrire : Firebase est le back.

Prompt — initialiser le projet
Initialise un projet React avec Vite configuré en PWA (manifeste +
service worker). Installe et configure le SDK Firebase (Auth et
Firestore). Crée un firebase.js qui lit les clés depuis des variables
d'environnement (.env), et NE commite pas le .env (ajoute-le au
.gitignore). Crée une structure claire : pages, composants, services.

Poser les règles de projet : stack imposée (React + Vite + Firebase), conventions, « les écrans s'inspirent des maquettes du dossier /maquettes ». Avec Claude Code, placez ces règles dans CLAUDE.md ; avec un autre assistant, utilisez son fichier d'instructions ou ses règles de workspace.

Prompt — construire un écran depuis la maquette
À partir de @maquettes/accueil.html, code la page d'accueil React :
récupère la liste des trottinettes depuis la collection "scooters"
de Firestore et affiche-les en cartes. Ajoute un état de chargement
et un cas "aucune trottinette".

Puis vous itérez : connexion (Firebase Auth), fiche détaillée, réservation (écriture dans rentals)… À chaque étape : lisez le diff, testez en local (npm run dev), corrigez.

🔑 Réflexe sécurité

Avancez par petites tâches cadrées, pas « code-moi toute l'app ». Et les clés Firebase vont dans .env, jamais dans un commit — bonne occasion de parler secrets et .gitignore.

ÉTAPE 3

🚀 « Comment je déploie une version de prod ? »

Pour une PWA (front statique + services Firebase), Firebase Hosting [Recommandé] est le bon choix : il sert tout en HTTPS depuis un CDN mondial — et le HTTPS est justement requis par une PWA. (L'alternative App Hosting est évoquée plus bas.)

déploiement, étape par étape
# 1. Construire la version de prod (Vite → dossier dist/)
PS> npm run build

# 2. Initialiser l'hébergement (une seule fois)
PS> firebase init hosting
#    → projet : votre projet Firebase
#    → dossier public : dist
#    → single-page app : OUI (réécrit les routes vers index.html)
#    crée firebase.json (config) et .firebaserc (alias)

# 3. Déployer
PS> firebase deploy --only hosting
#    → en ligne sur votreprojet.web.app + .firebaseapp.com

🔐 Règles de sécurité Firestore (le garde-fou le plus oublié)

Exemple concret pour l'app trottinettes :

firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // Catalogue : lecture publique, écriture client interdite
    match /scooters/{scooterId} {
      allow read:  if true;
      allow write: if false;
    }

    // Locations : chacun ne gère QUE les siennes
    match /rentals/{rentalId} {
      allow read:   if request.auth != null
                    && resource.data.userId == request.auth.uid;
      allow create: if request.auth != null
                    && request.resource.data.userId == request.auth.uid;
      allow update, delete: if request.auth != null
                    && resource.data.userId == request.auth.uid;
    }
  }
}

Lecture des trottinettes publique (read: if true), mais écriture bloquée côté client (write: if false) — pas question qu'un utilisateur invente des trottinettes. Pour les locations, request.auth.uid garantit qu'on ne touche que ses propres documents. On déploie avec :

déployer les règles
PS> firebase deploy --only firestore:rules
🛡️ Le double bénéfice à souligner

Ces règles protègent les données (pas de fuite ni de modification non autorisée) et le budget : une base ouverte en écriture, c'est la porte ouverte à l'abus et aux coûts qui s'envolent — bien plus que l'hébergement lui-même.

🧪 Tester avant de publier

Firebase fournit un émulateur local qui sert l'app à une URL locale (souvent localhost:5000), et des URL de prévisualisation temporaires pour partager ses changements avant le live.

🏗️ En option : App Hosting

Comme on est sur Blaze, l'option App Hosting (full-stack, rendu serveur) est disponible si besoin. Mais pour cette app — PWA front + Firebase Auth/Firestore — Hosting classique reste plus simple et largement suffisant.

🧰 Installer VS Code + agent + Firebase CLI
🎨 Maquetter les écrans, cliquables
⌨️ Coder écran par écran (PWA + Firebase)
📦 Construire npm run build
🚀 Déployer firebase deploy → en ligne
Une intention de départ : une app installable en prod à l'arrivée.
🧭 Le résumé du parcours

Installer (VS Code + assistant agentique + Firebase CLI)Maquetter les écransScaffolder + coder écran par écran (PWA + Firebase)npm run buildfirebase deploy. Une intention de départ, une app installable en prod à l'arrivée.

🔌 Et si le back n'est pas Firebase ?

Firebase n'est qu'un des écosystèmes possibles. Ce qui ne change pas : décrire une intention à l'agent, lire le diff, tester, déployer via un CLI. Ce qui change : le service de back et sa commande de déploiement. Le même réflexe « l'agent pilote le CLI à ma place » vaut pour Supabase, Vercel/Netlify, Azure… et pour Power Platform.

🏢 Cas particulier : héberger côté Power Platform (profils métier)

Optionnel — pertinent si vous travaillez dans l'écosystème Microsoft / Dataverse

Pour les organisations déjà sous Microsoft 365 / Dataverse, le back « clé en main » peut être Power Platform plutôt que Firebase : données dans Dataverse, authentification Microsoft Entra ID, et hébergement de l'app dans l'environnement Power Platform. Et tout se pilote depuis VS Code, donc avec le même assistant agentique que dans ce cours.

BriqueDans ce cours (Firebase)Équivalent Power Platform
Base de donnéesFirestoreDataverse
AuthentificationFirebase AuthMicrosoft Entra ID
Hébergement du frontFirebase HostingPower Apps (Code Apps) dans l'environnement
CLI de pilotagefirebasepac (Power Platform CLI)
Outillage VS CodeFirebase CLI + extensionsExtension Power Platform Tools

Le geste reste identique : au lieu de demander à l'agent de lancer firebase deploy, vous lui faites piloter pac (authentification, push d'une solution, déploiement d'une Code App). La maquette, la PWA et la discipline de prompt/diff/test ne bougent pas.

  • Extension Power Platform Tools (VS Code) — connexion aux environnements, exploration Dataverse, commandes pac intégrées. → Marketplace
  • Power Platform CLI (pac) — l'équivalent du Firebase CLI pour authentifier, créer et déployer. → Doc Microsoft
  • Power Apps Code Apps — héberger une app web (front moderne) dans Power Platform. → Power Apps for developers
💡 Pour aller plus loin avec un agent

Comme pour Firebase, des skills dédiées peuvent outiller l'agent sur ce parcours (setup, scaffolding, données, déploiement Power Platform) — pratique pour transformer ces étapes en commandes répétables.

🔭 Approfondir PWA + Firebase

Optionnel — ressources à explorer après la pratique

  • Cours « Learn PWA » (web.dev) : un cours gratuit et complet pour vraiment comprendre manifeste, service workers, cache et installabilité. → web.dev/learn/pwa
  • vite-plugin-pwa : génère le manifeste et le service worker (via Workbox) automatiquement, au lieu de tout écrire à la main. → vite-pwa-org.netlify.app
  • Service workers en profondeur : cycle de vie, stratégies de cache, mises à jour. → MDN · Workbox
  • Firestore avancé : modélisation des données et persistance hors-ligne pour une vraie expérience offline. → Modèle de données · Mode hors-ligne
  • Authentification : connexion Google ou e-mail/mot de passe + protection des routes selon l'état de connexion. → Firebase Auth (web)
  • Règles de sécurité testées : écrire des tests automatisés sur ses règles Firestore avec l'émulateur. → Tester les règles
  • App Check : bloquer les appels de clients illégitimes — protège les données et le budget. → App Check
  • Déploiement automatique (CI/CD) : publier à chaque push via l'intégration GitHub de Firebase. → Hosting + GitHub
  • Notifications push : Firebase Cloud Messaging côté web (« votre trottinette est réservée »). → FCM (web)
  • Carte & géoloc : afficher les trottinettes sur une carte avec la position de l'utilisateur. → Leaflet [Recommandé : gratuit, sans clé] · Google Maps JS
  • Vers le natif : empaqueter la PWA en app de store (iOS/Android) avec Capacitor. → Capacitor

// Partie 04

📋Antisèche — commandes, équivalents & réflexes📌 référence

Cette section est une référence rapide, pas une étape à lire ligne par ligne. Ouvrez-la quand vous avez besoin d'une commande.

📋 Afficher l'antisèche complète

Référence — commandes Claude Code, Firebase et réflexes universels

ÉlémentCommande / action
Installer Claude Code (natif, PowerShell)irm https://claude.ai/install.ps1 | iex
Installer Claude Code (npm, Node 18+)npm install -g @anthropic-ai/claude-code
Vérifier Claude Codeclaude --version puis claude doctor
Lancer Claude Code dans le terminalclaude
Extension VS Code Claude CodeMarketplace → « Claude Code » (éditeur anthropic), VS Code ≥ 1.98
Ouvrir le panneau Claude CodeIcône ✱ (fichier ouvert) ou Ctrl/Cmd+Shift+P → « Claude Code »
Référencer un fichier@ dans Claude Code ; équivalent ailleurs : attacher un fichier, sélectionner un contexte ou pointer un chemin
Multi-lignes dans Claude Code terminal/terminal-setup (active Shift+Entrée)
Mémoire de projetCLAUDE.md avec Claude Code ; équivalent ailleurs : fichier d'instructions, règles projet, workspace rules
Réflexe universelPrompt clair → contexte limité → diff lu → test local → commit
Installer Firebase CLInpm install -g firebase-tools
Se connecter à Firebasefirebase login
Vérifier la connexionfirebase projects:list
Build de prod (Vite)npm run build (dossier dist/)
Initialiser l'hébergementfirebase init hosting (public : dist, SPA : oui)
Déployer en prodfirebase deploy --only hosting
Déployer les règles Firestorefirebase deploy --only firestore:rules
Tester en localfirebase serve / émulateur (≈ localhost:5000)

// Partie 05

Maîtriser sa consommation (tokens & contexte)📌 mémo

🧠 Pourquoi c'est important

Les assistants IA raisonnent à partir d'une fenêtre de contexte de taille limitée : vos messages, les fichiers lus, les sorties de commandes… s'y accumulent. Deux conséquences : chaque token a souvent un coût, et surtout, quand la fenêtre se remplit, l'agent devient moins précis et plus lent. Maîtriser le contexte, c'est obtenir des réponses plus justes, plus rapides et moins chères.

🪟 La fenêtre de contexte, une place limitée

Vos messages Fichiers lus Sorties de commandes
Tout ce que vous chargez grignote la marge. Plus la fenêtre se remplit, plus l'agent ralentit et perd en précision — d'où les réflexes ci-dessous.
Version courte

Pour économiser du temps, de l'argent et de la précision : donnez peu de fichiers, faites des tâches courtes, repartez d'un contexte propre entre deux sujets différents.

⚡ Afficher les réflexes détaillés

Référence — à relire quand les sessions deviennent longues ou coûteuses

Les 3 réflexes qui paient le plus

  • Ne donnez que les fichiers utiles (@fichier) — au lieu de laisser l'agent explorer tout le dépôt. C'est de loin le plus gros levier d'économie.
  • Découpez en tâches courtes — une nouvelle tâche = un contexte frais ; une longue session traîne un historique qui coûte des tokens à chaque tour.
  • Repartez propre entre deux sujets (/clear) — ne gardez pas le contexte d'une tâche terminée pour la suivante.
⌨️ Les commandes à connaître (Claude Code)

/context — voir ce qui occupe la fenêtre · /compact — la résumer quand elle se remplit · /clear — repartir d'un contexte vierge · /model — changer de modèle. Avec un autre outil, retenez le réflexe : mesurer, réduire, repartir proprement.

Réflexes complémentaires

  • Instructions projet courtes — des règles brèves et toujours vraies évitent de réexpliquer ; mais un fichier d'instructions trop long se paie à chaque message.
  • Déléguez aux sous-agents — confier une exploration ou une revue à un sous-agent garde la conversation principale légère.
  • Choisissez le bon modèle — un modèle léger (type Haiku) pour les tâches simples, un modèle puissant (type Opus) pour les complexes ; coupez le raisonnement étendu s'il est inutile.
  • Évitez de coller de gros blocs (logs entiers, fichiers volumineux) — résumez, ou pointez le fichier avec @.

🔭 Docs coûts & contexte

Référence — à garder pour plus tard

  • Maîtriser les coûts : suivre l'usage, fixer des limites, réduire la consommation. → code.claude.com/docs — Costs
  • La fenêtre de contexte : ce qui se charge automatiquement, ce que coûte chaque lecture, quand la compaction se déclenche. → Context window
  • Mémoire & CLAUDE.md : bien doser les instructions persistantes. → Memory

// Partie 06

🔗Liens utiles — sites, docs & tutos🧭 à explorer

Des ressources pour creuser l'exemple Claude Code, puis les briques techniques communes : PWA, Firebase, Git, VS Code.

🔗 Afficher les ressources

Référence — à consulter après le cours, pas pendant le parcours principal

// Partie 07

Ce qu'il faut retenir📌 mémo

Cette partie sert de sortie de cours. Si vous savez répondre à ces questions sans relire tout le support, vous avez les bons réflexes pour continuer seul.

🧠 Compréhension

  • Expliquez la différence entre autocomplétion et agent de développement.
  • Citez les trois éléments qui rendent une PWA installable.
  • Expliquez pourquoi on lit toujours le diff avant d'accepter.
  • Dites à quoi sert une mémoire projet, comme CLAUDE.md dans Claude Code.

🛠️ Pratique

  • Demandez à votre assistant une petite modification ciblée sur votre site.
  • Refusez ou faites corriger une partie du diff si elle ne convient pas.
  • Vérifiez l'app en mode mobile dans le navigateur.
  • Lancez un test simple hors-ligne via les DevTools.

🚦 Vigilance

  • Identifiez une donnée qui ne doit jamais être exposée côté client.
  • Expliquez pourquoi les règles Firestore protègent aussi le budget.
  • Citez deux façons de réduire la consommation de contexte.
  • Décidez ce qui mérite un nouveau prompt plutôt qu'une grosse demande unique.
Défi final — autonomie guidée
Ajoute à mon site une page ou section "Avis clients".
- 3 avis fictifs, visuellement cohérents avec le design existant.
- Responsive mobile.
- Ne modifie pas la structure PWA sauf si nécessaire.
- Explique-moi les fichiers touchés avant que je valide.
✅ Critère de réussite final

Vous avez réussi l'autoformation si vous êtes capable de demander une évolution, comprendre les fichiers modifiés, lire le diff, tester le résultat, puis décider vous-même d'accepter ou de faire corriger.

Prompt clair → l'agent agit sur tout le projet → vous lisez le diff → vous validez.

L'agent IA de développement vous permet de passer d'une intention à un site fonctionnel, puis à une app en prod, tout en restant celui qui comprend et valide le code. Claude Code tout comme Codex, Gemini... changent l'interface, pas les réflexes essentiels. L'outil amplifie le développeur ; il ne le remplace pas.