Introduction à Android TV

Les applications TV sont aujourd’hui présentes pour mettre en avant du contenu en accès rapide et avec très peu de contraintes. Afin de conserver la meilleure expérience possible il est nécessaire de respecter certains aspects.

Au début, le développement d’une application TV est assez proche du développement d’une application smartphone et tablette. Cependant la documentation pour ce type d’appareil est très pauvre.

Pour aider les développeurs, Google recommande de respecter une certaine ergonomie, expliquée dans une documentation de base (https://www.google.com/design/spec-tv/android-tv/introduction.html). Ce qui change globalement c’est la navigation. En effet, sur TV, la navigation dans l’application se fait par l’intermédiaire de la télécommande, sans contact tactile avec l’écran. C’est pourquoi l’ergonomie des applications TV ressemble finalement assez peu à ce dont on a l’habitude et possède ses propres codes, gestes.

La librairie Leanback, mise à disposition par Google, propose plusieurs composants et différents types de fragments. Certains de ces composants sont présentés dans la documentation précédemment évoquée. Malheureusement celle-ci ne propose pas d’exemple de code. Pour vraiment pouvoir vous lancer dans la création de votre première application TV, il faut se référer au tutoriel officiel suivant : https://codelabs.developers.google.com/codelabs/androidtv-adding-leanback/index.html?index=..%2F..%2Findex#0

Ce tutoriel présente les composants et fragments de base via des exemples de code bien expliqués, bien utile pour se familiariser rapidement avec les applications TV.

Pour aller plus loin, le DIY est de mise. En effet, le développement d’applications TV n’étant pas encore très répandu il faut chercher ce que l’on souhaite faire dans des exemples d’applications proposés par Google. Les deux meilleurs samples de code disponibles et mis à jour régulièrement sur GitHub sont :

atv-leanback-all

Fragments et vues abordés dans l’exemple Github androidtv-Leanback

Figure 2 : Fragments et vues abordés dans l'exemple Github leanback-showcase

Fragments et vues abordés dans l’exemple Github leanback-showcase

Ces deux projets se complètent bien même si le deuxième présente plus de diversité.

 

Ça donne quoi en vrai ?

Dans notre cas, nous avons développé une application présentant différents quiz regroupés par thèmes.

Cette application nous a servi d’expérience pour tester certaines fonctionnalités d’Android TV.

Nous avons commencé par implémenter un BrowseFragment (https://developer.android.com/reference/android/support/v17/leanback/app/BrowseFragment.html) pour l’affichage des quiz de chaque thème. L’ajout de listes de quiz se fait via un ArrayObjectAdapter utilisant un ListRowPresenter (adapter permettant d’ajouter plusieurs élements de type ListRow contenant un header et une liste de card).

Ensuite pour chaque élément de la liste il est possible d’utiliser des CardViews prédéfinis ou des CardViews custom selon le besoin. Le BrowseFragment est au début aisé à prendre en main de part les exemples cités précédemment. En effet, l’adapter permettant d’ajouter des lignes de Cards dans le fragment est plutôt intuitif. En revanche lorsque l’on essaie de customiser les vues la complexité s’accroit car il faut se débrouiller par soi-même pour arriver au but que l’on s’est donné. Il y a en effet très peu d’informations sur les vues personnalisées dans les tutoriels.

Figure 3 : BrowseFragment présentant la liste des thèmes et les quiz correspondant

Le BrowseFragment présente la liste des thèmes et les quiz correspondants

Nous avons également utilisé le DetailFragment afin d’afficher le détail d’un quiz. Par défaut la description et l’image adoptent des layouts prédéfinis, mais il est bien entendu possible d’utiliser les nôtres. Dans ce fragment il est possible d’ajouter des listes de suggestions d’éléments. Dans notre cas, nous avons suggéré les quiz du même thème. Le DetailFragment est le plus difficile à mettre en place car aucun exemple n’explique concrètement comment mettre en place l’adapter afin de réaliser une apparence personnalisée. Notre conseil pour réussir une page sympa est d’utiliser un ArrayObjectAdapter avec en paramètre un ClassPresenterSelector (cela permet d’ajouter et d’ordonner plusieurs adapter différents afin, par exemple, de pouvoir proposer des suggestions sous la description de l’élément courant).

Figure 4 : En tête du DetailFragment d’un quiz

Entête du DetailFragment d’un quiz

Figure 5 : Bas de page du DetailFragment d’un quiz, liste de suggestion

Bas de page du DetailFragment d’un quiz avec une liste de suggestions

Pour la recherche d’un quiz nous avons exploité le SearchFragment qui lui est facile à prendre en main. Le fragment de base suffit, il faut simplement spécifier les différents adapter à utiliser pour l’affichage des résultats.

Figure 6 : SearchFragment après la recherche “sport”

SearchFragment après la recherche “sport”

Le GuidedStepFragment est quant à lui très pratique et facile d’utilisation pour de la configuration. En revanche, dans notre cas, nous l’avons utilisé pour la connexion via email et mot de passe, et cela a posé quelques complications lors de l’ajout des champs de saisie de texte. En effet, ce fragment est principalement élaboré pour contenir des boutons classiques et/ou radios.

Figure 7 : GuidedStepFragment proposant le choix du type de connexion

GuidedStepFragment qui propose le choix du type de connexion

Pour notre application nous avons également implémenté une page de paramètres via le SettingsFragment. Cette page se présente comme un Drawer sur la partie droite de l’écran. Le fichier XML de settings est identique à celui que l’on peut trouver sur les smartphones/tablettes.

Figure 8 : SettingsFragment donnant le choix d’activation de certaines fonctionnalités

SettingsFragment qui donne le choix d’activation de certaines fonctionnalités

 

Le mot de la fin

Comme vous avez pu le constater, la réalisation de cette application nous a permis de passer en revue de nombreux composants Android TV fournis par Google.

La programmation d’applications pour Android TV est très intéressante car elle permet une approche différente des applications utilisées sur nos smartphones/tablettes même si une bonne dose de DIY est nécessaire !

Crosswalk : la WebView du futur !

Comme tous les ans avant la Google I/O, il y a la soirée Day 0 Intel Party. Le nombre de participants à l’I/O ayant augmenté cette année, ce fut encore plus difficile d’y entrer. Mais armés de notre patience, nous avons tout de même réussi ce challenge.

Nous sommes donc entrés dans un lieu insolite, à mi-chemin entre le bar et la place à Food Trucks, le tout accompagné de stands sur divers projets Intel liés au mobile. Le sujet de cet article est l’un de ces projets qui pourra répondre à un besoin que nous avons fréquemment : la WebView.

Aujourd’hui, pour intégrer une WebView dans notre application, nous avons, au choix, les Chrome Custom Tabs, ou une WebView classique.

Intégrer une WebView directement dans l’application n’est pas forcément compliqué, mais amène deux soucis majeurs : les performances et les comportements anormaux qui diffèrent par rapport au browser natif (ou pas à jour).

Intel a pensé à nous et a sorti une librairie qui répond à ces problèmes : Crosswalk (https://crosswalk-project.org/). Celle-ci est disponible sur Android, iOS, WP et Cordova.

Elle intègre une WebView performante qui a toujours le même comportement suivant les versions d’Android. Il s’agit ni plus ni moins que d’une réimplementation de Chromium et son moteur Blink, sous forme de librairie.

Elle a aussi l’avantage d’intégrer des APIs non disponibles dans la WebView standard, comme :

  • WebRTC
  • WebGL
  • Vibration API
  • Presentation API
  • Predictable layout
  • CSS feature queries

Sur le papier, le projet vend du rêve mais il faut tout de même noter un point négatif : le poids de la librairie (19 Mo).

Si cet inconvénient n’est pas un problème pour votre projet, je vous invite fortement à tester cette librairie qui pourra vous éviter pas mal de galères. La migration est très simple car la WebView de Crosswalk a la même interface que la Webview standard, il faudra juste modifier les imports et le nom de la classe.

Pour en savoir plus, voici une vidéo de présentation faite par Intel sur le sujet.

Google I/O : nous y étions !

Mis en avant

Cette année, iD.apps était présent à la Google I/O, avec pas moins de trois participants à la conférence annuelle de Google pour les développeurs. C’est généralement durant cet événement que la firme de Mountain View annonce à la fois ses nouveaux produits pour le grand public, mais aussi les nouveautés à venir sur Android, ou encore les nouveaux outils qu’elle met à disposition des développeurs.

Bien entendu, nous avons envie de vous parler de tout un tas de nouveautés que nous avons adoré ! Mais avant, nous voulions vous faire un petit tour d’horizon de ces trois jours de conférence dans la Silicon Valley !

IMG_20160519_201327

 

Google I/O day 0 et keynote

Cette année, la Google I/O se déroulait pour la première fois au Shoreline Amphitheatre, à Mountain View, juste à côté des locaux de chez Google. Il s’agit d’un amphithéâtre, généralement utilisé pour des concerts, et pouvant accueillir plus de 20000 personnes !

Grande nouveauté donc, la conférence s’est déroulée en plein air, le parking ayant été aménagé d’espaces pour les conférences et autres démos technologiques.

Afin d’obtenir de bonnes places pour la keynote, il était impératif d’arriver le plus tôt possible pour le retrait des billets, le jour précédant celle-ci. En effet, les meilleures places étaient attribuées aux premiers arrivés. Forts de notre envie d’être au premier rang, nous sommes donc partis attendre l’ouverture des retraits de badges, dès 5h du matin ! 2h plus tard, nous avions nos badges, et une place dans la section 101, la mieux placée.

C’est donc au premier rang de la section 101, juste derrière les Googlers, que les experts iD.apps étaient prêts à découvrir les nouveautés que Google allait annoncer. Et nous n’avons pas été déçus !
IMG_20160518_090459

Tout d’abord, Google Home, un boîtier équipé du Google Assistant (évolution de Google Now), qui vous permettra, par la voix, de poser une question, écouter une chanson sur Google Music, ou lancer un appel Hangouts. Si vous connaissez Echo d’Amazon, vous voyez probablement de quoi il s’agit. Si vous voulez en savoir plus, vous pouvez aller visiter la page officielle : https://home.google.com . Sortie cet automne pour en savoir plus !

Google a également présenté deux nouvelles applications : Allo et Duo. Le premier se présente comme un remplaçant de Hangouts, tandis que le second est une sorte de Facetime à la sauce Google. L’intégration de l’assistant Google les rend néanmoins particulièrement puissantes. Les deux applications devraient être disponibles durant l’été !

La VR était également de la partie, avec l’annonce de standards de construction de smartphones VR ready pour Android, sous la marque Daydream. Le tout s’accompagnera d’une nouvelle interface entièrement dédiée à la VR pour ces téléphones. Plus d’informations seront disponibles cet automne.

Google nous a également présenté (ou plutôt re-présenté) les nouveautés à venir sur Android N (notamment le multi-window). Petite surprise néanmoins : les instant apps. D’ici la fin de l’année, il sera possible aux utilisateurs d’Android d’utiliser certaines parties d’une application, sans avoir à l’installer ! Vous pourrez par exemple consulter le détail d’une réservation d’hôtel, sans avoir à installer l’application de la chaîne d’hôtel en question. Le tout disponible à partir de KitKat. Plutôt pas mal non ?

IMG_20160517_073652

Côté développeurs,  Android Studio a désormais une version 2.2 (disponible en version Canary), qui intègre de très nombreuses nouveautés, dont le constraint layout (qui devrait simplifier la vie des développeurs pour construire les interfaces), ou encore un enregistreur de tests fonctionnels pour Espresso. Nous écrirons un article bientôt pour vous donner notre ressenti sur toutes ces nouveautés vraiment intéressantes. En attendant, vous pouvez aller voir la conférence What’s new in Android Studio sur Youtube !

 

Enfin, le meilleur pour la fin : Firebase ! Vous connaissez cette entreprise, récemment acquise par Google, pour sa base de données temps réel très populaire. Désormais, Firebase inclut également un nombre très important d’outils formidables pour les développeurs Android. On y trouvera entre autres :

  • des statistiques d’application poussées (à la Google Analytics) avec de la gestion d’audience
  • du crash reporting (à la Fabric)
  • du paramétrage d’applications (comme Parse le permettait par exemple)
  • de la gestion de liens dynamiques
  • de l’hébergement de ressources web statiques
  • DU PUSH

Oui, vous avez bien lu, du push ! GCM est désormais FCM (Firebase Cloud Messaging), et permet l’envoi de pushs depuis la console Firebase, avec une gestion très poussée des audiences, liée aux statistiques de la partie analytics.

Le plus important : l’ensemble est GRATUIT. Plus besoin donc de passer par des solutions tierces (très) coûteuses pour de l’envoi de pushs ciblés. Le tout fonctionnant sous Android comme iOS. Nous reparlerons bien entendu plus en détails de tous ces changements qui vont avoir un impact important sur notre travail chez iD.apps.

IMG_20160519_142226

 

Les conférences, et autour

En trois jours, nous avons eu l’occasion d’assister à de très nombreuses conférences, sur de nombreux sujets. Bien entendu, Android, mais aussi Firebase, le Material Design, Play Games, ou encore les applications pour les pays émergents. Il fallait s’armer de patience pour assister aux conférences les plus courues, les gens faisant parfois la queue près de 2h en avance !

Heureusement, l’attente se faisant en extérieur, le cadre très agréable et le soleil de Californie adoucissaient un peu ces “pauses”. C’était aussi l’occasion de discuter avec d’autres développeurs venant du monde entier, et d’échanger sur les problèmes que nous rencontrons avec nos clients au quotidien. Et il n’y a pas tant de différence que ça entre la France et la Silicon Valley à ce niveau-là ! Et pour contrer la chaleur, Google n’avait pas lésiné sur les boissons et autres serviettes glacées. Les conférences, ce sont les rencontres avant tout, non ?

Baby foot

Les experts iD.apps prennent une pause entre deux conférences

Malgré ces longues files d’attente, nous avons pu assister à des conférences avec certaines célébrités de Google, comme Chet Hasse, Romain Guy, Nick Butcher ou encore Chris Banes ! Nous avons également vu sur scène le CTO d’Epic games (Unreal Engine), le CEO d’Unity Technologies, et même le très connu Tim O’Reilly. On croise de vrais légendes à la Google I/O !
IMG_20160519_130000

Nous avons également eu l’occasion d’aller tester quelques produits Google (pas Google Home malheureusement), et discuter avec les équipes produits. Comme vous pouvez vous en douter, nous avons longuement dialogué avec les équipes de Firebase, ou encore d’Android Studio. Nous avons aussi testé la réalité virtuelle avec une animation autour de Bohemian Rhapsody de Queen, ou encore la communication entre Android et un robot, avec un bras mécanique non dépourvu de talent artistique ! Sans oublier le projet Tango (https://www.google.com/atap/project-tango/), avec des tablettes montées sur des fusils Nerf pour faire la chasse aux monstres sous un chapiteau. Oui, on a l’air ridicule à courir après des créatures qui n’existent pas.

 

Le mot de la fin, avant la suite

Conclusion : la Google I/O, c’était génial ! Nous avons beaucoup de nouveautés à tester maintenant que nous sommes revenus en France, et il est probable que certaines annonces changent notre travail de tous les jours (avec un gain de productivité peut-être :)). Et nous sommes impatients de tester les nouveaux produits qui sortiront dans les mois à venir. Seule déception (en plus de l’absence de cadeau) : pas de nouveaux téléphones ou tablettes annoncés, mais l’on pouvait s’y attendre.

Suivez de près notre blog dans les semaines à venir pour en savoir plus sur ce que nous avons vu, et nos retours sur les nouveautés Android !

IMG_20160518_100448