Tutorial

Menengah30 min

Anda Akan Mempelajari:

  • Koneksi real-time WebSocket
  • Komponen grafik interaktif
  • Agregasi dan pemfilteran data
  • Tata letak dashboard responsif
  • Notifikasi langsung

Aplikasi Dashboard Real-Time

Bangun dashboard data dengan pembaruan langsung dan grafik interaktif

Dashboard real-time sangat penting untuk memantau metrik bisnis, kesehatan sistem, atau data apa pun yang sering berubah. Dalam tutorial ini, Anda akan membangun dashboard yang berfungsi penuh dengan pembaruan langsung.

Lihat grafik Anda diperbarui secara real-time saat data masuk.

Prasyarat

  • Akun ZBuild Studio
  • Pemahaman dasar tentang visualisasi data
  • Menyelesaikan tutorial 'Memulai'

Fitur Dashboard

Dashboard real-time kami akan mencakup:

Kartu Metrik Langsung

Angka-angka kunci yang diperbarui secara real-time

Grafik Time-Series

Data historis dengan pembaruan langsung

Tabel Data

Grid data yang dapat diurutkan dan difilter

Sistem Peringatan

Notifikasi saat ambang batas terlampaui

Filter Rentang Tanggal

Lihat data untuk periode waktu tertentu

Fungsi Ekspor

Unduh data sebagai CSV atau PDF

Langkah 1: Tentukan Dashboard Anda

Jelaskan persyaratan dashboard Anda kepada Conductor.

Saya ingin membangun dashboard analitik real-time.

Fitur:
- Kartu metrik langsung (total pengguna, sesi aktif, pendapatan)
- Grafik time-series yang menunjukkan aktivitas dari waktu ke waktu
- Peta geografis lokasi pengguna
- Tabel peristiwa terbaru dengan penyegaran otomatis
- Notifikasi peringatan untuk anomali
- Pemilih rentang tanggal untuk data historis
- Ekspor ke CSV/PDF

Desain: Tema gelap, responsif, UI bersih
Real-time: Pembaruan WebSocket setiap 5 detik

Langkah 2: Arsitektur WebSocket

Virtuoso akan menyiapkan koneksi WebSocket untuk pengiriman data real-time.

  1. Penyiapan server WebSocket dengan manajemen ruang
  2. Koneksi klien dengan penyambungan ulang otomatis
  3. Streaming data pada interval yang dapat dikonfigurasi
  4. Pembaruan delta yang efisien (hanya data yang berubah)
  5. Indikator status koneksi

Langkah 3: Komponen Grafik

Grafik interaktif akan menampilkan data Anda dengan indah.

Grafik secara otomatis beranimasi saat data baru tiba melalui WebSocket.

Grafik Garis

Data time-series dengan animasi yang halus

Grafik Batang

Visualisasi data komparatif

Grafik Lingkaran/Donat

Rincian distribusi

Peta

Visualisasi data geografis

Langkah 4: Sistem Peringatan

Konfigurasikan peringatan untuk memberi tahu Anda saat metrik melebihi ambang batas.

  1. Tentukan kondisi ambang batas
  2. Pemantauan ambang batas real-time
  3. Notifikasi toast untuk peringatan
  4. Riwayat peringatan dan pengakuan
  5. Notifikasi email/SMS opsional

Apa yang Telah Anda Bangun

  • Streaming data WebSocket real-time
  • Grafik interaktif dan beranimasi
  • Tata letak dashboard responsif
  • Sistem peringatan dan notifikasi
  • Fungsionalitas ekspor data

Langkah Berikutnya

Platform SaaS Multi-tenant

Ubah dashboard Anda menjadi produk SaaS

Publikasikan ke Marketplace

Jual templat dashboard Anda

Siap Membangun Dashboard Anda?

Mulai bangun dashboard real-time Anda hari ini.

Mulai MembangunTutorial Lainnya