Tutoriels
- Premiers pas
- First Project
- Applications Web
- Applications mobiles
- 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
Vous apprendrez :
- Connexions WebSocket en temps réel
- Composants de graphiques interactifs
- Agrégation et filtrage de données
- Mises en page de tableaux de bord responsives
- Notifications en direct
Application de tableau de bord en temps réel
Créez un tableau de bord de données avec des mises à jour en direct et des graphiques interactifs
Les tableaux de bord en temps réel sont essentiels pour surveiller les indicateurs commerciaux, la santé du système ou toute donnée qui change fréquemment. Dans ce tutoriel, vous allez construire un tableau de bord entièrement fonctionnel avec des mises à jour en direct.
Regardez vos graphiques se mettre à jour en temps réel au fur et à mesure que les données arrivent.
Prérequis
- Compte ZBuild Studio
- Compréhension de base de la visualisation de données
- Tutoriels 'Premiers pas' terminés
Fonctionnalités du tableau de bord
Notre tableau de bord en temps réel comprendra :
Cartes de métriques en direct
Chiffres clés mis à jour en temps réel
Graphiques de séries chronologiques
Données historiques avec mises à jour en direct
Tableaux de données
Grilles de données triables et filtrables
Système d'alerte
Notifications lorsque les seuils sont dépassés
Filtres de plage de dates
Afficher les données pour des périodes spécifiques
Fonctions d'exportation
Télécharger les données au format CSV ou PDF
Étape 1 : Définissez votre tableau de bord
Décrivez les exigences de votre tableau de bord à Conductor.
Je souhaite créer un tableau de bord analytique en temps réel.
Fonctionnalités :
- Cartes de métriques en direct (utilisateurs totaux, sessions actives, revenus)
- Graphique de séries chronologiques montrant l'activité au fil du temps
- Carte géographique des emplacements des utilisateurs
- Tableau des événements récents avec actualisation automatique
- Notifications d'alerte pour les anomalies
- Sélecteur de plage de dates pour les données historiques
- Exportation vers CSV/PDF
Design : Thème sombre, responsive, interface utilisateur épurée
Temps réel : Mises à jour WebSocket toutes les 5 secondesÉtape 2 : Architecture WebSocket
Virtuoso configurera une connexion WebSocket pour la diffusion des données en temps réel.
- Configuration du serveur WebSocket avec gestion des salles
- Connexion client avec reconnexion automatique
- Streaming de données à intervalles configurables
- Mises à jour delta efficaces (uniquement les données modifiées)
- Indicateurs d'état de la connexion
Étape 3 : Composants graphiques
Des graphiques interactifs afficheront magnifiquement vos données.
Les graphiques s'animent automatiquement lorsque de nouvelles données arrivent via WebSocket.
Graphiques linéaires
Données de séries chronologiques avec animations fluides
Graphiques à barres
Visualisation de données comparatives
Graphiques circulaires/en anneau
Répartitions de distribution
Cartes
Visualisation de données géographiques
Étape 4 : Système d'alerte
Configurez des alertes pour vous avertir lorsque les métriques dépassent les seuils.
- Définir les conditions de seuil
- Surveillance des seuils en temps réel
- Notifications toast pour les alertes
- Historique et acquittement des alertes
- Notifications optionnelles par e-mail/SMS
Ce que vous avez construit
- Streaming de données WebSocket en temps réel
- Graphiques interactifs et animés
- Mise en page de tableau de bord responsive
- Système d'alerte et de notification
- Fonctionnalité d'exportation de données
Prochaines étapes
Plateforme SaaS multi-tenant
Transformez votre tableau de bord en un produit SaaS
Publier sur la Marketplace
Vendez votre modèle de tableau de bord
Prêt à construire votre tableau de bord ?
Commencez à construire votre tableau de bord en temps réel dès aujourd'hui.