📅 LUNES: Introducción y Configuración de Herramientas Esenciales para el Desarrollo

🎯 Objetivo del Día:

Establecer las bases para un flujo de trabajo eficiente utilizando Git y GitHub, herramientas clave para cualquier desarrollador moderno.

📝 Descripción:

¡Bienvenidos al inicio de nuestra primera semana en LevelUpTrend! Hoy nos adentraremos en el mundo del control de versiones y la colaboración efectiva mediante Git y GitHub. Entender y dominar estas herramientas no solo os ayudará a gestionar vuestro código de manera organizada, sino que también os permitirá colaborar con otros desarrolladores de forma fluida y profesional. Comenzaremos desde los conceptos más básicos, asegurándonos de que cada uno de vosotros comprenda la importancia de estos pasos y cómo configurarlos correctamente para potenciar vuestra productividad y eficiencia.

👶 Nivel Básico: Introducción a Git y GitHub

🔹 ¿Qué aprenderéis?

  • Fundamentos de Git: Comprender qué es Git, su historia y por qué es esencial en el desarrollo de software.
  • Creación de repositorios locales y remotos: Cómo iniciar y gestionar proyectos con Git en vuestra máquina y en GitHub.
  • Operaciones básicas: Dominio de comandos esenciales como add, commit y push para gestionar vuestros cambios de manera efectiva.

📚 Paso a paso:

1. Instalación de Git

¿Por qué es importante?
Git es la herramienta que nos permite llevar un registro detallado de todos los cambios en nuestro código, facilitando la colaboración y evitando el caos de versiones desordenadas. Sin Git, gestionar múltiples versiones y colaboraciones sería prácticamente imposible.

Pasos para instalar Git:
1. Descarga Git:

Visita git-scm.com y descarga la versión adecuada para vuestro sistema operativo (Windows, macOS, Linux).

2. Instalación:

Windows: Ejecuta el instalador descargado y sigue las instrucciones. Se recomienda mantener las opciones predeterminadas a menos que tengáis necesidades específicas.

macOS: Puedes instalar Git a través de Homebrew con el comando brew install git o descargar el instalador directamente desde el sitio web.

Linux: Utiliza el gestor de paquetes de vuestra distribución, por ejemplo, sudo apt-get install git en Debian/Ubuntu.

3. Verifica la instalación:

Abrid vuestra terminal (o Git Bash en Windows) y ejecutad:

git --version

Deberíais ver la versión instalada de Git, por ejemplo, git version 2.40.0.

4. Configura vuestra identidad:

Es crucial que Git sepa quién sois para asociar vuestros commits correctamente.

git config --global user.name "Vuestro Nombre"
git config --global user.email "vuemail@example.com"
Tip LevelUpTrend: Usad un correo electrónico que utilicéis regularmente y que esté asociado a vuestra cuenta de GitHub para una mejor integración.
2. Crear un Repositorio Local

¿Por qué crear un repositorio?
Un repositorio es donde almacenaréis todo vuestro código y su historial de cambios. Tener un repositorio local os permite trabajar en vuestro proyecto de manera organizada y, al conectarlo con un repositorio remoto (como GitHub), facilitáis la colaboración y el respaldo de vuestro trabajo.

Pasos para crear un repositorio local:
1. Crea una carpeta para vuestro proyecto:

Reemplazad mi-proyecto por el nombre que deseéis para vuestro proyecto, por ejemplo, portfolio, blog, app-tienda, etc.

mkdir mi-proyecto
cd mi-proyecto
2. Inicializa Git en la carpeta:
git init

Este comando crea un nuevo repositorio Git vacío en vuestra carpeta actual. Veréis una carpeta oculta .git que almacena toda la información de control de versiones.

3. Añadir y Confirmar Cambios

¿Por qué es importante?
Cada vez que hacéis cambios en vuestro proyecto, necesitáis registrarlos. Git lo hace mediante commits, que son como instantáneas de vuestro proyecto en un momento dado. Esto os permite volver a versiones anteriores si algo sale mal y entender el historial de cambios.

Pasos para añadir y confirmar cambios:
1. Crear un archivo README.md:

Abrid vuestro editor de texto favorito (Visual Studio Code, Sublime Text, Atom, etc.) y cread un archivo llamado README.md. Este archivo suele contener una descripción del proyecto, instrucciones de instalación, uso, contribuciones, etc.

Ejemplo de contenido para README.md:
# Mi Proyecto
Este es un proyecto de ejemplo para aprender Git y GitHub.
2. Añadir el archivo al área de preparación:
git add README.md

git add: Añade el archivo al área de preparación, indicando que está listo para ser confirmado.

3. Hacer un commit:
git commit -m "Inicializando proyecto con README"

git commit -m "mensaje": Crea un commit con un mensaje descriptivo de los cambios realizados.

Consejo: Escribid mensajes de commit claros y descriptivos. Por ejemplo, "Añade sección de instalación" es mejor que "Cambios".
4. Subir a GitHub

¿Por qué usar GitHub?
GitHub es una plataforma que aloja repositorios Git en la nube, facilitando la colaboración, el seguimiento de issues, la revisión de código y la integración con otras herramientas como CI/CD.

Pasos para subir vuestro repositorio local a GitHub:
1. Crear un nuevo repositorio en GitHub:
  1. Veis a github.com y accedéis a vuestra cuenta.
  2. Hacéis clic en el botón New repository (Nuevo repositorio).
  3. Nombre del repositorio: Ingresad el mismo nombre que usasteis localmente (mi-proyecto u otro).
  4. Descripción: Opcional, pero recomendado para explicar de qué trata vuestro proyecto.
  5. Privacidad: Elegid si deseáis que vuestro repositorio sea público o privado.
  6. Inicializar el repositorio con un README: No marques esta opción, ya que ya habéis creado un README.md localmente.
  7. Hacéis clic en Create repository (Crear repositorio).
2. Conectar vuestro repositorio local al remoto:

En vuestra terminal, dentro de la carpeta de vuestro proyecto, ejecutad:

git remote add origin https://github.com/vuestusuario/mi-proyecto.git
git branch -M main
git push -u origin main
  • git remote add origin [URL]: Vincula vuestro repositorio local con el remoto en GitHub.
  • git branch -M main: Renombra la rama principal a "main" (si aún no lo está).
  • git push -u origin main: Envía vuestros commits locales a GitHub y establece la rama "main" como la predeterminada para futuras sincronizaciones.
Nota: Reemplazad vuestusuario por vuestro nombre de usuario en GitHub y mi-proyecto.git por el nombre de vuestro repositorio.
3. Verificad en GitHub:
  1. Navegad a vuestro repositorio en GitHub.
  2. Deberíais ver el archivo README.md que creasteis y confirmado.

📌 Resumen del Nivel Básico:

  • Instalación y Configuración: Instalasteis Git y configurasteis vuestra identidad.
  • Creación y Gestión de Repositorios: Creasteis un repositorio local y añadisteis un archivo README.md.
  • Control de Versiones Básico: Realizasteis vuestro primer commit y push a GitHub.
  • Colaboración y Respaldo: Subisteis vuestro proyecto a GitHub, visualizando vuestro código en la nube.

🔄 Nivel Medio: Estrategias Avanzadas de Ramas en Git

🔹 ¿Qué aprenderéis?

  • Uso de ramas para gestionar funcionalidades: Aprende a trabajar en múltiples características sin afectar la rama principal.
  • Resolución de conflictos al fusionar: Domina la técnica para manejar conflictos que surgen al combinar diferentes ramas.
  • Buenas prácticas para mantener un historial limpio: Mantén vuestro proyecto organizado y fácil de entender para todos los colaboradores.

📚 Paso a paso:

1. Crear una Rama Nueva

¿Por qué usar ramas?
Las ramas os permiten desarrollar nuevas funcionalidades o corregir errores de manera aislada, sin interferir con la versión estable del proyecto. Esto facilita el trabajo en equipo y mejora la gestión de versiones.

Pasos para crear una rama:
git checkout -b nueva-funcionalidad

git checkout -b [nombre-rama]: Crea y cambia a una nueva rama llamada "nueva-funcionalidad".

Tip LevelUpTrend: Usad nombres descriptivos para vuestras ramas, como feature-login, bugfix-header, enhancement-responsive-design, etc.
2. Trabajar en la Rama
Pasos para trabajar en vuestra nueva rama:
  1. Realizad cambios en vuestro proyecto:

    Añadid nuevas características, corregid errores o realizad mejoras. Por ejemplo, cread un nuevo archivo login.js o modificad el README.md para incluir una nueva sección.

  2. Añadid los cambios al área de preparación: 
    git add .

    git add .: Añade todos los cambios realizados en la rama al área de preparación.

  3. Confirmad los cambios: 
    git commit -m "Añadida nueva funcionalidad de login"

    git commit -m "mensaje": Crea un commit con un mensaje descriptivo de los cambios realizados.

    Recomendación: Realizad commits frecuentes con mensajes claros para facilitar el seguimiento de cambios y la colaboración.
3. Fusionar Ramas (Merge)

¿Por qué fusionar ramas?
Una vez que vuestra nueva funcionalidad está lista y probada, es hora de integrarla a la rama principal (main) para que todos tengan acceso a ella.

Pasos para fusionar:
  1. Cambiaos a la rama principal: 
    git checkout main
  2. Fusionad los cambios de la rama "nueva-funcionalidad": 
    git merge nueva-funcionalidad

    Este comando integrará los cambios de nueva-funcionalidad en main.

    Nota: Si no hay conflictos, la fusión se completará automáticamente.
4. Resolver Conflictos

¿Qué son los conflictos?
Ocurren cuando Git no puede automáticamente fusionar cambios debido a modificaciones contradictorias en los mismos archivos o líneas de código.

Pasos para resolver conflictos:
  1. Identificad los archivos en conflicto:

    Git os indicará qué archivos tienen conflictos. Estos se marcarán en la terminal.

  2. Abrid los archivos conflictivos en vuestro editor:

    Veréis secciones marcadas con <<<<<<, ======= y >>>>>>.

    <<<<<< HEAD
Código en la rama main
=======
Código en la rama nueva-funcionalidad
>>>>>>
  3. Decidid qué cambios conservar:

    Eliminad las marcas de conflicto (<<<<<<, =======, >>>>>>). Modificad el código para que refleje los cambios que deseáis mantener.

  4. Añadid los archivos modificados al área de preparación: 
    git add archivo-conflictivo.js
  5. Confirmad la resolución de conflictos: 
    git commit -m "Conflictos resueltos en la fusión de nueva-funcionalidad"
    Consejo: Revisad bien los cambios antes de confirmar para aseguraros de que todo funciona correctamente.
5. Eliminar Ramas Obsoletas

¿Por qué eliminar ramas?
Mantener ramas innecesarias puede desordenar vuestro repositorio y dificultar la gestión del proyecto. Es una buena práctica eliminarlas una vez que ya no son necesarias.

Pasos para eliminar una rama local:
git branch -d nueva-funcionalidad

git branch -d [nombre-rama]: Elimina la rama local nueva-funcionalidad.

Nota: Si la rama no ha sido fusionada y aún deseáis eliminarla, usad git branch -D [nombre-rama] (mayúscula D), pero tened cuidado ya que esto puede llevar a la pérdida de cambios no fusionados.

✅ Buenas Prácticas:

  1. Usad Nombres Descriptivos para las Ramas:

    Facilita la comprensión del propósito de cada rama.

    Ejemplos: feature-authentication, bugfix-header-error, enhancement-responsive-design.

  2. Mantened el Historial Limpio:

    Siempre que sea posible, usad rebase en lugar de merge para integrar cambios y mantener un historial de commits más lineal y limpio.

    git checkout nueva-funcionalidad
git rebase main

    Ventaja: Facilita la lectura del historial y evita commits de merge innecesarios.

  3. Realizad Commits Frecuentes y Significativos:

    Dividid vuestro trabajo en pequeños commits que representen cambios lógicos.

    Facilita la revisión y el seguimiento de cambios.

  4. Revisad Vuestros Cambios Antes de Fusionar:

    Aseguraos de que todo funciona correctamente y que no hay errores antes de integrar vuestros cambios a la rama principal.

🚀 Nivel Avanzado: Despliegue CI/CD con GitHub Actions

🔹 ¿Qué aprenderéis?

  • Configurar flujos de trabajo automáticos: Automatiza tareas como pruebas, compilación y despliegue cada vez que realizáis cambios en vuestro código.
  • Desplegar aplicaciones automáticamente tras cada commit: Aseguraos de que vuestra aplicación esté siempre actualizada y funcionando correctamente en el entorno de producción.

📚 Paso a paso:

1. Crear un Archivo de Flujo de Trabajo

¿Por qué automatizar?
La automatización mejora la eficiencia, reduce errores humanos y acelera el proceso de desarrollo y despliegue, permitiéndoos enfocaros en escribir código de calidad.

Pasos para crear un flujo de trabajo:
  1. Crear la carpeta .github/workflows: 
    mkdir -p .github/workflows
  2. Crear el archivo ci.yml:

    Dentro de la carpeta workflows, cread un archivo llamado ci.yml con el siguiente contenido:

    name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '14'

      - name: Install Dependencies
        run: npm install

      - name: Run Tests
        run: npm test

      - name: Build and Deploy
        run: |
          npm run build
          npm run deploy
    Personalizad vuestro flujo de trabajo: Si usáis otro lenguaje o framework, ajustad los pasos de instalación y ejecución de pruebas según vuestras necesidades.
2. Explicación del Flujo:
  • Nombre del Flujo (name): Identifica el flujo de trabajo, en este caso, "CI/CD Pipeline".
  • Disparador (on):
    • push: Este flujo se activa cada vez que hacéis un push a la rama main.
  • Trabajos (jobs):
    • build: Define un trabajo llamado "build" que se ejecuta en un entorno de Ubuntu.
  • Pasos del trabajo:
    • Checkout Code: Usa la acción actions/checkout@v3 para clonar vuestro repositorio en el entorno de GitHub Actions.
    • Set up Node.js: Configura la versión de Node.js que utilizaréis (en este ejemplo, la versión 14).
    • Install Dependencies: Instala las dependencias necesarias para vuestro proyecto con npm install.
    • Run Tests: Ejecuta vuestras pruebas unitarias con npm test para aseguraros de que todo funciona correctamente.
    • Build and Deploy: Compila vuestro proyecto y despliega automáticamente con los comandos npm run build y npm run deploy.
3. Ver el Flujo en Acción

¿Cómo verificar que todo funciona?

  1. Realizad un cambio en vuestro proyecto:

    Por ejemplo, añadid una nueva funcionalidad o corregid un error.

  2. Haced un commit y push a la rama main: 
    git add .
git commit -m "Añade nueva funcionalidad y actualiza flujo de trabajo CI/CD"
git push origin main
  3. Verificad en GitHub:
    1. Navegad a vuestro repositorio en GitHub.
    2. Haced clic en la pestaña Actions.
    3. Deberíais ver vuestro flujo de trabajo ejecutándose. Aquí podréis monitorear el progreso y ver los resultados de cada paso.
4. Consejo: Personalizad vuestro Flujo para Despliegues en Plataformas como AWS, Netlify o Heroku
Ejemplo para Desplegar en Heroku:
  1. Añadid el paso de despliegue en ci.yml: 
    - name: Deploy to Heroku
  uses: akhileshns/heroku-deploy@v3.12.12
  with:
    heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
    heroku_app_name: "nombre-de-tu-app"
    heroku_email: "tuemail@example.com"
  2. Configurad los Secretos en GitHub:
    1. Veis a la configuración de vuestro repositorio en GitHub.
    2. Seleccionad Secrets > Actions > New repository secret.
    3. Añadid un secreto llamado HEROKU_API_KEY con vuestra clave API de Heroku.
  3. Personalizad los Parámetros:
    • heroku_app_name: Reemplazad nombre-de-tu-app por el nombre de vuestra aplicación en Heroku.
    • heroku_email: Ingresad el correo electrónico asociado a vuestra cuenta de Heroku.
    Tip LevelUpTrend: Revisad la documentación de Heroku Deploy para más opciones y configuraciones avanzadas.

📌 Resumen del Día

  1. Básico: Configuración inicial de Git y GitHub.
    • Instalasteis Git y configurasteis vuestra identidad.
    • Creasteis y gestionasteis un repositorio local y lo conectasteis con GitHub.
    • Realizasteis vuestro primer commit y push.
  2. Medio: Uso avanzado de ramas y gestión de conflictos.
    • Creasteis y gestionasteis ramas para desarrollar nuevas funcionalidades.
    • Aprendisteis a fusionar ramas y resolver conflictos.
    • Implementasteis buenas prácticas para mantener un historial limpio.
  3. Avanzado: Automatización con GitHub Actions para flujos CI/CD.
    • Configurasteis un flujo de trabajo automatizado para pruebas y despliegues.
    • Personalizasteis vuestro flujo para desplegar en plataformas como Heroku.
    • Monitoreasteis y verificasteis la ejecución de vuestros flujos de trabajo.

🛠 Tarea:

  1. Práctica del Nivel Básico:

    Cread vuestro propio repositorio, añadid un README.md detallado y realizad commits frecuentes conforme avancéis en vuestro proyecto.

  2. Práctica del Nivel Medio:

    Cread una nueva rama para una funcionalidad específica, realizad cambios, y fusionad la rama con main, resolviendo cualquier conflicto que surja.

  3. Práctica del Nivel Avanzado:

    Configurad un flujo de trabajo básico en GitHub Actions que incluya pruebas y despliegues. Personalizadlo según las necesidades de vuestro proyecto.

Recordad: La mejor forma de aprender es practicando. No dudéis en experimentar y cometer errores, ya que son oportunidades para aprender y mejorar.

🙌 Mañana más:

¡Nos vemos para retomar con retos de código y seguir subiendo de nivel, Levelers! 💡 Preparad vuestros entornos y vuestras ganas de aprender para enfrentar nuevos desafíos y consolidar vuestros conocimientos. ¡Vamos por más!

© 2024 LevelUpTrend - Code