Visual Studio Code Dia 5 Git

Vídeo Guía

Vídeo 5: Git

Hola a todos bienvenidos al vídeo número 5 en Visual Studio Code.

Simplemente para recordar que esta serie de vídeos es solamente la primera parte, la idea es que nos volvamos expertos en Visual Studio Code, en TypeScript, en React y en SharePoint Framework (SPFx).

Este es el quinto vídeo de la primera serie sobre Visual Studio Code en la cual estaremos viendo toda la parte de control de versiones con Git, espero que lo disfruten.

Crear un repositorio

En esta primera sección vamos a ver ¿cómo crear un repositorio en GitHub y cómo hacer lo mismo en Visual Studio Team Servicies? Los Repositorios Git se pueden crear tanto en Github, en BitBucket, se pueden crear en Team Foundation Server on Premises y en Visual Studio Team Services.

Entonces estoy en mi cuenta en Github y simplemente le voy a dar clic en crear nuevo repositorio.

alt text

Vamos a hacer vídeo 5, por ejemplo, es un repositorio público con VS Code tutorials, le doy crear repositorio

alt text

Mientras tanto en Visual Studio Team Services voy a crear un proyecto nuevo.

alt text

Vídeo 5, la parte del tipo, proceso no importa ya que aquí solamente vamos a mirar la parte de control de versiones con Git y le damos clic en crear.

alt text

Entonces por Este lado en GitHub ya tengo el repositorio y lo puedo clonar.

alt text

Vamos enseguida a ver como se clona desde Visual Studio Code, por ese lado también en el código del proyecto ya está creado y cómo ustedes pueden ver aquí también tengo la URL para clonar.

alt text

Entonces devolviendo me a Git en este momento tengo un proyecto abierto pero la idea es que vamos a clonar que algo inexistente.

Entonces lo que hacemos es lo siguiente command+p mayor que (>) y buscamos los comandos Git, entonces aquí tenemos para hacer checkout, clone, commit, publicar sincronizar, etcétera.

alt text

¿Cuál es el que más nos interesa en este momento?, clonar. Entonces al darle clic en clonar él me va a pedir una URL

alt text

Entonces vamos a hacerlo primero con GitHub copiamos Esta URL enter, me va a pedir la carpeta donde se debe clonar.

alt text

Él obviamente, crea también una carpeta debajo de ésta, con el nombre del repositorio, entonces le doy enter y me dice que ¿Quiere abrir el repositorio clonado?.

alt text

Como yo ya he utilizado GitHub con Visual Studio Code, él ya tiene guardado mi usuario y clave, pero la primera vez que ustedes lo hagan, les va a pedir el usuario y la clave.

Primeros commits

Entonces voy a abrir el repositorio, y en este momento no tengo nada, tengo en la carpeta abierta vídeo cinco. Ahora si queremos hacer los primeros commits simplemente es crear archivos entonces yo puedo crear un archivo que se llame index punto JS (index.js) donde creó un valor cualquiera. grabo y si me voy para la pestaña izquierda en source control, él automáticamente detecta que hay un cambio para hacerle commit.

alt text

Entonces voy a hacer este cambio simplemente para que vean la dinámica entonces se agrega el archivo y de index.js le doy commit y luego le digo sincronizar.

alt text

Cuando uno le da commit, realmente lo que está haciendo es un commit al repositorio Local, no se les olvide que en Git es un controlador de versiones distribuido y por lo tanto, yo puedo trabajar Offline, en un avión por ejemplo, cuando no tengo conexión a internet, y luego lo puedo sincronizar, entonces ese commit digamos que es como el mismo chek in pero Offline y luego cuando le digo sincronizar ya lo está haciendo contra el repositorio centralizado en este caso Git.

Si me devuelvo para la página en GitHub, ustedes deben ver aquí los, vamos a ver, en código, falta algo ¿Qué será? Voy a crear un archivo readme.md en el proyecto que son archivos de tipo Mark down lo grabo, me voy para el commit crear archivo readme.md, le digo commit all.

alt text

Y luego le digo sincronizar.

alt text

Me devuelvo para video 5, sigo sin ver los archivos aquí faltaba algo, push.

alt text

Ahora sí, me aparecen, entonces el archivo Readme.md aquí lo tengo y aquí tengo el index.js con el contenido que he creado. Entonces eso es lo básico con respeto a Git y enseguida vamos a ver muchos más detalles

alt text

Ahora con Visual Studio Team Servicies es exactamente lo mismo, voy a copiar esta carpeta voy a, esa URL perdón, voy a clonarla, me va a pedir el usuario y la clave, a un repositorio nuevo, y ya puedo crear archivos readme.md, Index.js. Simplemente le doy commit, sincronizar, push, me devuelvo al TFS (Team Foundation Server) Y ya me muestra en la parte inferior el readme.md

alt text

Y si me voy para Code, debo ver el historial, el index.js

alt text

y aquí en la pestaña de historial obviamente voy a ver el commit.

alt text

Bueno, volviendo a nuestro proyecto; entonces tenemos un archivo que se llama index.js, Index2.js, cada que yo agrego un archivo nuevo llamémoslo myLibrary.js, donde voy a tener varias funciones esto es es JavaScript, no TypeScript, X + Y Punto y coma (;).

alt text

Listo, tenemos una función y yo lo que quiero, que ustedes vean que aquí simplemente no estoy escribiendo nada de código raro solamente es como para ejemplos del Git, es que los archivos, bueno aquí me falta creo que me falta guardar myLibrary.js si veo aquí hay varios cambios. Si yo le doy clic en myLibrary.js me muestra el archivo solamente porque es una adicción, es un nuevo archivo, pero sí seleccionó index.js que es un archivo que ya está en el repositorio y que modifique entonces como ven la m, m de modified, modificado me muestra los cambios que hay entre la versión anterior y la versión que estoy a punto de hacerle Commit,

alt text

Puedo verlo en este modo de la pantalla compartida o puedo hacer en el Inline View.

alt text

En el que en la misma pantalla estoy mostrando o en la misma interfaz estoy mostrando los cambios con el color verde significa que es una línea nueva.

alt text

Stage

Ahora existen lo que se llaman los cambios STAGED y UNSTAGED, si yo le doy clic al mas lo que estoy es agregando ese cambió al STAGED CHANGES.

alt text

alt text

Digamos que simplemente es una agrupación para que a la hora de hacer un commit solamente lo haga a cierto grupo, entonces yo le puedo decir modificado index.js para agregar nueva variable le doy command Enter y el cambio queda automáticamente. Ahora si me devuelvo a vídeo 5 en Visual Studio Team Services y miro el historial ¿Qué es lo que voy a ver? ¿Voy a ver el último cambio? posiblemente no, si ven que aquí no está el comentario ¿Que lo que pasa? hice un commit, pero no hice una sincronización. Entonces ¿Cómo hago la sincronización? yo lo puedo hacer con sync o con push en este caso y le haré push.

alt text

Ven en la parte superior izquierda que está haciendo el push hacia el servidor ahí ya terminó, si yo me vuelvo al Visual Studio Team Services, hay ya queda el nuevo commit que es esté.

alt text

Eso que estoy haciendo funciona exactamente igual en GitHub simplemente la interfaz para ver el historial y pegar los commits es un poco diferente; por ahora como ese último proyecto en el que estoy ésta clonado de visual studio team services entonces nos vamos a concentrar en VSTS, yo puedo ver él el commit en cualquier momento desde desde Git y el me va a mostrar el código que ha cambiado entre el último commit y el nuevo commit.

alt text

Ahora nos volvemos otra vez acá, entonces en la parte superior izquierda están todas las opciones de Git yo les mostré cómo hacer un, como poner un un archivo en STAGED, entonces ustedes ven aquí el archivo es de tipo adición,

alt text

Yo puedo hacer muchos cambios STAGED y otros que están, simplemente que son cambios generales, pero la hora de darle Commit, puedo hacer commit STAGED o commit All, ósea es decir todos lo que este aquí independientemente del grupo donde esté, entonces es importante saber que una vez que yo haga el commit all, se agregó un nuevo archivo nueva librería

alt text

Y le doy push, todavía está haciendo la sincronización, me devuelvo para el historial y ya dice se agregó nueva librería

alt text

Entonces ahí está, están todos el historial, en la parte de archivos puedo ver cualquier archivo y ver el historial de un archivo en específico, digamos este, ver el historial y me dice ¿Que commits tuvieron algo que ver con ese, con este archivo en especial?

alt text

Entonces para este archivo solamente hay un commit pero yo puedo coger cualquiera como el Index.js y aquí están aparecen todos los commits que se le hicieron a ese a ese archivo en específico

alt text

Show Git OUTPUT

La parte en el menú ustedes pueden ver que hay una una opción que se llama show Git OUTPUT

alt text

Todo lo que nosotros estamos haciendo mediante la interfaz tiene un comando que se puede hacer por Shell, por consola

alt text

Entonces simplemente es para que ustedes vean que, si quieren aprender bastante de Git todo lo pueden hacer por consola, no es necesario hacerlo mediante la interfaz gráfica.

Ramas

Ahora vamos a ver un poco de creación de branch o ramas, entonces estoy aquí en Visual Studio Team Services en la parte de branch voy a crear una nueva rama o nuevo branch, que se llame dev2 y que sea basado en la rama Master

alt text

alt text

Listo, luego me voy para Git en el Visual Studio Code y tengo que darle sincronizar para traer ese dato de esa nueva rama.

alt text

Entonces aquí tengo dev1, dev2 y Master.

alt text

Entonces en este momento está sincronizando local mente toda esa información de las ramas vamos a darle unos segundos para que termine, listo, ahora, si ustedes ven en la parte inferior izquierda estoy es trabajando en el Master

alt text

si yo le doy clic en Master me dice automáticamente si quiero cambiar De rama entonces me voy para dev2

alt text

Entonces en dev2 yo quiero agregar un archivo que se llame este archivo sólo está en dev2.js

alt text

Entonces guardo el archivo, me voy para para la parte los cambios, le doy clic en STAGED si quiero, nuevo archivo, commit y push, Luego me voy para Visual Studio Team Services en la parte de archivos, aquí ya terminó la sincronización, entonces en la parte archivos ustedes pueden ver que en la branch de Master no está ese archivo

alt text

Pero si yo cambio el branch a dev2, por ejemplo, me aparece este archivo y éste archivo solamente está en dev2 y no está en el máster como tal

alt text

Entonces es importante saber la diferencia sí quiero me voy para dev2 en la parte inferior y luego vuelvo a Master y ustedes ven que él automáticamente actualiza la solución o el proyecto en la parte superior izquierda, ¿si? incluso cada branch puede tener sus propios commits pendientes. Entonces es importante saber en qué branch estoy para saber cuáles son los cambios que estoy realizando, aunque la parte que voy a mostrar no corresponde a visual Studio Code es importante saber cómo hacer un Merge en Git el procedimiento es exactamente lo mismo en GitHub o en visual Studio Team Services.

Merge y Pull Request

Entonces aquí tengo una un branch que se llama dev1 por ejemplo.

Entonces en el branch dev1 hay un archivo, que es este archivó Solamente esta en este dev branch, para poderlo integrar para poder hacerle un Merge

alt text

Entonces creo lo que se llama Pull Request, un Pull Request es como la solicitud para que el administrador apruebe ese Merge, entonces al crear el Pull Request, el me pide una información como la descripción, el título, lo puedo asociar a work item desde TFS o Visual Studio Team Services le digo new Pull Request.

alt text

Y como yo soy el mismo administrador entonces en este caso me pide aprobar o rechazar.

alt text

Entonces en este caso simplemente lo voy a aprobar y luego le doy clic en completar, al completar es que si realmente se hace ese Merge.

alt text

Ahora si me voy a la parte de archivos como pueden ver en el Master ya tengo este archivó thisfileisonlyindevbranch.js ósea que ya se hizo el Merge con la del branch dev al branch Master.

alt text

Esto ha sido todo por el día de hoy por este vídeo número 5 espero les haya gustado bastante esta parte, que hayan aprendido y que la pongan en práctica hasta pronto