L1: Github y VSCode
- Tiempo: 2h
-
Objetivos de la sesión:
- Puesta en marcha del repositorio de Github
- Instalación de VSCode
- Toma de contacto con VSCode
- Manejar github desde VSCode
- ¡Practicar!
- Herramientas
- Instalando GIT
- Configurando GIT
- Instalando VSCode
- Creando el repositorio de Prueba
- VSCode y Github
- ¡A practicar!
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
Las herramientas que usaremos serán el navegador Firefox, el entorno de desarrollo VSCode y Github
Para manejar los repositorios tenemos que tener instalada la herramienta Git. Comprueba primero si ya la tienes instalada (seguramente ya la hayas usado en otras prácticas). Abre un terminal de comandos (en Linux, Mac o Windows) y escribe git --version:
$ git --version
git version 2.43.0
Si ya lo tienes instalado, al ejecutar este comando te aparecerá la versión (cualquier versión nos servirá. Esta es la que tengo yo instalada en mi equipo). Si no lo tienes instalado te aparecerá un mensaje de error diciendo algo así como que El comando git es incorrecto o no se ah encontrado
Para instalarlo descarga el instalador desde este enlace: Instalación de GIT para tu plataforma (Linux, Mac, Linux)
Si estás usando Ubuntu o Debian, lo puedes instalar muy fácilmente con el siguiente comando:
sudo apt install git
Una vez instalado en tu ordenador, realiza la prueba incial: Ejecuta otra vez el comando git --version para asegurarnos que está funcionando
Indicaremos a git el nombre de tu usuario en github y la dirección de correo que tienes como principal en github. Puedes comprobar si ya lo tienes configura abiendo un terminal y ejecutando el comando: git config --global -l
En mi caso, como ya lo tengo configurado, obtengo lo siguiente:
$ git config --global -l
[email protected]
user.name=Obijuan
Si NO lo tienes configurado deberás ejecutar estos comandos, sustituyendo las cadenas TU_USER y TU_MAIL por tu usuario y tu correo respectivamente
$ git config --global user.name TU_USER
$ git config --global user.email TU_MAIL
Tras la configuración vuelve a ejecutar git config --global -l para confirmar que ahora ya sí que está todo OK
Aprenderemos a trabar con git desde el entorno de desarrollo VSCode. Para el proyecto de la asignatura puedes utilizar el repositorio como quieras: con línea de comandos o desde otro entorno, pero es importante que aprendas a usarlo también desde VSCode
Se trata de un entorno que es software libre y Multiplataforma. Esto te permitirá usarlo con cualquier sistema operativo (Linux, Max, Windows) y para cualquier proyecto en cualquier empresa, ya que no necesitarás ni pedir permiso ni adquirir licencias para usarlo.
Es un IDE que está muy extendido, y lo usan muchos desarrolladores, por eso es importante que lo conozcas y lo sepas manejar
- Entra en la página principal de VSCODE
- Descárgate el Ejecutable para tu plataforma
- Instala el entorno
Si usas Ubuntu, lo puedes instalar muy fácilmente desde el menú de Ubuntu Software (tienda de aplicaciones). Busca vscode e instálalo
- Arranca VScode. Te aparecerá una pantalla similar a esta:
Si pulsas en el menú Help/About podrás ver la versión instalada, y el sistema operativo
La versión que se nos ha instalado es la 1.60. Utilizaremos esa o una superior (hay releases con mucha frecuencia)
Para aprender a manejar Github desde el VSCode créate un repositorio de pruebas, llamado Mecatronica-TEST. Para ello vete a tu página principal de github y pincha en la pestaña que dice Repositories
Ahora pincha en el botón verde de la esquina superior derecha que dice New
Nos aparece una pantalla para introducir los datos del repositorio. Como nombre utiliza Mecatronica-TEST. Añade una descripción, como por ejemplo: Repositorio para hacer pruebas. Asignatura de Mecatrónica. Marca para que el repositorio sera Público y para que se añada un fichero README por defecto. Elige una licencia y aprieta el botón verde inferior que dice Create repository
¡Listo! Ya tenemos el repositorio creado. Estamos preparados para hacer pruebas desde el VSCode
Vamos a aprender a gestionar nuestro repositorio de pruebas desde el VSCode. Lo podríamos hacer también desde la línea de comandos, o desde otra aplicación, pero aprenderemos a usarlo desde VSCode
El repositorio Mecatronica-TEST está alojado en github, en un servidor remoto situado en algún lugar de internet. Para poder trabajar necesitamos tenerlo en nuestra máquina local. Por ello, la primera operación que hacemos se llama CLONAR: Bajar el repositorio del ordenador remoto y hacer una copia local, en mi máquina. Esta es una operación que se hace sólo la primera vez. Una vez clonado no habrá que volver a hacerlo (salvo que cambiemos de máquina local en la que trabajar)
Para clonar el respositorio necesitamos obtener su URL. Desde el navegador, Nos vamos a la página principal del repositorio, pinchamos en el botón verde que pone CODE y pulsamos en el icono de Copiar
(NOTA. Asegúrate que es TU REPOSITORIO!! ¡¡NO CLONES EL MIO!! No hay nada que te impida clonarte mi repo, o el de otro estudiante, pero como NO es tu repositorio, NO tendrás permisos para subir ficheros)
La URL de nuestro repo se queda copiada
Ahora nos vamos al VSCode y pinchamos en el botón de la barra lateral izquierda que dice Source Control
Y se nos desplegará una ventana lateral. Como queremos obtener el proyecto desde github, pinchamos en el botón AZUL que pone "Clone Repositoriy"
Se nos abre una entrada en la parte superior para que insertemos la URL de nuestro repositorio, la que habíamos copiado antes
La pegamos pulsando el botón derecho + Paste, o bien con el atajo Ctrl-V. Para el caso de mi URL, lo que aparecerá será esto (pero a tí te aparecerá otra URL, con el nombre de tu usuario de github)
Y pulsamos ENTER. Se nos abrirá otra ventana para indicar la carpeta donde queremos que se clone el repositorio. Utiliza la carpeta con el nombre que quieras, donde suelas dejar las prácticas de tus asignaturas. En este ejemplo yo he elegido la carpeta Mecatronica que está en mi Home (En mi caso es una carpeta vacía, pero podría tener cosas dentro. NO hay problema)
Pulsa en la opción que dice "Select Repository Location"
Se baja el contenido del repositorio y se guarda en la carpeta que le has indicado. En la parte inferior te indica si quieres abrir este proyecto para empezar a trabajar. No hace falta abrirlo, se podría hacer después, pero en nuestro caso sí queremos trabajar. Así que pinchamos en OPEN
Ahora nos pregunta si confiamos en los autores de ese repositorio. Por supuesto que sí, porque lo has creado tu 😀️. Pincha en Yes, I trust the authors....
¡Ya tenemos el proyecto bajado de github, abierto, y listo para trabajar! En la parte de la izquierda vemos las carpetas. En la parte de la derecha sigue la ventana de bienvenida (Welcome). La cerramos. Así es como debería quedar ahora tu ventana de VSCode:
Es importante tener en la cabeza que ahora tenemos 2 repositorios: uno está en github (en la nube), que llamamos repositorio remoto y el otro está en nuestra máquina local. Los cambios que hagamos desde VSCode nos afectan a lo que tenemos en nuestra máquina local, pero NO al repositorio remoto
Vamos a hacer nuestros primeros cambios en el proyecto local. Pinchamos en el fichero README.md para que se nos abra en la parte derecha del VSCode, y escribimos una línea de texto. Por ejemplo "Probando el VSCode..."
Vemos lo que ha ocurrido. En la parte superior izquierda nos aparece un "1" en azul. Esto nos está indicando que hay un fichero modificado, que NO SE HA GUARDADO. En la derecha del README.md vemos un punto blanco: lo mismo, nos indica que este fichero está SIN GRABAR a fichero
En la parte izquierda del texto que hemos introducido nos aparecen una línea vertical en verde. Esto nos indica que las líneas 4 y 5 son elementos nuevos que NO estan en la versión anterior del fichero README.md. Es decir, nos indica los CAMBIOS con respecto a la versión anterior que teníamos en nuestro repositorio local
Ahora grabamos el fichero, bien desde la opción File/Save o bien pulsando el atajo Ctrl-S (modo pro). Al hacerlo vemos los siguientes cambios:
La línea vertical verde sigue estando: nos indica que esas dos líneas son nuevas, y que no estaban en la versión anterior. Las hemos añadido (igual que antes). Las notificaciones anteriores han desaparecido porque ahora ya no hay ningún archivo sin grabar
Aparece una notificación nueva en la parte izquierda ("1"). Esto nos indica que hay 1 fichero modificado con respecto a la versión anterior. El fichero README.md ha cambiado a color naranja: significa que este fichero está modificado. También se indica con la letra M en su parte derecha
Pinchamos en el icono que tiene la notificación, en la parte izquierda (SOURCE CONTROL). Aquí nos aparecen ahora sólo los ficheros con los cambios con respecto a la versión anterior. No vemos el resto de fichero, sólo los modificados. En este caso sólo hay 1 modificado: README.md
Imaginemos que el cambio que hemos hecho es correcto, y lo queremos almacenar en el repositorio local, para que la nueva versión contenga lo que hemos añadido. Esto se hace en dos fases:
- En una primera fase seleccionamos el fichero modificado como candidato a ser parte de la siguiente versión. Para ello pinchamos en el botón + que está a su derecha:
Al hacerlo el fichero seleccionado pasa a la parte superior. Ahí es donde podemos ver todos los ficheros que hemos aceptamos para formar parte de la siguiente versión. En nuestro ejemplo sólo tenemos el fichero README.md
- En la segunda fase lo añadimos al repositorio local: es la operación que se conoce como commit
Escribimos un comentario en la parte superior indicando qué es lo nuevo que hay en esta versión. Es obligatorio escribir siempre un mensaje por cada aportación realizada (commit). Por ejemplo ponemos: "Mi primera modificación de un fichero"
Y ahora pulsamos el botón superior de check (commit). Así es como se nos quedará la ventana:
Nos está indicando que NO hay ficheros modificados con respecto a la última versión en el repostiorio. Es decir, que está todo actualizado. Pinchamos en el icono superior izquierdo (Explorer) para volver a la vista original de nuestro proyecto. Ahora no hay ningún fichero de color Naranaja
Si nos fijamos en la parte inferior izquierda, ha aparecido un símbolo nuevo que antes no estaba. Nos está indicando que en nuestro repositorio local hay un cambio (un commit) nuevo con respecto a lo que hay en el repositorio remoto. Es decir, que NO están sincronizamos
Podemos trabajar en local todo lo que queramos, añadiendo los commits necesarios. De vez en cuando, o al final de nuestra jornada de trabajo, será cuando sincronicemos y lo subimos todo al repositorio remoto. Yo normalmente por cada commit realizado en local lo subo también al directorio en remoto. Me gusta tenerlo en remoto para no perderlo (por si se me pierde el portátil o me falla el disco duro). Pero esto ya es elección de cada uno
Lo potente de trabajar con los repositorios es que poder ver la historia completa de cada fichero de nuestro proyecto, desde que fue creado hasta la versión actual. Como acabamos de hacer un cambio, vamos a echar un vistazo a su historia. Seleccioamos el fichero READM.md y en la parte inferior desplegamos la opción que pone TIMELINE
Vemos los comentarios de los cambios introducidos, ordenados de más antiguo a más reciente, estando el más antiguo en la parte inferior. El fichero fue creado en el commit que tiene por comentario initial commit y luego fue modificado en Mi primera modificación de un fichero. Si pasamos el ratón por encima nos aparece más información sobre el commit en cuestión:
Y si hacemos click en el commit, en la parte derecha del VSCode se muestran los cambios: En la izquierda se encuentra el fichero ANTES de haber realizado el Commit, y en la derecha el cambio introducido por ese commit:
Si pulsamos por ejemplo en el commit inicial, vemos los cambios introducidos:
No había ninguna línea (por eso está en rojo la línea 1: no existía) y se han introducido dos líneas de texto, la 1 y la 2
Para seguir practicando, vamos a hace un segundo cambio, en el mismo fichero: READM.md. Lo editamos y añadimos otra línea de texto adicional:
==========================
Mi segundo cambio....
==========================
Lo guardamos y hacemos el commit. En esta animación se muestra el proceso completo:
Tras los cambios esto es lo que veremos en la ventana. En la parte inferior, en el historial, vemos que aparece el comentario de este último commit:
En la parte inferior izquierda de la ventana de VSCode vemos que hay 2 commits que están en el repositorio LOCAL pendientes de subirse al repositorio REMOTOR. Es decir, que ambos repositorios no están sincronizados
La operación de llevar los cambios del repositorio LOCAL al REMOTO se denomina push. La primera vez que realizamos esta sincronización el proceso es diferente, ya que la aplicación VSCode NO TIENE AUTORIZACIÓN para acceder a tu cuenta de Github. Esta primera vez el proceso es más lento, pero las demás veces será muy rápido:
Para indicar que queremos sincronizarnos pulsamos con el ratón en botón de sincronización, indicado en el dibujo anterior. Antes de pulsar, si simplemente dejamos el ratón encima, nos aparecerá más información:
Nos indica que hay dos commits pendientes de subir (push). Antes de subirlos vamos a comprobar a qué cuentas estamos conectados. Como es la primera vez, no nos saldrá ninguna. Pinchamos en el icono que está encima del del ajuste, en la parte inferior izquierda:
Y efectivamente nos indica que no estamos conectado (You are not sign in into any accounts). Esta será la opción que comprobaremos para ver si la conexión está activada o no
Ahora pinchamos en el icono de sync. Nos sale una advertencia diciendo que VSCode se quiere conectar a github
Pulsamos en "Allow" para que se conecte. En el navegador (Firefox en mi caso) nos aparecerá el siguiente mensaje para indicarnos que VSCode quiere acceder a Github:
Si todo va bien, nos aparecerá el mensaje diciendo que el acceso se ha realizado con éxito. Además, el navegador desplegará una ventana como esta. Pinchamos en Choose Applicacion
Ahora seleccionamos Visual Studio Code y pulsamos Open Link
Para finalizar la autenticación, desde VSCode nos aparece una nueva ventana. Pinchamos en la opción de Open
¡Y ya está configurado! A partir de ahora ya no nos pedirá que nos autentiquemos. La ventana de VSCode tendrá esta pinta:
En la parte inferior el botón de sincronizar estará sin ningún número a su lado, indicando que no ambos repositorios, el local y el remoto, están sincronizados. Y por tanto nuestros cambios los hemos subido al repositorio
Si pinchamos en el icono de acceso a la cuenta vemos que ahora ya sí que aparece que estamos conectados:
Aparecerá tu nombre de usuario y la web donde estás conectado (Github)
Para comprobar que efectivamente los cambios se han subido a nuestro repositorio remoto nos vamos al navegador y vemos nuestro repo:
Aparece el comentario del último commit. En la otra parte señalada vemos que dice 3 commits: Son los 3 commits que hay en total en el repositorio.
¡Ya sabemos cómo subir nuestras contribuciones al repositorio de github!!
Una vez que ya estamos autenticados, VSCode recordará nuestras credenciales y el proceso es más rápido. Para comprender el proceso completo, haremos un tercer cambio, añadiendo más texto al fichero README.md. Luego haremos el commit y finalmente el push. Se muestra en esta animación:
El proceso es muy rápido. La grabación del fichero se ha hecho con el atajo Ctrl-S. Así es como ha quedado nuestro proyecto:
Cada vez que modificamos alguno de los ficheros del proyecto nos cambiará a color naranja y tendrá la letra M en su derecha. Estos cambios podemos aceptarlos como ya sabemos y haciendo luego el commit, o bien los podemos rechazar, volviendo a la versión anterior
Añadimos otro cambio al fichero README.md
Lo guardamos. Entramos en el Source Control y localizamos la opción de rechazar el cambio: Es una flecha hacia atrás que está a la derecha del README.md:
Hacemos click. Nos aparece un mensaje de confirmación
Pulsamos en Discard changes. Y volvemos al estado anterior. Ahora nos diche que NO hay cambios. Es decir, que estamos en la última versión
El proyecto que estamos haciendo se llama Mecatronica-TEST, que es el nombre que tiene el repositorio en github. Un proyecto es una carpeta almacenada en nuestro disco duro que tiene en su interior ficheros y otras carpetas
Para añadir ficheros a nuestro proyecto primero hay que crearlos desde el propio VSCode o bien copiarlos desde otra carpeta de nuestro ordenador. Después hay que realizar un commit
Accedemos a nuestra carpeta del proyecto en el sistema muy fácilmente seleccionando un archivo o carpeta en VSCode y dando a la opción Open Containing Folder que aparece al darle al botón derecho del ratón. Por ejemplo, nos ponemos encima de la carpeta P0 y le damos al botón derecho del ratón:
Al pinchar en Open Containing Folder se nos abre el navegador de archivos de nuestro sistema en el directorio que contiene a esa carpeta:
Descarga este fichero logo-urjc.png y cópialo (en mi caso se encuentra en la carpeta de Downloads)
Nos vamos al VSCode y ahí podemos ver el nuevo fichero:
Aparece en color verde. Significa que es un fichero nuevo, que está en la carpeta del proyecto pero que NO está guardado en el repositorio. En su parte derecha vemos que tiene la letra U (Untracked). Significa que no se le está haciendo un seguimiento a este fichero, porque no es está en repositorio. Es decir, que no hay control de versiones
Es un archivo de imagen. VSCode nos permite verlo. Si pinchamos en el fichero se visualiza la imagen en la parte de la derecha:
Para incluir este fichero en el respositorio hay que seguir el mismo flujo de trabajo que anteriormente: nos vamos a CONTROL SOURCE y pinchamos en el botón de + para aceptar este fichero como una contribución:
Al hacerlo pasa a la parte superior, para indicar que se va a añadir en el próximo commit. En su derecha aparece una A. Esto nos indica que es un fichero que se va a AÑADIR al repositorio: antes no estaba
Ahora hacemos el commit como ya sabemos: Escribimos un comentario y pulsamos en commit (O le damos al Ctrl-Enter)
Y sincronizamos con el repositorio remoto. Una vez terminado, así es como nos queda VSCode:
Desde el navegador vemos que el fichero ya está subido al repositorio remoto
VSCode es un editor de texto, por lo que podemos crear ficheros fácilmente. Nos vamos al menú File/New y nos aparece una pestaña en la derecha, con el título de Untitled-1, donde podemos escribir. Introducimos un texto cualquiera
Lo guardamos en el fichero prueba.txt, desde el menú File/Save o pulsando el atajo Ctrl-S. Nos pedirá que introduzcamos el nombre del fichero: prueba.txt
Pinchamos en Save. Nos aparece el nuevo fichero prueba.txt en verde, dentro de la carpeta P0:
Ahora lo incluimos en el repositorio siguiendo exactamente el mismo flujo de trabajo que antes: Hacemos el commit y luego el push (sincronización). Una vez hecho, el fichero pasará a tener color blanco y a estar disponible en el repositorio remoto:
La eliminación de ficheros del repositorio se trata exactametne igual que cuando se añaden o se modifican. Una eliminación es un cambio: un fichero que en la versión anterior estaba y que en la nueva NO. Como cualquier cambio, tendremos que aceptarlo, hacer el commit y luego el push
Para practicar añadimos el fichero tmp.txt al repositorio, que tiene un texto cualquiera. Hacemos commit y push. Partimos de este estado:
El fichero tmp.txt lo borramos. Lo podemos hacer desde el navegador de ficheros del sistema, o desde el propio VScode.
Si lo hemos hecho desde VSCode nos pide confirmación de que queremos borrar el fichero:
Pinchamos en Move to Trash. El fichero desaparece del proyecto, pero nos aparece una notificación en el icono de SOURCE CONTROL:
Nos vamos a la zona de SOURCE CONTROL y nos aparece que hay un cambio: el fichero temp.txt está tachado y aparede una D roja a su derecha. Quiere decir que este cambio implica el borrado de este fichero del repositorio
Como cualquier otro cambio, lo aceptamos dándole al +, por lo que pasa a la parte superior. Ahí introducimos un comentario y pulsamos en commit (o Ctrl+Enter)
Tras el commit hacemos un push, para sincronizar los repositorios. Nuestro fichero ha desaparecido, tanto del repositorio local como del remoto. En el repositorio remoto vemos el comentario del último commit:
Para manejar VSCode y Github con solturas necesitas "horas de vuelo". La única forma de interiorizar el flujo de trabajo y aprender a usar las herramientas es practicando. No hay otro secreto. Cuanto más practiques mejor. Además de los ejercicios propuestos, te recomiendo que te crees tus propios repositorios para practicar. Haz tus propios proyectos y súbelos a github. Practica con ellos usando VSCode
-
a) Crea los ficheros de texto prueba1.txt, prueba2.txt, prueba3.txt y prueba4.txt desde el VSCode. Mete en cada uno de ellos un texto cualquiera, de la longitud que quieras
-
b) Haz un único commit añadiendo estos 4 ficheros
-
c) Sincroniza el repositorio y comprueba que los 4 ficheros se han subido, y que efectivamente todos forman parte de un único commit
Sube estas dos imágenes al repositorio, cada una con su propio commit:
- a) Imagen: Ejercicio2-img1.gif
- b) Imagen: Ejercicio2-img2.jpg
- a) Elimina el fichero prueba4.txt del repositorio, que añadiste en el ejercicio 1. Haz un commit con este cambio
- b) Mover un fichero de una carpeta a otra implica dos operaciones: una de eliminación y otra de añadir un fichero nuevo. Mueve los ficheros prueba1.txt, prueba2.txt y prueba3.txt a la carpeta Prueba que deberás crear. Haz un commit con todos los cambios del apartado b
- Consejo: Crea primero el directorio Prueba (Los directorios sueltos, sin ficheros dentro, no son elementos que se puedan subir al repositorio). Mueve los ficheos al nuevo directorio, desde el navegador de archivos. Acepta los cambios en VSCode, haz el commit y luego el push
- a) Añade en el fichero README.md la siguiente línea al final:
(El nombre del fichero debe ser el mismo que el del ejercicio 2)
-
b) Haz el commit y súbelo al repositorio
-
c) Entra en tu repositorio remoto de github con el navegador, y ve hasta la carpeta P0. Observa lo que ha ocurrido...
- Instalar Git
- Instalar VSCode
- Crearte el repositorio Mecatronica-TEST
- Haz las actividades guiadas de la sesión, para aprender
- Haz los retos planteados para practicar
Tras esta sesión deberías saber hacer lo siguiente desde VSCode en tu ordenador:
- Añadir ficheros a tu repositorio de prácticas
- Eliminar ficheros del repo
- Mover ficheros entre carpetas del repo
- Modificar ficheros y subir las modificacionese al repo
- Juan González-Gómez (Obijuan)
