Introducció

Anem a fer un cas pràctic d'un projecte molt senzill en què col·laboren dos programadors, i el repte que això comporta per tal de què els canvis que fa el primer no es trepitgin amb els canvis que fa el segon.

Seguim aquest tutorial:

https://github.com/foundersandcoders/git-workflow-workshop-for-two

2 comptes de github

Aquesta pràctica la pot fer un sol alumne amb dos comptes de github, o bé dos alumnes utilitzant cadascú el seu compte. Les dues opcions són vàlides.

Necessitem els dos comptes de github. Per exemple, el professor ha fet servir el seu compte de @gmail.com i el seu compte de @jaumebalmes.net. L'alumne pot fer el mateix.

P1 (Programador 1): joanillo (@gmail)
P2 (Programador 2): jquintana (@jaumebalmes)

De cada compte necessites el nom_usuari, el password i el PAT (personal access token)

Projecte workflow_2_programmers

Creem el projecte:

mkdir workflow_2_programmers
cd workflow_2_programmers
mkdir P1
mkdir P2

Step 1

P1 crea el repositori (a github.com) workflow_2_programmers, amb les opcions per defecte (Creem el fitxer README.me), i el clonem

$ cd P1
$ git clone https://github.com/joanillo/workflow_2_programmers.git
$ cd workflow_2_programmers/

Creo el fitxer .gitignore, i afegeixo la línia:

.*~

doncs l'editor que faig servir em crea còpies de seguretat afegint al nom el signe ~

Step 2

Raise your issues on the work to be done

issue: anem a fer la capçalera (assignat a P1, joanillo)

Step 3

Create and move to a new branch

$ git branch create-heading-with-shadow
$ git status
En la branca main

(encara estem en la branca main)

$ git checkout create-heading-with-shadow 
S'ha canviat a la branca «create-heading-with-shadow»

$ git status
En la branca create-heading-with-shadow

Step 4

Write enough HTML & CSS to satisfy the requirements

El P1 crea el fitxer index.html i index.css, i resol el seu issue. En aquest cas, canviem el color de la font a vermell.

Step 5

Add the new files to the staging area

$ git add index.html style.css

$ git status
En la branca create-heading-with-shadow
Canvis a cometre:
  (use "git restore --staged <file>..." to unstage)
	fitxer nou:       index.html
	fitxer nou:       style.css

Els fitxers index.html i style.css estan en el stage, i per tant queda pendents que fem commit dels canvis en aquests dos fitxers.

Step 6

Commit your changes

$ git commit -m 'canvi en el color de la font > Relates #1'

$ git status

(ja no hi ha res a cometre)

Step 7

Push your local version up to GitHub

Volem enviar els canvis al remot:

$ git push origin create-heading-with-shadow

Username for 'https://github.com': joanillo
Password for 'https://joanillo@github.com': 
...
remote: Create a pull request for 'create-heading-with-shadow' on GitHub by visiting:
remote:      https://github.com/joanillo/workflow_2_programmers/pull/new/create-heading-with-shadow
remote: 
To https://github.com/joanillo/workflow_2_programmers.git
 * [new branch]      create-heading-with-shadow -> create-heading-with-shadow

És a dir, s'ha creat una nova branca en el remot, que és la branca que teníem en local. Ho podem veure en la interfície gràfica de github.com.

Step 8

Create a pull request

Programmer 1 navigates to the repository on GitHub.com and creates a pull request.

Add a descriptive title (e.g. Create page heading) and leave a comment linking the pull request to the issue.

Select Programmer 2 as an assignee. (convé que qui resolgui el pull request sigui una persona diferent de qui l'ha creat).

Per fer-ho, és necessari que el P1 (joanillo) convidi com a contributor el P2 (jquintanabalmes), i això es fa a settings > contributtors. El P2 rep un correu del tipus:

joanillo invited you to joanillo/workflow_2_programmers

I un cop ho ha confirmat, el P1 ja podrà assignar al P2 el pull request.

Step 9

Programmer 2 merges the pull request +1

El P2 (jquintana) entra al seu github, i importa el projecte (si és que no ho havia fet abans) (potser no cal ni importar el projecte doncs a l'acceptar la invitació ja es deu haver fet automàticament).

Ja pot fer el merge del pull request, després de mirar els canvis que s'han produït. Automàticament, en la branca main ja tindrem els fitxers del projecte actualitzats (tant el P2 com el P1).

Splitting the work

S'ha de fer dos canvis:

Spelling mistake in the heading (the word 'WORKSHOW' should be replaced with 'WORKSHOP')
The name of the css class in the heading needs to be updated so that existing styles in the style.css file can take effect (class="some-heading" should be replaced with class="page-heading").

i volem que els canvis els facin per separat els dos programadors P1 i P2.

Step 1

Programmer 2 clones the repo

El P2 encara no havia clonat el projecte. És l'hora de fer-ho:

$ cd ../../P2
$ git clone https://github.com/joanillo/workflow_2_programmers.git
$ cd workflow_2_programmers/

Step 2

Raise these 2 new issues

Create the following two issues and assign each one to a different person

Fix spelling typo in <h1> heading (Programmer 1)
Correct the class name of <h1> heading to match the existing class name in the css file (Programmer 2)

Crear els issues ho pot fer tant el P1 com el P2, però allò important ara és repartir les dues tasques entre els dos programadors.

Step 3

Both programmers create one branch each and switch to them

Both programmers create one branch each: fix-typo-heading (Programmer 1) and update-class-heading (Programmer 2).

(P1) $ git branch fix-typo-heading
(P1) $ git checkout fix-typo-heading

(P2) $ git branch update-class-heading
(P2) $ git checkout update-class-heading

Step 4

Both programmers open their index.html files and make one requested change each

P1

$ nano index.html
<h1 class="some-heading">GIT WORKFLOW WORKSHOP</h1>

P2

$ nano index.html
<h1 class="page-heading">GIT WORKFLOW WORKSHOW</h1>

Step 5

Both programmers save their index.html files and check status

Tant el P1 com el P2 fan el git status, i es constata que s'ha fet una modificació a index.html:

$ git status
En la branca update-class-heading
Canvis no «staged» per a cometre:
  (useu «git add <fitxer>...» per a actualitzar què es cometrà)
  (use "git restore <file>..." to discard changes in working directory)
	modificat:        index.html

Step 6

Both programmers add the modified index.html file to the staging area

Tant el P1 com el P2 fan:

$ git add index.html

Step 7

Both programmers commit their changes

Ens hem de fixar en el número del issue.

Programmer 1:

$ git commit -m 'Fix typo in page heading > Relates #3'

[fix-typo-heading 0191282] Fix typo in page heading > Relates #3
 1 file changed, 1 insertion(+), 1 deletion(-)

Programmer 2:

$ cd ../../P2/workflow_2_programmers/
$ git commit -m 'Update class name in heading > Relates #4'

Step 8

Programmer 1 switches to master branch and pulls down the remote master branch

We have so many programmers working on this project now, who knows what changes may have happened to the master branch since the last time we looked at the remote version that's on GitHub?

$ cd ../../P1/workflow_2_programmers/

Programmer 1 switches to main branch.

$ git checkout main

Programmer 1 pulls the master branch from the remote (GitHub repo) to make sure that the local version of master is up to date with the remote (GitHub) version of master. (There should be no changes since neither of you has pushed any changes to the remote yet.) It is a good practice to regularly check for changes on the remote before pushing your local changes.

$ git pull origin main

Programmer 1 switches back to the fix-typo-heading branch.

$ git checkout fix-typo-heading

Step 9

Programmer 1 pushes fix-typo-heading branch to remote

Programmer 1 pushes fix-typo-heading branch to remote

$ git push origin fix-typo-heading

Step 10

Programmer 1 creates a pull request

el P1 va al seu GitHub.com and creates a pull request.

Add a descriptive title (e.g. Fix the spelling mistake in page heading) and leave a comment linking the pull request to the issue.

Select Programmer 2 as an assignee.

Step 11

Programmer 2 reviews the pull request

Programmer 2 reviews the pull request

Step through each commit (in this case one)

Check the "Files changed" tab for a line-by-line breakdown.

Click "Review changes" and choose:

"Comment"
"Approve"
"Request changes"

Important! El P2 ha d'aprovar el commit (hem d'anar al commit, revisar-lo, i aprovar-lo)

Step 12

Programmer 2 merges the pull request +1

Programmer 2 merges the pull request on GitHub.com.

I ara si vaig a la branca main ja es pot veure com en el index.html apareix la paraula correcta.

Step 13

Programmer 2 switches to master branch, pulls the remote master branch, tries to merge it into update-class-heading branch and boom resolves merge conflicts boom

$ git checkout main
$ git pull origin main
$ git checkout update-class-heading

$ git merge main -> problema
S'està autofusionant index.html
CONFLICTE (contingut): Conflicte de fusió en index.html
La fusió automàtica ha fallat; arregleu els conflictes i després cometeu el resultat.

Si mirem el codi index.html, veurem que s'ha introduït un petit canvi en el codi que ens ajuda a veure què passa:

<<<<<<< HEAD
    <h1 class="page-heading">GIT WORKFLOW WORKSHOW</h1>
=======
    <h1 class="some-heading">GIT WORKFLOW WORKSHOP</h1>
>>>>>>> main

Editem el fitxer manualment i ho arreglem:

    <h1 class="page-heading">GIT WORKFLOW WORKSHOP</h1>

First add to staging area

$ git add index.html

$ git commit -m 'Fix merge conflict > Relates #3 and #4'

Step 14

Programmer 2 pushes update-class-heading branch to remote

$ git push origin update-class-heading

login i password

Necessito el PAS (Personal Access Token)

Settings > developer settings > Personal Access Token selecciono repo i delete_repo

Step 15

Programmer 2 creates a pull request

El P2 veu com en el seu repositori la branca update-class-heading està bé, i el main no.

Programmer 2 navigates to the repository on GitHub.com and creates a pull request selecting master as a base branch and update-class-heading as a head branch. Please add a descriptive title (e.g. Update class name in page heading) and leave a comment linking the pull request with the issue #<number>. Please also select Programmer 1 as an assignee.

Step 16

Programmer 1 merges the pull request +1

Programmer 1 reviews and merges the pull request on GitHub.com.

En aquests pull request hi ha dos commits. Només he d'aprovar el commit bo (el que fa les dues millores). Ja puc tancar el issue i comprovar que el index.html de la branca main és correcta.

Programmer 1 opens the live website on GitHub pages to double check the new heading style.

Pas 17

Tant en el P1 com en el P2 puc actualitzar la branca main que ara ja és la bona i té tots els canvis:

$ git checkout main
$ git pull origin main

Esborrar un repositori

On GitHub.com, navigate to the main page of the repository. Under your repository name, click Settings. Under Danger Zone, click Delete this repository. Read the warnings. To verify that you're deleting the correct repository, type the name of the repository you want to delete.

TBD

https://gist.github.com/TylerFisher/6127328

Tasques per l'alumne

(TBD)

Entrega

(TBD)

creat per Joan Quintana Compte, febrer 2022

Github: workflow dos programadors

Contingut

Introducció

2 comptes de github

Projecte workflow_2_programmers

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Splitting the work

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Pas 17

Esborrar un repositori

TBD

Tasques per l'alumne

Entrega

Menú de navegació

Cerca