Dashboard interactivo en tiempo real con Streamlit y Streamlit Cloud

Este proyecto veremos cómo implementar y desplegar en la nube un sistema de visualización de datos georreferenciados («dashboard») en tiempo real usando herramientas como Streamlit, Streamlit Cloud, Folium y APIs externas.

Si estás suscrito a la Academia Online puedes acceder al código fuente (que se encuentra al final de este proyecto).

Contenido

Requerimientos

El problema de negocio

Objetivo del proyecto

Fases del proyecto

Refactorización del flujo ETL

Creación de la interfaz Streamlit en local

Creación del repositorio GitHub

Despliegue en la nube

El código fuente de este proyecto

Conclusión

Requerimientos

Para desarrollar este proyecto se requiere tener una cuenta en GitHub y en Streamlit Cloud.

Adicionalmente, sugiero revisar el proyecto flujo ETL en Python con datos abiertos donde vimos cómo implementar un flujo ETL (Extract-Transform-Load) en Python usando datos reales y abiertos disponibles en los servidores del transporte público de la ciudad de Londres (Transport for London). Dicho desarrollo será el punto de partida de este proyecto.

El problema de negocio

Asumiremos que nos interesa desarrollar un aplicativo web («dashboard») que permita a los usuarios consultar en tiempo real y de forma interactiva la disponibilidad de bicicletas públicas en las diferentes estaciones de la ciudad de Londres.

Objetivo del proyecto

Teniendo en cuenta lo anterior, este será el objetivo del proyecto:

Implementar y desplegar en la nube una interfaz gráfica interactiva («dashboard») que permita la carga y visualización de los datos de disponibilidad de las estaciones de bicicletas públicas en la ciudad de Londres.

Fases del proyecto

Veamos de forma general las etapas que harán parte de este proyecto:

• Refactorización flujo ETL: en el proyecto anterior vimos cómo implementar el flujo ETL (extraer, transformar, cargar) que permite acceder a la API de Transport for London y extraer la información relacionada con la disponibilidad de bicicletas en las diferentes estaciones. Para este proyecto tendremos que refactorizar este código para poderlo usar en nuestro «dashboard».
• Creación interfaz de Streamlit en local: el siguiente paso consiste en crear una interfaz de usuario que integre el flujo ETL con un sencillo aplicativo web interactivo que facilite al usuario la visualización de los datos.
• Creación repositorio GitHub: una vez hayamos creativo el aplicativo web, y como paso previo al despliegue del «dashboard» en Streamlit Cloud, tendremos que crear un repositorio Git local con nuestra aplicación. Posteriormente, sincronizaremos este repositorio con un repositorio en GitHub online.
• Despliegue en la nube: y finalmente, haremos uso del repositorio con nuestro código en GitHub para desplegar en la nube nuestro aplicativo, haciendo uso de Streamlit Cloud.

La idea es tener al final un aplicativo muy similar al que se encuentra desplegado en este enlace.

Así que teniendo claros el problema a resolver, el objetivo y las fases de nuestro proyecto, veamos cómo implementar cada una de estas etapas.

Refactorización del flujo ETL

En el proyecto anterior (flujo ETL en Python con datos abiertos) vimos cómo crear las credenciales de acceso a la API de Transport for London y cómo extraer, transformar y almacenar los datos asociados a las estaciones de bicicletas públicas en la ciudad.

Sin embargo, a pesar de que el código implementado en dicho proyecto incluye las funcionalidades requeridas en el presente proyecto, es necesario reorganizarlo para facilitar su uso. Esto se conoce precisamente como refactorización.

En esencia lo que haremos será crear un script de Python (archivo con extensión .py) para reorganizar todos los bloques de código a través de funciones que nos permitirán conectarnos a la API así como extraer, transformar y cargar los datos requeridos por nuestro «dashboard».

Pero antes de crear nuestro script debemos almacenar de manera segura las credenciales de acceso a la API.

Tal como lo explico en el tutorial ¿cómo manejar adecuadamente API KEYS en Python?, debemos evitar exponer de manera inadvertida las credenciales de acceso a cualquier API.

Esto quiere decir que nunca debemos escribir dichas credenciales directamente en nuestros scripts y en su lugar debemos usar otras alternativas, como por ejemplo las variables de entorno.

En el caso de Streamlit, la librería que usaremos para construir nuestro «dashboard», este manejo de las variables de entorno se puede realizar de manera sencilla a través del archivo «secrets.toml».

Así que comenzaremos creando una carpeta para nuestro proyecto y dentro de dicha carpeta crearemos una carpeta oculta llamada «.streamlit». Observemos que al inicio del nombre de esta carpeta aparece un punto (.) para indicar que se trata de una carpeta oculta.

Y luego, dentro de dicha carpeta oculta crearemos el archivo «secrets.toml» que contendrá las credenciales de acceso. Así que esta será la estructura inicial de nuestro proyecto:

Creación de la interfaz Streamlit en local

Streamlit es una librería de Python que facilita enormemente el desarrollo de interfaces gráficas interactivas al momento de desarrollar proyectos de Ciencia de Datos. De hecho, en el tutorial de Introducción a Streamlit explico en detalle sus principales características.

Así que usaremos esta librería para construir un primer prototipo de nuestra interfaz, que será simplemente un aplicativo web que inicialmente ejecutaremos en local (al final del proyecto veremos cómo desplegar dicho aplicativo en la nube).

La idea es simple: desde nuestro navegador web podremos acceder a esta interfaz que nos mostrará, en tiempo real, de manera interactiva y sobre un mapa de la ciudad de Londres, la información de las diferentes estaciones de bicicletas públicas. El resultado que obtendremos será similar a este:

Resumamos algunas características y las principales funcionalidades de este aplicativo:

• En la parte superior izquierda nos mostrará el conteo en tiempo real de las estaciones de bicicletas disponibles (sección «Total estaciones disponibles» en la figura anterior)
• También en la parte superior izquierda se mostrará un mensaje con la fecha y hora de la última actualización e incluiremos un botón («Actualizar») que permitirá actualizar los datos y la visualización de los mismos
• Y en la parte inferior central de la interfaz tendremos como tal el mapa de la ciudad de Londres con las diferentes estaciones geolocalizadas. El usuario podrá hacer «zoom in» o «zoom out» de forma interactiva sobre el mapa y al dar click en el marcador de cada estación se desplegará la información detallada de la misma (nombre de la estación, número de bicicletas estándar y eléctricas disponibles y número de espacios de parqueo de bicicletas disponibles)

Aunque todo esto parece muy complejo, realmente veremos que con ayuda de Streamlit esta implementación resultará muy pero muy sencilla.

Veamos entonces esta implementación paso a paso. Comenzaremos creando el archivo «app.py» en la carpeta de nuestro proyecto. Este archivo contendrá precisamente la implementación del «dashboard»:

Ahora debemos verificar que la aplicación se puede ejecutar localmente sin errores. Así que abrimos el Terminal de Mac o la Ventana de Comandos de Windows y, desde la carpeta del proyecto, escribimos lo siguiente:

streamlit run app.py

Al hacer esto se debería abrir automáticamente una ventana en nuestro navegador web y después de unos segundos deberíamos ver una interfaz similar a esta:

En esta interfaz vemos precisamente los elementos definidos anteriormente (el botón «Actualizar», la fecha y hora de la última actualización y el conteo de estaciones) así como el mapa que nos muestra la distribución de las estaciones disponibles en la ciudad de Londres.

Vemos además que cada estación tiene un marcador con un color asociado a la disponibilidad de bicicletas (rojo, naranja o verde).

Y de forma interactiva podemos hacer «zoom in» y «zoom out» sobre este mapa para ver en detalle diferentes zonas de la ciudad y desde luego podemos hacer click sobre cualquier estación para ver la disponibilidad de bicicletas y espacios de parqueo.

¡Excelente! En este punto ya tenemos un aplicativo web que nos facilita la visualización de los datos extraídos a través de la API. Y hemos visto que la implementación no requiere un elevado número de líneas de código.

Sin embargo, se trata de una aplicación que sólo se puede ejecutar localmente. Y lo interesante de Streamlit es que con unos cuantos pasos adicionales, y con ayuda de Streamlit Cloud, nos permitirá desplegar en la nube este mismo aplicativo.

Así que veamos cómo hacer este despliegue. Hablemos primero en detalle de la creación del repositorio GitHub.

Creación del repositorio GitHub

El despliegue del aplicativo en Stream Cloud es muy simple y en esencia requiere que subamos la aplicación que acabamos de implementar a un repositorio en GitHub para luego vincularlo con nuestra cuenta de Streamlit Cloud. Así que veamos cómo preparar este repositorio.

En primer lugar debemos crear e inicializar nuestro repositorio Git localmente. Esto resulta muy sencillo si ya tenemos instalado Git en nuestro computador. Simplemente abrimos el Terminal en Mac o la Ventana de Comandos en Windows y desde la carpeta del proyecto ejecutamos el siguiente comando:

A continuación oprimimos el botón guardar («Save») ¡y listo, ya hemos almacenado la API Key de nuestro proyecto como variable de entorno en Streamlit Cloud!

Y ahora sí el paso final, simplemente oprimimos el botón «Deploy» (desplegar) y en este punto Streamlit Cloud montará la aplicación en sus servidores usando tanto el código de nuestro repositorio como las librerías definidas en el archivo «requirements.txt». Y después de unos segundos nuestro «dashboard» ya tendrá una URL asignada y ya estará disponible en la nube. Y al abrir el «dashboard» en nuestro navegador de Internet veremos que tiene exactamente la misma apariencia y las mismas funcionalidades que implementamos anteriormente de manera local:

Y con este aplicativo 100% online ya podremos ver el estado actual de las diferentes estaciones de bicicletas públicas disponibles en la ciudad de Londres. Además, podremos ver dichas estaciones en un mapa de la ciudad y acceder de manera interactiva a la información de cada estación.

El código fuente de este proyecto

Conclusión

En este proyecto hemos visto cómo integrar un flujo ETL (extract-transform-load) con una herramienta de visualización implementada con la librería Streamlit para construir y desplegar en la nube un «dashboard» que nos permite visualizar en tiempo real datos georreferenciados correspondientes al sistema de bicicletas de acceso público disponible en la ciudad de Londres.

Hemos visto que herramientas como Streamlit y Folium resultan muy útiles para este tipo de visualizaciones, donde queremos integrar datos tabulares georreferenciados en una interfaz que facilite la interacción y búsqueda de información por parte del usuario.

Además vimos cómo al combinar herramientas como Streamlit, GitHub y Streamlit Cloud, donde con muy pocas líneas de código y unos cuantos pasos podemos tener en pocos minutos nuestro aplicativo desplegado en un servidor en la nube.

Espero que te haya parecido interesante este proyecto. Recuerda que si eres suscriptor y tienes alguna duda o comentario sobre este proyecto me puedes contactar directamente a través del formulario que encontrarás en la Intranet.

Volver al índice de Proyectos