Objectif

Démarrez un dépôt avec un autre utilisateur et obtenez du feedback sur votre changement.

Mission

Jusqu'à présent, vous étiez la seule personne à travailler dans un dépôt. Et si vous souhaitiez collaborer avec des coéquipiers dans un dépôt ? Vous pouvez le faire que vous soyez dans la même pièce ou aux quatre coins du monde.

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
Aucune Pour ceux qui préfèrent utiliser une interface graphique Git avec Bitbucket Cloud. Inscrivez-vous à 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éez un dépôt et ajoutez un membre d'équipe

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. Pour vous lancer, nous allons vous montrer comment créer un dépôt d'équipe avec du contenu et comment attribuer l'accès à un utilisateur.

Étape 1. Créez une équipe et ajoutez un membre d'équipe

Commencez par créer une équipe pour votre dépôt et vos coéquipiers. Inutile d'avoir des coéquipiers pour ce tutoriel. Pour nos besoins, vous allez vous faire un nouvel ami appelé breezycloud.

  1. Cliquez sur + dans la barre latérale globale et sélectionnez Team (Équipe) sous Create (Créer).

  2. Entrez le nom d'équipe que vous aimeriez utiliser dans Team name. Si aucun ne vous vient à l'esprit, nous vous suggérons de commencer par Planet suivi d'un chiffre ou d'un nom, par exemple Planet Breezy Cloud ou Planet 727. Si vous sélectionnez un nom d'équipe qui existe déjà, vous devrez peut-être modifier son ID dans Team ID, car tous les ID doivent être uniques.

    Git fork

  3. Cliquez sur Done (Terminé).

  4. Vous arriverez sur la page Repositories (Dépôts) de votre équipe. De là, cliquez sur Settings (Paramètres).

  5. Cliquez sur User groups (Groupes d'utilisateurs) sous Access management (Gestion des accès). Vous verrez que vous n'avez que deux groupes et que vous êtes le seul membre de ces deux groupes.

  6. Cliquez sur le groupe Developers (Développeurs). De là, vous accéderez à un espace pour ajouter de nouveaux membres.

  7. Recherchez breezycloud dans le champ Username or email address (Nom d'utilisateur ou adresse e-mail), sélectionnez cet utilisateur et cliquez sur Add (Ajouter).

Désormais, lorsque vous créez une pull request pour votre futur dépôt, vous aurez quelqu'un pour le réviser !

Étape 2. Créez un dépôt avec du contenu

Il est inutile de rassembler une ribambelle de lignes de code pour ce dépôt. Nous vous fournirons de quoi commencer.

  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 la valeur de votre choix dans les champs Project name (Nom du projet) et Repository name (Nom du dépôt). Si aucun nom ne vous vient à l'esprit, que pensez-vous respectivement de Welcome package (Package de bienvenue) et First impressions (Premières impressions) ?

  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 à créer. Si vous n'êtes pas sûr, conservez la valeur actuelle.

  6. Cliquez sur Create repository (Créer un dépôt). Vous accéderez à la vue Source de votre tout 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 (Commiter) dans la boîte de dialogue.

Votre dépôt a l'air plutôt bien. Prenez le temps de l'explorer si l'envie vous en dit. Si vous cliquez sur Settings (Paramètres) et accédez à la page User and groups access (Accès des groupes et des utilisateurs), vous verrez que le coéquipier breezycloud que vous avez ajouté a accès au dépôt via le groupe Developers (Développeurs).

Clonez une branche et apportez un changement sur la nouvelle branche

Dans un contexte d'équipe type, vous aurez très probablement cloné le dépôt avant de créer une branche. C'est pourquoi nous allons commencer par cela avant que vous ne créiez 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. Dans 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 en fonction de vos paramètres. Par conséquent, inutile de changer votre protocole par défaut.
  2. Copiez la commande de clonage.

  3. Dans une fenêtre de terminal, accédez au répertoire 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 barre de navigation de gauche. Vous verrez que vous avez déjà une branche, votre branche principale (master).

  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 des commandes fetch et checkout que vous pouvez copier et coller dans votre ligne de commande comme vous le voyez ici :

$ 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 autre, selon le nom que vous lui avez donné plus tôt) dans un éditeur de texte.

  2. Apportez vos changements, quelle qu'en soit la taille, 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 à la commande git status. Vous devriez voir le fichier survey.html que 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 <filename> :
$ git add survey.html
  1. Commitez vos changements en local grâce à git commit -m "your commit message" :
$ git commit -m "Answered questions"
[my-updates 7506040] Answered questions
 1 file changed, 3 insertions(+), 3 deletions(-)
  1. Saisissez git push origin <branch_name> 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 master set up to track remote branch master 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. Dans 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 (Au travail).
  2. Cliquez sur le bouton Clone in Sourcetree (Cloner dans Sourcetree).
  3. Dans la fenêtre Clone New (Cloner nouveau), mettez à jour le chemin de destination dans Destination Path en le remplaçant par <path_to_repo_directory>/first-impressions/.
  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 barre de 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 dans Branch name et cliquez sur Create (Créer). Si vous n'êtes pas certain du nom à donner à votre branche, essayez quelque chose comme my-updates.

  4. Après avoir créé une branche, vous devez en faire un check-out sur votre système local. Pour ce faire, 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 de contenu existant) de Sourcetree, cliquez sur Checkout (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. Dans le dépôt Sourcetree, cliquez sur le bouton Show in Finder (Afficher dans le Finder).
  2. Ouvrez le fichier survey.html (ou autre, selon le nom que vous lui avez donné plus tôt) dans un éditeur de texte.

  3. Apportez vos changements, quelle qu'en soit la taille, enregistrez et fermez le fichier.

  4. Ouvrez Sourcetree. Vous noterez que votre dépôt contient des changements non commités.

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

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

    2. Dans la liste Unstaged files (Fichiers non stagés), placez une coche en regard du fichier survey.html (et de tout autre fichier comportant des changements non commités).

    3. Dans la boîte de dialogue Confirm Stage? (Confirmer le stage ?), 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 questions (Questions traitées).

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

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

  10. Dans la boîte de dialogue qui s'affiche, cliquez sur OK pour faire un push de votre branche et du 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. Tout autre commit que vous faites sur my-updates apparaîtra également sur cette branche.

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

Pour alerter les membres de votre équipe de vos mises à jour et obtenir leur approbation, la prochaine étape consiste à 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 fournir 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 (Au travail).
    Bitbucket affiche le formulaire de demande.
  2. Renseignez le formulaire :
    1. Un est automatiquement défini dans Title : il s'agit de votre dernier message de commit.

    2. Ajoutez une description si vous le souhaitez.

    3. Dans le champ Reviewers (Réviseurs), ajoutez votre membre d'équipe breezycloud en tant que réviseur.

    Lorsque vous avez terminé, le formulaire ressemble à ce qui suit :
  3. Cliquez sur Create pull request (Créer une pull request).

Bitbucket ouvre la pull request, et votre réviseur reçoit une notification par e-mail contenant des détails 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).

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.