Criar dashboards para o Supabase

Aprenda a criar dashboards usando dados do Supabase, começando com um dashboard de KPI que acompanha cadastros de usuários, total de usuários, e apps adicionados à plataforma. Depois mostra como criar gráficos de ranking para os principais apps e usuários, personalizar tipos e layouts de gráficos, e usar variáveis para uma análise temporal flexível. O Tom também cria um dashboard “Detalhes do app” que usa um seletor de variável para explorar apps individuais, mostrando métricas específicas como número de usos, usuários associados, e ícones. Ele destaca o suporte da Basedash para consultas em linguagem natural, edição de SQL, e integração de várias fontes de dados como Stripe, Google Analytics, e Sentry para construir uma visão completa e interativa dos seus dados de produto ou negócio.

Transcrição

Oi, aqui é o Tom. Vou mostrar como configurar um dashboard dentro da Basedash para o Supabase, um dos nossos produtos favoritos. Nós o usamos para todos os nossos dados de demonstração aqui na Basedash.

Vou te guiar por:

• Conectar o Supabase à Basedash
• Configurar um dashboard para acompanhar KPIs e estatísticas de adoção
• Criar um dashboard para inspecionar um usuário específico dentro da sua aplicação

Passo 1: Conectando o banco de dados

Já tenho o banco de dados do Supabase conectado.

Você vai ver um indicador mostrando que está conectado.

Estamos usando um schema chamado Doc Hunt, que é bem básico:

• users
• docs
• apps

Esse app permite compartilhar itens no seu doc, como uma rede social bem simples que criamos.

Passo 2: Criar um dashboard de KPI

Clique em Novo dashboard, e chame-o de KPIs.

Agora vamos adicionar alguns gráficos:

Métricas principais

• Cadastros de usuários ao longo do tempo
• Número total de usuários
• Número de apps adicionados

Isso nos dá uma boa visão geral:

• Quem está se cadastrando
• Quantos usuários temos
• O que está sendo adicionado à plataforma

Passo 3: Métricas de ranking

Vamos além classificando os dados.

• “Me mostre os apps mais adicionados por número de vezes que aparecem em um doc.”
• “Me mostre os usuários com mais seguidores.”

Isso nos dá um bom ranking:

• O Google Chrome é o app mais adicionado, seguido pelo Visual Studio Code.
• Também podemos ver os principais usuários por uso ou popularidade dos apps.

Passo 4: Personalização do dashboard

Você pode reorganizar os componentes do dashboard como quiser:

• Reduzir o tamanho das métricas principais
• Mover os gráficos
• Mudar os tipos de gráfico (por exemplo, gráfico de linha -> barra temporal)

A Basedash também adiciona variáveis no topo do dashboard para que você possa:

• Mudar os intervalos de datas
• Escolher como os dados são agrupados (por exemplo, diário, semanal)

Você também pode:

• Expandir gráficos em tela cheia
• Ver o histórico completo do chat
• Voltar a versões anteriores
• Editar consultas diretamente no editor SQL

O navegador de schema ao lado ajuda você a explorar e copiar valores para suas consultas.

Passo 5: Dashboard de detalhes do app

Vamos criar outro dashboard chamado Detalhes do app.

Esse dashboard vai nos permitir inspecionar apps específicos:

“Me mostre os detalhes de um app.”

A Basedash interpreta isso e procura:

• Uma tabela que combine com o seu pedido
• Uma variável que possa alimentar um seletor (dropdown) para o app

Ela escolheu um (em ordem alfabética), mas vou definir o padrão como Basedash.

Passo 6: Visão de perfil do app

Agora vamos adicionar mais detalhes:

• “Me mostre o ícone do app.”
• “Me mostre as pessoas que têm esse app no doc delas.”
• “Me mostre a quantidade de vezes que esse app foi adicionado.”

Isso cria uma visão de perfil do app:

• Ícone no topo
• Lista de usuários que adicionaram o app (você vai me ver lá, por exemplo)
• Total como KPI principal

Você também pode alternar entre apps (por exemplo, selecionar Figma) e ver:

• O Figma foi adicionado 98 vezes
• A lista de pessoas que o usam

Passo 7: Trazendo dados adicionais

Uma das melhores partes da Basedash é que você pode trazer qualquer dado conectado.

Agora, estamos usando apenas o Supabase, mas você também poderia conectar:

• Stripe (para mostrar faturas, vendas ao longo do tempo)
• Sentry (para mostrar erros ao longo do tempo)
• Google Analytics
• Google Ads
• LinkedIn Ads
• Ferramentas de rastreamento de eventos como o PostHog
• Ferramentas de marketing por e-mail como o ActiveCampaign

Há mais de 750 fontes de dados que você pode conectar na Basedash.

Basta ir em Fontes de dados > Adicionar fonte e escolher o que você precisa.

Considerações finais

Usando linguagem natural, você pode construir dashboards poderosos a partir de vários serviços, tudo dentro da Basedash.

Estou animado para ver o que você vai construir. Nos avise se tiver alguma dúvida.

É isso por hoje. Até a próxima!