Introducción a Git


Índice

  1. Introducción
  2. Git
  3. GitHub
  4. Commits (Compromisos o Confirmaciones)
  5. Merge Conflicts (Conflictos de Fusión)
  6. Branching (Ramificación)

Introducción

¡Bienvenidos de nuevo a la clase! Anteriormente, presentamos HTML, CSS y Sass como herramientas que podemos utilizar para crear algunas páginas web básicas. Hoy, aprenderemos sobre el uso de Git y GitHub para ayudarnos en el desarrollo de aplicaciones de programación web.

Git

Git icon

Git es una herramienta de línea de comandos que nos ayudará con el control de versiones de varias maneras:

  • Permitiéndonos hacer un seguimiento de los cambios que realizamos en nuestro código al guardar instantáneas (snapshots) de nuestro código en un momento dado.
  • Cambio de archivos Git, url de la imagen: /images/change_file.png
  • Permitiéndonos sincronizar fácilmente el código entre diferentes personas que trabajan en el mismo proyecto, al permitir que varias personas obtengan informaciónpully envíen informaciónpusha un repositorio almacenado en la web.
  • Cambio de archivos Git, url de la imagen: /images/mult_users.png
  • Permitiéndonos realizar cambios y probar el código en una rama diferente sin alterar nuestra base de código principal, y luego fusionar las dos juntas.
  • Permitiéndonos revertir a versiones anteriores de nuestro código si nos damos cuenta de que hemos cometido un error.

En las explicaciones anteriores, utilizamos la palabra "repositorio", que aún no hemos explicado. Un repositorio Git es una ubicación de archivos donde almacenaremos todos los archivos relacionados con un proyecto dado. Estos pueden ser remotos (almacenados en línea) o locales (almacenados en tu computadora).

GitHub

  • GitHub es un sitio web que nos permite almacenar repositorios Git de forma remota en la web.
  • Comencemos creando un nuevo repositorio en línea. Asegúrate de tener configurada una cuenta de GitHub. Si aún no tienes una, puedes crear unaaquí.
    1. Haz clic en el símbolo+en la esquina superior derecha y luego selecciona"Nuevo repositorio".
    2. Crea un nombre para el repositorio que describa tu proyecto.
    3. Proporciona una descripción para tu repositorio. (Opcional).
    4. Elige si el repositorio debe ser público (visible para cualquier persona en la web) o privado (visible solo para ti y otros a quienes concedas acceso específicamente).
    5. Decide si deseas agregar un README, que es un archivo que describe tu nuevo repositorio. (Opcional)
  • Crear repositorio de GitHub, url de la imagen: /images/github-repo.png
  • Una vez que tenemos un repositorio, probablemente querremos añadir algunos archivos a él. Para hacer esto, tomaremos nuestro repositorio remoto recién creado y crearemos una copia, o clonaremos, de él como un repositorio local en nuestra computadora.
    1. Asegúrate de tener Git instalado en tu computadora escribiendogiten tu terminal. Si no está instalado, puedes descargarloaquí.
    2. Haz clic en el botón "Code" en la página de tu repositorio y copia la URL que aparece. Si no creaste un README, este enlace aparecerá cerca de la parte superior de la página en la sección "Quick Setup".
      Crear repositorio de Github, url de la imagen: /images/github-repo-1.png
    3. En tu terminal, ejecutagit clone <URL del repositorio>. Esto descargará el repositorio a tu computadora. Si no creaste un README, es posible que obtengas la advertencia: "You appear to have cloned into an empty repository" (Parece que has clonado en un repositorio vacío). Esto es normal y no hay necesidad de preocuparse por ello.
      Captura de pantalla de consola (git clone [url]), url de la imagen: /images/git-clone.png
    4. Ejecuta el comandols, que lista todos los archivos y carpetas en tu directorio actual. Deberías ver el nombre del repositorio que acabas de clonar.
    5. Ejecutacd <nombre del repositorio>para cambiar al directorio de esa carpeta.
    6. Ejecutatouch <nombre del nuevo archivo>para crear un nuevo archivo en esa carpeta. Ahora puedes realizar ediciones en ese archivo. Alternativamente, puedes abrir la carpeta en tu editor de texto y agregar nuevos archivos manualmente. Para ejecutar éste comnado debemos descargar la consola de Git Bash, explicado en el punto 8.
    7. Para informar a Git que debe realizar un seguimiento del nuevo archivo que has creado, ejecutagit add <nombre del nuevo archivo>para realizar un seguimiento de ese archivo específico, ogit add .para realizar un seguimiento de todos los archivos dentro de ese directorio.
    8. Otra forma para trabajar con Git y poder usar todos sus comandos que algunos de ellos no están disponibles en la consola de powershell dentro del Visual Studio Code es que descarguemosGit Bash Console

Commits

  • Ahora, comenzaremos a explorar para qué puede ser realmente útil Git. Después de realizar algunos cambios en un archivo, podemos confirmar esos cambios, tomando una instantánea del estado actual de nuestro código. Para hacer esto, ejecutamos:git commit -m "algún mensaje"donde el mensaje describe los cambios que acabas de realizar.
  • Después de este cambio, podemos ejecutargit statuspara ver cómo nuestro código se compara con el código en el repositorio remoto.
  • Cuando estemos listos para publicar nuestras confirmaciones locales en GitHub, podemos ejecutargit push. Ahora, cuando vayamos a GitHub en nuestro navegador web, se reflejarán nuestros cambios.
  • Si solo has modificado archivos existentes y no has creado nuevos, en lugar de usargit add .y luegogit commit..., podemos condensar esto en un solo comando:git commit -am "algún mensaje". Este comando confirmará todos los cambios que hayas realizado.
  • A veces, el repositorio remoto en GitHub estará más actualizado que la versión local. En este caso, quieres confirmar primero cualquier cambio y luego ejecutagit pullpara traer cualquier cambio remoto a tu repositorio.

Merge Conflicts

  • Un problema que puede surgir al trabajar con Git, especialmente cuando colaboras con otras personas, es algo llamado conflicto de fusión. Un conflicto de fusión ocurre cuando dos personas intentan cambiar un archivo de maneras que entran en conflicto entre sí.
  • Esto suele ocurrir al realizargit pushogit pull. Cuando esto sucede, Git cambiará automáticamente el archivo a un formato que indica claramente cuál es el conflicto. Aquí tienes un ejemplo en el que se agregó la misma línea de dos maneras diferentes:
output example
1a = 1
2<<<<< HEAD
3b = 2
4=====
5b = 3
6>>>>> 56782736387980937883
7c = 3
8d = 4
9e = 5
  • En el ejemplo anterior, agregaste la líneab = 2y otra persona escribiób = 3, y ahora debemos elegir una de esas para mantener. El número largo es un hash que representa la confirmación que está entrando en conflicto con tus ediciones. Muchos editores de texto también ofrecerán resaltado y opciones simples como "aceptar actual" o "aceptar entrante" que te ahorran el tiempo de eliminar las líneas agregadas anteriormente.
  • Otro comando de Git potencialmente útil esgit log, que te proporciona un historial de todas tus confirmaciones en ese repositorio.
Historial de commits de git, url de la imagen: /images/git_log.png
  • Potencialmente aún más útil, si te das cuenta de que has cometido un error, puedes revertir a una confirmación anterior utilizando el comandogit resetde una de dos maneras:
  • git reset --hard <commit>revierte tu código exactamente a cómo estaba después de la confirmación especificada. Para especificar la confirmación, utiliza el hash de confirmación asociado con esa confirmación, que puedes encontrar usando git log como se mostró anteriormente.
  • git reset --hard origin/masterrevierte tu código a la versión actualmente almacenada en línea en GitHub (origin/master).

Branching

Después de haber estado trabajando en un proyecto durante algún tiempo, es posible que decidas que deseas agregar una función adicional. En este momento, simplemente podríamos confirmar los cambios a esta nueva función, como se muestra en la gráfica a continuación.

Captura de imagen de sin rama git, url de la imagen: /images/no_branch.png

Pero esto podría volverse problemático si luego descubrimos un error en nuestro código original y queremos revertirlo sin afectar la nueva función. Aquí es donde las ramas (branching) pueden resultar realmente útiles.

  • El branching (ramificación), es un método para avanzar en una nueva dirección al crear una nueva función y solo combinar esta nueva función con la parte principal de tu código, o la rama principal, una vez que hayas terminado. Este flujo de trabajo se verá más como se muestra en la siguiente gráfica:
Rama de git, url de la imagen: /images/branch.png
  • La rama que estás viendo actualmente está determinada por el HEAD, que apunta a una de las dos ramas. Por defecto, el HEAD apunta a la rama principal (master), pero también podemos cambiar a otras ramas.
  • Ahora, adentrémonos en cómo implementamos realmente el branching en nuestros repositorios de Git:
    1. Ejecutagit branchpara ver en qué rama estás trabajando actualmente, la cual tendrá un asterisco a la izquierda de su nombre.
      Captura de pantalla de la rama de Git, url de la imagen: /images/git_branch.png
    2. Para crear una nueva rama, ejecutaremos el comandogit checkout -b <nombre de la nueva rama>.
      Captura de imagen  de git checkot -b, url de la imagen: /images/new_branch.png
  • Cambiar entre ramas utilizando el comando git checkout<nombre de la rama>y realizar confirmaciones de cualquier cambio en cada rama.
  • Cuando estemos listos para fusionar nuestras dos ramas, cambiaremos a la rama que deseamos conservar (casi siempre la rama principal, generalmente llamada master), y luego ejecutaremos el comando git merge<nombre de la otra rama>. Esto se tratará de manera similar a un push o pull, y pueden surgir conflictos de fusión.

Más Características de GitHub

Hay algunas características útiles específicas de GitHub que pueden ayudarte cuando estás trabajando en un proyecto:

  • Forking Bifurcación: Como usuario de GitHub, tienes la capacidad de bifurcar cualquier repositorio al que tengas acceso, lo que crea una copia del repositorio del que eres el propietario. Hacemos esto haciendo clic en el botón "Fork" en la esquina superior derecha.
  • Pull Requests Solicitudes de extracción: Una vez que hayas bifurcado un repositorio y hayas realizado algunos cambios en tu versión, es posible que desees solicitar que esos cambios se agreguen a la versión principal del repositorio. Por ejemplo, si quisieras agregar una nueva característica a Bootstrap, podrías bifurcar el repositorio, hacer algunos cambios y luego enviar una solicitud de extracción. Esta solicitud de extracción podría ser evaluada y posiblemente aceptada por las personas que gestionan el repositorio de Bootstrap. Este proceso, en el que las personas realizan algunos cambios y luego solicitan que se fusionen en un repositorio principal, es vital para lo que se conoce como software de código abierto, o software creado por contribuciones de varios desarrolladores.
  • GitHub Pages: GitHub Pages es una forma sencilla de publicar un sitio estático en la web. (Aprenderemos más tarde sobre sitios estáticos frente a dinámicos.) Para hacer esto:
    1. Crea un nuevo repositorio en GitHub.
    2. Clona el repositorio y realiza cambios localmente, asegurándote de incluir un archivo index.html que será la página de inicio de tu sitio web.
    3. Sube esos cambios a GitHub.
    4. Ve a la página de Configuración de tu repositorio, desplázate hacia abajo hasta GitHub Pages y elige la rama principal en el menú desplegable.
    5. Desplázate de nuevo hacia abajo a la sección de GitHub Pages en la página de configuración, y después de unos minutos, deberías ver una notificación que dice "Tu sitio se ha publicado en: ..." que incluirá una URL donde puedes encontrar tu sitio.

¡Eso es todo para esta clase! ¡Para la próxima, estaremos viendo Python!

Compartir

Todos los nombres de productos, logos y marcas son propiedad de sus respectivos creadores.