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

Transkript

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

2 Facts & Figures Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Inhabergeführt 24 Mio. Euro Umsatz Gründung 1994 Zertifizierter Partner von Oracle, Microsoft und SAP Ausbildungsbetrieb Niederlassung Frankfurt am Main 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 Kai Donato Oliver Lemm Competence Center Leiter APEX Service Center Leiter APEX Diplom Angewandte Informatik Seit Februar 2007 bei der MT AG in Ratingen 3

4 Agenda Von der bis zum Aufbau der Infrastruktur Eingesetzte Tools und Frameworks Streaming Visualisierung Live Demo Problemstellungen 4

5 Von der bis zum Woher kommen die Daten? Wie erreichen wir die Echtzeitverarbeitung? Was sind die technischen Voraussetzungen für die Umsetzung? 5

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 6

7 Aufbau der Infrastruktur Grün: Ablauf beim Eintreffen eines neuen Tweets Rot: Ablauf beim Starten der Applikation 1. Verbindungsaufbau zur Web-Applikation HTTP(S)-Anfrage (Port 80/443) Eintrag von Daten in die Datenbank (APEX-Standard-Port) 3. Aktualisierung des en APEX-Instanz 4. Persistierung/ Historisierung in der Datenbank (optional) Datenbank 2. Übermittlung an den Client (JSON) 1. Eingehender Tweet (JSON) WebSocket-Port mit ständiger Verbindung (bspw. Port 1337) Für die Übermittlung von Tweets direkt vom Twitter-Stream Bestehender Twitter-Stream 2. Aufbau einer WebSocket- Verbindung für Echtzeit- Übertragung NodeJS-Instanz Twitter-API 7

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 8

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 9

10 Aggregierte Darstellung ü Übersicht Struktur aus Knoten & Kanten ü Beziehungen Keine statische Darstellung ü Visualisierung ändert sich zur Laufzeit 10

11 Daten Daten / JSON { "statuses": [{ "created_at": "Wed Jan 20 13:50: ", "text": "@_KaiDonato Take a look here... #orclapex #apexconn16", "user": { "screen_name": "nielsdb", "profile_image_url": " "profile_image_url_https": " }, "entities": { "hashtags": [{ "text": "orclapex", "indices": [119, 128] }, { "text": "apexconn16", "indices": [129, 140] }], }, Twitter Wall Zeitstempel Text Knoten Name Grafik Kanten zu #orclapex #apexconn16 JSON Path created_at text user.screen_name user.profile_image_url_https entitites.hashtags.text entitites.hashtags.text }] 11

12 Eingesetzte Tools und Frameworks Daten / JSON Oracle Application Express (Darstellung im Browser) Datenbank: Oracle DB 12c APEX: Universal Theme HTML5 WebSockets VivaJS 12

13 VivaJS Daten / JSON VivaJS Performant Livedaten Grafikunterstützung Gravitation <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> 13

14 Live Demo VivaJS 14

15 Problemstellungen SSL & Performance Daten / JSON VivaJS Mischform von HTTP und HTTPS sorgten für Probleme Die Darstellung von vielen Knoten (inkl. Physik) benötigten viel Rechenleistung 15

16 Problemstellungen SSL & Performance Daten / JSON VivaJS Gravitation & Grafiken "profile_image_url" : " HTTP HTTPS "profile_image_url_https" : " 16

17 Problemstellungen SSL & Performance Daten / JSON VivaJS Gravitation & Grafiken Maximale Bildauflösung Twitter URL im JSON 49d7feab058b535d6e0fc53b020_400x400.jpeg 49d7feab058b535d6e0fc53b020_normal.jpeg vs 17

18 Problemstellungen SSL & Performance Daten / JSON VivaJS Gravitation & Grafiken vs 18

19 Problemstellungen SSL & Performance Daten / JSON VivaJS Gravitation & Grafiken Gravitation neue Knoten Knoten verschieben Lösungen feste Kanten Parameter gravity 19

20 Problemstellungen SSL & Performance Verarbeitung & Zoom Daten / JSON VivaJS Gravitation & Grafiken Hashtags JSON Tweet & Retweet entities.hashtags.text vs Retweet Quote quoted_status.entities.hashtags.text 20

21 Problemstellungen SSL & Performance Verarbeitung & Zoom Daten / JSON VivaJS Gravitation & Grafiken Hashtags JavaScript Twitter REST API orclapex == orclapex vs JavaScript orclapex <> orclapex 21

22 Problemstellungen SSL & Performance Verarbeitung & Zoom Daten / JSON VivaJS Gravitation & Grafiken Probleme Lösungen neue Knoten händischer Zoom Knotengröße Dynamischer Zoom Bewegung des en Größe der enregion 22

23 Problemstellungen SSL & Performance Verarbeitung & Zoom Daten / JSON VivaJS Gravitation & Grafiken Testen Livedaten Initial ist leer ü Rest API search/tweets TestTweets REST Webservice Webservices Authentifizierung benötigt 23

24 zukünftig SSL & Performance Verarbeitung & Zoom zukünftig Daten / JSON VivaJS Gravitation & Grafiken Testen Nutzung für weitere Konferenzen wachsende Knoten Zeitachse gewichtete Kanten daten im NodeJS fremde Hashtags erstellen 24

25 Kai Donato Echtzeitvisualisierung von Twitter und Co. Berater APEX Development DOAG Themenverantwortlicher JavaScript & Oliver Lemm Service Center Leiter APEX Competence Center Leiter 25