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

Vamos montar nossa estrutura de arquivos e conhecer como será o layout da nossa aplicação

Vamos dominar o mundo…

Olá, pessoal. Seguindo com a segunda parte deste tutorial, que ficará um pouco maior, porém com um resultado muito bacana.

Neste momento, vamos começar a montar a nossa estrutura de arquivos para trabalharmos com a construção da aplicação.

Para esta aplicação, não trabalharemos com o aplicativo dash, o layout e callbacks em um mesmo arquivo, conforme mostrei no primeiro artigo sobre o tema. Faremos uma separação e trataremos tais estruturas separadamente, com isto, ganharemos mais um arquivo que será o index.py, que será o responsável pela inicialização da nossa aplicação. Vejam na figura abaixo como ficará:

Figura 01- Estrutura de arquivos Dash

Agora, vamos explorar um a uma as funções de cada arquivo.

• app.py — é nele que inicializaremos a aplicação Dash, ou seja, nele estará o dash.Dash(…), como também será o responsável por instanciar um objeto do flask_caching para armazenarmos os dados obtidos do cartola em um cache do tipo filesystem;
• callbacks.py — aqui estarão todos os callbacks que criaremos em nossa aplicação;
• index.py — responsável por inicializar a aplicação Dash;
• layouts.py — todas as estruturas visuais da aplicação serão construídas neste arquivo.

Caso queira saber de onde veio esta estrutura, da um pulo AQUI.

Para apoiar na construção dos layouts, eu criei mais uma estrutura conforme observado abaixo:

Figura 02 — Estrutura para arquivos construtores

Em layout.py foram criadas algumas funções para simplificar a geração de estruturas um pouco mais elaboradas do Bootstrap como por exemplo: navbar, cards, etc.

Ao final, a estrutura de arquivos ficará da seguinte forma:

Figura 03 — Estrutura final com a pasta arquivos construtores e os arquivos init.py e layout.py dentro e na raiz os arquivos app.py , callbacks.py ,index.py e layouts.py

Com isto pronto em sua máquina o próximo passo será instalar as bibliotecas necessárias para a execução do projeto. Para isto, copie os dados listados abaixo e cole em um arquivo com o nome requirements.txt que deve ser colocado na pasta raiz do seu projeto, ao final rode o comando ‘pip install -r requirements.txt’ no terminal e aguarde a instalação das bibliotecas. Recomendo criar um ambiente virtual com o virtualenv (saiba mais aqui) para rodar o projeto.

Gist 01 — Arquivo requirements.txt com as bibliotecas para instalação

Feito isto agora vamos ter uma noção de como será o layout, da nossa aplicação. A ideia é trabalhar com os recursos de Linhas (Row) e Colunas (Col) do Boostrap para montar esta estrutura. Abaixo segue um wireframe de como será a aplicação.

Figura 04 — Layout da aplicação com uma navbar superior contendo uma imagem do lado esquerdo e o nome do lado direito, logo abaixo um menu com tabs e dentro deste menu um filtro para clubes, posições e jogadores com dropdown e ao lado direito um modelo de gráfico que será exibida a pontuação.

O retângulo maior (azul claro) corresponde ao espaço de uma Tab (conheça aqui). Os nossos filtros e a parte do gráfico estarão todos contidos dentro desta estrutura.

Em vermelho temos uma Row (saiba mais sobre layout no Boostrap) que comportará duas colunas (no link anterior você será apresentado às colunas também :D ), indicadas pelos retângulos verde e azul.

Na parte superior temos uma Navbar (ainda não conhece? Chega aqui!!) e nela teremos uma tag html de link (A) e uma de imagem (Img).

Dentro desta estrutura a ideia é trazer um gráfico com a pontuação de algum jogador específico e a variação de preço. Para simplificar o tutorial, o layout de Valorização será igual.

Para não ficar muito longa esta etapa, vamos parar por aqui!!

Na próxima vamos colocar a mão no código e começar a montar o nosso layout.

Espero que tenham gostado e até lá!!