Tutoriales
- Primeros Pasos
- First Project
- Aplicaciones Web
- Aplicaciones Móviles
- React Native App
- SaaS Platform
- E-commerce Platform
- Real-Time Dashboard
- Location-Based App
- Mobile E-commerce
- Optimizing Sales
- Publishing Your App
- Acceptance Criteria
- Template Business
- Watching Virtuoso
Aprenderás:
- Conexiones WebSocket en tiempo real
- Componentes de gráficos interactivos
- Agregación y filtrado de datos
- Diseños de paneles adaptables
- Notificaciones en vivo
Aplicación de Panel de Control en Tiempo Real
Crea un panel de datos con actualizaciones en vivo y gráficos interactivos
Los paneles en tiempo real son esenciales para monitorear métricas de negocio, el estado del sistema o cualquier dato que cambie con frecuencia. En este tutorial, crearás un panel totalmente funcional con actualizaciones en vivo.
Observa cómo tus gráficos se actualizan en tiempo real a medida que ingresan los datos.
Requisitos previos
- Cuenta de ZBuild Studio
- Comprensión básica de visualización de datos
- Haber completado los tutoriales de 'Primeros Pasos'
Características del Panel
Nuestro panel en tiempo real incluirá:
Tarjetas de Métricas en Vivo
Números clave que se actualizan en tiempo real
Gráficos de Series Temporales
Datos históricos con actualizaciones en vivo
Tablas de Datos
Cuadrículas de datos ordenables y filtrables
Sistema de Alertas
Notificaciones cuando se superan los umbrales
Filtros de Rango de Fechas
Ver datos para períodos de tiempo específicos
Funciones de Exportación
Descargar datos como CSV o PDF
Paso 1: Define tu Panel
Describe los requisitos de tu panel a Conductor.
Quiero crear un panel de análisis en tiempo real.
Características:
- Tarjetas de métricas en vivo (usuarios totales, sesiones activas, ingresos)
- Gráfico de series temporales que muestre la actividad a lo largo del tiempo
- Mapa geográfico de ubicaciones de usuarios
- Tabla de eventos recientes con actualización automática
- Notificaciones de alerta para anomalías
- Selector de rango de fechas para datos históricos
- Exportación a CSV/PDF
Diseño: Tema oscuro, adaptable, interfaz limpia
Tiempo real: Actualizaciones por WebSocket cada 5 segundosPaso 2: Arquitectura de WebSocket
Virtuoso configurará una conexión WebSocket para la entrega de datos en tiempo real.
- Configuración del servidor WebSocket con gestión de salas
- Conexión del cliente con reconexión automática
- Transmisión de datos a intervalos configurables
- Actualizaciones delta eficientes (solo datos modificados)
- Indicadores de estado de la conexión
Paso 3: Componentes de Gráficos
Los gráficos interactivos mostrarán tus datos de manera atractiva.
Los gráficos se animan automáticamente cuando llegan nuevos datos a través de WebSocket.
Gráficos de Líneas
Datos de series temporales con animaciones fluidas
Gráficos de Barras
Visualización de datos comparativos
Gráficos de Pastel/Dona
Desgloses de distribución
Mapas
Visualización de datos geográficos
Paso 4: Sistema de Alertas
Configura alertas para que se te notifique cuando las métricas superen los umbrales.
- Definir condiciones de umbral
- Monitoreo de umbrales en tiempo real
- Notificaciones emergentes (toast) para alertas
- Historial de alertas y confirmación
- Notificaciones opcionales por correo electrónico/SMS
Lo que has creado
- Transmisión de datos por WebSocket en tiempo real
- Gráficos interactivos y animados
- Diseño de panel adaptable
- Sistema de alertas y notificaciones
- Funcionalidad de exportación de datos
Próximos Pasos
Plataforma SaaS multi-inquilino
Convierte tu panel en un producto SaaS
Publicar en el Marketplace
Vende tu plantilla de panel
¿Listo para crear tu panel?
Comienza a crear tu panel en tiempo real hoy mismo.