Parte 05 — Bootstrap com o Dash, conhecendo o Dash Bootstrap Component

Aquisição de dados, Callbacks e Deploy com o Dash

Acaboooou…acaboou..

Seguindo rumo à conclusão de nossa série de postagens sobre a montagem de um dashboard com Plotly Dash, agora vamos obter os dados e montar nossos filtros e gráficos, para este exemplo farei apenas de um tab deixando para você a realização da segunda, o arquivo a ser editado nesta parte é o callbacks.py.

Sem maiores enrolações, vamos repassar o que precisaremos fazer e irmos para os códigos:

• Criar método para obter os dados que estão no Github Henrique Gomide;
• Criar o callback para listar todos os clubes no dropdown;
• Criar o callback para listar todas as posições no dropdown;
• Criar o callback para filtrar os jogadores a partir dos clubes e posições selecionadas;
• Criar o callback para exibir a pontuação do jogador selecionado conforme o filtro indicado;

Nosso primeiro método basicamente cria uma lista de URLs para obtenção dos dados das rodadas, cria um DataFrame Pandas para cada CSV obtido, realiza dois tratamentos nos dados e une todos para retornar em um único, vejam:

Com o método para obtenção dos dados pronto, realizamos uma chamada a ele e seguimos para a montagem dos Callbacks. Se você ainda tem dúvidas sobre o que são e como trabalhar com eles, recomendo as leituras: Basic Callbacks, Callbacks no Plotly Dash.

Entendido o seu funcionamento, vamos para a compreensão do código. Os dois primeiros métodos, servem para criar a lista de clubes e posições, obtidos do DataFrame gerado. O output é direcionado para o próprio Dropdown, afetando a propriedade options do referido item, sendo o return do método apenas uma agregação por valores únicos do campo atletas.clube.id.full.name. Para as posições a lógica segue a mesma.

Para filtrar os jogadores por posição e clube, o que precisaremos é utilizar os resultados dos dropdowns anteriores como Input e aplicar uma operação no Dataframe utilizando estes dados de entrada.

Nosso objetivo é escolher algum jogador e observar o seu histórico de pontos ao longo das rodadas, sabendo disto a montagem do callback para a exibição do gráfico fica simples: como Input temos o Clube, Posição e Jogador e como Output temos o Gráfico.

Para a plotagem, foi utilizado o Plotly Express, pensando em sua simplicidade de entendimento.

Veja abaixo como fica o código final do arquivo callbacks.py.

Se tudo ocorreu bem, você já será capaz de ver a sua aplicação funcionando e pesquisar o histórico de pontos dos jogadores.

Figura 01 — Imagem do relatório final com o filtro aplicado para o Atacante Marinho do Santos.

Chegamos ao fim!! Neste projeto aprendemos um pouco sobre a estrutura de grid do Bootstrap, conhecemos o Dash Boostrap Component e utilizamos seus componentes: Navbar, Tab, Card, Row e Col. Vimos também um formato diferente para a estruturação da sua aplicação do Dash, com a inicialização do app feita em um arquivo separado, bem como os callbacks e layouts.

Vimos também como trabalhar com o componente Dropdown e sobre a sua utilização para filtrar os dados.

Deploy

Como última etapa, vamos realizar o deploy utilizando o Heroku. Tal etapa é relativamente simples e utilizarei como apoio a própria documentação do Dash que você encontra AQUI.

Colocarei abaixo a sequência que precisaremos executar, adaptando os passos do link citado acima:

1. Não execute os passos 1 e 2 do tutorial acima;
2. Instale o Gunicorn: $ pip install gunicorn
3. No arquivo index.py modifique o parâmetro debug para False: app.run_server(debug=False, port=8888)
4. Crie o arquivo .gitignore e liste os arquivos que você não quer que vá para o servidor (saiba mais sobre .gitignore)
5. Crie o arquivo Procfile e insira este código: web: gunicorn index:server
6. Garanta que o seu arquivo requirements.txt esteja com a lista de bibliotecas atualizada: $ pip freeze > requirements.txt
7. Siga os comandos listados abaixo estando na raiz do seu projeto:

Com os passos acima, você será capaz de realizar o deploy da sua aplicação e acessá-la de qualquer lugar. Veja o resultado: https://cartola-dash.herokuapp.com/.

Agora sim, ficou um pouco maior do que o habitual, porém optei por colocar o maior número de detalhes que o meu conhecimento permitiu :).

É sempre um grande prazer e aprendizado a criação destes posts. Neste aprendi bastante e espero que consiga ajudá-los, caso precisem em algum momento criar algo semelhante.

Um abraço e até a próxima.

Caso queira me encontrar estou no LinkedIn: https://www.linkedin.com/in/tiagoaugustoferreira/

Escrevo também para meu blog pessoal: https://medium.com/datadummies