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.
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.
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.
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.
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 devenv/bin/activate
.source venv/bin/activate
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:
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.
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.
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:
streamlit
, vamos adicionar st
;pandas
, o apelido pd
;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.
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.
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)
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.
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:
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:
# | Produto | Categoria do Produto | Preço | Frete | Data da Compra | Vendedor |
---|---|---|---|---|---|---|
0 | Modelagem preditiva | livros | 92.45 | 5.6097 | 01/01/2020 | Thiago Silva |
1 | Iniciando em programação | livros | 43.84 | 0 | 01/01/2020 | Mariana Ferreira |
2 | Pandeiro | instrumentos musicais | 87.18 | 2.2265 | 01/01/2020 | Thiago Silva |
3 | Corda de pular | esporte e lazer | 13.65 | 1.2579 | 01/01/2020 | Camila Ribeiro |
4 | Dinossauro Rex | brinquedos | 28.32 | 2.0391 | 01/01/2020 | Juliana Costa |
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.
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á!
O curso Streamlit: construindo um dashboard interativo possui 164 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de Data Visualization em Data Science, ou leia nossos artigos de Data Science.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas