GeneralProgramaciónServidoresTecnologíaWeb

Creando Aplicaciones Web Interactivas con Streamlit y Python

La creación de aplicaciones web solía ser una tarea compleja, requiriendo un conocimiento profundo de lenguajes de programación del lado del servidor, como Java, PHP o Ruby, y tecnologías frontend, como HTML, CSS y JavaScript. Sin embargo, gracias a Streamlit, una biblioteca de Python de código abierto, ahora puedes crear aplicaciones web interactivas de manera rápida y sencilla.

En este artículo, exploraremos qué es Streamlit y cómo puedes utilizarlo para desarrollar tus propias aplicaciones web sin esfuerzo.

¿Qué es Streamlit?

Streamlit es una biblioteca de Python que te permite crear aplicaciones web de forma simple y eficiente. Fue diseñada para científicos de datos, ingenieros y desarrolladores que desean compartir sus análisis, visualizaciones y prototipos de manera efectiva en la web sin tener que aprender un conjunto completo de tecnologías web.

Lo que hace que Streamlit sea tan atractivo es su enfoque minimalista. En lugar de escribir una gran cantidad de código HTML, CSS, JavaScript, o frameworks como Flask, Bootle o Django, puedes utilizar Python puro para definir la lógica de tu aplicación web. Streamlit se encarga del resto, generando automáticamente la interfaz de usuario y gestionando las interacciones del usuario.

Creación de una Aplicación Web con Streamlit

A continuación, te guiaré a través de los pasos para crear una aplicación web de muestra utilizando Streamlit. Asegúrate de tener Streamlit instalado en tu entorno de Python:

pip install streamlit

Importa las bibliotecas

Para empezar, crea un nuevo archivo Python y comienza importando Streamlit:

import streamlit as st

Define la interfaz de usuario

Utiliza las sencillas funciones de Streamlit para definir los elementos de tu aplicación web. Por ejemplo, puedes crear encabezados, botones, entradas de texto y gráficos con solo unas pocas líneas de código. Aquí hay un ejemplo básico:

st.title('Mi Primera Aplicación Web con Streamlit')
name = st.text_input('Introduce tu nombre', 'John Doe')
st.write(f'Hola, {name}!')

Agrega Gráficos e Interacciones

Streamlit facilita la incorporación de visualizaciones interactivas en tu aplicación. Puedes utilizar bibliotecas como Matplotlib, Plotly o Altair para crear gráficos y luego mostrarlos en tu aplicación Streamlit. Además, puedes utilizar widgets como deslizadores, botones y casillas de verificación para permitir a los usuarios interactuar con los datos.

import matplotlib.pyplot as plt
import numpy as np

if st.button('Generar Gráfico'):
    data = np.random.randn(100)
    plt.hist(data, bins=20)
    st.pyplot()

Ejecuta la Aplicación

Una vez que hayas definido la interfaz de usuario y agregado funcionalidad, puedes ejecutar tu aplicación con el siguiente comando en tu terminal:

streamlit run mi_aplicacion.py

Esto abrirá automáticamente tu aplicación en el navegador web, y podrás compartir el enlace con otros.

Aplicación Web y dataset (datos reales)

Pues bien, es hora de trabajar con datos reales y utilizará las funciones principales de Streamlit para crear una aplicación interactiva; explorando un conjunto de datos públicos de Uber para recogidas y devoluciones en la ciudad de Nueva York. Cuando haya terminado, sabrá cómo buscar y almacenar en caché datos, dibujar gráficos, trazar información en un mapa y utilizar widgets interactivos, como un control deslizante, para filtrar resultados.

Exploring a public Uber dataset for pickups and drop-offs in New York City

Nos guiaremos por la documentación que nos ofrece Streamlit en su sitio web.

Este código en Python utiliza las bibliotecas Streamlit, Pandas y Numpy para analizar y desplegar un conjunto de datos que contiene información sobre los recogidos de Uber en la ciudad de Nueva York. La aplicación web generada mostrará información sobre los recogidos por hora y permitirá a los usuarios filtrar los datos por hora.

import streamlit as st
import pandas as pd
import numpy as np

st.title('Uber pickups in NYC')

DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
            'streamlit-demo-data/uber-raw-data-sep14.csv.gz')

@st.cache_data
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis='columns', inplace=True)
    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
    return data

data_load_state = st.text('Loading data...')
data = load_data(10000)
data_load_state.text("Done! (using st.cache_data)")

if st.checkbox('Show raw data'):
    st.subheader('Raw data')
    st.write(data)

st.subheader('Number of pickups by hour')
hist_values = np.histogram(data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0]
st.bar_chart(hist_values)

# Some number in the range 0-23
hour_to_filter = st.slider('hour', 0, 23, 17)
filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]

st.subheader('Map of all pickups at %s:00' % hour_to_filter)
st.map(filtered_data)

Aquí está una explicación paso a paso del código:

  1. Título de la aplicación: Se utiliza st.title para establecer el título de la aplicación web como «Uber pickups in NYC».
  2. Importación de bibliotecas: Se importan las bibliotecas necesarias: streamlit, pandas y numpy. Streamlit se utiliza para crear la aplicación web, Pandas para la manipulación de datos y Numpy para cálculos numéricos.
  3. Definición de constantes:
    • DATE_COLUMN se establece como «date/time», que se utilizará para hacer referencia a la columna de fecha y hora en el conjunto de datos.
    • DATA_URL es la URL del conjunto de datos de recogidos de Uber en formato CSV.
  4. Carga de datos con caché: Se define una función llamada load_data decorada con @st.cache_data. Esto significa que la función se ejecutará una vez y cacheará los resultados para su uso posterior. La función carga los datos desde la URL especificada, realiza algunas transformaciones en los datos, como convertir a minúsculas los nombres de las columnas y convertir la columna de fecha y hora en un formato adecuado. Luego, devuelve los datos cargados.
  5. Indicador de carga de datos: Se utiliza st.text para mostrar un mensaje «Loading data…» mientras los datos se están cargando.
  6. Carga de datos: Se llama a la función load_data para cargar los primeros 10,000 registros del conjunto de datos. Una vez que la carga se completa, se actualiza el mensaje a «Done! (using st.cache_data)».
  7. Opción para mostrar datos crudos: Se utiliza un widget de casilla de verificación (st.checkbox) que permite al usuario decidir si desea mostrar los datos crudos o no. Si se marca la casilla de verificación, se muestra una subcabecera «Raw data» y se muestran los datos.
  8. Número de recogidos por hora: Se utiliza numpy.histogram para calcular la distribución de los recogidos por hora y se almacenan en hist_values. Luego, se utiliza st.bar_chart para mostrar un gráfico de barras que representa la cantidad de recogidos en cada hora del día.
  9. Filtrado por hora: Se utiliza un widget de control deslizante (st.slider) que permite al usuario seleccionar una hora en el rango de 0 a 23. El valor seleccionado se almacena en hour_to_filter. Los datos se filtran para mostrar solo los recogidos realizados en la hora seleccionada.
  10. Mapa de recogidos: Se muestra un mapa utilizando st.map que representa la ubicación de los recogidos en la hora seleccionada en el paso anterior.

El repositorio de esta aplicación con código fuente y requerimientos se encuentra en https://github.com/DaveSV/Uber-pickups-in-NYC/tree/main.

La aplicación completa se encuentra en el Community Cloud de Streamlit en https://davesv-uber-pickups-in-nyc-uber-pickups-ho4c3l.streamlit.app/.

Ventajas de Streamlit

  • Sencillez: No necesitas conocimientos previos en desarrollo web. Streamlit simplifica el proceso al máximo.
  • Productividad: Te permite crear aplicaciones web de manera rápida y eficiente, lo que es especialmente útil para prototipos y pruebas conceptuales.
  • Flexibilidad: Aunque es fácil de usar, Streamlit es lo suficientemente versátil para crear aplicaciones web complejas si es necesario.
  • Gran Comunidad: Streamlit cuenta con una comunidad activa de usuarios y desarrolladores que comparten recursos y ejemplos.
  • Integración de Datos y Visualizaciones: Puedes integrar tus análisis y visualizaciones de datos de manera efectiva en tus aplicaciones web.

Conclusión

Streamlit es una herramienta poderosa que permite a los científicos de datos y desarrolladores crear aplicaciones web interactivas en Python de manera rápida y sencilla. Ya no necesitas ser un experto en tecnologías web para compartir tus proyectos y análisis en línea. Con Streamlit, puedes centrarte en tu lógica de negocio y dejar que la biblioteca se encargue de la parte técnica.

Si estás interesado en compartir tus resultados de análisis de datos, prototipos o cualquier proyecto basado en Python en la web, definitivamente deberías considerar utilizar Streamlit. Esta herramienta cambiará la forma en que construyes aplicaciones web y te ayudará a presentar tus proyectos de manera efectiva.

¡Comienza a explorar el potencial de Streamlit y comparte tus aplicaciones web con el mundo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *