La wiki de TempWin

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== Herramientas Visuales ======

Módulo perteneciente al curso [[informatica:programacion:cursos:git_control_codigo_fuente_programadores|Git: Control de código fuente para programadores]]

Hasta ahora hemos visto lo básico de trabajar con Git desde la línea de comandos. Es importante conocerlo porque nos ayuda a entender mejor el funcionamiento real de la herramienta y porque, en ciertas ocasiones, nos puede sacar de más de un apuro.

Sin embargo, en el día a día, lo más habitual es que trabajemos **con alguna herramienta gráfica** que actúe de intermediaria entre nosotros y Git. Su uso nos facilita mucho la vida porque, aparte de poder realizar operaciones simplemente pulsando un botón, nos ayudan a **visualizar los cambios y diferencias** entre versiones, a **resolver los conflictos**, a **ver de manera gráfica los commits y las ramas**...

En este módulo vamos a ver **cuatro de las principales herramientas gráficas** que te puedes encontrar en la mayoría de empresas que trabajen con Git.

Desarrollaremos con todas ellas un flujo de trabajo muy sencillo con Git para ver en dónde se encuentran las principales opciones en cada una.

Para ello partiremos de una página HTML de ejemplo, con un contenido inicial, que iremos modificando tanto desde el master como desde nuevas ramas que abriremos para desarrollar nuevas "características" sobre ellas, antes de mezclarlas con la principal. También provocaremos conflictos para ver cómo gestionarlos en cada herramienta.

Será sencillo pero nos servirá para ver las principales opciones de Git en cada entorno visual de los estudiados.

Aunque en tu día a día vas a usar generalmente una única herramienta, la que se convierta en tu favorita, es importante que ahora aprendas a manejar las cuatro aquí explicadas porque son las más comunes que te vas a encontrar en un porcentaje muy alto de organizaciones que utilizan Git. Y si utilizan otras, en el fondo se van a parecer mucho a alguna de las que aquí explicamos.

¡Vamos allá!

===== Git GUI =====

**Git GUI** es la herramienta por defecto que trae Git preinstalada y como tal, será la primera herramienta gráfica que veamos. No es la más utilizada, ni mucho menos, pero también es cierto que ofrece soporte para la mayoría de las tareas mínimas que se puede esperar de una interfaz para Git:

  * Visualización del histórico
  * Visualización de cambios
  * Interfaz para hacer commits
  * Gestión de ramas
  * Merge interactivo
  * Resolución de conflictos interactivo
  * Gestor de repositorios remotos

Vamos a verla en acción para repasar su funcionalidad.

<WRAP center round info 60%>
A fecha del curso, Git GUI no permite hacer **rebase**
</WRAP>

===== GitHub Desktop =====

{{ :informatica:programacion:cursos:git_control_codigo_fuente_programadores:github-desktop.png |}}

[[https://github.com/|GitHub]] es la plataforma por excelencia para alojar repositorios remotos de Git, sobre todo proyectos Open Source. La alta cantidad de usuarios que utiliza su sistema para trabajar hace que sea muy común encontrarse con su GUI en más de un proyecto, y la mayoría de bibliotecas y utilidades que usarás para programar estarán alojadas casi seguro en esta plataforma.

Esta GUI es la herramienta oficial de **GitHub** para la gestión de repositorios de Git. Sus principales virtudes son:

  * Interfaz muy visual e intuitiva
  * Gran integración con la plataforma de GitHub

Se puede descargar desde [[https://desktop.github.com/|aquí]], y también podremos obtener ayuda y documentación desde la misma web.

Su instalador tanto en Mac como en Windows es un simple asistente de pulsar "Siguiente", así que no tendrás dificultad para ponerlo en marcha.

A continuación vamos a ver cómo utilizarlo.

<WRAP center round info 60%>
A fecha del curso, Git GUI no permite hacer **rebase**
</WRAP>

===== SourceTree =====

[[https://www.atlassian.com/|Atlassian]] es una gran empresa australiana, de las más importantes especializadas en herramientas para desarrolladores. Sus productos los podrás encontrar en uso en multitud de empresas ya que son muy populares. [[https://www.sourcetreeapp.com/|SourceTree]] es la herramienta oficial de esta empresa para la gestión de repositorios, tanto de Git como de Mercurial.

Las principales virtudes de SourceTree son:

  * Interfaz sencilla e intuitiva
  * Posibilidad de usar [[https://datasift.github.io/gitflow/IntroducingGitFlow.html|Git-flow]] como //workflow// por defecto
  * Integración con las principales herramientas de Atlassian: BitBucket, Jira, Trello...

[[https://bitbucket.org/|BitBucket]] es un repositorio de código remoto de Git que, junto a GitLab, puede que sea el máximo competidor actualmente de GitHub. De la misma forma que GitHub ha conseguido una hegemonía indudable alojando repositorios de código abierto, BitBucket ha conseguido una gran porción del pastel en el sector de la industria. De hecho ¡el proyecto de este curso se ha gestionado con Git y BitBucket!:

{{ :informatica:programacion:cursos:git_control_codigo_fuente_programadores:bitbucket-curso.png |}}

No será raro que te encuentres en una empresa donde utilicen las herramientas de Atlassian como soporte para su trabajo, entre ellas SourceTree, y conviene conocerlo, además de que es una de las mejores y más completas herramientas visuales para Git.

<WRAP center round info 60%>
Es la más completa de las herramientas visuales para trabajar con Git. Por ejemplo, SourceTree soporta **rebase**.
</WRAP>

===== TortoiseGit =====

Por último veremos cómo utilizar [[https://tortoisegit.org/|TortoiseGit]]. Se trata de un cliente gratuito y //Open Source// para Git, que **está integrado por completo con el explorador de Windows**, de modo que podemos trabajar con Git desde cualquier carpeta del disco duro y sin necesidad de usar un programa dedicado.

TortoiseGit nació como alternativa a un producto similar existente desde hace muchos años para los equipos que trabajaban con SubVersion (SVN, que si recuerdas es un VCS no distribuido). Como muchas empresas han usado durante años SVN, utilizar una herramienta similar con Git les evita un cambio demasiado radical en sus herramientas y su flujo de trabajo. Por eso te lo vas a encontrar en muchas empresas por ahí, sobre todo en las que tienen ya unos cuantos años y usaban gestores de código fuente antes de que se creara Git.

No obstante, es una herramienta de las más potentes y completas, y muy útil en todo caso, por lo que conviene conocerla.

Sus principales características son:

  * Buena integración con los menús contextuales de Windows
  * El cambio no es tan drástico como con otras herramientas visuales
  * Al usar apenas una GUI completa su usabilidad es bastante sencilla si dominas los conceptos de Git

<WRAP center round info 80%>
Nota: si trabajas en Mac o Linux no podrás utilizar TortoiseGit, porque es exclusiva para Windows. No obstante existe una muy parecida llamada [[https://itunes.apple.com/us/app/snailgit/id847260112?l=en&mt=12|SnailGit]] (caracol en vez de tortuga 😁) que tiene una funcionalidad casi idéntica, aunque la verdad es que no tengo experiencia usándola. En Linux lo más parecido es [[http://rabbitvcs.org/|RabbitVCS]], que ofrece también una funcionalidad similar con Nautilus, el explorador de archivos de GNome.
</WRAP>

==== El editor de conflictos de Tortoise ====

Otra de las grandes características de Tortoise es que te permite resolver conflictos de manera visual, comparando las dos versiones del archivo que entran en conflicto, una al lado de la otra en un comparador de archivos:

{{ :informatica:programacion:cursos:git_control_codigo_fuente_programadores:tortoise-editor-conflictos.png |}}

Aunque en el vídeo no se muestra porque es muy sencillo y ya lo hemos visto con los demás clientes visuales, conviene saber que tenemos esta capacidad y que nos facilita resolver este tipo de problemas mejor que con otras herramientas.

==== Nota sobre los iconos superpuestos de TortoiseGit ====

En el vídeo que verás a continuación, tras haber creado el repositorio, en circunstancias normales deberían verse unos iconos superpuestos (overlays) sobre los iconos de las carpetas y archivos que están bajo control de código fuente con Git, ya que esta es una de las características de TortoiseGit.

Este sería el aspecto de estos iconos según el estado de cada archivo o carpeta respecto al commit:

{{ :informatica:programacion:cursos:git_control_codigo_fuente_programadores:overlays-tortoisegit.png |}}

El problema es que Windows tiene una limitación en cuanto al máximo de //overlays// de este tipo que pueden existir en un mismo sistema. Este límite es muy, muy pequeño y en cuanto instalas más de 2 o 3 programas que usen este tipo de iconos superpuestos, unos se pisan a otros. Por eso, en ocasiones, como pasa en el vídeo siguiente, dejan de verse, ya que otros programas han sobrescrito a los iconos overlay de TortoiseGit. Y este es el motivo de que no se vean en el vídeo.

Para solucionarlo puedes recurrir a lo que se explica [[http://www.jasoft.org/Blog/post/Como-solucionar-que-no-se-vean-los-iconos-especiales-del-explorador-en-TortoiseGit-y-similares.aspx|en este artículo]], pero a lo mejor te vuelve a pasar porque al instalar alguna actualización de otro programa que interfiera, se vuelven a perder. Esta es una de las grandes "pegas" de usar Tortoise, aunque no se le puede achacar a este programa sino a una limitación histórica de Windows que parece mentira que todavía no hayan solucionado.

<WRAP center round info 60%>
Junto a SourceTree, Tortoise Git es uno de los clientes de Git con más funcionalidades.
</WRAP>

===== Prácticas propuestas para el módulo =====

En este módulo has aprendido a manejar las principales herramientas visuales de Git. La idea es que ahora descargues y pruebes cada una de ellas para encontrar la que mejor se adapte a tus gustos y necesidades, y mejor si las dominas todas.

Te recomiendo encarecidamente repasar cada uno de los vídeos y realizar todos los pasos que se han hecho en cada uno de ellos, con cada herramienta, para que experimentes con ellos y te quede claro el manejo básico.

En las descargas (y directamente en las referencias cruzadas del lateral de esta lección) encontrarás dos archivos:

  * ''WebInicial.zip'': contiene la web que hemos usado de ejemplo en los vídeos, en su punto inicial, sin ninguno de los cambios que se van haciendo en cada paso de los vídeos. Te recomendamos descargarla y usarla de punto de partida para repetir las mismas operaciones e intentar otras nuevas para experimentar.
  * ''WebFinal.zip'': contiene el repositorio local de Git resultante de todas las operaciones que se realizan en los vídeos, con cada herramienta. Si lo descomprimes verás que está el resultado final de las operaciones, pero que contiene una carpeta ''.git'' con toda la información, y cada uno de los pasos:

{{ :informatica:programacion:cursos:git_control_codigo_fuente_programadores:descarga-repo-git.png |}}

Puedes consultar aquí todo el repositorio, los cambios realizados en cada rama, las diferencias entre una versión y otra del archivo ''index.html'', etc...

¿**Cómo verías las diferencias** entre una versión y otra de un mismo archivo en cada una de las herramientas visuales? ¿Y directamente desde la línea de comandos con Git? Investiga por tu cuenta esta opción, ya que te resultará interesante.

Además "investiga" un poco más otras opciones de la interfaz de usuario, sobre conceptos que ya hemos visto pero que quizá no hemos tocado en los vídeos para ver qué hacen y cómo funcionan. Otras características más avanzadas las veremos en los siguientes módulos.