Exercici Git - Gitlab

Sumari

  1. Repositori Local - Remot - Col·laboratiu
    1. Repositori Local
    2. Creació repositori GitLab
  2. Repositori Remot
    1. Proposta
    2. Baixa't el teu projecte remot
    3. Repositori col·laboaratiu
  3. My web
    1. PAS 1.
    2. Pas 2
    3. Pas 3
    4. Pas 4

Repositori Local - Remot - Col·laboratiu

En aquest exercici utilitzem comandes bàsiques de git des del terminal (Ctrl+Alt+T en linux), per crear un repositori i desar-lo a GitLab

Nota: les comandes són les ordres que van despres del simbol $

Repositori Local

Comandes: git init, git add, git commit.


Creació repositori GitLab

Haurieu de tindre ja un projecte buit:


Repositori Remot

Passar el repositori local a un repositori remot (blank project)
Comandes: git remote, git push, git pull

Quan tenim un repositori git en local, amb els seus commits, ens pot interessar passar-ho al gitlab per poder seguir treballan des d'altres ordinadors, o compartir amb els companys i professors sense dependre del nostre ordinador

Necessitem un projecte blanc a gitlab i obtenir la seva ruta:

En aquest cas el git push ve amb el -u origin master. A partir d'ara podem utilitzar el git push simplement. (Fins que no creem noves branques)

Proposta


Baixa't el teu projecte remot

Comanda: git clone

Per continuar treballan en el teu projecte m05-git, des d'un altre ordinador, necessites fer un clone.

/m05-git$ git clone <<url_projecte de gitlab>>

Ja tens el codi al teu ordinador, i també la informació de les anteriors versions!

/m05-git$ git log

Fixa't que en fer el clone, automàticament tens definit un remote origin:

/m05-git$ git remote show origin

Així doncs ja no et calrà definir-lo.


Repositori col·laboaratiu

Comandes: git clone, git merge, git pull, git push.
Ja coneixem les accions bàsiques de git, com son el add, commit i push. També sabem com configuar un remot i pujar-hi el codi amb el push

Ara treballarem en un repositori compartit entre 2 usuaris. Busca un company de classe per fer grups de 2.

Decidiu qui és el membre 1 i el membre 2. Utilitzarem el projecte que hem creat anteiorment.
Membre 1: A la configuració del teu projecte de Gitlab, busca com afegir el teu company com a "Mantainer"

Tots dos

Membre 1:

Membre 2:

Tots dos

Membre 2, fes el git pull i fixa't amb el missatge d'atenció:

   La fusió automàtica ha fallat; arregleu els conflictes i després comenteu el resultat.

Ens toca revisar el fitxer autors.txt ja que la versió del remot tenia un contingut, i la nostra versió local, no coneixia aquest canvi quan hem fet el nostre últim commit.

Fixeu-vos en el fitxer equip.txt en el pc del membre 2, apareixen unes línies que no heu escrit.
Aquestes linies informen els blocs de "codi" que han generat conflicte.

Des de gitlab, pots observar un gràfic similar al seguent:


My web

En aquest exercici farem grups de tres persones.
Ens hem ajuntat tres companys de classe per fer una web molt simple que expliqui com funciona GIT. Després de cada pas assegura't que estigui tot pujat al gitlab.

PAS 1.

Creeu un projecte compartit amb el següent arxius del projecte


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Projecte web compartit </title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>GIT</h1>
      <div class="intro">
        <h2>Introducció</h2>
        <p>Escriu aquí una breu introducció sobre git i comandes bàsiques</p>
      </div>
      <div class="branches">
        <h2>Branques</h2>
        <p>Escriu aquí una breu descripció del què són les branques i comandes bàsiques</p>
      </div>
      <div class="remot">
        <h2>Remot</h2>
        <p>Escriu aquí una breu descripció de com es treballa en remot i comandes bàsiques</p></div>
      </div>
   </div>
  </body>
</html>


body {
    
    background-color: #FFFFFF }
h1 {
  text-align: center;
    color: #009688;
}
h2 {
  text-align: left;
    color: #009688;
}

.container{
  margin: 20px;

}


div p {
  margin:25px;
  padding: 50px;
  border-style: groove;
  border-radius: 5px;
  border-color: #009688;
}

.intro h2 {
  
}

.branches h2 {
  
}

.remote h2 {
  
}

Pas 2

Per tal de distribuir-vos les tasques i no tenir tanta feina cada un de vosaltres farà l'explicació d'una part de la pàgina

Pas 3

.intro h2 {
  border-color: #009688;
}

Per canviar el color modifica els números (no la quantitat de digits). Pots trobar colors aquí

Pas 4

Finalment has decidit que no t'agrada el color de fons i has decidit canviar-lo.

Modifica el color de la següent línia i posa el que més t'agradi.

body {
    
    background-color: #FFFFFF 
}