Header Ads Widget

Ticker

6/recent/ticker-posts

Git y GitHub para desarrolladores de JavaScript / Angular con VS Code

 Si ha trabajado anteriormente con un proyecto de JavaScript / Angular, es muy probable que tenga algunos cambios que rompieron su código e impidieron que se ejecutara correctamente, pero no estaba seguro de cómo volver a la versión anterior de su código. Esto les sucede todo el tiempo a todos los desarrolladores, particularmente en proyectos grandes o incluso en los mismos proyectos si aún está aprendiendo a usar sus herramientas o aún está aprendiendo a trabajar con JavaScript / TypeScript o Angular.

Los desarrolladores de software habían encontrado una solución para este tipo de problemas hace mucho tiempo que se conoce como sistemas de control de versiones. Incluso si no es un experto, es probable que haya utilizado un sistema de control de versiones antes de alguna manera.

Los sistemas de control de versiones son una herramienta indispensable en el desarrollo web moderno que pueden ayudarlo a resolver muchos problemas relacionados con todas las tareas. Git es uno de los sistemas de control de versiones más populares en la actualidad.

A lo largo de este tutorial, aprenderemos juntos de los pasos básicos qué es Git, cómo usarlo para sus proyectos de desarrollo web con JavaScript y Angular, y cómo usarlo junto con GitHub para colaborar con otros desarrolladores que forman parte de su equipo. o si solo desea contribuir a otros proyectos de código abierto.

Aprenderemos cómo crear un repositorio de GitHub, cómo agregar los archivos de código fuente de su proyecto y cómo controlar el historial de su proyecto para que pueda "viajar en el tiempo" al desarrollar su nuevo proyecto JavaScript o Angular. Esto significa que no tiene que preocuparse por romper su código, ya que puede volver a la versión anterior de su código de trabajo en cualquier momento que lo necesite.

¿Cómo instalar Git?

Supongamos que no tiene Git instalado en su máquina de desarrollo y comience con las instrucciones generales que puede seguir para instalarlo. En la mayoría de los sistemas operativos, el proceso de instalación es bastante sencillo y directo.

Puede instalar o actualizar Git a través de un administrador de paquetes, instaladores binarios o descargar el código fuente y compilarlo.

Instalación de Git en Linux y macOS

Puede instalar Git en Linux a través de la herramienta de administración de paquetes del sistema. Por ejemplo, en Fedora (o cualquier distribución basada en RPM, como RHEL o CentOS), puede usar dnflo siguiente:

$ sudo dnf install git-all

En sistemas basados ​​en Debian, como Ubuntu, puede utilizar aptlo siguiente:

$ sudo apt install git-all

Consulte el sitio web oficial de Git para obtener instrucciones sobre cómo instalarlo en las otras distribuciones de Unix.

Para macOS. Puede descargar y usar un instalador de Git en https://git-scm.com/download/mac . Esto solo es necesario si no instaló previamente las herramientas de línea de comandos de Xcode.

Instalación de Git en Windows

La instalación de Git en Windows es diferente, necesita usar un proyecto separado llamado Git para Windows que es independiente del proyecto oficial de Git. Puede descargar el instalador desde Simplemente vaya a https://git-scm.com/download/win y siga el proceso de instalación que es similar a cualquier programa típico de Windows.

¿Qué es Git?

Ahora que hemos instalado Git en nuestra máquina de desarrollo, volvamos a los conceptos fundamentales del sistema de control de versiones más popular.

Entonces, ¿qué es Git?

Git es un sistema de control de versiones distribuido. ¡Parece que cada uno de estos términos necesita su propia explicación! Entendamos lo que significa cada término.

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 simplemente cambió 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.

En el mundo de Git, salvamos el estado haciendo un compromiso .

Git le permite agregar un mensaje a su comando de confirmación que le ayuda a usted u otros desarrolladores a comprender rápidamente qué cambios se han realizado.

Aún más, Git le permite verificar el historial de todas las confirmaciones y los mensajes correspondientes. Siempre que haya utilizado los mensajes correctos, lo cual depende completamente de usted y Git no puede hacer nada al respecto, esto puede ayudarlo a ver una descripción general completa y el historial de su proyecto.

Dado que los mensajes de confirmación son importantes, pero Git no impone ninguna guía para escribir estos mensajes, ya que están diseñados, en primer lugar, para humanos, los desarrolladores de software han creado varias convenciones que proporcionan un conjunto sencillo de reglas para escribir mensajes de confirmación.

Cuando contribuya a proyectos de código abierto, estará obligado a adherirse al formato de mensaje de confirmación y las convenciones que utilizan los desarrolladores del proyecto. Si está trabajando con un equipo en un proyecto, debe asegurarse de estar de acuerdo con algunas convenciones para escribir mensajes, esto hace que la colaboración sea mucho más fácil y productiva.

Estos son excelentes ejemplos de repositorios de código abierto con mensajes de confirmación concisos y consistentes:

Esto es lo que dijo Peter Hutterer sobre escribir buenos mensajes de compromiso :

Restablecer el contexto de un fragmento de código es un desperdicio. No podemos evitarlo por completo, por lo que debemos esforzarnos por reducirlo [tanto] como sea posible. Los mensajes de confirmación pueden hacer exactamente eso y, como resultado, un mensaje de confirmación muestra si un desarrollador es un buen colaborador .

Ver: - Cómo escribir un mensaje de confirmación de Git , - Comprometerse Directrices de mensajes , - Se compromete convencionales : Una especificación para añadir significado humano y la máquina de lectura a los mensajes de confirmación

Git no solo le proporciona un registro de los cambios que ha realizado en su código, sino que también le permite comparar sus archivos de código fuente entre diferentes confirmaciones. Lo más importante es que Git te permite restaurar cualquier archivo a una confirmación anterior con un simple comando.

Sistemas de control de versiones distribuidos

Ahora que, con suerte, hemos entendido qué es un sistema de control de versiones, ¿qué pasa con el sistema de control de versiones distribuido?

En los primeros días de los sistemas de control de versiones, los desarrolladores solían almacenar sus repositorios de código (un conjunto de confirmaciones) en su disco duro local, lo cual fue un buen paso adelante, en lugar de usar ningún control de versiones, ya que pueden controlar y volver a versiones anteriores de su código en cualquier momento con total facilidad. Pero en la mayoría de los casos, un proyecto de desarrollo de software o web no involucra solo a un desarrollador, sino a varios desarrolladores que trabajan, simultáneamente en la misma base de código como un equipo, para completar el proyecto, por lo que el enfoque de almacenar las confirmaciones localmente no fue tan útil a esta escala. .

A medida que surgió la necesidad de una mayor colaboración en los proyectos, los sistemas de control de versiones se adaptaron para almacenar repositorios en un servidor central al que accedía todo el equipo. Esto fue muy útil, pero tiene otros inconvenientes, como el bloqueo de archivos. Puede referirse a esto como un sistema de control de versiones centralizado .

Aquí hay una definición de un control de versión centralizado de este artículo de Atlassian :

Los sistemas de control de versiones centralizados se basan en la idea de que hay una única copia "central" de su proyecto en algún lugar (probablemente en un servidor), y los programadores "confirmarán" sus cambios en esta copia central. “Confirmar” un cambio simplemente significa registrar el cambio en el sistema central.

Este es un diagrama que muestra el funcionamiento de alto nivel del sistema de control de versiones centralizado:

sistema de control de versiones centralizado

Git no es un sistema de control de versiones centralizado

Git no es un sistema de control de versiones centralizado, ya que no requiere un servidor central que tenga la versión definitiva del repositorio de código.

El control de versiones distribuido proporciona un mayor rendimiento y una mejor colaboración entre los desarrolladores, pero también es más complejo de manejar, especialmente cuando se sincroniza el trabajo de varios desarrolladores después de haber trabajado fuera de línea durante algún tiempo.

¿Qué pasa con GitHub?

En nuestros días modernos, la mayoría de los equipos remotos colaboran utilizando GitHub como servidor central, pero esto no significa que Git sea un sistema centralizado, ya que esto solo es necesario para compartir el código base, pero no lo requiere Git en sí. Su código está disponible en su repositorio local y las confirmaciones se envían a GitHub solo cuando los desarrolladores así lo deciden.

Este es un diagrama que muestra el funcionamiento de un sistema de control de versiones distribuido:

En un sistema de control de versiones distribuido, los desarrolladores necesitan descargar (clonar) una copia de un repositorio, que contiene el historial completo y los metadatos del código base original, en el disco duro local.

Consulte Sistemas de control de versiones centralizados frente a distribuidos .

Cómo usar Git y GitHub

Ahora que hemos entendido qué es un control de versiones distribuido y qué es Git, aprendamos cómo trabajar prácticamente con él. Aprenderemos a usar Git en nuestra máquina de desarrollo local. Luego, aprenderemos cómo usarlo con GitHub para compartir nuestro código con nuestro equipo de desarrolladores o con el mundo entero como un proyecto de código abierto.

Configurar las credenciales de usuario de Git a nivel mundial: identificarse en Git

Antes de trabajar con Git, primero debe configurar su nombre de usuario. Puede configurar su nombre de usuario con el git configcomando de la siguiente manera:

$ git config --global user.name "User Name"

También puede agregar su correo electrónico de la siguiente manera:

$ git config --global user.email user@example.com

El nombre de usuario es arbitrario, pero se recomienda que utilice su nombre completo. Mientras que su correo electrónico es particularmente necesario si colabora con otros desarrolladores utilizando un repositorio central como GitHub o un servidor privado.

Puede verificar su identidad configurada, enumerando las variables de configuración con el siguiente comando:

$ git config --list

El comando anterior establecerá sus credenciales globalmente en su máquina de desarrollo, es decir, estas son las credenciales predeterminadas que se usarán con todos los repositorios de Git.

Configuración de credenciales de usuario de Git por repositorio

A veces, deberá establecer una identidad para cada repositorio, particularmente la parte del correo electrónico. Por ejemplo, si trabaja con varias organizaciones. En este caso, deberá configurar las credenciales por repositorio junto con sus credenciales globales que se utilizarán de forma predeterminada cuando las credenciales por repositorio no estén disponibles.

Para configurar sus credenciales para un repositorio, ejecute los siguientes comandos:

$ cd [path/to/repo]
$ git config user.name "User name"
$ git config user.email "your@email.com"

Asegúrese de navegar a la carpeta de su repositorio antes de ejecutar el git configcomando.

Consulte la documentación de git-config .

Eso es suficiente en este punto, veremos a continuación cómo configurar también sus credenciales de GitHub con Git.

Cómo crear un nuevo repositorio de Git

Ahora que ha configurado Git con sus credenciales globales, puede crear un repositorio de Git para comenzar a crear versiones de su proyecto JavaScript / Angular.

Puede crear un repositorio usando el git initcomando dentro de la carpeta de su proyecto de JavaScript de la siguiente manera:

$ cd angularproject
$ git init

Esto inicializará un repositorio nuevo y vacío.

Si ha generado un proyecto con Angular CLI, este último invocará automáticamente a Git e inicializará un nuevo repositorio e incluso realizará la primera confirmación de su código Angular en ese punto.

Si generó un proyecto Angular, diríjase a su terminal, navegue dentro de la carpeta del proyecto y ejecute el siguiente comando:

$ git log

Obtendrá un resultado similar:

commit b2f1d7463e2287035a0f94d011d32a4b432d3fbe (HEAD -> master)
Author: techiediaries <your@gmail.com>
Date:   Fri Apr 17 12:50:28 2020 +0100

    initial commit

Obtenemos información sobre la primera confirmación con el initial commitmensaje.

Más adelante veremos cómo puede configurar su repositorio para enviarlo a GitHub.

Puede verificar el estado de su repositorio usando el git statuscomando. Regrese a su interfaz de línea de comandos y ejecute:

$ git status

Git en VSCode

Visual Studio Code tiene control de fuente integrado e incluye soporte Git en la caja. Muchos otros proveedores de control de fuente están disponibles a través de extensiones en VS Code Marketplace.

Puede usar esta extensión para compatibilidad con GitHub.

En este tutorial, veremos cómo inicializar un proyecto Angular 10 y configurarlo con VS Code y Git para enviar nuestro código a un repositorio remoto de GitHub.

Visual Studio Code (VS Code) es hoy en día uno de los editores de código más populares entre los desarrolladores web. Se hizo popular gracias a sus muchas funciones integradas, como la integración del control de fuente, es decir, con Git . La integración de Git con VS Code hace que su desarrollo sea más eficiente y robusto.

Instalación de Angular CLI 10 e inicialización de un nuevo proyecto

Asegúrese de tener Node.js, npm y Visual Studio Code instalados en su máquina de desarrollo y comience ejecutando el siguiente comando en su terminal:

$ npm install --global @angular/cli@next

Usamos la siguiente etiqueta para instalar la última versión preliminar de Angular, que es la versión 10 en el momento de escribir este tutorial.

A continuación, cree una nueva aplicación Angular 10 desde la interfaz de línea de comandos usando el siguiente comando:

$ ng new MyAngular10App

Se le pedirá un par de preguntas, que puede responder como mejor le parezca, ya que no afectarán la forma en que configuramos Git con nuestro proyecto.

Abrir su proyecto en Visual Studio Code

Regrese a su terminal y ejecute los siguientes comandos para abrir su proyecto Angular 10 es Visual Studio Code:

$ cd MyAngular10App
$ code .

También puede abrir VS Code primero desde su lanzador y abrir la carpeta de su proyecto desde el editor de código.

Ahora, puede usar el terminal integrado en Visual Studio Code que se puede abrir mediante el atajo de teclado CTRL + `en Linux, macOS o Windows.

Cuando ha creado un proyecto con Angular CLI, también ha inicializado un repositorio GIT vacío en su proyecto e incluso ha realizado una primera confirmación para el código fuente generado.

Puede asegurarse de eso mirando el registro de las confirmaciones de git dentro de la carpeta de su proyecto simplemente ejecutando el siguiente comando:

$ git log

Tendrá una salida similar:

commit b2f1d7463e2287035a0f94d011d32a4b432d3fbe (HEAD -> master)
Author: techiediaries <email@gmail.com>
Date:   Fri Apr 17 12:50:28 2020 +0100
    initial commit

Vincular un repositorio de GitHub remoto

Git es un sistema de control de código fuente distribuido que no necesita un servidor de repositorio central como GitHub, pero para compartir su código con otros desarrolladores en su equipo o en todo el mundo, ¡GitHub es la plataforma adecuada hoy en día!

Si desea colaborar con su equipo en el mismo proyecto Angular o simplemente desea mantener una copia remota del código fuente de su proyecto, entonces necesita agregar un repositorio GitHub remoto a su repositorio Git que le permitirá empujar, tirar y sincronizar el código entre los repositorios locales y remotos en cualquier momento.

El primer paso es configurar las credenciales de usuario de GitHub (correo electrónico y nombre que se usaron cuando se registró en su cuenta de GitHub) con Git.

Regrese a su terminal y ejecute los siguientes comandos:

$ git config --global user.name "Your user name"
$ git config --global user.email "email@example.com"

En realidad, puede agregar el nombre que desee, pero asegúrese de usar la dirección de correo electrónico correcta.

A continuación, debe ir a su cuenta de GitHub y crear un nuevo repositorio vacío. Asegúrese de anotar la URL de su repositorio.

Enviar su código Angular 10 a GitHub

Abra el src/index.htmlarchivo y agregue algunos cambios. Puede cambiar el título, por ejemplo.

Dirígete al panel de control de código fuente, donde puedes ver que Git reconoce tus cambios. Verá el nombre del archivo modificado con la letra U junto a él. U significa archivo sin seguimiento , que marca un archivo nuevo o modificado, pero que aún no se ha agregado al repositorio.

A continuación, debe hacer clic en el icono más del index.htmlarchivo para rastrear el archivo por el repositorio.

Después de eso, la letra al lado del archivo se convertirá en una . lo que significa el archivo que se agrega al repositorio.

A continuación, debe confirmar sus cambios, ingresar un mensaje de confirmación en el cuadro de entrada en la parte superior del panel de control de código fuente y hacer clic en el icono de verificación para realizar la confirmación.

Después de agregar su repositorio remoto a su repositorio local de Git usando el siguiente comando:

$ git remote add origin <URL-OF-YOUR-REPOSITORY>

Puede enviar su código a GitHub usando la línea de comandos o el Código VS:

$ git push

Publicar un comentario

0 Comentarios