Github pràctic: correcció d'errors en script de Javascript

Introducció

Tenim un script amb 12 errors de sintaxi, i cada alumne n'haurà de corregir un, de manera que de forma col·laborativa entre tots corregirem el script.

En aquesta pràctica hi ha tasques que les ha de fer el professor, i d'altres que les ha de fer cadascú dels alumnes.

Professor. Pas 1. Crear el repositori

El professor crea el repositori corregir_errors amb un fitxer README i buit. Repositori public.

$ git clone https://github.com/jquintanabalmes/corregir-errors.git
$ cd corregir-errors

El professor crea el script arrays_javascript.js on s'han introduït 12 errors de sintaxi.

$ git add arrays_javascript.js
$ git commit -m "afegim el script arrays_javascript.js"
$ git push origin main

i ja tenim en el remot el fitxer script arrays_javascript.js.

Alumne1 i alumne2: correcció d'un error de sintaxi

Els alumnes es descarreguen el repositori. Treballarem amb alumne1 i alumne2, però serà general per a N alumnes.

$ git clone https://github.com/jquintanabalmes/corregir-errors.git
$ cd corregir_errors

L'alumne1 crea una branca nova:

$ git checkout -b correccio_alumne1 (on en comptes de ''alumne1'' posaràs el teu nom, per ex ''jordi'')

Executem el script. Com que és javascript:

$ node script arrays_javascript.js

i mirem els missatges d'error. Corregim un dels errors i posem un comentari dins del codi. Per ex:ç

//alumne: jordi. Corregit error de sintaxi en la línia 25 el 16-03-2022 18:00

Fem un commit dels canvis, posant la descripció adequada:

$ git add arrays_javascript.js
$ git commit -m "correcció alumne jordi el 16-03-2022 18:25"

I ara fem el push d'aquesta branca a github.com:

$ git push origin correccio_jordi
Username: 
Password: 
...
remote: Create a pull request for 'correccio_jordi' on GitHub by visiting:
remote:      https://github.com/jquintanabalmes/corregir-errors/pull/new/correccio_jordi
remote: 
To https://github.com/jquintanabalmes/corregir-errors.git
 * [new branch]      correccio_joan -> correccio_joan

El que diu el missatge és que per tal de fer el merge dels canvis proposats, s'ha de crear un pull request.

Fixem-nos que en el remot apareix de forma automàtica la nova branca. L'alumne amb el seu compte pot veure que hi ha dues branques, però no pot fer el pull-request. És el professor el que té permisos per fer el pull-request, doncs és el propietari del repositori. El professor també podria assignar aquests permisos a un alumne concret.

Un cop fet el push l'alumne ja pot canviar-se a la branca main, i eliminar la branca de desenvolupament:

$ git checkout main
S'ha canviat a la branca «main»
La vostra branca està al dia amb «origin/main».

$ git branch -D correccio_jordi

Professor: pull-request de la branca de l'alumne

Per tant, el professor crea un pull-request, que per defecte la descripció del pull-request serà la mateixa cadena que la descripció del commit que ha creat l'alumne.

Abans de fer el merge el professor mira les diferències en els fitxers que han canviat, mira els commits que hi ha en aquesta branca (en principi només un) i valida els canvis. Fa el merge.

Ja podem eliminar la branca que havia creat l'alumne.

A l'hora de fer el merge tenim tres possibilitats:

• Create a merge commit: all commit from this branch will be added to the base branch via a merge commit
• Squash and merge: the 1 commit from this branch will be added to the base branch
• Rebase and merge: the 1 commit from this branch will be rebased and added to the base branch

L'opció per defecte és la primera, però totes són correctes i fan el merge sense conflicte.

Iteració 2. Alumne 2

Mentre el primer alumne ja ha fet el push dels seus canvis (i el professor ha validat o encara no aquests canvis), l'alumne 2 (Clara) també vol fer un canvi. El més correcte, quan un alumne es posa a treballar, és fer un pull del repositori remot:

$ git pull origin main

per tal de tenir la última versió del fitxer. Ara bé, potser el professor encara no ha validat els canvis pendents que han fet d'altres alumnes.

NOTA: el git clone ja l'havia fet prèviament, però ha passat un temps i és possible que el fitxer remot ja hagi incorporat canvis.

Igual que ha fet l'alumne jordi, l'alumna clara crea una nova branca, corregeix un dels errors, fa el commit i fa el push.

Professor: noves branques

I la història es repeteix. Ara la pilota està a la teulada del professor, i aquest ha d'anar fent el merge dels diferents canvis que es van incorporant. Per sort, el github ho fa de forma intel·ligent i normalment els merges es fan sense cap conflicte. En la branca main es van incorporant les diferents correccions dels alumnes.

Tasques a realitzar

En el script hi ha 12 errors (que per claredat estan marcats com a alumne1, alumne2,...). El professor assigna cada error a un dels alumnes.

L'alumne corregeix el seu error, i posa el següent comentari a la línia de sobre:

// error de sintaxi corregit per xxx el xx-xx-202x a les xx:xxh

Entrega

En principi no s'hauria d'entregar res. El professor rep la informació dels canvis que hi ha en el repositori en forma de noves branques que generen els alumnes.

Ara bé, es demana que s'entregui una captura de pantalla de la sessió de github a la consola. S'ha de treballar a la consola i s'ha de corregir l'error en local amb un editor de text o el Studio Code. En aquest cas l'error a corregir és molt senzill, però podríem estar parlant d'una tasca molt més complexa.

script amb errors

En aquest script hi ha 12 errors. arrays_javascript_errors.js:

//https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array

//Crear un Array
let fruites = ["Poma", "Taronja]; //alumne1

console.log(fruites.length);

//Accedir a un element de l'Array mitjançant el seu índex
let primer = fruites[0;  //alumne2
console.log(primer);

let ultim = fruites[fruites.length - 1];
console.log(ultim;  //alumne3

//Recórrer un Array
fruites.forEach(function(element, index, array {  //alumne4
    console.log(element, index);
});

//Afegir un element al final d'un Array
console.log(fruites.push('Mandarina')); //push retorna la nova longitud
console.log(fruites);

//Eliminar l'últim element d'un Array
ultim = fruites.pop(;  //alumne5

//Afegir un element al principi d'un Array
novaLongitud = fruites.unshift('Maduixa);  //alumne6
//Eliminar el primer element d'un Array
primer = fruites.shif();  //alumne7 // Elimina "Maduixa" de l'inicio

//Tornem a afegir maduixa
fruites.push('Maduixa');

//Trobar l'índex d'un element de l'Array
let pos = fruites.indexof('Taronja');  //alumne8 // pos és la posició

//Eliminar un únic element mitjançant la seva posició
let elementEliminat = frutes.splice(pos, 1);  //alumne9

//Eliminar varis elements a partir d'una posició
let vegetals = ['Carbassó', 'Esbergínia', 'Rave, 'Pastanaga'];  //alumne10
console.log(vegetals);

pos = 1
let numElements = 2;

let elementsEliminats = vegetalssplice(pos, numElements);  //alumne11

console.log(vegetals);

//Copiar un Array
let copiaArray = vegetals.slice();

//Creació d'un array unidimensional
let missatges = [;  //alumne12
missatges[0] = "Hola";
missatges[99] = "món";

if (missatges.length === 100) {
   console.log("La longitud és de 100.");
}

//Creació d'una matriu de dues dimensions
let taulell = [
  ['T','C','A','D','R','A','C','T'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['t','c','a','d','r','a','c','t'] ];

console.log(taulell.join('\n') + '\n\n');

// Avançar dues posicions el peó de rei
taulell[4][4] = taulell[6][4];
taulell[6][4] = ' ';
console.log(taulell.join('\n'));

//Ús d'un array per a tabular un conjunt de valors
valors = [];
for (let x = 0; x < 10; x++){
 valors.push([
  2 ** x,
  2 * x ** 2
 ]);
}
console.table(valors);

---

creat per Joan Quintana Compte, març 2022