Nachdem vor einiger Zeit der Abschluss meines Bachelorstudiums nahte, war es an der Zeit, dass ich mich nach einem geeigneten Thema für meine Abschlussarbeit bzw. mein Abschlussprojekt umsehe. Zum Glück habe ich hier sehr schnell etwas passendes gefunden. Mein Betreuer für die Bachelorarbeit bat mir damals die Entwicklung einer Online-Radio Plattform für das Österreichische Rote Kreuz an. Henri.FM ist das Event-Radio des Roten Kreuzes, das über Veranstaltungen und Aktivitäten des Roten Kreuzes berichtet. Für dieses Event-Radio sollte eine Mobile App entwickelt werden, sodass interessierte Hörer den Livestream über ihr Smartphone oder Tablet hören können. Das klang sehr interessant, da das Produkt meiner Arbeit wirklich in der “realen Welt“ Anwendung finden würde. Da Ich das ganze Projekt sehr schön finde, und es mir eigentlich auch viel Spaß macht, daran zu arbeiten, möchte ich hier einen kleinen Einblick in einige technische Details geben.
Als ich mit dem Projekt Henri.FM in Berührung kam, gab es bereits eine web-basierte Anwendung, die ein Abspielen des Livestreams möglich machte. Da aber eine Lösung gewünscht wurde, deren Features mit den Möglichkeiten einer WebApp nicht realisierbar waren, sollte eine Mobile App entwickelt werden, die nicht nur Zugriff auf den Livestream von Henri.FM bietet, sondern auch Zugriff auf Newsbeiträge, Podcast-Episoden und die Möglichkeit, mit dem Henri.FM-Team in Kontakt zu treten. Zum Verwalten der Inhalte, die in der App angezeigt werden, sollte außerdem eine web-basierte Content-Management-Plattform entwickelt werden.
Die App
Die Mobile App habe ich mit Hilfe von React Native, einem Cross-Platform-Framework, entwickelt. Damit ist es möglich, aus nur einer Codebase eine iOS-App und eine Android-App zu erzeugen. Das Angenehme daran: Mit dem Cloud-Build-System Expo kann man die erzeugten Apps auch direkt in die entsprechenden App-Stores übertragen. Für die Übertragung in den Apple App-Store benötigt man hierbei auch nicht zwingend einen Mac, was für mich als Windows/Android User natürlich sehr fein ist. Das bedeutete ganz konkret, dass es mir möglich war, die App unter Zuhilfenahme meines Android-Geräts (bzw. Android-Emulator) zu entwickeln während ich mir sicher sein konnte, dass sie auch (fast) genau so auf einem iOS Gerät funktionieren würde. Einige kleine Details mussten zwar für jedes Betriebssystem getrennt geregelt werden, das war aber mit React Native kein großes Problem.
Die App bietet Nutzern die Möglichkeit, den Livestream von Henri.FM zu hören während Informationen über den aktuellen Song und die aktuellen Radiomoderator:innen übersichtlich dargestellt werden. Der Livestream läuft dabei auch, wenn sich die App im Hintergrund befindet oder das Gerät gesperrt ist. Mit der App können können die Hörerinnen und Hörer nicht nur auf den Livestream zugreifen, sondern auch auf die Episoden des Henri.FM Podcast, die, nach Kategorien geordnet, übersichtlich präsentiert werden, sowie auf Newsbeiträge, die vom Henri.FM-Team verfasst werden. Ein besonders wichtiges Feature ist die Möglichkeit, mit den Radiomoderator:innen in Kontakt zu treten. Dafür wurde ein Kontaktformular in die App integriert, das es nicht nur erlaubt, Botschaften in Textform zu verfassen, sondern auch Sprachnachrichten und Bilder zu senden. Im Einstellungsbereich der App können Einstellungen zum Empfang von Push-Benachrichtigungen und zum Sammeln von Daten über das Nutzungsverhalten einfach angepasst werden.
Für viele Szenarien in der App wurde ein eigenes Layout für Tablets entwickelt. Der Grund dafür ist, dass oft eine simple Skalierung des bestehenden Layouts auf größere Bildschirme die Lesbarkeit von Inhalten beeinträchtigte oder dass der Platz auf einem größeren Bildschirm vom bestehenden Layout nicht optimal genutzt wurde. Beispielsweise werden auf einem Tablet im Querformat die Bilder der Moderatoren und das Albumcover nebeneinander angezeigt anstatt übereinander. Außerdem erstreckt sich der Text eines Newsbeitrags auf einem Tablet nicht über die gesamte Bildschirmbreite, was einen positiven Effekt auf die Lesbarkeit des Beitrags hat.
Die Content-Management-Plattform
Natürlich muss die App irgendwie mit Inhalten gefüllt werden, irgendwo muss geregelt werden, was in der App angezeigt wird. Hierfür habe ich eine Content-Management-Plattform entwickelt, die vom Backend der App als WebApp bereitgestellt wird. Das Backend wurde vollständig in Javascript/Node.js realisiert. Als Framework diente Next.js. Mit diesem System können alle Funktionen der App einfach gesteuert werden. Es können Podcast-Episoden hochgeladen werden, Newsbeiträge verfasst werden und die Nachrichten, die über das Kontaktformular in der App gesendet wurden, eingesehen werden. Außerdem werden vom Backend Informationen aus anderen System entgegengenommen und an die App weitergeleitet. Beispielsweise werden Informationen über den aktuell gespielten Song automatisch von der vom Henri.FM-Team eingesetzten Radio-Automatisierungssoftware empfangen und an die App weitergeleitet. Das Backend interagiert auch mit Google Firebase bzw. Apple Push Notification Service um den Versand von Push-Benachrichtigungen zu ermöglichen.
Da viele Personen in die Gestaltung der Inhalte von Henri.FM involviert sind, können mehrere Benutzer für das System über die Management-Plattform angelegt werden. Für jedes Mitglied des Teams können die Zugriffsrechte für die verschiedenen Bereiche der Applikation individuell festgelegt werden. Außerdem können die Zeitpläne der Radiomoderator:innen und der verschiedenen Radiosendungen sowie anderer involvierter Personen mit Hilfe einer Kalender-Ansicht geplant werden. Diese Zeitpläne werden herangezogen, um stets die aktuellen Radiomoderator:innen und Sendungsnamen in der App anzuzeigen. Außerdem werden Mitglieder des Henri.FM-Teams anhand dieser Zeitpläne individuell in der Content-Management-Plattform über ihre “Dienstzeiten” informiert.
Der Austausch von Daten zwischen der App und dem Backend erfolgt über ein REST-API und die Daten selbst werden in einer MongoDB Datenbank abgelegt. Mediendateien wie Bilder und Audiofiles werden in einem MinIO Object-Storage gespeichert. Die Kommunikation zwischen dem Content-Management-System und dem Backend erfolgt ebenfalls über dieses REST-API. Diese Architektur hat den Vorteil, dass die einzelnen Komponenten einfach austauschbar sind oder auch neue Komponenten hinzugefügt werden können. Beispielsweise könnte in Zukunft eine neue WebApp entwickelt werden, die ebenfalls auf dieses API zugreift. Für die Bereitstellung des Backends wird Kubernetes eingesetzt. Dies ermöglicht einerseits eine einfache Skalierung des ganzen Systems wenn es einmal zu erhöhten Zugriffszahlen kommen sollte und andererseits erleichtert es das Bereitstellen von neuen Versionen der Software, da Kubernetes in der Lage ist, automatisch neue Versionen aus der entsprechenden Container-Registry zu ziehen sobald neue Images verfügbar sind. Vervollständigt wird das Ganze dann noch durch eine Build-Pipeline, die bei Änderungen am Source-Code neue Container-Images erstellt und in der Container-Registry ablegt.
Ich hoffe, dass ich hiermit einen kleinen Einblick in die technischen Hintergründe des Systems von Henri.FM geben konnte und hoffe, dass das Team und die Hörer von Henri.FM viel Freude bei der Benutzung haben werden. Ich bin außerdem gespannt, was die Zukunft für dieses Projekt bereithält und welche neuen Features zu diesem System noch hinzugefügt werden.
