Echtzeitvisualisierung
mit Twitter und Co.
Autoren:Kai Donato & Oliver Lemm
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
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
4
Agenda
• Von der Idee bis zum Ergebnis
• Aufbau der Infrastruktur
• Eingesetzte Tools und Frameworks
• Streaming
• Visualisierung
• Live Demo
• Problemstellungen
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?
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
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
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
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
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
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
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
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>
14
Live Demo
Graph Frontend
VivaGraphJS
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
"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
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
18
Problemstellungen
vs
SSL & Performance
Idee Ergebnis
Konzeption
NodeJS und
Streaming
Daten / JSON
Graph Frontend
VivaGraphJS Gravitation & Grafiken
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“
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
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
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
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
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
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.
Top Related