Downloaden Sie, um offline zu lesen
![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](https://image.slidesharecdn.com/echtzeitvisualisierungvontwitterundco-160509064832/85/Echtzeitvisualisierung-von-Twitter-Co-11-320.jpg)
Hochgeladen vonOliver Lemm
Echtzeitvisualisierung von Twitter & Co
Das Dokument beschreibt die Entwicklung einer Echtzeitvisualisierung von Twitter-Daten mithilfe von Technologien wie Node.js, Oracle Application Express und JavaScript. Der Prozess umfasst den Aufbau einer Infrastruktur, einschließlich der Verwendung der Twitter Streaming API, um Tweets in Echtzeit zu empfangen und darzustellen. Herausforderungen in Bezug auf SSL, Performance und die Verarbeitung von Livedaten werden ebenfalls behandelt, und es wird auf zukünftige Erweiterungsmöglichkeiten eingegangen.
Echtzeitvisualisierung von Twitter & Co
- 1. Echtzeitvisualisierung mit Twitter undCo. Autoren: Kai Donato & Oliver Lemm
- 2. Facts & Figures Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Gründung 1994 Niederlassung Frankfurtam Main Ausbildungs- betrieb Inhabergeführt Zertifizierter Partner von Oracle, Microsoft und SAP 24 Mio. Euro Umsatz 2
- 3. 3 Über uns Seit über10 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 derIdee bis zum Ergebnis • Aufbau der Infrastruktur • Eingesetzte Tools und Frameworks • Streaming • Visualisierung • Live Demo • Problemstellungen
- 5. 5 Von der Ideebis 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 InfrastrukturIdee 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 undFrameworks • 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 alsEntwickler 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 NodeJSund 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 undFrameworks • 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>
- 14.
- 15. 15 Problemstellungen • Mischform vonHTTP 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
- 16. "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. 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 IdeeErgebnis Konzeption NodeJS und Streaming Daten / JSON Graph Frontend VivaGraphJS Gravitation & Grafiken
- 19. 19 Problemstellungen SSL & Performance IdeeErgebnis 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 IdeeErgebnis 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 istGraph 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ürweitere 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 APEXDevelopment DOAG Themenverantwortlicher JavaScript & HTML5 Oliver Lemm Service Center Leiter APEX Competence Center Leiter APEX 25 @OliverLemm @_KaiDonato Echtzeitvisualisierung von Twitter und Co.