Streamlit — Módulo 1

Introducción y entorno de trabajo

@josephinoo

2026-04-13

🎈

Módulo 1

Introducción y Entorno de Trabajo

Bienvenida al módulo 1 del curso de Streamlit. “Hoy vamos a entender qué es Streamlit, cómo instalarlo y, lo más importante, cómo funciona internamente su modelo de ejecución — el scripting flow. Al final de la clase tendrás una app corriendo en tu máquina.”

¿Qué es Streamlit?

La promesa de Streamlit

Python → App Web 🚀

Pregunta retórica para romper el hielo: “¿Cuántos han intentado mostrar un análisis de datos a alguien no técnico? ¿Cómo lo hicieron?” Streamlit resuelve exactamente ese dolor.

¿Qué problema resuelve?

😩

Sin Streamlit

Aprender HTML/CSS/JS

Frameworks web complejos

Backend + Frontend separados

Despliegue complicado

Semanas de trabajo

VS

😍

Con Streamlit

Solo Python

Un solo archivo .py

App lista al instante

Deploy en 1 click

Horas, no semanas

“Streamlit convierte tu script de Python directamente en una app web interactiva. Sin conocer HTML, sin servidores, sin nada extra. Es la herramienta favorita de Data Scientists y analistas para compartir su trabajo.”

Quién usa Streamlit

🔬

Data Scientists

Modelos de ML en producción sin ingeniería web

📊

Analistas

Dashboards interactivos desde pandas y matplotlib

🎓

Estudiantes

Proyectos finales con interfaz profesional

🏢

Empresas

Prototipos rápidos y herramientas internas

🏆 Más de 30 millones de apps creadas · Usado por Google, Airbnb, Uber, NASA

“Streamlit no es un juguete — es usado en producción por empresas Fortune 500. Pero su curva de aprendizaje es tan suave que un principiante puede tener algo corriendo en 5 minutos.”

Instalación y primer arranque

Requisitos previos

✅

Python 3.8+

python --version

✅

pip (viene con Python)

pip --version

✅

Un terminal / VS Code

cualquier editor de texto sirve

💡 Recomendado: Crea un entorno virtual primero → python -m venv venv → source venv/bin/activate

“Antes de instalar Streamlit, necesitamos Python instalado. Si tienen Anaconda o Miniconda también funciona perfecto. Les recomiendo entornos virtuales para mantener los proyectos aislados — buena práctica desde el primer día.”

Instalación — 1 solo comando

Terminal

$ pip install streamlit

Collecting streamlit...

Downloading streamlit-1.x.x...

Installing collected packages: streamlit

✓ Successfully installed streamlit

Luego verificar: streamlit --version → debería mostrar la versión instalada

“Un solo comando. pip descarga Streamlit y todas sus dependencias automáticamente. El proceso tarda 30-60 segundos dependiendo de la conexión. Después verificamos con streamlit --version que todo quedó bien.”

Tu primera app — hello.py

📄 hello.py

import streamlit as st

st.title("¡Hola, Streamlit! 🎈")
st.write("Mi primera app en Python.")

$ streamlit run hello.py

🌐 localhost:8501

¡Hola, Streamlit! 🎈

Mi primera app en Python.

“Eso es todo. 3 líneas de Python y tienes una app web. streamlit run hello.py abre automáticamente el navegador en localhost:8501. Cada vez que guardes el archivo, la app se recarga automáticamente.”

Anatomía del comando streamlit run

streamlit

↓

El programa principal

run

↓

Subcomando: ejecutar una app

hello.py

↓

Tu script de Python

Opciones útiles:

--server.port 8502 — cambiar el puerto

--server.headless true — no abrir el browser

--logger.level debug — ver más logs

“El comando streamlit run es todo lo que necesitas para el 99% de los casos. Streamlit levanta un servidor web local, sirve tu app en el puerto 8501 por defecto, y mantiene un watcher para recargar cuando detecta cambios en el archivo.”

El Scripting Flow — el corazón de Streamlit 🧠

¿Cómo ejecuta Streamlit tu código?

De arriba → abajo, siempre 🔄

“Este es el concepto más importante de todo el módulo. Entender el scripting flow te va a evitar el 80% de los bugs y confusiones que tienen los principiantes. Presta mucha atención aquí.”

El flujo paso a paso

1

Usuario abre la app

Streamlit ejecuta el script completo de arriba a abajo

↓

2

Usuario interactúa (click, slider, input...)

Streamlit vuelve a ejecutar TODO el script desde cero

↓

3

Streamlit compara el resultado

Solo actualiza en pantalla lo que cambió (DOM diffing)

↓

4

Pantalla actualizada ✅

El usuario ve el nuevo resultado al instante

“Cada vez que alguien hace clic en un botón, mueve un slider o escribe en un campo de texto, Streamlit re-ejecuta tu script completo de arriba a abajo. Esto suena ineficiente pero en la práctica es increíblemente simple y predecible. No hay estado oculto, no hay callbacks complejos.”

Demo del Scripting Flow

📄 app.py

import streamlit as st

st.title("Demo")

nombre = st.text_input("Tu nombre")

if nombre:

st.write(f"¡Hola, {nombre}! 👋")

▶

🌐 localhost:8501

Demo

🔄 Ejecuciones del script:

“Escriban algo en el input y observen el log de la derecha — cada keystroke dispara una re-ejecución completa del script. Las líneas se iluminan de arriba a abajo para que vean el flujo. Así es exactamente como funciona Streamlit.”

La regla de oro 🥇

🔄

Cada interacción del usuario = re-ejecución completa del script

✅ El orden del código importa — lo que está arriba se ejecuta primero

✅ Las variables no persisten entre ejecuciones (a menos que uses st.session_state)

✅ El código Python normal funciona exactamente igual — Streamlit solo agrega widgets

“Graben esto en la memoria: cada vez que el usuario hace algo, el script corre de nuevo de arriba a abajo. Las variables se reinician. Los cálculos se repiten. Esto se puede optimizar con @st.cache_data (módulo 3), pero por ahora lo importante es entender el modelo.”

Widgets de Texto y Títulos 📝

st.title() · st.header() · st.subheader()

📄 código

import streamlit as st

st.title("Título Principal")
# Argumento: texto (str)
# Nivel H1 — el más grande

st.header("Sección")
# Argumento: texto (str)
# Nivel H2 — para secciones

st.subheader("Subsección")
# Argumento: texto (str)
# Nivel H3 — para subsecciones

🌐 resultado

Título Principal

Sección

Subsección

Los tres aceptan anchor (para links internos) y help (tooltip). Ej: st.title("App", anchor="inicio")

“title, header y subheader son equivalentes a H1, H2 y H3 en HTML. El argumento principal es siempre el texto. Opcionalmente puedes pasar anchor para crear IDs en el HTML y help para mostrar un tooltip de interrogante.”

st.write() — el comando todo-en-uno

st.write() acepta casi cualquier cosa:

st.write("Texto normal")

Texto normal

st.write("**Negrita** y *cursiva*")

Negrita y cursiva

st.write(42)

42

st.write({"a": 1, "b": 2})

{ "a": 1, "b": 2 }

st.write(df)

📊 tabla interactiva

st.write(figura)

📈 gráfico

“st.write es el navaja suiza de Streamlit. Detecta automáticamente qué tipo de dato le estás pasando y lo renderiza de la forma más apropiada. Texto → markdown. Número → número. DataFrame → tabla. Gráfico de matplotlib → imagen. Es perfecto para prototipado rápido.”

st.text() · st.markdown() · st.caption()

📄 código

st.text("Texto plano sin formato.")
# Argumento: body (str)
# Sin markdown — literal

st.markdown("**Negrita**, *cursiva*, `código`")
# Argumento: body (str)
# unsafe_allow_html=True → HTML directo

st.caption("Nota al pie o aclaración")
# Argumento: body (str)
# Texto pequeño y gris — ideal para
# fuentes, notas y aclaraciones

🌐 resultado

Texto plano sin formato.

Negrita, cursiva, código

Nota al pie o aclaración

“st.text es para texto sin procesar, literalmente lo que escribes. st.markdown es el más poderoso — acepta Markdown completo e incluso HTML si activas unsafe_allow_html. st.caption es ideal para footnotes, créditos o aclaraciones secundarias — sale en gris y pequeño.”

st.code() · st.divider()

📄 código

st.code("""
def saludar(nombre):
    return f"Hola, {nombre}!"
""", language="python")
# language: "python","sql","bash","json"...
# line_numbers=True → muestra nros de línea

st.divider()
# Sin argumentos
# Solo dibuja una línea separadora
# Equivalente a st.markdown("---")

🌐 resultado

def saludar(nombre):
    return f"Hola, {nombre}!"

“st.code muestra bloques de código con syntax highlighting. El argumento language acepta cualquier lenguaje que soporte Prism.js. Con line_numbers=True agrega números de línea — muy útil para tutoriales. st.divider es simplemente una línea horizontal para separar secciones visualmente.”

Inputs Simples — El Usuario Habla 🎛️

st.button()

clicked = st.button(
    label="Haz clic aquí",  # texto del botón (str) *obligatorio*
    key="mi_boton",         # ID único (str) — necesario si hay varios
    help="Tooltip al hover",# texto de ayuda (str)
    type="primary",         # "primary" (azul) o "secondary" (gris)
    disabled=False,         # deshabilitar (bool)
    use_container_width=True# ancho completo (bool)
)

if clicked:
    st.write("¡Botón presionado! 🎉")

⚠️ Comportamiento clave:

Devuelve True solo en la ejecución inmediatamente posterior al click

En la siguiente re-ejecución vuelve a False

Para estado persistente → st.session_state

“st.button devuelve True solo una vez — en la re-ejecución del script inmediatamente después del click. Si el usuario no vuelve a hacer clic, en la próxima ejecución devuelve False. Esto confunde a muchos principiantes. Es por el scripting flow: cada ejecución es un nuevo mundo.”

st.checkbox() · st.text_input()

st.checkbox()

activo = st.checkbox(
    label="Activar opción",
    value=False,    # estado inicial (bool)
    key="check1",   # ID único
    help="Ayuda",   # tooltip
    disabled=False  # deshabilitar
)
# Devuelve True/False

Activar opción

st.text_input()

texto = st.text_input(
    label="Escribe algo",
    value="",         # valor inicial (str)
    max_chars=100,    # máx caracteres (int)
    key="input1",     # ID único
    type="default",   # "default" o "password"
    placeholder="..."  # texto fantasma
)
# Devuelve el string escrito

“checkbox devuelve True o False. Es perfecto para mostrar/ocultar secciones condicionales con if. text_input devuelve el string que escribió el usuario. El type='password' oculta los caracteres — muy útil para tokens y contraseñas.”

st.number_input() · st.slider()

st.number_input()

num = st.number_input(
    label="Edad",
    min_value=0,    # mínimo (int/float)
    max_value=120,  # máximo (int/float)
    value=25,       # valor inicial
    step=1,         # incremento
    format="%d",    # formato de display
    key="num1"
)
# Devuelve int o float

Resultado: 25

25

st.slider()

val = st.slider(
    label="Temperatura",
    min_value=0,    # mínimo
    max_value=100,  # máximo
    value=50,       # inicial (o tupla para rango)
    step=1,         # paso
    format="%d°C",  # formato del label
    key="slider1"
)
# value=(20,80) → slider de rango

Valor: 50°C

“number_input es ideal para valores exactos con flechas de incremento. slider es mejor para rangos visuales donde la precisión exacta no es crítica. El slider puede retornar una tupla si le das value=(20,80) para crear un selector de rango — muy útil para filtros de fecha o precio.”

Feedback Visual — La App Habla 💬

Los mensajes de estado

st.success("Operación exitosa ✅")

✅ Operación exitosa

st.error("Algo salió mal ❌")

❌ Algo salió mal

st.warning("Cuidado ⚠️")

⚠️ Cuidado con esto

st.info("Para tu información 💡")

💡 Para tu información

Todos comparten los mismos argumentos:

body (str) — el mensaje  ·  icon (str) — emoji o None  ·  expanded (bool) — colapsable si es largo

“Los cuatro mensajes de estado tienen la misma firma de función. El único argumento obligatorio es el texto. El color y el ícono izquierdo se determinan automáticamente según el tipo. Puedes pasar icon para personalizar el emoji que aparece a la izquierda.”

st.balloons() · st.spinner()

🎈 st.balloons()

if st.button("Celebrar"):
    st.balloons()
# Sin argumentos
# Lanza una animación de globos
# Perfecto para onboarding y logros

⏳ st.spinner()

with st.spinner("Procesando..."):
    time.sleep(2)      # simulación
    resultado = calcular()
# text (str): mensaje del spinner
# Se usa como context manager (with)
# Mientras dura el bloque → spinner activo

“st.balloons es una de las cosas más divertidas de Streamlit — lanza globos animados por toda la pantalla. Úsenlo para celebrar el primer formulario completado o un modelo entrenado exitosamente. st.spinner es crítico para operaciones lentas — muestra un indicador de carga mientras el bloque with está ejecutándose.”

Layout Básico — Organizar la App 🏗️

st.columns()

col1, col2, col3 = st.columns(3)
# Argumento 1: n_columns (int) o lista de pesos
# st.columns([2, 1, 1]) → primera columna más ancha
# gap="small"/"medium"/"large" — espacio entre cols

with col1:
    st.metric("Ventas", "$ 1,234")

with col2:
    st.metric("Clientes", "89")

with col3:
    st.metric("Conversión", "7.2%")

🌐 resultado

Ventas

$ 1,234

Clientes

89

Conversión

7.2%

“st.columns es uno de los widgets más usados en Streamlit. Divide el ancho disponible en columnas y te da un objeto para cada una. Puedes usar with col1: como context manager, o guardar los widgets directamente: col1.write('texto'). Los pesos proporcionales como [2,1,1] son muy útiles para layouts asimétricos.”

st.expander() · st.container()

st.expander()

with st.expander("Ver detalles"):
    # label: texto del header (str)
    # expanded=False: cerrado por defecto
    # Ideal para: configs, logs,
    # información secundaria
    st.write("Contenido oculto...")
    st.code("print('dentro!')")

▶ Ver detalles

Contenido oculto...

st.container()

with st.container():
    # Sin argumentos obligatorios
    # border=True → borde visible
    # height=300 → altura fija + scroll
    # Agrupa widgets lógicamente
    st.write("Elemento 1")
    st.write("Elemento 2")
    # Útil para agrupar, aplicar
    # estilos o controlar layout

Elemento 1

Elemento 2

“st.expander es perfecto para contenido secundario que no quieres mostrar siempre — configuraciones avanzadas, logs, explicaciones adicionales. El usuario decide si lo abre. st.container con border=True es nuevo en versiones recientes y permite crear tarjetas visuales sin CSS adicional.”

Media — Imágenes y Video 🖼️

st.image() · st.video()

📷 st.image()

st.image(
  image,                 # path, URL, PIL, numpy
  caption="Texto",       # pie de imagen (str)
  width=300,             # ancho en px
  use_column_width=True, # 100% ancho
  clamp=False,           # clamp de píxeles
  channels="RGB",        # "RGB" o "BGR"
  output_format="auto"   # "JPEG","PNG","auto"
)

🏔️

300 × 200 px

caption: "Mi foto"

🎬 st.video()

st.video(
  data,                # URL, path local, bytes
  format="video/mp4", # MIME type
  start_time=0,       # segundo de inicio
  subtitles=None      # subs VTT o dict
)
# ✓ URLs de YouTube
# ✓ Archivos .mp4 / .webm
# ✓ bytes en memoria

▶

0:00 / 0:42

🔊

video.mp4

“st.image es muy flexible — acepta URLs de internet, rutas locales, objetos PIL para imágenes procesadas con Python, y arrays de numpy para visualizar datos de imágenes directamente. st.video también acepta URLs de YouTube directamente, no solo archivos locales.”

El Scripting Flow en acción — Todo junto 🎯

App completa de ejemplo

📄 app_completa.py

import streamlit as st

st.title("🎛️ Mi App de Demostración")
st.divider()

# Sección de inputs
col1, col2 = st.columns(2)

with col1:
    st.header("Configuración")
    nombre = st.text_input("Tu nombre", placeholder="Ej: Ana")
    edad = st.slider("Edad", 1, 100, 25)
    activo = st.checkbox("Modo avanzado")

with col2:
    st.header("Controles")
    nivel = st.number_input("Nivel", 1, 10, 1)
    if st.button("Generar", type="primary"):
        st.balloons()

st.divider()

# Sección de output — reacciona a los inputs
if nombre:
    st.success(f"¡Hola {nombre}! Tienes {edad} años.")
    if activo:
        with st.expander("Detalles avanzados"):
            st.info(f"Nivel configurado: {nivel}")
            st.code(f"usuario = dict(nombre='{nombre}', edad={edad})")
else:
    st.warning("Ingresa tu nombre para comenzar.")

🌐 resultado

🎛️ Mi App de Demostración

Tu nombre

Edad

Valor: 25

Nivel

Nivel: 1

“Este es un ejemplo realista que combina todo lo que vimos. Noten cómo el output al final del script reacciona en tiempo real a los inputs que están arriba. Eso es el scripting flow en acción — Python de arriba a abajo, reactive sin frameworks complejos.”

¿Por qué el orden importa?

❌ Orden incorrecto

st.write(f"Hola {nombre}")  # ← ERROR
# nombre no existe todavía!

nombre = st.text_input("Nombre")

NameError: name 'nombre' is not defined

✅ Orden correcto

nombre = st.text_input("Nombre")
# ↑ primero definimos el widget

if nombre:
    st.write(f"Hola {nombre}")  # ✅

Funciona perfectamente 🎉

El scripting flow garantiza que el código se lee como un libro: de arriba a abajo. Primero defines, luego usas.

“Esta es la trampa más común en Streamlit. Como el script corre de arriba a abajo, no puedes usar una variable antes de declararla. A diferencia de frameworks con callbacks o estado reactivo, en Streamlit el flujo es completamente lineal y predecible.”

Resumen del Módulo 1 🏁

Todo lo que aprendiste hoy

🐍

01

Streamlit = Python → Web App

Sin HTML, sin JS, sin frameworks

💻

02

pip install + streamlit run

Dos comandos para arrancar

🔄

03

Scripting Flow

Cada interacción = re-ejecución completa

📝

04

Texto y Títulos

title, header, write, markdown, code...

🎛️

05

Inputs Simples

button, checkbox, text_input, slider...

🏗️

06

Layout y Feedback

columns, expander, success, error...

“En este módulo cubrimos los fundamentos completos. La próxima clase entramos en gestión de estado con session_state y el sistema de cache para apps más eficientes.”

Tu producto parcial ✔️

App Base Ejecutándose

import streamlit as st

st.title("Mi Primera App 🎈")
st.write("¡Está funcionando!")

nombre = st.text_input("¿Cómo te llamas?")
edad = st.slider("¿Cuántos años tienes?", 1, 100, 25)

if nombre:
    st.success(f"¡Bienvenido/a, {nombre}! Tienes {edad} años. 🎉")
    st.balloons()
else:
    st.info("Escribe tu nombre arriba 👆")

$ streamlit run mi_app.py

✅ Módulo 1 Completo

“Este es el entregable del módulo 1. Una app corriendo en tu máquina con widgets reales que responden al usuario. Parece simple, pero entender el scripting flow que hay detrás es la base de todo lo que viene.”

¡A construir! 🚀

Módulo 1 — Completado

Preguntas antes de cerrar 🙋

“Tiempo libre para que pongan en práctica lo que vimos. El ejercicio mínimo: instalar Streamlit y hacer correr el script de la slide anterior. Si quieren ir más lejos, agreguen más widgets y experimenten con el scripting flow.”