Git y GitHub: Sesión Práctica

Configuración Previa en GitHub

Paso 1: Configurar GitHub (Actor 1)

En GitHub.com:

  1. Crear cuenta
  2. Verificar email
  3. Configurar SSH Key (recomendado)

Configuración SSH (Demostración):

# Generar clave SSH
ssh-keygen -t ed25519 -C "tu.email@example.com"

# Copiar clave pública
cat ~/.ssh/id_ed25519.pub

# Agregar en GitHub: Settings > SSH and GPG keys

Paso 2: Configurar Git Local (Actor 1)

# Configurar identidad
git config --global user.name "Actor Uno"
git config --global user.email "actor1@example.com"

# Verificar configuración
git config --list --global

Acto 1: Creación del Repositorio desde Cero

Actor 1: Crear Repositorio en GitHub

En GitHub (Interfaz Web):

  1. Click en "New repository"
  2. Nombre: demo-colaboracion-git
  3. NO inicializar con README
  4. NO agregar .gitignore
  5. NO agregar licencia
  6. Crear repositorio

Copiar comandos que GitHub sugiere:

# GitHub mostrará algo como:
git remote add origin git@github.com:usuario/demo-colaboracion-git.git
git branch -M main
git push -u origin main

Actor 1: Configurar Repositorio Local

# Crear directorio del proyecto
mkdir demo-colaboracion-git
cd demo-colaboracion-git

# Inicializar repositorio
git init

# Crear contenido inicial
echo "# Demo de Colaboración con Git" > README.md

# Crear archivo de código (ejemplo)
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>Demo Git</title>
</head>
<body>
    <h1>Proyecto de Demostración</h1>
    <p>Creado por Actor 1</p>
</body>
</html>
EOF

Actor 1: Primer Commit y Push

# Ver estado
git status

# Agregar archivos
git add .

# Primer commit
git commit -m "Initial commit: README and basic HTML"

# Configurar rama principal
git branch -M main

# Conectar con GitHub
git remote add origin git@github.com:usuario/demo-colaboracion-git.git

# Subir al repositorio remoto
git push -u origin main

¡Verificar en GitHub que aparezca el contenido!

Acto 2: Colaboración Simple (Mismo Branch)

Actor 2: Clonar y Modificar

# Actor 2 clona el repositorio
git clone git@github.com:usuario/demo-colaboracion-git.git
cd demo-colaboracion-git

# Configurar su identidad local
git config user.name "Actor Dos"
git config user.email "actor2@example.com"

# Ver contenido actual
ls -la
cat README.md

Actor 2: Hacer Cambios

# Modificar README
echo "" >> README.md
echo "## Colaboradores" >> README.md
echo "- Actor 1: Creador del proyecto" >> README.md
echo "- Actor 2: Primer colaborador" >> README.md

# Modificar HTML
sed -i 's/<p>Creado por Actor 1<\/p>/<p>Creado por Actor 1<\/p>\n    <p>Colaboración de Actor 2<\/p>/' index.html

Actor 2: Commit y Push

# Ver cambios
git status
git diff

# Confirmar cambios
git add .
git commit -m "Add collaborators section and update HTML"

# Subir cambios
git push origin main

Actor 1: Actualizar su Repositorio

# Actor 1 actualiza su repositorio local
git pull origin main

# Ver los cambios
cat README.md
cat index.html

¡Verificar que ambos actores ven los cambios!

Acto 3: Trabajando con Branches

Actor 1: Crear Nueva Rama

# Crear y cambiar a nueva rama
git checkout -b feature/nueva-seccion

# Agregar nueva funcionalidad
cat >> index.html << 'EOF'
    <div class="nueva-seccion">
        <h2>Nueva Sección</h2>
        <p>Esta sección fue agregada por Actor 1</p>
    </div>
EOF

# Modificar README también
echo "" >> README.md
echo "## Nuevas Características" >> README.md
echo "- Sección agregada por Actor 1" >> README.md

Actor 1: Commit en Branch

# Commit en la rama feature
git add .
git commit -m "Add new section with feature content"

# Subir la rama a GitHub
git push origin feature/nueva-seccion

Acto 4: ¡Conflictos! (La Parte Divertida)

Actor 2: Cambios Simultáneos en Main

Mientras Actor 1 trabajaba en su branch, Actor 2 hace cambios en main:

# Asegurarse de estar en main
git checkout main

# Hacer cambios similares pero diferentes
cat >> index.html << 'EOF'
    <footer>
        <p>Copyright 2024 - Modificado por Actor 2</p>
    </footer>
EOF

# Modificar el mismo README
echo "" >> README.md
echo "## Actualizaciones" >> README.md
echo "- Cambios realizados por Actor 2 en main" >> README.md

Actor 2: Commit en Main

git add .
git commit -m "Add footer and updates section"
git push origin main

Actor 1: Intentar Merge (¡Aquí viene el conflicto!)

# Volver a main
git checkout main

# Actualizar main
git pull origin main

# Intentar merge de la rama feature (o rebase)
git merge feature/nueva-seccion

¡CONFLICTO! Git mostrará mensaje de error

Acto 5: Resolviendo Conflictos

Identificar el Conflicto

# Ver estado del conflicto
git status

# Ver archivos en conflicto
cat README.md

Git habrá marcado el conflicto así:

<<<<<<< HEAD
## Actualizaciones
- Cambios realizados por Actor 2 en main
=======
## Nuevas Características
- Sección agregada por Actor 1
>>>>>>> feature/nueva-seccion

Resolver el Conflicto

# Editar manualmente el archivo
# Remover marcadores de conflicto
# Combinar ambos cambios

# El resultado debería ser:
cat > temp_readme << 'EOF'
# Demo de Colaboración con Git

## Colaboradores
- Actor 1: Creador del proyecto
- Actor 2: Primer colaborador

## Nuevas Características
- Sección agregada por Actor 1

## Actualizaciones
- Cambios realizados por Actor 2 en main
EOF

mv temp_readme README.md

Completar el Merge

# Agregar archivos resueltos
git add .

# Completar el merge
git commit -m "Merge feature/nueva-seccion with conflict resolution"

# Subir cambios
git push origin main

¡Verificar en GitHub que todo se ve bien!

Acto 6: Pull Requests

Actor 2: Crear Feature Branch

# Actualizar local
git pull origin main

# Crear nueva rama
git checkout -b feature/estilos-css

# Crear archivo CSS
cat > styles.css << 'EOF'
body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f5f5f5;
}
h1 {
    color: #2c3e50;
}
.nueva-seccion {
    background: white;
    padding: 20px;
    border-radius: 5px;
    margin: 20px 0;
}
EOF
# Modificar HTML para incluir CSS
sed -i 's/<title>Demo Git<\/title>/<title>Demo Git<\/title>\n    <link rel="stylesheet" href="styles.css">/' index.html

Actor 2: Push y Crear PR

# Commit y push
git add .
git commit -m "Add CSS styles for better presentation"
git push origin feature/estilos-css

En GitHub:

  1. Ir al repositorio
  2. GitHub mostrará opción "Compare & pull request"
  3. Click en "Compare & pull request"
  4. Agregar título: "Add CSS styling"
  5. Agregar descripción detallada
  6. Crear Pull Request

Actor 1: Revisar Pull Request

En GitHub:

  1. Ver la pestaña "Pull requests"
  2. Click en el PR creado
  3. Revisar cambios en "Files changed"
  4. Agregar comentarios en líneas específicas
  5. Aprobar o solicitar cambios

Merge del Pull Request

En GitHub:

  1. Click en "Merge pull request"
  2. Confirmar merge
  3. Eliminar branch (opcional)
# Ambos actores actualizan local
git checkout main
git pull origin main

# Limpiar branches locales
git branch -d feature/estilos-css
git branch -d feature/nueva-seccion

Demostración Final: GitHub Features

Issues y Project Management

Demostrar en GitHub:

  1. Crear un Issue
  2. Asignar a colaborador
  3. Usar labels
  4. Referenciar en commits (fixes #1)

GitHub Actions (Bonus)

Crear archivo .github/workflows/demo.yml:

name: Demo Workflow
on: [push]
jobs:
  demo:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Say hello
      run: echo "Hello from GitHub Actions!"

Gracias

Git y GitHub: Sesión Práctica Interactiva

By Juan G

Made with Slides.com

Git y GitHub: Sesión Práctica Interactiva

  • 44

More from Juan G

  • Solución de Profiling para Aplicación Bancaria ProCash
    Juan G
    61
  • Solución de Profiling para ProCash
    Juan G
    33