Comment débuter avec le développement d'application pour TV

Introduction

Ce document est écrit pour les développeurs web qui sont intéressés par le développement d'applications pour TV. Nous allons parler de la façon de compiler et lancer le simulateur Firefox OS avec une application smart-TV, puis nous verrons comme  il est facile d'écrire une application et de la déployer sur une TV.

Fondamentalement, réaliser une application qui fonctionne sur les TV est similaire à faire une application classique Firefox OS, sauf pour les particularité suivantes :

  • Contrairement à une application Firefox OS classique, il faut évidemment prendre en compte que les applications TV sont majoritairement contrôlées par une télécommande, qui peut être comparé à contrôler l'application avec un clavier.
  • La résolution sur les smart TV modernes est  Full HD (1920x1080) et Ultra HD (4K). Le ratio Device Pixel sur les TV est aussi important que pour la plupart des appareils mobiles.

Vous pouvez vous rendre sur l'App Center pour plus de ressources sur les constructions d'application pour Firefox. Cette article traite spécifiquement de la façon de construire un environnement de développement pour TV en utilisant une simple application Hello-World comme exemple.

Statut actuel et à venir :

Les applications conçues pour les smart TV sont stockées dans Gaia/tv_apps, avec le préfixe “smart-”, aussi connu sous le nom de smart TV apps. Au début du printemps 2015 il y aura des TV sur le marché avec les applications listées ici : https://github.com/mozilla-b2g/gaia/tree/master/tv_apps.

Smart-home et Smart-deck sont des applications classique pour une TV, et vous pouvez les utiliser comme base pour trouver quelques idées.

Contribuer aux applications smart TV:

Pour contribuer à une applications smart TV, il vous suffit de suivre les mêmes règles que pour contribuer au code de Gaia.

Introduction à Firefox OS:

https://developer.mozilla.org/en-US/Firefox_OS/Introduction

 

Construire des applications pour Firefox OS :

https://developer.mozilla.org/en-US/Apps/Build

Télécharger les outils

 

Nous avons besoin de 3 principaux composants pour construire l'environnement de développement : 1) Le simulateur de bureau, pour lancer votre application TV sur PC comme sur une vraie TV, 2) Firefox Nightly/Aurora comme débogueur, et 3) Le dépôt Gaia.

 

Pour la première étape, le simulateur de bureau, vous pouvez trouver nos builds nightly ou builder vous-même. Plus d'info ci-dessous :

https://developer.mozilla.org/en-US/Firefox_OS/Building_the_Firefox_OS_simulator

Firefox Nightly fonctionne aussi, mais il permet seulement de tester votre app indépendamment sans pouvoir tester tout le système smart-TV. Nous recommandons d'utiliser Firefox OS bureau pour un meilleur environnement de développement. Vous pouvez le télécharger ici : https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/

 

La seconde étape consiste à récupérer Firefox Nightly/Aurora, naviguer et télécharger depuis la page officielle de release.

https://nightly.mozilla.org/

 

Pour l'étape 3 veuillez forker le dépot Gaia. Référez-vous aux étapes suisvantes : https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase#Running_your_own_Gaia_build

 

Premièrement, faites un fork du dépot Gaia principal sur Github.

  1. Ensuite, clonez votre fork localement:
    git clone https://github.com/your-username/gaia.git
  2. Ajoutez un lien upstream comme cela :
    cd gaia
    git remote add upstream https://github.com/mozilla-b2g/gaia

Mise en place de votre environnement

Maintenant vous avez besoin de créer votre profil Gaia. Dans le dossier de votre dépôt, lancer la commande ci-dessous :

$ make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1

Cela va crée un profil pour un débogage optimal dans votre répertoire. Cela crée des versions non-packagées (versions hébergées) des applications Gaia qui peuvent être servies directement via le serveur local HTTPD qui est contenu dans Firefox pour ordinateur de bureau comme une extension. Lorsque vous faites un changement vous avez besoin de rafraîchir la fenêtre de votre navigateur pour voir le résultat (comme nous allons vous le montrer) plutôt que de re-construire votre profil, re-pousser le profil sur l'appareil etc. C'est un bon et rapide hack CSS/JS/HTML. Donc, lancez le simulateur de bureau avec une taille d'écran précise, un serveur de debug distant, et le lien vers votre profil :

 

$ b2g-bin -screen 1920x1080 -start-debugger-server 6000 -profile /path/to/gaia/profile

 

Notez que si le paramètre de l'écran est plus grand que votre résolution de PC, cela peut casser le sapplications systèmes. Si cela arrive, réduisez la taille de l'écran comme expliqué précedemment.
Si tout fonctionne bien, vous allez voir l'application horloge (en remplacement temporaire de l'application de lancement).

Appuyer sur la touche accueil au bas de la fenêtre va vous amener sur l'application accueil qui est le point d'entrée pour les applications TV. Vous pouvez naviguer avec les flèches du clavier, et lancer “Apps” pour lancer le gestionnaire d'application, là ou vous lancerez vos propres applications plus tard.

L'écran "Accueil"

L'écran "gestionnaire d'application"

 

L'exemple Hello World

 

WebIDE dans Firefox Desktop

En utilisant le WebIDE, on peut facilement bootstraper une application web, faire des modifications HTML/CSS/JS, et déboguer l'application sans avoir un véritable appareil.
Pour ouvrir le WebIDE dans Firefox Desktop, selectionner Outils > Web Developer > WebIDE depuis le menu :

Créer une application depuis le template


Cliquez sur  “Open App” dans le coin gauche en haut du WebIDE et choisissez “Nouvelle application…” dans le menu. Selectionner “HelloWorld,” donnez un nom de projet, et cliquez sur “OK.” Après avoir décidé du répertoire de sauvegarde de sprojets, WebIDE va générer une application avec un template simple pour vous.

 

Maintenant vous pouvez programmer votre application dans WebIDE ou utiliser n'importe quel éditeur que vous préférez.


 

Lancer votre application sur une TV

 

Il n'y a pas encore de build TV pour le simulateur, nous avons besoin de lancer b2g-desktop.

 

  1. Suivez les instructions dans la section “Mise en place de votre environnement” pour lancer votre environnement dans b2g-desktop (n'oubliez pas d'ajouter le paramètres“-start-debugger-server 6000”).
  2. Dans le WebIDE, cliquer sur “Select Runtime” dans le coin droit du haut et selectionner “Remote Runtime.”
  3. Remplissez la boite de dialogue avec “localhost:6000” et cliquez sur “OK.”
  4. Cliquer sur l'icone “Install and Run” . Vous verrez votre applications fonctionner dans b2g-desktop.
  5. Cliquez sur l'icone “Debug App” et la boite d'outils des DevTools apparait. Vous pouvez vous référer à la section "Debugging apps" pour déboguer votre application.

Interagir avec une télécommande TV

L'une des différences entre les téléphones et les TV est le dispositif d'entrée d'instructions. En général, les Tv n'ont pas d'écran tactile, donc les applications ne peuvent pas être controlées avec les événements de la souris ou les événement tactiles.  En revanche vos applications peuvent être contrôlées par les événements bouton qui sont envoyés à la TV par la télécommande.

 

La définition  des boutons d'une télécommande TV est documentée dans cette spécification W3C :

http://www.w3.org/TR/DOM-Level-3-Events-key/#keys-media-controller

 

Le “focus” est un autre problème qui peut être mentionné sur les TV. Il est important de vous assurer que le focus est toujours sur le bon élément, car on ne peut pas toucher les élément d'une TV directement.

 

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : jwhitlock, sousmangoosta, Goofy, GeekShadow, dattaz
 Dernière mise à jour par : jwhitlock,