3.3 — Démo : du code à la mise en ligne

Durée : 10 min | Type : Démo | Slides : ~4-5 (surtout des screenshots)

Ce qu'on va voir#

On va suivre le parcours complet d'un vrai projet : installer Git, créer un site web pour l'école avec un agent, gérer les bugs, publier le code sur GitHub, et le déployer en ligne sur Vercel. Tout ça avec Codex dans VSCode.

Le projet : refaire le site de l'IFOSUP Wavre — l'école où vous êtes. Le résultat final est en ligne ici : https://site-ifosup.vercel.app/

Étape 1 : Installer Git#

Git est un outil de versioning — il sauvegarde l'historique de votre code et permet de le publier sur GitHub. VSCode le détecte automatiquement et vous propose de l'installer.

Quand vous ouvrez l'onglet Source Control (icône branche à gauche) sans Git installé, VSCode affiche un bouton "Download Git for Windows". Cliquez dessus.

Ça vous amène sur le site de Git. Cliquez sur "Click here to download" pour télécharger l'installeur.

Pendant l'installation, deux réglages à noter :

Éditeur par défaut → sélectionnez "Use Visual Studio Code" dans le menu déroulant. Comme ça, Git utilisera VSCode si besoin.

Nom de la branche initiale → sélectionnez "Override the default branch name" et tapez main. C'est la convention actuelle (au lieu de l'ancien "master").

Pour le reste, laissez les options par défaut et cliquez "Next" jusqu'à la fin.

Étape 2 : Ouvrir un dossier de projet#

Après l'installation de Git, revenez dans VSCode. L'onglet Source Control affiche maintenant "Open Folder" et "Clone Repository" — Git est reconnu.

Créez un dossier pour votre projet (par exemple Documents/code/site-ifosup) et ouvrez-le dans VSCode.

Étape 3 : Le prompt — on demande à Codex de créer le site#

Voici le moment clé. Dans le panneau CODEX à droite, on tape un prompt décrivant ce qu'on veut :

Notez le prompt : informel, avec des fautes, pas de spécification technique détaillée. On dit juste ce qu'on veut. L'agent se débrouille — il va même faire des recherches sur internet pour trouver les infos de l'école (adresse, formations, logo...).

Codex travaille : il crée le projet Vite + React + Tailwind, installe les dépendances, crée les composants, importe les assets de l'école, et lance le serveur de développement.

Étape 4 : Le résultat — et le premier bug#

Quelques minutes plus tard, Codex a terminé. Il montre un résumé de ce qu'il a fait :

L'agent a créé toute la structure, installé les packages, et le serveur tourne. On ouvre le navigateur... et voilà le site :

Le design est beau, la structure est bonne, les infos sont correctes (Codex a cherché sur le site réel de l'école)... mais il y a un bug d'encodage. Tous les caractères accentués (é, è, à, ê...) s'affichent comme des losanges ◆.

C'est un bug classique avec Codex — il arrive régulièrement que l'agent génère du texte sans gérer correctement l'UTF-8. Pas de panique : on applique la méthode. On dit à l'agent ce qui ne va pas.

Un simple message du type "Les caractères accentués ne s'affichent pas correctement, il y a des losanges partout. Corrige l'encodage." et Codex corrige :

Voilà. Le cycle a fonctionné : l'agent crée → on teste → on signale le bug → l'agent corrige.

💡 Leçon importante : le premier résultat n'est presque jamais parfait. C'est normal. Ce qui compte, c'est d'appliquer le cycle.

Étape 5 : Sauvegarder sur GitHub#

Le site marche en local. Maintenant on veut le sauvegarder sur GitHub (et le déployer ensuite). Git est intégré dans VSCode — pas besoin du terminal.

Premier commit#

Allez dans l'onglet Source Control. Vous voyez la liste de tous les fichiers créés par l'agent.

Premièrement, il faut initialiser le repository :

Pour sauvegarder, il faut faire un commit (= une sauvegarde horodatée).

Cliquez sur l'icône ✨ étincelle à côté du champ de message — Codex génère automatiquement un message de commit descriptif.

Le message généré automatiquement décrit ce qui a été fait :

Cliquez Commit. VSCode demande si vous voulez "stage" (préparer) tous les fichiers — cliquez "Always" pour ne plus avoir cette question.

Configurer votre identité Git#

Si c'est votre premier commit, Git vous demande de configurer votre nom et email :

Ouvrez le terminal dans VSCode (menu Terminal → New Terminal) et tapez ces deux commandes avec vos informations :

git config --global user.name "Votre Nom"
git config --global user.email "votre@email.com"

Puis relancez le commit.

Publier sur GitHub#

Une fois le commit fait, le bouton "Publish Branch" apparaît :

Cliquez dessus. VSCode vous demande le nom du dépôt et s'il doit être privé ou public :

Choisissez private (on pourra toujours le rendre public après). VSCode pousse tout sur GitHub. Votre code est maintenant sauvegardé en ligne.

Étape 6 : Déployer sur Vercel#

Dernière étape : mettre le site en ligne. Vercel se connecte à votre dépôt GitHub et déploie automatiquement.

1. Allez sur https://vercel.com → connectez-vous avec GitHub
2. "New Project" → sélectionnez votre dépôt site-ifosup
3. Cliquez "Deploy"
4. ~30 secondes plus tard...

C'est en ligne : https://site-ifosup.vercel.app/

Une URL publique, accessible par n'importe qui, depuis n'importe quel appareil. Et à chaque fois que vous pousserez du code sur GitHub, Vercel redéploiera automatiquement.

Résumé : ce qu'on vient de faire#

Étape	Action	Temps
1	Installer Git	~3 min
2	Créer un dossier et l'ouvrir dans VSCode	30 sec
3	Envoyer un prompt à Codex	30 sec
4	Codex crée le site + on corrige le bug d'encodage	~5 min
5	Commit + publier sur GitHub	~2 min
6	Déployer sur Vercel	~1 min

Total : ~12 minutes pour un site web complet, avec un vrai design, publié en ligne avec une URL partageable.

Et la méthode ? C'est exactement la même que dans le bloc 2 : prompt → l'agent crée → on teste → on corrige → on itère. L'outil est plus puissant, mais la méthode ne change pas.

Et le parcours Python ?#

Le parcours Python est plus simple à démarrer mais reste local (sur votre machine). Le flux :

1. L'agent crée un fichier Python avec Streamlit
2. Il installe les dépendances (pip install streamlit)
3. Il lance le serveur (streamlit run app.py)
4. L'app s'ouvre dans votre navigateur à http://localhost:8501
5. Pas de Git ni de déploiement nécessaire — parfait pour des outils personnels ou des données sensibles

Le prompt type :

Je suis prof de [matière]. Fais-moi un outil Streamlit pour [besoin] avec une base de données SQLite pour stocker les données. Ajoute un export Excel.

Le parcours Python n'a pas besoin de Git, de GitHub, ni de Vercel. C'est plus simple, mais l'application ne tourne que sur votre machine.

	Parcours Python 🐍	Parcours Web 🌐
Complexité	⭐ Plus simple	⭐⭐ Plus d'étapes
Résultat	App locale (votre PC)	Site en ligne (URL partageable)
Données	Restent sur votre machine	Sur un serveur
Idéal pour	Outils perso, données sensibles	Apps partagées, sites, collaboratif
Git nécessaire ?	Non	Oui (pour Vercel)