La siguiente es la primera guía diseñada para ser entregada directamente a tus estudiantes. Está redactada en un tono cercano pero instructivo, asumiendo que ya tienen las bases de Git y GitHub que les has enseñado.

Esta guía es un flujo de trabajo completo, desde la creación del repositorio hasta el despliegue de una pequeña aplicación web con Streamlit, todo orquestado con la ayuda de Copilot.

Integremos todo el flujo de trabajo, desde la creación del repositorio hasta la sincronización de los cambios, y encapsulando la solución en una aplicación web con Streamlit.

Esta versión de la guía es un tutorial completo de “cero a producción” en un entorno de Codespaces.

🚀 Guía Completa: De Cero a App Web con GitHub, Codespaces y Copilot

Objetivo: Guiar al estudiante a través del ciclo de vida completo de un proyecto de software: crear un repositorio en GitHub, desarrollar una aplicación web interactiva en un Codespace, usar Copilot para acelerar cada paso (configuración, codificación, y control de versiones) y finalmente, sincronizar el trabajo de vuelta a GitHub.

Aplicación de Ejemplo: Crearemos una página web con Streamlit que calcule el caudal (\(Q = A \times v\)) en una tubería, un problema relevante para las ingenierías Civil, Agrícola y Agroindustrial.

Paso 0: Creación del Repositorio en GitHub (El Punto de Partida)

Antes de usar Codespaces, necesitamos un lugar donde guardar nuestro proyecto.

  1. Ve a GitHub.com e inicia sesión.
  2. Haz clic en el botón verde “New” (Nuevo) para crear un nuevo repositorio.
  3. Asigna un nombre: calculadora-caudal-app.
  4. Asegúrate de que sea “Public” (Público).
  5. Marca la casilla “Add a README file”. Esto es importante para poder clonar el proyecto.
  6. Haz clic en “Create repository” (Crear repositorio).

¡Listo! Ya tienes el “contenedor” de tu proyecto en la nube.

Paso 1: Lanzando tu Entorno de Desarrollo en la Nube

Ahora, vamos a “encender” nuestro computador en la nube para este proyecto.

  1. En la página de tu nuevo repositorio, haz clic en el botón verde “< > Code”.
  2. Selecciona la pestaña “Codespaces”.
  3. Haz clic en “Create codespace on main”.
  4. Espera uno o dos minutos. GitHub está preparando tu entorno de desarrollo personal con VS Code, una terminal y todo lo necesario, directamente en tu navegador.

Paso 2: Configuración del Entorno Asistida por Copilot

Una vez dentro del Codespace, usaremos el Chat de la Terminal para configurar el entorno. Abre la terminal (Ctrl + Shift + Ñ) y luego activa el chat de Copilot con Ctrl + I.

2.1. Instalar la Extensión de Python

Aunque usualmente viene preinstalada, es una buena práctica verificar.

  • Prompt para el Chat de la Terminal: ¿Cómo verifico si la extensión de Python de Microsoft está instalada en VS Code y es la versión más reciente? Copilot te guiará a la pestaña de extensiones para confirmarlo.

2.2. Crear el Entorno Virtual

Para mantener nuestras librerías aisladas.

  • Prompt para el Chat de la Terminal: genera el comando de terminal para crear un entorno virtual de Python llamado .venv
  • Acción: Copilot sugerirá python3 -m venv .venv. Presiona el botón “Ejecutar” (Run) para crearlo.
  • Importante: VS Code detectará el entorno y te preguntará si quieres usarlo. Selecciona “Sí”.

2.3. Crear el Archivo requirements.txt

Aquí listaremos las librerías que necesita nuestro proyecto.

  • Acción: Abre el Chat principal de Copilot (en la barra lateral, no en la terminal).
  • Prompt: @workspace /new requirements.txt Crea el archivo con una sola dependencia: streamlit

2.4. Instalar los Módulos Requeridos

Le pediremos a Copilot que instale todo lo que está en requirements.txt.

  • Prompt para el Chat de la Terminal: escribe el comando para instalar las dependencias del archivo requirements.txt usando pip
  • Acción: Copilot sugerirá pip install -r requirements.txt. Presiona “Ejecutar” (Run) para instalar Streamlit en tu entorno virtual.

Paso 3: Creando la Aplicación Web con Copilot

Ahora que el entorno está listo, construiremos la aplicación.

3.1. Crear el Script app.py

Usaremos el chat principal para generar el esqueleto de nuestra aplicación.

  • Prompt para el Chat de Copilot (barra lateral): @workspace /new app.py Crea una aplicación de Streamlit básica. Importa streamlit. Añade un título que diga "Calculadora de Caudal para Tuberías". Agrega un encabezado que explique la fórmula Q = A * v.

3.2. Desarrollar la Lógica de la Aplicación

Ahora, dentro del archivo app.py recién creado, le pediremos a Copilot que añada la funcionalidad.

  • Acción: Ve al final del archivo app.py y escribe el siguiente comentario como prompt:

    # Usando los widgets de Streamlit, crea lo siguiente:
# 1. Una entrada numérica (st.number_input) para que el usuario ingrese el "Diámetro de la tubería (cm)".
# 2. Otra entrada numérica para la "Velocidad del fluido (m/s)".
# 3. Un botón (st.button) que diga "Calcular Caudal".
# 4. Si el botón es presionado, calcula el caudal usando la fórmula Q = A*v. Recuerda convertir el diámetro a metros y calcular el área de un círculo.
# 5. Muestra el resultado de forma destacada usando st.success() con un mensaje claro y formateado a 4 decimales.

  • Acción: Presiona Enter y acepta la sugerencia de código de Copilot con la tecla Tab. El código generado será muy similar a esto:

    import streamlit as st
import math

# ... (título y encabezado generados antes) ...

diametro_cm = st.number_input("Diámetro de la tubería (cm):", min_value=0.1, value=10.0, step=0.1)
velocidad_ms = st.number_input("Velocidad del fluido (m/s):", min_value=0.1, value=1.5, step=0.1)

if st.button("Calcular Caudal"):
    diametro_m = diametro_cm / 100
    radio_m = diametro_m / 2
    area_m2 = math.pi * (radio_m ** 2)
    caudal_m3s = area_m2 * velocidad_ms

    st.success(f"El caudal calculado es: {caudal_m3s:.4f} m³/s")

Paso 4: Ejecutar y Probar la Aplicación Web

  • Prompt para el Chat de la Terminal: ¿Cuál es el comando para ejecutar mi aplicación de Streamlit llamada app.py?
  • Acción: Copilot sugerirá streamlit run app.py. Presiona “Ejecutar” (Run).
  • Resultado: Codespaces detectará que has iniciado una aplicación web. Aparecerá una notificación en la esquina inferior derecha. Haz clic en “Abrir en el navegador” (Open in Browser). ¡Tu aplicación web de ingeniería está funcionando en una nueva pestaña!

Paso 5: Guardar y Sincronizar tu Trabajo en GitHub

Has creado una aplicación funcional. Ahora, debes guardar este progreso en tu repositorio de GitHub.

  • Prompt para el Chat de la Terminal: genera los comandos de git para añadir todos los archivos nuevos, hacer un commit y luego subir los cambios a GitHub.
  • Análisis: Copilot te sugerirá los tres comandos clave. Vamos a ejecutarlos paso a paso pidiéndole ayuda.

  1. Añadir cambios (Stage):

    • Prompt: comando para añadir todos los archivos al área de preparación de git
    • Acción: Copilot dirá git add .. Presiona “Ejecutar”.

  2. Confirmar cambios (Commit):

    • Prompt: sugiere un mensaje de commit claro en español para describir la creación inicial de la app de streamlit que calcula el caudal
    • Acción: Copilot podría sugerir algo como "feat: Crea la versión inicial de la calculadora de caudal con Streamlit".
    • Prompt: usa el mensaje anterior para generar el comando git commit completo
    • Acción: Copilot generará git commit -m "feat: Crea la versión inicial de la calculadora de caudal con Streamlit". Presiona “Ejecutar”.

  3. Sincronizar cambios (Push):

    • Prompt: comando para subir mis commits al repositorio remoto en GitHub
    • Acción: Copilot dirá git push. Presiona “Ejecutar”.

¡Felicitaciones! Ahora, si vas a la página de tu repositorio en GitHub, verás que todos tus archivos (app.py, requirements.txt, etc.) están allí guardados. Has completado el ciclo completo de desarrollo en la nube.