Git

Integrar Git a proyectos, usando GitHub Desktop

Resumen

En este post te voy a mostrar cómo agregar el control de versiones de git a cualquiera de tus proyectos de software para tener un desarrollo más profesional.

Veremos cómo clonar un repositorio, crear uno nuevo o agregar git a tu código fuente existente.

Te mostraré a usar la app de GitHub Desktop así que no vas a necesitar usar comandos.

Ventajas de usar un control de versiones para el desarrollo de software

Hay muchísimas ventajas al usar git. No importa si son proyectos tuyos o para tu empresa

  • Puedes volver a un estado de tu código en donde el mismo funcionaba
  • Existe la posibilidad de ver cuáles cambios has hecho y a cuáles archivos
  • Es muy fácil invitar a un colaborador
  • El código fuente está respaldado en la nube
  • Si le pasa algo a tu PC puedes descargar el código de nuevo
  • Puedes compartir el código como open source
  • También puedes tener repositorios privados ilimitados
  • La sincronización del código entre dispositivos es muy fácil, solo tienes que clonar el repositorio
  • Te das cuenta de los cambios que has hecho a tu proyecto a través del tiempo

Crear cuenta de GitHub

Para usar GitHub y comenzar a usar git para vigilar tu código fuente necesitas una cuenta. Puedes crear una gratuita:

https://github.com/join

Cuando la hayas creado (o si ya tienes una) te invito a seguirme o ver mis repositorios.

Descargar GitHub Desktop

Comienza descargando GitHub Desktop desde https://desktop.github.com/

Por el momento está disponible para Mac y Windows.

Cuando lo hayas descargado realiza su instalación y ábrelo.

Pantalla de inicio de GitHub Desktop

 

Agregar cuenta a GitHub Desktop

Ahora haz click en Sign in to GitHub.com y rellena tus datos o haz click en Sign in using your browser si tienes la sesión abierta en el navegador.

Iniciar sesión en GitHub

Si el login es correcto, ahora te pedirá el correo y el nombre que quieres que aparezcan al hacer un commit.

Un commit es como un cambio o modificación notable que se hace al código fuente.

Nombre y correo para GitHub desktop

Ahora haz click en Continue. En la siguiente pantalla se te preguntará si quieres enviar datos de uso a GitHub, esto es tu decisión.

Para terminar haz click en Finish.

3 maneras

  1. Puedes clonar un repositorio si serás contribuidor
  2. También puedes crear un repositorio nuevo, es decir, para comenzar un proyecto desde cero
  3. Finalmente, puedes agregar tu código ya existente

Voy a mostrarte esas 3 opciones y finalmente a vigilar los cambios de tu código

Clonar un repositorio

Ahora puedes clonar un repositorio de internet. Puedes clonar el mío del plugin para impresión de tickets para JavaScript, no importa que no conozcas el lenguaje

Para ello, en la siguiente ventana selecciona Clone a repository from the Internet, elige URL y pega lo siguiente si quieres (también puedes clonar otro de tu agrado):

https://github.com/parzibyte/plugin-ticket-js

Elige una ruta de guardado, puede ser en donde tú quieras pero debería ser en un lugar en donde usualmente guardes tu código.

Clonar repositorio usando git

Cuando hayas elegido las rutas, haz click en Clone.

El proyecto se comenzará a clonar:

Clonando repo usando GitHub desktop

Ahora puedes visitar la ruta en tu disco duro, y el código estará ahí:

Crear un repositorio

Para crear un proyecto haz click en File > New repository y rellena los datos:

El nombre amigable debe ser uno que no lleve acentos ni espacios. La descripción sí que puede ser extendida.

Puedes marcar Initialize this repository with a README para que un archivo llamado README.md sea creado, ese archivo es el que se muestra en github.com/tu_perfil/tu_repositorio

Git ignore es un conjunto de opciones para ignorar archivos dependiendo del proyecto. Por ejemplo, si seleccionas Composer, se va a ignorar la carpeta vendor pues la misma no debería ser clonada con el proyecto. Si seleccionas NPM la carpeta node_modules no será clonada.

Es decir, esta opción permite omitir los archivos que no deberían ser clonados.

Finalmente selecciona la licencia, que puedes dejarla vacía en caso de que no sepas. Si tu software es open source te recomiendo la licencia del MIT.

Finalmente haz click en Create repository y ahora puedes navegar a la ruta elegida.

En esa ruta puedes comenzar a agregar tu código, así como las imágenes y todo lo necesario.

Agregar proyecto ya existente y publicarlo

Si ya tienes un proyecto de software y crees que es hora de agregarle control de versiones, puedes hacerlo sin ningún problema; nunca es tarde para esto.

Nota: tal vez lo más lógico es usar la opción de crear un repositorio, pero a veces esto genera problemas, sobre todo con código ya existente. Te mostraré cómo evitar eso basado en mi experiencia.

Para ello ve a File > Add local repository y selecciona la carpeta en donde vive tu proyecto.

Aparecerá un mensaje diciendo que no parece que sea un repositorio de GitHub:

Como está dando la opción, selecciona create a repository.

Aparecerá la misma ventana que cuando creamos uno nuevo, pero ahora ya tiene la ruta:

Repositorio local

Rellena los datos de nuevo y haz click en Create repository.

Es importante seleccionar un Git ignore si tu proyecto usa NPM, Composer, Gradle, etcétera. Es decir, si el tipo de proyecto aparece en la lista desplegable, recomiendo seleccionarlo.

Se va a hacer un commit automático que tendrá la descripción de “Initial commit“:

Primer commit automático con GitHub desktop

Si todo está bien, haz click en Publish repository.

Publicar repositorio de Github a github.com

Ahí puedes elegir el nombre (ya que puede ser distinto al del directorio), poner una descripción y elegir si será privado o no.

Finalmente selecciona Publish repository.

Ahora tu proyecto se encuentra en github.com/tu_perfil/el_nombre

Por ejemplo, el que acabo de clonar está en https://github.com/parzibyte/imagenes-base64.

Si el tuyo es privado, igualmente puedes acceder con la URL pero solo tú lo puedes ver.

Vigilando cambios

Nota: esto de los cambios aplica para cuando es tu proyecto, es uno clonado o es uno nuevo. Es decir, para los 3 es lo mismo.

Ahora eres libre de modifica tu repositorio. Pondré un ejemplo con el que sugerí clonar al inicio pero puedes modificar tus propios archivos.

Si no sabes JavaScript simplemente cambia una variable o escribe un comentario con:

// comentario

Yo modifiqué el archivo Impresora.js.

Ahora vuelve a GitHub Desktop y los cambios se habrán reflejado:

Puedes hacer click en los archivos de la izquierda y sus modificaciones aparecerán a la derecha.

También puedes omitir algunos archivos en el commit, simplemente debes quitarlos de la selección.

Si quieres deshacer los cambios y ponerlos como estaban en el anterior commit, haz click derecho en uno de los archivos y selecciona Discard changes.

En caso de que quieras deshacer todos los cambios haz click en donde dice “X changed files” en la parte superior y selecciona Discard all changes.

Cuando estés listo, haz click en Commit to master y después en Push Origin.

El archivo .gitignore

Este archivo se encarga de ignorar archivos o directorios. Por ejemplo, si quieres omitir todos los txt agrega una nueva línea que diga:

*.txt

Puedes usar comodines y todas esas cosas.

Si quieres más ejemplos mira los de mis repos.

Conclusión

Esto fue una introducción a GitHub pero con esto ya puedes agregar GitHub a tu proyecto y evitar decir el típico “no sé qué moví” ya que ahora tendrás un amigo que te ayuda a vigilar tu código fuente.

De igual forma tu empresa puede ver la colaboración de tus compañeros, o incluso si tú eres un jefe de desarrollo puedes analizar lo que hace cada persona.

Todo esto de los contribuidores y gráficos se puede ver en github.com.

Recuerda que puedes seguirme 😉

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

17 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.