Développement SmartTV de râteau sous-marin

Bonjour, Habr!

Il a longtemps été une idée d'écrire un article sur les problèmes de développement de SmartTV, mais en plongeant dans ce domaine, nous avons inventé notre propre vélo, ce qui nous a aidés à résoudre ces problèmes. Par conséquent, dans cet article, nous allons non seulement mettre en évidence certains des aspects problématiques du développement de SmartTV, mais aussi parler de la façon de les résoudre en utilisant le prochain nouveau cadre PureQML .

Tous ceux qui sont intéressés par ce sujet ou tout simplement curieux de regarder le nouveau framework, qui peut également être dans SmartTV, nous demandons un chat.

Le zoo

Pour commencer, dans la nature, il existe de nombreuses plates-formes SmartTV et bon nombre d'entre elles sont conçues pour le lancement d'applications Web. Cela peut conduire à l'illusion qu'il suffit d'écrire le code une fois et de l'utiliser sur toutes les plateformes. Mais en réalité, toutes les plateformes ont des différences qui doivent être prises en compte. Parmi ces caractéristiques, on peut distinguer les suivantes:

• Manipulation des touches de la télécommande . Tous les fabricants n'utilisent pas les mêmes codes clés pour les mêmes boutons de télécommande. Par exemple, vous pouvez comparer les codes clés de la plateforme orsay et de webos . Pour tizen, il est nécessaire d' enregistrer explicitement certains boutons pour une utilisation future.
• Lecteur vidéo De nombreuses plates-formes prennent en charge le lecteur vidéo html5, mais, par exemple, tizen utilise AVPlay , et pour orsay utilise sa propre API pour travailler avec le lecteur natif.
• Informations sur l'appareil . Obtenir des informations sur le périphérique dans chaque plate-forme est également implémenté différemment, un objet spécial est créé dans NetCast avec un id-shnik spécial, dans d'autres cas, des méthodes spécifiques à chaque plate-forme sont utilisées.
• Focus L'application SmartTV est principalement axée sur la télécommande, et donc l'interface utilisateur / UX doit être implémentée en tenant compte de l'utilisation des boutons de navigation: haut, bas, droite, gauche, OK et retour, alors qu'il est important de ne pas perdre le focus et d'indiquer clairement où il se trouve maintenant .

La documentation

En plus de la variété des plates-formes et de la documentation de ces plates-formes, le problème est que certains fabricants publient de nouvelles versions qui, parfois, perdent la compatibilité à certains endroits, ou même passent à de nouvelles plates-formes qui sont fondamentalement incompatibles avec les précédentes (comme la transition LG avec NetCast sur WebOS). Dans le même temps, il y a une promotion intensive des nouvelles plates-formes, ce qui rend difficile la recherche d'informations sur les anciennes plates-formes, car certaines sections de la documentation sont supprimées ou transférées, à cause desquelles vous pouvez parfois rencontrer des liens morts dans les conseils sur les formulaires.

L'installation

Encore une fois, en raison de la variété des plates-formes, le processus d'installation des applications sur les périphériques de débogage eux-mêmes est également différent. Par exemple, pour AndroidTV, vous pouvez utiliser adb, tizen a son propre analogue - sdb , pour les scripts CLI spéciaux WebOS, etc. Chacun de ces outils doit être installé et configuré. Ici, vous pouvez ajouter le problème des mises à jour de plate-forme intensives, avec la mise à jour du SDK et de l'IDE qui l'accompagne. Un exemple d'un tel problème est le cas avec Tizen Studio. Après avoir téléchargé la dernière version, vous pouvez installer des applications uniquement sur les téléviseurs TV-samsung tv4, alors qu'il n'y a pas de moyen facile d'installer l'application sur les versions antérieures des téléviseurs, qui sont de nature beaucoup plus grande (si vous rencontrez soudainement ce problème, voir le lien ) et même après danse réussie avec un tambourin, l'IDE perd la possibilité d'installer des applications sur TV-samsung TV tv4 ¯ \ _ (ツ) _ / ¯

Modération

Pour publier l'application, il est nécessaire de passer la modération du fabricant respectif, et chacun d'eux a ses propres règles et fonctionnalités. Dans ce cas, vous devez être patient, car les demandes peuvent être vérifiées pendant plus d'une semaine et cela doit être pris en compte lors de la planification des délais, c'est-à-dire l'application doit être publiée bien avant la sortie (si vous craignez soudainement que les applications apparaissent avant tout événement marketing - n'ayez pas peur, lors de l'envoi pour modération, vous pouvez spécifier une date avant laquelle l'application ne sera pas publiée).

Vous devez également être préparé au fait que la cause du rejet peut être n'importe quelle bagatelle, par exemple, une réponse erronée dans la liste de contrôle automatique (une liste de questions auxquelles le développeur doit répondre avant d'envoyer l'application, par exemple: «votre application contient-elle des virus», etc.) ou en raison d'un malentendu dans la description de l'application UX. Cela peut arriver à des situations amusantes, par exemple, il y a eu un cas où ils ont terminé une application avec des chaînes de télévision en streaming, car ils ont pris une ligne rampante dans l'air de l'une des chaînes comme un artefact de graphiques, en le faisant partie de l' OSD .

AndroidTV et tvOS

Nous devons également mentionner AndroidTV et tvOS, comme ces plateformes ne prennent pas en charge le lancement explicite d'applications Web. Pour tvOS, son propre langage de type xml est utilisé: TVML, et ce qui est particulièrement intéressant, vous pouvez composer ce langage, mais uniquement dans un certain ensemble de modèles , il est assez difficile de faire quelque chose de complètement arbitraire. Avec l'aide de telles restrictions, toutes les applications de tvOS sont obligées d'adhérer à un guide de style unique, et si vous ne vous en éloignez pas, le processus d'écriture de l'application sera simple.

Sur l'androïde, la situation est meilleure, car Il existe des moyens d'exécuter des applications Web, nous en parlerons un peu plus tard.

Comment on fait ça

Face à la réalité, nous avons d'abord étudié les solutions existantes, mais malheureusement je n'aimais rien d'universel et de pratique: la smartbox n'est pas pratique, la réaction ne résout pas des problèmes TV spécifiques, comme, en fait, d'autres frameworks plus orientés web.

Voyons maintenant comment PureQML gère cela (sur lequel nous avons déjà écrit ici et ici ). En bref, il s'agit d'un framework js qui permet de décrire de manière déclarative les interfaces utilisateur dans un langage de type qml, ce qui aide à créer rapidement des applications abstraites de html, css et autres. Pour résoudre spécifiquement les problèmes SmartTV, un module qmlcore-tv séparé a été écrit sous la licence CC-BY-4.0, qui prend en charge les plates-formes suivantes:

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

Et voici comment il résout les problèmes ci-dessus:

• Traitement des boutons de la télécommande . Pour les plates-formes prises en charge, le mappage des codes clés est implémenté et dans le code client, il suffit d'écrire simplement le gestionnaire souhaité, par exemple, pour le bouton de fonction rouge de la télécommande, vous pouvez écrire un gestionnaire:
  

  onRedPressed { /*   */ } 

• Lecteur vidéo Pour travailler avec le lecteur, il existe un composant VideoPlayer spécial qui décrit l'interface pour travailler avec la vidéo, et l'implémentation de la plateforme est sélectionnée pour la plateforme cible au stade de la construction. Voici un exemple d'utilisation: lecture d'une vidéo en boucle à l'aide d'un lien plein écran:
  
  

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

• Informations sur l'appareil . Pour obtenir des informations sur l'appareil, il suffit d'utiliser le contrôle Appareil, par analogie avec le lecteur, il décrit l'interface, et l'implémentation est prise pour la plateforme assemblée. Voici un exemple de code pour afficher du texte avec l'ID de périphérique à l'écran:
  
  

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

• Focus La caractéristique de base du cadre lui-même aide déjà ici, à un moment donné, il n'y a qu'un seul foyer, qui existe et ne disparaît nulle part. Pour travailler avec le focus, vous pouvez utiliser des propriétés déclaratives:
  focus - un drapeau booléen indiquant que cet élément est focalisable ou non
  activeFocus - un indicateur booléen qui est vrai lorsque cet élément contient le focus, et false sinon
• L'installation Pour une installation pratique des applications PureQML sur un téléviseur, vous pouvez utiliser le script smart-tv-deployer, il suffit de le plier à la racine du projet PureQML. Pour créer un projet, par exemple, pour un téléviseur webos avec le nom «myTV» (juste avant cela, vous devez configurer un téléviseur, pour plus de détails sur la configuration d'un téléviseur WebOS, voir ici ), vous devez appeler la commande:
  
  

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

• AndroidTV . Ici, comme pour Android, la langue maternelle est java, et pour y porter l'application web, nous avons utilisé le projet cordova . Ce cadre vous permet de générer une application Android avec une WebView, dans laquelle l'application Web elle-même est lancée. De plus, un travail actif est en cours pour traduire le code PureQML en natif.

Exemple

À titre d'exemple, nous montrons comment porter l'application d'un article précédent vers SmartTV.

Comme nous l'avons mentionné ci-dessus, UX on TV est différent d'un navigateur de bureau, et vous devrez ajouter quelques modifications au code pour prendre en charge l'utilisation des boutons de la télécommande:

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

Dans ce code, nous avons ajouté un traitement pour appuyer sur les boutons "Sélectionner" et "Retour", lorsque vous appuyez sur le premier allumer / éteindre l'OSD (celui avec la carte et le point de localisation de la station) lorsque vous appuyez sur "Retour", si l'OSD est ouvert, fermez-le, s'il est fermé, puis fermez l'application elle-même.
Le résultat final peut être vu dans la vidéo:

Conclusion

En conséquence, PureQML s'est bien comporté en tant qu'outil de développement d'applications SmartTV, et nous l'utilisons nous-mêmes de manière intensive à ces fins.
Si vous avez des questions ou souhaitez plus d'articles sur le développement SmartTV ou PureQML - écrivez dans les commentaires ou sur le canal télégramme , nous essaierons de répondre à tout.

Merci de votre attention! =)

Les références

Site du projet
Page Github
Sources terre en ligne
Canal de support de télégramme