Você sabe como criar sites usando Python? Nesta aula vou ensinar a criar um site do Zero usando a biblioteca Streamlit.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Fala Impressionadores! Na aula de hoje eu quero te mostrar como Criar Sites com Python usando o Streamlit!
O Streamlit é uma biblioteca que vai te auxiliar na criação de sites voltados para a área de dados, ou seja, vai facilitar muito na hora de apresentar seus resultados de forma mais rápida e eficiente.
Nessa aula eu vou falar o que é o Streamlit, como ele funciona, como fazer a configuração inicial e claro, como criar o seu primeiro site.
Além disso, nós vamos inserir informações nesse site, vamos criar um dashboard de contratos no Streamlit para mostrar alguns resultados.
Dessa forma você já vai ver na prática como pode utilizar essa ferramenta no seu dia a dia de trabalho para impressionar ainda mais!
E aí? Gostou do tema? Então, bora para a aula!
Streamlit, o que é?
O Streamlit é uma ferramenta do Python para criação de sites, para utilizar o primeiro passo é fazer a instalação no seu terminal.
>pip install streamlitO segundo passo é abrir o site do Streamlit e entrar na documentação
Clicando em iniciar você tem acesso aos conceitos principais da ferramenta, a instalação, criação de aplicativos, etc.
Nesta página você também terá acesso aos componentes que podem ser textos, campos de seleção, gráficos e diversos outros itens disponíveis na documentação para implementar sua apresentação.
Nesta aula vamos utilizar alguns desses componentes, mas estou dando a você a dica de explorar a documentação, assim você vai ter acesso a mais opções.
Como já instalamos o programa vamos agora importar para o código:
import streamlit as stFeito isso, vamos configurar a página, podemos com o código abaixo fazer diversas configurações como o alinhamento da página, título, etc.
Neste acaso vou deixar centralizado como é o padrão e acrescentar apenas o título.
st.set_page_config(page_title="Meu Site Streamlit")Feito isso podemos começar a acrescentar elementos na página como um texto, por exemplo:
st.subheader("Meu primeiro site com o Streamlit")Veja que o Streamlit é um site muito fácil de usar, os códigos são facilmente dispostos e configurados, mas na hora de executar, temos que ter alguns cuidados.
Neste caso você não pode rodar o código normalmente, você tem que mandar o Streamlit executar o código no seu terminal, exemplo:
>streamlit run meu_app.pyNo seu caso será:
>streamlit run “USE O NOME DO ARQUIVO QUE ESTÁ UTILIZANDO PARA FAZER O CÓDIGO”Se você rodar o código agora, não vai ter mais do que uma frase nele, porém o ambiente e configurações do Streamlit foram feitos para que você tenha o mínimo de trabalho possível, você só vai precisar ir acrescentando os elementos.
Após o subtítulo vamos acrescentar um Dashboard com os registros de contratos, os dados desses registros estão disponíveis no material didático da aula para você utilizar.
import streamlit as st
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")Vamos usar este arquivo para simular de onde estamos pegando essas informações, porém, as informações poderiam estar vindo de outros sites, arquivos ou APIs, são muitas as possibilidades.
Logo abaixo vamos definir o que exibir das informações que estamos coletando no registro.
import streamlit as st
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")
st.write("Informações sobre os contratos fechados pela Hash&Co ao longo de maio")Resultado
Podemos acrescentar links também, se colocar um link o texto que você deseja transformar em link deve ficar entre colchetes.
Logo depois dos colchetes -> entre aspas, você deve colocar o link da página que aquele link vai direcionar.
import streamlit as st
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")
st.write("Informações sobre os contratos fechados pela Hash&Co ao longo de maio")
st.write("Quer aprender Python? [Clique aqui](https://www.hashtagtreinamentos.com/curso-python)")Agora se você rodar o código e clicar em Clique aqui na página, você será direcionado para o site do curso de Python da Hashtag.
Esta é uma criação de site padrão com Streamlit, porém o maior uso dessa ferramenta é para a área de dados.
Então vamos colocar efetivamente os dados do dashboard na página para que você possa fazer consultas e ver como funciona na prática!
Como você já deve ter observado no código acima, estamos separando as seções do código como container, o Streamlit permite fazer essa separação para organizar a página.
Vamos precisar instalar e baixar para o código o Pandas para fazer uma interação melhor com os dados.
>pip install pandas
Importando o Pandas:
import streamlit as st
import pandas as pd
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")
st.write("Informações sobre os contratos fechados pela Hash&Co ao longo de maio")
st.write("Quer aprender Python? [Clique aqui](https://www.hashtagtreinamentos.com/curso-python)")
with st.container():
st.write("---")
dados=pd.read_csv("resultados.csv")
st.area_chart(dados, x="Data", y="Contratos")Os dados que queremos exibir são um arquivo do tipo csv, esse arquivo vai se tornar em uma tabela no Python.
Um cuidado que você deve tomar é colocar os nomes das colunas que você quer que apareçam nos eixos x e y de forma idêntica a da tabela de origem.
Feito isso você pode pedir ao Streamlit para rodar o código no terminal como fizemos anteriormente, observe que o gráfico já vai ser gerado e que é possível inclusive aumentar seu tamanho nas opções de visualização.
Otimização do Site
Já criamos nosso site com a consulta aos dados da tabela, mas podemos fazer o site ficar ainda melhor com dois ajustes que vou ensinar a vocês agora!
Quando você carrega dados dentro do seu site esses dados costumam pesar dependendo do seu volume, neste caso o site possui poucas informações, mas quanto maior o número de dados mais o site pode se tornar lento.
Então a etapa de carregar os dados é uma etapa pesada que pode demorar muito, o mais comum é separar essa etapa de carregar os dados em uma função.
import streamlit as st
import pandas as pd
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")
st.write("Informações sobre os contratos fechados pela Hash&Co ao longo de maio")
st.write("Quer aprender Python? [Clique aqui](https://www.hashtagtreinamentos.com/curso-python)")
def carregar_dados():
tabela = pd.read_csv("resultados.csv")
return tabela
with st.container():
st.write("---")
dados = carregar_dados()
st.area_chart(dados, x="Data", y="Contratos")Torne a rodar o código e perceba que nada mudou na sua página, mas agora você pode usar um código em que colocamos um @ acima da função, este código consegue adicionar uma funcionalidade para a função que está abaixo dele.
Por este motivo foi preciso retirar a leitura dos dados e colocar em uma função a parte, a vantagem de usar o @st.cache_data é que essa linha de código possibilita armazenar as informações do código no cache do usuário.
Então o site só vai demorar a carregar na primeira vez que você rodar, a partir da segunda será mais rápido porque os dados estão armazenados em cache.
Outro ponto de melhora para tornar o gráfico mais interativo é a criação de um botão para selecionar períodos específicos dos dados.
Vamos usar um código da documentação para colocar um botão, vamos colocar a opção de seleção de dias pré-estabelecidos neste botão.
Após isso, vamos mudar a informação que estamos trazendo da nossa tabela.
Para conseguir fazer isso vamos separar da variável qtde_dias o valor que está selecionado no botão (7D, por exemplo), vamos trocar (replace) o D de dias para um espaço vazio e colocar o código com um -> int na frente, assim o 7 vai ser considerado um número não texto.
Agora sabemos a quantidade de dias selecionado pelo usuário e armazenamos essa quantidade em uma variável -> nun_dias
No momento de carregar os dados vamos carregar todos os dados, mas mostrar apenas os que estiverem na quantidade de dias que o usuário selecionou.
Vamos selecionar as últimas 7 linhas, as últimas 15, 21, 30 dependendo do que o usuário selecionar no botão.
Código completo
import streamlit as st
import pandas as pd
st.set_page_config(page_title="Meu Site Streamlit")
with st.container():
st.subheader("Meu primeiro site com o Streamlit")
st.title("Dashboard de Contratos")
st.write("Informações sobre os contratos fechados pela Hash&Co ao longo de maio")
st.write("Quer aprender Python? [Clique aqui](https://www.hashtagtreinamentos.com/curso-python)")
@st.cache_data
def carregar_dados():
tabela = pd.read_csv("resultados.csv")
return tabela
with st.container():
st.write("---")
qtde_dias = st.selectbox("Selecione o período", ["7D", "15D", "21D", "30D"])
num_dias = int(qtde_dias.replace("D", ""))
dados = carregar_dados()
dados = dados[-num_dias:]
st.area_chart(dados, x="Data", y="Contratos")Resultado – Como Criar Sites usando Python
Você sabe como fazer o deploy do seu projeto Streamlit? Nesta aula vamos baixar o projeto no GitHub e colocá-lo no ar do modo mais simples possível!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Fala Impressionadores! Na aula de hoje eu quero te mostrar como colocar seu site no ar, ou seja, como fazer o deploy com o Streamlit!
Na aula anterior “Como Criar Sites usando Python” eu te mostrei como criar o seu site com o Streamlit, agora a ideia é te mostrar como publicar um site com Streamlit para que ele fique público e você consiga mostrar para quem quiser.
Com a publicação do site qualquer pessoa com o link já será capaz de acessar o seu site e utilizar os recursos que colocou nele, então você pode ter acesso a ele quando quiser de uma forma fácil e rápida!
E aí, após aprender Como Criar Sites usando Python vamos aprender como criar repositório no GitHub para fazer o deploy do seu site?
Então vem comigo que eu vou te mostrar o passo a passo!
Partindo do princípio de que você já tem o projeto pronto, como já fizemos na última aula, vamos precisar de dois arquivos:
Esses arquivos foram os usados na aula anterior e são os que estão disponíveis no material didático desta aula.
Para fazer o deploy você pode ter mais de um arquivo auxiliar, mas o arquivo principal deve estar importando o Streamlit e deve ser um só, neste caso o arquivo principal é o meu_app.py
O primeiro passo é criar um repositório no seu GitHub, se você tem dúvidas de como usar o GitHub clique no link ao lado e você vai aprender em uma aula completa sobre o site.
No GitHub clique em New para criar um repositório, nosso objetivo é fazer o deploy da maneira mais simples possível.
Dê um nome para o seu repositório, neste caso vou chamar de Streamlitpython
Após o nome vamos selecionar algumas opções:
Feito isso, clique em Create repository, você pode escrever sobre o projeto em no campo do README, porém, como vamos fazer isso de forma simples vou clicar direto em Add file e em seguida em Upload files
Agora vamos pegar os arquivos que temos do projeto no VS Code, selecione os dois arquivos e arraste para dentro do GitHub.
Você pode estar estranhando como estamos fazendo, mas como eu disse a proposta aqui é ensinar a forma mais simples de fazer o deploy, me acompanhe que vai dar certo!
Streamlit
Agora entre no site do Streamlit e crie sua conta caso ainda não possua uma. Após entrar eu recomendo que você clique em Continuar com o GitHub.
Autorize que o Streamlit pegue informações do seu GitHub
Após isso, o site pede que você preencha seus dados e você vai chegar na página da imagem abaixo:
Agora vamos disponibilizar seu trabalho em um link para que qualquer pessoa do mundo possa utilizar!
Clique onde a seta da imagem acima está indicando -> New app
Em Repository você pode copiar o link do GitHub do seu projeto ou procurar nas opções que vão aparecer quando você clicar no espaço do link, afinal o seu GitHub está associado.
Mais abaixo em Branch só temos o main que é do GitHub e mais abaixo vamos colocar o nome do arquivo principal do nosso projeto, neste caso -> meu_app.py.
Temos também a parte de configurações avançadas, clique nela e você vai ser encaminhado para um espaço onde você pode colocar variáveis de ambiente, códigos, senhas que não podem ficar disponíveis, etc.
Neste espaço você pode criar as variáveis de ambiente e atribuir a elas os valores
Como não temos nenhuma variável de ambiente para criar, vou clicar em Deploy e nosso site será carregado e gerado.
Pronto, o site está funcionando perfeitamente e está no ar.
Observe que o link pode parecer estranho, mas é o que foi disponibilizado pelo Streamlit, se você voltar no Streamlit pode copiar o link, pode personalizar, etc.
Você já conhecia a ferramenta Streamlit do Python?
Essa ferramenta permite que você crie sites de maneira fácil sem precisar se preocupar muito com estruturas mais básicas.
Você consegue incluir itens de forma prática e apresentar dados em um site para seus gestores, você é capaz de incluir botões, cores, gráficos e muito mais utilizando a documentação.
Após criar o site com os gráficos, vou te ensinar a fazer o Deploy na segunda aula que está logo na sequência em um passo a passo muito simples! Acompanhe!
Espero que gostem! Até mais,
Para acessar outras publicações de Python, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador