¡Llegamos a la recta final del semestre! Esta es la semana donde ocurre la verdadera magia. En la Semana 15, Colab dejará de ser el entorno principal de desarrollo y se convertirá en una “guía de taller” para que los estudiantes construyan, integren y depuren sus proyectos finales directamente en sus computadores personales usando VSCode.
El mayor desafío técnico de esta semana es lograr que los gráficos
(que en Colab aparecían mágicamente con plt.show()) se
integren dentro de la página web de Streamlit.
Aquí tienes el cuaderno de la Semana 15, estructurado como un Taller Práctico de Integración:
# SEMANA 15: Taller de Integración y Resolución Gráfica en la Web
**Asignatura:** Programación de Computadores con Python
**Programas:** Ingeniería Agrícola, Civil y Agroindustrial
¡Bienvenidos al Taller de Proyecto Final! Esta semana marca la transición definitiva: dejaremos la comodidad de Google Colab para trabajar como verdaderos desarrolladores de software en **Visual Studio Code (VSCode)**.
El objetivo de esta semana es tomar las funciones de cálculo (backend) y la interfaz de usuario (frontend) que estructuramos la semana pasada, y agregarles el componente visual más importante para un ingeniero: **Las Gráficas**. Aprenderemos a capturar gráficos de Matplotlib y SymPy para incrustarlos en nuestra aplicación web.
**Objetivos del Taller:**
* Trasladar el código base desde Colab hacia un entorno de desarrollo local (VSCode).
* Comprender el uso de la función `st.pyplot()` para renderizar gráficos en la web.
* Depurar errores comunes de integración (Debugging).
* Preparar la versión final del código (Release Candidate) para su despliegue en la Semana 16.
## SESIÓN 1: Traslado al Entorno Profesional (VSCode)
A partir de este momento, **debes abrir VSCode en tu computador**. Colab solo te servirá hoy como manual de instrucciones.
**Pasos para iniciar el taller:**
1. Abre tu carpeta del proyecto final en VSCode.
2. Asegúrate de tener tu archivo `app.py` (con la estructura de la Semana 14) y tu archivo `requirements.txt`.
3. Abre una Nueva Terminal en VSCode y ejecuta tu aplicación localmente con el comando: `streamlit run app.py`.
4. Mantén la ventana de tu navegador abierta a un lado, y VSCode al otro. ¡Cada vez que guardes el código (`Ctrl + S`), la página web se actualizará!
## SESIÓN 2: El Reto de los Gráficos en la Web
En Python tradicional, usamos `plt.show()` para abrir una ventana emergente con nuestro gráfico. En Streamlit, las ventanas emergentes no existen; todo debe vivir dentro de la página web. Para solucionar esto, usamos la función **`st.pyplot(figura)`**.
A continuación, busca la plantilla de tu especialidad. **No ejecutes este código en Colab**, cópialo y adáptalo dentro de la sección de "ACCIÓN Y RESULTADOS" de tu archivo `app.py` en VSCode.
### 🛠️ RUTA A: Ingeniería Civil (Gráficos de SymPy a Streamlit)
SymPy genera los diagramas de cortante y momento de forma automática, pero necesitamos "atrapar" esa figura para enviarla a Streamlit.
# ====================================================================
# CÓDIGO PARA VSCODE (Ruta A: Civil) - Agregar en la sección de Acción
# ====================================================================
# Asegúrate de importar pyplot al inicio de tu app.py: import matplotlib.pyplot as plt
if st.button("Calcular y Graficar"):
# 1. Llamamos a nuestra función (que ahora también debe devolver la viga completa)
reaccion_A, reaccion_B, mi_viga = resolver_viga_simple(L, q)
st.success("Reacciones calculadas exitosamente.")
# 2. Mostramos las gráficas en Streamlit
st.subheader("Diagrama de Fuerza Cortante (V)")
# Atrapamos el gráfico de SymPy sin mostrarlo inmediatamente (show=False)
grafico_V = mi_viga.plot_shear_force(show=False)
# Extraemos la "figura" de backend de Matplotlib
fig_V = grafico_V._backend.fig
# La enviamos a la interfaz web
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)
### ☀️ RUTA B: Ingeniería Agrícola / Agroindustrial (Curva de Secado)
Vamos a generar una gráfica teórica de cómo disminuye la humedad del producto a lo largo del tiempo, asumiendo una tasa de secado constante para simplificar el modelo visual.
# ==========================================================================
# CÓDIGO PARA VSCODE (Ruta B: Agro/Agrícola) - Agregar en la sección de Acción
# ==========================================================================
# Asegúrate de importar matplotlib e numpy al inicio:
# import matplotlib.pyplot as plt
# import numpy as np
if st.button("Ejecutar Simulación y Graficar"):
# (Aquí va tu código de balance de masa y energía de la Semana 14...)
st.divider()
st.subheader("📉 Curva de Secado Teórica Estimada")
# 1. Creamos la figura de Matplotlib explícitamente
fig, ax = plt.subplots()
# 2. Generamos datos simulados para la gráfica (Ejemplo: 10 horas de secado)
horas = np.linspace(0, 10, 11)
# Simulamos una caída lineal de la humedad (solo para fines de visualización del prototipo)
humedades_simuladas = np.linspace(hum_inicial, hum_final, 11)
# 3. Dibujamos en la gráfica
ax.plot(horas, humedades_simuladas, marker='o', color='#FF4B4B', linewidth=2)
ax.set_title(f"Reducción de humedad de {hum_inicial}% a {hum_final}%")
ax.set_xlabel("Tiempo estimado (Horas)")
ax.set_ylabel("Humedad (% wb)")
ax.grid(True, linestyle='--', alpha=0.7)
# 4. Enviamos la figura terminada a Streamlit
st.pyplot(fig)
---
### Interacción con el Tutor IA (Modo Debugging) 🤖
En esta etapa de taller, es completamente normal que aparezcan errores en rojo en tu pantalla (Tracebacks). Tu asistente de IA es el mejor aliado para resolverlos.
> **PROMPT DE DEPURACIÓN (Úsalo en tu ChatBot cuando tengas un error):**
> Actúa como un Ingeniero de Software Senior revisando mi código. Estoy programando una aplicación en Streamlit y me salió el siguiente error en la terminal:
> [PEGA AQUÍ EL TEXTO DEL ERROR QUE TE MUESTRA VSCODE O STREAMLIT]
> 1) Explícame en términos muy sencillos qué significa este error.
> 2) Dime en qué línea de mi código es más probable que esté fallando.
> 3) Dame la solución exacta para corregirlo.
---
## ACTIVIDAD FINAL: Cierre del Taller
Reflexiona sobre los obstáculos técnicos que superaste hoy:
> **PROMPT GLOBAL DE CIERRE:**
> Actúa como mentor de proyectos de ingeniería de software. Elabora un RESUMEN BREVE que cumpla estas condiciones:
> 1. Debe caber en UNA SOLA HOJA escrita a mano.
> 2. Lenguaje claro, enfocándose en la resolución de problemas.
> 3. Debe incluir: Por qué es diferente graficar en la web (Streamlit) en comparación con una consola normal, la utilidad de la función `st.pyplot(fig)`, y la importancia del proceso de "depuración" (debugging) antes de entregar un proyecto final.
> 4. Pensado para que yo lo escriba comprendiendo lo esencial.
> Al final agrega una frase felicitándome por tener casi lista mi primera aplicación web profesional.
**Instrucción para el estudiante:** En tu hoja, anota los tres comandos de Git que debes ejecutar en la terminal de VSCode al terminar la clase de hoy para guardar todo este avance de gráficos en tu repositorio de GitHub, dejándolo listo para la sustentación de la próxima semana.
¡El taller está servido! Con esta guía, los estudiantes superarán el obstáculo más común de Streamlit (renderizar gráficos que vienen de otras librerías científicas) y tendrán un producto altamente visual y funcional.
Como futuros ingenieros formados en la Universidad de Sucre, lograr dominar este flujo de trabajo completo los pondrá en una posición de ventaja enorme para sus tesis de grado y su vida laboral.
Ya solo nos queda la Semana 16 (Sustentación Final), que suele ser más logística y de celebración.