Versionner avec Git et GitHub

Enregistrer l'historique du projet avec Git et le publier sur GitHub.

Objectifs de la séance

• configurer Git sur son poste ;
• comprendre les notions de dépôt, de commit et de zone de préparation ;
• vérifier que le fichier .gitignore protège les fichiers qui ne doivent jamais être publiés ;
• créer un dépôt GitHub quiz-cyber-expo et y pousser le projet.

---

Petite vérification

Avant de commencer, vérifiez si vous savez...

1. dans src/app/index.tsx, citer le composant qui affiche le texte « Quiz Cyber » et le nom du style qui lui est appliqué
2. lancer le projet dans le navigateur et lire le titre affiché dans la barre en haut de l'écran
3. citer le fichier dans lequel on modifie le nom de l'application affiché sous son icône

📌 Réponse attendue

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

TP pour réfléchir et résoudre des problèmes

Pour l'instant, votre projet n'existe que sur votre ordinateur. Dans ce TP, vous allez enregistrer son historique avec Git, puis le publier sur GitHub. Toutes les commandes se tapent dans le terminal de VS Code, dans le dossier quiz-cyber-expo (arrêtez le serveur avec Ctrl + C ou ouvrez un second terminal).

Étape 1 — Configurer Git

Git signe chaque enregistrement avec votre nom et votre adresse e-mail. Cette configuration se fait une seule fois par ordinateur (utilisez la même adresse e-mail que sur votre compte GitHub) :

git config --global user.name "Prénom Nom"
git config --global user.email "prenom.nom@exemple.fr"
git config --global init.defaultBranch main

Bonne pratique - Une identité claire

Dans une équipe, l'historique Git indique qui a fait quoi et quand. Un nom et une adresse e-mail exacts permettent à GitHub de relier vos commits à votre compte.

Étape 2 — Observer l'état du dépôt

Bonne surprise : create-expo-app a déjà créé un dépôt Git et un premier enregistrement (« Initial commit »). Affichez l'historique, puis l'état des fichiers :

git log --oneline
git status

git status liste les fichiers modifiés depuis le dernier commit : vous devez y retrouver app.json, package.json, src/app/_layout.tsx et src/app/index.tsx (vos modifications des deux séances précédentes), ainsi que les fichiers supprimés par reset-project.

Bonne pratique - git status, toujours

Avant chaque git add et chaque git commit, tapez git status : vous verrez exactement ce qui va être enregistré, et vous éviterez d'envoyer un fichier par erreur.

Étape 3 — Vérifier le fichier .gitignore

Ouvrez le fichier .gitignore à la racine du projet. Il contient la liste des fichiers et dossiers que Git doit ignorer. Vérifiez qu'il contient bien ces deux lignes :

node_modules/
.env*.local

• node_modules/ : des milliers de fichiers recréés par npm install, inutile de les publier ;
• .env*.local : les fichiers de variables d'environnement (adresses de serveurs, clés...) que vous créerez au tutoriel 6. Ils ne doivent jamais être publiés.

Bonne pratique - Le .gitignore avant le premier envoi

Vérifiez toujours le .gitignore avant le premier git push : un fichier déjà publié reste visible dans l'historique, même si vous le supprimez ensuite.

Étape 4 — Enregistrer le travail des séances précédentes

Ajoutez toutes les modifications dans la zone de préparation, puis enregistrez-les dans un commit :

git add -A
git status
git commit -m "Personnaliser l'écran d'accueil et le titre"

Bonne pratique - Un message qui explique

Un bon message de commit commence par un verbe à l'infinitif et décrit ce que fait la modification : « Ajouter un README », « Corriger le calcul du score ». Évitez « modif » ou « test » : dans six mois, personne ne saura ce qu'ils contiennent.

Étape 5 — Écrire un README en français

Le fichier README.md est la page d'accueil du dépôt sur GitHub. Remplacez son contenu (en anglais) par une présentation du projet :

# Quiz Cyber (Expo)

Application mobile et Web de quiz sur la cybersécurité, réalisée avec **Expo** (SDK 58),
**React Native**, **TypeScript** et **Supabase**.

## Lancer le projet

```bash
npm install
npx expo start
```

- touche `w` : ouvrir la version Web dans le navigateur ;
- QR code : ouvrir l'application dans **Expo Go** sur votre téléphone.

## Auteur

Projet réalisé dans le cadre du BTS SIO.

Puis enregistrez ce changement dans un nouveau commit :

Bonne pratique - Un commit, une idée

Faites des commits petits et fréquents, chacun avec une seule intention (ici : la documentation). En cas de problème, il est alors facile de retrouver et d'annuler le bon commit.

Étape 6 — Publier le projet sur GitHub

1. Sur github.com, cliquez sur New repository.
2. Nom du dépôt : quiz-cyber-expo. Visibilité : Public (ou Private si votre enseignant le demande).
3. Ne cochez rien (ni README, ni .gitignore, ni licence) : votre projet en contient déjà.
4. Cliquez sur Create repository et copiez l'adresse HTTPS du dépôt (https://github.com/<votre-identifiant>/quiz-cyber-expo.git).

Reliez ensuite votre dépôt local au dépôt GitHub (appelé origin) et envoyez vos commits :

git remote add origin https://github.com/<votre-identifiant>/quiz-cyber-expo.git
git branch -M main
git push -u origin main

Lors du premier git push, une fenêtre de connexion à GitHub s'ouvre dans le navigateur (gestionnaire d'identifiants de Git). Si votre poste n'en dispose pas, GitHub n'accepte pas votre mot de passe : utilisez la commande gh auth login (outil GitHub CLI) ou un jeton d'accès personnel (personal access token), à demander à votre enseignant.

Bonne pratique - Vérifier ce qui a été publié

Rechargez la page du dépôt sur GitHub : le README s'affiche, et le dossier node_modules n'apparaît pas. Si vous voyez node_modules ou un fichier .env.local, prévenez votre enseignant avant d'aller plus loin.

📌 Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Notions théoriques

Git et GitHub : deux outils différents

• Git est un logiciel installé sur votre ordinateur : il enregistre l'historique des modifications d'un projet (qui a changé quoi, quand et pourquoi).
• GitHub est un site Web qui héberge des dépôts Git : il sert de sauvegarde, de vitrine (portfolio) et d'outil de travail en équipe (relecture de code, Pull Requests).

Dépôt, commit et zone de préparation

• un dépôt (repository) est un projet suivi par Git (le dossier caché .git contient tout l'historique) ;
• un commit est une photo de l'état des fichiers, avec un message, un auteur et une date ;
• la zone de préparation (staging area) contient ce qui fera partie du prochain commit.

 fichiers modifiés  --git add-->  zone de préparation  --git commit-->  historique local  --git push-->  GitHub

Commande	Rôle
git status	afficher l'état des fichiers (modifiés, préparés, nouveaux)
git add <fichier> / git add -A	préparer un fichier / toutes les modifications
git commit -m "message"	enregistrer les fichiers préparés dans l'historique
git log --oneline	afficher l'historique, un commit par ligne
git remote add origin <url>	relier le dépôt local à un dépôt distant
git push	envoyer les nouveaux commits vers le dépôt distant
git pull	récupérer les commits du dépôt distant

Le .gitignore et les secrets

Certains fichiers ne doivent jamais entrer dans l'historique :

• les fichiers générés (node_modules/, dist/) : volumineux et recréés automatiquement ;
• les secrets (fichiers .env.local, clés, mots de passe) : un dépôt GitHub est souvent public, et l'historique garde tout, même ce qui a été supprimé ensuite.

Un secret publié est un secret compromis

Si une clé secrète est publiée par erreur, la supprimer du dépôt ne suffit pas : elle reste dans l'historique et a peut-être déjà été copiée. La seule bonne réaction est de révoquer la clé et d'en générer une nouvelle.

Comment Git sera utilisé dans cette série

• à partir du tutoriel 3, chaque fonctionnalité sera développée sur sa propre branche (feature/...), puis fusionnée dans main grâce à une Pull Request sur GitHub ;
• chaque séance se termine par au moins un commit avec un message clair ;
• la branche main doit toujours contenir une version qui fonctionne.

---

Test de mémorisation/compréhension

Quelle est la différence entre Git et GitHub ?

Git est la version payante de GitHub

Ce sont deux noms pour le même logiciel installé sur l'ordinateur

GitHub sert à écrire le code, Git sert à l'exécuter sur le téléphone

Git gère l'historique localement, GitHub héberge les dépôts en ligne

Git fonctionne uniquement sous Linux et GitHub uniquement sous Windows

Quelle commande ajoute toutes les modifications à la zone de préparation ?

git add -A

git commit -A

git push -A

git status --all

git save --everything

Pourquoi le fichier .env.local ne doit-il jamais être envoyé sur GitHub ?

Parce qu'il est trop volumineux pour GitHub

Parce qu'il peut contenir des clés et adresses de serveurs

Parce que GitHub refuse les fichiers qui commencent par un point

Parce qu'il est recréé automatiquement par npm install à chaque lancement

Parce qu'il ne fonctionne que sur Windows

Que fait la commande git push -u origin main ?

Elle télécharge le dépôt GitHub et remplace tous les fichiers locaux

Elle crée une nouvelle branche appelée origin

Elle supprime la branche main du dépôt distant

Elle annule le dernier commit de la branche main

Elle envoie les commits de main vers le dépôt distant origin

Quel message de commit est le plus utile ?

modif

Ajouter un README en français

test 2

ça marche enfin !!!

Mise à jour de plusieurs fichiers divers et variés du projet

Une clé secrète a été publiée par erreur sur GitHub. Que faut-il faire ?

Rien, si le dépôt n'a pas encore d'étoiles

Supprimer le fichier puis faire un nouveau commit

Renommer le fichier qui contient la clé

Révoquer la clé et en générer une nouvelle

Passer le dépôt en privé pendant quelques jours, puis le repasser en public

---

Exercices complémentaires

Exercice A : décrire les écrans dans le README

Ajoutez au README une section ## Fonctionnalités qui liste ce que fera l'application (générateur de quiz, correction, score, classement). Enregistrez avec un commit puis envoyez-le avec git push.

Exercice B : explorer l'historique sur GitHub

Sur la page du dépôt, cliquez sur commits : retrouvez vos trois commits et ouvrez-en un pour voir les lignes ajoutées (en vert) et supprimées (en rouge).

---

Ce qu'il faut retenir

Notion	Résumé
Git	Logiciel qui enregistre l'historique des modifications d'un projet.
GitHub	Site qui héberge les dépôts Git : sauvegarde, portfolio, travail en équipe.
Commit	Photo de l'état des fichiers, avec un message à l'infinitif qui explique la modification.
git add / git commit	Préparer puis enregistrer des modifications.
git push	Envoyer les commits locaux vers le dépôt distant origin.
.gitignore	Liste des fichiers jamais versionnés : node_modules/, secrets .env*.local.

---

Aperçu de la prochaine séance

Le projet est en sécurité sur GitHub. Avant d'afficher de vraies questions, il faut décider de leur forme : un énoncé, des réponses, un thème, un niveau... Dans le tutoriel suivant, vous allez décrire précisément ces données avec TypeScript, puis écrire vos premières fonctions de traitement (et leurs tests), jusqu'au mélange des questions au hasard.