¿Cómo añadir GIT a nuestro proyecto Angular?

Si ya has trabajado anteriormente con un proyecto Angular, es muy probable que, a la hora de realizar un cambio, hayas pasado de una versión estable del mismo a un código que no se ejecuta o que lo hace de forma incorrecta.

 Esto sucede todo el tiempo a todos los desarrolladores, independientemente de que aún estes aprendiendo a trabajar con Angular o de estar integrado en un proyecto grande junto al resto de compañeros.

Para ayudarnos con esta problemática, los desarrolladores tenemos a nuestra disposición una solución que se conoce como los sistemas de control de versiones. Durante este post daremos los primeros pasos en el uso de Git, el sistema de control de versiones mas usado actualmente, en un proyecto Angular.

¿Qué es GIT?

Git es un sistema de control de versiones distribuido.

Un sistema de control de versiones es un conjunto de herramientas que realizan un seguimiento del historial de versiones de sus archivos. Esto significa que Git (o cualquier otro sistema de control de versiones) se puede utilizar para guardar el estado de sus archivos en cualquier momento.

Por lo tanto, puede seguir trabajando en sus archivos cambiando el contenido o borrando los archivos y restaurar el estado anterior en cualquier momento si tiene un problema o si acaba de cambiar de opinión. 

Esto es bastante similar a hacer una copia de seguridad del sistema de los archivos de su disco duro, pero a un nivel granular, fichero a fichero. En el mundo de Git, cada vez que guardamos estos cambios estamos haciendo un commit o confirmación.

Añadiendo GIT a nuestro proyecto Angular

El primer paso que debemos realizar es el de comprobar que tenemos Git instalado en nuestro equipo. Para ello podemos ejecutar el siguiente comando en la consola del sistema o si lo preferís, en el terminal de Visual Studio Code.

$ git –version

En el caso de no estar instalado, podemos descargarnos la última versión desde su pagina oficial.

A continuación, procederemos a crear nuestro proyecto Angular o a usar uno que ya tengamos creado anteriormente.

$ npm install -g @angular/cli

$ ng new aprendiendogit

Ahora que tenemos nuestro proyecto de Angular listo, nos posicionamos en el terminal y escribimos el siguiente comando:

$ git init

Este comando inicializará Git en nuestro proyecto, creando además una carpeta oculta .git y un fichero .gitignore donde  incluiremos los ficheros que no deseamos que se suban al repositorio. Si ya teníamos Git instalado y en función de su configuración, es probable que al crear el proyecto de Angular ya nos haya creado automáticamente la carpeta y el fichero .gitignore.

Nota: Es posible que, al iniciar el Git en nuestro proyecto Angular, Visual Studio nos muestre un mensaje indicando que añadamos la carpeta node_modules al fichero .gitignore. Debemos indicar que sí, ya que la carpeta node_modules puede ser replicada fácilmente al descargar el proyecto desde otro dispositivo.

Al haber iniciado Git por primera vez, tendremos que subir todo nuestro proyecto al repositorio (podemos ver en la imagen que tenemos 30 ficheros cambiados). El proceso es el mismo que si ya estuviera subido y necesitáramos subir un cambio o un fichero nuevo. Para ello, usaremos los siguientes comandos:

$ git status 

Nos indica que ficheros son nuevos o han sido modificados y aun no se han confirmado (commited) al repositorio.

$ git add .

Añade todos los ficheros y carpetas al commit, es decir, estamos indicando que estados de acuerdo con los cambios que hemos realizado y que hemos visto en el git status y los preparamos para su posterior subida.

$ git commit -m «Initial commit» 

Confirmamos los cambios añadiéndoles un mensaje explicativo.

Al ejecutar estos parámetros y confirmar los cambios, veremos como en el Visual Studio Code desaparece cualquier indicativo visual de cambios, y que, si volvemos a lanzar el comando git status, no aparecen cambios. Esto es así porque al hacer el commit, hemos indicado que, desde ese momento, ese es el código base, y todo lo que hagamos después, serán nuevos cambios que deberán de subirse con otro commit.

Es importante recalcar que todo este proceso confirma los cambios en tu rama local, en el código que te has descargado, no en código del proyecto ubicado en el repositorio remoto. De echo, durante este post aún no hemos vinculado nuestro proyecto a un repositorio como GitHub.

$ git log 

Con este comando podemos ver todas las confirmaciones que hemos ido realizando en nuestro proyecto y que aún no hemos subido al repositorio. En la imagen podemos ver el commit que acabamos de realizar y el mensaje. Es importante que el mensaje sea lo mas explicativo posible.

Este sistema nos aporta mucha flexibilidad y control sobre lo que estamos cambiando y que queremos incorporar al código base.

Supongamos que nos han mandado realizar un cambio en nuestro proyecto de página web personal, añadiendo un nuevo apartado “Estudios”.

Podemos dividir ese trabajo en pequeños hitos como crear el routing o navegación, creación de componentes y datos o añadir los últimos toques de estilo, dividiéndolos en commits y luego subiremos al repositorio. Así sabremos en todo momento que estamos haciendo, y si algo sale mal, saber exactamente que ficheros hemos modificado.

Una vez que tengamos todo preparado, es el momento de subirlo al repositorio. Para este ejemplo, usaremos GitHub, al ser un repositorio gratuito y uno de los más usados en la actualidad.

Para ellos, entraremos en nuestra cuenta de GitHub o nos crearemos una si aún no la tenemos. Una vez dentro, pincharemos en la parte superior derecha sobre el símbolo + y crearemos un repositorio nuevo asignándole el mismo nombre que hemos dado a nuestro proyecto de Angular.

Una vez creado, dispondremos de varias opciones para subir nuestro proyecto Angular a GitHub. En nuestro caso, como ya lo tenemos creado, usaremos la segunda opción, señalada en rojo.

Procedemos a ejecutar los comandos:

$ git remote add origin https://… 

Con este comando, estamos indicado el repositorio al que queremos subir nuestro proyecto.

$ git branch -M main 

Creamos una nueva rama con el código que tenemos llamada “main” y nos movemos a ella.

$ git push -u origin main 

Subimos el código.  El comando push sigue el esquema «git push -u [remote name] [branch name]». El parámetro -u se usa la primera vez para referenciar el repositorio al que vamos a realizar las subidas posteriores de código o siguientes push.

Nota: Si es la primera vez que realizamos este proceso, el terminal nos solicitara que ingresemos el usuario y la contraseña de GitHub para verificar que tenemos acceso. Una vez introducidas, se realizará la subida de código de forma automática.

Cómo crear una rama

Hemos visto todo el proceso de creación y subida de un proyecto Angular a nuestro repositorio privado de GitHub a través de comandos desde el terminal de Visual Studio Code o desde la consola de Windows. Vemos ahora como realizar cambios en nuestro proyecto usando las comodidades que nos aporta VS Code.

Por norma general, cualquier proyecto al que nos vayamos a incorporar al entrar en una empresa, serán proyectos conjuntos con otros desarrolladores.

Debido a esto, nace la necesidad de usar ramas nuevas, es decir, versiones locales del código, donde realizar nuestros cambios y probarlos antes de ser subidos al código principal que se usará posteriormente por los demás compañeros.

De esta manera, los cambios que realice cada desarrollador serán fácilmente identificables y evitaremos reemplazar, con nuestras subidas, código que haya cambiado otro compañero. Para ello pulsaremos sobre el nombre de la rama en la que nos encontramos, que podemos ver en la parte inferior izquierda, mostrándonos un desplegable donde nos dará la opción de crear una nueva rama. Indicamos el nombre y aceptaremos.

Por ello, lo primero que debemos hacer antes de realizar un cambio en un proyecto común, es actualizar la rama principal que tenemos en local. Este paso puede parecer obvio, pero cuando trabajamos con otros compañeros, es vital obtener todos los cambios que ellos han realizado antes de crear una nueva rama ya que tenemos que trabajar siempre con la última versión de código disponible. Para ello, desde el VS Code nos dirigiremos al menú lateral izquierdo, pincharemos sobre la opción de “Source Control” y ejecutaremos la opción de Pull.

A continuación, realizaremos los cambios que queremos en nuestro proyecto. En nuestro ejemplo hemos creado un nuevo componente de Angular y lo hemos añadido al index.html. Si volvemos a la pestaña de Source Control, podremos ver los cambios que se han realizado en el proyecto, desde los ficheros que han sido modificados (con una M) y los añadidos (U). Esta ventana muestra el mismo resultado que el comando git status que habíamos ejecutado anteriormente.

El siguiente paso debe ser confirmar los cambios.

Para ello pulsamos sobre el botón + en cada uno de los ficheros, o sobre el botón + que aparece al colocarnos sobre la palabra “Changes”. Este proceso dejará los ficheros en un estado de “Staged” o “Preparados”, similar a lo que hicimos con el comando Git add salvo que desde aquí podemos comparar los ficheros que hemos ido modificando con los ficheros originales, así como descartar cualquier cambio o no subir determinados ficheros.

A continuación, añadiremos un mensaje “nuevo componente creado” y pulsaremos sobre el icono del Tick que genera un commit o confirmación.

Para subir los cambios, pulsaremos sobre la opción de Push, que subirá todos los cambios al repositorio. Estos cambios, por norma general, no se fusionan con el código del repositorio automáticamente para evitar cualquier problema de que se suban errores, o bien porque se necesitan realizar unas pruebas automáticas y la aprobación de un desarrollador senior antes.

En estos casos se crean una solicitud de cambios o pull request. Dentro de ella podremos ver los cambios que hemos subido, que ficheros son y e incluso el código anterior y el actual. Si vemos que todo es correcto y no hemos subido nada incorrecto continuaríamos aceptando el cambio.

Trabajando de esta manera, Git nos proporciona una manera fácil de incorporar nuevos cambios y funcionalidades a nuestro proyecto, de forma clara y concisa, evitando problemas de subir ficheros que no tienen que ver con el cambio que hemos realizado o solapándonos y sobrescribiendo el trabajo de otros compañeros.

Nota: Es posible que otro desarrollador haya modificado el mismo fichero que tus vayas a subir. En este caso, Git fusiona automáticamente los cambios tuyos con los subidos por otro desarrollador, pero en caso de no tener dudas (se ha modificado la misma línea, por ejemplo), se producirá un conflicto y Git solicitará que seas tu quien determine qué cambio de los dos va a quedar. Este proceso se realiza desde VS Code.

Si bien Git tiene multitud de comandos diferentes, aquí solo hemos indicado los mas usados a la hora de realizar cambios en un proyecto. Para aquellos lectores más curiosos, os recomendamos descargaremos la Cheat Sheet que proporciona Git desde este enlace y probar todos los que os resulten interesantes.

¿Quieres seguir aprendiendo programación web? Escríbenos a hello@codehouse.academy