Fallbeispiel der Visualisierung von Daten, die über eine REST-API von Twitter bezogen wurden. Vortrag auf der APEXConnect 2016

1. Echtzeitvisualisierung
mit Twitter und Co.
Autoren:
Kai Donato & Oliver Lemm

2. Facts & Figures
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen
240
Beschäftigte
Gründung
1994
Niederlassung
Frankfurt am Main
Ausbildungs-
betrieb
Inhabergeführt
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
24 Mio. Euro
Umsatz
2

3. 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. 4
Agenda
• Von der Idee bis zum Ergebnis
• Aufbau der Infrastruktur
• Eingesetzte Tools und Frameworks
• Streaming
• Visualisierung
• Live Demo
• Problemstellungen

5. 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. 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. 7
Aufbau der Infrastruktur Idee Ergebnis
Konzeption
APEX-Instanz
NodeJS-Instanz
Datenbank
HTTP(S)-Anfrage (Port 80/443) Eintrag von Daten in dieDatenbank
(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. 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. 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. 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

11. 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. 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. 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. 14
Live Demo
Graph Frontend
VivaGraphJS

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

16. "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. 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. 18
Problemstellungen
vs
SSL & Performance
Idee Ergebnis
Konzeption
NodeJS und
Streaming
Daten / JSON
Graph Frontend
VivaGraphJS Gravitation & Grafiken

19. 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. 20
Problemstellungen
Tweet & Retweet
entities.hashtags.text
SSL & Performance
Idee Ergebnis
Konzeption
NodeJS und
Streaming
Daten / JSON
Graph Frontend
VivaGraphJS Gravitation & Grafiken
Verarbeitung & Zoom
vs
Retweet Quote
quoted_status.entities.hashtags.text
Hashtags JSON

21. 21
Problemstellungen
Twitter REST API
orclAPEX == orclapex
SSL & Performance
Idee Ergebnis
Konzeption
NodeJS und
Streaming
Daten / JSON
Graph Frontend
VivaGraphJS Gravitation & Grafiken
Verarbeitung & Zoom
vs
JavaScript
orclAPEX <> orclapex
Hashtags JavaScript

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

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