Perfecto. La Semana 15 marca el momento cumbre del curso. Aquí es donde los estudiantes abandonan su zona de confort en la nube (Google Colab) y asumen su rol como desarrolladores en su propio equipo (VSCode), integrando el componente más complejo y vistoso de sus proyectos: la visualización gráfica.

A continuación, presento la estructura del Taller de Integración Gráfica.

Guía Semanal 15: Taller de Integración y Resolución Gráfica en la Web

Asignatura: Programación de Computadores / Fundamentos de Programación Programas: Ingeniería Agrícola, Civil y Agroindustrial

1. Introducción y Propósito

¡Bienvenidos al Taller de Proyecto Final! Esta semana marca la transición definitiva: dejaremos la comodidad de Google Colab para trabajar como desarrolladores de software en Visual Studio Code (VSCode).

El objetivo de este taller es tomar el código base que estructuramos la semana pasada, y agregarle el componente visual más importante para un ingeniero: Las Gráficas. El reto técnico será atrapar las figuras que generan nuestras librerías científicas (sympy o matplotlib) e incrustarlas dentro de la página web de Streamlit.

2. Resultados de Aprendizaje

  • Trasladar el código base desde la nube hacia un entorno de desarrollo local (VSCode).
  • Integrar figuras de Matplotlib y SymPy en Streamlit utilizando el comando st.pyplot().
  • Depurar errores de integración de interfaz (Debugging).
  • Preparar el Release Candidate (versión final candidata) del código para su despliegue público en la Semana 16.

3. Hoja de Ruta de la Sesión

Parte A: El Entorno Local (VSCode)

En esta sesión, Colab funciona únicamente como manual de lectura. Los estudiantes deben abrir VSCode en sus computadores. 1. Abrir la carpeta del proyecto final donde residen app_civil.py o app_agro.py. 2. Verificar la existencia del archivo requirements.txt. 3. Ejecutar la aplicación en la terminal local mediante streamlit run app_nombre.py. 4. Organizar la pantalla dividida (VSCode a un lado, el navegador web al otro) para trabajar bajo el esquema de “guardar y visualizar” (Hot Reloading).

Parte B: El Reto de los Gráficos en la Web

Se debe explicar que la instrucción clásica plt.show() no funciona en Streamlit, porque Streamlit no puede abrir “ventanas emergentes” en el navegador; debe incrustar la imagen en el documento HTML. La solución es capturar la figura y enviarla a la interfaz usando st.pyplot(figura).

A continuación, los bloques lógicos de integración gráfica para cada ruta, los cuales deben ser insertados dentro del bloque condicional del botón de ejecución (if st.button(...):):

Para Ingeniería Civil (Ruta A) - Extraer diagramas de SymPy:

# (Código a insertar después del cálculo de reacciones)
import matplotlib.pyplot as plt

st.subheader("Diagrama de Fuerza Cortante (V)")
# Atrapamos el gráfico sin mostrarlo inmediatamente
grafico_V = mi_viga.plot_shear_force(show=False)
# Extraemos la figura estructural (backend)
fig_V = grafico_V._backend.fig
st.pyplot(fig_V)

st.subheader("Diagrama de Momento Flector (M)")
grafico_M = mi_viga.plot_bending_moment(show=False)
fig_M = grafico_M._backend.fig
st.pyplot(fig_M)

Para Ing. Agrícola / Agroindustrial (Ruta B) - Curva Teórica de Secado:

# (Código a insertar después del balance de energía)
import matplotlib.pyplot as plt
import numpy as np

st.divider()
st.subheader("📉 Curva de Secado Teórica Estimada")

# Creamos la figura y los ejes
fig, ax = plt.subplots()

# Datos simulados (Asumiendo 10 horas de proceso)
horas = np.linspace(0, 10, 11)
humedades_simuladas = np.linspace(hum_inicial, hum_final, 11)

# Dibujamos en el eje
ax.plot(horas, humedades_simuladas, marker='o', color='#FF4B4B', linewidth=2)
ax.set_title(f"Reducción teórica de {hum_inicial}% a {hum_final}%")
ax.set_xlabel("Tiempo estimado (Horas)")
ax.set_ylabel("Humedad (% wb)")
ax.grid(True, linestyle='--', alpha=0.7)

# Enviamos la figura finalizada a Streamlit
st.pyplot(fig)

Parte C: El Proceso de Guardado en la Nube

Una vez que las gráficas aparezcan exitosamente en el entorno local, los estudiantes deben congelar esta versión del código para prepararla para la sustentación. En la terminal de VSCode (deteniendo Streamlit con Ctrl + C), ejecutarán la secuencia de Git: 1. git add . 2. git commit -m "Integración final de gráficas en el proyecto" 3. git push

4. Actividades de Aprendizaje Guiado

Interacción con el Tutor IA (Modo Debugging)

La integración de múltiples librerías suele generar alertas rojas. Los estudiantes aprenderán a usar la IA no para hacer código, sino para arreglarlo:

“Actúa como un Ingeniero de Software Senior revisando mi código. Estoy programando mi proyecto final en Streamlit y me salió el siguiente error en la terminal o en la página web: [PEGA AQUÍ EL TEXTO DEL ERROR]. 1) Explícame en términos muy sencillos qué significa este error. 2) Dime en qué parte de mi arquitectura (backend, frontend, importaciones) es más probable que esté fallando. 3) Dame la solución numerada paso a paso para corregirlo.”

5. Resumen Cognitivo (Para escritura a mano)

El esquema final para el cierre del taller debe consolidar la técnica de visualización web: 1. El Problema Web: Explicar por qué el comando plt.show() de Matplotlib no es compatible con el despliegue en aplicaciones web. 2. La Solución Streamlit: Qué hace la instrucción st.pyplot() y por qué necesita recibir un objeto tipo “figura” como parámetro. 3. Proceso de Debugging: Definir brevemente qué es depurar código y por qué es una habilidad indispensable en ingeniería. 4. Reflexión Final (Reverso de la hoja): Escribir una frase de celebración por haber integrado con éxito el conocimiento matemático, de datos y web en un solo producto funcional, listo para ser desplegado ante un jurado.

Con esta guía, hemos cerrado el ciclo de desarrollo. La Semana 16 consistirá en la sustentación de los estudiantes, donde el único paso técnico pendiente será conectar el repositorio finalizado de GitHub a Streamlit Community Cloud para obtener sus URLs definitivas y presentar su producto final ante ti.