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

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

Tiago Augusto Ferreira
Oct 15 · 3 min read
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.

Image for post
Image for post
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

Blog oficial da comunidade Data Hackers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store