Scénario 2 - Utiliser git pour un travail collaboratif

Contenu

Scénario 2 - Utiliser git pour un travail collaboratif#

Pour toute l’activité, vous aurez besoin de 2 développeurs. Une personne joue le rôle de Alex et l’autre joue le rôle de Camille. Vous utiliserez git dans le but de travailler de manière collaborative sur un projet.

L’objectif est de créer le site web d’un restaurant. Dans un premier temps, vous partez d’un gabarit de site web.

Attention : vous devez travailler sur un nouveau dossier sur votre ordinateur, en particulier pas dans un sous dossier dont le dossier parent est déjà suivi sur Git !!

Initialisation du dépot#

Résumé du scénario

Alex va télécharger les sources, initialiser le projet github, puis inviter Camille à collaborer. Camille va alors également initialiser son espace de travail.

Alex : télécharger le code source resto.zip, le décompresser dans un dossier SiteResto.
Alex : initialiser git dans le dossier SiteResto.
Alex : commit l’intégralité des sources. Vérifier avec un git status avant et après si nécessaire.
Alex : créer un dépot sur GitHub pour le SiteResto.
Alex : lier le dossier SiteResto avec le dépot github : utiliser la commande proposée à la création du projet git : git remote add origin ...
Alex : push le contenu du dossier de travail SiteResto vers gitHub
Alex : vérifier sur GitHub que les fichiers sont disponibles
Alex : sur GitHub, donner les droits à Camille sur le projet : Settings, Collaborators, Add people.
Camille : cloner le projet dans un espace sur sa machine.
Alex et Camille : visualiser chacun le site web, en ouvrant le fichier index.html dans un navigateur.

Développement collaboratif#

Résumé du scénario

Alex et Camille vont faire avancer chacun le site web, en travaillant de manière conjointe sur la branche principale. Les rôles sont répartis : Alex modifie le code CSS, Camille modifie le code HTML. En travaillant sur des fichiers distincts, la fusion devrait se faire sans ambiguïté à la fin.

Modifications indépendantes#

Alex	Camille
Dans le fichier `style.min.css`, changer la couleur des primary-headings	Dans le fichier index.html, modifier quelques-uns des titres de classe `primary-heading` pour les traduire en français
Vérifier les modifications dans le navigateur	Vérifier les modifications dans le navigateur
`commit` le fichier `style.min.css` modifié.	`commit` le fichier `index.html` modifié.
Dans le fichier style.min.css, changer la couleur des secondary-headings (2 endroits)	Dans le fichier index.html, modifier quelques-uns des titres de classe `secondary-heading` pour les traduire en français
Vérifier les modifications dans le navigateur	Vérifier les modifications dans le navigateur
`commit` le fichier `style.min.css` modifié.	`commit` le fichier `index.html` modifié.

Alex : push ses modifications.
Camille : push ses modifications. Quel est le problème rencontré ? Faire un pull avant de pousser à nouveau.
Alex : pull
Alex et Camille : visualiser le même site web, avec les titres et les couleurs modifiés.
Alex et Camille : visualiser avec git log l’historique des modifications.

Modifications d’un même fichier#

Résumé du scénario

Alex et Camille vont modifier de manière collaborative le même fichier index.html, à des endroits différents. Comment se passera la fusion ?

Alex	Camille
Dans le fichier index.html, traduire en français les titres du menu en haut à droite.	Dans le fichier index.html, traduire en français les éléments du formulaire de contact en bas de page.
Vérifier les modifications dans le navigateur	Vérifier les modifications dans le navigateur
`commit` le fichier `index.html` modifié.	`commit` le fichier `index.html` modifié.

Camille : push ses modifications.
Alex : push ses modifications. Quel est le problème rencontré ? Faire un pull. Comment est géré le merge ? Pousser à nouveau.
Camille : pull
Alex et Camille visualisent le même site web, avec le menu et le formulaire traduits.

Modification d’une même ligne de code#

Résumé du scénario

Alex et Camille ne se sont pas concertés. Ils modifient de manière concurrente le même fichier index.html, aux mêmes endroits. La fusion des fichiers va donc nécessiter une prise de décision.

Alex	Camille
Dans le fichier index.html, modifier les 3 paragraphes `sub-heading`.	Dans le fichier index.html, supprimer les 3 paragraphes `sub-heading`.
Vérifier les modifications dans le navigateur	Vérifier les modifications dans le navigateur
`commit` le fichier `index.html` modifié.	`commit` le fichier `index.html` modifié.

Alex : push ses modifications.
Camille : push ses modifications. Quel est le problème rencontré ? Faire un pull.
Camille : Résoudre le conflit, commit, puis pousser à nouveau.
Alex : pull
Alex et Camille : visualiser le choix retenu par Camille.

Visualisation de l’historique des contributions#

Depuis l’interface github, visualiser dans Insights puis network le graphe représentant les différents commit et merge du projet.
Facultatif : depuis depuis Visual Studio Code, vous pouvez installer le plugin git history qui donne une visualisation similaire (View History).

Mise en ligne avec github pages#

Résumé du scénario

Le chef est satisfait, Alex et Camille vont pouvoir mettre en ligne le site web final. Alex publie le site, après quoi Camille fera juste une petite retouche finale.

Alex : Dans l’interface github, aller dans Settings, Pages et choisir la branche master comme source pour publier votre site web.

https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

Alex et Camille : visualiser le site web sur l’adresse en ligne. Nb : la mise à jour peut prendre quelques minutes. En attendant, il est possible d’aller voir l’onglet Action / Page Build sur gitHub pour voir l’état d’avancement.
Camille : modifier le code index.html pour changer le texte de la description commençant par « Voluptabilis » (vers la ligne 100).
Camille : commitet push les changements. Vérifier que la mise à jour est bien propagée sur la version en ligne du site web.

Travail sur une branche de développement#

Résumé du scénario

Le site web est maintenant livré et en ligne, donc plus question de tout casser. Pourtant le chef demande de revoir intégralement le site web. Alex et Camille vont donc le faire sur une branche de développement qui sera fusionnée une fois qu’elle sera stable.

Création d’une branche de dev#

Résumé du scénario

Camille commence les travaux de développement, tandis qu’Alex vérifie que rien ne bouge sur le site web publié.

Camille : créer une nouvelle branche dev : git branch dev
Camille : basculer sur la branche dev : git checkout dev
Camille : trouver sur le web une image de paysage permettant de remplacer l’image img_1.jpg
Camille : modifier le fichier index.html pour remplacer l’image img/img_1.jpg par celle choisie. Vérifier dans un navigateur que l’image apparait.
Camille : commit les changements en pensant bien à ajouter l’image.
Camille : push les modifications en créant une branche sur le site distant : git push origin dev
Alex : vérifier que la version en ligne sur GitHub Pages n’est pas impacté.

Changement de branche#

Résumé du scénario

Alex est missionné pour continuer la branche de développement. Pendant ce temps, Camille va réaliser un correctif léger sur la branche principale.

A tout moment, un git status permet de vérifier la branche courante.

Alex	Camille
Récuperer les changements distants : `git pull`
Bascsuler sur la branche `dev` : `git checkout dev`	Basculer sur la branche `master`
Trouver sur le web une photo de pizza	Dans index.html, modifier le `title` du site web, qui apparait dans l’onglet du navigateur.
Dans le fichier index.html, remplacer l’usage de img/img_square_1.jpg par la photo de pizza (3 occurrences).
commit et push les changements en pensant bien à ajouter l’image.	commit et push les changements
Vérifier que les changements n’impactent pas le site web en ligne.	Vérifier que les changements sont biens visibles sur le site web en ligne.

Fusion de branche#

Résumé du scénario

On considère que la branche de développement est maintenant suffisamment aboutie. Il s’agit maintenant de mettre en ligne cette version finale. Camille va vérifier le travail d’Alex avant de fusionner le site web final.

Camille : se placer dans la branche dev et récupérer les modifications : git pull origin dev. Vérifier que les deux images apparaissent bien.
Camille : se placer dans la branche master. git checkout master
Camille : fusionner la branche dev dans la branche master. git merge dev
Camille : résoudre les éventuels conflits, commit si nécessaire et push.
Vérifier que le contenu visible sur GitPages est bien celui d’anciennement Dev.
Visualiser le graph des commit.

Travail de synthèse#

Résumé du scénario

Camille et Alex vont chacun travailler sur une fonctionnalité différente, et sur une branche différente. Leurs deux branches seront alors fusionnées dans la branche dev, puis dans la branche master.

Selon l’ordre de réalisation des actions, les conflits pourront être différents. Essayer à chaque étape de prédire les conflits qui risquent d’être rencontrés.

Alex	Camille
Choisir un aspect du site web à modifier	Choisir un autre aspect du site web à modifier
Créer une branche `devAlex` et s’y placer.	Créer une branche `devCamille` et s’y placer.
Implémenter les modifications choisies ci-dessus.	Implémenter les modifications choisies ci-dessus.
commit et push les changements	commit et push les changements
merge les changements avec la branche dev	merge les changements avec la branche dev
Vérifier que la branche de dev est toujours fonctionnelle	Vérifier que la branche de dev est toujours fonctionnelle
merge la branche dev avec la branche master	merge la branche dev avec la branche master
Vérifier que les changements sont biens visibles sur le site web en ligne.	Vérifier que les changements sont biens visibles sur le site web en ligne.