Crear dashboards para Supabase

Aprende a crear dashboards usando datos de Supabase, comenzando con un dashboard de KPI que sigue los registros de usuarios, el total de usuarios, y las apps añadidas a la plataforma. Luego muestra cómo crear gráficos de ranking para las mejores apps y usuarios, personalizar tipos de gráficos y diseños, y usar variables para un análisis flexible basado en el tiempo. Tom también crea un dashboard de “Detalles de la app” que usa un selector de variable para explorar apps individuales, mostrando métricas específicas como el número de usos, los usuarios asociados, y los iconos. Destaca el soporte de Basedash para consultas en lenguaje natural, edición de SQL, e integración de varias fuentes de datos como Stripe, Google Analytics, y Sentry para construir una vista completa e interactiva de tus datos de producto o negocio.

Transcripción

Hola, soy Tom. Te voy a mostrar cómo configurar un dashboard dentro de Basedash para Supabase, uno de nuestros productos favoritos. Lo usamos para todos nuestros datos de demostración aquí en Basedash.

Te voy a guiar a través de:

• Conectar Supabase a Basedash
• Configurar un dashboard para seguir KPIs y estadísticas de adopción
• Crear un dashboard para inspeccionar a un usuario específico dentro de tu aplicación

Paso 1: Conectar la base de datos

Ya tengo la base de datos de Supabase conectada.

Verás un indicador que muestra que está conectada.

Estamos usando un esquema llamado Doc Hunt, que es bastante básico:

• users
• docs
• apps

Esta app te permite compartir elementos en tu doc, como un mini sitio de redes sociales que construimos.

Paso 2: Crear un dashboard de KPI

Haz clic en Nuevo dashboard, y nómbralo KPIs.

Ahora agreguemos algunos gráficos:

Métricas clave

• Registros de usuarios a lo largo del tiempo
• Número total de usuarios
• Número de apps añadidas

Esto nos da una buena vista general:

• Quién se está registrando
• Cuántos usuarios tenemos
• Qué se está añadiendo a la plataforma

Paso 3: Métricas de ranking

Vamos más allá clasificando los datos.

• “Muéstrame las apps más añadidas por número de veces que aparecen en un doc.”
• “Muéstrame los usuarios con más seguidores.”

Esto nos da un buen ranking:

• Google Chrome es la app más añadida, seguida de Visual Studio Code.
• También podemos ver los mejores usuarios por uso o popularidad de apps.

Paso 4: Personalización del dashboard

Puedes reorganizar los componentes del dashboard como quieras:

• Reducir el tamaño de las métricas principales
• Mover los gráficos
• Cambiar los tipos de gráfico (por ejemplo, línea -> barra temporal)

Basedash también añade variables en la parte superior del dashboard para que puedas:

• Cambiar los rangos de fechas
• Elegir cómo se agrupan los datos (por ejemplo, diario, semanal)

También puedes:

• Expandir los gráficos a pantalla completa
• Ver el historial completo del chat
• Volver a versiones anteriores
• Editar las consultas directamente en el editor SQL

El explorador de esquemas al costado te ayuda a explorar y copiar valores en tus consultas.

Paso 5: Dashboard de detalles de la app

Vamos a construir otro dashboard llamado Detalles de la app.

Este dashboard nos permitirá inspeccionar apps específicas:

“Muéstrame los detalles de una app.”

Basedash interpreta esto y busca:

• Una tabla que coincida con tu solicitud
• Una variable que pueda alimentar un selector (menú desplegable) para la app

Eligió una (alfabéticamente), pero voy a establecer el valor predeterminado en Basedash.

Paso 6: Vista del perfil de la app

Ahora agreguemos más detalles:

• “Muéstrame el icono de la app.”
• “Muéstrame las personas que tienen esta app en su doc.”
• “Muéstrame el número de veces que se ha añadido esta app.”

Esto crea una vista de perfil de la app:

• Icono en la parte superior
• Lista de usuarios que la añadieron (por ejemplo, me verás ahí)
• Total como KPI principal

También puedes cambiar de app (por ejemplo, seleccionar Figma) y ver:

• Figma se ha añadido 98 veces
• La lista de personas que la usan

Paso 7: Incorporar datos adicionales

Una de las mejores partes de Basedash es que puedes incorporar cualquier dato conectado.

Ahora mismo, solo estamos usando Supabase, pero también podrías conectar:

• Stripe (para mostrar facturas, ventas a lo largo del tiempo)
• Sentry (para mostrar errores a lo largo del tiempo)
• Google Analytics
• Google Ads
• LinkedIn Ads
• Herramientas de seguimiento de eventos como PostHog
• Herramientas de marketing por correo electrónico como ActiveCampaign

Hay más de 750 fuentes de datos que puedes conectar en Basedash.

Solo ve a Fuentes de datos > Añadir fuente y elige lo que necesites.

Reflexiones finales

Usando lenguaje natural, puedes construir dashboards potentes a partir de múltiples servicios, todo dentro de Basedash.

Estoy emocionado por ver lo que construyas. Avísanos si tienes alguna pregunta.

Eso es todo por hoy. ¡Nos vemos!