C1 - Git y GitHub

Full Stack amb React

Full Stack amb React

Full Stack amb React

¿Qué es Git?

El código de nuestra aplicación va a ir evolucionando durante todo su desarrollo. Git es una herramienta de control de versiones que nos va a permitir ir guardando un histórico de todos los cambios que va sufriendo nuestro código.

 

Gracias a Git iremos guardando una instántanea del código de nuestro proyecto cada vez que lo creamos conveniente, introduciendo así pasos o hitos en la evolución temporal de los archivos.

 

Además nos va a permitir trabajar en equipo y que varias personas estén desarrollando en el mismo código, ayudándonos a que los diferentes desarrollos se vayan fusionando en uno solo.

Full Stack amb React

Full Stack amb React

¿Qué es GitHub?

GitHub es una plataforma en la nube que nos permite almacenar nuestro código versionado con Git y que nos ofrece un lugar centralizado donde va a residir todo el proyecto. Está orientada al trabajo colaborativo y es el sitio de referencia del software open source (de código abierto).

 

En esta formación usaremos Git para los ejercicios y los alojaremos en GitHub.

 

Para usar GitHub sólo tenemos que crear una cuenta de usuario en su web.

Full Stack amb React

Full Stack amb React

Instalación de Git

Podemos bajar Git desde la web git-scm.com

 

Durante el proceso de instalación, nos aseguramos de marcar Visual Studio Code como editor por defecto.

 

Tras instalar Git, es importante que configuremos nuestros datos de usuario desde una terminal:

 

git config --global user.name "Mario González"

git config --global user.email mario@mariogl.com

Full Stack amb React

Full Stack amb React

Repositorios

El código de nuestro proyecto va a residir en varios repositorios. El repositorio (o repo) en el que nosotros vamos a desarrollar es el repositorio local, el que está en nuestra máquina.

 

Cada desarrollador miembro del equipo va a tener un repositorio local en su máquina, con una copia del código.

 

Además, generalmente tendremos un repositorio central al que tienen acceso todos los miembros del equipo. En nuestro caso alojaremos los repo centrales en GitHub.

Full Stack amb React

Full Stack amb React

Repositorios

El código de nuestro proyecto va a residir en varios repositorios. El repositorio (o repo) en el que nosotros vamos a desarrollar es el repositorio local, el que está en nuestra máquina.

 

Cada desarrollador miembro del equipo va a tener un repositorio local en su máquina, con una copia del código.

 

Además, generalmente tendremos un repositorio central al que tienen acceso todos los miembros del equipo. En nuestro caso alojaremos los repo centrales en GitHub.

Full Stack amb React

desarrollador

desarrollador

desarrollador

GitHub

Full Stack amb React

Repositorio local

Full Stack amb React

Para crear un repositorio local, sólo tenemos que abrir la terminal en la carpeta del proyecto y lanzar el siguiente comando:

 

git init

Full Stack amb React

Repositorio remoto

Full Stack amb React

Para crear un repositorio remoto en GitHub, iniciamos sesión en la plataforma y, bajo el signo +, escogemos la opción "New repository".

 

Luego tenemos que darle un nombre al repo y decidir si es público o privado.

 

Por último, copiaremos la URL del repo para conectarlo con nuestro repositorio local.

Full Stack amb React

Conectar repositorios

Full Stack amb React

Para conectar nuestro repo local con el remoto, abrimos la terminal en nuestro proyecto y escribimos:

 

git remote add origin URL-github

A partir de ahora nuestro repo local estará conectado mediante el remote "origin" al repositorio remoto.

Full Stack amb React

Los commits

Cada vez que queramos guardar un snapshot de nuestro proyecto, debemos hacer un commit. Un commit es una fotografía del estado de nuestra carpeta del proyecto en un momento determinado.

 

El histórico de cambios de mi proyecto será una secuencia de commits a lo largo del tiempo.

 

Cada commit tiene estos datos:

  • Fecha y hora
  • Autor
  • Mensaje
  • Hash

Full Stack amb React

Full Stack amb React

¿Cómo hago un commit?

Antes de hacer un commit tenemos que prepararlo. Imaginad que un commit es una foto, pues antes de hacerla tenemos que pedirles a todas las personas que queremos que aparezcan que se suban al escenario.

 

Para decir qué cambios quiero que se añadan al commit, tengo que añadirlos al stage.

Full Stack amb React

Una vez que tengo en el stage todo lo que quiero añadir, entonces puedo hacer el commit estableciendo un mensaje descriptivo.

 

Es importante que el mensaje describa bien los cambios: evitemos mensajes como "CSS", "estilos", "mejoras", "cambios".

cambio 1

cambio 3

cambio 2

cambio 1

cambio 3

cambio 2

stage

stage

commit

cambio 1

cambio 3

cambio 2

Full Stack amb React

Subir cambios al repo remoto

Full Stack amb React

La primera vez que queramos subir cambios a GitHub, abriremos la terminal y escribiremos este comando:

 

git push -u origin master

A partir de aquí, cada vez que queramos subir cambios, sólo tendremos que escribir:

 

git push

Full Stack amb React

Ramas

Las ramas en Git nos van a permitir avanzar diferentes desarrollos en paralelo para el mismo código, y serán fundamentales a la hora de compartir el código con otros miembros del equipo.

Full Stack amb React

Por defecto, la primera rama de un repositorio Git se llama master.

Full Stack amb React

Ramas

Una rama en Git no es más que un cartel que apunta a un commit determinado. Yo puedo tener varias ramas e ir saltando de una a otra con checkout.

 

Cuando hago checkout a una rama, los archivos de mi proyecto cambian. Por esta razón, si yo tenía cambios pendientes, muchas veces no me deja cambiar de rama.

 

Para almacenar los cambios en un escondite temporal, podemos usar stash. Para recuperarlos después podemos usar stash apply (los recuperamos y los sigue dejando en el stash) o stash pop (los recuperamos y los borra del stash).

Full Stack amb React

Full Stack amb React

Ramas

Lo recomendable en Git es no trabajar directamente en las ramas principales, y utilizar ramas temporales para desarrollar.

 

Se crea una rama temporal por cada tarea que vayamos a implementar (puede ser un avance, una mejora o una corrección de un bug). En la rama temporal puede haber tantos commits como necesitemos.

 

Cuando se acaba la tarea, se vuelca la rama temporal en la principal y se borra la rama temporal. No es buena práctica reutilizar ramas ya mergeadas.

Full Stack amb React

Full Stack amb React

Pull Request

En vez de volcar las ramas temporales a la principal directamente, se suele utilizar el sistema de Pull Requests.

 

Cuando quiero volcar una rama temporal, la subo al repositorio remoto y creo una PR solicitando que esta rama se vuelque en la rama principal.

 

La PR es un espacio de revisión del código, donde tanto yo como otros miembros del equipo pueden revisar y comentar lo que se va a volcar.

 

Cuando se mergea la PR, el trabajo de la rama temporal ya está en la rama principal, por tanto la rama temporal se borra en el repo remoto.

Full Stack amb React

Full Stack amb React

Full Stack amb React

Recursos interesantes de esta unidad

Libro en digital, considerado la referencia para aprender Git.

Tutorial en forma de juego y muy visual para aprender a usar Git.

Posts del blog de mariogl.com sobre Git.

Desenvolupador Web Full Stack amb React - C1-Git y GitHub

By mariogl

Desenvolupador Web Full Stack amb React - C1-Git y GitHub

Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C1 - Git y GitHub

  • 215