t3n News Entwicklung

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

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

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

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

(Grafik: Shutterstock)

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“.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Tobias Wolter am 20.03.2016 (10:28 Uhr)

    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 Teilen
  2. von grep am 20.03.2016 (13:31 Uhr)

    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 Teilen
  3. von grep am 21.03.2016 (12:13 Uhr)

    Hallo ...,


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


    Ciao, Sascha.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie
Dezentrale Apps mit Lisk: Aachener Startup setzt auf JavaScript und Blockchain-Technologie

Mit Lisk sollen JavaScript-Entwickler eigene Blockchains erstellen und für dezentrale Apps nutzen können. Wir verraten euch, was hinter dem ambitionierten Projekt steckt. » weiterlesen

Tooltips ohne JavaScript: Das kann Hint.css 2.0
Tooltips ohne JavaScript: Das kann Hint.css 2.0

Mit Hint.css baut ihr ganz ohne Javascript schicke Tooltips in eure Web-Apps ein. Wir werfen einen kurzen Blick auf Version 2.0 der Library. » weiterlesen

HTML-Placeholder aufmotzen: Mit der JavaScript-Library Superplaceholder.js bringen wir Pfiff rein
HTML-Placeholder aufmotzen: Mit der JavaScript-Library Superplaceholder.js bringen wir Pfiff rein

HTML-Placeholder sind schon eine feine Sache. Sie können direkt in einem Input-Feld hinterlegt werden und geben euch mehr Informationen zur benötigten Eingabe oder ersetzen vollständig … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?