Entwicklung & Design

Echtzeit-Analytics zum Selbstbauen: Mit Node.js, Socket.io und Vue.js zum eigenen Dashboard

(Grafik: Shutterstock)

Ein Echtzeit-Analytics-Dashboard selber bauen? Ein spannendes Tutorial zeigt euch, wie ihr das mithilfe von Node.js, Socket.io und Vue.js hinbekommt.

Echtzeit-Analytics-Dashboard mit Node.js, Socket.io und Vue.js

Ein Analytics-Dashboard, wie es beispielsweise bei Google Analytics zum Einsatz kommt, kennen wir fast alle. Der eine oder andere wird sich aber bestimmt schon mal gefragt haben, wie sich ein solches Dashboard selbst bauen und mit Echtzeit-Daten befüllen lässt. Die Antwort darauf gibt euch jetzt ein hilfreiches Tutorial von coligio.io.

So sieht das fertige Dashboard aus. (Screenshot: coglio.io)

So sieht das fertige Dashboard aus. (Screenshot: coglio.io)

Für die Anleitung haben die Macher auf drei Komponenten gesetzt:

  • Socket.io: Die JavaScript-Library für Echtzeit-Web-Apps wird genutzt, um die Informationen über den aktiven Nutzer an die Server-Komponenten zu übertragen.
  • Node.js: Serverseitig kommt die populäre JavaScript-Runtime zum Einsatz.
  • Vue.js: Das eigentliche Interface des Dashboards basiert auf der JavaScript-Library.

Echtzeit-Analytics-Dashboard: Hier findet ihr das Tutorial, den Quellcode und eine Demo

Das englischsprachige Tutorial führt euch Schritt für Schritt durch den Entstehungsprozess eures Analytics-Dashboards. Den Quellcode findet ihr außerdem direkt auf GitHub. Wer vorher wissen will, wie das Ganze nachher aussehen wird, kann sich diese Live-Demo des Dashboards anschauen.

Ebenfalls einen Blick wert ist unser Artikel „In Minuten zum eigenen Dashboard: Mit Freeboard visualisiert ihr das Internet der Dinge“.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Tobias Wolter

Ich benutze seit Jahren Event Fabric (www.event-fabric.com) zum Bau von Dashboards. Man muss nicht selbst entwickeln – sondern klickt sich das Echtzeit-Dashboard zusammen. Von der technischen Umsetzung habe ich noch kein besseres Produkt von einem Startup gesehen.

Antworten
grep

Hallo …,

da ich mich derweil ohnehin intensiver mit JavaScript beschäftige lohnt es einen Blick auf das hier propagierte Projekt resp. den Code zu werfen – leider liefert die (hier verlinkte) diesbezügliche Demo (derzeit) einen ‚Application Error‘ zurück …; macht keinen guten (ersten) Eindruck auf mich.

Ciao, Sascha.

Antworten
grep

Hallo …,

mittlerweile funktioniert die (im Artikel) verlinkte Demo; sieht sehr gut aus.

Ciao, Sascha.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.