SmartTV-Entwicklung für Unterwasserschwader

Hallo Habr!

Es war lange eine Idee, einen Artikel über die Probleme der SmartTV-Entwicklung zu schreiben, aber als wir in diesen Bereich eintauchten, erfanden wir unser eigenes Fahrrad, das uns half, diese Probleme zu lösen. Daher werden wir in diesem Artikel nicht nur einige der problematischen Aspekte der SmartTV-Entwicklung hervorheben, sondern auch darüber sprechen, wie sie mit dem nächsten neuen PureQML- Framework gelöst werden können .

Jeder, der sich für dieses Thema interessiert oder einfach nur neugierig auf das neue Framework ist, das auch in SmartTV verfügbar sein kann, bittet um eine Katze.

Der Zoo

Zunächst gibt es in der Natur viele SmartTV-Plattformen, von denen viele auf den Start von Webanwendungen ausgerichtet sind. Dies kann die Illusion erwecken, dass es ausreicht, den Code einmal zu schreiben und auf allen Plattformen zu verwenden. In Wirklichkeit weisen alle Plattformen einige Unterschiede auf, die berücksichtigt werden müssen. Unter diesen Merkmalen kann Folgendes unterschieden werden:

• Drücken der Fernbedienungstaste . Nicht alle Hersteller verwenden dieselben Tastencodes für dieselben Fernbedienungstasten. Als Beispiel können Sie Schlüsselcodes für die Orsay- Plattform und Webos vergleichen . Für tizen ist es notwendig, einige Schaltflächen für die zukünftige Verwendung explizit zu registrieren .
• Videoplayer Viele Plattformen unterstützen den HTML5-Videoplayer, aber beispielsweise verwendet tizen AVPlay und für orsay eine eigene API für die Arbeit mit dem nativen Player.
• Informationen zum Gerät . Das Abrufen von Informationen über das Gerät auf jeder Plattform wird ebenfalls unterschiedlich implementiert. In NetCast wird ein spezielles Objekt mit einer speziellen ID erstellt. In anderen Fällen werden plattformspezifische Methoden verwendet.
• Fokus Die SmartTV-Anwendung konzentriert sich hauptsächlich auf die Fernbedienung. Daher sollte UI / UX unter Berücksichtigung der Verwendung von Navigationstasten implementiert werden: Nach oben, unten, rechts, links, OK und zurück. Es ist wichtig, den Fokus nicht zu verlieren und klar anzugeben, wo es sich jetzt befindet .

Die Dokumentation

Zusätzlich zu der Vielzahl von Plattformen und Dokumentationen für diese Plattformen besteht das Problem darin, dass einige Hersteller neue Versionen veröffentlichen, die manchmal an einigen Stellen die Kompatibilität verlieren, oder sogar zu neuen Plattformen wechseln, die im Grunde nicht mit den vorherigen kompatibel sind (z. B. dem Übergang) LG mit NetCast unter WebOS). Gleichzeitig werden neue Plattformen intensiv beworben, was es schwierig macht, Informationen auf alten Plattformen zu finden, da einige Abschnitte der Dokumentation gelöscht oder übertragen werden, was manchmal zu toten Links in Formulartipps führen kann.

Installation

Aufgrund der Vielzahl der Plattformen unterscheidet sich auch hier der Prozess der Installation von Anwendungen auf den Debugging-Geräten. Für AndroidTV können Sie beispielsweise adb verwenden, tizen verfügt über ein eigenes Analogon - sdb , für spezielle WebOS-CLI-Skripte usw. Jedes dieser Tools muss installiert und konfiguriert werden. Hier können Sie das Problem intensiver Plattformaktualisierungen mit dem zugehörigen Update des SDK und der IDE hinzufügen. Ein Beispiel für ein solches Problem ist Tizen Studio. Nach dem Herunterladen der neuesten Version können Sie Anwendungen nur auf TV-Samsung TV4-Fernsehgeräten installieren, während es keine einfache Möglichkeit gibt, die Anwendung auf früheren Versionen von Fernsehgeräten zu installieren, die viel größer sind (wenn Sie plötzlich auf dieses Problem stoßen, siehe Link ) und auch danach Erfolgreicher Tanz mit einem Tamburin, verliert die IDE die Fähigkeit, Anwendungen auf Fernsehern zu installieren TV-Samsung TV4 ¯ \ _ (ツ) _ / ¯

Moderation

Um die Anwendung zu veröffentlichen, muss die Moderation des jeweiligen Herstellers bestanden werden, und jeder von ihnen hat seine eigenen Regeln und Funktionen. In diesem Fall müssen Sie geduldig sein, weil Anträge können länger als eine Woche geprüft werden, und dies sollte bei der Planung von Fristen berücksichtigt werden, d. h. Die Anwendung muss rechtzeitig vor der Veröffentlichung veröffentlicht werden (wenn Sie plötzlich befürchten, dass die Anwendungen vor Marketingereignissen erscheinen - haben Sie keine Angst, wenn Sie zur Moderation senden, können Sie an einem Punkt ein Datum angeben, vor dem die Anwendung nicht veröffentlicht wird).

Sie müssen auch darauf vorbereitet sein, dass die Ursache für die Ablehnung eine Kleinigkeit sein kann, z. B. eine fehlerhafte Antwort in der Selbst-Checkliste (eine Liste von Fragen, die der Entwickler vor dem Senden der Anwendung beantworten muss, z. B. „Enthält Ihre Anwendung Viren“ usw.) oder aufgrund eines Missverständnisses in der Beschreibung der UX-Anwendung. Es kann zu lustigen Situationen kommen, zum Beispiel gab es einen Fall, in dem sie eine Anwendung mit Streaming-Fernsehkanälen abgeschlossen haben, weil sie eine kriechende Linie in der Luft eines der Kanäle als Artefakt von Grafiken genommen haben und diese als Teil des OSD genommen haben .

AndroidTV & tvOS

Wir sollten auch AndroidTV und tvOS als erwähnen Diese Plattformen unterstützen den expliziten Start von Webanwendungen nicht. Für tvOS wird eine eigene XML-ähnliche Sprache verwendet: TVML, und was besonders interessant ist, Sie können diese Sprache setzen, aber nur innerhalb eines bestimmten Satzes von Vorlagen ist es ziemlich schwierig, etwas völlig Beliebiges zu tun. Mit Hilfe solcher Einschränkungen müssen sich alle Anwendungen für tvOS an einen einzigen Styleguide halten. Wenn Sie nicht weit davon entfernt sind, ist das Schreiben der Anwendung einfach.

Auf dem Android ist die Situation besser, weil Es gibt Möglichkeiten, Webanwendungen auszuführen. Wir werden etwas später über eine davon sprechen.

Wie machen wir das?

Angesichts der Realität haben wir zuerst die vorhandenen Lösungen untersucht, aber leider hat mir nichts Universelles und Bequemes gefallen: Die Smartbox ist unpraktisch, die Reaktion löst keine spezifischen TV-Probleme, wie in der Tat andere Frameworks, die eher weborientiert sind.

Nun wollen wir sehen, wie PureQML damit umgeht (worüber wir hier und hier bereits geschrieben haben ). Kurz gesagt, dies ist ein js-Framework, mit dem Benutzeroberflächen deklarativ in einer qml-ähnlichen Sprache beschrieben werden können, mit deren Hilfe schnell Anwendungen erstellt werden können, die von HTML, CSS und anderen Dingen abstrahieren. Um bestimmte SmartTV- Probleme zu lösen, wurde unter der CC-BY-4.0-Lizenz ein separates qmlcore-tv- Modul geschrieben, das die folgenden Plattformen unterstützt:

• LG webOS
• LG NetCast
• Samsung Tizen
• Samsung Orsay
• Opera TV
• Hisense
• AndroidTV

Und so löst er die oben genannten Probleme:

• Fernbedienungstasten verarbeiten . Für unterstützte Plattformen ist die Zuordnung von Schlüsselcodes implementiert. Im Client-Code reicht es aus, einfach den gewünschten Handler zu schreiben. Für die rote Funktionstaste der Fernbedienung können Sie einen Handler schreiben:
  

  onRedPressed { /*   */ } 

• Videoplayer Für die Arbeit mit dem Player gibt es eine spezielle VideoPlayer-Komponente, die die Schnittstelle für die Arbeit mit Videos beschreibt. Die Plattformimplementierung wird in der Erstellungsphase für die Zielplattform ausgewählt. Das folgende Beispiel zeigt die Verwendung: Abspielen eines geloopten Videos über einen Vollbild-Link:
  
  

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

• Informationen zum Gerät . Um Informationen über das Gerät zu erhalten, reicht es aus, die Gerätesteuerung zu verwenden. In Analogie zum Player wird die Schnittstelle beschrieben und die Implementierung für die zusammengebaute Plattform übernommen. Das Folgende ist ein Beispielcode für die Anzeige von Text mit der Geräte-ID auf dem Bildschirm:
  
  

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• Fokus Das Grundmerkmal des Frameworks selbst hilft hier bereits, dass es zu einem bestimmten Zeitpunkt nur einen einzigen Fokus gibt, der existiert und nirgendwo verschwindet. Um mit Fokus zu arbeiten, können Sie deklarative Eigenschaften verwenden:
  focus - Ein boolesches Flag, das angibt, ob dieses Element fokussierbar ist oder nicht
  activeFocus - ein boolesches Flag, das wahr ist, wenn dieses Element den Fokus enthält, andernfalls falsch
• Installation Für die bequeme Installation von PureQML-Anwendungen auf dem Fernseher können Sie das Smart-TV-Deployer-Skript verwenden. Biegen Sie es einfach an das Stammverzeichnis des PureQML-Projekts. Um beispielsweise ein Projekt für ein Webos-Fernsehgerät mit dem Namen "myTV" zu erstellen (kurz bevor Sie ein Fernsehgerät einrichten müssen, weitere Informationen zum Einrichten eines WebOS-Fernsehgeräts finden Sie hier ), müssen Sie den folgenden Befehl aufrufen:
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV . Wie bei Android ist auch hier die Muttersprache Java. Um die Webanwendung dort zu portieren, haben wir das Cordova- Projekt verwendet. Mit diesem Framework können Sie eine Android-Anwendung mit einer WebView generieren, in der die Webanwendung selbst gestartet wird. Außerdem wird aktiv daran gearbeitet, PureQML-Code in den nativen Code zu übersetzen.

Beispiel

Als Beispiel zeigen wir, wie die Anwendung aus einem früheren Artikel auf SmartTV portiert wird.

Wie oben erwähnt, unterscheidet sich UX im Fernsehen von einem Desktop-Browser, und Sie müssen einige Änderungen am Code hinzufügen, um die Arbeit mit den Remote-Tasten zu unterstützen:

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

In diesem Code haben wir die Verarbeitung zum Drücken der Tasten „Auswählen“ und „Zurück“ hinzugefügt, wenn Sie die erste Taste drücken, um das OSD ein- / auszuschalten (die mit der Karte und dem Positionspunkt der Station), wenn Sie die Taste „Zurück“ drücken. Wenn das OSD geöffnet ist, schließen Sie es, wenn es geschlossen ist Schließen Sie die Anwendung selbst.
Das Endergebnis ist im Video zu sehen:

Fazit

Infolgedessen hat sich PureQML als Tool zur Entwicklung von SmartTV-Anwendungen bewährt, und wir selbst nutzen es intensiv für diese Zwecke.
Wenn Sie Fragen haben oder weitere Artikel zur SmartTV-Entwicklung oder zu PureQML wünschen - schreiben Sie in die Kommentare oder in den Telegrammkanal , wir werden versuchen, alles zu beantworten.

Vielen Dank für Ihre Aufmerksamkeit! =)

Referenzen

Projektseite
Github Seite
Quellen Erde-online
Telegramm-Support-Kanal