Preparar a los estudiantes con un flujo de trabajo moderno como el que se propone (GitHub Codespaces -> Streamlit) es una habilidad muy valiosa. Integrar el concepto de entornos virtuales desde el principio es la mejor práctica.

Esta guía considera las “reacciones” del IDE (Programación Reactiva) que son exactamente el tipo de detalles que pueden confundir a los principiantes y que, una vez explicados, se convierten en poderosas lecciones.

Incorporar la instalación de la extensión de Python y la explicación del reenvío de puertos desde el principio hará la guía mucho más robusta y anticipará dudas.

La siguiente es una propuesta de ejercicio completo, paso a paso, diseñado para ser desarrollado íntegramente en GitHub Codespaces. El proyecto integra las tres áreas de ingeniería que mencionas y está diseñado para introducir los módulos streamlit y pandas de una manera muy práctica y aplicada.

Nombre del Ejercicio: “Herramienta de Apoyo para Ingeniería V1.0”

Objetivo del Ejercicio:

Crear una aplicación web interactiva con Streamlit que sirva como una caja de herramientas digital para cálculos y registros básicos en Ingeniería Agrícola, Civil y Agroindustrial. Los estudiantes practicarán la creación de entornos virtuales, la gestión de dependencias con pip, la importación y uso de módulos (streamlit y pandas), la organización del código en funciones y la interacción con el usuario a través de una interfaz web. Además, aprenderán sobre la importancia de las extensiones del IDE y el manejo de puertos en entornos de desarrollo en la nube.

Contexto para los estudiantes:

“Como futuros ingenieros, a menudo necesitarán realizar cálculos rápidos o llevar registros sencillos en campo. En lugar de depender de múltiples hojas de cálculo, construiremos una aplicación web centralizada y profesional. Aprenderemos a usar herramientas modernas como GitHub Codespaces, a mantener nuestro proyecto aislado y reproducible utilizando entornos virtuales, y a comprender cómo las extensiones del editor y la gestión de puertos son fundamentales para nuestro desarrollo. Esta herramienta nos permitirá seleccionar nuestra especialidad y realizar una tarea específica, aplicando los conocimientos de programación adquiridos.”

Paso a Paso en GitHub Codespaces

Paso 1: Crear el Repositorio en GitHub

  1. Ve a tu cuenta de GitHub y crea un nuevo repositorio público.
    • Nombre del Repositorio: herramienta-ingenieria-streamlit
    • Descripción: “Aplicación con Streamlit para cálculos de ingeniería.”
    • Asegúrate de marcar la opción “Add a README file”.

Paso 2: Iniciar el Entorno de Desarrollo en Codespaces

  1. Dentro de tu nuevo repositorio en GitHub, haz clic en el botón verde < > Code.

  2. Ve a la pestaña “Codespaces”.

  3. Haz clic en “Create codespace on main”.

  4. Espera un momento mientras GitHub prepara tu entorno de desarrollo en la nube. Se abrirá una interfaz de VS Code directamente en tu navegador. A la izquierda tendrás el explorador de archivos y en la parte inferior, una terminal.

Paso 3: Instalar la Extensión de Python en VS Code (¡Importante!) 🐍

Una vez que Codespaces se carga, VS Code es muy inteligente. Al detectar que trabajarás con Python, a menudo te sugerirá instalar la extensión oficial de Python de Microsoft. ¡Esta extensión es crucial y muy útil!

  1. En la barra lateral izquierda, busca el icono de Extensiones (cuatro cuadrados, uno de ellos separado).

  2. En el cuadro de búsqueda, escribe Python.

  3. Verás la extensión “Python” de Microsoft. Haz clic en el botón “Instalar” si aún no está instalada o si te aparece una notificación emergente que te lo sugiere (como se ve en la imagen que adjuntaste).

    • ¿Por qué es importante? Esta extensión proporciona funciones esenciales para el desarrollo en Python, como autocompletado inteligente, depuración, formateo de código y la capacidad de detectar e interactuar fácilmente con entornos virtuales. Instalarla mejora enormemente tu experiencia de programación.
Instalar la Extensión de Python en VS Code
Instalar la Extensión de Python en VS Code

Paso 4: Estructurar el Proyecto 📂

  1. En el explorador de archivos de la izquierda, crea un nuevo archivo llamado app.py. Este será el archivo principal de nuestra aplicación.

  2. Crea otro archivo llamado requirements.txt. Este archivo es crucial, ya que le dice a Python qué paquetes externos (librerías) necesita nuestro proyecto.

  3. Dentro de requirements.txt, escribe las dos dependencias que usaremos:

    streamlit
pandas

Paso 5: Crear e Instalar Dependencias en un Entorno Virtual (¡Paso Clave!) 🛡️

Ahora vamos a crear una “burbuja” aislada para nuestro proyecto para que las librerías que instalemos no interfieran con otros proyectos.

  1. Crear el Entorno Virtual: En la terminal de Codespaces (en la parte inferior), ejecuta el siguiente comando. Esto creará una carpeta llamada .venv que contendrá una instalación de Python y pip específica para este proyecto.

    python3 -m venv .venv

  2. Activar el Entorno Virtual: Para empezar a usar la “burbuja”, necesitamos activarla. Ejecuta este comando:

    source .venv/bin/activate

    Notarás que el inicio de tu línea de comandos en la terminal ahora tiene un (.venv) al principio. ¡Esto significa que el entorno virtual está activo!

  3. Instalar las Dependencias: Ahora que estamos dentro de nuestro entorno aislado, instalaremos streamlit y pandas. Como ya las definimos en requirements.txt, podemos usar pip para leer ese archivo e instalar todo lo necesario.

    pip install -r requirements.txt

    Verás cómo se descargan e instalan los paquetes dentro de la carpeta .venv, manteniendo tu proyecto limpio y autocontenido.

Nota para los alumnos: VS Code a veces te sugerirá crear el entorno virtual automáticamente con un clic. Si lo hace, ¡puedes hacer clic en “Crear”! Ambos métodos (manual y automático) logran lo mismo: un ambiente de trabajo ordenado y profesional.

Paso 6: Escribir el Código de la Aplicación en app.py

Este es el paso principal. Iremos construyendo el código por partes. Pega el siguiente código en tu archivo app.py. Los comentarios explican qué hace cada bloque.

# 1. Importar los módulos necesarios
import streamlit as st
import pandas as pd
import os # Este módulo nos ayudará a verificar si un archivo existe

# --- CONFIGURACIÓN DE LA PÁGINA ---
st.set_page_config(
    page_title="Herramientas de Ingeniería",
    page_icon="🛠️",
    layout="wide"
)


# --- FUNCIONES PARA CADA ESPECIALIDAD ---

def calcular_concreto(largo, ancho, espesor):
    """Calcula el volumen de concreto en metros cúbicos."""
    if largo > 0 and ancho > 0 and espesor > 0:
        volumen = largo * ancho * espesor
        return round(volumen, 2)
    return None

def calcular_riego(area, lamina_riego):
    """Calcula el volumen de agua necesario para riego en metros cúbicos."""
    if area > 0 and lamina_riego > 0:
        # Convertir lámina de mm a metros (1 mm = 0.001 m)
        volumen_agua = area * (lamina_riego / 1000)
        return round(volumen_agua, 2)
    return None

# --- ESTRUCTURA PRINCIPAL DE LA APLICACIÓN ---

# Título principal de la aplicación
st.title('🛠️ Herramienta de Apoyo para Ingeniería V1.0')
st.write("Una aplicación para asistir en tareas de Ingeniería Agrícola, Civil y Agroindustrial.")

# --- BARRA LATERAL (SIDEBAR) PARA NAVEGACIÓN ---
st.sidebar.header('Seleccione su Especialidad')
opcion = st.sidebar.radio(
    'Menú de Navegación',
    ('Página Principal', 'Ingeniería Civil', 'Ingeniería Agrícola', 'Ingeniería Agroindustrial')
)

# --- LÓGICA PARA MOSTRAR LA PÁGINA SELECCIONADA ---

if opcion == 'Página Principal':
    st.header('Bienvenido/a a la Caja de Herramientas Digital')
    st.image('https://images.unsplash.com/photo-1581092921462-692004651e36?q=80&w=2070&auto=format&fit=crop',
             caption='Ingeniería y Tecnología al servicio del desarrollo.')
    st.markdown("""
    Esta aplicación ha sido desarrollada para apoyar a los estudiantes de **Programación de Computadoras con Python**.
    
    **Instrucciones:**
    1.  Utiliza el menú en la barra lateral izquierda para navegar entre las diferentes especialidades.
    2.  Ingresa los datos solicitados en cada sección.
    3.  Observa los resultados de los cálculos o el registro de la información.
    
    ¡Explora y aprende!
    """)

# --- MÓDULO DE INGENIERÍA CIVIL ---
elif opcion == 'Ingeniería Civil':
    st.header('Calculadora de Volumen de Concreto')
    st.subheader('Para una losa rectangular')

    col1, col2, col3 = st.columns(3)
    with col1:
        largo = st.number_input('Largo de la losa (metros)', min_value=0.1, value=5.0, step=0.1)
    with col2:
        ancho = st.number_input('Ancho de la losa (metros)', min_value=0.1, value=4.0, step=0.1)
    with col3:
        espesor = st.number_input('Espesor de la losa (metros)', min_value=0.05, value=0.15, step=0.01)

    if st.button('Calcular Volumen'):
        volumen = calcular_concreto(largo, ancho, espesor)
        if volumen:
            st.success(f'El volumen de concreto requerido es: **{volumen} m³**')
        else:
            st.error('Por favor, ingrese valores válidos y mayores a cero.')

# --- MÓDULO DE INGENIERÍA AGRÍCOLA ---
elif opcion == 'Ingeniería Agrícola':
    st.header('Estimador de Necesidad de Riego')
    st.subheader('Cálculo de volumen de agua')

    area_cultivo = st.number_input('Área del cultivo (metros cuadrados)', min_value=1.0, value=1000.0, step=10.0)
    lamina = st.number_input('Lámina de riego a aplicar (milímetros)', min_value=1.0, value=10.0, step=0.5)

    if st.button('Calcular Agua Requerida'):
        volumen_agua = calcular_riego(area_cultivo, lamina)
        if volumen_agua:
            st.success(f'El volumen de agua requerido es: **{volumen_agua} m³**')
        else:
            st.error('Por favor, ingrese valores válidos y mayores a cero.')

# --- MÓDULO DE INGENIERÍA AGROINDUSTRIAL ---
elif opcion == 'Ingeniería Agroindustrial':
    st.header('Registro de Control de Calidad (pH)')
    st.info("Esta sección guarda los datos en un archivo `control_calidad.csv`.")

    # Usamos un formulario para agrupar los inputs y tener un solo botón de envío
    with st.form(key='quality_form'):
        id_lote = st.text_input('ID del Lote de Producción', 'LOTE-001')
        valor_ph = st.number_input('Valor de pH medido', min_value=0.0, max_value=14.0, value=7.0, step=0.1)
        submit_button = st.form_submit_button(label='Guardar Registro')

    if submit_button:
        # Crear un DataFrame con el nuevo dato
        nuevo_registro = pd.DataFrame({'id_lote': [id_lote], 'ph': [valor_ph]})
        
        # Nombre del archivo donde guardaremos los datos
        archivo_csv = 'control_calidad.csv'
        
        # Lógica para guardar el archivo
        if os.path.exists(archivo_csv):
            # Si el archivo ya existe, leemos los datos y añadimos el nuevo registro
            df_existente = pd.read_csv(archivo_csv)
            df_actualizado = pd.concat([df_existente, nuevo_registro], ignore_index=True)
        else:
            # Si el archivo no existe, el nuevo registro es nuestro DataFrame
            df_actualizado = nuevo_registro
        
        # Guardar el DataFrame actualizado en el archivo CSV
        df_actualizado.to_csv(archivo_csv, index=False)
        st.success(f"Registro para el lote **{id_lote}** guardado con éxito.")

    # Mostrar la tabla con todos los registros guardados
    st.subheader("Historial de Registros")
    if os.path.exists('control_calidad.csv'):
        df_registros = pd.read_csv('control_calidad.csv')
        st.dataframe(df_registros)
    else:
        st.warning("Aún no se ha guardado ningún registro.")

Paso 7: Ejecutar la Aplicación 🚀 y Entender el Reenvío de Puertos

  1. Asegúrate de que tu entorno virtual esté activo (deberías ver (.venv) en la terminal). Si no lo está, vuelve a ejecutar source .venv/bin/activate.

  2. Ejecuta el siguiente comando para poner en marcha tu aplicación Streamlit:

    streamlit run app.py

  3. Observa la notificación de Puerto Reenviado: Después de ejecutar el comando, es muy probable que Codespaces detecte que tu aplicación está escuchando en un puerto específico (Streamlit por defecto usa el puerto 8501, pero a veces puede usar otro como 5018 si el 8501 ya está en uso).

    Te aparecerá una notificación en la esquina inferior derecha de VS Code indicando algo como: “La aplicación que se ejecuta en el puerto XXXX está disponible.”

Ejecutar la Aplicación
Ejecutar la Aplicación

En esta notificación, haz clic en el botón “Open in Browser”. * ¿Qué es el Reenvío de Puertos? En Codespaces, tu aplicación se ejecuta en un servidor remoto. Para que tú puedas verla en tu navegador local, Codespaces crea un “túnel” seguro desde un puerto del servidor remoto (donde está tu aplicación, por ejemplo, el 8501) hasta un puerto de tu máquina local. Esto se llama “reenvío de puertos” (Port Forwarding). Es como si tuvieras la aplicación ejecutándose en tu propia computadora, pero en realidad está en la nube. ¡Es una característica poderosa de los entornos de desarrollo en la nube! 4. ¡Listo! Tu aplicación se abrirá en una nueva pestaña del navegador. Interactúa con ella, prueba las diferentes secciones y verifica que todo funcione.

Paso 8: Guardar tu Trabajo en GitHub

Una vez que la aplicación funcione, es hora de guardar tu código en el repositorio.

  1. Ve al panel de la izquierda y haz clic en el ícono de Source Control (parece una bifurcación con tres puntos).
  2. Verás los archivos que has modificado (app.py, requirements.txt). Haz clic en el + al lado de cada archivo para “prepararlos” para el commit (esto se llama staging).
  3. En el cuadro de texto de arriba, escribe un mensaje descriptivo para tu guardado. Por ejemplo: "Versión inicial de la aplicación de ingeniería".
  4. Haz clic en el botón “Commit”.
  5. Finalmente, haz clic en “Sync Changes” o el botón con la nube para subir (push) tus cambios a tu repositorio de GitHub.

Conceptos Clave a Reforzar con los Alumnos 💡

  • Extensiones del IDE: Muestra cómo las extensiones (como la de Python de Microsoft) añaden funcionalidades al editor que facilitan la programación (resaltado de sintaxis, autocompletado, etc.). Es parte del “paradigma de la programación reactiva” en el sentido de que el IDE reacciona a tu código para darte ayuda inteligente.
  • Entornos Virtuales (.venv): Son carpetas aisladas que contienen una instalación de Python y las librerías específicas para un proyecto. Esto previene el “caos de dependencias” y asegura que el proyecto funcione igual en cualquier máquina. Es la forma profesional de trabajar.
  • requirements.txt y pip: El archivo requirements.txt lista las dependencias y pip es el gestor de paquetes que las instala.
  • Reenvío de Puertos (Port Forwarding): Explica cómo Codespaces “redirige” el tráfico de un puerto en el servidor remoto donde se ejecuta la aplicación a tu navegador local, permitiéndote interactuar con ella como si estuviera en tu propia computadora.
  • Módulos y Librerías (streamlit, pandas): streamlit nos permite crear interfaces web interactivas con poco código Python, y pandas es fundamental para manejar datos en formato tabular.
  • Funciones: La importancia de encapsular la lógica de cálculo en funciones para tener un código más limpio y reutilizable.
  • Estructuras de Control: El uso del if/elif/else para controlar qué se muestra en la aplicación según la interacción del usuario.
  • Persistencia de Datos (I/O) con os: La sección Agroindustrial introduce cómo guardar (.to_csv()) y leer (.read_csv()) datos de un archivo, haciendo que la información no se pierda al cerrar la aplicación. El módulo os ayuda a verificar si un archivo existe antes de intentar leerlo.