Construire et mettre en ligne une app web avec un agent de code IA
De l'idée à l'URL publique avec Claude Code : cadrer, faire planifier puis construire, itérer avec Git, publier depuis GitHub.
Passer d'une idée d'outil à une application web en ligne, construite avec un agent de code IA (Claude Code en priorité), sans être développeur. Vous cadrez le besoin et vos critères de réussite, vous faites planifier puis construire l'app, vous l'améliorez par petites étapes vérifiées et versionnées avec Git, puis vous la publiez depuis GitHub à une URL publique, en sachant ce qui reste à faire avant de la confier à de vrais utilisateurs.
Ce que vous saurez faire
- Cadrer un outil (problème, utilisateur, entrées, résultat attendu) et écrire ses critères d'acceptation avant de générer la moindre ligne de code.
- Choisir entre chat avec artifacts, générateur d'apps et agent de code selon le besoin, le niveau de contrôle attendu et le risque.
- Rédiger une demande de construction pour un agent de code (contexte, périmètre, contraintes, vérification) et faire valider un plan avant l'écriture du code.
- Installer l'environnement (terminal, Node.js, Git, Claude Code), lancer l'application en local et expliquer à quoi servent les principaux fichiers du projet généré.
- Faire évoluer et déboguer l'application par petites itérations vérifiées et commitées, en donnant à l'agent le contexte utile (symptôme, étapes, message d'erreur).
- Évaluer l'app générée avant de la partager (fonctionnement, cas limites, secrets, données personnelles, expérience) et décider de publier, corriger ou arrêter.
- Publier l'app depuis GitHub sur un hébergeur avec déploiement continu, obtenir une URL publique et faire évoluer la version en ligne sans la casser.
Prérequis
- Savoir installer un logiciel et retrouver un fichier sur son ordinateur
- Avoir déjà utilisé un assistant conversationnel (Claude, ChatGPT…)
- Matériel : un ordinateur macOS, Windows ou Linux sur lequel vous pouvez installer des logiciels
- Comptes : un abonnement Claude payant pour Claude Code (Pro ou supérieur ; le plan gratuit permet de suivre la voie « prototype » avec les artifacts), un compte GitHub et un compte Netlify (plans gratuits suffisants)
- Cours recommandé ensuite : Créer un assistant IA pour votre produit, pour intégrer un assistant dans une app comme celle-ci.
Programme
Que vais-je construire dans ce cours, et dans quel ordre ?
- Présentation du cours2 étapes
Objectif · À la fin de cette présentation, vous saurez ce que vous allez livrer (une app web en ligne, versionnée sur GitHub) et par quelles quatre étapes le cours vous y conduit.
Que vais-je construire, avec quel outil, et comment saurai-je que c'est réussi ?
Objectif · À la fin de cette leçon, vous serez capable d'expliquer ce qu'un agent de code fait de plus qu'un chat, et de choisir le mode de construction adapté à un besoin selon le contrôle attendu, le risque et le coût.
Objectif · À la fin de cette leçon, vous serez capable de décrire votre outil (problème, utilisateur, entrées, résultat, nom) et d'écrire au moins trois critères d'acceptation vérifiables avant de demander la moindre ligne de code.
Comment obtenir une première version qui tourne sur ma machine, et comprendre ce qui a été créé ?
- Préparer son poste de travail2 étapes
Objectif · À la fin de cette leçon, vous serez capable d'installer et de vérifier votre environnement (terminal, Node.js, Git, Claude Code), de créer le dossier versionné de votre projet et d'y démarrer une session Claude Code.
- Du cadrage au plan, puis au code2 étapes
Objectif · À la fin de cette leçon, vous serez capable de rédiger une demande de construction en cinq blocs pour un agent de code, de faire valider un plan en mode plan avant toute écriture de code, et d'obtenir une première version lancée en local.
Objectif · À la fin de cette leçon, vous serez capable d'expliquer le rôle des principaux fichiers d'un projet React et Vite, de dire où vivent les données de votre app, et d'en déduire ce qu'elle peut et ne peut pas faire sans back-end.
Comment faire évoluer l'outil sans le casser, et savoir s'il est prêt à être partagé ?
Objectif · À la fin de cette leçon, vous serez capable de faire évoluer votre app par itérations courtes (observer, décrire, faire réaliser, vérifier, commiter), de relire ce que l'agent a changé et de revenir à une version précédente avec Git.
Objectif · À la fin de cette leçon, vous serez capable de rédiger une demande de débogage complète (symptôme, étapes, attendu, message d'erreur), de lire la console du navigateur, et de relire votre app avec une grille en cinq angles avant de décider de la partager.
Comment mettre l'app en ligne proprement, la mettre à jour sans risque et savoir ce qui manque pour de vrais utilisateurs ?
Objectif · À la fin de cette leçon, vous serez capable de pousser votre projet sur un dépôt GitHub sans y mettre de secrets, de le connecter à Netlify avec les bons réglages de build, et d'obtenir une URL publique mise à jour à chaque push sur la branche principale.
Objectif · À la fin de cette leçon, vous serez capable de publier une modification par branche, pull request et prévisualisation, de brancher un domaine si besoin, et de lister ce qui sépare votre app en ligne d'une app prête pour de vrais clients.