Aller au contenu

Exercice : provoquer et régler un conflit

L'essentiel en 3 points

  1. En duo, dans un petit dépôt d'exercice créé par Classroom 50, vous allez provoquer un conflit exprès, puis le régler. Rien ne peut briser votre vrai projet.
  2. Vous pratiquez tout le flux de l'équipe : une branche chacun, une pull request, la mise à jour avec main, le conflit, la fusion.
  3. Durée : environ 25 minutes. Puis vous inversez les rôles.

Avant de commencer

Gardez ouverte la page Git en équipe : chaque étape y est expliquée en détail. Ici, on parle de personne A et personne B : décidez qui est qui. Dans les schémas, la personne A s'appelle Zoé (branche zoe) et la personne B, Léo (branche leo).

Où se passe chaque étape

Chaque étape commence par l'endroit où vous la faites :

Icône Où Pour quoi
Classroom 50, dans le navigateur Obtenir le dépôt (partie 1 seulement)
github.com, dans le navigateur Les pull requests et les fusions dans main
VS Code, sur votre poste Modifier le code, et Git : branche, commit, push, mise à jour
GitHub Desktop, sur votre poste Au choix, à la place de VS Code pour Git seulement

Quand une étape se fait dans VS Code ou dans GitHub Desktop, il y a deux onglets : choisissez le vôtre.

À retenir : sur votre poste, vous travaillez sur votre branche. Sur github.com, vous fusionnez dans main.

Partie 1 : obtenir votre dépôt de duo (5 min)

Votre dépôt est créé pour vous par Classroom 50, avec le fichier index.html de départ déjà dedans.

Accepter l'exercice dans Classroom 50

  1. Avant tout : vous devez avoir accepté l'invitation à l'organisation GitHub du cours (courriel de GitHub). Sinon, Classroom 50 affiche « Not a member yet » : venez me voir.
  2. Personne A : ouvrez le lien ci-dessus, connectez-vous avec Sign in with GitHub, puis Accept assignment. Choisissez de créer un groupe.
  3. Personne B : ouvrez le même lien, et rejoignez le groupe de la personne A. Ne créez pas un deuxième groupe!
  4. Quand le dépôt est prêt, cliquez sur Open repository : vous arrivez sur github.com. Vérifiez que vous voyez le même dépôt tous les deux. Gardez cet onglet ouvert : vous y reviendrez pour les pull requests.
  5. Chacun clone le dépôt sur son poste. Sur github.com, le bouton vert Code donne l'adresse du dépôt à copier.

Ctrl+Shift+P → Git: Clone → collez l'adresse → choisissez un dossier → Open.

File → Clone repository → onglet URL → collez l'adresse → Clone. Puis Open in Visual Studio Code pour modifier le code.

Plan B : si Classroom 50 ne fonctionne pas

Ouvrez cet encadré seulement si je vous le demande, ou si votre duo reste bloqué. On crée le même dépôt, directement sur GitHub.

  1. Personne A : ouvrez le dépôt modèle , puis Use this template → Create a new repository. Créez-le dans votre compte, en privé, sous le nom exercice-conflit-git.
  2. Personne A : dans le nouveau dépôt, Settings → Collaborators → Add people. Ajoutez la personne B, et marie-michelle-ouellet (c'est votre remise).
  3. Personne B : acceptez l'invitation, reçue par courriel ou dans les notifications de github.com.
  4. Chacun clone le dépôt sur son poste et l'ouvre dans VS Code.

La suite de l'exercice est identique. C'est d'ailleurs exactement comme ça que fonctionne le dépôt de votre vrai projet.

Le dépôt est privé : seuls vous deux et moi y avons accès. Ouvrez index.html : il contient ceci.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exercice conflit</title>
</head>
<body>
  <h1>Notre récit</h1>
  <p>Couleur principale : à décider</p>
</body>
</html>

Où on en est : une seule branche, main, avec le commit de départ.

gitGraph
  commit id: "départ"

Partie 2 : une branche chacun (3 min)

Chacun, sur son poste, crée sa branche à partir de main, à son prénom (en minuscules, sans accents), puis la publie sur GitHub.

  1. En bas à gauche, cliquez sur le nom de la branche (main).
  2. + Create new branch… → votre prénom → Entrée.
  3. Panneau Source Control (Ctrl+Shift+G) → bouton Publish Branch.
  4. En bas à gauche, vous voyez maintenant votre branche.
  1. En haut, Current branch → New branch.
  2. Votre prénom → Create branch (à partir de main).
  3. En haut, Publish branch.
  4. Current branch affiche maintenant votre branche.

Vérifiez : sur github.com, rechargez la page du dépôt. Le menu des branches (le bouton main, au-dessus de la liste des fichiers) affiche main et vos deux branches.

Où on en est : deux branches de plus, qui partent de main.

gitGraph
  commit id: "départ"
  branch zoe
  checkout main
  branch leo

Partie 3 : modifier la même ligne (5 min)

En même temps, chacun modifie la même ligne de index.html, chacun à sa façon :

  • Personne A remplace Notre récit par un titre de son choix.
  • Personne B remplace aussi Notre récit, par un autre titre.

Puis chacun fait un commit sur sa branche, et un push. Le message : Commun : change le titre de la page.

  1. Panneau Source Control (Ctrl+Shift+G) : écrivez le message.
  2. Commit (si VS Code demande d'ajouter les fichiers, répondez Yes).
  3. Sync Changes (ou Push).
  1. En bas à gauche, écrivez le message dans Summary.
  2. Commit to votre branche.
  3. En haut, Push origin.

Où on en est : chaque branche a un commit. main n'a pas bougé.

gitGraph
  commit id: "départ"
  branch zoe
  checkout main
  branch leo
  checkout zoe
  commit id: "A : titre"
  checkout leo
  commit id: "B : titre"

Partie 4 : la première fusion passe (3 min)

Personne A, tout se passe sur github.com, dans l'onglet de votre dépôt.

  1. Ouvrez la page de votre dépôt (l'onglet gardé ouvert à la partie 1, ou github.com/apprendre-avec-mariemi, puis votre dépôt).
  2. Ouvrez une nouvelle pull request. Deux chemins, au choix :
    • juste après votre push, un bandeau jaune apparaît en haut de l'onglet Code : « zoe had recent pushes ». Cliquez sur le bouton vert Compare & pull request;
    • sinon : l'onglet Pull requests, en haut du dépôt (à côté de Code et Issues), puis le bouton vert New pull request, à droite.
  3. Vérifiez la direction, en haut de la page, dans les deux menus : base: main ← compare: zoe. La flèche va de votre branche vers main. GitHub affiche en vert Able to merge.
  4. Cliquez sur le bouton vert Create pull request. Écrivez un titre (Commun : change le titre de la page), puis cliquez encore sur Create pull request, sous le formulaire.
  5. Vous êtes maintenant sur la page de la PR no 1. Descendez : bouton vert Merge pull request, puis Confirm merge. L'étiquette violette Merged apparaît.

Aucun problème : main n'avait pas changé depuis la création de la branche.

Où on en est : le titre de A est dans main.

gitGraph
  commit id: "départ"
  branch zoe
  checkout main
  branch leo
  checkout zoe
  commit id: "A : titre"
  checkout leo
  commit id: "B : titre"
  checkout main
  merge zoe id: "PR 1"

Partie 5 : la deuxième fusion bloque (2 min)

Personne B, sur github.com : ouvrez à votre tour une pull request, exactement comme aux étapes 1 à 4 de la partie 4, avec compare: leo.

Cette fois, à l'étape 3, GitHub affiche en rouge Can't automatically merge. Créez la PR quand même. Sur la page de la PR, vous voyez : This branch has conflicts that must be resolved, et le bouton de fusion est gris.

Normal : main contient maintenant le titre de A, et votre branche, celui de B, sur la même ligne. Git ne peut pas deviner lequel garder.

N'utilisez pas le bouton Resolve conflicts de GitHub

On règle le conflit sur votre poste, à la partie 6 : vous pourrez tester la page avant de l'envoyer.

Où on en est : rien n'a changé depuis la partie 4. La PR no 2 attend : leo et main ont modifié la même ligne depuis leur point de départ commun.

Partie 6 : régler le conflit (7 min)

Personne B, sur votre poste, sur votre branche : mettez votre branche à jour avec main. C'est là que le conflit apparaît.

  1. Ctrl+Shift+P → Git: Fetch (récupère le nouveau main de GitHub).
  2. Ctrl+Shift+P → Git: Merge… (ou Merge Branch…) → choisissez origin/main.
  3. VS Code annonce un conflit. Dans Source Control, index.html est marqué d'un !. Ouvrez-le.
  1. Menu Branch → Update from main.
  2. Une fenêtre annonce un conflit dans index.html : Open in Visual Studio Code.

Dans index.html, repérez les marqueurs <<<<<<<, ======= et >>>>>>>.

  1. Décidez à deux du bon titre. Au-dessus du conflit, cliquez sur Accept Current Change (votre titre), Accept Incoming Change (celui de main), ou écrivez une nouvelle version à la main.
  2. Vérifiez qu'il ne reste aucun marqueur. Ouvrez la page avec Live Server.
  3. Enregistrez.

Puis terminez la fusion, et envoyez-la :

Source Control → ajoutez le fichier (+) → Commit (le message est déjà écrit) → Sync Changes.

Continue merge, puis en haut, Push origin.

Retournez sur github.com, onglet Pull requests → votre PR no 2. Le conflit a disparu, et le bouton est vert : Merge pull request → Confirm merge.

Personne A : mettez votre branche à jour avec main à votre tour (mêmes étapes que B, sans conflit cette fois), puis push. Vous avez maintenant le titre final.

Où on en est : le conflit est réglé dans leo, leo est fusionnée dans main, et zoe est à jour.

gitGraph
  commit id: "départ"
  branch zoe
  checkout main
  branch leo
  checkout zoe
  commit id: "A : titre"
  checkout leo
  commit id: "B : titre"
  checkout main
  merge zoe id: "PR 1"
  checkout leo
  merge main id: "conflit réglé" type: HIGHLIGHT
  checkout main
  merge leo id: "PR 2"
  checkout zoe
  merge main id: "zoe à jour"

Partie 7 : on inverse les rôles

Recommencez les parties 3 à 6 avec la ligne Couleur principale, en inversant les rôles : cette fois, c'est B qui fusionne en premier, et A qui règle le conflit. Essayez Accept Both Changes, pour voir ce qu'il fait.

Pour vérifier

  • Onglet Pull requests → Closed : 4 PR fusionnées.
  • Onglet Insights → Network : le schéma de vos branches qui se rejoignent dans main, comme ceux de cette page. (Dans le terminal de VS Code, git log --oneline --graph --all montre la même chose.)
  • Chacun a réglé un conflit lui-même.
  • Vos commits suivent la convention : Zone : ce qui a changé.

Une fois l'exercice terminé, ne supprimez pas le dépôt : c'est votre remise. Je vois vos PR et votre historique dans Classroom 50.