Streamlit: construindo um dashboard interativo

Olá! Meu nome é João Miranda, sou instrutor da Alura e vou te acompanhar nesse curso de Streamlit: construindo um dashboard interativo.

João é uma pessoa branca com cabelo preto médio preso em um coque, com as laterais raspadas e barba preta rente ao rosto. Ele veste uma camisa cinza com a logo da Alura, e ao fundo há uma parede com iluminação esverdeada e azul e uma estante de livros com um objeto escrito Data Science Alura.

Nesse curso, vamos aprender a construir um dashboard de vendas!

Primeiro, faremos a configuração do ambiente para que você possa utilizar a ferramenta Streamlit. Depois, vamos fazer a leitura da base de dados a partir de uma API. Na sequência, vamos construir cada um dos gráficos desse dashboard.

Uma vez concluídos os gráficos, vamos construir elementos interativos no aplicativo. A partir desses elementos, vamos conseguir fazer o filtro dos gráficos. Dessa forma, conseguiremos selecionar as opções nos elementos interativos e os gráficos serão filtrados com base nessas informações.

Em seguida, vamos construir páginas secundárias no aplicativo e, por fim, vamos colocar esse aplicativo online, ou seja, faremos o deploy. Assim, todas as pessoas conseguirão acessar o aplicativo a partir de um link.

Para acompanhar esse conteúdo, é necessário ter conhecimento na linguagem de programação Python, na biblioteca Pandas e em visualização de dados.

Vamos começar?!

Fazemos parte de uma empresa que vende produtos pela internet e recebemos a demanda de construir uma aplicação para fornecer informações a respeito dos dados de venda. Essa aplicação precisa ser interativa para facilitar o acesso desses dados para qualquer pessoa.

Para atender essa demanda, surgiu a ideia de utilizar a biblioteca Streamlit para construir um dashboard que será interativo e totalmente personalizável para o nosso projeto.

Instalação das bibliotecas

O primeiro passo para utilizar a ferramenta será instalar essa biblioteca no nosso computador. Primeiramente, precisamos ter a linguagem Python instalada no nosso computador e algum editor de código. Nesse caso, vamos utilizar o VS Code, mas você pode utilizar qualquer editor de código com que se sinta mais confortável.

Criando um diretório para o projeto

Na página inicial do VS Code, selecionaremos a opção "Open Folder…". Feito isso, vamos selecionar alguma pasta onde será salvo o projeto.

O instrutor seguiu o caminho "Este Computador > Windows-SSD (C:) > scripts".

No local escolhido, criaremos uma nova pasta chamada "dashboard_streamlit". Feito isso, selecionaremos essa pasta como o diretório do nosso projeto.

Criando um ambiente virtual

Agora, precisamos criar um ambiente virtual que irá conter todas as bibliotecas que vamos instalar para o projeto. Assim, evitamos qualquer inconsistência com bibliotecas já instaladas no computador.

Para fazer isso, precisaremos abrir o terminal nessa pasta específica ("dashboard_streamlit").

Foi importante criar o diretório, pois agora, ao acessar o terminal a partir do VS Code, ele será aberto diretamente na pasta desejada.

No menu superior, vamos clicar sobre o ícone de reticências (…) e ir até "Terminal > New Terminal". Para abrir o terminal, também podemos utilizar o atalho "Ctrl + Shift + '".

Para criar o ambiente virtual, escreveremos o comando python -m venv, seguido de um nome que podemos escolher para o ambiente. Nesse caso, chamaremos o ambiente de venv, mas você pode escolher o nome que preferir.

Observação: venv vem de virtual environment (ambiente virtual).

python -m venv venv

Com esse comando, será criada uma pasta chamada "venv" no diretório, que é o nome do ambiente virtual. Nessa pasta, serão instaladas as bibliotecas padrão da linguagem Python.

A partir de agora, conseguiremos ativar esse ambiente e instalar as bibliotecas que vamos utilizar no nosso projeto.

Ativando o ambiente virtual

Para ativar o ambiente virtual, vamos retornar ao terminal e adicionar um novo comando. Com ele, vamos acessar a pasta "venv", a pasta "Scripts", e por fim, colocaremos /activate:

.\venv\Scripts/activate

Feito isso, teremos um retorno com (venv) à esquerda do diretório no terminal, no início da linha. Esse é o nome do ambiente virtual, então agora, a partir de qualquer comando escrito no terminal, esse ambiente será utilizado.

Se você estiver utilizando o Linux ou Mac, o comando para ativar o ambiente virtual é um pouco diferente. Começaremos o comando com source seguido de venv/bin/activate.

Copiar código

source venv/bin/activate

Instalando as bibliotecas

Agora, dentro desse ambiente virtual, podemos instalar as bibliotecas que vamos utilizar no projeto. A primeira biblioteca que vamos instalar será a biblioteca Streamlit. Para instalá-la, escreveremos o comando abaixo:

pip install streamlit

Uma vez instalada a biblioteca Streamlit, vamos instalar outras bibliotecas que ajudarão em momentos específicos:

1. A primeira delas será a Requests, que permitirá a leitura dos dados a partir de uma API;
2. A segunda biblioteca será a Pandas, usada para manipular os dados coletados da API;
3. E a terceira será a biblioteca Plotly, que será utilizada para construir as visualizações no dashboard.

Para fazer a instalação, utilizaremos os respectivos comandos abaixo:

pip install requests

pip install pandas

pip install plotly

As bibliotecas podem demorar um pouco para serem instaladas, pois serão baixadas da internet.

Conclusão

Finalizamos a instalação de todas as bibliotecas e agora podemos começar o nosso projeto. No próximo vídeo, criaremos o script e faremos a importação das bibliotecas instaladas para começar o nosso projeto!

Para iniciar nosso projeto, vamos criar um arquivo de script que conterá o código do nosso dashboard. No Explorador à esquerda do VS Code, criaremos o arquivo Dashboard.py clicando no ícone "New File…".

Feito isso, podemos fechar a aba do Explorador e minimizar o terminal para ter espaço para digitar o código.

Acessando dados da API

Importando as bibliotecas

Primeiramente, vamos incluir as bibliotecas que acabamos de instalar no computador. Para isso, vamos utilizar os comandos de import para cada uma das bibliotecas. Daremos siglas como apelidos para algumas delas:

• Para a biblioteca streamlit, vamos adicionar st;
• Para a pandas, o apelido pd;
• E para a plotly.express, responsável por criar os gráficos, px.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px

Dessa maneira, temos todas as bibliotecas importadas e vamos conseguir utilizá-las ao longo do nosso projeto.

Adicionando um título ao aplicativo

A primeira coisa que vamos adicionar ao nosso aplicativo é um título. Porém, ainda não sabemos como adicioná-lo. Então, vamos acessar a documentação do Streamlit para descobrir.

Na página da documentação, identificamos que existem dois comandos: o st.write e o recurso Magic. Com o comando st.write, colocamos elementos na tela do aplicativo e o comando identifica a melhor forma de aplicá-lo.

Se colocarmos um título ou um texto, isso será acrescentado ao aplicativo; se colocarmos um DataFrame, será acrescentado esse DataFrame. Basta utilizar o st.write.

O Magic é uma forma de colocar a variável em que criamos o elemento, e ao aplicá-la no código, o elemento também será acrescentado de forma automática.

Sabemos que queremos acrescentar um título, então para organizar melhor, vamos indicar de forma específica que queremos colocar um título.

Logo abaixo na documentação, temos os elementos de texto que podemos acrescentar no aplicativo. Podemos colocar textos em markdown, título (title), cabeçalho (header), subcabeçalho (subheader), caption (uma parte de explicação), blocos de código (code block) e assim por diante.

Como queremos adicionar um título, basta utilizar o comando st.title. A documentação identifica um exemplo de forma prática para conseguirmos utilizar o título:

st.title("The app title")

Retornando ao código, vamos aplicar o comando para adicionar o título "DASHBOARD DE VENDAS", em caixa alta. Nesse texto, também podemos incluir algum emoji para representar as vendas. Nesse caso, vamos adicionar o emoji de um carrinho de compras com :shopping_trolley:.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px
st.title('DASHBOARD DE VENDAS :shopping_trolley:')

Adicionamos o título, mas ainda não temos a exibição no aplicativo. Seria interessante visualizar o resultado, então para isso, iremos executar o aplicativo e verificar se o título aparece conforme esperado.

Para executar o código acima, não vamos usar o botão "Run Python File" como faríamos em um script normal. Precisaremos abrir o terminal e garantir que o ambiente virtual esteja selecionado, ou seja, que esteja escrito (venv) ao início da linha.

Com isso garantido, vamos digitar o comando streamlit run seguido do nome do script, que é Dashboard.py, e executar o comando com a tecla "Enter".

streamlit run Dashboard.py

A página do aplicativo será aberta de forma automática, contendo o título definido e um ícone, o emoji do carrinho de compras que adicionamos, conforme exibido acima. Nosso título está funcionando de forma legal e já temos a primeira visualização do aplicativo!

Agora vamos retornar ao código para acrescentar outros elementos, pois até o momento, só temos a parte do título. Na sequência, faremos a leitura dos dados a partir de uma API.

Leitura dos dados a partir de uma API

Com o VS Code aberto, após executar o comando streamlit run Dashboard.py, obtivemos duas URLs como retorno para acessar o aplicativo:

Endereços obtidos na máquina do instrutor:

Local URL: http://localhost:8501
Network URL: http://192.168.2.170:8501

Embora o código tenha sido executado e o aplicativo aberto de forma automática no navegador, também temos o endereço de IP para acessar o aplicativo caso a página seja fechada no navegador.

O aplicativo continuará rodando, então o terminal estará em execução até que você decida parar teclando "Ctrl + C" ou clicando sobre o ícone de lixeira à esquerda da barra superior do terminal para fechá-lo.

Nesse caso, vamos mantê-lo rodando, pois ainda vamos acrescentar outros elementos. Dessa forma, à medida que escrevemos o código e salvamos as alterações, o aplicativo é atualizado.

Além do título, faremos a leitura dos dados da API. Para isso, vamos utilizar o método get() da biblioteca requests. Após o título, na linha de código 8, vamos usar a variável url para identificar o site onde vamos coletar os dados, que será o endereço da API ("https://labdados.com/produtos").

import streamlit as st
import requests
import pandas as pd
import plotly.express as px


st.title('DASHBOARD DE VENDAS :shopping_trolley:')


url = 'https://labdados.com/produtos'

A partir dessa URL, conseguiremos acessar todos os dados da empresa que vende os produtos online, e com isso, será possível acessar os dados da API.

Conforme dito anteriormente, vamos utilizar o método get() para fazer o acesso. Em uma nova linha logo abaixo de url, vamos escrever a variável response, que vai armazenar o resultado da requisição. Ela será igual a requests.get(), recebendo url como argumento.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px


st.title('DASHBOARD DE VENDAS :shopping_trolley:')


url = 'https://labdados.com/produtos'
response = requests.get(url)

Request > JSON > DataFrame

Agora precisaremos transformar essa requisição em um JSON, o qual será transformado em um DataFrame. Então, vamos escrever na próxima linha a variável dados, que será igual a pd.DataFrame seguido do método from_dict(). Por fim, passaremos response.json() como argumento do método.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px


st.title('DASHBOARD DE VENDAS :shopping_trolley:')


url = 'https://labdados.com/produtos'
response = requests.get(url)
dados = pd.DataFrame.from_dict(response.json())

Dessa maneira, transformamos a requisição em um JSON, e depois o JSON em um DataFrame.

A partir de agora, já conseguimos representar o DataFrame no aplicativo do Streamlit: basta escrever a variável dados no nosso aplicativo. Assim, será utilizado o conceito do Magic para transformar a variável em uma visualização que faça sentido.

Nesse momento, podemos voltar à documentação e identificar a melhor forma de representar o DataFrame, pois possivelmente existe uma forma específica de direcionar o que queremos.

Entendendo a melhor forma de representar o DataFrame

Na documentação, existe uma seção específica para a representação de elementos de dados no Streamlit, chamada "Data display elements". Conseguimos representar DataFrames, tabelas estáticas (static tables), métricas (metrics), e dicionários e JSON (dicts and JSON).

Como queremos representar um DataFrame, vamos utilizar o comando indicado na documentação:

st.dataframe(my_data_frame)

De volta ao código, vamos adicionar o comando st.dataframe() em uma nova linha, passar entre parênteses a variável dados, e por fim salvar.

Lembre-se de sempre salvar o código com o atalho "Ctrl + S".

import streamlit as st
import requests
import pandas as pd
import plotly.express as px


st.title('DASHBOARD DE VENDAS :shopping_trolley:')




url = 'https://labdados.com/produtos'
response = requests.get(url)
dados = pd.DataFrame.from_dict(response.json())


st.dataframe(dados)

Nesse momento, não precisamos executar novamente o comando streamlit run Dashboard.py. Basta voltar ao aplicativo e ele estará atualizado.

Voltando ao aplicativo, visualizamos o título e o ícone que adicionamos, mas não é exibido nenhum DataFrame. Será que fizemos algo errado? Será que não salvamos o código? O que aconteceu?

Na verdade, no canto superior direito da página de dashboard, existe um ícone de "i" indicando que existe uma informação. Ao clicar nele, teremos a mensagem de que um arquivo foi modificado (Source file changed.) e que, a partir disso, podemos selecionar duas opções:

1. Reexecutar o código com a opção Rerun;
2. Ou definir que sempre será reexecutado, selecionando a opção Always rerun.

Dessa maneira, o aplicativo será executado sempre que fizermos alguma modificação no código. Para tornar o processo mais prático e dinâmico, vamos selecionar a opção Always rerun.

Feito isso, conseguiremos visualizar a seguinte tabela, logo abaixo do título:

Exibição dos 5 primeiros resultados da tabela:

Um ponto que podemos observar é que o fundo do aplicativo está na cor preta. Para ter uma visualização mais interessante, podemos alterar essa cor. Para isso, abrimos o menu hambúrguer no canto superior direito e selecionamos a opção "Settings".

Na seção "Theme", está indicado que a cor usada na página corresponde à definida como padrão para o sistema ("Use system setting"). Vamos alterar para a opção "Light". Feito isso, modificamos o fundo para uma coloração branca.

Conclusão

Já conseguimos adicionar um título para o aplicativo, iniciar o projeto, e inserir o DataFrame. Porém, ainda não iniciamos o dashboard com os gráficos. No próximo vídeo, começaremos a construir essas visualizações a partir dos dados que fizemos a leitura nesse vídeo. Até já!