Criar uma web app em Python com Dash

Nesse artigo vamos  aprender a criar uma web app em Python com o framework Dash.

Nível: Iniciante, apenas conhecimentos gerais em Python e HTML requeridos.

Dash, muito prazer

Dash foi idealizado pelo Chris Parmer. Ele não era da área da tecnologia até então e procurava um jeito acessível de desenvolver apps de dados. Hoje o Dash virou um dos frameworks mais populares para ciência de dados e Machine Learning; conecta elementos modernos de interface de usuário com o código analítico Python.

Podemos assim construir de maneira simples visualizações poderosas e lindas, como esse exemplo abaixo onde vemos a repartição das aberturas de lojas WalMart nos Estados Unidos.

O nosso primeiro app: Apresentações

Agora que sabemos um pouco mais sobre o Dash e como ele surgiu, podemos ir ao que mais nos interessa: pôr a mão na massa e construir o nosso primeiro app!

Eis o que vamos fazer: um gráfico em barras mostrando a quantidade de frutas (abacaxi, jaca e banana) em São Paulo e no Rio.

O nosso primeiro app: Passo a passo

Segue o passo a passo do código Python do nosso app:

1) Instalando pacotes

Vamos precisar de apenas três pacotes para trabalhar: Dash para criar o app, Pandas para a manipulação de dados e Plotly Express para a visualização de dados (já incluso no Dash).

Desde o seu editor de código-fonte preferido (gosto pessoalmente de usar o PyCharm), crie um arquivo Python (pode chamá-lo de app.py) e rode os seguintes comandos:

pip install dash

pip install pandas

2) Importando

Uma vez que temos todos os pacotes instalados (pode demorar uns minutos), podemos ir para o cabeçalho do nosso arquivo Python e importá-los:

from dash import Dash, html, dcc

import plotly.express as px

import pandas as pd

O próprio Dash contém muitas bibliotecas e importamos as que vamos precisar: Dash para inicializar o nosso app, HTML para criar componentes de esse tipo (Div por exemplo) e dcc para criar componentes Dash como botões e gráficos.

3) Inicializando o app...

Incluímos essa linha de código abaixo que permite inicializar o app.

app = Dash(__name__)

4) Dataframe

Criamos então uma tabela com os dados que vamos trabalhar. Essa tabela é conhecida como dataframe em Pandas (mais sobre dataframes aqui).

Para simplificar as coisas, criamos aleatoriamente dados, mas também podemos importar dados no formato CSV, Excel, HTML ou JSON,por exemplo, usando as funções read da biblioteca Pandas. O que importa é ter uma tabela com os nossos dados e o que o dataframe nos permite fazer.

df = pd.DataFrame({

"Fruta": ["Abacaxi", "Jaca", "Banana", "Abacaxi", "Jaca", "Banana"],

"Quantidade": [4, 1, 2, 2, 4, 5],

"Cidade": ["São Paulo", "São Paulo", "São Paulo", "Rio", "Rio", "Rio"]

})

5) Gráfico

Uma vez que temos os dados no formato de tabela, podemos criar o gráfico de barra. Para isso, usamos o método bar do Plotly Express (o Plotly Express tem métodos para muitos tipos de gráficos, exemplos aqui).

Queremos mostrar para cada fruta a quantidade, isso em função da cidade. Vamos então colocar as frutas no eixo x e a quantidade no eixo y. E a cidade? Será especificada através da cor. Assim será possível mostrar toda a informação em um gráfico só.

Nos parâmetros do método bar, especificamos primeiro qual é a nossa tabela de dados (será df no nosso caso), qual coluna vamos mostrar no eixo x (será fruta aqui), qual no eixo y (será quantidade) e qual a cor (será cidade). Terminamos escolhendo group para o parâmetro barmode, assim vamos ter as barras juntinhas para cada elemento do eixo x.

fig = px.bar(df, x="Fruta", y="Quantidade", color="Cidade", barmode="group")

6) Layout do app

Colocamos os nossos dados em uma tabela e criamos o nosso gráfico a partir dela. Fizemos um grande trabalho! Agora, para finalizar, precisamos “dar corpo” ao nosso app, isto é definir o layout do app.

Temos 4 componentes: um grande Div (componente HTML Div) que vai conter todos os conteúdos do app, um título (componente HTML H1), um texto (componente HTML Div com o texto) e, finalmente um componente Dash para o gráfico (dcc.Graph). Neste último, colocamos o nome do nosso gráfico (fig) no parâmetro figure, assim o componente vai mostrar o gráfico que criamos anteriormente.

app.layout = html.Div(children=[

html.H1(children='Bom dia Dash'),

html.Div(children='''

Dash: Um framework web para os seus dados.

'''),

dcc.Graph(

id='examplo-graf',

figure=fig

)

])

7) Execução do código

Maravilha! Quase pronto. Agora é só adicionar duas linhas que permitirão a execução do código.  Esse bloco de código vem do framework Flask em que o Dash está baseado.

if __name__ == '__main__':

app.run_server(debug=True)

Pronto! Agora é só rodar o código. Se não tiver erro, você verá essa mensagem:

$ python app.py

...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

Vamos para o endereço web e eis o que temos:

Sucesso! Vemos na página web o nosso app com o título H1, o texto e o gráfico. Podemos comparar os dados visualizados aqui com os dados da nossa tabela do passo 4: 4 abacaxis em São Paulo e 2 no Rio; 1 jaca em São Paulo e 4 no Rio; 2 bananas em São Paulo e 5 no Rio. Está correto!

O nosso primeiro app está pronto. Veremos em um próximo artigo como implementá-lo.

from dash import Dash, html, dcc

import plotly.express as px

import pandas as pd

app = Dash(__name__)

df = pd.DataFrame({

"Fruta": ["Abacaxi", "Jaca", "Banana", "Abacaxi", "Jaca", "Banana"],

"Quantidade": [4, 1, 2, 2, 4, 5],

"Cidade": ["São Paulo", "São Paulo", "São Paulo", "Rio", "Rio", "Rio"]

})

fig = px.bar(df, x="Fruta", y="Quantidade", color="Cidade", barmode="group")

app.layout = html.Div(children=[

html.H1(children='Bom dia Dash'),

html.Div(children='''

Dash: Um framework web para os seus dados.

'''),

dcc.Graph(

id='examplo-graf',

figure=fig

)

])

if __name__ == '__main__':

app.run_server(debug=True)

Se você quiser saber mais sobre o layout do Dash, entre aqui.

Obrigado por ler. Até logo!