Atualizando seu Web App em Tempo Real com Streamlit e Widgets

Você já imaginou criar um web app que se atualiza em tempo real, sem precisar de um conhecimento profundo em desenvolvimento web? Com o Streamlit, isso é possível! Neste artigo, vamos explorar como você pode usar o Streamlit e seus widgets para criar web apps interativos e dinâmicos. Vamos abordar desde a configuração do ambiente até a implementação de um dashboard interativo completo. Então, prepare-se para transformar suas ideias em realidade com poucas linhas de código!

Introdução ao Streamlit

O que é o Streamlit?

O Streamlit é uma biblioteca de código aberto em Python que facilita a criação de aplicativos web interativos. Com ele, você pode transformar scripts de dados em aplicativos web bonitos e funcionais em questão de minutos. Mas por que usar o Streamlit? Simples: ele é intuitivo, rápido e não requer conhecimentos avançados de desenvolvimento web. Se você já sabe programar em Python, está a um passo de criar seu próprio web app.

O Streamlit permite que você crie aplicativos web usando apenas Python. Ele é especialmente útil para cientistas de dados e analistas que desejam compartilhar suas análises de forma interativa. Com o Streamlit, você pode adicionar gráficos, tabelas, textos e até mesmo widgets interativos com poucas linhas de código.

Por que usar Streamlit para criar Web Apps?

A principal vantagem do Streamlit é a simplicidade. Você não precisa aprender HTML, CSS ou JavaScript para criar um web app. Além disso, o Streamlit é altamente personalizável e permite que você crie interfaces de usuário ricas e interativas. Isso torna o Streamlit uma excelente escolha para prototipagem rápida e para compartilhar insights de dados de maneira visualmente atraente.

Configurando o Ambiente

Antes de começarmos a criar nosso web app, precisamos configurar nosso ambiente de desenvolvimento. Isso inclui a instalação do Streamlit e a configuração do ambiente de desenvolvimento.

Instalando o Streamlit

Para instalar o Streamlit, você pode usar o pip, o gerenciador de pacotes do Python. Basta abrir o terminal e digitar o seguinte comando:

pip install streamlit

Configurando o ambiente de desenvolvimento

Depois de instalar o Streamlit, você pode criar um novo projeto e começar a desenvolver seu web app. Recomendo usar um ambiente virtual para gerenciar as dependências do seu projeto. Para criar um ambiente virtual, use os seguintes comandos:

python -m venv myenv
source myenv/bin/activate  # No Windows, use `myenv\Scripts\activate`

Com o ambiente virtual ativado, você pode instalar o Streamlit e outras dependências necessárias.

Criando seu Primeiro Web App

Agora que nosso ambiente está configurado, vamos criar nosso primeiro web app com o Streamlit. Vamos começar com uma estrutura básica e, em seguida, adicionar funcionalidades interativas.

Estrutura básica de um app Streamlit

A estrutura básica de um app Streamlit é bastante simples. Você cria um arquivo Python e usa a função streamlit.write para adicionar conteúdo ao seu app. Veja um exemplo básico:

import streamlit as st

st.title("Meu Primeiro Web App")
st.write("Olá, mundo!")

Para rodar o app, basta abrir o terminal e digitar:

streamlit run nome_do_arquivo.py

Exemplo simples de um Web App

Vamos criar um exemplo um pouco mais complexo, adicionando um gráfico interativo. Para isso, vamos usar a biblioteca pandas para manipulação de dados e matplotlib para visualização.

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

# Carregar dados
df = pd.DataFrame({
    'x': range(10),
    'y': [x**2 for x in range(10)]
})

# Criar gráfico
fig, ax = plt.subplots()
ax.plot(df['x'], df['y'])

# Exibir no Streamlit
st.title("Gráfico Interativo")
st.pyplot(fig)

Entendendo Widgets no Streamlit

Os widgets são componentes interativos que permitem aos usuários interagir com seu web app. Eles são essenciais para criar aplicativos dinâmicos e responsivos.

O que são widgets?

Widgets são elementos de interface do usuário, como botões, caixas de seleção e campos de entrada, que permitem aos usuários interagir com seu aplicativo. No Streamlit, você pode adicionar widgets com funções simples, como st.button, st.selectbox e st.text_input.

Tipos de widgets disponíveis no Streamlit

No Streamlit, os widgets são componentes interativos que permitem aos usuários filtrar e manipular dados em tempo real. Entre os principais widgets disponíveis estão os radio buttons, select box, multiselect, text input, e calendar widget. Além desses, há componentes adicionais como o Streamlit Player para vídeos, telas de login com o Streamlit Login e Sign Up Library, e o Drawable Canvas para desenhos e processamento de imagens. Esses widgets são essenciais para criar dashboards dinâmicos e interativos, facilitando a visualização e análise de dados.

Atualizando o Web App em Tempo Real

Uma das funcionalidades mais poderosas do Streamlit é a capacidade de atualizar o web app em tempo real. Isso é especialmente útil para aplicativos que precisam exibir dados dinâmicos ou em tempo real.

Como funciona a atualização em tempo real no Streamlit?

A atualização em tempo real no Streamlit é realizada através de um processo chamado “polling”. Esse método envolve a verificação periódica de mudanças em uma base de dados ou estado do aplicativo. No contexto do Streamlit, a cada intervalo de tempo definido, o aplicativo verifica se há novas informações ou atualizações. Se houver, ele executa uma ação específica, como recarregar a página ou atualizar um widget. Isso permite que os dados exibidos no aplicativo sejam atualizados automaticamente, proporcionando uma experiência dinâmica e interativa para o usuário.

Exemplo prático de atualização em tempo real

Vamos criar um exemplo de um contador que se atualiza em tempo real. Para isso, vamos usar a função time.sleep para simular uma atualização periódica.

import streamlit as st
import time

st.title("Contador em Tempo Real")

if 'count' not in st.session_state:
    st.session_state.count = 0

increment = st.button("Incrementar")

if increment:
    st.session_state.count += 1

st.write("Contagem:", st.session_state.count)

# Atualizar a cada 1 segundo
time.sleep(1)
st.experimental_rerun()

Implementando Widgets para Interatividade

Adicionar widgets ao seu web app é uma maneira eficaz de aumentar a interatividade e melhorar a experiência do usuário. Vamos ver como adicionar alguns widgets ao nosso app.

Adicionando widgets ao seu Web App

Vamos adicionar um widget de seleção e um campo de entrada de texto ao nosso app. Isso permitirá que os usuários filtrem dados e insiram informações.

import streamlit as st
import pandas as pd

# Carregar dados
df = pd.DataFrame({
    'nome': ['Alice', 'Bob', 'Charlie', 'David'],
    'idade': [24, 27, 22, 32]
})

# Adicionar widgets
nome = st.selectbox("Selecione um nome", df['nome'])
idade = st.text_input("Digite a idade")

# Filtrar dados
df_filtrado = df[df['nome'] == nome]

# Exibir dados filtrados
st.write("Dados Filtrados:", df_filtrado)

# Atualizar idade
if idade:
    df.loc[df['nome'] == nome, 'idade'] = int(idade)
    st.write("Dados Atualizados:", df)

Exemplo de uso de widgets para atualizar dados em tempo real

Vamos criar um exemplo onde os dados são atualizados em tempo real com base na entrada do usuário. Neste exemplo, vamos usar um controle deslizante para ajustar um valor e ver a atualização em tempo real.

import streamlit as st
import pandas as pd

# Carregar dados
df = pd.DataFrame({
    'x': range(10),
    'y': [x**2 for x in range(10)]
})

# Adicionar controle deslizante
valor = st.slider("Selecione um valor", 0, 9, 0)

# Filtrar dados
df_filtrado = df[df['x'] <= valor]

# Exibir dados filtrados
st.write("Dados Filtrados:", df_filtrado)

Exemplo Completo: Dashboard Interativo

Agora que entendemos como usar o Streamlit e seus widgets, vamos criar um dashboard interativo completo. Este exemplo combinará tudo o que aprendemos até agora.

Passo a passo para criar um dashboard interativo

Vamos criar um dashboard que exibe dados de vendas e permite que os usuários filtrem os dados por data e categoria. Vamos usar widgets para selecionar as datas e categorias e atualizar o dashboard em tempo real.

import streamlit as st
import pandas as pd
from datetime import date, timedelta

# Carregar dados
df = pd.DataFrame({
    'data': pd.date_range(start='1/1/2022', periods=100),
    'categoria': ['A', 'B', 'C', 'D'] * 25,
    'vendas': [x * 10 for x in range(100)]
})

# Adicionar widgets
data_inicio = st.date_input("Data Inicial", date.today() - timedelta(days=30))
data_final = st.date_input("Data Final", date.today())
categoria = st.selectbox("Selecione a Categoria", df['categoria'].unique())

# Filtrar dados
df_filtrado = df[(df['data'] >= data_inicio) & (df['data'] <= data_final) & (df['categoria'] == categoria)]

# Exibir dados filtrados
st.write("Dados Filtrados:", df_filtrado)

# Criar gráfico
st.line_chart(df_filtrado.set_index('data')['vendas'])

Código completo do exemplo

Aqui está o código completo do nosso dashboard interativo:

import streamlit as st
import pandas as pd
from datetime import date, timedelta

# Carregar dados
df = pd.DataFrame({
    'data': pd.date_range(start='1/1/2022', periods=100),
    'categoria': ['A', 'B', 'C', 'D'] * 25,
    'vendas': [x * 10 for x in range(100)]
})

# Adicionar widgets
data_inicio = st.date_input("Data Inicial", date.today() - timedelta(days=30))
data_final = st.date_input("Data Final", date.today())
categoria = st.selectbox("Selecione a Categoria", df['categoria'].unique())

# Filtrar dados
df_filtrado = df[(df['data'] >= data_inicio) & (df['data'] <= data_final) & (df['categoria'] == categoria)]

# Exibir dados filtrados
st.write("Dados Filtrados:", df_filtrado)

# Criar gráfico
st.line_chart(df_filtrado.set_index('data')['vendas'])

Dicas e Boas Práticas

Para garantir que seu web app seja eficiente e fácil de usar, é importante seguir algumas boas práticas de desenvolvimento.

Melhores práticas para desenvolvimento com Streamlit

1. Mantenha o código organizado: Use funções e módulos para organizar seu código.
2. Use cache: Utilize a função st.cache para armazenar resultados de cálculos pesados e evitar recomputações desnecessárias.
3. Teste seu app: Teste seu app em diferentes navegadores e dispositivos para garantir que ele funcione corretamente.

Dicas para otimizar a performance do seu Web App

1. Reduza o tamanho dos dados: Filtre e agregue dados antes de carregá-los no Streamlit.
2. Use gráficos eficientes: Prefira gráficos que sejam rápidos de renderizar.
3. Evite loops desnecessários: Minimize o uso de loops e operações pesadas dentro do código do Streamlit.

Conclusão

Neste artigo, exploramos como usar o Streamlit e seus widgets para criar web apps interativos e dinâmicos. Aprendemos a configurar o ambiente, criar um web app básico, adicionar widgets e implementar atualizações em tempo real. Também vimos um exemplo completo de um dashboard interativo e discutimos algumas boas práticas para otimizar a performance do seu app.

Se você está interessado em aprender mais sobre o Streamlit e outras ferramentas de visualização de dados, recomendo explorar os cursos e tutoriais disponíveis na Asimov Academy. Continue experimentando e aprimorando suas habilidades para criar web apps cada vez mais sofisticados e úteis!

Referências

• Streamlit Documentation
• Asimov Academy
• Matplotlib Documentation