Llegamos a un punto estratégico del semestre. En la Semana 14, las rutas de Ingeniería Civil y Agroindustrial vuelven a unirse bajo una misma metodología: aprender a conectar sus “motores de cálculo” (el backend matemático que desarrollaron) con una interfaz visual amigable (el frontend en Streamlit). Este es el banderazo de salida para la construcción de su Proyecto Final integrador.

A continuación, presento la estructura de la guía para esta semana, diseñada para que cada estudiante genere la plantilla base de su aplicación.

Guía Semanal 14: Arquitectura del Proyecto Final (Integración Web)

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

1. Introducción y Propósito

Durante las últimas dos semanas construimos el “motor” de nuestras aplicaciones: funciones para calcular el secado de alimentos y algoritmos simbólicos para resolver vigas isostáticas. Sin embargo, un motor no sirve de mucho sin un volante y un tablero de control.

El propósito de esta semana es aprender la Arquitectura de Software básica para integrar nuestra lógica matemática (Backend) con una interfaz gráfica web (Frontend) usando Streamlit. Esta arquitectura garantizará que el código del proyecto final sea ordenado, profesional y escalable.

2. Resultados de Aprendizaje

  • Comprender la separación estricta entre la lógica de cálculo (funciones) y la interfaz de usuario (diseño web).
  • Estructurar un archivo de Python en bloques lógicos: Importaciones, Backend, Frontend y Ejecución.
  • Implementar una barra lateral (st.sidebar) para organizar las entradas de datos del usuario sin saturar la pantalla principal.
  • Diseñar un flujo de trabajo de tres pasos: Entradas de usuario \(\rightarrow\) Ejecución de funciones \(\rightarrow\) Despliegue de resultados con componentes visuales avanzados (st.metric, st.columns).

3. Hoja de Ruta de la Sesión

Parte A: La Anatomía de una Aplicación Profesional

Se debe explicar a los estudiantes que una aplicación web bien diseñada nunca mezcla todo el código de forma desordenada. Se rige por 5 bloques fundamentales: 1. Importación de Librerías: Las herramientas necesarias (streamlit, sympy, etc.). 2. El “Cerebro” (Funciones de Cálculo): Aquí residen las funciones creadas en las semanas 12 y 13. La regla de oro es que el cerebro no imprime en pantalla, solo recibe variables, procesa y retorna resultados (return). 3. El “Rostro” (Interfaz Streamlit): Títulos, descripciones y configuración de la página web. 4. El Panel de Control (Entradas): Controles interactivos reubicados en un panel lateral (st.sidebar.number_input) para mayor limpieza visual. 5. El Botón de Acción y Salidas: El disparador (st.button) que toma los datos del panel, invoca al cerebro, y muestra los resultados de forma elegante.

Parte B: Plantillas Base según la Especialidad

En Colab (o VSCode), cada estudiante estructurará el esqueleto de su aplicación específica.

Para Ingeniería Civil (Ruta A) - app_civil.py: Se integra la función resolver_viga_simple() que utiliza sympy y Beam. La interfaz captura la longitud y la carga distribuida, y al presionar el botón, la aplicación despliega las reacciones en los apoyos A y B utilizando el componente visual st.metric organizado en dos columnas (st.columns(2)).

Para Ingeniería Agrícola/Agroindustrial (Ruta B) - app_agro.py: Se integran las funciones agua_a_evaporar() y calcular_caudal(). El panel lateral captura la masa de producto, humedades y temperaturas (ambiente y del colector). Al ejecutar, el sistema valida lógicamente las temperaturas y, si son correctas, muestra un tablero con el agua a evaporar, la energía requerida y el volumen de aire necesario.

Parte C: Prueba de Integración Local

Al igual que en semanas pasadas, los estudiantes utilizarán localtunnel (o la terminal de VSCode directamente) para lanzar su aplicación base, interactuar con la barra lateral y confirmar que los datos viajan correctamente desde los deslizadores/cajas de texto hasta las funciones matemáticas, y regresan como resultados a la pantalla principal.

4. Actividades de Aprendizaje Guiado

Interacción con el Tutor IA

La arquitectura de software y la experiencia de usuario (UX) van de la mano. Los estudiantes utilizarán este prompt para planificar las mejoras visuales de su proyecto:

“Actúa como un Diseñador de Interfaces de Usuario (UI/UX) especializado en software de ingeniería. Estoy armando la estructura en Streamlit de mi proyecto final universitario. 1) Explícame por qué es una buena práctica de programación separar las funciones matemáticas complejas (backend) de los comandos visuales (frontend). 2) En el código usamos st.sidebar para poner los controles a la izquierda. ¿Qué ventajas tiene esto para la experiencia del usuario que usará mi calculadora? 3) Mi aplicación mostrará varios resultados numéricos clave. ¿Qué elementos visuales de Streamlit me recomiendas para que los resultados no se vean como simple texto aburrido? (Háblame de st.metric o st.columns). Después hazme 2 preguntas sobre cómo pienso organizar visualmente mi proyecto final.”

5. Resumen Cognitivo (Para escritura a mano)

El esquema final para el cierre cognitivo debe enfocarse en el diseño estructural: 1. Fundamento de Arquitectura: El concepto de separación entre Frontend (lo que ve el usuario) y Backend (la lógica matemática que corre en el servidor). 2. Organización de Interfaz: Para qué sirve la barra lateral (st.sidebar) y por qué mejora la usabilidad de una herramienta de ingeniería. 3. Flujo de Ejecución: Explicación del ciclo: El usuario ingresa datos \(\rightarrow\) presiona el botón \(\rightarrow\) Streamlit envía datos a la función \(\rightarrow\) la función retorna el cálculo \(\rightarrow\) Streamlit muestra la métrica. 4. Reto de Diseño (Reverso de la hoja): El estudiante debe actuar como arquitecto de software y dibujar el Wireframe (boceto visual final) de cómo quiere que se vea su aplicación en la sustentación de la Semana 16. Debe señalar dónde irán los controles de entrada, cómo se organizarán las tarjetas de resultados numéricos, y dejar el espacio preparado para las gráficas que se integrarán la próxima semana.

El camino queda despejado para la Semana 15, la cual sugiero que se aborde como un “Taller de Integración Gráfica”. En esa sesión, el objetivo será tomar las librerías gráficas (los diagramas de sympy para Civil y las curvas de matplotlib/pandas para Agro) y aprender a incrustarlas dentro de este esqueleto web usando st.pyplot(), dejando el proyecto listo para su despliegue final en la Semana 16.