Mediathek-App für TELE 5

Sebastian
Sebastian, Projektmanagement
24 Okt 2018
Mediathek-App für TELE 5

apple store
google play

Seit Anfang dieses Jahres betreuen wir als digitale Lead-Agentur TELE 5, einen Fernsehsender aus Grünwald. Unsere Verantwortlichkeit umfasst technische Dienstleistungen, die Online-Redaktion, den Launch auf ein neues Videosystem, Suchmaschinen-Optimierung und Performance Marketing. Vervollständigt wird diese 360°-Betreuung nun durch unsere selbst entwickelte Mediatheken-App, die wir am 23.10.2018 für TELE 5 auf den Markt gebracht haben. Die Highlights des Senders sind nun also nicht mehr nur auf der www.tele5.de Website zugänglich, sondern zusätzlich überall und zu jeder Zeit in der TELE 5 Mediathek-App.  

Zu sehen gibt es Filme, Serien und Hausgemachtes. Unter Filmen kann sich der Zuschauer über ausgewählte Spielfilme erfreuen. Das Serien 1×1 erstreckt sich von „Buffy – im Bann der Dämonen“ über „Star Trek“ bis hin zu „Digimon“. Die Kategorie Hausgemachtes zeigt hausgemachte Eigenproduktionen von TELE 5, zum Beispiel „Kalkofes Mattscheibe“, „Fat Chicken Club“ und die schlechtesten Filme aller Zeiten, bekannt als „SchleFaZ“. Sowohl Horror- und Action-Film-Liebhaber als auch Sci-Fi Fans finden hier alles, was das Herz begehrt. 

Interessiert?
Kontaktieren
Sie uns!

Daniel Gey, Geschäftsführer buzzwoo: „Wir freuen uns sehr, dass wir den TELE 5-Zuschauern die Programm-Highlights nun auch ‚to go’ anbieten können. ‚Anders ist besser’ – ist nicht nur das Motto des Senders, und mit dieser App zeigen wir einmal mehr, dass das gesamte digitale Portfolio der Marke TELE 5 herausragend, besser und eben anders ist!“

Interessiert an der technischen Umsetzung? Dann hier weiterlesen:

Wir haben sowohl eine iOS-App als auch eine Android-App entwickelt, jeweils als mobile- und Tablet-Version. 

Android:

Auswahl der Programmiersprache: 

Die offiziellen Programmiersprachen für die Android Platform sind Java und Kotlin. Beide laufen auf einer Java Virtuellen Maschine, sind statistisch typisierte Programmiersprachen und sind miteinander kompatibel. Diese Gemeinsamkeiten  erschweren die Entscheidung, welche der Sprachen besser für die Android-App-Entwicklung geeignet ist. Nach unserer Recherche und dem Vergleich von Code-Ausschnitten haben wir uns klar für Kotlin entschieden. Die Gründe hierfür waren zum einen erwartete höhere Effizienz verglichen zu Java, da weniger Quellcode benötigt wird, was den Code kompakter macht. Zum anderen erscheint es einfacher in Bezug auf Lesbarkeit und einer intuitiven Syntax. Des Weiteren wird davon ausgegangen, dass Google langfristig Kotlin mehr unterstützt als Java, da die modernere Sprache 2017 von Google als offizielle Android-Sprache angekündigt wurde. Die Benutzer-Community und die Häufigkeit von Updates steigen also für Kotlin, während sie für Java sinken. Dies macht Kotlin zukunftsorientiert und die Entscheidung für Kotlin wurde getroffen.  

Einrichtung einer integrierten Entwicklungsumgebung (IDE): 

Das Google Android Studio ist die offizielle integrierte Entwicklungsumgebung von Android. Es wird verwendet, um Code zu schreiben, zu kompilieren und auszuführen.

Code Ausschnitt:

Die Hauptaktivität entwickelt die Struktur, den Ton und die Orientierung des Bildschirmes. Hier ist ein Codebeispiel der Hauptaktivität:

Code-Android

Darin enthalten ist die Prüfung, ob die App auf einem Handy (statt Tablet) geöffnet wird. Falls ja, wird die Ausrichtung des Screens auf Hochformat festgelegt. Die Standardausrichtung ist Hoch- und Querformat, d.h. sobald der Anwender das Gerät dreht, wird auch die Ausrichtung geändert (falls dies in den Einstellungen des Geräts aktiviert ist). 
Außerdem zeigt dieser Code-Ausschnitt die Integration des Sounds, sobald die App geöffnet wird. Die Audiodatei wird bei Herunterladen der App auf dem Gerät des Benutzers gespeichert.

iOS:

Auswahl der Programmiersprache: 

Die Programmiersprache von Apple ist Swift. Diese wurde 2014 erstmals von Apple entworfen und ist mit Objective-C kompatibel. Wir haben die Version Swift 4.1 benutzt. 

Einrichtung einer integrierten Entwicklungsumgebung (IDE): 

Die integrierte Entwicklungsumgebung von Apple ist Xcode, in der Projekte und Dateien verwaltet werden, der Code geschrieben, kompiliert und ausgeführt wird. 

Code Ausschnitt:

Hier ein Code-Ausschnitt der Programmiersprache Swift: 

Code-Swift

Ebenso wie bei dem Android Beispiel, wird hier die Ausrichtung der App und der Start-Sound programmiert (siehe oben).

Code-Swift-2

Übertragung der Inhalte in die App:

Die Übertragung der Inhalte in die App funktioniert wie bei Android über eine Mediumware und den nexxOmnia API Service (siehe oben). 

Interessiert?
Kontaktieren
Sie uns!

API:

Übertragung der Inhalte in die App:

Die Inhalte der www.tele5.de Website inklusive aller Filme und Serien wird bereits in dem Videoanbieter von nexxOmnia gespeichert. Wie war es uns möglich, diese Inhalte nun in die App zu übertragen? Dazu haben wir eine Mediumware erstellt, vorzustellen wie eine Backed-Website für den Administrator, die eine API erstellt. Dann kontaktieren wir die Mediumware aus dem Code heraus, um Schieberelemente, die Größen und Designs der Bereiche, Suchfunktion und die Inhalte (Filme, Serien) von dem Omnia-nexx API-Service zu bekommen. 

Verwendetes Programmiermuster: Model View Viewmodel (MVVM):

Model View Viewmodel (MVVM)

Das Architekturmuster für die App-Entwicklung, das verwendet wurde, war Model View Viewmodel, bekannt als MVVM.
Die „View“-Komponente repräsentiert das User Interface, also alles, was auf der Oberfläche der Anwendung erscheint. Diese „View“-Komponente bekommt Daten des „view-models“, welches die Kernlogik enthält, die den Webservice abruft. Das „View model“ wiederrum erhält die Daten von dem „Model“, dem Datenspeicher. Wieso kann die „View“-Komponente die Daten jedoch nicht direkt vom „Model“ abrufen, sondern geht über den Zwischenschritt „View Model“? Hier spielt Agilität eine Rolle. Das „View Model“ als Zwischenschritt bietet kleine Schritte, denen jeder folgen kann. Dies vereinfacht es, als Team an der Entwicklung zu arbeiten. Außerdem ermöglicht diese Agilität ein einfacheres Debuggen. 

Sind Sie nun gespannt sich selbst ein Bild von unserer App-Navigation und den Inhalten zu machen? Jetzt kostenlos downloaden: 

Appstore
Play-Store

Weitere Informationen unter: https://www.tele5.de/app 

Hier finden Sie aktuelle Pressemitteilungen zur neuen Mediathek-App: WUV.de


Haben Sie Fragen oder benötigen eine individuelle Beratung zu dem, was Sie gerade gelesen haben? Zögern Sie nicht, uns zu kontaktieren! Besuchen Sie unsere Kontaktseite und lassen Sie uns ein Gespräch darüber beginnen, wie wir Ihnen helfen können, Ihre Ziele zu erreichen.

Daniel

Jetzt Beratungsgespräch vereinbaren:

Daniel Gey

Geschäftsführung München

+49 89 215420 130

Email schreiben