Como Criar um Dashboard Interativo com VS Code e Codex: O Guia Completo
Introdução
Hoje em dia, a visualização de dados é fundamental para a tomada de decisões informadas nas empresas. Um dashboard interativo não apenas permite que você visualize informações importantes de forma atrativa, mas também facilita a interpretação desses dados. Neste guia, você aprenderá a criar um dashboard dinâmico usando o VS Code e o Codex, que permitirá mostrar seu faturamento por cidade, por mês e muito mais. Prepare-se para revolucionar a forma como você apresenta informações!
Por que Usar um Dashboard?
A primeira pergunta que surge é: por que investir tempo na criação de um dashboard? Um dashboard bem projetado oferece as seguintes vantagens:
- Visualizações Atraentes: Transforme dados brutos em gráficos informativos que facilitam a interpretação.
- Interatividade: Permite que você filtre informações, tornando a análise mais específica.
- Tomada de Decisão Informada: Com dados visualmente acessíveis, as decisões podem ser mais rápidas e assertivas.
Preparativos Iniciais
Requisitos
Antes de começarmos, você precisará de algumas ferramentas:
- Editor de Texto: Vamos utilizar o VS Code, que pode ser baixado facilmente através do site oficial.
- Codex: É uma extensão necessária para interagir com o modelo GPT. Você pode instalá-la diretamente na seção de extensões do VS Code.
Instalando o VS Code
- Baixe o VS Code: Siga as instruções de instalação para Windows, Mac ou Linux.
- Instale a Extensão Codex: No VS Code, vá até a seção de extensões, busque por “Codex” e instale.
Criando Seu Dashboard
Passo 1: Preparando suas Planilhas
- Criação de Pasta: Crie uma nova pasta em seu computador e adicione sua planilha de dados a ela.
- Estrutura da Planilha: A planilha deve incluir todas as informações necessárias, como clientes, faturamento e status de pagamento.
Passo 2: Configurando o VS Code
Abrir a Pasta no VS Code:
- Clique em
File>Open Foldere selecione a pasta que você criou.
- Clique em
Abrir o Codex: Clique na extensão Codex que você instalou no canto esquerdo do VS Code.
Passo 3: O Prompt Mágico
Com sua planilha pronta e o Codex ativado, você precisará enviar um prompt para gerar o dashboard. O prompt deve especificar que você deseja criar um dashboard com métricas de faturamento e gráficos interativos, adaptando conforme necessário ao nome da sua planilha.
Passo 4: Executando a Aplicação
Após enviar o comando para o Codex processar, você verá várias saídas no terminal do VS Code. O Codex criará o código necessário para que seu dashboard funcione:
Instalar Dependências: Siga as instruções do terminal para instalar dependências necessárias, usando o comando
pip install.Executar o Streamlit: Após a instalação, use o comando
streamlit run app.pypara iniciar o servidor local do Streamlit.
Passo 5: Interagindo com seu Dashboard
Com o Streamlit em execução, você verá uma interface gráfica com diversos filtros que permitirão visualizar dados de maneira eficiente. Você pode filtrar por:
- Cidade
- Plano (Básico, Intermediário, Premium)
- Status (Pago, Pendente, Cancelado)
Cada ajuste que você faz nos filtros resultará em uma atualização em tempo real dos gráficos e dados apresentados.
Personalizando seu Dashboard
Alterando o Tema
Caso o tema original do dashboard não seja do seu agrado, é simples mudá-lo. Basta informar ao Codex que você deseja um tema claro e ele fará as alterações necessárias automaticamente.
Melhorias Visuais
Você também pode solicitar a adição de novos gráficos ou a modificação da apresentação de dados. O Codex entende suas instruções e adapta o código conforme sua necessidade, tornando a criação mais dinâmica.
Conclusão
Criar um dashboard interativo usando VS Code e Codex é uma maneira eficaz de apresentar dados importantes de sua empresa de forma clara e atrativa. Agora, você pode mostrar as informações de faturamento por cidade, mensalmente, e outros filtros interativos, tudo isso sem complicações e com poucos cliques.
Se você gostou deste guia e deseja mais conteúdos como este, não se esqueça de se inscrever no nosso canal. Aprenda como usar inteligência artificial para criar automações, sistemas de CRM e muito mais! Até a próxima!
Prompts e códigos utilizados no vídeo:
Objetivo:
Crie um projeto completo em Python chamado “dashboard” que lê a planilha NOMEDASUAPLANILHA.xlsx e gera um dashboard interativo local com filtros e gráficos dinâmicos.
O projeto deve usar Streamlit e Plotly, com visual bonito, responsivo e pronto para rodar com streamlit run app.py.
⚙ 1⃣ Estrutura do projeto
/dashboard_faturamento
│
├── app.py
├── requirements.txt
└── base_clientes_faturamento_completa.xlsx
📦 2⃣ Dependências (requirements.txt)
streamlit
pandas
plotly
openpyxl
🧱 3⃣ Lógica do app.py
Importar bibliotecas
import streamlit as st
import pandas as pd
import plotly.express as px
Título e configuração
st.set_page_config(page_title="Dashboard de Faturamento", layout="wide")
st.title("📊 Dashboard de Faturamento e Pagamentos")
st.caption("Base: NOMEDASUAPLANILHA.xlsx")
Leitura da planilha
df = pd.read_excel("NOMEDASUAPLANILHA.xlsx")
Filtros interativos (sidebar)
st.sidebar.header("Filtros")
cidades = st.sidebar.multiselect("Cidade", df["Cidade"].unique())
planos = st.sidebar.multiselect("Plano", df["Plano"].unique())
status = st.sidebar.multiselect("Status", df["Status"].unique())
meses = st.sidebar.multiselect("Mês de Referência", df["Mes_Referencia"].unique())
df_filtrado = df.copy()
if cidades:
df_filtrado = df_filtrado[df_filtrado["Cidade"].isin(cidades)]
if planos:
df_filtrado = df_filtrado[df_filtrado["Plano"].isin(planos)]
if status:
df_filtrado = df_filtrado[df_filtrado["Status"].isin(status)]
if meses:
df_filtrado = df_filtrado[df_filtrado["Mes_Referencia"].isin(meses)]
Indicadores principais (cards)
total_faturado = df_filtrado["Valor_Pago"].sum()
total_clientes = df_filtrado["ID_Cliente"].nunique()
media_pagamento = df_filtrado["Valor_Pago"].mean()
total_atrasados = df_filtrado[df_filtrado["Atrasado"] == "Sim"].shape[0]
col1, col2, col3, col4 = st.columns(4)
col1.metric("💰 Faturamento Total", f"R$ {total_faturado:,.2f}")
col2.metric("👥 Clientes", total_clientes)
col3.metric("💳 Valor Médio Pago", f"R$ {media_pagamento:,.2f}")
col4.metric("⏰ Pagamentos Atrasados", total_atrasados)
Gráficos interativos com Plotly
tab1, tab2, tab3 = st.tabs(["📈 Faturamento por Cidade", "📅 Faturamento Mensal", "🏷 Planos e Status"])
with tab1:
fig1 = px.bar(df_filtrado, x="Cidade", y="Valor_Pago", color="Plano", title="Faturamento por Cidade", barmode="group")
st.plotly_chart(fig1, use_container_width=True)
with tab2:
fig2 = px.line(df_filtrado.groupby("Mes_Referencia")["Valor_Pago"].sum().reset_index(),
x="Mes_Referencia", y="Valor_Pago", title="Faturamento por Mês", markers=True)
st.plotly_chart(fig2, use_container_width=True)
with tab3:
fig3 = px.pie(df_filtrado, names="Plano", values="Valor_Pago", title="Distribuição de Faturamento por Plano")
st.plotly_chart(fig3, use_container_width=True)
Tabela detalhada
st.subheader("📋 Dados Detalhados")
st.dataframe(df_filtrado, use_container_width=True)
———————————————————————————————————————————————————-
cd "/Users/diretorioondeestasuaplanilha"
python3 -m pip install -r requirements.txt
———————————————————————————————————————————————————-
cd "/Users/gustavocampos/Documents/Dashboard planilha/dashboard_faturamento"
python3 -m streamlit run app.py
Você usa o codex usando a API do GPT?
Streamlit é muito bom
esse sistema funcionária se fizesse em php ao inves do phyton?
Sensacional! Conteúdo super didático, claro e objetivo! Recomendo sem medo!
Seria possivel o imput do dado acontecer direto no dashboard? Utilizar a planilha apenas como modelo de criacao do dash..
Mano seu conteúdo é TOP, ganhou mais um inscrito. Uma pergunta, eu tenho o ChatGPT pago Plus, tem algum limite para usar esse rucurso do CODEX, exemplo X Tokens por mês?
Mano seu conteúdo é top, não desista, breve vc vai explodir com seguidores. Grande abraço e sucesso
planilhas no google sheet daria certo também?
Como usa o chatgpt direto no vscode
sera que conseguimos extrair esses dados de um pdf em vez de planilha?
Poderia fazer um video mostrando como você cria os prompts para os projetos, e como vc vai moldando pro que precisa