La prepararación para que no solo se use Copilot como un “autocompletado inteligente”, sino como un verdadero asistente de desarrollo integrado, es fundamental.

La siguiente es una guía de introducción diseñada para familiarizarce con el entorno completo, enfocándose en las actuales funcionalidades del entorno (IDE), a través de un problema sencillo y relevante para las tres ingenierías, con un enfoque en Streamlit, para desplegar en Web.

Integrar la creación del repositorio y enfocar el resultado final en una página web con Streamlit es una excelente manera de redondear el ejercicio. Hace que el resultado sea mucho más tangible y visual para los estudiantes.

🚀 Guía de Introducción a GitHub Codespaces y Copilot (Versión Web App)

Objetivo: Guiar al estudiante desde la creación de un repositorio en GitHub hasta el despliegue de una aplicación web interactiva con Streamlit. Se utilizará GitHub Copilot como un asistente integral para crear archivos, generar código y ejecutar comandos.

1. ¿Qué es este Entorno? (La Visión General)

  • GitHub Codespaces ☁️: Es tu entorno de desarrollo completo en la nube. Te permite programar desde un navegador con todo lo necesario, garantizando que todos los estudiantes tengan una configuración idéntica.
  • GitHub Copilot 🤖: Es tu asistente de programación con IA. Lo usaremos para escribir código, crear archivos, instalar programas y ejecutar nuestra aplicación web.

2. El Escenario: Una Calculadora Web de Caudal

Convertiremos la fórmula de caudal en una herramienta web interactiva donde cualquier usuario pueda ingresar los datos y obtener el resultado al instante.

La fórmula: \[Q = A \times v\]

  • \(Q\) = Caudal (\(m^3/s\))
  • \(A\) = Área de la sección transversal (\(m^2\))
  • \(v\) = Velocidad del fluido (\(m/s\))

3. Paso a Paso: De un Repositorio Vacío a una Web App Funcional

Paso 1: Creación del Repositorio en GitHub (El Origen)

Todo proyecto comienza en GitHub.

  1. Ve a GitHub.com y haz clic en “New” para crear un nuevo repositorio.
  2. Nombra tu repositorio: algo como calculadora-caudal-app.
  3. Añade una descripción: “Aplicación web con Streamlit para calcular el caudal”.
  4. Inicializa el repositorio: Marca las casillas para agregar un README.md y un archivo .gitignore. En el menú desplegable de .gitignore, busca y selecciona Python. Esto es una buena práctica para evitar subir archivos innecesarios.
  5. Haz clic en “Create repository”.

Paso 2: Lanzar tu Entorno de Desarrollo en la Nube

Ahora que tienes el repositorio, vamos a “encender tu computador en la nube”.

  1. Dentro de la página de tu nuevo repositorio, haz clic en el botón verde < > Code.
  2. Ve a la pestaña “Codespaces”.
  3. Haz clic en el botón “Create codespace on main”.
  4. Espera uno o dos minutos mientras GitHub prepara tu entorno. Se abrirá una ventana de VS Code directamente en tu navegador. ¡Ya estás listo para trabajar!

Paso 3: Instalar las Herramientas con Copilot en la Terminal

Nuestra aplicación necesita la librería streamlit. En lugar de buscar el comando, vamos a pedírselo a Copilot.

  1. Abre una nueva terminal: Ctrl + Shift + Ñ (o Terminal > New Terminal).

  2. Activa el Chat de la Terminal: Presiona Ctrl + I para abrir el chat de Copilot en la terminal.

  3. Escribe el siguiente prompt:

    ¿Cuál es el comando para instalar la librería streamlit usando pip?

  4. Copilot te sugerirá el comando: pip install streamlit.

  5. Debajo de la sugerencia, haz clic en el botón “Ejecutar” (Run). Copilot escribirá y ejecutará el comando por ti, instalando la librería en tu Codespace.

Paso 4: Crear la Aplicación Web Completa con @workspace

Ahora le pediremos a Copilot que genere toda la estructura de nuestra aplicación en un solo paso.

  1. Abre el Chat de Copilot en la barra lateral.

  2. Usa el comando @workspace para crear un nuevo archivo con todo el contenido de una vez.

  3. Escribe el siguiente prompt y presiona Enter:

    @workspace /new app.py
Crea una aplicación web completa con Streamlit.
La app debe:
1.  Tener el título "Calculadora de Caudal para Tuberías".
2.  Mostrar la fórmula Q = A * v usando st.latex.
3.  Tener dos campos de entrada numérica: uno para el "Diámetro de la tubería (cm)" y otro para la "Velocidad del fluido (m/s)".
4.  Contener la lógica de cálculo en una función de Python.
5.  Tener un botón "Calcular Caudal".
6.  Cuando se presione el botón, debe mostrar el resultado del caudal en m³/s de forma destacada.

  4. ¡Revisa la magia! Copilot creará el archivo app.py y lo llenará con un código funcional y bien estructurado, similar a este:

    import streamlit as st
import math

# Título de la aplicación
st.title("💧 Calculadora de Caudal para Tuberías")

# Mostrar la fórmula
st.header("Fórmula")
st.latex(r'''
    Q = A \times v
''')
st.write("Donde:")
st.write("- **Q**: Caudal ($m^3/s$)")
st.write("- **A**: Área de la sección transversal ($m^2$)")
st.write("- **v**: Velocidad del fluido ($m/s$)")

# Función de cálculo
def calcular_caudal(diametro_cm, velocidad_ms):
    diametro_m = diametro_cm / 100
    radio_m = diametro_m / 2
    area_m2 = math.pi * (radio_m ** 2)
    caudal_m3s = area_m2 * velocidad_ms
    return caudal_m3s

# Entradas de usuario
st.header("Ingrese los Datos")
diam_cm = st.number_input("Diámetro de la tubería (cm):", min_value=0.1, value=10.0, step=0.1)
vel_ms = st.number_input("Velocidad del fluido (m/s):", min_value=0.1, value=1.5, step=0.1)

# Botón de cálculo y visualización del resultado
if st.button("Calcular Caudal"):
    resultado_caudal = calcular_caudal(diam_cm, vel_ms)
    st.success(f"El caudal calculado es: **{resultado_caudal:.4f} m³/s**")

Paso 5: Ejecutar la Aplicación Web desde la Terminal

Finalmente, vamos a lanzar nuestra aplicación y verla en el navegador.

  1. En la terminal, activa de nuevo el chat de Copilot con Ctrl + I.

  2. Escribe el prompt:

    ¿Cómo ejecuto esta aplicación de Streamlit que está en el archivo app.py?

  3. Copilot te dará el comando: streamlit run app.py.

  4. Haz clic en el botón “Ejecutar” (Run).

  5. Codespaces detectará que has iniciado un servidor web y te mostrará una notificación en la esquina inferior derecha.

  6. Haz clic en el botón “Abrir en el navegador” (Open in Browser).

¡Felicidades! Se abrirá una nueva pestaña con tu aplicación web interactiva, creada casi en su totalidad con la ayuda de la IA. Ya puedes jugar con los valores y ver cómo se actualizan los cálculos.