Parte 03 — Bootstrap com o Dash, conhecendo o Dash Bootstrap Component
Montando o Layout
Agora que já entendemos como nossos arquivos estão estruturados no projeto e como será o nosso layout pensando no modelo utilizado pelo Bootstrap, vamos colocar a mão na massa e escrever o nosso código.
O arquivo app.py
Como trabalharemos com uma estrutura visual, é importante termos como testar a nossa aplicação na medida em que vamos construindo o layout. Para que isto aconteça o primeiro arquivo que iremos editar será o app.py nele instaciaremos a aplicação Dash.
Com o seu arquivo aberto em sua IDE favorita (no momento estou com VSCode), insira o código abaixo:
As aplicação Dash utilizam o Flask como framework web, então, neste código temos a aplicação Dash instanciada na variável app e a aplicação Flask na variável server.
Com este código criado, encerramos a edição deste arquivo por enquanto (voltaremos nele mais tarde).
Editando o index.py e rodando o primeiro teste
Terminada a primeira etapa, vamos construir o nosso ponto de entrada para a aplicação. Insira o código abaixo dentro da nossa index.py.
Os códigos estão comentados, porém, somente para reforçar, no index a ideia é inicializar o layout e inserir a instrução para execução.
Legal, com isto feito quer dizer que já podemos executar?!?! Não!! Muita calma…hehe.
Primeira instrução no Layout e o teste da aplicação
Agora é o momento divertido, vamos começar a montagem do nosso layout e para isto o primeiro passo será criar a variável Layout e colocar alguma coisa dentro de uma Div (em dúvida sobre Div, chega aqui), seguindo o código abaixo:
Com isto feito, na pasta raiz do nosso projeto, abra um terminal (certifique-se de estar dentro do ambiente virtual, caso tenha criado um) e rode o comando ‘python index.py’. Se tudo correu bem, você verá a tela abaixo:
Então é isto, encerramos a nossa série de posts…brincadeira….Agora temos certeza de que a aplicação está rodando e fizemos todas as importações e estruturas do projeto corretamente.
Nosso primeiro componente que entrará no layout será a Navbar, mas, antes de começarmos é importante reforçar um conceito destes elementos no Dash, que no começo podem confundir um pouco a nossa cabeça. Vejam o código abaixo:
Nele, temos um monte de coisas dentro de um monte de coisas que tem parâmetros e que acabam por ter mais um monte de coisas dentro…hehehehe. Esta estrutura acaba confundindo quem está começando a montar seus layouts no Dash e por isto vou tentar explicar este funcionamento.
Um componente do Dash pode receber um ou mais itens dentro dele e sabemos que em Python para termos múltiplos elementos trabalhamos com a estrutura de arrays, que são criados utilizando os colchetes ([]). Pensando em programação orientada a objetos, estes elementos que utilizamos tanto do Dash Bootstrap Component (dbc), quanto do Dash Core Components (dcc) ou Dash Html Components (html) são classes que geram objetos (Navbar, Div, Img, A, Card, etc.). Para exemplificar, vejam abaixo como seria uma estrutura em Html básica, criada com o Dash.
Olhando para o lado direito, observamos a criação do objeto Div, com um array contendo dois elementos (H1 e H3).
Indo um pouco além, as tags Html podem conter atributos, que estão também disponíveis no Dash, acompanhem:
Vejam que tanto no HTML quanto no arquivo Python inserimos os atributos Class e style, com a diferença de nome para className no no segundo.
Entendido isto, vamos seguir para a construção da nossa Navbar. Ainda no arquivo layout.py insira o código abaixo:
Se tudo correu bem, você será capaz de visualizar a seguinte tela em seu navegador:
Show de bola! Temos a nossa Navbar pronta.
Para não ficar muito longo, vamos parar por aqui. Na próxima postagem vamos inserir as Tabs e os elementos principais da aplicação.
Até lá!
