Développez vos applications pour TV Samsung avec Tizen

Featured Video Play Icon

Tizen est un système d’exploitation basé sur Linux qui a fait son apparition en 2012. Ce projet open source est principalement soutenu par Samsung qui l’utilise dans un large éventail de ses produits (on le retrouvera dans des montres, des véhicules, des réfrigérateurs, des télévisions et aussi certains téléphones). Le but de ce système d’exploitation est d’offrir une plateforme de développement commune pour tous ces appareils afin de faciliter le développement d’applications.

Je me suis intéressé à ce système pour découvrir ses possibilités et voir si je pouvais développer ma propre application pour contrôler ma domotique depuis ma TV Samsung. Le but de cet article est de partager avec vous mon parcours et vous apprendre comment développer une application pour votre TV Samsung. Nous verrons dans un premier temps comment mettre en place et utiliser le kit de développement (SDK) Tizen puis nous créerons une petite application de contrôle domotique.

 

Installation de l’environnement Tizen

Pour développer des applications pour Tizen, nous allons commencer par mettre en place notre environnement. Première étape : installer Tizen Studio. Rendez-vous au ici pour le télécharger.

Première difficulté rencontré sur mon Windows 7 : l’installeur refuse d’installer Tizen dans le dossier indiqué… C’est un bug connu, un petit tour sur StackOverflow et le problème est vite corrigé : saisissez C:\Users\<nom utilisateur>\AppData\Roaming\Samsung\tizen-studio dans le champ « SDK location » et C:\Users\<nom utilisateur>\AppData\Roaming\Samsung\tizen-studio-data dans le champ « Data location ».

Erreur d'installation de Tizen Studio

Un début prometteur

Une fois l’installation terminée, il vous sera proposé de lancer le Package Manager : acceptez et continuez. Allez ensuite dans Extension SDK et installez les extensions TV Extensions-4.0 et Samsung Certificate Extension.

Fermer le Package Manager, cochez Launch the Tizen Studio et cliquez sur OK. Un emplacement ce Workspace vous est alors demandé, c’est dans ce dossier que seront stockés tous les fichiers de nos projets Tizen. Ici, vous pouvez saisir le dossier que vous voulez puis continuez pour lancer Tizen Studio.

Interface de Tizen Studio

Même avec ton maquillage, je te reconnais Eclipse

Pour ceux familiers avec l’IDE Eclipse, vous devriez vite prendre vos marques : on retrouve les projets sur le volet de gauche, l’éditeur au centre et la console en bas.

Création d’un projet

Nous allons commencer par créer un projet simple et le déployer sur notre TV. Cliquez sur Create new project dans le volet de gauche, sélectionnez Template, puis Custom > TV-samsung v4.0. Sélectionnez ensuite Web Application puis Basic Project et enfin donnez un nom au projet.

Tizen Studio va alors générer un projet de base HTML5. Voyons un peu les fichiers qu’il contient :

  • config.xml : ce fichier contient toute la configuration du projet Tizen. C’est ici que vous pouvez régler le point d’entrée, les permissions et la sécurité de celui-ci.
  • index.html : le point d’entrée par défaut du projet. C’est une simple page HTML depuis laquelle vous pouvez importez vos fichiers JavaScript et CSS.
  • js/main.js : ce fichier contient quelques instructions JavaScript pour rendre l’application interactive. Pour l’instant il ne fait pas grand chose mais nous allons nous intéresser à la partie suivante :

Nous pouvons voir que Tizen utilise les mêmes API que les navigateurs classiques. Les applications développées pour le Web peuvent donc potentiellement fonctionner sur votre TV.

On peut également voir l’appel à un objet tizen. Cet objet contient un ensemble de méthodes qui permettent de contrôler plus de fonctionnalités de la TV. Je ne rentrerai pas en détail sur ces fonctionnalités dans cet article mais vous pouvez retrouver la documentation (un peu obscure) ici.

Maintenant que nous avons vu la structure du projet, voyons comment le déployer sur notre TV.

 

Déployer l’application Tizen sur votre télévision

Le déploiement d’une application Tizen sur une TV se déroule en plusieurs étapes : nous allons d’abord voir comment passer notre TV en mode développeur pour pouvoir la connecter à Tizen Studio. Ensuite, nous créerons un certificat pour pouvoir signer notre application et autoriser son déploiement sur la TV.

Passer la télévision en mode développeur

Pour pouvoir connecter votre Smart TV à Tizen Studio, vous devez activer le mode développeur. Ce mode nous permettra de déployer notre application directement sur la TV.

Avant de commencer, assurez-vous que votre TV et l’ordinateur sont sur le même réseau. Effectuez ensuite les actions suivantes :

  1. Rendez-vous dans le menu « Apps » sur votre TV

    Menu Apps sur Smart TV Samsung

    Le menu « Apps » sur la Smart TV Samsung

  2. À l’aide de la télécommande, appuyez sur les boutons 1, 2, 3, 4 et 5 : une fenêtre apparaît et vous permet d’activer le mode développeur et de renseigner l’adresse IP du PC.

    Fenêtre d'activation du mode développeur sur Smart TV Samsung

    La fenêtre d’activation du mode développeur

  3. Activez le mode développeur et renseignez l’IP du PC. Une fois ces informations renseignées, redémarrez la TV (il faudra peut-être la débrancher)
  4. Retournez dans le menu « Apps », vous devriez voir en haut de l’écran le texte rouge « Developer Mode » qui vous confirme que vous êtes passés en mode développeur.

    Photo du menu Apps d'une Smart TV Samsung avec le texte Developer Mode en rouge

    Confirmation d’activation du mode développeur

Connecter Tizen Studio à votre télévision

Maintenant que le mode Développeur est activé, vous pouvez connecter votre Smart TV à Tizen Studio. Voici la procédure à suivre :

  1. Dans la barre d’outils de Tizen Studio, cliquez sur Device Manager.

    Bouton Device Manager

    Bouton Device Manager

  2. Ensuite, cliquez sur Remote Device Manager.

    Bouton Remote Device Manager

    Bouton Remote Device Manager

  3. Cliquez sur Scan Devices pour lancer la recherche de votre TV.

    Bouton Scan Devices

    Bouton Scan Devices

  4. Une recherche est lancée et vous devriez voir votre TV apparaître dans la liste. Passez le switch sur la droite à On pour connecter votre TV.

    Smart TV connectée dans le Remote Device Manager

    Smart TV connectée dans le Remote Device Manager

  5. Vous pouvez ensuite fermer la fenêtre Remote Device Manager et Device Manager.
Cette procédure devra être effectuée à chaque fois que la TV est éteinte.

Création du certificat

Nous allons bientôt pouvoir déployer notre application ! Étape finale : créer un certificat de signature pour autoriser notre application à être déployée sur des appareils réels. Voici les étapes à suivre :

  1. Dans la barre d’outils de Tizen Studio, cliquez sur Certificate Manager.

    Bouton Certificate Manager

    Bouton Certificate Manager

  2. Si vous voyez la fenêtre Migration for Certificate Profile, cliquez sur Cancel.
  3. Appuyez sur le bouton « Plus » pour ajouter un certificat.

    Bouton d'ajout de certificat

    Bouton d’ajout de certificat

  4. Cliquez sur Samsung en type de certificat.
  5. Sélectionnez TV en type de device.
  6. Choisissez Create a new certificate profile et entrez un nom pour le profil de certificat (« default » par exemple).
  7. Sélectionnez Create a new author certificate. Ce certificat vous identifie et assure que c’est vous qui avez signé l’application.
  8. Renseignez les champs nom et mot de passe.
  9. L’outil va alors vous demander de vous connecter ou de créer un compte Samsung pour pouvoir créer votre certificat.
  10. Vous avez terminé la création du certificat d’auteur ! Continuez pour créer le certificat de distributeur.
  11. Sélectionnez Create a new distributor certificate. Celui-ci vous permettra d’autoriser votre TV à installer l’application. Si vous deviez déployer votre application sur un store, celui-ci serait fourni par Samsung.
  12. Dans la liste suivante, vous devriez voir un DUID renseigné par défaut. C’est l’ID de la TV que nous avons connecté à l’étape précédente. La création du certificat nous permettra de déployer sur cette TV. Vous n’avez pas d’informations à changer sur cet écran, passez à l’étape suivante.

    Configuration du certificat de distributeur

    Configuration du certificat de distributeur

  13. Vous avez terminé la création du certificat de distributeur !

Installer le certificat sur la télévision

Maintenant que nous avons créé le certificat, nous devons l’ajouter à la TV pour qu’elle accepte l’installation d’applications :

  1. Rendez vous dans le Device Manager.
  2. Faites un clic droit sur votre TV et sélectionnez Permit to install applications.
  3. Une fenêtre vous félicite : « Succeeded to upload a certificate« 

Lancer l’application

Pfiou… Ça fait beaucoup de clics et de formulaires, mais nous y sommes. Retournez sur l’écran principal de Tizen Studio et cliquez sur le bouton « Play » puis sélectionnez « Tizen Web Application » pour lancer votre application.

Bouton de lancement d'application

Bouton de lancement d’application

Attendez quelques secondes et vous devriez voir l’application par défaut se lancer sur votre TV.

L'application d'exemple Tizen

L’application d’exemple Tizen

Vous pouvez également lancer votre application en mode Debug (bouton avec l’icône d’insecte). Dans ce cas, une fenêtre Chrome DevTools se lancera sur votre ordinateur et vous permettra de débugger et d’inspecter votre application.

 

Conseils pour le développement pour Tizen

Maintenant que l’application basique se lance, parlons un peu développement.

Mon but avec Tizen était de développer une petite application pour pouvoir contrôler mes objets connectés depuis ma TV. Cette application est juste une interface qui communique avec les API d’Home Assistant pour afficher des appareils et les contrôler.

Photo de l'application de contrôle Home Assistant depuis Tizen

L’application de contrôle Home Assistant depuis Tizen. Mes lumières et mes lecteurs de média sont affichés, je peux naviguer de l’un à l’autre à la télécommande et changer leur état.

Je ne vais pas rentrer dans les détails du développement d’une application HTML5 car cela rendrait cet article un peu trop long (pour ceux que ça intéresse, vous pouvez retrouver le projet complet sur GitHub). Je vais plutôt vous parler des soucis que j’ai rencontré pendant le développement d’une application Tizen et mes conseils pour garder sa santé mentale pendant le développement.

Comprendre la plateforme

Nous avons vu plus tôt que la plateforme Tizen utilisait les mêmes API que les navigateurs. C’était plutôt rassurant dans le début de mes développements car c’est un environnement que je connais plutôt bien. L’enchantement a vite disparu.

En effet ma TV de 2016 se base sur une version de Webkit de 2013 avec quelques customisations de la part de Samsung. La plupart des fonctionnalités du JavaScript moderne ne seront donc pas disponibles… Jusque là rien de bien grave, armez-vous de polyfills et les fonctionnalités pourront être émulées.

Les autres problèmes sont rencontrés sur la partie CSS. Tizen devrait supporter les instructions Flexbox (celles-ci sont supportées depuis 2010), mais ce n’a pas l’air d’être le cas. Le principal problème est que cela nous empêche d’utiliser la plupart des bibliothèques modernes de composants.

Pour les chanceux qui ont une télé plus récente (2017 ou 2018), Samsung a l’air de s’être basé sur Chromium pour sa plateforme Web. Vous pouvez retrouver les correspondances ici.

Se passer de Tizen Studio

Le développement depuis Tizen Studio n’est pas forcément ce qu’il y a de plus agréable… L’outil est assez lent, il n’y a pas de compilation de JavaScript (ce qui oblige à utiliser du JavaScript Old School) et il vous fera quitter votre environnement de développement habituel.

J’ai vite préféré le quitter pour retourner dans VSCode et créer un projet en JavaScript moderne (avec React dans mon cas). Il suffit ensuite de récupérer le fichier config.xml d’utiliser l’extension VSCode tizentv.

Il est également possible de se passer de l’extension et d’utiliser les outils en ligne de commande inclus dans le SDK Tizen. Vous pouvez suivre cette documentation pour les utiliser.

Accéder à Internet

Pour pouvoir communiquer avec Home Assistant (ou tout autre système), il faut pouvoir effectuer des requêtes externes à l’application. Par défaut, celles-ci sont désactivées pour les applications Tizen.

Pour les activer, rendez-vous dans le fichier config.xml. Dans l’onglet Pivileges, ajoutez http://tizen.org/privilege/internet aux privilèges de l’application, puis rendez-vous dans l’onglet Policy et ajoutez une entrée. Vous pouvez saisir le domaine exact auquel vous voulez accéder ou * si vous voulez donner accès à n’importe quel domaine.

Dans la section Privilege, vous pouvez voir toutes les fonctionnalités auxquelles vous pouvez accéder : contrôle des media de la TV, paiement, contrôle vocal, etc. Vous pouvez trouver plus d’informations sur ces API ici.

Contrôler l’application à la télécommande

L’aspect le plus intéressant du développement sur TV est la limite de l’interface utilisateur : la télécommande.

Dans la plupart des cas, vous aurez le droit à 6 boutons : gauche, droite, haut, bas, OK et retour. La solution la plus simple peut être de créer des liens entre chaque élément, mais celle-ci peut être fastidieuse à mettre en place et peut facilement être source d’erreurs (changement de design, plus ou moins de données que prévu, etc.).

Interactions à la télécommande sur un écran

Ce que j’ai essayé d’automatiser.

Il existe un très bon article de Netflix à ce sujet que je vous recommande. Pour mon projet, j’ai réimplémenté le comportement avec le composant Focusable. Celui-ci permet une navigation naturelle dans l’application sans que j’ai à me soucier de l’emplacement de mes composants.

Il existe des bibliothèques qui implémentent ce comportement : la bibliothèque AngularJS CAPH créée pour Tizen et react-tv-navigation (entre autres)

 

Conclusion

Voilà pour le développement d’application avec Tizen. Mon expérience n’aura pas été des plus agréables : des bugs peu compréhensibles, une documentation faible et une communauté désespérée par le manque de support des créateurs.

Même s’ils continuent de faire évoluer leur plateforme, je pense que Samsung devra de se mettre au niveau des standards du marché pour que des développeurs apportent des applications novatrices sur celle-ci. Je ne serait pas étonné que les contrôles à la télécommande soient de plus en plus abandonnés au profit des contrôles vocaux qui pourraient simplifier grandement l’expérience utilisateur.

J’espère que cet article vous aura donné un bon aperçu de la plateforme Tizen et qu’il pourra vous aider si jamais vous devez vous y aventurer 😉

JavaScript and Progressive Web Apps enthusiast
☕ Coffee lover ☕
Home automation newbie

Tu aimes cet article ? Alors partage le Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
Share on Reddit
Reddit
Share on Tumblr
Tumblr

5 réponses

  1. iPapy dit :

    Bonjour,

    Article sympa mais ma Samsung ne semble pas être sous Tizen, quand je vais dans le menu Apps de Samsung et que je tape « 12345 » il ne se passe rien du tout.
    Comment vérifier l’OS de ma télé Samsung UE32F5300AW.
    Merci d’avance pour votre réponse.
    Cordialement,
    iPapy

    • Antoine Colmard dit :

      Bonjour iPapy,

      J’ai regardé un peu plus en détail et l’accès au mode développeur a l’air différent sur les séries F (et un peu plus compliqué). Vous pourrez trouver les instructions complètes ici.

      Le développement d’applications pour ces TV ne passe pas non plus par le Tizen SDK, il faudra télécharger Samsung TV SDK (la version « for Legacy Platform » je pense, à tester).

      Le fonctionnement a l’air un peu différent : il faut installer un serveur apache sur l’ordinateur qui exposera l’application à la TV.

      J’espère que ça pourra vous aider ! N’hésitez pas à partager votre expérience, je suis sûr que ça pourra aider d’autres personnes 😉

  2. iPapy dit :

    Bonsoir Antoine,

    Merci pour les informations, je vais regarder cela d plus près dans la semaine je vous tiendrais au courant.

    Cordialement,
    Franck

  3. Bonjour
    Petit problème pour moi je ne sais pas comment faire
    J’ai réussi à mettre ma TV en mode développeur la remonte devise manager trouvé bien mon adresse Ip de ma TV mais il ne veut pas si connecter.

    voila le message d’erreur

    connecting to 192.168.1.16:26101…
    failed to connect to 192.168.1.16:26101

    You may get this message for following reasons:
    -This remote device is already connected by another one.
    -This remote device is running on a non-standard port.
    -There is no IP address, please check the physical connection.

    J’espère que quelqu’un pourra m’aidai
    Par avance merci.

    • Antoine Colmard dit :

      Bonjour,

      J’avais rencontré cette erreur deux fois :
      – lorsque la TV n’avait pas été redémarrée entièrement (en débranchant son alimentation)
      – lorsque je n’avais pas renseigné la bonne adresse IP (celle du PC) lors de l’activation du mode développeur

      Sinon en regardant un peu sur les forums Tizen certains arrivent à connecter le device en recommençant cette étape (désactiver le mode développeur, redémarrer la TV, activer le mode développeur en renseignant l’IP du PC et redémarrer à nouveau).

      Dites-moi si cela résout le problème 🙂

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.