Programme

• S1Ta boutique existe déjà, en ligne2h

  Théorie (30 min)	Pratique pilotée (1h20)
  Comment marche un LLM (prompts, hallucinations), pourquoi il y a besoin de vous (l'IA n'a ni mémoire du projet ni intention), les 3 règles du pilote, pourquoi le métier a changé, Git en version simple (sauvegarder / publier), et ce qu'est un déploiement.	Installer VS Code, créer les comptes GitHub et Claude Code, générer la boutique commune — La Librairie du Phare — avec le prompt commun et le catalogue fourni (data/produits.js, 32 titres), puis la publier sur GitHub → Vercel : la boutique est montrable dès ce soir.

  • Bug du jour: Le premier raté d'installation, lu ensemble au projecteur : l'erreur est normale, elle se lit.
  • Réflexe sécu: Le compte GitHub contrôle le code, le déploiement et bientôt les clés : activer la double authentification (2FA) dès maintenant, et sur chaque service ajouté ensuite.
  • Acquis: Environnement prêt, boutique en ligne, premier pilotage. On ne comprend rien au code — c'est normal, c'est le programme du trimestre.
  • Devoir: Acheter son nom de domaine (guide fourni, registrar imposé) — le nom que vous voudrez garder, pas celui de la boutique de démonstration.
• S2Autopsie : structure, style & logique2h

  Théorie (30 min)

  Pratique pilotée (1h20)

  Lire du HTML/JSX (balises, composants), comprendre les imports et le DNS, relier Tailwind aux bases CSS (couleurs, boîtes, flexbox, responsive), puis variables, conditions, boucles/map et la notion d'état — uniquement sur leur propre code.

  Brancher son nom de domaine (la boutique passe à votre nom), suivre un import à la trace, refondre l'identité visuelle en dialoguant avec l'agent. La grille produits passe en map sur le catalogue avec filtres par rayon et badge conditionnel « À paraître » (bouton panier désactivé). Le panier prend vie : état partagé, compteur dans le menu, page Panier avec quantités et total. Un exercice de modification à la main, sans agent.

  • Bug du jour: Un seul, choisi selon le rythme du groupe : import cassé / classe Tailwind inexistante, ou condition « à paraître » inversée / map qui affiche du vide. L'autre part en devoir optionnel.
  • Acquis: Plus peur d'ouvrir les fichiers, et le kit de lecture minimal (structure, style, logique) pour auditer ce que l'IA écrit. Un panier qui fonctionne en mémoire du navigateur — pas de base de données à ce stade, d'où le panier vide au rechargement. Faille laissée visible exprès, comblée en S4.
• S3La boutique prend commande : vrais emails2h

  Théorie (30 min)	Pratique pilotée (1h20)
  La leçon fondamentale client / serveur — pourquoi une clé API ne va jamais dans le navigateur, et pourquoi un prix ne vient jamais du navigateur non plus. Secrets et variables d'environnement, en local puis sur Vercel.	Formulaire de commande (coordonnées + récapitulatif du panier), compte Resend, clé API, route serveur avec recalcul du total côté serveur : la commande arrive par email chez le commerçant, et un accusé de réception part vers le client. Test croisé entre étudiants. Le formulaire Contact suit la même recette.

  • Bug du jour: La clé API absente sur Vercel : ça marche en local, ça plante en ligne. LE grand classique du métier.
  • Réflexe sécu: Le total ne se calcule jamais côté client (le navigateur envoie des ids et des quantités, le serveur relit les prix dans le catalogue). Limite d'envoi et champ honeypot sur tout formulaire public. .env dans le .gitignore — une clé commitée est une clé brûlée : on révoque.
  • Pour aller plus loin: Vérifier son domaine dans Resend pour envoyer depuis commandes@sonnom.fr — ce domaine vérifié débloquera les vrais emails de confirmation en S4.
• S4La boutique se souvient : comptes, commandes & panier2h

  Théorie (30 min)

  Pratique pilotée (1h20)

  Bases de données (tables, lignes, requêtes), sessions, pourquoi on ne stocke jamais un mot de passe en clair, qui a le droit de lire quoi, et pourquoi l'email intégré de Supabase est bridé par défaut (2 messages/heure).

  Projet Supabase. Les commandes sont enregistrées en base en plus de l'email. Comptes clients : inscription / connexion des visiteurs. Panier persistant : le client connecté retrouve son panier d'un appareil à l'autre. Page /admin réservée au commerçant : liste des commandes, détail, changement de statut. Pour ceux qui ont vérifié leur domaine en S3 : branchement de Resend en SMTP personnalisé pour la confirmation d'inscription.

  • Bug du jour: Une règle d'accès trop stricte — « pourquoi je ne vois pas mes propres commandes ? » — et l'apprentissage de lire ce que la base répond.
  • Réflexe sécu: Le vrai danger est l'inverse du bug du jour : une table commandes sans Row Level Security où n'importe qui lit les adresses et les achats des autres. Test à faire en navigation privée. Ne collecter que le nécessaire, savoir supprimer un compte (RGPD).
  • Pour aller plus loin: Rituel de fin de chantier : un « battement de cœur » (GitHub Action planifiée) pour éviter la mise en pause du projet Supabase gratuit — et découvrir le cron au passage.
• S5La boutique encaisse, puis conseille2h

  Théorie (30 min)

  Pratique pilotée (1h20)

  Stripe Checkout (page de paiement hébergée, carte jamais vue par la boutique), différence mode test / live. Puis : API de LLM, tokens, prompt système, comment donner des connaissances à un modèle sans le réentraîner.

  Compte Stripe en mode test, route serveur qui crée la session de paiement à partir du total recalculé (le geste de S3, réutilisé tel quel), pages de retour succès et annulation, commande passée au statut « payée » en base. Test croisé avec la carte 4242. Puis chacun branche le vendeur IA : une route serveur qui injecte le catalogue dans le prompt et répond aux questions des visiteurs. Historique de conversation dans Supabase.

  • Bug du jour: Quota dépassé ou mauvais nom de modèle : lire la réponse d'erreur d'une API et basculer sur le fournisseur B. Le bug qui apprend qu'on a toujours un plan B.
  • Réflexe sécu: La clé secrète Stripe vit côté serveur, jamais dans le navigateur. Le prompt système est lisible par vos visiteurs : jamais de secret ni de marge commerciale dedans. La sortie du bot n'engage pas la boutique — c'est la page produit qui fait foi.
  • Acquis: La séance signature : emails, comptes, base de données, paiement et IA réunis dans une boutique qu'on montre à ses amis.
• S6Sécurité & référencement : prêt pour le monde2h

  Théorie (30 min)

  Pratique pilotée (1h20)

  Les en-têtes de sécurité HTTP à connaître (Strict-Transport-Security, Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy), ce qu'un moteur de recherche — et un LLM — lit d'une page (title, meta description, Open Graph, un seul h1, textes alternatifs), sitemap.xml et robots.txt.

  Audit sécurité automatisé : chacun demande à Claude Code « réalise un audit sécurité » sur sa boutique, lit le rapport et corrige les points bloquants. SEO sur un vrai cas de commerce : chaque fiche produit reçoit son title, sa meta description et son image Open Graph générés depuis le catalogue, plus un sitemap.xml et un robots.txt. Test réel : partager le lien d'une fiche produit pour voir l'aperçu apparaître.

  • Bug du jour: Un title vide ou une balise Open Graph dupliquée : pourquoi l'aperçu du lien de la fiche produit affiche n'importe quoi.
  • Réflexe sécu: L'audit par l'agent ne remplace pas la vigilance : clés hors du repo, RLS partout, prix recalculés côté serveur, validation serveur, limite d'envoi + honeypot sur tout formulaire public, 2FA sur tous les comptes, en-têtes de sécurité en place.
  • Acquis: Une boutique non seulement en ligne, mais sûre et trouvable — prête à être montrée à de vrais visiteurs.
• S7Projet personnel : atelier2h

  Théorie (30 min)	Pratique pilotée (1h20)
  Cadrer un projet avec l'IA : décrire, découper, itérer petit, savoir s'arrêter. Récapitulatif de la méthode de débogage accumulée en six semaines.	En binôme (recommandé) ou en solo, chacun construit le projet de son choix avec les briques de S1-S6 (liste d'idées fournie). Usage libre de l'agent, accompagnement par équipe. Reprendre sa boutique comme base est permis, à condition que le projet aille quelque part de nouveau.

  • Réflexe sécu: En projet libre, l'agent peut installer des paquets npm inconnus ou lancer des commandes inhabituelles : un paquet qu'on n'a pas demandé, une commande qu'on ne comprend pas — on refuse. Piloter, c'est aussi surveiller le terminal.
  • Devoir: Avancer chez soi, avec le formateur en filet par email.
• S8Finitions & présentations2h

  Théorie (30 min)	Pratique pilotée (1h20)
  45 min de finitions accompagnées, par équipe ou en solo.	Chaque participant présente son projet — à son nom, en ligne, qui envoie des emails, avec comptes et IA (3 min en solo, 4 min à deux, + 1 question). Ce qu'on a appris, ce qui reste mystérieux, bilan du trimestre et suite.

1 séance par semaine — Tous les lundis 19 h – 21 h