echtzeitvisualisierung von twitter & co
TRANSCRIPT
![Page 1: Echtzeitvisualisierung von Twitter & Co](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/1.jpg)
Echtzeitvisualisierung
mit Twitter und Co.
Autoren:Kai Donato & Oliver Lemm
![Page 2: Echtzeitvisualisierung von Twitter & Co](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/2.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/3.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/4.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/5.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/6.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/7.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/8.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/9.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/10.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/11.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/12.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/13.jpg)
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 14: Echtzeitvisualisierung von Twitter & Co](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/14.jpg)
14
Live Demo
Graph Frontend
VivaGraphJS
![Page 15: Echtzeitvisualisierung von Twitter & Co](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/15.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/16.jpg)
"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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/17.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/18.jpg)
18
Problemstellungen
vs
SSL & Performance
Idee Ergebnis
Konzeption
NodeJS und
Streaming
Daten / JSON
Graph Frontend
VivaGraphJS Gravitation & Grafiken
![Page 19: Echtzeitvisualisierung von Twitter & Co](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/19.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/20.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/21.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/22.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/23.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/24.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021922/5875ce611a28ab8f438b4c57/html5/thumbnails/25.jpg)
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.