Sesion Laboratorio 1 Practica 0 - jesusgpa/2023-2024-CSAAI GitHub Wiki

Sesión Laboratorio 1: Práctica 0

  • Tiempo: 2h
  • Fecha: Jueves, 25 de Enero de 2024
  • 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!

Contenido

Introducción

En el Laboratorio de la asignatura Construcción de Servicios y Aplicaciones Audiovisuales en Internet aprenderemos a usar las tecnologías web del lado del cliente: HTML, CSS y Javascript

Herramientas

Las herramientas que usaremos serán el navegador Firefox, el entorno de desarrollo VSCode y Github

Instalando Git en tu Ordenador (En el laboratorio no es necesario)

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.34.1

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 ha 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 inicial: Ejecuta otra vez el comando git --version para asegurarnos que está funcionando

Configurando git

Si no lo has hecho ya para otras asignaturas es necesario que lo hagas ahora, y también en tu ordenador si lo vas a utilizar para las prácticas.

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 abriendo un terminal y ejecutando el comando: git config --global -l

En mi caso, como ya lo tengo configura, obtengo lo siguiente:

$ git config --global -l
user.name=jesuspa
[email protected]

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

Instalando VSCode en tu ordenador (En el laboratorio no es necesario)

El entorno de desarrollo que vamos a usar en las prácticas es VSCode.

Para hacer las prácticas valdría cualquiera, pero uno de los objetivos de las prácticas será que aprendáis a usar este entorno.

Se trata de un entorno que es software libre y Multiplataforma.

Esto os permitirá usarlo con cualquier sistema operativo (Linux, Max, Windows) y para cualquier proyecto en cualquier empresa, ya que no necesitaréis 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 conozcáis y lo sepáis manejar

  • 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 tenemos instalada en el laboratorio es la 1.83.

Utilizaremos esa o una superior (hay actualizaciones con mucha frecuencia)

Introducción a Github

Los proyectos de programación actuales tienen miles de líneas de código hechas por cientos de desarrolladores.

Necesitamos herramientas potentes para gestionarlos, conocidos como Sistemas de Contol de versiones.

Los proyectos se almacenan en lo que llamamos Repositorios

Dos de los sistemas de control de versiones más utilizados son Github y GitLab.

Ambos están basados en la herramienta libre Git, Desarrollada en el 2005 por Linux Torvalds, el creador del Kernel de Linux


En esta asignatura nos centramos en el uso de Github

Un paseo por Github

Para familiarizarnos con Github, vamos a dar un paseo y a cotillear algunos proyectos.

Todos los usuarios de github tenemos una página principal donde está reflejada nuestra actividad.

Yo soy el usuario jesusgpa, y esta es mi página en Github: https://github.com/jesusgpa

Según el tema que tengas activado, lo verás con fondo oscuro (dark theme) o con fondo claro (Light theme).

En la parte superior, hay una pestaña que pone repositorios.

Ahí es donde aparecerán todos los repositorios, pero en la página índice que se muestra por defecto aparecen los repositorios más populares

Si pinchamos en el proyecto Network-Simulator podemos ver el contenido.

Y visualizar el contenido de cada uno de los archivos.

Cualquier fichero lo podemos bajar del repositorio, y NO HACE FALTA ESTAR registrado

Wikis

Junto a cada repositorio, de manera opcional, se puede crear una wiki para añadir documentación, y hacer que la información sea más fácil de mostrar a los usuarios.

Esta documentación que estás leyendo, del Laboratorio de Construcción de Servicios y Aplicaciones Audiovisuales está alojada en una wiki de Github

Para acceder a la wiki hay que pinchar sobre la pestaña wiki

También tenemos un enlace (https://github.com/jesusgpa/2023-2024-CSAAI/wiki) para acceder como si fuese un sitio web.

Descargando un repo completo

Además de bajarte ficheros individuales, puedes descargarlos todos de golpe.

Vamos a hacer una prueba con el repositorio que hemos visto antes Network-Simulator

Desde la página principal del repositorio pinchamos en el botón verde que pone <> Code

En la ventana que se despliega, pinchamos en la parte inferior donde pone Download ZIP

El navegador nos mostrará una ventana con la ubicación del fichero que nos hemos descargado.

Si hacemos clic sobre la carpeta nos lleva a la ubicación en el sistema de archivos, y veremos el fichero zip que se ha descargado.

Ahora lo podemos descomprimir.

Y nos aparecerá la carpeta descomprimida con el contenido.

Si abrimos la carpeta, podremos ver los diferentes ficheros que forman parte del repositorio.

Ahora en la carpeta de descargas tendremos todos los ficheros y directorios de ese repositorio.

Pero ¡OJO!. ¡Sólo están los ficheros!

Lo que nos hemos bajado NO es el repositorio, sino su contenido.

Toda la información sobre las versiones y cambios no la tenemos.

¡Empezamos con Github!

En esta asignatura las prácticas las iréis haciendo en un repositorio de Github.

En el repositorio de cada uno quedará constancia del trabajo realizado y cómo las prácticas se han ido haciendo.

Esto me permitirá auditar vuestro trabajo y haceros un seguimiento

Paso 1: Crea tu cuenta de Github

Empieza creándote una cuenta en Github.

Puedes utilizar el nick que quieras, y asóciala a la dirección de correo que usaste para la configuración de git

Una vez creada busca tu página principal de github, que tendrá una pinta como esta:

Esta es la página de *Alejandro Fernández Pérez: https://github.com/a-fernandezp-2016, compañero vuestro de clase de este curso 2020-2021

Paso 2: Envíame tu página principal de Github

En unos días deberás enviarme la dirección de tu página principal de Github.

En el caso de Alejandro, esta dirección es: https://github.com/a-fernandezp-2016

Te indicaré la tarea en Aula virtual para que hagas el envío, y las instrucciones con los enlaces que debes enviar.

Este envío es importante para que quede vinculado tu usuario de Aula virtual con el de Github.

Tu usuario de Github lo usaré para evaluar tus prácticas.

Paso 3: Creando el repositorio de trabajo

En esta asignatura, las prácticas las guardaréis en un repositorio de Github.

Lo vamos a crear a partir de un repositorio plantilla que ya he configurado yo para vosotros

En este repositorio es donde irás haciendo las prácticas.

Lo debes crear a partir de este repositorio plantilla: 2022-2023-CSAAI-Practicas.

Entra en su web y pincha en el botón verde que dice Use this template

Están las carpetas correspondientes a las prácticas a realizar, así como el fichero README.md.

Para crearos vuestro repositorio de trabajo a partir de este, pinchar en el botón que pone Use this template, en verde

Como nombre del repositorio usa el mismo de la plantilla: 2023-2023-CSAAI-Practicas.

Añade una descripción y pincha en el botón verde: Create Repository from Template.

En unos segundos se te creará un repositorio en tu cuenta de github con la estructura del repositorio plantilla

Ya tenemos nuestro repo listo para trabajar.

Este será tu repositorio OFICIAL donde hacer las prácticas.

En tu cuenta de Github puedes tener los repositorios que quieras y puedes hacer todas las pruebas que quieras, pero es en ESTE REPOSITORIO donde deberás desarrollar tus prácticas.

Es el que se usará para tu evaluación

VSCode y Github

Nuestro repositorio de github, con las prácticas, lo gestionaremos desde VSCode.

También se podría hacer desde el Atom o bien desde la consola (línea de comandos), pero aprenderemos a usarlo desde VSCode

Clonando el repositorio

El repositorio 2023-2024-CSAAI-Practicas está alojado en github, que se encuentra en algún lugar de internet, en una máquina remota.

Para poder trabajar necesitamos tenerlo en nuestra máquina local.

Por eso, 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 repositorio necesitamos obtener su URL.

Desde el navegador, Nos vamos a la página principal del repositorio, que en mi caso sería esta:

(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.

Pinchamos en el botón verde que pone Code:

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 Repository"

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 Prácticas 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

¡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:

Haciendo una modificación

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.

Desplegamos la carpeta P0 y pinchamos en el fichero README.md para que se nos abra en la parte derecha del VSCode:

Ahora 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 3 y 4 son elementos nuevos que NO están 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.

El nombre de la carpeta P0 también está en naranja: significa que contiene un fichero que se ha modificado

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

Guardando el cambio en el repositorio local (commit)

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 aceptado para formar parte de la siguiente versión.

En nuestro ejemplo sólo tenemos el fichero README.md de la carpeta P0:

  • 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 repositorio.

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 Naranja

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.

Historial de aportaciones (commits)

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.

Seleccionamos el fichero README.md de la práctica P0 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 cuestión, 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

Un segundo commit

Para seguir practicando, vamos a hacer un segundo cambio, en el mismo fichero: README.md de la práctica P0.

Lo editamos y añadimos otra línea más líneas de texto:

***********************
**  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:

Sincronizando los repositorios la primera vez

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 REMOTO.

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) nos aparecerá el siguiente mensaje para indicarnos que VSCode quiere acceder a Github:

Si todo va bien, nos aparecerá el mensaje de que el acceso se ha realizado con éxito:

Y además, el navegador desplegará una ventana como esta.

SeleccioNamos Visual Studio code y luego pinchamos en 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 identifiquemos.

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ñala vemos que dice 3 commits: Son los 3 commits que hay en total en el repositorio.

Si pinchamos ahí veremos los comentarios de todos ellos:

Y por supuesto en el Directorio P0 veremos nuestro fichero README.md:

Ya sabemos cómo subir nuestras contribuciones al repositorio de github.

Sincronizando los repositorios

Una vez que ya estamos identificados, 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:

Descartando cambios

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 y 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 dice que NO hay cambios.

Es decir, que estamos en la última versión

Añadiendo ficheros al proyecto

El proyecto que estamos haciendo se llama 2023-2024-CSAAI-Practicas, 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

Copiando archivos a nuestra carpeta de proyecto

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:

Ahora podemos navegar entre las carpetas con normalidad.

Nos metemos dentro de P0:

y copiamos ahí el fichero logo-urjc.png que hemos descargado previamente y que se encuentra en la carpeta de descargas:

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:

Añadiendo el fichero al repositorio (commit)

Para incluir este fichero en el repositorio 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

Añadiendo un fichero de texto desde VSCode

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 introducir 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:

Eliminando ficheros del repositorio

La eliminación de ficheros del repositorio se trata exactamente 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 aparece 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:

Actividades NO guiadas

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 de esta asignatura, te recomiendo que te crees tus propios repositorios para practicar. Haz tus propios proyectos y súbelos a github. Practica con ellos usando VSCode

Estos ejercicios hazlos dentro de la carpeta P0 de tu repositorio 2020-2021-CSAAI-PRACTICAS

Ejercicio 1

  • 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

Ejercicio 2

Sube estas dos imágenes al repositorio, cada una con su propio commit:

Ejercicio 3

  • a) Elimina el fichero prueba4.txt del repositorio, que añadiste en el ejercicio 1
  • 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 dentro de P0
    • Consejo: Crea primero el directorio Prueba (Los directorios sueltos, sin ficheros dentro, no son elementos que se puedan subir al repositorio). Mueve los ficheros al nuevo directorio, desde el navegador de archivos. Acepta los cambios en VSCode, haz el commit y luego el push

Ejercicio 4

  • a) Añade en el fichero README.md de la carpeta P0 la siguiente línea al final:
![](Ejercicio2-img1.gif)

(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...

Resumen de tareas a realizar

  • Instalar Git
  • Instalar VSCode
  • Crearte cuenta en Github
  • Enviar por la entrega de Aula virtual la URL de tu usuario de github (Ej. https://github.com/jesusgpa)
  • Crearte el repositorio 2021-2022-CSAAI-Practicas (A partir de este repositorio plantilla )
  • Hacer las actividades guiadas de la sesión, para aprender
  • Hacer las actividades NO guiadas (Ejercicios) para practicar

Conclusiones

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 modificaciones al repo

Autor

Jesús Parrado Alameda (jesusgpa)

Creditos

Licencia

Enlaces