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

Was ist angesagt?

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
 
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit AlfrescoAlfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Software
 
Schatten IT erfolgreich bekämpfen
Schatten IT erfolgreich bekämpfenSchatten IT erfolgreich bekämpfen
Schatten IT erfolgreich bekämpfen
Niels de Bruijn
 
MT AG 8 Gute Gründe warum Forms zu APEX
MT AG 8 Gute Gründe warum Forms zu APEXMT AG 8 Gute Gründe warum Forms zu APEX
MT AG 8 Gute Gründe warum Forms zu APEX
Niels de Bruijn
 
MT AG 7 Gute Gründe warum APEX
MT AG 7 Gute Gründe warum APEXMT AG 7 Gute Gründe warum APEX
MT AG 7 Gute Gründe warum APEX
Niels de Bruijn
 
APEX 5.0, und sonst?
APEX 5.0, und sonst?APEX 5.0, und sonst?
APEX 5.0, und sonst?
Niels de Bruijn
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5
MT AG
 
Alfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest APIAlfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Software
 
Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?
enpit GmbH & Co. KG
 
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
Nicole Szigeti
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
Belsoft
 
Effective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADFEffective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADF
enpit GmbH & Co. KG
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
Christian Heindel
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 
Watson Services und Cognitive Computing
Watson Services und Cognitive ComputingWatson Services und Cognitive Computing
Watson Services und Cognitive Computing
Belsoft
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 

Was ist angesagt? (20)

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
 
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit AlfrescoAlfresco Day Vienna 2016: Entwickeln mit Alfresco
Alfresco Day Vienna 2016: Entwickeln mit Alfresco
 
Schatten IT erfolgreich bekämpfen
Schatten IT erfolgreich bekämpfenSchatten IT erfolgreich bekämpfen
Schatten IT erfolgreich bekämpfen
 
MT AG 8 Gute Gründe warum Forms zu APEX
MT AG 8 Gute Gründe warum Forms zu APEXMT AG 8 Gute Gründe warum Forms zu APEX
MT AG 8 Gute Gründe warum Forms zu APEX
 
MT AG 7 Gute Gründe warum APEX
MT AG 7 Gute Gründe warum APEXMT AG 7 Gute Gründe warum APEX
MT AG 7 Gute Gründe warum APEX
 
APEX 5.0, und sonst?
APEX 5.0, und sonst?APEX 5.0, und sonst?
APEX 5.0, und sonst?
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5
 
Alfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest APIAlfresco Day Vienna 2016: Alfrescos neue Rest API
Alfresco Day Vienna 2016: Alfrescos neue Rest API
 
Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?
 
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
Activiti goes enterprise: Die Evolution der BPM Suite aus Sicht des Alfresco ...
 
IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?IBM Connections 6 und was ist Pink?
IBM Connections 6 und was ist Pink?
 
Effective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADFEffective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADF
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Watson Services und Cognitive Computing
Watson Services und Cognitive ComputingWatson Services und Cognitive Computing
Watson Services und Cognitive Computing
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 

Ähnlich wie Echtzeitvisualisierung von Twitter & Co

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
Peter Hecker
 
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
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
Peter Hecker
 
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
 
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
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UX
Kai Donato
 

Ähnlich wie Echtzeitvisualisierung von Twitter & Co (20)

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
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
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
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?
 
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
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UX
 

Mehr von Oliver Lemm

Qualitätssicherung für APEX Anwendungen.pdf
Qualitätssicherung für APEX Anwendungen.pdfQualitätssicherung für APEX Anwendungen.pdf
Qualitätssicherung für APEX Anwendungen.pdf
Oliver Lemm
 
Qualitätsstandards in der Datenbankentwicklung.pdf
Qualitätsstandards in der Datenbankentwicklung.pdfQualitätsstandards in der Datenbankentwicklung.pdf
Qualitätsstandards in der Datenbankentwicklung.pdf
Oliver Lemm
 
APEX Page Items in detail
APEX Page Items in detailAPEX Page Items in detail
APEX Page Items in detail
Oliver Lemm
 
confirm & alert
confirm & alertconfirm & alert
confirm & alert
Oliver Lemm
 
APEX richtig installieren und konfigurieren
APEX richtig installieren und konfigurierenAPEX richtig installieren und konfigurieren
APEX richtig installieren und konfigurieren
Oliver Lemm
 
APEX Migration
APEX MigrationAPEX Migration
APEX Migration
Oliver Lemm
 
Jenkins Pipelines Advanced
Jenkins Pipelines AdvancedJenkins Pipelines Advanced
Jenkins Pipelines Advanced
Oliver Lemm
 
From Dev to Ops
From Dev to OpsFrom Dev to Ops
From Dev to Ops
Oliver Lemm
 
Das Universal Theme in APEX 19
Das Universal Theme in APEX 19Das Universal Theme in APEX 19
Das Universal Theme in APEX 19
Oliver Lemm
 
Jenkins Pipeline meets Oracle
Jenkins Pipeline meets OracleJenkins Pipeline meets Oracle
Jenkins Pipeline meets Oracle
Oliver Lemm
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1
Oliver Lemm
 
Schritt für Schritt ins Grid
Schritt für Schritt ins GridSchritt für Schritt ins Grid
Schritt für Schritt ins Grid
Oliver Lemm
 
Migration ins Universal Theme 1.1
Migration ins Universal Theme 1.1Migration ins Universal Theme 1.1
Migration ins Universal Theme 1.1
Oliver Lemm
 
Mastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union InvestmentMastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union Investment
Oliver Lemm
 
Mastering Universal Theme with corporate design from union investment
Mastering Universal Theme with corporate design from union investmentMastering Universal Theme with corporate design from union investment
Mastering Universal Theme with corporate design from union investment
Oliver Lemm
 
Jetlag - Oracle Jet und APEX
Jetlag - Oracle Jet und APEXJetlag - Oracle Jet und APEX
Jetlag - Oracle Jet und APEX
Oliver Lemm
 
Wieder verschätzt?
Wieder verschätzt?Wieder verschätzt?
Wieder verschätzt?
Oliver Lemm
 
Komplexe Daten mit Oracle Jet einfach aufbereitet
Komplexe Daten mit Oracle Jet einfach aufbereitetKomplexe Daten mit Oracle Jet einfach aufbereitet
Komplexe Daten mit Oracle Jet einfach aufbereitet
Oliver Lemm
 
Mastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union InvestmentMastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union Investment
Oliver Lemm
 
How to use source control with apex?
How to use source control with apex?How to use source control with apex?
How to use source control with apex?
Oliver Lemm
 

Mehr von Oliver Lemm (20)

Qualitätssicherung für APEX Anwendungen.pdf
Qualitätssicherung für APEX Anwendungen.pdfQualitätssicherung für APEX Anwendungen.pdf
Qualitätssicherung für APEX Anwendungen.pdf
 
Qualitätsstandards in der Datenbankentwicklung.pdf
Qualitätsstandards in der Datenbankentwicklung.pdfQualitätsstandards in der Datenbankentwicklung.pdf
Qualitätsstandards in der Datenbankentwicklung.pdf
 
APEX Page Items in detail
APEX Page Items in detailAPEX Page Items in detail
APEX Page Items in detail
 
confirm & alert
confirm & alertconfirm & alert
confirm & alert
 
APEX richtig installieren und konfigurieren
APEX richtig installieren und konfigurierenAPEX richtig installieren und konfigurieren
APEX richtig installieren und konfigurieren
 
APEX Migration
APEX MigrationAPEX Migration
APEX Migration
 
Jenkins Pipelines Advanced
Jenkins Pipelines AdvancedJenkins Pipelines Advanced
Jenkins Pipelines Advanced
 
From Dev to Ops
From Dev to OpsFrom Dev to Ops
From Dev to Ops
 
Das Universal Theme in APEX 19
Das Universal Theme in APEX 19Das Universal Theme in APEX 19
Das Universal Theme in APEX 19
 
Jenkins Pipeline meets Oracle
Jenkins Pipeline meets OracleJenkins Pipeline meets Oracle
Jenkins Pipeline meets Oracle
 
REST mit APEX 18.1
REST mit APEX 18.1REST mit APEX 18.1
REST mit APEX 18.1
 
Schritt für Schritt ins Grid
Schritt für Schritt ins GridSchritt für Schritt ins Grid
Schritt für Schritt ins Grid
 
Migration ins Universal Theme 1.1
Migration ins Universal Theme 1.1Migration ins Universal Theme 1.1
Migration ins Universal Theme 1.1
 
Mastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union InvestmentMastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union Investment
 
Mastering Universal Theme with corporate design from union investment
Mastering Universal Theme with corporate design from union investmentMastering Universal Theme with corporate design from union investment
Mastering Universal Theme with corporate design from union investment
 
Jetlag - Oracle Jet und APEX
Jetlag - Oracle Jet und APEXJetlag - Oracle Jet und APEX
Jetlag - Oracle Jet und APEX
 
Wieder verschätzt?
Wieder verschätzt?Wieder verschätzt?
Wieder verschätzt?
 
Komplexe Daten mit Oracle Jet einfach aufbereitet
Komplexe Daten mit Oracle Jet einfach aufbereitetKomplexe Daten mit Oracle Jet einfach aufbereitet
Komplexe Daten mit Oracle Jet einfach aufbereitet
 
Mastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union InvestmentMastering Universal Theme with corporate design from Union Investment
Mastering Universal Theme with corporate design from Union Investment
 
How to use source control with apex?
How to use source control with apex?How to use source control with apex?
How to use source control with apex?
 

Echtzeitvisualisierung von Twitter & 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.