Cómo hacer y publicar un Dashboard con Plotly, Dash y Heroku
Una guía simple para publicar un tablero en línea con Heroku.
Introducción
Aunque parezca una tarea complicada que sólo posible para desarrolladores en sistemas o genios en la computación, hacer una Dashboard y publicarlo en línea es mucho más fácil de lo que parece, y lo mejor de todo, es que se puede hacer ¡completamente gratis!
Lamentablemente la mayoría de las guías o tutoriales sólo se encuentran disponible en inglés, o bien, la información se encuentra dispersa en varios sitios. Por lo anterior, hice esta pequeña guía con mucho cariño y espero que sea de utilidad si quieren publicar un dashboard o alguna otra herramienta con Python. Solo hay que perderle el miedo al uso de la terminal (en Windows pueden usar Símbolo de sistema cmd o Windows PowerShell).
1. Prerrequisitos.
a) Instalar pip
Pip, es el instalador de paquetes de Python, por lo que hay que instalar una distribución de Python. Hay varias opciones, pero recomiendo 2: la versión más sencilla de www.python.org o la versión más completa de www.anaconda.com. Recomiendo la versión completa porque ya incluye varios paquetes y les permitirá trabajar inmediatamente con notebooks.
En cualquiera de los 2 casos recomiendo que instalen seleccionando la opción “Add Python 3.10 to PATH” o “Add Anaconda3 to the system PATH enviroment variable”. Esto permitirá que el comando python sea reconocido en la terminal.
Para confirmar que tienes instalado pip , pueden abrir la terminal y simplemente probar el comando pip. Si está instalado correctamente deberían ver un mensaje como el que sigue en PowerShell:
Si instalaron python o anaconda y no les reconoce el comando pip, es necesario abrir el ejecutador de windows (Tecla windows+ R) y pegar el comando “sysdm.cpl”
Se va a abrir el cuadro de configuración de propiedades de sistema, y allí, van a Opciones avanzadas > Variables del entorno…
En el cuadro de dialogo emergente, seleccionamos PATH y hay que seleccionar la opción una “Editar”:
Allí, hay que introducir un nuevo campo que será la carpeta Scripts donde instaló Python. Si instalaron Python la carpeta es C:\users\“tu-usuario”\AppData\Programs\Python\Python39 y si instalaron Anaconda la carpeta es C:\users\“tu-usuario”\AppData\Anaconda3\Scripts
Habiendo hecho lo anterior, cierren la ventana de comandos CMD o la PowerShell y vuelvan a intentar el comando pip. Ya debería de arrojar un mensaje como el anterior.
b) Instalar git
De manera muy simple, git es un software de control de versiones que permite a varias personas colaborar en proyectos de programación. Por ejemplo, puedo descargar una versión de un proyecto (pull), hacerle cambios y aplicarlos (push), o en caso de que haya errores, revertirlos.
De hecho git es requisito para usar Heroku, así que vayan a la página https://git-scm.com, descarguen e instalen la versión que corresponda a su equipo. También es necesario que durante la instalación verifiquen la opción recomendada para que git esté disponible desde la terminal o desde la PowerShell:
Para comprobar que quedó instalado correctamente, vayan a PowerShell y prueben el comando git; debería arrojar algo similar a esto:
c) Instalar Heroku
Antes de instalar Heroku y configurarlo, van a necesitar registrarse en su página https://www.heroku.com o vincularlo con su cuenta de Github, en cualquiera de los 2 casos, vayan y ¡registrense ya!
Luego, entren a la página de desarrollador https://devcenter.heroku.com/articles/getting-started-with-python#set-up y descarguen el instalar que les corresponda. Otra vez es necesario que durante la instalación verifiquen la opción recomendada para que heroku esté disponible desde PATH:
Una vez instalado, pueden comprobar que funciona correctamente probando el comando heroku en la PowerShell:
Ahora, sí ya todo está listo, ¡a darle átomos!
2. Crear el directorio de la aplicación
Vamos a crear la carpeta donde trabajaremos. Esto se puede hacer desde el explorador de archivos, pero luego tendremos que regresar a la terminal, por lo que vamos a crear la carpeta con la terminal con el comando “mkdir” y ubicarnos en ella con el comando “cd” y el nombre de la carpeta.
Luego, con el comando git init inicializamos la carpeta para marcarla como una carpeta que será parte de un control de versiones con git. Es mucho más fácil de lo que parece:
Finalmente, usando el bloc de notas cree un archivo nuevo llamado “.gitignore” con los archivos que aún no creo, pero que quiero que sean ignorados después:
venv
*.pyc
.DS_Store
.env
Estoy seguro de que debe haber una forma más sencilla, pero de momento me sirvió a mí y espero que a ustedes también.
3. Crear un ambiente virtual de Python
Ya con pip instalado necesitaremos un ambiente virtual, que definirá cómo funcionará el dashboard una vez que esté en línea. Lo haremos con 3 comandos: instalamos el paquete para crear ambientes virtuales (1), creamos un ambiente virtual (paso2, yo lo llame “venv”… nada ingenioso) y lo activamos (3):
pip install virtualenv
virtualenv venv
venv\Scripts\activate
Una vez que se activa el ambiente virtual, en la terminal, antes del directorio aparece un (venv), el cual indica que el ambiente virtual “venv” está activo:
Luego, es hora de instalar los paquetes que utiliza la aplicación 1 a 1, porque los ambientes virtuales prácticamente se crean vacíos. Además, pip el instalador de paquetes de Python, se encargará de instalar otros paquetes que sean necesarios para que funcionen aquellos que me interesan. Como mi aplicación es un tablero, solo utilizó pocos paquetes; sin embargo, hay que instalar un paquete adicional gunicorn:
pip install dash
pip install pandas
pip install plotly
pip install gunicorn
Una vez instalados estos paquetes, hay que guardar los paquetes instalados (incluyendo a los paquetes complementarios, con el comando:
pip freeze > requirements.txt
Este archivo de requirements.txt será de utilidad para que la aplicación de Heroku sepa que paquetes de Python descargar y utilizar. Al crearlo de esta forma, me aseguro que los paquetes complementarios que requiere cada paquete para funcionar estén instalados.
4. Crear el contenido de la aplicación con Plotly y Dash
Si bien, no es obligatorio utilizar la librería de plotly, me gustan sus gráficos interactivos y cada tutorial de gráfico, viene acompañado de su correspondiente tutorial para pasarla a un tablero de dash (barras, burbujas, mapas, sankey, etc.).
De hecho, mi fuente principal para hacer esta guía, es la propia guía de dash para publicar sus aplicaciones https://dash.plotly.com/deployment.
En la carpeta donde estamos trabajando tenemos que crear un archivo app.py con el código de Python que incluya las gráficas, y en esa misma carpeta depositar los archivos necesarios (como fuentes de datos externas). Para probar que el código funcionaba y seleccionar qué graficas colocar, hice el trabajo en una notebook que pueden checar aquí:
Luego de que el código funcionó en la notebook, lo pase al archivoapp.py, siguiendo las indicaciones de dash. Para que quedará a 2 columnas cargue un estilo externo desde un archivo css:
Como pueden ver, es un dashboard muy sencillo, sólo con los gráficos dinámicos que genera plotly. Aún no tiene callbacks para que los gráficos sean más responsivos, pero espero sirva de base.
5. Crear el Procfile y verificar los archivos
Y por último, para que la aplicación funcione en línea hay que crear un archivo “Procfile” que no tenga terminación txt. Este es el archivo que Heroku lee y utiliza para decidir que hacer con nuestra aplicación. Como yo quiero que éste dashboard esté disponible vía web, el único contenido de este archivo “Profile”, es la siguiente línea:
web: gunicorn app:server --timeout 3000
Para eso era necesario el paquete gunicorn aunque no se utilice en el dashboard. Agregue la opción de timeout para que Heroku sepa que tiene que esperar, porque el archivo fuente de datos, y el proceso que hace la app.py tardan un poco.
El directorio con mi carpeta quedó con los siguientes archivos:
6. Subir todo a Heroku
Regresamos a la terminal e iniciamos sesión en línea en Heroku con el siguiente comando:
heroku login
Después de correr este comando, nos preguntará si deseamos abrir el navegador para iniciar sesión, lo hacemos, y después de iniciar sesión, la terminal nos avisará que se inició sesión correctamente:
Luego, usamos heroku para crear el espacio donde se depositará la aplicación “mi-dashboard” (1) y le avisamos que la modificaremos a través de git (2):
heroku create mi-dashboard
heroku git:remote mi-dashboard
Éste será el nombre de la aplicación, o en mi caso dashboard, el cual será parte de la dirección electrónica de la aplicación. Pueden poner el nombre que gusten (siempre y cuando esté disponible)
Luego utilizaremos los siguientes comandos para seleccionar todos los archivos con git (1), contemplarlos en la siguiente carga (2) y subirlos a heroku (3):
git add .
git commit -m ‘Comentario para incluir en el control de cambios’
git push heroku master
A través de la misma terminal, Heroku nos avisará si la subida fue exitosa y si el dashboard se encuentra en línea.
¡Y LISTO! Pueden entrar a “https://mi-dashboard.herokuapp.com” o como sea que le hayan puesto a su aplicación y podrán verla en línea. En mi caso es https://transferencias-federales.herokuapp.com
Espero que esta guía sea sencilla y les sea de utilidad. Besos.
