SlideShare ist ein Scribd-Unternehmen logo

Echtzeitvisualisierung von Twitter und Co.

•Als PPTX, PDF herunterladen•
•
K
Kai Donato

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

1 von 25
Echtzeitvisualisierung mit Twitter und Co. Autoren: Kai Donato & Oliver Lemm
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 Ü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 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 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 vs Retweet 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 vs JavaScript 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.

Weitere ähnliche Inhalte

Echtzeitvisualisierung von Twitter und Co.

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