SlideShare ist ein Scribd-Unternehmen logo
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

Ähnlich wie Echtzeitvisualisierung von Twitter und Co.

Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
Kai Donato
 
Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)
NETWAYS
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
DietrichRordorf
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
Danny Linden
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
Allgeier (Schweiz) AG
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
Niels de Bruijn
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Martin Kliehm
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
NETUserGroupBern
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Stefan Adolf
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
André Krämer
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-Tools
Dirk Steinkopf
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg
Lennart Passig
 
C5 Mettenmeier Lotusday2007
C5 Mettenmeier Lotusday2007C5 Mettenmeier Lotusday2007
C5 Mettenmeier Lotusday2007
Andreas Schulte
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software
DNUG e.V.
 
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
Andreas Rosen
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 

Ähnlich wie Echtzeitvisualisierung von Twitter und Co. (20)

Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
WebSocket my APEX!
WebSocket my APEX!WebSocket my APEX!
WebSocket my APEX!
 
Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-Tools
 
Azure Bootcamp Hamburg
Azure Bootcamp Hamburg Azure Bootcamp Hamburg
Azure Bootcamp Hamburg
 
C5 Mettenmeier Lotusday2007
C5 Mettenmeier Lotusday2007C5 Mettenmeier Lotusday2007
C5 Mettenmeier Lotusday2007
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software
 
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 

Mehr von Kai Donato

Testing APEX apps At A Glance
Testing APEX apps At A GlanceTesting APEX apps At A Glance
Testing APEX apps At A Glance
Kai Donato
 
APEX Offline – The missing Link
APEX Offline – The missing LinkAPEX Offline – The missing Link
APEX Offline – The missing Link
Kai Donato
 
>> How toTech-Forward >>
>> How toTech-Forward >>>> How toTech-Forward >>
>> How toTech-Forward >>
Kai Donato
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
Kai Donato
 
Click, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX ApplicationsClick, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX Applications
Kai Donato
 
Full Stack Development mit JavaScript
Full Stack Development mit JavaScriptFull Stack Development mit JavaScript
Full Stack Development mit JavaScript
Kai Donato
 
APEX and additional Templating Engines
APEX and additional Templating EnginesAPEX and additional Templating Engines
APEX and additional Templating Engines
Kai Donato
 
Professional JavaScript Error-Logging
Professional JavaScript Error-LoggingProfessional JavaScript Error-Logging
Professional JavaScript Error-Logging
Kai Donato
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Kai Donato
 
Managing Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEXManaging Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEX
Kai Donato
 

Mehr von Kai Donato (10)

Testing APEX apps At A Glance
Testing APEX apps At A GlanceTesting APEX apps At A Glance
Testing APEX apps At A Glance
 
APEX Offline – The missing Link
APEX Offline – The missing LinkAPEX Offline – The missing Link
APEX Offline – The missing Link
 
>> How toTech-Forward >>
>> How toTech-Forward >>>> How toTech-Forward >>
>> How toTech-Forward >>
 
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehenICIS User Group - Oberflächentests mittels LCT deklarativ angehen
ICIS User Group - Oberflächentests mittels LCT deklarativ angehen
 
Click, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX ApplicationsClick, Click, Test - Automated Tests for APEX Applications
Click, Click, Test - Automated Tests for APEX Applications
 
Full Stack Development mit JavaScript
Full Stack Development mit JavaScriptFull Stack Development mit JavaScript
Full Stack Development mit JavaScript
 
APEX and additional Templating Engines
APEX and additional Templating EnginesAPEX and additional Templating Engines
APEX and additional Templating Engines
 
Professional JavaScript Error-Logging
Professional JavaScript Error-LoggingProfessional JavaScript Error-Logging
Professional JavaScript Error-Logging
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
 
Managing Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEXManaging Node.js Instances with Oracle APEX
Managing Node.js Instances with Oracle APEX
 

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.