Guía Semanal 6: De la Lógica a la Web con Streamlit

Asignatura: Programación de Computadores / Fundamentos de Programación

Temática Principal: Creación de Aplicaciones Web para Ingeniería

1. Introducción y Propósito

El objetivo de esta semana es transformar los algoritmos desarrollados en semanas anteriores en herramientas tangibles y profesionales. Los estudiantes dejarán de interactuar con la “consola negra” para crear interfaces gráficas (GUI) que cualquier usuario pueda utilizar.

2. Resultados de Aprendizaje

  • Diferenciar entre la ejecución de scripts de consola y aplicaciones web interactivas.
  • Implementar la librería Streamlit para capturar datos (number_input) y mostrar resultados (success, balloons).
  • Utilizar comandos mágicos de Google Colab (%%writefile) para la gestión de archivos de despliegue.

3. Hoja de Ruta de la Sesión

Parte A: Instalación y Mapeo de Conceptos

Se debe explicar a los estudiantes que Streamlit actúa como un traductor entre Python y la web. El “mapeo” fundamental que deben dominar es: * Entrada: De input() a st.number_input(). * Salida: De print() a st.write() o st.success(). * Acción: Incorporación de st.button() para disparar cálculos.

Parte B: Aplicación Práctica (Cálculo de Tanques)

Los estudiantes desarrollarán un script llamado app.py que calcule el volumen de un cilindro, aplicando este concepto a: * Ruta Civil/Agrícola: Almacenamiento de agua o silos. * Ruta Agroindustrial: Tanques de mezcla o reactores.

Parte C: El “Túnel” de Visualización

Debido a que trabajamos en Google Colab, se utilizará localtunnel. Es crucial que los estudiantes sigan el proceso de: 1. Obtener la IP (contraseña). 2. Ejecutar el túnel. 3. Acceder al enlace externo para ver su aplicación en vivo.

4. Actividades de Aprendizaje Guiado

Interacción con el Tutor IA

Los estudiantes deben ejecutar el siguiente prompt en su chat de apoyo para profundizar en la arquitectura de la web: > “Actúa como tutor experto en Python y Streamlit. Explica la diferencia entre una aplicación de consola y una interfaz gráfica. Luego, propón una idea sencilla de app web para el control de calidad en agroindustria o diseño civil que use st.number_input y hazme 3 preguntas de comprensión.”

Reto de Diseño (Dibujo Técnico)

En el reverso de su hoja de resumen, el estudiante debe: * Dibujar el boceto de una interfaz para calcular el caudal de un canal (Ruta Civil) o la tasa de secado (Ruta Agroindustrial). * Identificar al lado de cada dibujo qué comando de Streamlit usaría para ese componente (ej: un slider para la pendiente o un botón para el cálculo).

5. Resumen Cognitivo (Para escritura a mano)

El resumen de esta semana debe centrarse en: 1. ¿Qué es Streamlit? (Framework para apps de ingeniería). 2. Arquitectura: El uso de %%writefile para crear el archivo y el puerto 8501. 3. Componentes: Uso de títulos, divisores y elementos de entrada/salida. 4. Reflexión: Por qué la accesibilidad del código mejora el impacto de una solución de ingeniería.