Gérez du code avec Git et GitHub

Accédez à un dépôt distant

Maintenant que vous savez travailler à partir d’un projet local et que vous maîtrisez le système de branches, voyons comment accéder à un dépôt distant et le copier en local. 

Je vous explique comment faire dans la vidéo ci-dessous et vous invite également à suivre les différentes étapes sous la vidéo :

Imaginons que vous deviez travailler sur un projet avec des amis. Ces derniers ont créé le repository sur GitHub. Il est temps pour vous de récupérer le code pour apporter vos modifications :

Tout d’abord, vous allez récupérer l’URL du dépôt distant : cela se passe sur GitHub !

• Accédez au dépôt distant sur lequel vous souhaitez travailler.

• Cliquez sur le bouton "Code" pour copier le dépôt, puis sur la section SSH.

Et tadam, vous avez la fameuse URL dont nous allons avoir besoin. Copiez-la dans le presse-papier. Retournez sur Git Bash, et tapez la commande suivante :

git clone git@github.com:OpenClassrooms-Student-Center/7162856-G-rez-Git-et-GitHub.git

Et voilà ! Vous pouvez maintenant vous diriger dans le dossier sur votre ordinateur et accéder au code.

Mettez à jour le dépôt en local

Imaginons que durant la semaine, un de vos amis ait ajouté des modifications sur la branche main et que vous souhaitiez les récupérer.  Comment faire ?

Assurez-vous d’être dans le dépôt :

cd 7162856-G-rez-Git-et-GitHub

Utilisez la commande  git pull :

git pull origin main

Cela devrait afficher ces petites lignes de commande !

C’est bon signe, la magie a opéré ! 

Vous devriez maintenant avoir l’ensemble des fichiers et dossiers du repository à jour dans votre répertoire courant. La duplication s’effectue très rapidement, puisque les fichiers vont être compressés avant le transfert. Vous allez donc les recevoir à la vitesse de l’éclair ! Enfin... rapidement, quoi.

Vous pouvez maintenant vous mettre à vos développements, et cela sans faire de bêtises ! Mais avant, vérifions quelques détails et parcourons ce nouveau repository.

Collaborez sur GitHub

Je vous disais dans les chapitres précédents que GitHub est un excellent outil de collaboration. Mais, en quoi GitHub aide les développeurs à collaborer ?

GitHub est avant tout une interface, son rôle est de faciliter la collaboration en ajoutant un aspect design, facile, ludique et simple d’utilisation pour les développeurs. Jusqu’ici nous avons observé les changements effectués sur des branches via des lignes de commande. Si nous travaillons à plusieurs sur un projet, il serait bien plus pratique d’accéder aux modifications sans ligne de commande, n’est-ce pas ?

Vérifiez les branches de votre projet

Commençons par vérifier les différentes branches du projet : vos collègues travaillent peut-être sur de nouvelles fonctionnalités. Pour nous en assurer, nous pouvons utiliser la commande   git branch  .

Si de nouvelles branches ont été créées, vous devriez voir :

* main
new-version-css
update-readme

Dans les chapitres précédents, git merge nous permettait de fusionner les modifications de notre branche avec la branche principale.

Mais dans un contexte professionnel, c’est un peu plus compliqué ! 😀 Lorsque vous travaillez en équipe sur un repository, la branche principale est souvent bloquée. Vous ne pouvez pas pusher directement votre code sans qu’il soit vérifié. Vous ne pouvez donc pas fusionner vos modifications vous-même !

Eh bien presque... On fait ce qu’on appelle une pull request ! 

Réalisez une pull request

Une pull request, ou demande de pull, en français, est une fonctionnalité de GitHub qui permet de demander aux propriétaires d’un repository l’autorisation de fusionner nos changements sur la branche principale ou toute autre branche sur laquelle on souhaite apporter nos modifications.

Donc si vous créez une pull request, vous avez au préalable :

1. Créé une nouvelle branche.

2. Envoyé votre code sur cette même branche.

C’est parti ! Passons à la pratique avec votre propre repository. Retournez dans votre projet PremierProjet.

Utilisez la commande   git branch  pour créer une nouvelle branche appelée update-color et rendez vous sur votre nouvelle branche :

git branch update-color 
git checkout update-color

Ouvrez votre fichier style.css et modifiez la valeur pour qu’elle soit bleue :

h1 {

  color: blue;

}

Maintenant, il est temps pour vous d’ajouter votre commit et d’envoyer votre code sur GitHub. Si besoin, vous pouvez vous référer au chapitre précédent.

Rendez-vous sur la page GitHub de votre projet afin de vérifier que tout s’est passé comme prévu. Nous avons rempli nos deux conditions pour pouvoir créer une pull request :

1. Créer une nouvelle branche. ✅

2. Envoyer le code sur cette même branche. ✅

Lorsque ces deux conditions sont remplies, un bandeau apparaît à l’écran pour vous suggérer de créer une pull request :

Parfait, tout se passe comme prévu !

• Ajoutez un commentaire pour expliquer les raisons de vos modifications.

Ici, votre modification consiste à changer la couleur d’une balise. Je vous conseille donc de commenter : “Change h1 color from red to blue”.

GitHub indique les modifications effectuées par un code couleur. Les lignes en rouge indiquent une suppression, et les lignes vertes une addition. Ici on voit bien qu’il y eu un changement sur une ligne, l’attribut red a été supprimé, et a été remplacé par blue.

• Cliquez sur Create pull request pour valider la pull request.

• Et voilà une belle pull request prête à l’emploi :

Votre pull request est créée et peut être fusionnée avec la branche main en cliquant sur le bouton “Merge Pull Request”.

Félicitations, vous venez de créer votre première Pull Request !

Demandez une relecture de code

Sur des projets d’envergure, il peut arriver que votre code ne puisse être fusionné sur la branche principale sans être relu et validé par d’autres membres du projet. C’est ce qu’on appelle une Code Review, ou revue de code, en français. Cela permet de prévenir les erreurs éventuelles, de discuter sur un choix, une prise de position ou même de poser des questions. 

Et voilà, vous savez maintenant collaborer en équipe grâce à GitHub !

N’hésitez pas à revoir ces différentes étapes dans la vidéo ci-dessous :

En résumé

• Sur GitHub, nous pouvons récupérer l'URL d'un dépôt distant.

• git clone permet de copier en local un dépôt distant.

• git remote add permet de lier un dépôt à un "nom court", pour une plus grande facilité d’utilisation.

• git pull permet de dupliquer un dépôt GitHub en local.

• Une Pull Request permet de demander à fusionner votre code sur la branche principale.

Cette partie vous a permis de découvrir la gestion de versions pour le développement, et de prendre en main Git. Bien sûr, il vous arrivera de faire des erreurs et nous allons voir dans la partie suivante comment les réparer !

Mais avant cela, passons au quiz !