Echtzeitvisualisierung von Twitter & Co

transcript

Echtzeitvisualisierung

mit Twitter und Co.

Autoren:Kai Donato & Oliver Lemm

Facts & Figures

Technologie-orientiert

Branchen-unabhängig

Hauptsitz

Ratingen240

Beschäftigte

Gründung

Niederlassung

Frankfurt am MainAusbildungs-

betrieb

Inhabergeführt

Zertifizierter

Partner von

Oracle,

Microsoft

und SAP

24 Mio. Euro

Umsatz

Über uns

Seit über 10 Jahren in der Web-Entwicklung

Fachinformatiker für Systemintegration

DOAG Themenverantwortlicher HTML5 & JavaScript

Seit Januar 2014 bei der MT AG in Ratingen

Competence Center Leiter APEX

Service Center Leiter APEX

Diplom Angewandte Informatik

Seit Februar 2007 bei der MT AG in Ratingen

Oliver Lemm

Kai Donato

Agenda

• Von der Idee bis zum Ergebnis

• Aufbau der Infrastruktur

• Eingesetzte Tools und Frameworks

• Streaming

• Visualisierung

• Live Demo

• Problemstellungen

Von der Idee bis zum Ergebnis

Idee Ergebnis

• Woher kommen die Daten?

• Wie erreichen wir die Echtzeitverarbeitung?

• Was sind die technischen Voraussetzungen für die Umsetzung?

Aufbau der Infrastruktur

• Twitter Streaming API als Datenquelle

• NodeJS als Streaming Endpunkt und WebSocket-Provider

• Oracle Application Express als Basis für die Darstellung

• JavaScript/jQuery für den Empfang und die Verarbeitung der Daten

Idee Ergebnis

Konzeption

Aufbau der Infrastruktur Idee Ergebnis

Konzeption

APEX-Instanz

NodeJS-Instanz

Datenbank

HTTP(S)-Anfrage (Port 80/443) Eintrag von Daten in die Datenbank(APEX-Standard-Port)

WebSocket-Port mit ständiger Verbindung (bspw. Port 1337)Für die Übermittlung von Tweets direkt vom Twitter-Stream

Twitter-API

Bestehender Twitter-Stream

1. Verbindungsaufbau zur Web-Applikation

2. Aufbau einer WebSocket-Verbindung für Echtzeit-

Übertragung

1. Eingehender Tweet (JSON)

2. Übermittlung an den Client (JSON)

3. Aktualisierung des Graphen

4. Persistierung/Historisierung in der Datenbank (optional)

Grün: Ablauf beim Eintreffen eines neuen Tweets

Rot: Ablauf beim Starten der Applikation

Eingesetzte Tools und Frameworks

• NodeJS (Streaming-Endpunkt)

• SSL-Zertifikat von Letsencrypt.org

• Prozessmanagement mit PM2

• NPM-Pakete: websocket, express, twitter, request, https, moment ...

• Ca. 150 Zeilen JavaScript-Code

Idee Ergebnis

Konzeption

NodeJS und

Streaming

• Anmeldung als Entwickler bei Twitter notwendig

• Twitter Streaming API schickt Tweets in Echtzeit

• Limitierung nur hinsichtlich verbundener Clients

• Filterung der zu übertragenden Tweets (nach

Hashtags)

• Unkomplizierte Realisierung durch das Verwenden der

Twitter-Library aus dem NPM

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Graph Idee Ergebnis

Konzeption

NodeJS und

Streaming

• Aggregierte Darstellung

Übersicht

• Struktur aus Knoten & Kanten

Beziehungen

• Keine statische Darstellung

Visualisierung ändert sich zur Laufzeit

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

"statuses": [{

"created_at": "Wed Jan 20 13:50:11 +0000 2016",

"text": "@_KaiDonato Take a look here ... #orclapex #apexconn16",

"user": {

"screen_name": "nielsdb",

"profile_image_url": "http://pbs.twimg.com/...85_normal.jpeg",

"profile_image_url_https": "https://pbs.twimg.com/...85_normal.jpeg",

"entities": {

"hashtags": [{

"text": "orclapex",

"indices": [119, 128]

"text": "apexconn16",

"indices": [129, 140]

• Twitter Wall JSON Path

• Zeitstempel created_at

• Text text

• Knoten

• Name user.screen_name

• Grafik user.profile_image_url_https

• Kanten zu

• #orclapex entitites.hashtags.text

• #apexconn16 entitites.hashtags.text

Eingesetzte Tools und Frameworks

• Oracle Application Express (Darstellung im Browser)

• Datenbank: Oracle DB 12c | APEX: 5.0.3

• Universal Theme

• HTML5 WebSockets

• VivaGraphJS

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS

• Performant

• Livedaten

• Grafikunterstützung

• Gravitation

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS

</svg>

Live Demo

Graph Frontend

VivaGraphJS

Problemstellungen

• Mischform von HTTP und HTTPS sorgten für Probleme

• Die Darstellung von vielen Knoten (inkl. Physik) benötigten viel Rechenleistung

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS

"profile_image_url_https" :

"https://pbs.twimg.com/profile_images/3380328915/ff9db49d7feab058b535d6e0fc53b020_normal.jpeg"

Problemstellungen

"profile_image_url" :

"http://pbs.twimg.com/profile_images/3380328915/ff9db49d7feab058b535d6e0fc53b020_normal.jpeg"

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Problemstellungen

Maximale Bildauflösung Twitter

https://pbs.twimg.com/profile_images/3380328915/ff

9db49d7feab058b535d6e0fc53b020_400x400.jpeg

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

URL im JSON

https://pbs.twimg.com/profile_images/3380328915/ff

9db49d7feab058b535d6e0fc53b020_normal.jpeg

Problemstellungen

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Problemstellungen

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Gravitation

• neue Knoten

• Knoten verschieben

Lösungen

• feste Kanten

• Parameter „gravity“

Problemstellungen

Tweet & Retweet

entities.hashtags.text

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Verarbeitung & Zoom

vsRetweet Quote

quoted_status.entities.hashtags.text

Hashtags JSON

Problemstellungen

Twitter REST API

orclAPEX == orclapex

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Verarbeitung & Zoom

vsJavaScript

orclAPEX <> orclapex

Hashtags JavaScript

Problemstellungen

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Verarbeitung & Zoom

Probleme

neue Knoten

Knotengröße

Bewegung des Graphen

Größe der Graphenregion

Lösungen

händischer Zoom

Dynamischer Zoom

Problemstellungen

Livedaten

• Initial ist Graph leer

Rest API search/tweets

„TestTweets“

REST Webservice

• Webservices https://dev.twitter.com/rest/public

• Authentifizierung benötigt https://dev.twitter.com/rest/tools/console

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Verarbeitung & Zoom

Testen

zukünftig

• Nutzung für weitere Konferenzen

• Zeitachse

• Graphdaten im NodeJS

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

Verarbeitung & Zoom

Testen

zukünftig

• wachsende Knoten

• gewichtete Kanten

• „fremde Hashtags“ erstellen

Kai Donato

Berater APEX Development

DOAG Themenverantwortlicher

JavaScript & HTML5

Oliver Lemm

Service Center Leiter APEX

Competence Center Leiter APEX

@OliverLemm

@_KaiDonato

Echtzeitvisualisierung von Twitter und Co.

Echtzeitvisualisierung von Twitter & Co

Social Media