Introduction : Git et GitHub¶

Bienvenue dans le monde du développement collaboratif ! Dans cette section, vous allez découvrir deux outils essentiels que tout développeur moderne doit maîtriser : Git et GitHub. Ces outils vous accompagneront tout au long de votre carrière, que vous travailliez seul ou en équipe.

Qu'est-ce que Git ?¶

Git : Votre machine à remonter le temps¶

Git est un système de gestion de versions (en anglais : Version Control System ou VCS). Imaginez que vous écrivez un document important et que vous voulez garder une trace de toutes vos modifications, pouvoir revenir en arrière si vous faites une erreur, ou même comparer différentes versions. C'est exactement ce que fait Git pour votre code !

Pourquoi Git est indispensable ?¶

Sans Git, voici ce qui pourrait arriver :

• ❌ Vous perdez votre travail après une mauvaise manipulation
• ❌ Vous ne savez plus quelle version fonctionne
• ❌ Vous écrasez accidentellement le code de votre collègue
• ❌ Vous devez gérer manuellement des dossiers comme projet_v1, projet_v2_final, projet_v2_final_vraiment_final

Avec Git :

• ✅ Chaque modification est sauvegardée avec un historique complet
• ✅ Vous pouvez revenir à n'importe quelle version précédente
• ✅ Plusieurs personnes peuvent travailler simultanément sans conflit
• ✅ Vous pouvez expérimenter sans risque sur des branches séparées

Les concepts fondamentaux de Git¶

Pour bien comprendre Git, il faut maîtriser quelques concepts clés :

1. Repository (Dépôt)¶

Un repository (ou repo) est comme un dossier intelligent qui contient :

• Tous vos fichiers de projet
• L'historique complet de toutes les modifications
• Les informations sur qui a modifié quoi et quand

2. Commit¶

Un commit est une sauvegarde de l'état de votre projet à un instant T. C'est comme prendre une photo de tous vos fichiers.

Caractéristiques d'un commit :

• Contient tous les changements depuis le dernier commit
• Possède un message descriptif (ex. "Ajout du système de connexion")
• Possède un identifiant unique (hash)
• Contient l'auteur et la date

gitGraph
    commit id: "Initial commit"
    commit id: "Ajout de la page d'accueil"
    commit id: "Création du formulaire de contact"
    commit id: "Correction du bug d'affichage"

3. Branch (Branche)¶

Une branch est une ligne de développement parallèle. Elle vous permet de travailler sur une nouvelle fonctionnalité sans affecter le code principal.

Utilisation typique des branches :

• main : La version stable et officielle de votre projet
• feature/login : Développement du système de connexion
• bugfix/header : Correction d'un bug dans l'en-tête
• experiment/new-design : Test d'un nouveau design

gitGraph
    commit id: "A"
    commit id: "B"
    branch feature/login
    commit id: "C"
    commit id: "D"
    checkout main
    commit id: "E"
    checkout feature/login
    commit id: "F"
    checkout main
    merge feature/login

4. Remote (Dépôt distant)¶

Un remote est une copie de votre repository hébergée sur un serveur (généralement GitHub). Cela permet de :

• Sauvegarder votre code dans le cloud
• Collaborer avec d'autres développeurs
• Accéder à votre code depuis n'importe quel ordinateur

Les zones de Git¶

Git organise votre travail en trois zones distinctes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

┌─────────────────┐
│  Working Dir    │  ← Vous modifiez vos fichiers ici
│  (Espace de     │
│   travail)      │
└────────┬────────┘
         │ git add
         ▼
┌─────────────────┐
│  Staging Area   │  ← Fichiers préparés pour le commit
│  (Index)        │
└────────┬────────┘
         │ git commit
         ▼
┌─────────────────┐
│  Repository     │  ← Historique permanent
│  (.git)         │
└────────┬────────┘
         │ git push
         ▼
┌─────────────────┐
│  Remote         │  ← GitHub (serveur)
│  (GitHub)       │
└─────────────────┘

Qu'est-ce que GitHub ?¶

GitHub : Le réseau social des développeurs¶

GitHub est une plateforme web qui héberge vos dépôts Git. C'est un peu comme Google Drive, mais spécialement conçu pour les développeurs et le code source.

Pourquoi utiliser GitHub ?¶

GitHub offre bien plus que le simple hébergement de code :

1. Hébergement et sauvegarde¶

• 💾 Vos projets sont sauvegardés dans le cloud
• 🔒 Contrôle d'accès (projets publics ou privés)
• 🌍 Accessible depuis n'importe où dans le monde

2. Collaboration¶

• 👥 Travail en équipe facilité
• 💬 Système de commentaires sur le code
• 🔄 Revue de code (Pull Requests)
• 📋 Gestion des tâches (Issues)

3. Portfolio professionnel¶

• 📊 Votre profil GitHub montre votre activité de développeur
• ⭐ Vous pouvez mettre en avant vos meilleurs projets
• 🤝 Les recruteurs consultent souvent les profils GitHub

4. Intégration avec GitHub Classroom¶

Pour ce cours, GitHub Classroom permet à votre enseignant de :

• 📝 Distribuer automatiquement les exercices
• 👀 Suivre votre progression en temps réel
• ✅ Évaluer votre travail
• 📊 Fournir des retours personnalisés

Différence entre Git et GitHub¶

Il est important de ne pas confondre les deux :

Workflow de base avec Git¶

Maintenant que vous comprenez les concepts, voyons le cycle de travail que vous utiliserez quotidiennement.

Le cycle Git en 4 étapes¶

graph LR
    A[1. Modifier<br/>des fichiers] --> B[2. git add<br/>Préparer]
    B --> C[3. git commit<br/>Sauvegarder]
    C --> D[4. git push<br/>Partager]
    D --> A

Étape 1 : Modifier vos fichiers¶

Vous travaillez normalement sur vos fichiers avec votre éditeur de code (VS Code, dans notre cas).

1
2
3

<!-- Exemple : modification d'un fichier -->
<h1>Hello World</h1>
<p>Mon premier projet</p>

Étape 2 : git add - Préparer les changements¶

La commande git add ajoute vos modifications à la zone de staging (zone d'attente).

1
2
3

git add .                    # Ajoute tous les fichiers modifiés
git add index.html          # Ajoute uniquement index.html
git add *.css               # Ajoute tous les fichiers CSS

Étape 3 : git commit - Enregistrer les changements¶

La commande git commit crée un point de sauvegarde permanent dans l'historique.

1

git commit -m "Ajout de la page d'accueil"

Anatomie de la commande :

• git commit : Crée un commit
• -m : Option pour ajouter un message
• "message" : Description claire de ce que vous avez fait

Étape 4 : git push - Envoyer sur GitHub¶

La commande git push envoie vos commits locaux vers GitHub.

1

git push

Après cette commande :

• Vos modifications sont sauvegardées dans le cloud
• Votre enseignant peut voir votre travail
• Vous pouvez y accéder depuis un autre ordinateur

Exemple complet¶

Imaginons que vous créez une page web :

1
2
3
4
5
6
7
8
9

# 1. Vous créez et modifiez index.html
# 2. Vous préparez le fichier
git add index.html

# 3. Vous créez un commit
git commit -m "Création de la page d'accueil"

# 4. Vous envoyez sur GitHub
git push

Et c'est tout ! Vous répéterez ce cycle de nombreuses fois pendant vos projets.

Commandes Git supplémentaires utiles¶

Voici quelques commandes que vous utiliserez fréquemment :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Voir l'état actuel (fichiers modifiés, en attente, etc.)
git status

# Voir l'historique des commits
git log

# Voir l'historique simplifié
git log --oneline

# Voir les différences avant de commiter
git diff

# Télécharger les dernières modifications depuis GitHub
git pull