Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

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

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

3 Reaktionen
grep

Hallo ...,

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

Ciao, Sascha.

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

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

Abbrechen