Exercice : Git & VS Code

[github-actions]

Git & VS Code

👋 Salut @lilblueyes ! Bienvenue dans cet exercice interactif.

Tu vas refaire le cycle GitHub depuis ton ordinateur : clone, branche locale, staging, commits, push, pull request et synchronisation.

---

✨ Le cours va te guider là où tu travailles.

Cette page est une Issue, c'est-à-dire un fil de suivi GitHub utilisé pour discuter d'une tâche, d'un problème ou d'un objectif. Dans ce cours, elle sert de journal de progression.

Au début, les premières étapes apparaîtront ici. À chaque étape, le bot vérifie ton action puis publie la suite.

Quand tu ouvriras une pull request, c'est-à-dire l'espace GitHub où l'on propose et relit un changement avant de l'intégrer, la suite apparaîtra directement dans sa conversation. Tu n'auras donc pas à revenir sans cesse dans cette Issue.

Suis simplement les messages du bot au fur et à mesure.

C'est parti !

_{— Mona}

_{Si tu rencontres un problème avec l'exercice, tu peux le signaler ici.}

[github-actions]

Étape 1 : cloner le dépôt et créer ta branche locale

Tu as déjà manipulé des branches et des commits depuis GitHub.com. Maintenant, on passe sur ton ordinateur.

Dépôt distant et dépôt local

Le dépôt que tu vois sur GitHub est le dépôt distant. Avec Git, tu travailles normalement sur une copie complète stockée sur ta machine : le dépôt local.

flowchart LR
    A[GitHub<br/>dépôt distant] -->|git clone| B[Ordinateur<br/>dépôt local]
    B -->|git push| A
    A -->|git fetch / git pull| B

Loading

1. Cloner ta copie du tutoriel

Ouvre un terminal dans le dossier où tu ranges tes projets, puis exécute :

git clone https://github.com/FIPATECH/github-basics3.git
cd github-basics3

git clone télécharge les fichiers et l'historique Git. Git configure aussi automatiquement un remote, c'est-à-dire une destination distante associée au dépôt local.

Par convention, le remote principal s'appelle généralement origin.

Vérifie-le :

git remote -v

Tu dois voir des URL qui pointent vers :

FIPATECH/github-basics3

2. Ouvrir le projet dans VS Code

Si la commande code est disponible :

code .

Sinon, ouvre Visual Studio Code puis File → Open Folder... et sélectionne le dossier github-basics3.

Ouvre ensuite le terminal intégré de VS Code avec Terminal → New Terminal. À partir de maintenant, tu peux réaliser toutes les commandes du tutoriel directement dans ce terminal.

3. Vérifier ton identité Git

Chaque commit contient un auteur. Vérifie la configuration actuelle :

git config --global user.name
git config --global user.email

Si l'une des valeurs est vide ou incorrecte, configure-la :

git config --global user.name "Prénom Nom"
git config --global user.email "ton-adresse@example.com"

Tip

L'adresse utilisée dans un commit peut apparaître dans l'historique du dépôt. GitHub permet d'utiliser une adresse noreply depuis les paramètres Emails de ton compte.

4. Prendre le réflexe git status

Exécute :

git status

git status répond à trois questions essentielles :

• sur quelle branche suis-je ?
• quels fichiers ai-je modifiés ?
• quelles modifications sont préparées pour le prochain commit ?

Quand tu es perdu avec Git, commence par git status.

Vérifie aussi ta branche actuelle :

git branch --show-current

Tu dois être sur main.

5. Créer une branche de travail

Dans le club, on évite de travailler directement sur main. Crée une branche dédiée :

git switch -c feature/robot-status

Puis vérifie :

git status

Enfin, publie la branche sur GitHub :

git push -u origin feature/robot-status

Décomposition :

• git push envoie tes commits vers un remote ;
• origin est le remote GitHub ;
• feature/robot-status est ta branche ;
• -u enregistre la branche distante comme upstream de ta branche locale. Les prochains git push et git pull pourront donc fonctionner sans répéter le nom du remote et de la branche.

Important

Utilise exactement le nom feature/robot-status pour cette branche : l'automatisation du tutoriel l'attend.

Dès que la branche apparaît sur GitHub, Mona détecte ton premier push et publie l'étape suivante.

Le push demande une authentification ou échoue ?

Le clone d'un dépôt public ne nécessite pas forcément d'authentification, mais push modifie GitHub et doit donc t'identifier.

Utilise la méthode déjà configurée sur ton ordinateur, typiquement HTTPS avec le gestionnaire d'identifiants Git, GitHub CLI ou SSH. Si aucune méthode n'est configurée, suis la documentation GitHub sur l'authentification Git avant de continuer.

[github-actions]

Suis les instructions ci-dessus.

Je surveille automatiquement ta progression pour te donner du feedback et afficher la suite. 🧐

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 2. 🤓

[github-actions]

Étape 2 : comprendre working tree, staging et commit

Ta branche existe maintenant à la fois sur ton ordinateur et sur GitHub.

On va faire une vraie modification et suivre son trajet jusqu'à l'historique Git.

Les trois zones à comprendre

flowchart LR
    A[Working tree<br/>fichiers modifiés] -->|git add| B[Staging area<br/>prochain commit]
    B -->|git commit| C[Historique local<br/>commits]
    C -->|git push| D[GitHub<br/>remote origin]

Loading

• le working tree correspond aux fichiers présents dans ton dossier de travail ;
• la staging area est la sélection exacte des changements qui entreront dans le prochain commit ;
• un commit enregistre cette sélection dans l'historique local ;
• git push publie ensuite les commits sur GitHub.

1. Modifier le fichier dans VS Code

Ouvre :

robot/config.yaml

Remplace :

max_speed: 0.4

par :

max_speed: 0.8

Enregistre le fichier.

Dans l'onglet Source Control de VS Code, tu dois maintenant voir robot/config.yaml dans Changes.

2. Inspecter avant de préparer le commit

Dans le terminal :

git status
git diff

git diff montre les différences entre ton working tree et la staging area.

Ne stage pas tout aveuglément avec git add . pour cet exercice. Sélectionne précisément le fichier voulu :

git add robot/config.yaml

Puis :

git status
git diff --staged

git diff --staged montre exactement ce qui entrera dans le prochain commit.

Dans VS Code, le fichier est maintenant passé de Changes à Staged Changes. La CLI et l'interface graphique représentent donc le même état Git.

3. Savoir revenir en arrière

Avant de committer, essaie volontairement de retirer le fichier de la staging area :

git restore --staged robot/config.yaml

Vérifie avec :

git status

Puis stage-le de nouveau :

git add robot/config.yaml

Cette commande n'annule pas ta modification : elle retire simplement le fichier du prochain commit.

4. Créer le commit

Crée maintenant un commit local. Le message suivant est un exemple, pas un mot de passe :

git commit -m "Increase robot max speed"

Vérifie immédiatement :

git status
git log -1 --oneline

À ce stade, ton commit existe sur ton ordinateur, mais pas encore sur GitHub.

C'est une distinction fondamentale :

git commit ≠ git push

Publie-le :

git push

Le bot vérifiera que robot/config.yaml contient bien la nouvelle valeur et que ta branche contient un commit propre à ton travail.

[github-actions]

Étape 2 validée ✅

Statut	Vérification
✅ Validé	robot/config.yaml contient max_speed: 0.8
✅ Validé	La branche contient au moins un commit propre

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 3. 🤓

[github-actions]

Étape 3 : lire l'historique, annuler une modification et utiliser Source Control

Tu viens de créer puis pousser un commit. Avant d'en faire un deuxième, apprends à regarder l'historique et à corriger une erreur locale sans paniquer.

1. Explorer l'historique

Dans le terminal :

git log --oneline --graph --decorate --all

Tu dois voir au minimum :

• main ;
• feature/robot-status ;
• ton commit récent ;
• des références comme origin/main ou origin/feature/robot-status.

Affiche le dernier commit en détail :

git show HEAD

HEAD désigne ta position actuelle dans l'historique, généralement le dernier commit de la branche sur laquelle tu te trouves.

Dans VS Code, ouvre Source Control puis la vue Graph si elle est disponible. Tu observes le même historique, mais visuellement.

2. Annuler une modification non commitée

Ouvre robot/mission.md et ajoute temporairement une ligne quelconque, par exemple :

TEST TEMPORAIRE

Enregistre puis regarde :

git status
git diff robot/mission.md

Décide finalement de jeter cette modification :

git restore robot/mission.md

Puis :

git status

La modification a disparu.

Warning

git restore sur un fichier modifié remplace son contenu local par la version enregistrée dans Git. Vérifie toujours ce que tu jettes avant de l'utiliser.

3. Comprendre .gitignore

Les projets robotiques génèrent souvent beaucoup de fichiers qu'on ne veut pas versionner : builds, caches Python, environnements virtuels, logs, etc.

Ouvre .gitignore dans VS Code et ajoute :

build/
install/
log/
__pycache__/
.venv/

Dans Source Control, ouvre le diff de .gitignore et relis-le.

Cette fois, stage le fichier depuis VS Code avec le bouton + à côté du fichier. Vérifie ensuite dans le terminal que VS Code a bien exécuté l'équivalent d'un git add :

git status
git diff --staged

4. Committer depuis VS Code

Dans Source Control :

1. saisis un message clair, par exemple Ignore generated files ;
2. clique sur Commit.

Puis vérifie le résultat dans le terminal :

git log -2 --oneline
git status

Tu viens d'utiliser deux interfaces différentes sur le même Git : le terminal et VS Code.

Publie le deuxième commit :

git push

Mona vérifiera le contenu de .gitignore et que ta branche contient désormais plusieurs commits.

[github-actions]

Étape 3 validée ✅

Statut	Vérification
✅ Validé	Les fichiers générés sont ignorés
✅ Validé	La branche contient au moins deux commits

[github-actions]

🎉 Bien joué, cette étape est validée !

Je prépare l'étape 4. 🤓

[github-actions]

Étape 4 : comprendre le remote puis ouvrir une pull request

Tes commits locaux sont maintenant publiés sur GitHub. Avant d'ouvrir la pull request, prends deux minutes pour comprendre ce que Git suit réellement.

Branche locale et branche distante

Affiche les remotes :

git remote -v

Puis les branches et leurs upstreams :

git branch -vv

Tu devrais voir que feature/robot-status suit une branche distante du type :

origin/feature/robot-status

Attention : origin/feature/robot-status n'est pas une deuxième branche que tu édites directement. C'est une remote-tracking branch, une référence locale représentant l'état du remote connu par ton Git.

fetch, pull et push

Mets à jour ta connaissance du remote sans modifier tes fichiers :

git fetch origin

Puis regarde le graphe :

git log --oneline --graph --decorate --all

À retenir :

• git fetch récupère les nouveaux objets et met à jour les références distantes ;
• git pull récupère puis intègre les changements dans ta branche courante ;
• git push envoie tes commits locaux vers le remote.

Vérifier avant la PR

Exécute encore :

git status

Ton working tree doit être propre et ta branche doit être à jour avec son upstream.

Ouvrir la pull request

Tu connais déjà les PR grâce au tutoriel GitHub Basics. Ici, la différence est que tout le travail a été produit localement, puis publié avec git push.

Créer ma pull request →

Choisis :

• base : main
• compare : feature/robot-status

Utilise un titre clair, par exemple :

Update robot configuration

Ajoute une vraie description qui résume ce que tu as fait et pourquoi.

Le bot vérifiera également que la PR contient bien les deux fichiers attendus :

• robot/config.yaml
• .gitignore

Une fois la PR valide, reste dans sa Conversation : comme dans le premier tutoriel, la suite viendra directement à toi.

[github-actions]

✅ Ta pull request #9 est valide. La suite du tutoriel se déroule maintenant directement dans sa Conversation.

[github-actions]

Félicitations @lilblueyes ! Tu as terminé l'exercice 🎉🎉🎉

Le dépôt a été mis à jour pour marquer ta réussite.

Retourne sur la page d'accueil du dépôt pour voir le résultat.