Tamanho de fonte
Alto contraste
Altura de linha

Criando Aplicativos Multipágina com Streamlit

Avatar de Ana Maria Gomes Ana Maria Gomes
7 minutos de leitura 3 meses atrás

Você já imaginou criar um aplicativo web interativo e dinâmico sem precisar ser um expert em programação? Com o Streamlit, isso é possível! Neste guia, vamos explorar como você pode criar multipágina com Streamlit de forma simples e prática, mesmo que você seja um iniciante. Vamos lá?

Introdução ao Streamlit

Streamlit é uma biblioteca de código aberto que transforma scripts de dados em aplicativos web interativos. Ele é especialmente útil para cientistas de dados e analistas que desejam compartilhar suas análises de forma visual e interativa, sem a necessidade de conhecimentos avançados em desenvolvimento web. Com o Streamlit, você pode criar dashboards, visualizações de dados e até mesmo aplicativos completos com apenas algumas linhas de código.

Preparando o Ambiente

Antes de começarmos a criar nosso aplicativo multipágina com streamlit, precisamos preparar nosso ambiente de desenvolvimento. Vamos ver como instalar a biblioteca e configurar tudo para começar a codificar.

Instalando o Streamlit

A instalação do Streamlit é bastante simples. Você pode instalá-lo usando o pip, o gerenciador de pacotes do Python. Basta abrir o terminal e executar o seguinte comando:

pip install streamlit

Configurando o Ambiente de Desenvolvimento

Depois de instalar o Streamlit, é importante configurar seu ambiente de desenvolvimento para facilitar o processo de criação do aplicativo. Certifique-se de ter um editor de código de sua preferência, como VSCode ou PyCharm, e crie uma nova pasta para o seu projeto.

App Multipágina

Agora que nosso ambiente está pronto, vamos entender o que é um aplicativo multipágina e por que ele pode ser útil.

O que é um App Multipágina?

Um aplicativo multipágina é um tipo de aplicativo que permite a navegação entre diferentes páginas ou seções dentro do mesmo projeto. Um app multipágina Streamlit é criado organizando o código em diferentes arquivos dentro de uma pasta específica chamada “pages”. Cada arquivo representa uma página distinta do aplicativo. Isso facilita a organização do código e a criação de interfaces mais complexas e estruturadas, permitindo que os usuários naveguem entre várias funcionalidades ou visualizações de dados sem sair do aplicativo principal.

Benefícios de Usar um App Multipágina

Os aplicativos multipágina são especialmente úteis quando você tem diferentes seções ou funcionalidades que deseja separar. Por exemplo, você pode ter uma página de introdução, uma página de gráficos, uma página de mapas e uma página de tabelas de dados. Isso torna o aplicativo mais organizado e fácil de navegar.

Passo a Passo para Criar um App Multipágina

Vamos ao que interessa: como criar um aplicativo multipágina com Streamlit. Vamos seguir um passo a passo para estruturar nosso projeto, mover o conteúdo para as páginas e configurar a navegação entre elas.

Estruturando o Projeto

Primeiro, precisamos estruturar nosso projeto. Crie uma pasta chamada pages dentro da pasta do seu projeto. Essa pasta será onde colocaremos os arquivos de cada página do nosso aplicativo.

Criando a Pasta de Páginas

Dentro da pasta pages, crie arquivos Python para cada página do seu aplicativo. Por exemplo, você pode criar os seguintes arquivos:

  • 1_introducao.py
  • 2_graficos.py
  • 3_mapas.py
  • 4_tabelas.py

Movendo o Conteúdo para as Páginas

Agora, mova o conteúdo de cada funcionalidade para os respectivos arquivos. Por exemplo, o conteúdo da página de introdução vai para o arquivo 1_introducao.py, e assim por diante.

Configurando a Navegação entre Páginas

Para configurar a navegação entre as páginas, vamos usar a função st.sidebar.selectbox para criar um menu de navegação na barra lateral. No arquivo principal do seu projeto, adicione o seguinte código:

import streamlit as st

# Funções para cada página
def introducao():
    st.title("Introdução")
    st.write("Bem-vindo ao nosso aplicativo multipágina!")

def graficos():
    st.title("Gráficos")
    st.write("Aqui você pode ver alguns gráficos.")

def mapas():
    st.title("Mapas")
    st.write("Aqui você pode ver alguns mapas.")

def tabelas():
    st.title("Tabelas de Dados")
    st.write("Aqui você pode ver algumas tabelas de dados.")

# Dicionário de páginas
paginas = {
    "Introdução": introducao,
    "Gráficos": graficos,
    "Mapas": mapas,
    "Tabelas de Dados": tabelas
}

# Menu de navegação
st.sidebar.title("Navegação")
pagina_selecionada = st.sidebar.selectbox("Selecione uma página", paginas.keys())

# Exibir a página selecionada
paginas[pagina_selecionada]()

Exemplo Prático: Criando um App Multipágina

Vamos criar um exemplo prático de um aplicativo multipágina com quatro páginas: introdução, gráficos, mapas e tabelas de dados.

Página de Introdução

No arquivo 1_introducao.py, adicione o seguinte código:

import streamlit as st

def introducao():
    st.title("Introdução")
    st.write("Bem-vindo ao nosso aplicativo multipágina!")

Página de Gráficos

No arquivo 2_graficos.py, adicione o seguinte código:

import streamlit as st
import matplotlib.pyplot as plt

def graficos():
    st.title("Gráficos")
    st.write("Aqui você pode ver alguns gráficos.")

    # Exemplo de gráfico
    fig, ax = plt.subplots()
    ax.plot([1, 2, 3, 4], [10, 20, 25, 30])
    st.pyplot(fig)

Página de Mapas

No arquivo 3_mapas.py, adicione o seguinte código:

import streamlit as st
import pandas as pd
import pydeck as pdk

def mapas():
    st.title("Mapas")
    st.write("Aqui você pode ver alguns mapas.")

    # Exemplo de mapa
    df = pd.DataFrame({
        'lat': [37.76, 37.77, 37.78],
        'lon': [-122.4, -122.41, -122.42]
    })
    st.pydeck_chart(pdk.Deck(
        initial_view_state=pdk.ViewState(
            latitude=37.76,
            longitude=-122.4,
            zoom=11,
            pitch=50,
        ),
        layers=[
            pdk.Layer(
                'HexagonLayer',
                data=df,
                get_position='[lon, lat]',
                radius=200,
                elevation_scale=4,
                elevation_range=[0, 1000],
                extruded=True,
            ),
        ],
    ))

Página de Tabelas de Dados

No arquivo 4_tabelas.py, adicione o seguinte código:

import streamlit as st
import pandas as pd

def tabelas():
    st.title("Tabelas de Dados")
    st.write("Aqui você pode ver algumas tabelas de dados.")

    # Exemplo de tabela
    df = pd.DataFrame({
        'Nome': ['Alice', 'Bob', 'Charlie'],
        'Idade': [24, 27, 22]
    })
    st.write(df)

Executando e Testando Seu App Multipágina

Finalmente, vamos ver como rodar e testar nosso aplicativo multipágina.

Como Rodar o App

Para rodar o aplicativo, abra o terminal na pasta do seu projeto e execute o seguinte comando:

streamlit run nome_do_seu_arquivo_principal.py

Testando a Navegação entre Páginas

Abra o navegador e acesse o endereço fornecido pelo Streamlit. Você verá a barra lateral com o menu de navegação. Teste a navegação entre as páginas para garantir que tudo está funcionando corretamente.

Conclusão

Neste guia, aprendemos como criar um aplicativo multipágina com Streamlit, desde a preparação do ambiente até a criação e navegação entre as páginas. Vimos como estruturar o projeto, mover o conteúdo para as páginas e configurar a navegação de forma simples e prática.

Se você gostou deste tutorial e quer aprender mais sobre Streamlit e outras ferramentas de visualização de dados, confira nossos outros artigos e tutoriais. Continue explorando e aprimorando suas habilidades em programação!

Referências

Imagem de um notebook

Cursos de programação gratuitos com certificado

Aprenda a programar e desenvolva soluções para o seu trabalho com Python para alcançar novas oportunidades profissionais. Aqui na Asimov você encontra:

  • Conteúdos gratuitos
  • Projetos práticos
  • Certificados
  • +20 mil alunos e comunidade exclusiva
  • Materiais didáticos e download de código
Inicie agora

Comentários

Comentar
Faça parte da discussão Crie sua conta gratuita e compartilhe
sua opinião nos comentários
Entre para a Asimov

Como estruturar o código de um aplicativo Streamlit com uma tela de login e múltiplas páginas, onde cada página é representada por um arquivo .py separado dentro de um diretório secundário? Além disso, como garantir que os usuários só possam acessar todas as páginas do aplicativo após efetuarem o login na pagna inicial?

Avatar de Valmir Nascimento Rastely Junior
Valmir Nascimento Rastely Junior 20/10/2024

Valmir,

Estou iniciando um projeto desse agora.

estou desenhando da seguinte forma,

uso o multipages tô olhando aqui e na documentação.

Mas meu desenho inicial (até dar errado), antes de encontrar esse material (em resumo ontem), crio a pagina inicial com um botão que manda para página de login, estava pensando em usar o st.Page. e st.navigation mas ainda não escrevi o código..

LC
Lino Carvalho 22/10/2024