+ All Categories
Home > Social Media > Echtzeitvisualisierung von Twitter & Co

Echtzeitvisualisierung von Twitter & Co

Date post: 15-Apr-2017
Category:
Upload: oliver-lemm
View: 232 times
Download: 0 times
Share this document with a friend
25
Echtzeitvisualisierung mit Twitter und Co. Autoren: Kai Donato & Oliver Lemm
Transcript
Page 1: Echtzeitvisualisierung von Twitter & Co

Echtzeitvisualisierung

mit Twitter und Co.

Autoren:Kai Donato & Oliver Lemm

Page 2: Echtzeitvisualisierung von Twitter & Co

Facts & Figures

Technologie-orientiert

Branchen-unabhängig

Hauptsitz

Ratingen240

Beschäftigte

Gründung

1994

Niederlassung

Frankfurt am MainAusbildungs-

betrieb

Inhabergeführt

Zertifizierter

Partner von

Oracle,

Microsoft

und SAP

24 Mio. Euro

Umsatz

2

Page 3: Echtzeitvisualisierung von Twitter & Co

3

Ü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

Page 4: Echtzeitvisualisierung von Twitter & Co

4

Agenda

• Von der Idee bis zum Ergebnis

• Aufbau der Infrastruktur

• Eingesetzte Tools und Frameworks

• Streaming

• Visualisierung

• Live Demo

• Problemstellungen

Page 5: Echtzeitvisualisierung von Twitter & Co

5

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?

Page 6: Echtzeitvisualisierung von Twitter & Co

6

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

Page 7: Echtzeitvisualisierung von Twitter & Co

7

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

Page 8: Echtzeitvisualisierung von Twitter & Co

8

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

Page 9: Echtzeitvisualisierung von Twitter & Co

9

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

Page 10: Echtzeitvisualisierung von Twitter & Co

10

Graph Idee Ergebnis

Konzeption

NodeJS und

Streaming

Graph

• Aggregierte Darstellung

Übersicht

• Struktur aus Knoten & Kanten

Beziehungen

• Keine statische Darstellung

Visualisierung ändert sich zur Laufzeit

Page 11: Echtzeitvisualisierung von Twitter & Co

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

11

Daten

{

"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

Graph

Page 12: Echtzeitvisualisierung von Twitter & Co

12

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

Page 13: Echtzeitvisualisierung von Twitter & Co

13

VivaGraphJS

• Performant

• Livedaten

• Grafikunterstützung

• Gravitation

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS

<svg>

<g buffered-rendering="dynamic">

<line stroke="#999" x1="-9" y1="-10" x2="7.3" y2="8.3"></line>

<g transform="translate(-21,-22)">

<circle cx="10" cy="10" fill="url(#imageFor_ORCLAPEX)" r="10"></circle>

</g>

<g transform="translate(-4.6,-3.6)">

<circle cx="10" cy="10" fill="url(#imageFor_APEXCONN16)" r="10"></circle>

</g>

</g>

</svg>

Page 15: Echtzeitvisualisierung von Twitter & Co

15

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

Page 16: Echtzeitvisualisierung von Twitter & Co

"profile_image_url_https" :

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

16

Problemstellungen

HTTP

"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

HTTPS

Page 17: Echtzeitvisualisierung von Twitter & Co

17

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

VivaGraphJS Gravitation & Grafiken

URL im JSON

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

9db49d7feab058b535d6e0fc53b020_normal.jpeg

vs

Page 18: Echtzeitvisualisierung von Twitter & Co

18

Problemstellungen

vs

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Page 19: Echtzeitvisualisierung von Twitter & Co

19

Problemstellungen

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Gravitation

• neue Knoten

• Knoten verschieben

Lösungen

• feste Kanten

• Parameter „gravity“

Page 20: Echtzeitvisualisierung von Twitter & Co

20

Problemstellungen

Tweet & Retweet

entities.hashtags.text

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Verarbeitung & Zoom

vsRetweet Quote

quoted_status.entities.hashtags.text

Hashtags JSON

Page 21: Echtzeitvisualisierung von Twitter & Co

21

Problemstellungen

Twitter REST API

orclAPEX == orclapex

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Verarbeitung & Zoom

vsJavaScript

orclAPEX <> orclapex

Hashtags JavaScript

Page 22: Echtzeitvisualisierung von Twitter & Co

22

Problemstellungen

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Verarbeitung & Zoom

Probleme

neue Knoten

Knotengröße

Bewegung des Graphen

Größe der Graphenregion

Lösungen

händischer Zoom

Dynamischer Zoom

Page 23: Echtzeitvisualisierung von Twitter & Co

23

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

VivaGraphJS Gravitation & Grafiken

Verarbeitung & Zoom

Testen

Page 24: Echtzeitvisualisierung von Twitter & Co

24

zukünftig

• Nutzung für weitere Konferenzen

• Zeitachse

• Graphdaten im NodeJS

SSL & Performance

Idee Ergebnis

Konzeption

NodeJS und

Streaming

Daten / JSON

Graph Frontend

VivaGraphJS Gravitation & Grafiken

Verarbeitung & Zoom

Testen

zukünftig

• wachsende Knoten

• gewichtete Kanten

• „fremde Hashtags“ erstellen

Page 25: Echtzeitvisualisierung von Twitter & Co

Kai Donato

Berater APEX Development

DOAG Themenverantwortlicher

JavaScript & HTML5

Oliver Lemm

Service Center Leiter APEX

Competence Center Leiter APEX

25

@OliverLemm

@_KaiDonato

Echtzeitvisualisierung von Twitter und Co.


Recommended