Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Twitter Insight

Twitter Insight ist eine interaktive Webapplikation, die mithilfe der Twitter API Userdaten visualisiert und vergleicht. Dadurch soll unter anderem der Nutzer zum Denken angestoßen werden, welche Daten er im Internet insbesondere auf Twitter von sich preisgibt.

Dies ist ein Projekt von Max Herrmann und Pascal Struck, welches im Kurs „Storytelling with Data“ im Wintersemester 2018/19 unter Aufsicht von Christian Ivanis entstanden ist.

Ideenfindung

Um einen Einstieg in das Thema Social Media und Public APIs zu finden, suchten wir uns zunächst drei der größten sozialen Netzwerke, die Public APIs anbieten: - Facebook (2,271 Milliarden Nutzer) - Instagram (1 Milliarde Nutzer) - Twitter (326 Millionen Nutzer)

Als wir unsere Auswahl getroffen hatten, studierten wir zunächst die Entwickler-Dokumentationen der Graph API (Facebook und Instagram) und der Twitter API, um herauszufinden, welche Daten man ohne eine Authentifizierung durch den Benutzer, also nur mit seinem Benutzernamen, auslesen kann. Schnell stellten wir fest, dass die Graph API signifikant mehr Daten zur Verfügung stellt als die Twitter API. So wird zum Beispiel fast jegliche Interaktion des Nutzers mit dem Facebook Client oder der Instagram App aufgezeichnet und über die API zum Abruf bereitgestellt. Nach weiterer Recherche stellten wir jedoch fest, dass es der Zugang zur Graph API, vor allem über eine Web-Applikation, sich als äußerst schwierig gestaltete. Um die API in einer eigenen Anwendung nutzen zu können, muss man erst einen langwierigen Prüfungsprozess durchlaufen, der den Rahmen des Kurses gesprengt hätte. Nun, da wir Facebook und Instagram ausgeschlossen hatten, blieb Twitter.

Technische Grundlagen

Twitter bietet über seine API im direkten Vergleich zur Graph API wesentlich weniger umfangreiche Daten an. Diese sind aber durch einen deutlich zugänglicheren Verifkiationsprozess leichter zugänglich. Um die Twitter API aus einer Web-Anwendung zu benutzen, muss man lediglich ein Formular ausfüllen, welches abfragt für welchen Zweck und in welchem Umfang man die Twitter API benutzen möchte. Sobald das Formular akzeptiert wurde, hat man Zugang zu einem sogenannten Sandbox-Environment. Hier kann man einen Teil der API-Endpunkte kostenlos in einem limitierten Rahmen austesten. Hierzu ist wichtig zu erwähnen, dass die kostenlose Benutzung der Twitter API an bestimmte Kontingente gekoppelt ist. Beispielsweise hat man als „Sandbox-User“ ein monatliches Kontingent von 50 Anfragen pro API-Endpunkt. Wenn man diese Begrenzungen erweitern möchte, bittet Twitter zur Kasse – pro 100 Anfragen an die Full Archive API, mit der man Tweets aus der gesamten History eines Nutzers suchen kann, werden so beispielsweise 100 US-Dollar fällig. Schnell war uns klar, dass wir mit unseren 50 monatlichen API-Anfragen sparsam umgehen müssen, um zum Ende des Semesters unsere Anwendung vorstellen zu können. Um zumindest in der Konzeptions- und Entwicklungsphase nicht unnötig Anfragen zu verbrauchen, speicherten wir uns die letzten 100 Tweets von Donald Trumps Twitter-Account @realDonaldTrump lokal ab und verwendeten diese als ständigen Datensatz. Eine weitere Hürde war, dass wir mit unserem kostenlosen Zugang pro Anfrage nur Tweets über den Zeitraum eines Monats abfragen konnten. Aufgrund dessen mussten wir von unserem ursprünglichen Konzept, alle Tweets eines Nutzers abbilden zu können, abweichen.

Screenshot 2019-03-04 at 15.38.41.png
Screenshot 2019-03-04 at 15.38.41.pngScreenshot 2019-03-04 at 15.38.41.png

Developer Dashboard der Twitter API – Hier zu sehen: Anfragen-Kontingente

Konzeption & Umsetzung

Für die Umsetzung unseres Projektes begannen wir zunächst damit, die von der Twitter API gelieferten Daten zu analysieren. Dieser Prozess gestaltete sich als einfach, da die Dokumentation viel Aufschluss über die zur Verfügung gestellten Datensätze gibt. Um uns einen Gesamtüberblick zu verschaffen filterten wir zunächst für uns unwichtige beziehungsweise uninteressante Daten aus den Datensätzen heraus und visualisierten die übrig gebliebenen Daten in einer Tabelle.

Screenshot 2019-03-04 at 15.17.01.pngScreenshot 2019-03-04 at 15.17.01.png
Screenshot 2019-03-04 at 15.17.10.pngScreenshot 2019-03-04 at 15.17.10.png

Gestalterisch wollten wir in einem schlichten Rahmen bleiben. Deshalb wählten wir eine simple Schrift und versuchten die Anzahl an Elementen auf der Seite sehr gering zu halten. Bei der Farbgebung orientierten wir uns am „Dark mode“-Theme von Twitter. Weiterhin legten wir noch den Namen „Twitter Insight“ fest. Nun fehlte noch ein passendes Logo. Dabei orientierten wir uns an der Funktion unserer App: Das Logo zeigt einen Twitter-Vogel, der bis auf die Knochen durchleuchtet wird – so wie wir die Twitter-Accounts einzelner User durchleuchten wollen, um an Informationen zu gelangen.

image4144.pngimage4144.png
g4161.pngg4161.png

Zur gleichen Zeit entschieden wir uns, für die technische Umsetzung unserer App React zu nutzen. React eignet sich besonders gut um interaktive User Interfaces auf Basis von Webtechnologie zu entwickeln. Um dem Nutzer alle Informationen in einem geregelten Ablauf zu präsentieren, setzten wir auf einzelne Slides, die wir beliebig anordnen konnten. Durch diese Slides kann man sich mit Tastatureingaben (Pfeiltasten) oder Scrollen bewegen.

Nachdem wir die Datenfelder in der eben gezeigten Tabelle genau analysiert hatten, machten wir uns daran, in den Daten interessante Aspekte für unsere Anwendung zu finden. Wir legten uns zunächst darauf fest, die folgenden Daten in unserer Anwendung zu nutzen: - Anzahl der Follower - „Verified“-Status - Anzahl verfasster Tweets - veröffentliche Medien (Fotos, Videos, GIFs) - Datum des Twitter-Beitritts - erster Tweet

Da wir die Daten nicht „einfach so“ dem Nutzer präsentieren wollten, entschieden wir uns, zumindest die „trockenen“ Daten mit Kontextinformationen anzureichern. So vergleicht die Anwendung zum Beispiel die Anzahl der Follower des Nutzers mit dem Durchschnitt aller Twitter-Nutzer. Der Text, der dem Nutzer jeweils angezeigt wird, variiert je nach Follower-Anzahl. Der zweite Screen wird nur angezeigt, wenn der Nutzer von Twitter verifiziert wurde.

Screenshot 2019-03-04 at 15.15.40.pngScreenshot 2019-03-04 at 15.15.40.png
Screenshot 2019-03-04 at 15.15.50.pngScreenshot 2019-03-04 at 15.15.50.png

Einen ähnliche Herangehensweise wählten wir für die Anzahl verfasster Tweets. Hier wählten wir als Kontext den Fakt, dass auf Twitter durchschnittlich 5.700 Tweets pro Sekunde veröffentlicht werden. Der finale Screen beinhaltet unter anderem einen sich selbst aktualisierenden Counter, der die Anzahl an bereits auf Twitter veröffentlichten Tweets seit dem Öffnen der Seite durch den Nutzer zeigt.

Screenshot 2019-03-04 at 15.16.01.pngScreenshot 2019-03-04 at 15.16.01.png

Für die vom User veröffentlichten Medien, wollten wir in jedem Fall ermöglichen, dass diese zumindest in einer kleinen Auswahl angezeigt werden oder abgespielt werden können. Wir entschieden uns dafür, das Foto, sowie das Video beziehungsweise GIF, mit den meisten Interaktionen anzuzeigen.

Screenshot 2019-03-04 at 15.16.28.pngScreenshot 2019-03-04 at 15.16.28.png

Das Datum des Twitter-Beitritts ließ sich besonders gut mit dem Ersten Tweet kombinieren. Wir wollten unbedingt den ersten Tweet des Nutzers anzeigen, da man als Twitter-Neuling oft einen peinlichen ersten Tweet absetzt, der schnell in Vergessenheit gerät. Leider gestaltete sich dieses Unterfangen als äußerst schwierig. Die Twitter API erlaubt nämlich keine Anfragen auf den ersten Tweet eines Nutzers, weshalb wir uns mit einem Workaround auf Kosten unseres Anfragen-Kontingents behelfen mussten. Hierzu ein paar technische Details: Um den ersten Tweet eines Nutzers abzufragen muss an die API zumächst eine Anfrage geschickt werden, die die Tweets des Nutzers über einen bestimmten Zeitraum abfragt. Da wir nicht wissen, ob der Nutzer in, sagen wir einem Jahr nach Erstellung seines Accounts, bereits einen Tweet abgesetzt hat, kann es sein, dass diese Anfrage eine leere Antwort („keine Tweets“) zurückgibt. Für diesen Fall musste in der Anwendung ein Fallback bereitgestellt werden. Wir entschieden uns für die Einblendung eines Hinweises. Außerdem können wir nicht zuverlässig sagen, ob der von der Twitter API zurückgegebene Tweet der tatsächlich erste Tweet des Nutzers ist, weshalb wir die Überschrift dieses Punktes in „One of your first Tweets“ abgeändert haben.

Screenshot 2019-03-04 at 15.15.54.pngScreenshot 2019-03-04 at 15.15.54.png
Screenshot 2019-03-04 at 15.59.55.pngScreenshot 2019-03-04 at 15.59.55.png

Für die Abfrage des ersten Tweets muss leider eine separate Anfrage an die Twitter API gesendet werden – das verdoppelte unseren Anfragen-Verbrauch. Im Nachhinein sind wir uns jedoch sicher, dass es das Wert war…

Screenshot 2019-03-04 at 16.03.27.pngScreenshot 2019-03-04 at 16.03.27.png

elon.jpg
elon.jpgelon.jpg

Einer von Elon Musks (@elonmusk) ersten Tweets

Nach mehreren Konsultationen und wertvollem Feedback von Christian fügten wir noch weitere Screens in unsere Applikation ein: - Wortanalyse - Zeitanalyse

Die Wortanalyse hat uns am meisten fasziniert, da man überraschend viel über eine Person erfahren kann, nur auf Basis der benutzten Worte. Für den Screen wählten wir zwei Komponenten:

  • Gesamtzahl der Worte und Anzahl einzigartiger Worte Die Gesamtzahl der Worte gibt Aufschluss darüber, wie wortreich die Tweets des Nutzers ausfallen. Die einzigartigen Worte geben wiederum Aufschluss über den potenziellen Wortschatz des Nutzers.

  • Meist genutztes Wort und längstes genutztes Wort Das meist genutzte Wort ist unserer Meinung nach die spannendste Komponente. Hier wird oft schnell klar, was der inhaltliche und sprachliche Fokus des Nutzers ist. Dreimal dürft Ihr raten, welches das meist genutzte Wort von Donald Trump ist…

Screenshot 2019-03-04 at 15.16.24.pngScreenshot 2019-03-04 at 15.16.24.png

Für die Wortanalyse entschieden wir uns, basierend auf Feedback, dazu, Hashtags, Nutzer-Mentions, und Worte mit weniger als fünf Buchstaben herauszufiltern. Grund dafür war das oft monotone Erscheinen von sehr kurzen und oft gebrauchten Worten wie beispielsweise „I“, „a“, „for“ oder „the“.

Auch die Zeitanalyse offenbart auch einiges an interessanten Details. Gerade durch die Darstellung im Diagramm werden positive und negative Peaks besonders gut visualisiert. Die Zeitanalyse wurde von uns in drei Komponenten aufgeteilt:

  • Tweets nach Datum Hier ist gut zu erkennen an welchem Tag der Nutzer auf Twitter besonders aktiv beziehungsweise inaktiv war. Man kann hierbei eventuell Rückschlüsse auf bestimmte Ereignisse schließen. Ist der Nutzer Fußball-Fan und hat er an einem bestimmten Tag auffällig Tweets verfasst? Wahrscheinlich hat an diesem Tag ein Spiel seines Lieblingsvereins stattgefunden. Das können wir jedoch nur erahnen…

  • Tweets nach Wochentag Tweetet der Nutzer eher an Wochentagen oder am Wochenende? Hier gibt’s die Antwort.

  • Tweets nach Tageszeit Gerade bei Twitter-Powerusern wird hier sehr schnell viel über den Tagesablauf offenbart. Ist der Nutzer tag- oder nachtaktiv? Ist er Frühaufsteher oder Morgenmuffel? Wann legt er Pausen ein? Hier sieht man’s…

Screenshot 2019-03-04 at 15.16.36.pngScreenshot 2019-03-04 at 15.16.36.png
Screenshot 2019-03-04 at 15.16.40.pngScreenshot 2019-03-04 at 15.16.40.png
Screenshot 2019-03-04 at 15.16.44.pngScreenshot 2019-03-04 at 15.16.44.png

Abgeschlossen wird die Web-Anwendung mit einem „About“-Screen der einen kurzen abschließenden Text zum Projekt beinhaltet. Der Nutzer bekommt hier außerdem die Möglichkeit, seine „Twitter Insight“-Daten anzeigen zu lassen. Hier kann er die bereits angesprochene Tabelle mit allen Twitter-Daten einsehen, mit denen die Applikation im Hintergrund arbeitet.

Screenshot 2019-03-04 at 15.16.48.pngScreenshot 2019-03-04 at 15.16.48.png

Des Weiteren ist anzumerken, dass sich die akzentuelle Farbgebung der App sich der Theme-Farbe des gesuchten Twitter-Profils anpasst. Hier ein Beispiel...

Screenshot 2019-03-04 at 15.22.11.pngScreenshot 2019-03-04 at 15.22.11.png

Wenn die gewählte Theme-Farbe zu dunkel oder nicht gesetzt ist, wird die Standard-Theme-Farbe von Twitter verwendet.

Falls der Twitter-Account des Nutzers keine Aktivität im letzten Monat hat, dann wird folgender Hinweis angezeigt...

Screenshot 2019-03-04 at 17.13.36.pngScreenshot 2019-03-04 at 17.13.36.png

Ausblick

Gerne würden wir unsere Anwendung in ihrem kompletten Umfang öffentlich zur Verfügung stellen. Leider gibt es hier einige Hindernisse…

  • Anfragen an die Twitter API
    Durch die Anfragen-Limits können monatlich nur 50 Anfragen an die Twitter API getätigt werden. Pro Nutzer sind zwei Anfragen erforderlich. Heißt in der Praxis, dass die Daten von maximal 25 Twitter-Nutzern im Monat über die Applikation abgerufen werden.

  • Twitter lässt keine Anfragen von Anwendungen in Browsern zu, mit Ausnahme von Chrome
    Durch eine Limitation in der Twitter API werden keine Anfragen von Anwendungen, die innerhalb von Browsern wie Safari, Firefox oder Opera laufen, zugelassen. Chrome und das zu Grunde liegende Chromium-Framework sind dabei eine Ausnahme.

Aufgrund dieser Hindernisse können wir leider nur eine Dummy-Version der Anwendung zur Verfügung stellen. Diese verwendet immer unseren Test-Datensatz von Donald Trump.

Hier geht's zur Dummy-Version: Twitter Insight

Hinweis für Firefox-User: Um das Laden von externen Bildern von Twitter zu erlauben, deaktiviert bitte das standardmäßig aktivierte Content Blocking.

Für eine Demonstration der Vollversion am Beispiel Elon Musk könnt ihr euch dieses Video anschauen:

Fazit

Zusammenfassend ist zu sagen, dass wir ungeachtet der Veröffentlichungsschwierigkeiten sehr zufrieden mit dem fertigen Projekt sind. Trotz der starken Einschränkung der Twitter API, ist hierbei ein Projekt entstanden, welches den User zum Nachdenken anregen kann. Trotz geringer struktureller Schwierigkeiten bot der Kurs sehr viele Lernmöglichkeiten bezogen auf die Arbeit mit Datensätzen. Besonders spannend waren für uns das Arbeiten mit einer API und der Einblick in das Thema Live-Datenabfrage. Schlussendlich hoffen wir, dass sich die App irgendwann veröffentlichen lässt und noch dem einen oder anderem Nutzer zeigt, dass das Internet viel weiß und nichts vergisst.

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: CI

Entstehungszeitraum

Wintersemester 2018 / 2019

Keywords