Git Básico e Integración de Git en Brackets

Guía GIT básico e Integración de Git en Brackets

Páginas que vamos a utilizar:

https://git-scm.com/downloads -> Descargar Git

http://brackets.io/ -> Descargar Brackets

https://github.com/ -> Nuestro repositorio

Para empezar, debemos crear una cuenta en GitHub para disponer de nuestros repositorios.

Luego, descargar la versión de Git con instalación ya que la portable no funciona para integrarla en Brackets. Debemos de instalarla en la siguiente ruta: C://Archivos de programa/Git

ya que esta es la dirección que la extensión de Brackets comprobará para integrarlo.

Por último, descargamos e instalamos Brackets.

Empecemos por la explicación de Git mediante línea de comandos BASH. Primero creamos un Repositorio Remoto.

Una vez tengamos el repositorio, esta será la dirección que usemos más adelante

Ahora, ejecutamos Git mediante el ejecutable git-bash.exe.

Nos aparecerá la siguiente ventana:

Los comandos que vamos a usar son de Linux, ya que hemos ejecutado un entorno Bash

Por ello usaremos:

cd -> Change Directory/Cambiar directorio

ls -> List/Listar (con la opción -l si queremos que aparezca más información)

clear -> Limpiar la terminal

Creamos un directorio, por ejemplo workspace, en el que crearemos una carpeta por cada repositorio que hagamos, por ejemplo, uno por cada asignatura.

Ahora, accedemos mediante Git Bash a la carpeta, en este caso en la unidad C (en los ordenadores de clase será en la unidad D)

Ahora, procederemos a usar los comandos de Git para crear nuestro Repositorio Local 

Para iniciar el repositorio, el comando a usar es git init 

Ahora debemos añadir un nombre que identificará a nuestro Repositorio Remoto con el comando

git remote add NombreIdentificador URLRepRemoto (muchas veces veréis que el nombre que se le da en ejemplos es origin pero nosotros podemos ponerle cualquier nombre)

La dirección o url de nuestro repositorio ya la mostré anteriormente, en GitHub la tenemos para copiar y pegar.

Ahora usamos el comando git config --list para comprobar que se ha creado correctamente

Una vez añadamos el Repositorio Remoto, podremos referirnos a él con el nombre indicado.

Ahora, es necesario conocer los 3 estados que existen en Git, para ello haré referencia a una diapositiva de Alberto del año pasado, de la asignatura Entornos de Desarrollo

Untracked -> Todos los cambios no han sido vigilados o "sabidos" por Git

Staged -> Git tiene constancia de los cambios realizados, pero no los confirma

Commited -> Git confirma los cambios

Solamente en estado commited es cuando se pueden subir los cambios a GitHub

Los comandos que usaremos serán:

git add -> Cambiar a estado staged

git commit -> Cambiar a estado commited

git push -> Subir los cambios al Repositorio Remoto

git pull -> Descargar cambios al Repositorio Local

Antes de empezar a mostrar los comandos, explicaré un caso para que quede más claro.

En clase realizas todos los cambios en un archivo, cuando termines, usas git add * para añadir todos los archivos del repositorio a staged. Una vez hecho usamos git commit para confirmar los cambios.

¡OJO! Git obliga a hacer un comentario en CADA commit que hagamos, yo suelo poner la fecha o algo que represente qué es lo último que hice, por ejemplo "He añadido la función f()". Git usa para hacer el comentario el editor vi su uso no es sencillo pero explicaré más adelante las tres cosas que usaremos para funcionar mediante línea de comando. Una vez integremos Git en Brackets todo será mucho más cómodo.

Una vez hayamos hecho nuestro commit, usamos git push RepPrueba master para subir los cambios al Repositorio Remoto

Cuando vayamos a casa, usamos git pull RepPrueba master para descargar los archivos con los cambios al Repositorio Local.

Usaríamos el miso proceso para cambiar archivos en casa y descargarlos en clase

Una vez entendido el proceso, lo muestro con imágenes:

Creamos un fichero

Ahora en la terminal de git bash, accedemos a la carpeta del Repositorio Local

Usamos el comando git add *, el cual no devuelve respuesta

Ahora hacemos git commit, que nos abrirá la interfaz de vi para añadir el comentario EN LA PRIMERA LÍNEA

Como ya comenté, el uso de vi es complejo y tiene muchísimos comandos, nosotros usaremos los siguientes:

Una vez abierto, la zona en rojo es donde deberemos añadir el comentario

Para ello pulsamos i para insertar(insert) en la línea actual, que por defecto se posiciona en la primera

Abajo se nos indica en qué modo estamos, en este caso estamos en modo Insert

Una vez hayamos terminado el comentario, pulsamos Esc(escape) y observamos que el modo de inserción termina

Ahora, escribimos :wq que traducido significa w -> write | q -> quit es decir, grabar/escribir y salir

Pulsamos Enter

En el caso de que nos confundamos en algo, lo mejor es pulsar Escape y escribir :q y no guardar los cambios, ya que no es fácil manejarse con vi, os dejo unos links a explicaciones centradas en este editor

http://linuxzone.es/how-to-manual-basico-de-uso-del-editor-vi/

http://www.dc.fi.udc.es/~afyanez/info-vi/

Ahora nos aparecerá la información de todos los cambios que se han hecho, en este caso, solo se ha creado un fichero, pero nos indica las inserciones hechas en él. Todos los cambios se reflejan como inserciones y borrados y nos indica cuantos se han hecho.

Ahora, subiremos todo al Repositorio Remoto

NOTA: Cuando tengamos un proxy, como tenemos en clase, este paso no podremos realizarlo a menos que le indiquemos dicho proxy. Para ello, la forma más cómoda es añadir dos variables de entorno de esta forma

export https_proxy=http://213.0.88.85:8080

export http_proxy=http://213.0.88.85:8080

Esto tendremos que hacerlo cada vez que abramos un nuevo terminal, por eso mi recomendación si lo usáis en clase es abrir el terminal nada más llegar, copiar y pegar cada uno de los comandos y no cerrar la terminal hasta que terminemos el día.

Para subir al repositorio usaremos git push RepPruebas master, si todo ha ido bien, se abrirán dos ventanas, la primera nos pedirá el usuario de GitHub y la segunda la contraseña.

Si todo ha ido bien, no apreciaremos mensajes de error. 

Existen muchos tipos de errores, pero cuando suceden, Git nos los detalla. El error más típico es hacer un push al Repositorio Remoto desde, por ejemplo, clase y luego intentar hacer otro push desde casa. En este caso nos detallará que antes debemos descargar todos los cambios mediante pull y luego podremos hacer el push. Es importante remarcar que pull no nos sobrescribirá el archivo, si no que modificará todas las línea del código que hayamos modificado anteriormente. Por ejemplo:

En clase añadimos la línea <h1>Hola Mundo</h1> y ejecutamos un push

En casa añadimos la línea <h2>DAW mola mucho</h2>

Si hacemos un push nos dará error, y deberemos hacer primero pull. Git escribirá <h1>Hola Mundo</h1> y respetará la línea <h2>DAW mola mucho</h2> y ahora podremos hacer un push al Repositorio Remoto. 

Esto último puede darnos muchísimos problemas, por ejemplo duplicando funciones o variables, así que hay que tener cuidado con todo lo que hacemos y tener siempre claro que, antes de modificar, debemos hacer un pull para descargar todo lo realizado anteriormente. En el caso de que ya tengamos todo al día, nos aparecerá el siguiente mensaje:

En cuanto a línea de comandos, ya está todo lo básico explicado. Hay muchísimos otros comandos, sobre todo relacionados con las Ramas o Branches. En este caso solo estamos usando la rama master, por eso cada vez que hagamos referencia al Repositorio Remoto, hemos usado master después, en la anterior imagen tienes un ejemplo. Para más información sobre cómo hacer ramas, mirad las diapositivas del año pasado. Como información extra dejo un enlace:

http://rogerdudler.github.io/git-guide/index.es.html

Ahora, explicaré como integrar Git en Brackets, que nos hará la vida más sencilla. En clase, tendremos que instalar Git, así que un profesor deberá ponernos la clave, por ejemplo Guillermo, hola Guillermo si estás leyendo esto :).

Bien, una vez tengamos instalado Brackets, en casa es tan fácil como ir a Archivo -> Gestor de extensiones.

En el buscador escribir Git e Instalar la siguiente Extensión

Recuerdo en este punto, que Git debe estar instalado en C://Archivos de programa/Git para que funcione, ya que esta es la ruta que la extensión comprueba. No conozco la forma de hacer que busque en otra ruta, si alguien la encuentra que lo comente. 

En cuanto a la forma de instalarlo en clase, por culpa de nuestro amado y famoso proxy, no podemos darle a instalar. Por ello tendremos que clickar en "Más información" y descargar como .zip la extensión

Y arrastrarlo desde la carpeta donde se descargue a este sitio

Una vez lo tengamos instalado, cerramos y abrimos Brackets y si todo ha ido bien, nos aparecerá el icono a la derecha y la Rama o Branch a la derecha del directorio(esto último lo ignoraremos).

En este momento aviso que yo tengo más extensiones instaladas, por eso se verá diferente a vuestro Brackets si no las habéis instalado vosotros. En clase, en la carpeta NO FOL, tenéis las carpetas de las extensiones que yo uso y una explicación de cómo ponerlas.

Si clickamos en el icono de la derecha, nos aparecerá todo un menú del que explicaré lo básico.

Realizamos un cambio en el archivo y guardamos. Nos aparecerán diferentes cosas:

Nos indica el estado del archivo y un botón para Deshacer cambios (Discard changes)

La línea verde que aparece es la zona del archivo que ha sido cambiada.

Ahora el git add es el checkbox de la izquierda del archivo y en la barra, el que está a la izquierda de Commit, es para hacer git add de todos los archivos(git add *). Si le clickamos a cualquiera de estos checkbox, automáticamente pasan a estado staged(git add).

Ahora, clickamos en Commit. Nos aparecerá una ventana con TODOS los cambios, representados por Inserciones y Borrados, que hayamos realizado. Además de una caja de texto para introducir el comentario OBLIGATORIO.

Escribimos el comentario y click en Ok

Ahora, nos aparecerá en otro icono un número, este icono representa el PUSH, y el que tiene a la izquierda el PULL. Luego más a la izquierda, el Repositorio Remoto que estamos usando. En la última parte de esta guía explicaré como crear una nueva carpeta con esta extensión y cómo añadir el Repositorio Remoto.

Si clickamos en el icono de Push, remarcado en naranja, nos aparecerá una nueva ventana.

Dejamos todo por defecto a menos que queramos usar otros Branches y, abajo, escribimos el usuario y contraseña de GitHub, pudiendo hacer click en el checkbox para que nos lo guarde. Esta operación se guarda por cada carpeta, es decir, si tenemos una carpeta por asignatura, debemos checkear esta opción en cada carpeta para que nos guarde la contraseña y el usuario.

Una vez clickemos en Ok, nos saldrá un mensaje de éxito

Al igual que en línea de comandos, cualquier error que ocurra nos lo indicará.

A la hora de hacer un pull, pondremos de la misma forma Usuario y Contraseña. Si tenemos todo al día nos aparecerá el mismo mensaje que en línea de comandos

Una vez hayamos hecho todos los cambios, podremos verlos en el Historial(History) ya sea desde la extensión o desde la página GitHub. Os mostraré ambos

Extensión: Clickamos en el icono, remarcado en naranja, y nos aparecerán todos los commit realizados. Clickamos en el que queramos ver y aparecerá arriba, remarcado en rojo, el nombre y ruta del archivo, clickamos en el para desplegar toda la información de los cambios realizados

GitHub: Accedemos a nuestra cuenta y clickamos en el repositorio que queramos ver. Luego vamos accediendo a las carpetas que queramos y elegimos el archivo que deseamos ver. Clickamos en el botón History y nos mostrarán los commits hechos para ese archivo, clickamos el que queramos ver y nos mostrará todos los cambios realizados en dicho commit, ya sea de este archivo y de todos los archivos modificados en el mismo commit.

Por último explicaré cómo iniciar un Repositorio Local y enlazarlo con uno Remoto en esta extensión.

Creamos la carpeta y la abrimos en Brackets. Clickamos en el icono de la extensión y nos aparecerán ahora otros iconos, clickamos en el que pone Init

Una vez hecho, nos aparecerá la barra que teníamos en la anterior explicación, pero debemos de enlazar con un Repositorio Extreno, para ello clickamos en el siguiente icono y en Create new remote...

Primero nos pedirá el NOMBRE del repositorio y luego la URL(copiar y pegar de GitHub)

Hecho esto ya tendremos enlazado el Repositorio Remoto con el Local.

Para acabar, explicaros que esta extensión permite configurar Shortcuts o Atajos para realizar las operaciones anteriormente citadas.

El icono es el siguiente:

Clickamos en Shortcuts y podremos escribir los atajos que queramos para las operaciones de Commit, Push, Pull y otras.

Esto ha sido todo. Espero que os animéis a usar Git, ya que es una fantástica herramienta, mucho mejor que SVN y, como decía Álvaro, es realmente la tendencia del futuro, debido a su gran facilidad de manejo y su potencial.

Un saludo a todos.

Guillermo