CORE Code School
Data apps y dashboards con Streamlit
馃馃徎 Empezando
datapythonbootcamp

Data apps y dashboards con Streamlit

25 minutos

Streamlit es un framework para desarollo de web apps en Python, sin necesidad de conocimientos de front-end, y que te permite crear una aplicaci贸n en horas, no en semanas. Con el podr谩s *crear web apps y dashboards de visualizaci贸n de datos en Python

Originalmente pensado para visuzalizaci贸n de datos y modelos de machine learning, la libreria tiene una serie de herramientas muy vers谩tiles que te permitiran hacer eso y mucho m谩s.

La creatividad es el limite y el despliegue a la nube est谩 a un paso de dist谩ncia.

馃馃徎 Empezando

Para iniciar nuestra jornada con streamlit, necesitamos apenas instalar la libreria usando pip.

Actualmente streamlit tiene soporte para python versiones entre 3.6 y 3.8.

Crea tu nuevo entorno virtual para ese proyecto y instala streamlit:

Terminal
pip install streamlit
Copiar

Una vez instalado, para ver algunos ejemplos de lo que se puede hacer, ejecutamos:

Terminal
streamlit hello
Copiar

Adem谩s de esos demos, la pagina oficial tambi茅n contiene una galeria curada con muchos ejemplos muy guays: Streamlit Gallery

Ponlo en marcha

No nos basta ver los ejemplos, queremos hacer nuestro proprio! Creamos un fichero app.py y importamos streamlit, por convenci贸n con un alias:

python
import streamlit as st
Copiar

Con nada m谩s que eso, ya podemos ejecutar la app. Por la terminal, emitimos el siguiente comando:

Terminal
streamlit run app.py
Copiar

A partir de ese momento, no hay m谩s que preocuparse con la ejecuci贸n. Cualquier cambio que guardemos en app.py pueden ser vistos con refrescar el navegador.

Con eso solo nos resta empezar a construir!

馃П Lego Bricks

El desarollo de una web app con streamlit funciona como la construci贸n con bloques de lego, donde vamos combinar diferentes bloques, llamados widgets, con diferentes propriedades y funciones.

Esos widgets seran los instrumentos que nos permitiran representar informaci贸n, como textos, imagenes, graficos, mapas, videos, etc. y tambi茅n interactuar con la aplicaci贸n, con inputs de texto, selectores y multiselectores, sliders, calendarios, etc.

Para poner la piedra angular de nueustra app, simplemente llamamos a la funci贸n correspondiente, por ejemplo un titular:

python
st.title("My first Streamlit app")
Copiar

Guardamos los cambios, refrescamos el navegador y boom goes the dynamite! 馃く

隆Ojo! No tuvimos que decirle la posici贸n, tama帽o, estilo, nada! Solo la frase que quer铆amos y 隆ya est谩!

隆Vamos a por m谩s! 驴Que widgets hay?

El equipo de streamlit adem谩s de una documentaci贸n bastante clara nos ha preparado un cheat sheet con todos las funciones disponibles para f谩cil consulta.

Probemos un interactivo, un input de texto.

python
st.text_input('Tell me your name')
Copiar

F5, F5, F5 y ah铆 tenemos la cajita de texto, podemos escribir en ella y todo. 驴Pero como podemos guardar ese dato para usar?

Pues los creadores de streamlit nos lo han puesto como a Felipe II, resulta que si cambiamos un pel铆n la linea de codigo anterior:

python
user_name = st.text_input('Tell me your name')
Copiar

A la vez estaremos colocando el widget y almacenando el valor inputado en una variable cuando se le use. Si a帽adimos un print(user_name). Poderemos ver en la terminal los diferentes valores que se guardan en esa variable segun utilizamos el text_input.

Veamos como podemos utilizar esas variables para cambiar lo que se ve en la web app. Prueba el siguiente codigo, disponible en examples/luck.py:

python
import streamlit as st
from random import choice

st.title("Magic 8 Ball")

user_name = st.text_input('Tell me your name...')
button_press = st.button("Try your luck")

phrases = ["As I see it, yes.",
           "Ask again later.",
           "Better not tell you now.",
           "Cannot predict now.",
           "Concentrate and ask again.",
           "Don鈥檛 count on it.",
           "It is certain.",
           "It is decidedly so.",
           "Most likely.",
           "My reply is no.",
           "My sources say no.",
           "Outlook not so good.",
           "Outlook good.",
           "Reply hazy, try again.",
           "Signs point to yes.",
           "Very doubtful.",
           "Without a doubt.",
           "Yes.",
           "Yes 鈥 definitely.",
           "You may rely on it"]

if button_press:
    st.header(f"Let's see, {user_name}...")
    st.title(choice(phrases))
Copiar

Aqui guardamos dos informaciones:

  • user_name : el string conteniendo lo que escribi贸 el usuario, o un string vacio caso no haya escrito nada.
  • button_press : Un booleano que ser谩 False por defecto y solo se convertir谩 en True cuando pulsado. En ese caso, utilizamos ese bot贸n para iniciar una acci贸n que es representar el mensaje al usuario y la suerte aleat贸ria.

馃攣 Flujo de ejecuci贸n

Con lo que ya probamos hasta el momento, podemos notar que hay una manera muy particular en la que se interpreta el codigo python al usar streamlit.

Atenci贸n a lo siguiente:

  • El codigo de la web app se ejecuta entero, 隆desde el princ铆pio hasta el final!
  • En la primera ejecuci贸n (cuando se carga la web app en el navegador), todas las variables que contienen datos de widgets tendr谩n su valor por defecto.
  • La interacci贸n con cualquier widget har谩 que:
    • La variable correspondiente tenga el nuevo valor
    • El codigo vuelva a ejecutarse entero, 隆desde el princ铆pio hasta el final!

En otras palabras:

  • El codigo siempre se ejecutar谩 entero, 隆desde el princ铆pio hasta el final! *
  • El unico cambio entre cada ejecuci贸n es el valor almacenado en las variables relacionadas a inputs.

* Hay una excepci贸n, como en toda regla, que es el uso de la funci贸n: st.stop().

El problema de la continuidad

Ese paradigma de funcionamento de python y streamlit parece presentarnos una limitaci贸n, 驴no?

Un widget de input siempre tiene que venir antes de cualquier representaci贸n que utilice su valor.

Y el antes, por la naturaleza secuencial de la construci贸n de streamlit significa espacialmente encima. O sea, el controlador nunca poderia estar debajo de la grafica que controla, por ejemplo, en la diagramaci贸n de una web app.

Pero ese problema ha sido previsto por el equipo desarollador y hay una soluci贸n muy sencilla para eso.

  • No pintaremos la representaci贸n, apenas marcaremos el lugar donde estar谩, i.e.: reservamos el hueco.
  • Ponemos el widget de input
  • Sustituimos la reserva por la representaci贸n en si.

Ese elemento reservador, o mas bien placeholder es el de la funci贸n

python
st.empty()
Copiar

Ese elemento, debemos guardarlo en una variable para en seguida sustituirle por el objeto definitivo, usando la sintaxis placeholder.<widget>. Miremos el ejemplo:

python
title = st.empty()
page_title = st.text_input('What should the title be?')
title.title(page_title)
Copiar

De esa manera conseguimos que el titulo cambie encima de la cajita de input del texto.

馃拝 Haz que tu dashboard deslumbre

Bueno, con lo que hemos visto hasta ahora y logica de programaci贸n python, ya tenemos todo el basico para crear diferentes web apps.

Pero para tener mas gustillo y dar m谩s libertad a la imaginaci贸n, aprenderemos a poner dos objetos (bloquitos de lego) lado a lado, en lugar de encima abajo.

Para hacer eso, dividiremos la fila donde pondr铆amos el siguiente widget en columnas.

n columnas

python
columns = st.beta_columns(2)
Copiar

Y maravilla, ya tenemos las dos columnas columns para poner en ellas lo que queramos. Y eso se puede hacer de dos maneras diferentes, representadas abajo:

Metodo de la columna

python
columns[0].write("Left column.")
columns[1].write("Right column.")
Copiar

Con with

python
with columns[0]:
    st.write("Left column.")
with columns[1]:
    st.write("Right column.")
Copiar

Columnas proporcionales

Otra manera de dividir las columnas es proporcionalmente, usando unidades imaginarias y pasando el tama帽o de cada columna como una tupla.

Si queremos 3 columnas ocupando:

  • La primera mitad del espacio
  • La segunda y tercera 1/4, podemos hacer:
python
columns = st.beta_columns((2,1,1))
Copiar

Explora la division en columnas y el codigo ejecutando examples/columns.py con streamlit. El selector de colores est谩 inclu铆do de bonus. 馃槈

隆Hay un otro espacio disponible para a帽adir informaci贸n y widgets cuando creamos una webapp!

Es la barra lateral, sidebar. Para incluir cualquier cosa en ella, simplesmente debemos incluir el nombre sidebar en los comandos.

python
st.sidebar.title("This is the sidebar")
st.sidebar.image("sidebar_banner.png")
Copiar

Compatibilidad

No tendr铆amos todo si no pudieramos tambi茅n a帽adir diferentes visualizaciones de datos en nuestra web app y otras herramientas de datos.

Streamlit tiene una serie de funciones basicas para representar graficas usando matplotlib.

Pero para mayor liberdad, streamlit tiene compatibilidad com las m谩s importantes librerias de data y Machine Learning en python:

馃殌 Publica el Dashboard

Ahora vamos utilizar todas esas herramientas para crear una web app entera. Y te toca investigar el codigo, disponible en x_files.py. Don't worry, el codigo est谩 enteramente comentado para guiarte.

Puedes ejecutar directamente con

Terminal
streamlit run x_files.py
Copiar

Igualmente, puedes visitar la app en X-Files Heroku.

Ademas de generar facilmente una webapp, es muy f谩cil desplegarla a la nube subiendola a un servicio como Heroku. Tenemos que preparar 4 ficheros muy sencillos y ya est谩 listo para subir. Esos son los ficheros:

Fichero runtime.txt

Ese fichero es el que dir谩 cual version de python Heroku tiene que instalar. No es necesario en todos proyectos, pero como streamlit no est谩 compatible con las versiones m谩s modernas todav铆a, simplemente escribimos la versi贸n que usamos, en el caso de X-files:

txt
python-3.7.10
Copiar

Fichero requirements.txt

Aqui es donde definimos las librerias que vamos a necesitar para que el programa funcione. Pandas, sklearn, seaborn, etc. Todas las librerias que uses tienen que reflejarse aqui.

txt
watchdog==2.0.3
streamlit==0.81.0
pandas==1.2.4
plotly==4.14.3
Copiar

Fichero setup.sh

Para que streamlit funcione es necesaria una configuraci贸n, que 茅s lo que har谩 ese fichero. Sobretodo configurar谩 el puerto que se usar谩 para la app y necesitamos del puerto que Heroku nos d谩 en una variable de entorno $PORT.

Terminal
mkdir -p ~/.streamlit/ echo "\ [server]\n\ headless = true\n\ port = $PORT\n\ enableCORS = false\n\ \n\ " > ~/.streamlit/config.toml
Copiar

Fichero Procfile

Ese fichero es para poder desplegar nuestra app en Deis, la plataforma de Kubernetes que usa Heroku.

txt
web: sh setup.sh && streamlit run x_files.py
Copiar

Se define que es una aplicaci贸n web y se configuran los dos comandos que necesitamos ejecutar, el de setup y nuesta app.

El importante en ese comando es que definamos bien el nombre de nuestra app. En ese caso x_files.py.

Subiendo la app

Cuando est茅 todo listo, web app funcionando y ficheros de configuraci贸n, necesitamos hacer que nuestro proyecto sea un repo git, con todo lo necesario commiteado.

Creamos una cuenta en Heroku y instalamos el Heroku-cli.

Por la terminal, hacemos el login:

Terminal
heroku login
Copiar

Por ultimo, subimos a heroku nuestro codigo como lo subiriamos a github.

Terminal
git push heroku master
Copiar

隆Y listo! Aqu铆 te dejamos todo el codigo del ejemplo.

C贸digo Streamlit

Ver Repositorio

Bootcamp Big Data y Machine Learning

En esta p谩gina
馃馃徎 Empezando馃П Lego Bricks馃攣 Flujo de ejecuci贸n馃拝 Haz que tu dashboard deslumbre馃殌 Publica el Dashboard
Actualizado 19 jun 2022
驴Quieres m谩s?
datapythonbootcamp

F贸rmate como desarrollador@