Git et GitHub - Le contrôle de version pour les pirates

Tout programmeur doit connaître Git - un système de contrôle de version. C'est comme le journal de bord d'un navire - tu enregistres l'historique des changements de ton code.

Qu'est-ce que Git ?

Git est un système de contrôle de version - il te permet de :

• Enregistrer l'historique des changements de code
• Revenir à des versions antérieures
• Collaborer avec d'autres développeurs
• Créer des branches - travailler sur plusieurs fonctionnalités en parallèle
• Suivre qui a changé quoi et quand

Git vs GitHub :

• Git - outil local (sur ton ordinateur)
• GitHub - plateforme en ligne pour stocker du code (comme Dropbox pour les développeurs)

Installer Git

Windows :

Télécharge depuis : https://git-scm.com/install/windows

Pendant l'installation, choisis :

• Git Bash
• Git from the command line
• Use Vim (ou Nano si tu préfères)

Mac :

Vérifie si tu as déjà Git :

1git --version

S'il manque, macOS propose d'installer les Xcode Command Line Tools (Git en fait partie). Tu peux aussi taper toi-même xcode-select --install ou installer Git via Homebrew :

1brew install git

Linux (Ubuntu/Debian) :

1sudo apt-get update
2sudo apt-get install git

Configurer Git - Premiers pas

Après l'installation, configure Git avec tes informations :

1git config --global user.name "Jack Sparrow"
2git config --global user.email "jack@blackpearl.com"

Pourquoi est-ce important ? Chaque commit (changement enregistré) portera ton nom et ton email - c'est comme une signature dans le journal de bord.

Vérifie la configuration :

1git config --list

Initialiser un projet Git

Tu as deux scénarios :

Scénario 1 : Nouveau projet (local)

Quand tu crées un nouveau projet Next.js, Git est déjà initialisé automatiquement !

create-next-app le fait pour toi. Vérifie :

1ls -la

Tu verras un dossier .git/ - c'est le dépôt Git.

Scénario 2 : Dossier existant (sans Git)

Si tu as un dossier sans Git :

1cd my-project
2git init

Cela va créer un dossier .git/ et initialiser le dépôt.

Commandes Git de base

1. git status - État du dépôt

Vérifie ce qui a changé :

1git status

Tu verras :

• Untracked files - nouveaux fichiers que Git ne suit pas
• Modified files - fichiers modifiés
• Staged files - fichiers prêts pour le commit

1On branch main
2Changes not staged for commit:
3  modified:   app/page.tsx
4
5Untracked files:
6  app/pirates/page.tsx

2. git add - Ajouter des fichiers au staging

La staging area est une « salle d'attente » avant le commit.

1# Ajouter un fichier
2git add app/page.tsx
3
4# Ajouter tous les fichiers
5git add .
6
7# Ajouter tous les fichiers .tsx, aussi dans les sous-dossiers (guillemets : c'est Git qui développe le motif, pas le terminal)
8git add "*.tsx"

Après git add, les fichiers sont staged - prêts à être enregistrés (committés).

3. git commit - Enregistrer les changements

Un commit est comme un point de contrôle dans un jeu - tu sauvegardes l'état du code.

1git commit -m "Add pirate landing page"

-m signifie message - une courte description de ce que tu as changé.

Bons messages de commit :

• « Add hero section to landing page »
• « Fix button hover animation »
• « Update Pirate interface with level field »

Mauvais messages de commit :

• « changes »
• « fix »
• « asdfghjk »
• « WIP » (Work In Progress - seulement de manière temporaire)

4. git log - Historique des commits

Consulte l'historique de tous les commits :

1git log

Tu verras :

1commit a3f5b8c (HEAD -> main)
2Author: Jack Sparrow <jack@blackpearl.com>
3Date:   Sun Nov 24 10:30:00 2024 +0100
4
5    Add pirate landing page
6
7commit b2e4a9d
8Author: Jack Sparrow <jack@blackpearl.com>
9Date:   Sun Nov 24 09:15:00 2024 +0100
10
11    Initial commit

Raccourcis :

1# Version courte (1 ligne par commit)
2git log --oneline
3
4# Les 5 derniers commits
5git log -5
6
7# Avec le graphe des branches
8git log --graph --oneline

5. git diff - Voir les changements

Compare les fichiers actuels avec la version staged/committée :

1# Changements non ajoutés au stage
2git diff
3
4# Changements dans les fichiers staged
5git diff --staged

Tu verras :

1diff --git a/app/page.tsx b/app/page.tsx
2--- a/app/page.tsx
3+++ b/app/page.tsx
4@@ -1,5 +1,5 @@
5 export default function Home() {
6   return (
7-    <h1>Hello World</h1>
8+    <h1>Ahoy, Pirates!</h1>
9   )
10 }

.gitignore - Ignorer des fichiers

Certains fichiers ne devraient PAS être dans Git :

• node_modules/ - dossier énorme (des centaines de Mo)
• .env.local - secrets (clés API, mots de passe)
• .next/ - build output
• dist/, build/ - fichiers compilés

Le fichier .gitignore indique à Git ce qu'il doit ignorer :

1# .gitignore
2node_modules/
3.next/
4.env.local
5.env
6.DS_Store
7*.log

Next.js crée automatiquement .gitignore - tu l'as déjà configuré !

Branching - Les branches de travail

Une branche est une ligne de développement distincte du projet. Tu peux travailler sur une nouvelle fonctionnalité sans toucher au code principal.

Créer une branche

1# Créer une nouvelle branche
2git branch feature/landing-page
3
4# Basculer vers la nouvelle branche
5git checkout feature/landing-page
6
7# Ou une seule commande (créer + basculer)
8git checkout -b feature/landing-page

Convention de nommage :

• feature/name - nouvelle fonctionnalité
• fix/name - correction de bug
• refactor/name - refactoring
• docs/name - documentation

Basculer entre les branches

1# Voir toutes les branches
2git branch
3
4# Basculer vers main
5git checkout main
6
7# Basculer vers la branche feature
8git checkout feature/landing-page

Fusionner des branches

Quand tu termines une fonctionnalité, tu fusionnes les changements dans main :

1# Basculer vers main
2git checkout main
3
4# Fusionner les changements de la branche feature
5git merge feature/landing-page

Fast-forward merge : Si main n'a pas changé, Git déplace simplement le pointeur - c'est la fusion la plus simple.

3-way merge : Si les deux branches ont de nouveaux commits, Git crée un nouveau commit de fusion.

Supprimer une branche

Après la fusion, tu peux supprimer la branche :

1git branch -d feature/landing-page

GitHub - Le dépôt distant

GitHub est comme une île au trésor - un endroit où tu stockes tes trésors (le code).

Créer un dépôt sur GitHub

1. Va sur : https://github.com
2. Clique sur le bouton vert « New » (ou « New repository »)
3. Remplis :
   • Repository name : krakens-call
   • Description : « Epic pirate game built with Next.js »
   • Public ou Private (à ton choix)
   • NE COCHE PAS « Initialize with README » (tu as déjà un projet local)
4. Clique sur « Create repository »

Connecter le projet local avec GitHub

GitHub va te donner des commandes - copie-les :

1# Ajouter le dépôt distant
2git remote add origin https://github.com/username/krakens-call.git
3
4# Renommer la branche en main (si nécessaire)
5git branch -M main
6
7# Envoyer le code vers GitHub
8git push -u origin main

Explication :

• origin - nom du dépôt distant (convention par défaut)
• -u - définit l'upstream (branche par défaut pour push/pull)
• main - nom de la branche

git push - Envoyer les changements

Chaque commit local → envoyé vers GitHub :

1# Envoyer tous les commits vers origin/main
2git push
3
4# Envoyer une branche précise
5git push origin feature/landing-page

git pull - Télécharger les changements

Si tu travailles en équipe, d'autres peuvent introduire des changements :

1# Télécharger les changements depuis GitHub et les fusionner dans la branche locale
2git pull
3
4# Pull depuis une branche précise
5git pull origin main

pull = fetch + merge :

• git fetch - télécharge les changements
• git merge - les fusionne dans ta branche

git clone - Cloner un dépôt

Télécharger un projet existant depuis GitHub :

1git clone https://github.com/username/krakens-call.git
2cd krakens-call
3npm install
4npm run dev

Workflow avec Git et GitHub

Workflow typique du pirate :

1. Nouvelle fonctionnalité

1# Créer une branche
2git checkout -b feature/pirate-profile
3
4# Travailler sur le code...
5# Modifier app/profile/page.tsx
6
7# Vérifier les changements
8git status
9git diff
10
11# Ajouter au stage
12git add app/profile/
13
14# Commit
15git commit -m "Add pirate profile page with stats"
16
17# Push vers GitHub
18git push origin feature/pirate-profile

2. Pull Request sur GitHub

1. Va sur GitHub
2. Tu verras une bannière : « feature/pirate-profile had recent pushes »
3. Clique sur « Compare & pull request »
4. Remplis :
   • Title : « Add pirate profile page »
   • Description : ce que tu as fait, pourquoi, des captures d'écran
5. Clique sur « Create pull request »

Une Pull Request (PR) est une demande de fusion des changements de ta branche dans main. L'équipe peut faire une revue de code.

3. Revue et fusion

1. D'autres développeurs relisent le code
2. Ils laissent des commentaires
3. Tu fais des corrections (nouveaux commits sur la même branche)
4. Quand tout est OK, quelqu'un clique sur « Merge pull request »
5. La branche est fusionnée dans main

4. Synchroniser le main local

1# Basculer vers main
2git checkout main
3
4# Télécharger les changements depuis GitHub
5git pull
6
7# Supprimer la branche feature locale
8git branch -d feature/pirate-profile

Annuler des changements - Quand quelque chose tourne mal

Annuler les changements d'un fichier (non committé)

1# Restaurer le fichier au dernier commit
2git checkout -- app/page.tsx
3
4# Restaurer tous les fichiers
5git checkout -- .

Retirer des fichiers du stage (git add)

1# Retirer du stage, garder les changements dans le fichier
2git reset app/page.tsx
3
4# Tout retirer du stage
5git reset

Annuler le dernier commit (localement)

1# Annuler le commit, garder les changements dans les fichiers
2git reset --soft HEAD~1
3
4# Annuler le commit, supprimer les changements dans les fichiers (DANGER !)
5git reset --hard HEAD~1

Attention : --hard SUPPRIME les changements sans aucun moyen de les récupérer !

Revert d'un commit (déjà pushé)

Si le commit est déjà sur GitHub :

1# Créer un nouveau commit qui inverse les changements
2git revert a3f5b8c
3
4# Push
5git push

revert crée un nouveau commit - plus sûr que reset.

Git dans Cursor

Cursor intègre le support de Git !

Panneau Source Control

1. Clique sur l'icône Source Control (à gauche, 3 cercles reliés par des branches)
2. Tu verras :
   • Les fichiers modifiés
   • Le bouton + (git add)
   • Un champ pour le message de commit
   • Le bouton Commit

Workflow dans Cursor :

1. Modifie les fichiers
2. Ouvre Source Control (Ctrl + Shift + G, aussi Control sur Mac)
3. Clique sur + à côté des fichiers (stage)
4. Tape le message de commit
5. Clique sur Commit
6. Clique sur « ... » → Push

AI Commit Messages : L'IA de Cursor peut suggérer des messages de commit à partir de tes changements !

Utiliser l'IA pour Git

Demande à l'IA de Cursor :

Prompt 1 :

1How to undo the last commit in Git?

Prompt 2 :

1Write a good commit message for landing page changes - I added a hero section and cta button

Prompt 3 :

1How to resolve a merge conflict in app/page.tsx?

Bonnes pratiques Git

Commite souvent - petits commits fréquents > commits rares et volumineux Bons messages de commit - explique QUOI et POURQUOI Une branche par fonctionnalité - une fonctionnalité = une branche Pull avant push - toujours git pull avant git push Ne commite pas de secrets - .env dans .gitignore Revue de code - utilise les Pull Requests Main fonctionne toujours - ne fusionne pas de code cassé dans main

Ne commite pas node_modules/ - énorme, inutile Ne fais pas push --force sur main (sauf en cas d'absolue nécessité) Ne commite pas de WIP sans description - décris ce qui est en cours

Résumé

Git - système de contrôle de version, le journal de bord du code GitHub - plateforme pour stocker du code en ligne git init - initialisation du dépôt git add - ajouter des fichiers au stage git commit - enregistrer les changements (snapshot) git push - envoyer les commits vers GitHub git pull - télécharger les changements depuis GitHub git branch - créer des branches git merge - fusionner les changements entre branches Pull Request - demande de revue et de fusion .gitignore - fichiers ignorés par Git Cursor Source Control - interface graphique pour Git dans l'éditeur

Prochaines étapes : Dans les modules suivants, nous utiliserons Git pour :

• Sauvegarder l'avancement du projet
• Créer des branches de fonctionnalité
• Déployer sur Vercel (Vercel se connecte avec GitHub !)

À tout de suite !