Anzeige
Anzeige
UX & Design
Artikel merken

Einführung in die Entwicklung von Smart-TV-Apps

Mittlerweile existieren für viele Smart TVs unterschiedlicher Hersteller App Stores, in denen Entwickler ihre Apps platzieren können. Aufgrund des bisher noch überschaubaren Angebots ist jetzt ein guter Zeitpunkt, um mit der richtigen Idee, einer durchdachten Umsetzung und etwas Glück als Entwickler eine Vorreiterrolle einzunehmen. Die Voraussetzungen sind allerdings nicht optimal, da die Programmierung von Smart-TV-Apps noch am Anfang steht. Ein Einblick in die Entwicklung für die wichtigsten Smart-TV-Plattformen.

10 Min. Lesezeit
Anzeige
Anzeige

Neben App Stores bieten die meisten Hersteller auch SDKs an, mit deren Hilfe sich interessierte Entwickler an die Arbeit machen können. Ein Gros der Smart-TV-Apps ist im Gegensatz zu den Verwandten aus dem Smartphone- oder Tablet-Bereich auf eine Internetverbindung angewiesen. Das liegt schlicht daran, dass es sich meist um Web-Apps handelt, die im Browser des TV-Geräts ausgeführt werden. Weitere Umstände unterscheiden Smart-TV-Apps von Apps für andere Geräte. Dazu gehören:

  1. Die Umgebung: Der Nutzer sitzt weit vom Bildschirm entfernt und ist häufig in Gesellschaft von Freunden und Familie.
  2. Die Steuerung: Nur die Tasten der Fernbedienung stehen zur Verfügung. Bei einigen Modellen können Smartphone und Tablet ebenfalls zur Steuerung dienen. Auch die Steuerung über Gesten und Sprache ist vereinzelt bereits möglich.
  3. Verschiedene Systeme: Ähnlich wie bei Smartphones gibt es auch bei Smart TVs verschiedene Hersteller mit jeweils eigenen Systemen. Die Situation bei Smart TVs ist allerdings wesentlich unübersichtlicher als bei Smartphones oder Tablets.
  4. Die Geschwindigkeit: Dank LAN- oder WLAN-Anbindung kann man auf dem TV mit einer schnellen Datenverbindung rechnen und muss so nicht auf lokales Caching setzen. Allerdings sind die meisten Smart TVs in Sachen Rechenleistung eher schwachbrüstig.
Anzeige
Anzeige

Die Programmierung für den Smart TV basiert auf
CE-HTML (Consumer Electronics HTML), einer HTML-Version, die auf HTML5 aufbaut und die Eigenheiten der TV-Geräte berücksichtigt. Dazu gehört zum Beispiel das
CSS TV Profile, das die Größen von Schriften, Symbolen und Grafiken
anpasst. Auch die Benutzung mit einer Fernbedienung, also ohne einen
richtigen Mauszeiger, wird abgedeckt. CE-HTML ist auch der Unterbau für HbbTV. Diese Abkürzung steht für Hybrid Broadcast Broadband TV und es
handelt sich dabei um einen Dienst, der ähnlich wie Videotext vom
Fernsehsender zur Verfügung gestellt wird, um beispielsweise weitere Informationen zum
Fernsehprogramm zu liefern. HbbTV stellt Informationen sowohl über das Fernsehsignal als auch über
das Internet bereit.

Das SDK von Samsung erhalten Entwickler in Form einer Eclipse-Erweiterung.
Das SDK von Samsung erhalten Entwickler in Form einer Eclipse-Erweiterung.

Grundvoraussetzungen

Entwickler können bei der Programmierung von Smart-TV-Apps mit HTML5- und JavaScript-Kenntnissen auskommen. Jedoch hat sich auf dem Fernseher noch kein eigener Standard durchgesetzt. Samsung setzt zum Beispiel auf CE-HTML/HTML5 und Flash, Panasonic auf CE-HTML/HTML5 und JavaScript. Mit der Smart TV Alliance gibt es allerdings zumindest den Versuch, eine einheitliche und kompatible Plattform aus der Taufe zu heben. Derzeit sind allerdings nur Phillips, LG und Sharp dort vertreten.

Anzeige
Anzeige

Zwar ähneln sich die unterschiedlichen Plattformen der Hersteller in
gewissen Punkten, aber das heißt noch lange nicht, dass
Entwickler ihre App ohne zusätzliche Anpassungen auf alle Smart TVs
bringen können. Ganz im Gegenteil: Sowohl abweichende Details im Code
als auch bei Videocodecs führen dazu, dass die programmierte App sogar
auf unterschiedlichen Geräten desselben Herstellers oftmals nicht ohne Weiteres läuft. Will man seine App also auf möglichst vielen
Geräten anbieten, ist der Aufwand immens. Ein weiteres Problem besteht darin, dass man
seine App auf der entsprechenden Hardware testen muss. Zwar stehen
TV-Emulatoren zur Verfügung, aber diese emulieren die tatsächliche
Hardware nur unzureichend. Wer sicher gehen will, muss also Zugriff auf
jeden Fernseher haben, auf dem die App später angeboten werden soll. Das
kann schnell sehr teuer werden.

Anzeige
Anzeige

Auf den nächsten Seiten geht es exemplarisch um die Entwicklung für Smart TVs von Samsung, die Smart TV Alliance und die Situation bei Panasonic-Geräten. Samsung ist einer der Vorreiter in Sachen Smart TV und aus diesem Grund
lohnt es, sich als Erstes mit den Gegebenheiten dieses Herstellers zu
beschäftigen. Im Folgenden geht es daher um die Grundlagen der
Entwicklung von TV-Apps für Smart-TV-Geräte von Samsung.

Entwickeln für den Samsung Smart TV

Wer die App-Entwicklung im Smart-TV-Universum von Samsung austesten möchte, muss sich zunächst das entsprechende SDK herunterladen. Das Samsung-SDK kommt als eine Erweiterung für Eclipse daher. Neben dieser erhält man auch einen Emulator, mit dem man die Apps ohne echten Fernseher testen kann.

Anzeige
Anzeige

Nach der Installation gilt es, ein neues Projekt zu erstellen. Hier stehen folgende drei Projektarten zur Verfügung:

  • Samsung SMART TV Basic App Project
  • Samsung SMART TV Flash App Project
  • Samsung SMART TV JavaScript App Project

Entwickler, die mit HTML5 arbeiten möchten, müssen das JavaScript-Projekt wählen. Dabei erhalten sie automatisch ein kleines Beispiel, mit dem man bereits erste Funktionen testen kann. Öffnen Entwickler die index.html in Eclipse, sehen sie eine normale Website mit zwei eingebundenen JavaScript-Files der API:

Javascript

...
 <script type="text/javascript" language="javascript" xsrc="$MANAGER_WIDGET/Common/API/Widget.js"></script>
 <script type="text/javascript" language="javascript" xsrc="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
...

„Widget.js“ (im Code-Beispiel zu sehen) fungiert quasi als Basis für die Smart-TV-App und regelt unter anderem den Start der Anwendung. In „TVKeyValue.js“ sind dagegen die einzelnen Tasten der Fernbedienung definiert. Sie bilden lesbare Namen der Key-Codes der Tasten ab.

Anzeige
Anzeige

Wie im folgenden Codeschnipsel der Widget.js-Datei aufgezeigt, regelt die JavaScript-Klasse „Main.js“ den Ablauf der App. In „index.html“ wird das onload-Event des Bodys an die Funktion „Main.onLoad“ gebunden. Diese muss der Samsung-API mitteilen, dass die App nun fertig geladen hat. Das geht über die Funktion „sendReadyEvent“ der Klasse „Common.API.Widget“:

Javascript in Widget.js

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main = {};
Main.onLoad = function()
{
 widgetAPI.sendReadyEvent();
};

Die keyDown-Funktion in der TVKeyValue.js-Datei sorgt für die Codierung der Fernbedienungstasten. Es läuft im Endeffekt immer so ab, dass ein Element fokussiert (focus) und bei einem Tastendruck auf der Fernbedienung das onkeydown-Event aufgerufen wird. An dieses lässt sich wie bei herkömmlichem HTML einfach eine Funktion binden. Im ausgelieferten Beispiel ist die Funktion „Main.keyDown“ angebunden. Mit dem keyCode, der vom keydown-Event mitgeliefert wurde, wird geprüft,
welche Taste der Nutzer gedrückt hat. Daraufhin wird ein entsprechender
String ausgegeben.

Javascript in TVKeyValue.js

Main.keyDown = function()
{
 var keyCode = event.keyCode;
 alert("Key pressed: " + keyCode);

 switch(keyCode)
 {
 case tvKey.KEY_RETURN:
 case tvKey.KEY_PANEL_RETURN:
 alert("RETURN");
 widgetAPI.sendReturnEvent();
 break;
 case tvKey.KEY_LEFT:
 alert("LEFT");
 break;
 case tvKey.KEY_RIGHT:
 alert("RIGHT");
 break;
 case tvKey.KEY_UP: 
//
//
//und so weiter und so fort 
  }
};

Das ist natürlich nur die Basis einer Samsung-App. Es gibt noch sehr
viele APIs, mit denen man unter anderem auch mit dem Samsung-Smartphone
oder Tablet den Fernseher steuern kann. Das könnte gerade für
Game-Entwickler interessant sein. Außerdem hat Samsung ein eigenes Werbenetzwerk namens AdHub, mit dem
man seine Apps monetarisieren kann. Das Anbieten kostenpflichtiger Apps im
App Store ist im Gegensatz zum Angebot von In-App-Payments derzeit in Deutschland nicht möglich.

Anzeige
Anzeige

App auf einem Samsung-TV testen

Um seine App auf einem echten Fernseher zu testen, benötigt man einen lokalen Rechner mit installiertem Apache-Server. Wer vorher schon einen Apache-Server (zum Beispiel über XAMPP) installiert hat, kann diesen ebenfalls nutzen und braucht dazu keine neue Instanz mehr. Der Server dient nur zum Übertragen der Daten – PHP oder Ähnliches sind nicht erforderlich.

Zuerst muss man den String „<type>user</type>“ in der Datei „config.xml“ hinzufügen, um zu kennzeichnen, dass das Paket an den User geht. Nun gilt es, unter „Samsung SMART TV SDK > Samsung SMART TV SDK Preferences“ bei „Server“ den Pfad zum Root-Folder des Apache-Servers zu setzen. Dies könnte zum Beispiel der htdocs-Ordner sein. Jetzt muss die App noch über „Samsung SMART TV SDK > App Packaging“ in einen Zip-Ordner gepackt werden. Der Name des Pakets besteht aus einer Versionsnummer, dem Namen der App und des Kontinents sowie dem aktuellen Datum. Man kann die gewünschten Sprachen hinzufügen sowie einen Titel und eine Beschreibung der App hinterlegen.

Im Ordner des Apache-Servers befindet sich nach diesem Schritt eine „widgetlist.xml“ und ein Widget-Ordner, der auch das erstellte Zip-Archiv enthält. Leider muss dieser Ordner unter einer IP und nicht unter der Domain erreichbar sein. Wer also noch andere Websites auf dem Apache hat, muss den entsprechenden Ordner auf den Default-Pfad setzen. Auf dem Fernseher selbst müssen sich Entwickler mit dem „develop“-Account registrieren und einloggen. Nun lässt sich unter „Extras“ > „Einstellungen“ auf Entwickler-Einstellungen zugreifen. Hat man den Vertrag akzeptiert, kann unter Server-IP-Einstellungen die IP des Rechners eingegeben werden. Nach der Eingabe der IP können App-Entwickler dann über den Menüpunkt „Synchronis. der Benutzereinstellungen“ die lokale App auf dem Smart-TV-Gerät testen.

Anzeige
Anzeige

Smart TV Alliance

Die Smart TV Alliance hat sich zum Ziel gesetzt, einen Standard für die Entwicklung von Smart-TV-Apps zu etablieren. So soll es in Zukunft möglich sein, mit einem Quellcode sofort alle Smart-TV-Hersteller abzudecken. Derzeit unterstützen bereits Philips, LG und Sharp diesen Standard.

Die Smart TV Alliance bietet für den ersten Einstieg in die App-Entwicklung eine Reihe von Templates.
Die Smart TV Alliance bietet für den ersten Einstieg in die App-Entwicklung eine Reihe von Templates.

Nach der kostenlosen Registrierung bei der Smart TV Alliance haben Entwickler Zugriff auf die Dokumentation und den Download des SDK. Wie auch bei Samsung kommt die API der Smart TV Alliance über ein Eclipse-Add-on. Außerdem wird die Virtualisierungs-Software VirtualBox mitinstalliert.

Die Smart TV Alliance unterscheidet zwischen dynamischen und statischen Projekten. Mit der dynamischen Variante kann man direkt JAX-WS Web Services integrieren, über die man dann weitere Informationen vom Server nachladen kann. JAX-WS steht für Java API for XML Web Services und ist eine Technologie für das Entwickeln von Web Services und Clients, die via XML kommunizieren.

Anzeige
Anzeige

Für dynamische Projekte ist ein Tomcat-Server erforderlich, bei statischen Projekten lässt sich auf Wunsch ein fremden Webserver per Ajax anfragen. Wenn Entwickler die dynamische Variante wählen, können sie direkt auf ein Beispiel-Projekt zugreifen. Dafür müssen sie „Create Project From Sample Project“ auswählen, um eine kleine Liste mit Beispielen zu erhalten. Exemplarisch lässt sich das mit dem „HTML5CanvasSample“ testen.

Bevor sich das Beispiel ausführen lässt, gilt es, einen Server zu wählen. Dieser findet sich bereits in der VirtualBox und lässt sich von dort aus starten. Hinter dem Server versteckt sich ein Debian mit bereits installiertem Smart-TV-SDK. Nach Zustimmung zur Lizenzvereinbarung ist der Startbildschirm der Testoberfläche zu sehen. Mit einem Klick auf „Settings“ können Entwickler dann zwischen den Browsern wählen, die auf dem Smart TV zum Einsatz kommen. Bei LG ist das ein Webkit-Browser, bei Philips und Sharp steht Opera parat.

Zum ersten Ausprobieren bietet das Smart-TV-Alliance-SDK auch einige Templates für den Fernseher. Einfach einen Rechtsklick auf den Ordner „WebContent“ tätigen, dann auf „New“ > “Web Page from Common SDK Template“ klicken – und es stehen 26 Templates als Basis zur Verfügung.

Anzeige
Anzeige

Innerhalb des Codes gibt es in der Canvas-Beispiel-App, ähnlich wie bei Samsung, eine Liste mit in JavaScript codierten Fernbedienungstasten. Diese befindet sich unter js/keycode.js und lässt sich auch bearbeiten.

Entwickler können die Apps bei den Herstellern selbst hochladen. Bei Philips und auch beim Sharp Smart TV geht das über yourappontv.com. Das Portal wird von der Firma NetTV zur Verfügung gestellt und regelt das Deployment der Apps für ihre Partner. Diese bieten auch ein eigenes Payment-System, das derzeit leider nur unzureichend dokumentiert ist. Um eine App in den Store eines LG-Fernsehers zu bekommen, müssen Entwickler diese auf seller.lgappstv.com hochladen. Bei LG gibt es dabei mehrere Möglichkeiten zur Monetarisierung der App. Zunächst lässt sich die Applikation zum Kauf anbieten. Außerdem bietet LG die Möglichkeit, In-App-Items zu verkaufen. Ähnlich wie bei Samsung gibt es zudem auch ein eigenes Werbenetzwerk namens „LG SmartAD“.

Panasonic

Die Fernseher von Panasonic werden über Viera Connect gesteuert. Auch hier haben Entwickler erst nach einer Registrierung Zugriff auf die APIs. Panasonic bietet eine Basis- und eine Premium-Variante an. Die Basisvariante kostet 129 US-Dollar, Premium schlägt mit stolzen 599 US-Dollar zu Buche. Wer die Premium-Variante nutzt, erhält technischen Support, Zugang zu Webinaren und kommt schneller durch die Qualitätssicherung. Es gibt allerdings auch einen kostenlosen Testzeitraum von 180 Tagen, um das System zu anzutesten.

Die Entwicklungsumgebung spielt bei Panasonic keine Rolle. Theoretisch ließe sich auch im Notepad entwickeln. Die Doku liefert ein Hello-World-Beispiel, das zwei Dateien enthält:

  • main.html – Eine ganz normale HTML-Datei, wie man sie auch für eine Website verwenden würde.
  • init.json – Ein JSON-String, in dem zum Beispiel die Größe der App oder auch eine Liste mit Domains, die über Ajax angefragt werden dürfen, enthalten sind.

Beide Dateien lassen sich in einen „sdkhtml“-Ordner legen und über einen Webserver dem Fernseher bereitstellen. Im App Store bei Panasonic steht eine Developer-App zur Verfügung, über die Entwickler eigens entwickelte Applikationen testen können.

In Sachen Steuerung können Entwickler auch bei Panasonic auf JavaScript zurückgreifen. Bei der Eingabe wird zwischen zwei Modi unterschieden: einem Free-Cursor-Mode, der quasi einen Mauszeiger steuert, und dem Arrow-Key-Mode, der den Keycode der Fernbedienungstaste übergibt. Hier lässt sich wieder mit onkeydown (siehe Samsung) auf die Tasteneingaben reagieren.

Es gibt mehrere Eingabegeräte, die zum Teil unterschiedliche Keycodes übergeben (zu finden in der Dokumentation). Mit von der Partie sind neben der normalen Fernbedienung auch Tablet, Smartphone oder USB-Tastatur. Bei Panasonic lassen sich Apps auf dem Fernseher oder einem Blu-Ray-Player starten. Für Blu-Ray-Player können Unternehmen oder Entwickler derzeit jedoch keine kostenpflichtigen Apps anbieten. Gleiches gilt für Länder außerhalb Europas und Nordamerikas.

Ausblick

Das System „Smart TV“ steht derzeit noch in den Startlöchern. Es ist
schwierig vorherzusagen, ob der Fernsehschirm in Zukunft ähnlich wie
Smartphone und Tablet mit einer hohen Zahl gerätespezifischer Apps
besiedelt wird – oder ob sich nicht doch das Konzept des „einfachen“
Screens durchsetzt, den Nutzer via mobiler Geräte mit Inhalten
versorgen. Wer die Entwicklung von TV-Apps dennoch angehen möchte, trifft auf einen
Flickentepptich von Plattformen. Eine App auf jeden Smart TV zu
bekommen, ist deshalb mit einem enormen Aufwand verbunden. Erfreulich
hingegen, dass Webentwickler mittels relativ simplen Web-Technologien
bereits starten können.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige