Objectif

Créez un dépôt et ajoutez quelqu'un en tant que réviseur à votre pull request pour commencer à collaborer sur votre code.

Avertissement : la section suivante de ce tutoriel décrit les étapes d'ajout d'un réviseur (ou d'un membre de l'équipe) à votre pull request, afin de vous permettre de collaborer sur votre code dans Bitbucket Cloud. Si vous ne travaillez pas avec un coéquipier ou si vous n'avez pas besoin d'ajouter de réviseurs pour le moment, n'hésitez pas à passer au prochain tutoriel : Découvrez le branching avec Bitbucket Cloud.

Mission

Jusqu'à présent, vous étiez la seule personne à travailler dans vos dépôts et votre code. Et si vous souhaitiez que quelqu'un révise votre code et donne du feedback ? En ajoutant un réviseur à votre pull request, c'est possible, que vous soyez dans la même pièce ou à l'autre bout de l'univers.

Durée Public Prérequis
15 minutes Vous avez de l'expérience avec Bitbucket Cloud. Sinon, essayez l'un de nos tutoriels pour débutant. Inscrivez-vous à Bitbucket Cloud
Aucun Pour ceux qui préfèrent utiliser une interface graphique Git avec Bitbucket Cloud S'inscrire à Sourcetree

À propos des branches et des pull requests

Lorsque vous travaillez au sein d'une équipe comportant plusieurs utilisateurs Bitbucket, vous souhaiterez utiliser votre propre code séparé de la base de code principale. Pour cela, vous disposez de branches. Une branche représente une ligne de développement indépendante pour votre dépôt. Considérez-la comme un tout nouveau répertoire de travail, une toute nouvelle zone de staging et un tout nouvel historique de projet. Après avoir créé une branche, vous travaillez dessus et commitez le code dans celle-ci. Vous faites un pull des mises à jour depuis Bitbucket pour actualiser votre branche, puis vous faites un push de l'ensemble de votre travail vers Bitbucket.

Dès que vous apportez des changements au code sur une branche dans Bitbucket, vous pouvez créer une pull request, dans laquelle aura lieu la revue de code. Vos coéquipiers commenteront votre code, poseront des questions et finiront par (je l'espère) approuver la pull request. Lorsque vous avez suffisamment d'approbations, mergez la pull request pour merger votre branche dans le code principal.

Créer un dépôt

Vous venez d'arriver dans la station spatiale Bitbucket. Le moment est venu d'effectuer le processus d'orientation, qui implique notamment d'apporter des mises à jour à votre package de bienvenue et à les faire approuver.

  1. Cliquez sur + dans la barre latérale globale et sélectionnez Repository (Dépôt) sous Create (Créer).

  2. Assurez-vous que l'équipe que vous avez créée est le propriétaire du dépôt.

  3. Saisissez ce que vous voulez comme nom de projet et nom de dépôt. Si vous n'avez pas d'idée, que diriez-vous de Package de bienvenue et de Premières impressions, respectivement.

  4. Dans Include a README? (Inclure un fichier README ?), sélectionnez l'une des options Yes (Oui).

  5. Dans Version control system (Système de contrôle de version), choisissez une option pour le type de dépôt que vous souhaitez créer. Si vous n'êtes pas sûr, ne changez rien.

  6. Cliquez sur Create repository (Créer un dépôt) pour accéder à la vue Source de votre nouveau dépôt.

  7. Dans Source, sélectionnez > Add file (Ajouter un fichier).

  8. Appelez le fichier survey.html, puis copiez ce code et collez-le dans la zone de texte principale.

\<\!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
body {
margin: auto;
width: 700px;
color: #FFFFFF;
font-family: Arial, sans-serif;
background-color: #172B4D;
}
body>h1 {
margin: 50px;
font-size: 50px;
text-align: center;
color: #0052CC;
}
</style>
</head>
<body>
<h1>Team up in space</h1>
<p>
Welcome to the team! You've made it this far so we know that you've got the potential to do great things. Because you're going to be collaborating with other awesome people, anything you add needs to be code reviewed and approved. That's just how a team works! You should have already created a branch and checked it out locally. If you haven't, go back to the tutorial and do that now. We'll be here.
</p>
<p>
Because you're on your own branch, you can go crazy. Spice up this file any way you like. Add more files to this repository if you see fit. If want to take it slow and are just here to learn about pull requests, you can use this opportunity to fill out our short questionaire.
</p>
<br>
<p>
<b>Question 1</b>: Have you used pull requests before?
</p>
<p>
<b>Answer 1</b>: **** Your answer here **** </p>
<p>
<b>Question 2</b>: Why do you want to learn about code review?
</p>
<p>
<b>Answer 2</b>: **** Your answer here **** </p>
<p>
<b>Question 3</b>: Who do you plan to work with on Bitbucket? </p>
<p>
<b>Answer 3</b>: **** Your answer here **** </p>
</body>
</html>
  1. Cliquez sur Commit (Commiter), puis de nouveau sur Commit dans la boîte de dialogue.

Votre dépôt se présente plutôt bien maintenant. Jetez un coup d'œil si vous en avez envie.

Clonez une branche et apportez un changement sur la nouvelle branche

Lorsque vous savez que vous allez ajouter des réviseurs pour réviser et approuver votre code avant le merge, vous avez très probablement déjà cloné le dépôt avant de créer une branche. C'est ce que nous allons faire avant de configurer votre propre branche.

Si vous utilisez la ligne de commande

Étape 1. Clonez votre dépôt dans votre système local

Nous allons réaliser le clonage sur votre système local pour que vous puissiez véritablement commencer à travailler dessus.

  1. Cloner ce dépôtDans le dépôt, cliquez sur le bouton Clone (Cloner) en haut à droite.
    Bitbucket affiche la boîte de dialogue Clone this repository (Cloner ce dépôt). Par défaut, la boîte de dialogue de clonage définit le protocole sur HTTPS ou SSH, selon vos paramètres. Par conséquent, inutile de changer votre protocole par défaut.Clone this repository
  2. Copiez la commande de clonage.

  3. Dans une fenêtre de terminal, passez au dépôt local dans lequel vous souhaitez cloner votre dépôt.

$ cd ~/<path_to_directory>
  1. Collez la commande copiée depuis Bitbucket, par exemple :
$ git clone https://breezy@bitbucket.org/powerstars/first-impressions.git

Cloning into 'first-impressions'...
Password for 'https://breezycloud@bitbucket.org': 
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 6 (delta 1), reused 0 (delta 0)
Unpacking objects: 100% (6/6), done.

Pour plus de détails, consultez notre vidéo sur le clonage afin de savoir comment procéder :

Étape 2. Créez une branche et faites-en un pull en local

Maintenant que votre dépôt est fin prêt, nous allons passer à la partie amusante. Vous pouvez créer des branches en local ou via Bitbucket. Nous allons en créer une à partir de Bitbucket aux fins de ce tutoriel.

  1. Cliquez sur Branches dans la navigation de gauche. Vous verrez que vous avez déjà une branche, votre branche principale, main.

  2. Cliquez sur Create a branch (Créer une branche) dans le coin supérieur droit.

  3. Après avoir créé une branche, vous devez en faire un check-out sur votre système local. Bitbucket vous fournit une commande de fetch et de check-out que vous pouvez copier et coller dans votre ligne de commande, comme suit :

$ git fetch && git checkout my-updates

Password for 'https://breezycloud@bitbucket.org': 
From https://bitbucket.org/planetbreezycloud/first-impressions
 * [new branch]      my-updates -> origin/my-updates
Branch 'my-updates' set up to track remote branch 'my-updates' from 'origin'.
Switched to a new branch 'my-updates'

Comme vous pouvez le voir, vous êtes passé sur votre toute nouvelle branche en local, ce qui vous permet de travailler dessus et de faire un push de cette ligne de code distincte.

Étape 3. Apportez un changement à la branche

C'est maintenant à vous d'apporter quelques changements à votre dépôt. Comme mentionné dans le fichier, c'est vous qui décidez. Modifiez la CSS, ajoutez des fichiers supplémentaires, créez un espace dans l'espace ou répondez simplement aux questions.

  1. Ouvrez le fichier survey.html (ou quel que soit le nom que vous lui donnez) avec un éditeur de texte.

  2. Faites vos changements, petits ou grands, puis enregistrez et fermez le fichier.

  3. Dans votre fenêtre de terminal, vous devriez toujours être dans le répertoire du dépôt, sauf si vous avez changé quelque chose. Affichez l'état du dépôt grâce à git status. Vous devriez voir le fichier survey.htmlque vous avez modifié. Si vous avez ajouté ou modifié d'autres fichiers, vous les verrez également.

$ git status
On branch my-updates
Your branch is up-to-date with 'origin/my-updates'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
        modified:   survey.html
no changes added to commit (use "git add" and/or "git commit -a")
  1. Ajoutez vos changements en local grâce à git add :
$ git add survey.html
  1. Commitez vos changements en local grâce à git commit -m "votre message de commit" :
$ git commit -m "Answered questions"
[my-updates 7506040] Answered questions
 1 file changed, 3 insertions(+), 3 deletions(-)
  1. Saisissez git push origin pour faire un push des changements vers votre branche sur Bitbucket, puis saisissez votre mot de passe pour finaliser le push.
$ git push origin my-updates

Password for 'https://breezycloud@bitbucket.org': 

Counting objects: 3, done.

Delta compression using up to 8 threads.

Compressing objects: 100% (3/3), done.

Writing objects: 100% (3/3), 350 bytes | 350.00 KiB/s, done.

Total 3 (delta 1), reused 0 (delta 0)

To https://bitbucket.org/planetbreezycloud/first-impressions.git

   454ccaf..7506040  my-updates -> my-updates

Branch main set up to track remote branch main from origin.
  1. Dans Bitbucket, cliquez sur la page Source de votre dépôt. Vous devriez voir les deux branches dans le menu déroulant. Tous les autres commits que vous faites dans my-updates apparaîtront également sur cette branche.

Si vous utilisez Sourcetree

Étape 1. Clonez votre dépôt dans votre système local

Nous allons réaliser le clonage sur votre système local pour que vous puissiez véritablement commencer à travailler dessus.

  1. Cloner ce dépôtDans le dépôt, cliquez sur + dans la barre latérale globale et sélectionnez Clone this repository (Cloner ce dépôt) sous Get to work (Se mettre au travail).Clone this repository
  2. Cliquez sur le bouton Clone in Sourcetree (Cloner dans Sourcetree).
  3. Fenêtre « Clone New » (Cloner nouveau)Dans la boîte de dialogue Clone New (Cloner nouveau), remplacez la valeur du champ Destination Path (Chemin de destination) par /first-impressions/.Clone new
  4. Cliquez sur le bouton Clone (Cloner).

Pour voir comment cela fonctionne, consultez la partie de notre vidéo dédiée au clonage d'un dépôt :

Étape 2. Créez une branche et faites-en un pull en local

Maintenant que votre dépôt est fin prêt, nous allons passer à la partie amusante. Puisque les branches ne sont pas seulement un concept Bitbucket, vous pouvez en créer une en local. Cependant, nous allons en créer une à partir de Bitbucket aux fins de ce tutoriel.

  1. Cliquez sur Branches dans la navigation de gauche. Vous verrez que vous avez déjà une branche, votre branche principale.

  2. Cliquez sur Create a branch (Créer une branche) dans le coin supérieur droit.

  3. Saisissez un nom de branche et cliquez sur Create (Créer). Si vous n'êtes pas sûr du nom de votre branche, choisissez quelque chose comme « my-updates ».

  4. Après avoir créé une branche, vous devez en faire un check-out à partir de votre système local. Pour cela, cliquez sur le bouton Check out in Sourcetree (Faire un check-out dans Sourcetree).

  5. Dans la boîte de dialogue Checkout Existing (Faire un check-out d'une branche existante) de Sourcetree, cliquez sur Checkout (Faire un check-out).

Vous disposez maintenant d'une branche dans Bitbucket et vous en avez fait un check-out sur votre système local, ce qui vous permet de travailler dessus et de faire un push de cette ligne de code distincte.

Étape 3. Apportez un changement à la branche

C'est maintenant à vous d'apporter quelques changements à votre dépôt. Comme mentionné dans le fichier, c'est vous qui décidez. Modifiez la CSS, ajoutez des fichiers supplémentaires, créez un espace dans l'espace ou répondez simplement aux questions.

  1. Fenêtre « Show in Finder » (Afficher dans le Finder)Dans le dépôt de Sourcetree, cliquez sur le bouton Show in Finder (Afficher dans le Finder).Show in Finder
  2. Ouvrez le fichier survey.html (ou quel que soit le nom que vous lui donnez) avec un éditeur de texte.

  3. Faites vos changements, petits ou grands, puis enregistrez et fermez le fichier.

  4. Changements non validésOuvrez Sourcetree. Vous remarquerez que votre dépôt comprend des changements non commités.Uncommitted changes

  5. (Git uniquement) Ajoutez le fichier à la zone de staging :

    1. Sélectionnez la ligne Uncommitted changes (Changements non commités).

    2. Ajout de changements à l'indexDans la liste Unstaged files (Fichiers non stagés), placez une coche en regard du fichier survey.html (et de tous les autres fichiers avec des changements non commités).Add changes to index

    3. À partir de la boîte de dialogue DansConfirm Stage? (Confirmer le staging ?),cliquez sur OK.

  6. Cliquez sur le bouton Commit (Commiter) en haut pour commiter le fichier.

  7. Saisissez un message de commit dans l'espace prévu à cet effet, par exemple Answered (Traité).

  8. Cliquez sur le bouton Commit (Commiter) sous la zone de message. Lorsque vous revenez à la vue, vous constatez que le fichier a été commité, mais pas pushé vers le dépôt Bitbucket.

  9. Dans Sourcetree, cliquez sur le bouton Push (Faire un push) pour pusher vos changements commités.

  10. Dans la boîte de dialogue qui apparaît, cliquez sur OK pour pusher votre branche avec le commit vers Bitbucket.

  11. Dans Bitbucket, cliquez sur la page Source de votre dépôt. Vous devriez voir les deux branches dans le menu déroulant. Tous les autres commits que vous faites dans my-updates apparaîtront également sur cette branche.

Création d'une pull request pour merger votre changement

Pour ajouter des réviseurs afin de vérifier et d'approuver votre code avant le merge, vous devez créer une pull request. Outre un espace de revue du code, une pull request affiche une comparaison de vos changements par rapport au dépôt d'origine (également appelée diff) et fournit une méthode simple pour merger le code quand il est prêt.

Étape 1. Créez la pull request

Vous avez besoin d'une branche pour créer une pull request. Fort heureusement, vous en avez déjà une.

  1. Dans votre dépôt, cliquez sur + dans la barre latérale globale. Ensuite, cliquez sur Create a pull request (Créer une pull request) sous Get to work (Se mettre au travail).
    Bitbucket affiche le formulaire de demande.
  2. Remplissez le formulaire :
    1. Vous avez déjà un titre (Title) automatique, votre dernier message de commit.

    2. Ajoutez une description si vous le souhaitez.

      (Facultatif : ajouter un réviseur) Si vous avez besoin que quelqu'un révise et/ou approuve votre code avant le merge, ajoutez-le dans le champ Reviewers (Réviseurs). Vous pouvez voir que Breezy Cloud a été ajouté en tant que réviseur à l'exemple de pull request ci-dessous.

      Pour ajouter un réviseur à une pull request, vous devez d'abord lui accorder l'accès à votre dépôt en l'ajoutant à un groupe. Pour en savoir plus et connaître les étapes détaillées, reportez-vous à : Accorder l'accès au dépôt à des utilisateurs et à des groupes. Remarque : vous pouvez toujours créer la pull request, puis ajouter des réviseurs plus tard.

    formulaire de branche Lorsque vous aurez terminé, le formulaire ressemblera à ceci :branch form
  3. Cliquez sur Créer une pull request.

Bitbucket ouvre la pull request et, si vous avez ajouté un réviseur, il reçoit une notification par e-mail contenant des informations sur la pull request qu'il doit réviser.

Étape 2. Mergez votre pull request

Pas si vite ! Vous avez peut-être noté le bouton Merge (Merger) en haut de l'écran. Avant de cliquer dessus, vous devez attendre l'approbation de vos changements. Outre la notification par e-mail que vos coéquipiers reçoivent, ils peuvent également voir la pull request sous Pull requests to review (Pull requests à réviser) sur le tableau de bord Your work (Votre travail).

Tableau de bord Votre travail

Dans la pull request, le réviseur peut afficher le diff et ajouter des commentaires afin de démarrer une discussion avant de cliquer sur le bouton Approve (Approuver).

Lorsque quelqu'un approuve votre pull request, vous recevez une notification par e-mail. Dès que vous avez les approbations dont vous avez besoin (dans ce cas, une seule suffit !), vous pouvez faire le merge. Dans la pull request, cliquez sur Merge (Merger). Et le tour est joué ! Si vous voulez voir à quoi ressemble votre branche une fois mergée dans la branche principale, cliquez sur Commits pour voir l'arborescence des commits.

Commits