Oppaat
- Aloitusopas
- First Project
- Verkkosovellukset
- Mobiilisovellukset
- 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
Opit seuraavat asiat:
- WebSocket-reaaliaikayhteydet
- Interaktiiviset kaaviokomponentit
- Datan aggregointi ja suodatus
- Responsiiviset hallintapaneeliasettelut
- Live-ilmoitukset
Reaaliaikainen hallintapaneelisovellus
Rakenna data-hallintapaneeli live-päivityksillä ja interaktiivisilla kaavioilla
Reaaliaikaiset hallintapaneelit ovat välttämättömiä liiketoiminnan mittareiden, järjestelmän tilan tai minkä tahansa usein muuttuvan datan seurantaan. Tässä oppaassa rakennat täysin toimivan hallintapaneelin live-päivityksillä.
Seuraa, kuinka kaaviosi päivittyvät reaaliajassa datan virratessa sisään.
Esivaatimukset
- ZBuild Studio -tili
- Perusymmärrys datan visualisoinnista
- Suoritetut 'Aloitusopas'-oppaat
Hallintapaneelin ominaisuudet
Reaaliaikainen hallintapaneelimme sisältää:
Live-mittarikortit
Keskeiset luvut, jotka päivittyvät reaaliajassa
Aikasarjakaaviot
Historiallinen data live-päivityksillä
Datataulukot
Lajiteltavat ja suodatettavat dataruudukot
Hälytysjärjestelmä
Ilmoitukset, kun kynnysarvot ylittyvät
Päivämäärävälin suodattimet
Tarkastele dataa tietyiltä ajanjaksoilta
Vientitoiminnot
Lataa data CSV- tai PDF-muodossa
Vaihe 1: Määrittele hallintapaneelisi
Kuvaile hallintapaneelisi vaatimukset Conductor-työkalulle.
Haluan rakentaa reaaliaikaisen analytiikkahallintapaneelin.
Ominaisuudet:
- Live-mittarikortit (käyttäjät yhteensä, aktiiviset istunnot, liikevaihto)
- Aikasarjakaavio, joka näyttää aktiivisuuden ajan mittaan
- Maantieteellinen kartta käyttäjien sijainneista
- Viimeisimmät tapahtumat -taulukko automaattisella päivityksellä
- Hälytysilmoitukset poikkeamista
- Päivämäärävälin valitsin historialliselle datalle
- Vienti CSV/PDF-muotoon
Suunnittelu: Tumma teema, responsiivinen, selkeä käyttöliittymä
Reaaliaikaisuus: WebSocket-päivitykset 5 sekunnin väleinVaihe 2: WebSocket-arkkitehtuuri
Virtuoso määrittää WebSocket-yhteyden reaaliaikaista datan toimitusta varten.
- WebSocket-palvelimen määritys huoneiden hallinnalla
- Asiakasyhteys automaattisella uudelleenkytkennällä
- Datan suoratoisto määritettävissä olevin väliajoin
- Tehokkaat delta-päivitykset (vain muuttunut data)
- Yhteyden tilan ilmaisimet
Vaihe 3: Kaaviokomponentit
Interaktiiviset kaaviot näyttävät datasi tyylikkäästi.
Kaaviot animoituvat automaattisesti, kun uutta dataa saapuu WebSocketin kautta.
Viivakaaviot
Aikasarjadata sulavilla animaatioilla
Pylväskaaviot
Vertaileva datan visualisointi
Piirakka-/donitsikaaviot
Jakaumien erittelyt
Kartat
Maantieteellisen datan visualisointi
Vaihe 4: Hälytysjärjestelmä
Määritä hälytykset ilmoittamaan, kun mittarit ylittävät kynnysarvot.
- Määrittele kynnysarvoehdot
- Reaaliaikainen kynnysarvojen seuranta
- Toast-ilmoitukset hälytyksille
- Hälytyshistoria ja kuittaaminen
- Valinnaiset sähköposti-/tekstiviesti-ilmoitukset
Mitä olet rakentanut
- Reaaliaikainen WebSocket-datan suoratoisto
- Interaktiiviset, animoidut kaaviot
- Responsiivinen hallintapaneeliasettelu
- Hälytys- ja ilmoitusjärjestelmä
- Datan vientitoiminnallisuus
Seuraavat vaiheet
Monen käyttäjän SaaS-alusta
Muuta hallintapaneelisi SaaS-tuotteeksi
Julkaise kauppapaikalle
Myy hallintapaneelimallisi
Valmis rakentamaan hallintapaneelisi?
Aloita reaaliaikaisen hallintapaneelisi rakentaminen tänään.