Culturebox sur Apple TV: le Making Of

Nous venons de publier sur l'AppStore une nouvelle version de notre application de Culturebox qui a été (brièvement) présentée dans la dernière keynote d'Apple. Bien qu'elle semble très similaire à la version précédente publiée en Octobre, et permet d'accéder au même catalogue de vidéos en direct et en replay, elle intègre des changements majeurs. Passons les en revue.

Culturebox V1: TVML et TVJS

Pour la première version de Culturebox sur Apple TV, nous avions décidé d'utiliser le nouveau langage de développement proposé par Apple pour tvOS : TVML. Nous l'avions choisi pour plusieurs raisons:

• un démarrage plus rapide du projet : avec le code d'exemple fourni par Apple il était plus facile pour nous de construire une nouvelle application à partir de zéro;
• sa proximité avec les technologies utilisées dans nos autres applications de Smart TV (qui sont généralement écrites en Javascript);
• la disponibilité de modèles d'interface utilisateur personnalisables pour simplifier la conception des différents écrans (qui introduisent aussi des limites dans le design).

Qu'est-ce que TVML? Un Langage Markup TV conçu par Apple pour créer des applications dans un langage proche-mais-pas-tout-à-fait-comme le HTML. Apple a choisi de supprimer WebKit (le moteur de rendu HTML) sur tvOS, il n'est plus possible pour les développeurs de porter directement des applications Smart TV écrites en HTML5, comme nous pouvons le faire par exemple sur Android TV avec des "Webviews". TVML est un remplacement pour HTML / CSS pour la couche de présentation, et est associé à un framework basé sur JavaScript nommé TVJS pour gérer la logique métier (et oui, même si HTML n'est pas supporté sur Apple TV, vous pouvez toujours utiliser JavaScript). L'architecture globale des applications TVML est décrite ci-dessous:

Les fichiers TVML (la couche de présentation) et les fichiers JS (la logique métier) doivent être hébergé sur un serveur, et pointent vers des ressources externes comme des vidéos et des images. Sur l'Apple TV elle-même un "conteneur" en code natif (Swift ou Objective-C) va lancer l'application JS (définie par son URL), en passant éventuellement des données d'initialisation. L'application JS va alors charger des pages TVML statiques (ou construites dynamiquement) et gérer les interactions des utilisateurs. Apple a fourni plusieurs modèles TVML prêts à l'emploi qui peuvent être utilisés et respectent toutes les directives graphiques. Pour notre première application nous avons décidé de construire une application très simple en utilisant principalement le modèle Stack pour présenter le contenu Culturebox dans les différents écrans.

Au départ, nous avons essayé d'injecter les données de manière dynamique dans les modèles TVML en utilisant JavaScript. Cependant nous avons été confrontés à plusieurs problèmes, principalement liés au nombre d'appels XHR nécessaires pour récupérer toutes les données, ainsi que des difficultés à lier tous les écrans. Donc, pour gagner du temps - et des performances - nous avons décidé de pré-générer tous les écrans en TVML côté serveur, en utilisant un serveur NodeJS. De cette façon, le code côté client est resté assez léger, tous les traitements lourds (appeler les différentes API et construire les écrans) étant faits côté serveur. Dans notre configuration les écrans étaient générés toutes les 30 minutes par le serveur NodeJS puis mis en cache par notre CDN.

L'application a été lancée à temps pour le lancement commercial d'Apple TV, et a été rapidement mise en avant sur l'App Store. Succès !

Culturebox V2 : vers une approche native

Cependant nous n'étions pas complètement satisfaits de cette première version. Pour respecter les délais, nous avons pris plusieurs raccourcis lors du développement de l'application. Par exemple, les outils de mesure d'audience ont été mal intégrés, ce qui entraîne des statistiques d'utilisation non fiables. Nous avons également choisi d'utiliser le lecteur vidéo natif sans intégrer de gestion d'erreurs ou des sessions vidéos, qui nous a empêché d'avoir une visibilité sur la qualité de l'expérience de lecture. Enfin la pré-génération des écrans de façon statique, même en les mettant à jour toutes les 30 minutes, a fait que l'application tvOS n'intégrait pas l'une des fonctions clés disponible sur d'autres versions de l'application Culturebox : pouvoir assister à un événement culturel en direct.

Donc, début 2016, nous avons décidé de développer une nouvelle version de l'application intégrant à minima les améliorations suivantes :

• Utiliser le lecteur vidéo iOS standard de France Télévisions, qui intègre des outils de mesure d'audience vidéo, de qualité de service et les APIs de notre SI vidéo;
• Intégrer correctement des outils de mesure d'audience de l'application pour contrôler son usage;
• Générer tous les écrans dynamiquement côté client;
• Personnaliser l'interface de l'application pour l'aligner sur le site et l'application iPad.

Les 3 dernières modifications auraient pu être mis en œuvre en utilisant à nouveau TVML / TVJS, mais l'intégration d'un nouveau lecteur vidéo nécessitait un développement natif. Comme nous ne prévoyions pas de réutiliser le code de la V1, et pour simplifier le projet, nous avons décidé de réécrire l'application entièrement en code natif (Objective-C).

Donc, début Mars, nous avons commencé à travailler sur la nouvelle version. Le développement de l'interface utilisateur fut assez simple, UIKit étant en fait utilisé par les modèles TVML nous avons pu maintenir l'apparence générale et la convivialité de l'application (avec quelques modifications). Nous avons aussi pu conserver certaines caractéristiques typiques de l'Apple TV comme l'effet 3D "Parallax" appliqué aux vignettes dans tous les carrousels. En générant tous les écrans côté client, nous pouvons à présent indiquer aux utilisateurs quand un événement est diffusé en direct, et leur permettre de "zapper".

Les principaux problèmes rencontrés furent liés à l'intégration du nouveau lecteur vidéo. Comme nous avons choisi de réutiliser notre lecteur iOS existant, nous avons dû supprimer toutes les fonctions utilisant des APIs non supportées par tvOS. Nous avons également dû construire une interface utilisateur qui permette la navigation avec la télécommande Apple TV (et son pavé tactile). Nous avons pu personnaliser l'apparence du panneau d'information vidéo qui apparaît au-dessus de la vidéo lorsque vous glissez vers le bas, mais nous avons dû développer notre propre mécanisme de "scrubbing" pour permettre à l'utilisateur de revenir en arrière ou de faire avance rapide dans une vidéo en glissant à gauche et droite. Malheureusement Apple ne fournit pas d'exemple de code pour cela, donc pour avoir un comportement similaire au lecteur natif vous devez vous débrouiller. Il y a encore des possibilités d'amélioration dans notre implémentation, d'autant plus que Apple a changé le comportement du lecteur vidéo par défaut dans tvOS version 9.2 : il n'est plus possible de "scrubber' une vidéo en cours de lecture, l'utilisateur doit d'abord mettre en pause la vidéo, "scrubber", puis redémarrer la vidéo.

Prochaines étapes

Dans l'ensemble, nous avons trouvé qu'il est tout aussi facile de développer une application sur Apple TV en utilisant TVML ou en natif Objectif-C. Chaque approche a ses avantages et ses inconvénients, en fonction de votre objectif principal et de votre langage de développement préféré. Dans notre cas, nous allons peut être essayer à l'avenir de construire une application «hybride», en réutilisant le lecteur vidéo natif FranceTV que nous avons porté sur tvOS, dans une application construite principalement en TVML. De cette façon, nous serons en mesure de mieux tirer parti de nos ressources de développement, nos développeurs web pouvant travailler sur l'interface utilisateur et la logique métier (en TVML / TVJS) pendant que nos développeurs mobiles implémenteront les fonctionnalités liées à la vidéo, ainsi que les intégrations plus profondes avec le système d'exploitation tvOS. Cette organisation serait proche de ce que nous faisons sur Android TV, où nos développeurs Java travaillent sur le lecteur vidéo et l'ntégration à Android TV alors que nos développeurs web travaillent sur l'interface HTML, affichée dans une "webview". À suivre!