Zamora|León|Oviedo, España
esenfritptru

BLOG

↗ Cómo usar Git para el desarrollo Web: Conceptos y ejemplo

↗ Cómo usar Git para el desarrollo Web: Conceptos y ejemplo

Utilizar un Gestor de Versiones como GIT en tus proyectos, te ayudará a tener un código organizado, revisar cambios y actualizar sin quebraderos de cabeza. GIT ha sido creado por Linus Torvalds y es utilizado en multitud de empresas y en enormes e importantes desarrollos. Por ejemplo Microsoft usa GIT para su desarrollo de Windows , por algo será ¿no crees? ;)


Os enseñaré a instalar GIT en Windows y como usarlo (tanto Windows, Linux y Mac) en un ejemplo de desarrollo Web muy sencillo para que podáis comenzar a utilizarlo en vuestros desarrollos. Si os gusta aprender, continúa leyendo el artículo...

 

¿QUÉ ES GIT?

Git es un software de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente. Al principio, Git se pensó como un motor de bajo nivel sobre el cual otros pudieran escribir la interfaz de usuario o frontend como Cogito o StGIT. Sin embargo, Git se ha convertido desde entonces en un sistema de control de versiones con funcionalidad plena. Hay algunos proyectos de mucha relevancia que ya usan Git, en particular, el grupo de programación del núcleo Linux.

El mantenimiento del software Git está actualmente (2009) supervisado por Junio Hamano, quien recibe contribuciones al código de alrededor de 280 programadores.

 

CARACTERÍSTICAS DE GIT

El diseño de Git se basó en BitKeeper y en Monotone.

El diseño de Git resulta de la experiencia del diseñador de Linux, Linus Torvalds, manteniendo una enorme cantidad de código distribuida y gestionada por mucha gente, que incide en numerosos detalles de rendimiento, y de la necesidad de rapidez en una primera implementación.

Entre las características más relevantes se encuentran:

  • Fuerte apoyo al desarrollo no lineal, por ende rapidez en la gestión de ramas y mezclado de diferentes versiones. Git incluye herramientas específicas para navegar y visualizar un historial de desarrollo no lineal. Una presunción fundamental en Git es que un cambio será fusionado mucho más frecuentemente de lo que se escribe originalmente, conforme se pasa entre varios programadores que lo revisan.
  • Gestión distribuida. Al igual que Darcs, BitKeeper, Mercurial, SVK, Bazaar y Monotone, Git le da a cada programador una copia local del historial del desarrollo entero, y los cambios se propagan entre los repositorios locales. Los cambios se importan como ramas adicionales y pueden ser fusionados en la misma manera que se hace con la rama local.
  • Los almacenes de información pueden publicarse por HTTP, FTP, rsync o mediante un protocolo nativo, ya sea a través de una conexión TCP/IP simple o a través de cifrado SSH. Git también puede emular servidores CVS, lo que habilita el uso de clientes CVS pre-existentes y módulos IDE para CVS pre-existentes en el acceso de repositorios Git.
  • Los repositorios Subversion y svk se pueden usar directamente con git-svn.
  • Gestión eficiente de proyectos grandes, dada la rapidez de gestión de diferencias entre archivos, entre otras mejoras de optimización de velocidad de ejecución.
  • Todas las versiones previas a un cambio determinado, implican la notificación de un cambio posterior en cualquiera de ellas a ese cambio (denominado autenticación criptográfica de historial). Esto existía en Monotone.
  • Resulta algo más caro trabajar con ficheros concretos frente a proyectos, eso diferencia el trabajo frente a CVS, que trabaja con base en cambios de fichero, pero mejora el trabajo con afectaciones de código que concurren en operaciones similares en varios archivos.
  • Los renombrados se trabajan basándose en similitudes entre ficheros, aparte de nombres de ficheros, pero no se hacen marcas explícitas de cambios de nombre con base en supuestos nombres únicos de nodos de sistema de ficheros, lo que evita posibles, y posiblemente desastrosas, coincidencias de ficheros diferentes en un único nombre.
  • Re-almacenamiento periódico en paquetes (ficheros). Esto es relativamente eficiente para escritura de cambios y relativamente ineficiente para lectura si el reempaquetado (con base en diferencias) no ocurre cada cierto tiempo.

 

 

1.- REQUERIMIENTOS

Los únicos requerimientos para seguir este tutorial son los siguientes:

  • PC con Windows 7 (aunque se puede usar cualquier otro sistema operativo que soporte Git)
  • Git

 

 

2.- INSTALACIÓN DE GIT EN WINDOWS

Como vamos a trabajar desde un equipo con Windows, instalaremos Git de la forma habitual en los sistemas operativos Windows. Si usamos otro sistema operativo, instalaremos Git en función del S.O. Desde Windows, visitaremos la Web Oficial de Git https://git-scm.com/ e instalaremos nuestro cliente de Git para Windows.

GITDescarga de Git para Windows

 

 

Una vez que hayamos instalado nuestro cliente de Git en Windows, podremos ver en el menú principal las nuevas opciones disponibles.

GITGit en Menú Inicio de Windows

 

 

3.- USANDO GIT

Vamos a comenzar el desarrollo de una página web muy, muy sencilla en HTML y CSS. El directorio donde se ubicará el proyecto es C:\Users\Raul\Desktop\TUTORIAL-GIT\. Podemos usar cualquier directorio, os lo dejo a vuestra elección, pero debemos tener en cuenta que si queremos hacer el desarrollo de un proyecto en php, asp o cualquier otro lenguaje interpretado por un servidor web, dicho directorio deberá estar accesible desde dicho servidor. Como nuestro proyecto inicial solamente será en HTML y CSS, podemos ubicar el directorio en cualquier lugar.

Crearemos primero el directorio TUTORIAL-GIT, y dentro de él, deberemos inicializar Git para crear la rama master de nuestro proyecto. Para ello, usaremos el comando git init dentro de nuestro directorio TUTORIAL-GIT, tal y como se ve en el siguiente ejemplo:

$ git init

 

GITInicializando Git en nuestro proyecto

 

 

Git guarda toda la información en un directorio oculto dentro de nuestro directorio TUTORIAL-GIT, llamado ".git". Si queremos ver dicho directorio debemos activar la visualización de ficheros y directorios ocultos en Windows. En Linux podemos verlo con "-s -la":

GITDirectorio oculto de Git

 

 

Nuestra rama master está ahora mismo creada pero no hemos hecho todavía ningún commit sobre ella. Desde la consola de Git (aunque desde el CMD también funciona), ejecutaremos el siguiente comando que nos devolverá un mensaje de "nothing to commit" (nada que enviar):

$ git status

 

En la salida del comando podemos ver que Git nos indica en que rama estamos trabajando "On Branch master":

GITEstado inicial de la rama Master

 

 

Dentro de nuestro directorio TUTORIAL-GIT, vamos a crear una sencilla página Web llamada index.html con el siguiente contenido:

GITCódigo del fichero index.html

 

 

Desde la consola de git, ejecutaremos de nuevo el siguiente comando para ver el estado en el que se encuentra nuestro repositorio:

$ git status

 

En el ejemplo se puede ver que Git nos avisa de que hay ficheros Untracked ó lo que es lo mismo, no versionados y nos indica como solucionarlo (lo vemos en el siguiente paso):

GITFicheros sin versionar

 

 

En Git, antes de poder subir los ficheros hay que "añadirlos" para que Git sepa que son ficheros versionados y que tiene que trabajar con ellos. Para ello, podemos ejecutar el comando "git add ." para añadir todos los del directorio actual ó usar "git add index.html" para añadir solamente ese fichero. En este ejemplo he decidido usar:

$ git add .

 

Al hacer un "git status" ahora podemos ver que hay cambios que deben de ser "commiteados" y que hay un nuevo fichero para "subir" llamado index.html:

GITAñadir fichero index.html

 

 

Ahora haremos efectivos los cambios y haremos nuestro primer commit! Desde consola ejecutaremos el comando:

$ git commit

 

GITNuestro primer commit

 

 

En Git es obligatorio escribir un comentario en cada commit. Escribiremos un mensaje descriptivo de nuestro commit, por ejemplo "Este es el primer commit base":

GITMensaje del primer commit

 

 

Una vez finalizado el commit, podemos ver un histórico de cambios con:

$ git log

 

Más adelante explicaré para que es el HEAD -> master que vemos en el log:

GITLogs de commits en Git

 

 

Podemos organizar Git en muchas ramas. Cada proyecto puede ser diferente, pero las ramas principales que podemos usar en Git son varias (master, develop, hotfix, release y feature) . De momento estamos usando solo la rama master o trunk de producción, y no es ni habitual ni recomendado trabajar en una única rama. Para ver en modo texto las ramas y los commits que vamos haciendo usaremos el siguiente comando:

$ git log --graph --oneline --decorate

 

GITRamas y commits en consola

 

 

En la siguiente imagen se puede ver como evoluciona un proyecto usando sus diferentes ramas durante su ciclo de vida:

GITEjemplo de ramas en la vida de un proyecto de desarrollo

 

 

Una vez creada la primera página html, el aspecto que tendrá será el que se puede ver en la siguiente imagen. Como se puede ver, es una página muy, muy sencilla con un title y un body con diferente tamaño de fuente y un fondo blanco. Para nuestro ejemplo es suficiente este diseño:

GITAspecto de la página inicial

 

 

4.- CREANDO UNA NUEVA RAMA

Vamos a suponer que nuestro cliente nos indica que quiere añadir texto nuevo a la página. Para ello, vamos a crear una nueva rama a la cual llamaremos "text-homepage" en la cual haremos las modificaciones que nos dice el cliente. Una vez estén terminados los cambios, procederemos a realizar un "merge" (fusión) de esta nueva rama "text-homepage" con nuestra rama "master". Aunque lo ideal es llevar siempre una rama de desarrollo "development" paralela a la rama de producción, para este sencillo cambio en la página usaremos una rama aparte a la de "development".

 

Con el siguiente comando vemos en que rama estamos. En nuestro caso estamos en master (ver imagen siguiente):

$ git branch

 

Ahora lo que haremos será crear la nueva rama a la que llamaremos "texto-homepage":

$ git branch texto-homepage

 

Para verificar que la rama ha sido creada y ver en cual estamos posicionados, podemos volver a lanzar el comando:

$ git branch

 

Para cambiarnos a la nueva rama y comenzar a trabajar en ella, lo que haremos será un checkout:

$ git checkout texto-homepage

 

En la siguiente imagen podemos ver todos los pasos descritos anteriormente y la salida que nos ofrece Git:

GITCrear una rama nueva texto-homepage

 

Ahora será el momento de añadir el texto nuevo en nuestra página desde la rama nueva. Recomiendo sin duda usar un editor de textos como puede ser Sublime:

GITNuevo texto en la página principal

 

 

El aspecto que tiene ahora nuestra página es el siguiente. Debemos darnos cuenta que seguimos en la rama texto-homepage:

GITTexto nuevo añadido a nuestro homepage

 

 

Ahora necesitaremos hacer el commit para subir los cambios a Git.

Con "git status" podremos ver si hay ficheros pendientes de commitear o ficheros nuevos no añadidos en el stage:

$ git status

 

Añadimos el fichero "index.html" al "stage" para luego poder ser commiteado. En Git es necesario que antes de hacer commit, los cambios estén incluidos en el "staged":

$ git add .

 

Finalmente hacemos el commit añadiendo un comentario.

$ git commit -m "Mensaje"

 

En la siguiente captura se pueden ver todos los pasos descritor anteriormente.

GITAñadir cambios en la rama text-homepage

 

 

5.- MERGEANDO NUEVA RAMA CON EL TRUNK

El mergeado de varias ramas significa fusionar los cambios de una rama sobre otra de las ramas. En nuestro caso nuestra rama principal es la de "master" de la cual hemos sacado una rama de desarrollo pequeña para hacer el cambio del texto. Por tanto, lo que haremos será volcar los cambios de la rama "texto-homepage" sobre la rama "master.

Para hacer el volcado debemos situarnos en la rama de destino. En nuestro caso master:

$ git checkout master

 

Para hacer el mergeado , ejecutaremos lo siguiente:

$ git merge --no-ff text-homepage

 

GITMergeado de una rama (text-homepage) sobre otra (master)

 

 

6.- NUEVA RAMA DEVELOP

Lo ideal cuando desarrollamos es llevar siempre paralelo a la rama principal "master" otra rama principal de desarrollo a la cual llamaremos "develop". Por tanto vamos a crear una nueva rama y nos posicionaremos en ella con checkout:

Creamos la nueva rama:

$ git branch develop

 

Nos cambiamos a la rama:

$ git checkout develop

 

En la siguiente imagen se pueden ver los comandos y la salida de los mismos:

GITCreación de rama develop

 

 

Ahora en esta rama, realizaremos una serie de cambios en nuestro fichero index.html con nuestro editor Sublime. Una vez realizados los cambios, verificaremos con si hay cambios pendientes (está claro que si) y con diff veremos los cambios entre nuestra versión y la versión existente en el repositorio de git:

Verificamos si hay cambios pendientes con:

$ git status

 

Para ver los cambios en el fichero, ejecutaremos lo siguiente:

$ git diff index.html

 

En verde se verán las líneas nuevas añadidas y en rojo las líneas eliminadas. En el ejemplo se puede ver que he añadido solamente una línea correspondiente a un nuevo estilo css.

GITDiferencias entre ficheros

 

 

Ahora añadimos al "stage" y hacemos commit del fichero index.html.

Añadimos el fichero al stage:

$ git add .

 

Hacemos commit:

$ git commit -m "Mensaje"

 

GITCommit de index.html en la rama develop

 

 

Ahora crearemos en la rama "develop" un fichero llamaso style.css al cual le añadiremos algo de código para darle estilo a nuestra página index.html

GITStyle.css

 

 

Añadimos el fichero al stage:

$ git add style.css

 

Hacemos commit:

$ git commit -m "Mensaje"

 

GITCommit de style.css

 

 

Si hacemos F5 en nuestro navegador, podemos ver que la página ha cambiado aplicando el nuevo estilo que hemos creado en la rama develop:

GITNuevo estilo en rama develop

 

 

Ahora, aunque no es necesario, hacemos otro cambio sobre el fichero style.css al igual que en anteriores ocasiones:

Comprobamos cambios pendientes:

$ git status

 

Vemos las diferencias con:

$ git diff
 

GITNuevos cambios en style.css

 

 

Añadimos el fichero al stage:

$ git add style.css

 

Hacemos commit:

$ git commit -m "Mensaje"

 

Podemos ver graficamente la evolució nde las ramas de git con el siguiente comando:

$ git log --graph --oneline --decorate
 

GITVer ramas en modo gráfico en consola

 

 

Si hacemos de nuevo F5 en el navegador, vemos como se han creado los márgenes alrededor de nuestra página:

GITNuevo estilo con márgenes

 

 

7.- IR A UNA REVISIÓN EN CONCRETO

Cada commit que hacemos tiene un hash único asociado a él. Es posible, que en un determinado momento necesitemos ir a una versión previa en el tiempo para arreglar fallos o por otros motivos.

Desde un gestos gráfico como SourceTree, podemos ver a la derecha el hash de cada uno de los commits:

GITCommits en SourceTree

 

 

Por ejemplo, si queremos ir a la primera versión, al commit "Este es el primer commit base", su hash es 6a92b58. Para apuntar nuestro HEAD a dicho commit, deberemos ejecutar lo siguiente:

 

$ git checkout 6a92b58

GITMovernos a un commit determinado

 

 

Si en el navegador hacemos F5, podremos ver como estaba nuestra página en ese momento inicial. Fantástivo ¿verdad?

GITPágina web en instante determinado

 

 

Ahora volveremos a la última revisión con:

$ git checkout 2ca0fee

 

 

Si queremos ver los commits y las ramas en modo un "poco gráfico" desde consola, ejecutaremos lo siguiente:

$ git log --graph --oneline --decorate

 

GITRamas y commit en terminal

 

 

Si hacemos ed nuevo F5, veremos que nuestra página vuelve al estado actual y el último que tenemos:

GITEstado final Web

 

 

8.- CLIENTE GRÁFICO

Aunque existen multitud de herramientas gráficas para el uso de Git, os recomiendo sin duda la herramienta de Atlassian llamada https://www.sourcetreeapp.com/ para Windows ó Gitkraken para GNU/Linux:

GITSourceTree

 

ENJOY!

 


Raúl Prieto Fernández

Sitio Web: www.raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.

Escribir un comentario

Código de seguridad
Refescar

Aprende mucho más...

Acerca de mi

Soy Ingeniero Téc. Industrial Mecánico y Administrador de Sistemas Informáticos.

Contactar conmigo

Dirección: León, España
E-Mail: raul.lnx@gmail.com
Web: http://www.raulprietofernandez.net
Skype: raul.lnx



Follow Me - Instagram

Apúntate Gratis

Entra en la Comunidad VIP y consigue acceso a las descargas en PDF, Trucos y Videotutoriales ocultos y mucho más....

¡Muy Pronto!