0%
Tutorial 6 de 10
60% completado

Colaboración con GitHub

Domina las pull requests, las issues y las discusiones para colaborar eficazmente con otros desarrolladores.

Colaboración con GitHub

GitHub revoluciona la colaboración en el desarrollo de software. Este tutorial te enseñará a utilizar las herramientas colaborativas de GitHub: pull requests, issues, discusiones y mucho más para trabajar eficazmente en equipo.

Visión general de la colaboración

ForkClonePushPull RequestReviewMergePullDéveloppeur ADépôt ForkDépôt Local ABranche FeatureDépôt OriginalDéveloppeur BMaintainerDépôt Local B

Issues: gestión de tareas y bugs

¿Qué es una issue?

Una issue es un ticket para:

  • Reportar bugs
  • Proponer funcionalidades
  • Hacer preguntas
  • Organizar las tareas

Crear una issue

# Plantilla de issue para bug
**Descripción del bug**
Descripción clara y concisa del problema.

**Pasos para reproducirlo**
1. Ir a '...'
2. Hacer clic en '....'
3. Desplazarse hasta '....'
4. Ver el error

**Comportamiento esperado**
Descripción de lo que debería ocurrir.

**Capturas de pantalla**
Si procede, añadir capturas de pantalla.

**Entorno:**
- OS: [p. ej.: iOS]
- Navegador: [p. ej.: chrome, safari]
- Versión: [p. ej.: 22]

Gestión de issues

# Con GitHub CLI
gh issue create --title "Bug dans le login" --body "Description détaillée"
gh issue list
gh issue view 123
gh issue close 123

# Asignar una issue
gh issue edit 123 --add-assignee username

# Añadir labels
gh issue edit 123 --add-label bug,priority-high

Labels y organización

Labels por defecto:

  • bug: algo no funciona
  • enhancement: nueva funcionalidad o petición
  • documentation: mejoras en la documentación
  • good first issue: ideal para nuevos colaboradores
  • help wanted: se desea ayuda adicional

Labels personalizados:

priority-high (rojo)
priority-medium (naranja)
priority-low (verde)
frontend (azul)
backend (violeta)

Pull Requests: proponer modificaciones

Flujo de trabajo de una Pull Request

# 1. Fork del repositorio (desde la interfaz de GitHub)
# 2. Clonar tu fork
git clone https://github.com/VOTRE-USERNAME/projet.git
cd projet

# 3. Crear una rama
git checkout -b feature/nouvelle-fonctionnalite

# 4. Desarrollar y hacer commit
echo "nouveau code" > feature.js
git add feature.js
git commit -m "feat: add new feature"

# 5. Subir la rama
git push origin feature/nouvelle-fonctionnalite

# 6. Crear la Pull Request desde la interfaz de GitHub

Anatomía de una Pull Request

# Plantilla de Pull Request

## Descripción
Resumen de los cambios y motivación.

## Tipo de cambio
- [ ] Bug fix (cambio non-breaking que corrige un problema)
- [ ] Nueva funcionalidad (cambio non-breaking que añade una funcionalidad)
- [ ] Breaking change (fix o feature que rompería la funcionalidad existente)
- [ ] Documentación

## ¿Cómo se ha probado?
Descripción de las pruebas realizadas.

## Checklist:
- [ ] Mi código sigue las guidelines del proyecto
- [ ] He realizado una auto-review de mi código
- [ ] He comentado mi código, especialmente en las zonas difíciles
- [ ] He hecho los cambios correspondientes en la documentación
- [ ] Mis cambios no generan nuevos warnings
- [ ] He añadido tests que demuestran que mi fix es eficaz
- [ ] Los tests nuevos y existentes pasan en local

Comandos de GitHub CLI para PR

# Crear una PR
gh pr create --title "Add new feature" --body "Description détaillée"

# Listar las PR
gh pr list

# Ver una PR
gh pr view 123

# Checkout de una PR para probarla
gh pr checkout 123

# Mergear una PR
gh pr merge 123 --merge  # o --squash o --rebase

# Cerrar una PR
gh pr close 123

Code Review: revisión de código

Proceso de review

  1. Lectura del código: comprender los cambios
  2. Prueba en local: comprobar que funciona
  3. Feedback constructivo: comentarios útiles
  4. Aprobación o solicitud de cambios

Tipos de comentarios

# Comentario general
Este enfoque es interesante, pero ¿has considerado usar X en lugar de Y?

# Sugerencia de código
```suggestion
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

Pregunta

¿Por qué has elegido este método en lugar de la API nativa?

Nitpick (detalle menor)

nit: falta un espacio después de la coma


### Buenas prácticas de review

**Para el reviewer:**
- Sé constructivo y respetuoso
- Explica el «porqué» de tus sugerencias
- Aprueba con rapidez las buenas PR
- Prueba los cambios importantes

**Para el autor:**
- Responde a los comentarios
- Implementa las sugerencias pertinentes
- Pide aclaraciones si es necesario
- Da las gracias por las reviews

## Forks y contribuciones

### Fork de un proyecto

```bash
# 1. Fork desde la interfaz de GitHub
# 2. Clonar tu fork
git clone https://github.com/VOTRE-USERNAME/projet-fork.git
cd projet-fork

# 3. Añadir el repositorio original como remote
git remote add upstream https://github.com/AUTEUR-ORIGINAL/projet.git

# 4. Comprobar los remotes
git remote -v

Sincronizar con el upstream

# Obtener los cambios del upstream
git fetch upstream

# Mergear los cambios en tu main
git checkout main
git merge upstream/main

# Subir a tu fork
git push origin main

Flujo de trabajo de contribución

# 1. Sincronizar con upstream
git fetch upstream
git checkout main
git merge upstream/main

# 2. Crear una rama para tu contribución
git checkout -b fix/bug-description

# 3. Desarrollar
# ... modificaciones ...

# 4. Hacer commit
git add .
git commit -m "fix: resolve issue with user authentication"

# 5. Subir a tu fork
git push origin fix/bug-description

# 6. Crear una Pull Request hacia el upstream

Discusiones de GitHub

Tipos de discusiones

  • Q&A: preguntas y respuestas
  • Ideas: propuestas de ideas
  • General: discusiones generales
  • Show and tell: compartir logros

Crear una discusión

# Ejemplo de discusión "Ideas"
**Título:** Añadir un modo oscuro a la aplicación

**Descripción:**
Propongo añadir un modo oscuro para mejorar la experiencia de usuario, 
especialmente para el uso nocturno.

**Ventajas:**
- Reducción de la fatiga visual
- Ahorro de batería en pantallas OLED
- Tendencia moderna del diseño

**Preguntas:**
- ¿Qué paleta de colores utilizar?
- ¿Hace falta un toggle automático basado en la hora?
- ¿Cómo gestionar la compatibilidad con los temas existentes?

Gestión de proyectos con GitHub

GitHub Projects

# Organización de un proyecto
Columnas habituales:
- Backlog
- To Do
- In Progress
- In Review
- Done

# Automatización
- Mover automáticamente las tarjetas según los eventos
- Vincular las issues y PR a las tarjetas
- Filtrar por asignado, label, milestone

Milestones

# Organizar las issues por versión/sprint
Milestone: Version 2.0
- Issue #45: Añadir autenticación OAuth
- Issue #46: Mejorar el rendimiento
- Issue #47: Corregir el bug de navegación

Due date: 2024-03-15
Progress: 2/3 issues cerradas (67%)

Notificaciones y menciones

Sistema de notificaciones

# Tipos de notificaciones
- Menciones (@username)
- Asignaciones
- Reviews solicitadas
- Comentarios en tus PR/Issues
- Actividad en los repositorios que sigues (watch)

# Gestión de las notificaciones
Settings > Notifications
- Email notifications
- Web notifications
- Mobile notifications

Menciones y equipos

# Mencionar a un usuario
@username ¿puedes echar un vistazo a esta PR?

# Mencionar a un equipo
@org/frontend-team esta PR afecta a la interfaz de usuario

# Mencionar en un commit
git commit -m "fix: resolve login issue

Fixes #123
cc @maintainer-team"

Seguridad y permisos

Niveles de acceso

  • Read: clonar y leer
  • Triage: gestionar las issues y PR
  • Write: push y merge
  • Maintain: gestionar el repositorio sin acceso destructivo
  • Admin: acceso completo

Branch protection

# Reglas de protección para main
- Require pull request reviews before merging
- Require status checks to pass before merging
- Require branches to be up to date before merging
- Require conversation resolution before merging
- Restrict pushes that create files larger than 100MB

Ejercicios prácticos

Ejercicio 1: primera contribución

# 1. Hacer fork de un proyecto open source sencillo
# 2. Clonar tu fork
git clone https://github.com/VOTRE-USERNAME/projet-fork.git

# 3. Crear una rama
git checkout -b docs/improve-readme

# 4. Mejorar la documentación
echo "## Installation\n\n\`\`\`bash\nnpm install\n\`\`\`" >> README.md

# 5. Hacer commit y push
git add README.md
git commit -m "docs: improve installation instructions"
git push origin docs/improve-readme

# 6. Crear una Pull Request

Ejercicio 2: gestión de issues

# 1. Crear varias issues en tu repositorio
gh issue create --title "Bug: Login ne fonctionne pas" --label bug
gh issue create --title "Feature: Ajouter mode sombre" --label enhancement
gh issue create --title "Docs: Améliorer le README" --label documentation

# 2. Asignar y organizar
gh issue edit 1 --add-assignee VOTRE-USERNAME
gh issue edit 2 --add-label "good first issue"

# 3. Vincular una PR a una issue
git checkout -b fix/login-bug
# ... desarrollo ...
git commit -m "fix: resolve login authentication issue

Fixes #1"

Ejercicio 3: Code Review

# 1. Crear una PR con código mejorable
echo "function add(a,b){return a+b}" > math.js
git add math.js
git commit -m "add math function"
git push origin feature/math

# 2. Crear la PR y solicitar una review
gh pr create --title "Add math utilities" --reviewer ami-reviewer

# 3. Responder a los comentarios y mejorar
echo "function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('Both arguments must be numbers');
  }
  return a + b;
}" > math.js

git add math.js
git commit -m "improve: add input validation to math function"
git push origin feature/math

Herramientas e integraciones

GitHub Desktop

Interfaz gráfica para:

  • Visualizar los cambios
  • Crear commits
  • Gestionar las ramas
  • Sincronizar con GitHub

VS Code + GitHub

Extensiones útiles:

  • GitHub Pull Requests and Issues
  • GitLens
  • GitHub Copilot

Integraciones CI/CD

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install
      - run: npm test

Buenas prácticas colaborativas

Comunicación

  1. Sé claro en tus descripciones
  2. Utiliza las plantillas para las issues y PR
  3. Responde con rapidez a las reviews
  4. Documenta tus decisiones importantes

Organización

  1. Utiliza labels coherentes
  2. Organiza con milestones
  3. Asigna las responsabilidades
  4. Cierra las issues resueltas

Código

  1. Commits atómicos y descriptivos
  2. Ramas cortas y centradas
  3. Tests para las nuevas funcionalidades
  4. Documentación actualizada

Resolución de problemas colaborativos

Conflictos de merge en una PR

# 1. Sincronizar con la rama principal
git fetch origin
git checkout feature-branch
git merge origin/main

# 2. Resolver los conflictos
# ... edición manual ...

# 3. Hacer commit de la resolución
git add .
git commit -m "resolve merge conflicts"
git push origin feature-branch

PR bloqueada por los checks

# Comprobar los status checks
gh pr checks

# Relanzar los checks si es necesario
gh pr ready --undo  # marcar como draft
gh pr ready         # marcar como ready

Recursos adicionales

Documentación de GitHub

Herramientas de terceros

  • Conventional Commits: estándar para los mensajes
  • Semantic Release: automatización de las versiones
  • All Contributors: reconocimiento de los colaboradores

Conclusión

La colaboración en GitHub va mucho más allá del simple intercambio de código. Es un ecosistema completo que facilita la comunicación, la organización y la calidad del desarrollo de software. Dominar estas herramientas te hará más eficaz en tus proyectos colaborativos.

En el próximo tutorial profundizaremos en la resolución de conflictos, un aspecto crucial de la colaboración en equipo.

Tiempo de lectura estimado: 25 minutos
Nivel: Intermedio
Etapa anterior: Introducción a GitHub
Siguiente etapa: Resolución de conflictos

← Anterior Introducción a GitHub Siguiente → Resolución de conflictos
← Anterior Introducción a GitHub Siguiente → Resolución de conflictos