Parte 01 — Bootstrap com o Dash, conhecendo o Dash Bootstrap Component
Crie layouts bem bonitos utilizando o framework Bootstrap em sua app Dash
Olá, pessoal!! Vamos para mais uma série de posts para apresentar um componente incrível do Plotly Dash, o Dash Bootstrap Component, ou dbc para os íntimos..hehe. Neste conjunto, utilizaremos novamente os dados do Cartola FC disponibilizados pelo Henrique Gomide, para a criação de um dashboard, abordando desde a etapa de montagem do layout até o deploy da solução.
Se você ainda não conhece o Dash e ainda não criou o seu primeiro dashboard com esta ferramenta incrível, da uma passada AQUI e aproveite a série de 3 partes que fiz sobre alguns conceitos iniciais sobre esta ferramenta.
Desta vez, vamos aprender a montar alguns layouts mais bonitinhos, utilizando o framework web Bootstrap. Para quem não conhece, ele contém um conjunto de componentes em HTML, CSS e Javascript para deixar a montagem de sites muito mais fácil e rápida. Conheça mais AQUI.
O pessoal (abençoados, pessoas incríveis, maravilhosas, e mais um monte de elogios…) da faculty.ai criou um componente que traz os elementos do Bootstrap como componente do Dash, permitindo a montagem de layouts complexos somente utilizando o Python ou R. Para este post, vamos fazer um layout simples com o dbc.
Mão na Massa
Em primeiro lugar, tenha certeza que você tem todas as bibliotecas necessárias para o projeto estão instaladas:
Feito isto, vamos entender um pouco o funcionamento de um layout no Bootstrap. Nele temos o ‘grid’, que podemos pensar como um conjunto de linhas e colunas, sendo que o nosso conteúdo deverá se adequar a esta estrutura. Importante lembrar que a soma das colunas precisa sempre igualar 12.
Para entender este funcionamento, vamos montar um layout simples, com uma linha que terá duas colunas: uma de tamanho 4 e outra de tamanho 8 (totalizando 12 espaços).
Crie um arquivo chamado ‘app.py’ e coloque o código abaixo:
No código, em primeiro lugar importamos as bibliotecas que serão utilizadas. Em seguida, instanciamos o objeto para o aplicativo, escolhendo o tema ‘MATERIA’. Aqui vale um parênteses: o DBC permite a utilização de diversos temas para o seu layout, eles podem ser conhecidos neste site (https://bootswatch.com/). Em nosso caso, seguimos com o MATERIA, que segue o ‘Material Design’ (https://material.io/design/introduction), sinta-se a vontade para escolher outros modelos.
Com o objeto criado, seguimos para criar um grid e adicionar este grid ao layout (que é a exibição real do nosso aplicativo). Ao final, abra um terminal na pasta onde está o arquivo ‘app.py’ e rode o comando:
python3 app.py
Se tudo correu bem você verá no seu navegador (http://127.0.0.1:8888/) o layout abaixo. Perceba que o gráfico da esquerda é menor (md-4) e o da direita é maior (md-8).
Veja que com poucas linhas, conseguimos criar um layout bem simples.
Como próximo passo, a ideia é inserir uma ‘Navbar’ e para isto vamos seguir a documentação criada pela Faculty.ai. (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/navbar/).
Em nosso código as mudanças são poucas, bastando apenas copiar o código presente no link acima e colar logo abaixo do objeto grid e posteriormente inserir dentro do ‘layout’ antes do ‘dbc.Container’.
Para conhecer um novo elemento vamos inserir um espaço entre os gráficos e a ‘navbar’. É um passo bem simples, basta inserir o parâmetro ‘className’ e utilizar as classes do próprio Bootstrap para espaçamento de margens (mt,mb,ml ou mr).
Veja abaixo como ficará o código do grid:
Se as coisas correram bem, você será capaz de ver o gráfico da esquerda um pouco mais abaixo do que o da direita.
Muito simples não é?
O ideal é explorar as possibilidades e brincar com novos layouts para aumentar os conhecimentos sobre o DBC.
Para a próxima parte desta série montar a estrutura de arquivos do nosso projeto e conhecer como será o layout da aplicação. Espero que tenham gostado 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
