Freizeitprojekt: personalNews – dein Nachrichtenfeed. Chronologisch sortiert

Geht es dir wie mir? Du siehst regelmäßig Tagesschau? Dein Feedreader ist ständig gut gefüllt? Du stehst auf Timelines, weil diese für dich das einfachste Konzept zum lesen von Nachrichten ist? Dann ist mein kleines Freizeitprojekt personalNews vermutlich etwas für dich.
personaNews, das sind Nachrichten in einer Timeline. Chronologisch sortiert und mit einer Blacklist zur Vermeidung von dir unwichtigen Nachrichten.
Wenn du dann noch gern Nachts deine Nachrichten liest, freust du dich sicher über den Nachtmodus?
Ursprünglich habe ich personalNews für die Web Panel des Vivaldi-Browsers entwickelt – Mittlerweile nutze ich personalNews ausschließlich auf dem Smartphone. Aber der Reihe nach…

PersonalNews auf dem iPhone

Von iOS zu Vivaldi

Vor einigen Jahren habe ich lange nach einer Nachrichten-App gesucht, mit der ich einen schnellen Überblick über das Geschehen erhalte. Mir schwebte hier eine Timeline vor, wie sie auch in Twitter oder Facebook Verwendung findet. Auf diese Weise können die Schlagzeilen schnell gescannt werden. Ist etwas Interessantes dabei, können dann noch die Details gelesen werden. Die App sollte möglichst einfach strukturiert sein. Nach dem ich mehrere Apps getestet habe, nutze ich recht lange Newsflash
Es stellte sich dann schnell als Nachteil heraus, dass ich auf die Feeds limitiert war, die die App vorgibt.
Just zu der Zeit testete ich den Vivaldi-Browser, der als momentan einziger Browser die Webpanels bietet.

Webpanels, dass sind, vereinfacht gesagt, mobile Websites, die neben der aktuellen Website aufgerufen werden können. Für Dienste wie Twitter, Pocket oder Hackernews der perfekte Ort um schnell griffbereit zu sein. Mir wurde schnell klar, dass dies aber auch der perfekte Platz für einen Nachrichtenfeed ist. Aus diesem Grund begann ich die Entwicklung von personalNews. Ein kleiner, auf PHP basierender Feedreader.

Das Konzept

Das grundlegende Konzept war einfach
– Bündelung verschiedener Feeds und chronologische Ausgabe in einer Timeline
– Unterstützung von Atom und RSS
– Bündelung verschiedener Feeds in mehrere Kanäle
– Konfiguration via JSON und Verarbeitung via PHP
– Keine Verwendung von Frameworks um die Ladezeiten so klein wie möglich zu halten.
– Die wenigen interaktiven Elemente sollten via vanilla Javascript umgesetzt werden

personalNews auf Vivaldi im Webpanel

Von der Idee zur Umsetzung

Ich begann, einen ersten Feed auszulesen und diesen via PHP zu verarbeiten. Als Feed wählte ich hier den RSS-Feed der Tagesschau. Der erste Schritt bestand darin, den Feed in einzelne Elemente und Variablen zu zerlegen, und diese mit eigenen Informationen anzureichern, die der Feed selbst nicht hergab. Als Beispiel möchte ich an dieser Stelle ein für Mensch lesbares Datumsformat der Veröffentlichung der einzelnen Nachricht, das Icon der Quelle oder auch die Domain der selben nennen. In diesem Fall www.tagesschau.de.
Ich wollte die Verarbeitung der Daten möglichst modular aufbauen, so dass ich das Programm schnell erweitern konnte.
Ich entschied mich, die Verarbeitung des Feeds in einzelne Funktionen zu gliedern, die nacheinander aufgerufen werden.

Der grundlegende Ablauf ist dabei folgender:
– Feed einladen, zerlegen und die Daten in einem mehrdimensionalen Array speichern. Ein timestamp, der zur chronologischen Sortierung verwendet wird, wird an dieser Stelle aus dem Veröffentlichungsdatum erstellt.
– Das Array wird in einem HTML-Konstrukt ausgegeben, so dass eine sortierte Timeline entsteht.
– Die Texte der Nachrichten sollen auf eine maximale Zeichenlänge begrenzt werden. Bei erreichen der Zeichenlänge soll der aktuelle Satz aber noch vollständig ausgegeben werden.

Zugegeben, zu diesem Zeitpunkt ist dieser Ablauf noch "over the top", aber spätestens mit dem zweiten Feed wird dann die chronologische Sortierung relevant. Ausserdem kamen mir bei der Umsetzung bereits verschiedene Ideen zur Erweiterung der Software. Zum Beispiel eine Blacklist für unerwünschte Nachrichten.

Im nächsten Schritt begann ich, einen weiteren Feed einzulesen, um die chronologische Sortierung zu testen. Ich glaube, es war der Nachrichtenfeed von www.zeit.de

Nun war es an der Zeit ein weiteres Format zu implementieren – nämlich Atom. Es stellte sich heraus, dass sich Atom und RSS recht ähnlich sind. Der einfachste Weg das Format zu erkennen, erschien mir zu prüfen, ob die einzelnen Nachrichten in einem "channel" oder einem "entry" gespeichert sind.
Als schrieb ich eine Funktion, die genau diese Prüfung durchführt und hängte vor die Zerlegung der Feeds ein.

Das Resultat war nun eine HTML-Ausgabe mehrerer Feeds in einer chronologischen Sortierung der einzelnen Nachrichten. Exakt das von mir gewünschte Resultat. Großartig :)

PersonalNews auf dem iPhone

Das Styling

Nun begann der für mich einfache Teil. Styling der Timeline mittels CSS. Im ersten Schritt erstellte ich eine mobile Ansicht, damit personalNews in einem Vivaldi Web Panel laufen konnte. Schnell kam mir die Idee zu einem Nachtmodus.

Mittels Javascript sollten zwei verschiedene Themes umgeschaltet werden können. Beide Themes werden in SCSS-Variablen konfiguriert und mittels gulp in CSS konvertiert. Die Nachtumschaltung selbst setzt eine entsprechende Klasse am und schreibt diesen Wert in das localsStorage, sowie einer PHP-Session, so dass der zuletzt gewählte Modus beim nächsten Laden der Seite zur Verfügung steht.

Es wurde Zeit, personalNews in der Vivaldi-Community zu veröffentlichen. Das Feedback der Vivaldi-Entwickler und der Community war gut und so habe ich die Software weiterentwickelt. Außerdem habe ich schnell eine Website zusammengestellt, die die grundlegenden Features von personalNews zeigt. Die Umsetzung hat ungefähr zwei Stunden in Anspruch genommen und du solltest dort nicht zu genau in den Code schauen… personalNews Landingpage

Mehrere Feeds sind ein Kanal

Da ich Feeds nach Themen bündeln wollte, begann ich den Code entsprechend zu erweitern. Die Konfiguration sollte ebenfalls über JSON erfolgen. Mehrere Feeds werden hier in ein Array geschrieben, das hier als Container für einen Kanal dient. Auch soll der gewählte Kanal gespeichert werden, so dass die Timeline geladen wird, die als letztes aktiv war, nachdem personalNews verlassen, bzw. geschlossen wurde.
Mittels Ajax wird PHP-Code getriggered, der die Feeds lädt und den aktuell gewählten Kanal in einer Session speichert.

Blacklisting: Keywords und URL

Da ich kein großer Fussballfan bin, sind für mich die Sportnachrichten nur wenig relevant. Ich entwickelte daher eine PHP-Funktion, die das Blacklisting von Elementen durchführen sollte. Konfigurierbar sollte die Blacklist ebenfalls in der JSON-Datei sein. Die Umsetzung ist dabei recht einfach. Alle Keywords in der JSON-Datei werden in ein Array gewandelt und dessen Inhalte mit dem Titel und dem Text der Nachricht verglichen. Gibt es eine Übereinstimmung wird das Array des Feeds um einen Blacklistflag erweitert, so dass diese Nachricht bei der Ausgabe übersrprungen wird. Um die Loops über die Nachrichten zu verringern, werden der Titel der Nachricht, sowie deren Text zu einem String zusammengefasst.

Um nun auch ganze Unterverzeichnisse oder Domains auszuschließen, wird dem Titel und dem Text auch die URL der Quelle hinzugefügt. Dabei stellte sich heraus, dass die Tagesschau auch URLs von www.sportschau.de im Feed einsetzt. Andere Quellen nutzen das Unterverzeichnis /sport. Also kann, um alle Sportnachrichten zu unterdrücken, das Keyword sport aufgenommen werden – als Ergebnis sind alle Sportnachrichten aus Quellen mit sport in der URL in personalNews unterdrückt.

personalNews auf dem iPad

Jetzt noch responsive

personalNews funktionierte ja bereits auf in Web Panels und mobilen Geräten, aber auf größeren Screens waren die Nachrichten schwer zu lesen. Mit einem einfache CSS media-Query entwickelte ich eine zweispaltige Ansicht der Nachrichten. Allerdings werden die Titel (quasi die Schlagzeilen) der Nachrichten links und die gekürzten Texte rechts ausgegeben. Das hat den Vorteil, dass die Schlagzeilen schnell gescannt werden können, und bei gewecktem Interesse die Texte dazu gelesen werden können – nämlich auf der rechten Hälfte des Bildschirms.

Hol dir personalNews

Du findest das personalNews auf Github. Dort kannst du dir alle Dateien herunterladen. Eine Demoversion des aktuellen Standes findest du hier http://www.metafolio.de/side-projects/personalnews/

Wenn dich die Landingpage zu personalNews interessiert, besuchst du www.metafolio.de/landing/personalnews/. Du findest dort die Highlights in englischer Sprache, sowie ein paar kurze Demo-Videos.

Alle Dateien und eine Dokumentation in englischer Sprache findest du auf Github unter https://github.com/saschadiercks/personalNews

Ich hoffe, personalNews wird dir genau so nützlich sein wie mir. Du kannst personalNews auf deinem Homescreen speichern oder als Bookmark ablegen. Bei mir gehört personalNews mittlerweile zu den meist genutzten Seiten – und nein, ich nutze keine andere Nachrichten-App mehr.

Leser schrieben dazu:

Leider hat noch niemand diesen Artikel kommentiert.

Ihre Meinung interessiert mich sehr: