L1:Practica 0
- Tiempo: 2h
- Fecha: Jueves, 11 de Febrero de 2021
-
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!
- Introducción
- Herramientas
- Introducción a Github
- Empezamos con Github
-
VSCode y Github
- Clonando el repositorio
- Haciendo una modificación
- Guardando el cambio en el repositorio local (commit)
- Historial de aportaciones (commits)
- Un segundo commit
- Sincronizando los repositorios las primera vez
- Sincronizando los repositorios
- Descartando cambios
- Añadiendo ficheros al proyecto
- Eliminando ficheros del repositorio
- Actividades NO guiadas
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
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
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.25.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 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 configura, 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
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
- 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.53. Utilizaremos esa o una superior (hay releases con mucha frecuencia)
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
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 Obijuan, y esta es mi página en Github: https://github.com/obijuan
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
Vamos a pinchar en el repositorio que pone 3D-parts. Ese es el que uso para subir los diseños que hago en 3D para imprimirlos con al impresora 3D
Los diseños están metidos cada uno en su carpeta. Los repositorios los podemos organizar como queramos, con todos los directorios que queramos. En la parte inferior se ven imágenes y texto. Se corresponden con el contenido del fichero README.md, que opcionalmente podemos colocar en cada repositorio o carpeta
Seguimos cotilleando. Vamos a meternos por ejemplo en la carpeta 2017-10-09-urjc-logo
Vemos que hay 3 ficheros y 3 carpetas. Muchos de los ficheros son visibles pinchando directamente en ellos. Por ejemplo, vamos a ver el fichero Logo_URJC.png
Como es un fichero png (imagen), Github nos lo muestra como imagen. Si queremos bajarlo, no hay más que pinchar en el botón superior derecho que dice Download
Cualquier fichero lo podemos bajar del repositorio, y NO HACE FALTA ESTAR registrado
Vamos a visualizar este otro fichero logo-urjc.svg. Es un dibujo, en formato en formato vectorial SVG
Como se trata de un fichero de texto (el formato .svg es un texto plano), en vez del botón de Download nos pararece RAW. Para descargarlo no hay más que apretar con el botón derecho y seleccionar la opción de "Guardar enlace como" (Save link as)
Si entramos en el directorio stl y vemos el fichero urjc-coin.stl, como se trata de un diseño 3D, Github nos lo renderiza y nos permite rotarlo y verlo desde diferentes ángulos
En esta animación vemos un resumen de este paseo por el repositorio
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. Así, en el repositorio 3D-parts estamos viendo, tengo puesto un pequeño índice con algunas de las piezas 3D
Para acceder a la wiki hay que pinchar sobre la pestaña wiki
También disponemos de su enlace (https://github.com/Obijuan/3D-parts/wiki) para acceder como si fuese una página web cualquier. Tiene un aspecto como el siguiente
Ahora podemos navegar normalmente. Esta documentación que están leyendo, del Laboratorio de Construcción de Servicios y Aplicaciones Audiovisuales está alojada en una wiki de Github :-)
Desde la wiki de los objetos 3D, accedemos al llavero/moneda URJC. Es la misma carpeta a la que hemos accedido antes, pero ahora está en una forma más sencilla para su uso
En esta animación damos un paseo por la wiki
Además de bajarte ficheros individuales, puedes descargarlos todos de golpe. Vamos a hacer una prueba con este repositorio: RISC-V-FPGA (No usamos el de 3D-parts porque es muy grande y nos llevaría más tiempo)
Desde la página principal del repositorio pinchamos en el botón verde que pone Clone or Donwload
En la ventana que se despliga, pinchamos en la parte inferior donde pone DONWLOAD ZIP
El navegador nos mostrará la ventana con el fichero a descargar. Pinchamos en OK
El proceso lo vemos en esta animación:
En la carpeta de descargas tendremos el fichero RISC-V-FPGA.zip con 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
Este fichero lo descomprimimos normalmente y ya tenemos acceso a todos los ficheros y carpetas
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
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
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
He abierto una tarea en Aula virtual para que hagáis el envío. Ve a la parte de Evaluación y ahí pincha en la tarea Usuario Github
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
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: 2020-2021-CSAAI-Practicas. Entra en su web y pincha en el botón verde que dice Use this template
Están las carpetas correspondienes 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: 2020-2021-CSAAI (¡¡ESPECIFICACIÓN!!). 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
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
El repositorio 2020-2021-CSAAI 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 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, 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)
y 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 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 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:
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 carepta 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 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. 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
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 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 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 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
Para seguir practicando, vamos a hace un segundo cambio, en el mismo fichero: READM.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:
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) 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. Seleccioamos Visual estudio 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 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ñ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!!
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 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 diche que NO hay cambios. Es decir, que estamos en la última versión
El proyecto que estamos haciendo se llama 2020-2021-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
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:
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 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-LTAW-PRACTICAS
-
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
- 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 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 de la carpeta P0 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 cuenta en Github
- Enviar por la entrega de Aula virtual la URL de tu usuario de github (Ej. https://github.com/Obijuan )
- Crearte el repositorio 2020-2021-CSAI-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
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)
- Creado a partir del contenido generado por el profesor Jose María Cañas
