Le 7 novembre dernier avait lieu le DevFest Nantes 2014, une journée complète de conférences autour du mobile, du cloud et du développement web, réunissant 500 participants et 35 orateurs de 6 nationalités différentes. J’y étais pour présenter l’expérience utilisateur. La journée a été riche en découvertes. En voici un rapide compte-rendu.
Mettez un Panda roux dans votre Webview Android !
Damien Lecan est parti d’une situation très classique : une application bancaire devant être compatible sur la plupart des tablettes, et ayant également une version desktop. Une solution peu coûteuse à implémenter et maintenir pour toutes les plates-formes consiste à la coder en html5, et d’utiliser la Webview Android ou iOS pour l’utilisation sur tablette ou mobile en donnant l’impression d’avoir une application native. Le seul petit inconvénient relevé est le manque de compatibilité html5 de la Webview des versions d’Android 4.3 et inférieures. Sauf que ce défaut n’est pas mineur quand on sait que 70% des utilisateurs d’Android sont sur ces versions anciennes. Depuis Android 5.0 (Lollipop), la mise à jour de Chromium est automatique, mais il faudra environ trois ans pour que le renouvellement du parc de téléphones et tablettes rende ce problème caduc.
Mozilla propose deux solutions à cette situation : Geckoview et Open Web Apps.
Geckoview
Il s’agit d’une webview reposant sur une extraction du moteur de Firefox, qu’on embarque dans l’application mobile. Son avantage est une maîtrise complète de la plateforme d’exécution du html5, indépendamment de la version d’Android. Son utilisation est simple, puisqu’il suffit d’utiliser la classe GeckoView à la place de WebView. Deux inconvénients sont à déplorer :
- il faut inclure des librairies supplémentaires dans le projet, qui pèsent actuellement 7 Mo ;
- il existe plusieurs librairies GeckoView selon le téléphone, ce qui oblige à créer deux apk.
Open Web Apps pour Android
Cette fois, il s’agit de créer directement l’application en html5 et de générer un apk à partir d’un manifest.webapp ou d’un contenu web. L’exécution des Open Web Apps se fait dans une application Firefox mobile, celle-ci est installée une seule fois (et automatiquement) pour toutes les applications. La limite principale des Open Web Apps est leur distribution par un Marketplace : cela oblige les utilisateurs à autoriser l’installation d’applications venant de sources inconnues. Cependant, comme un apk est généré, il est possible de le soumettre sur le store classique.
Aucune de ces solutions n’est actuellement disponible pour iOS, puisqu’il est impossible d’y installer un autre moteur de rendu html que WebKit (Chrome pour iOS n’est pas un vrai Chrome).
Développer pour Android TV
Cette présentation sympathique nous a montré en direct ce qu’on peut faire avec Nexus Player (qui n’est pas encore disponible en France), et comment développer (ou transformer) une application pour une utilisation avec Android TV. Les applications actuellement disponibles étant encore peu nombreuses, il s’agit d’un marché émergent offrant de nombreuses opportunités. Adapter une application pour Android TV ne requiert que quatre étapes. Prêts à vous lancer ?
1. Redesigner l’icône de lancement
Appelée android:banner, elle a une taille de 320x180px et doit intégrer le nom de l’application.
2. Créer l’intent Leanback Launcher
Voici comment déclarer la Main Activity d’une application pour Android TV.
<activity
android:name=".TvMainActivity"
android:banner="@drawable/ic_banner"
android:theme="@style/TvAppTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>
</activity>
3. Supporter les actions utilisateur non tactiles
Il faut déclarer que l’écran tactile n’est pas obligatoire.
<uses-feature
android:name="android.hardware.touchscreen"
android:required="false" />
Mais cela ne suffit pas, car il faut penser à l’ergonomie de l’application pour la rendre navigable avec la télécommande : tous les éléments doivent pouvoir avoir le focus, et il faut définir quel sera le suivant à l’avoir (pour toutes les directions).
4. Adapter l’interface utilisateur
Il existe un thème Leanback contenant de nombreux éléments pouvant être réutilisés. Si on ne l’utilise pas, il faut utiliser un thème sans barre d’action (qui donne une expérience utilisateur inadaptée) et ajouter des marges de 27dp en haut et en bas, et de 48dp sur chaque côté.
Xavier Hallade nous a ensuite donné quelques éléments supplémentaires :
- pour créer un jeu, ne pas oublier de mettre le paramètre android:isgame à true, afin qu’il soit bien classé dans l’interface d’Android TV (qui sépare les jeux des autres applications). Ne pas oublier de mentionner si la manette est indispensable ;
- faire attention à ne pas indiquer comme obligatoire un élément incompatible avec Android TV : GPS, camera, orientation portrait, téléphone…
- Pour Leanback, il faut au minimum l’API 17, mais on peut rester sur des versions plus anciennes pour les autres appareils.
Actuellement, pour distribuer une application sur Android TV, la validation est manuelle et c’est très rapide. Pour en savoir plus, voici un article rédigé par le conférencier (en anglais).
Et la diversité dans tout ça ?
Cette présentation a commencé par un constat alarmant : non seulement le secteur du développement informatique est constitué essentiellement d’hommes jeunes, mais la situation empire. La proportion de femmes est en diminution (et elles sont plus nombreuses à quitter le secteur que leurs homologues masculins), et la part d’annonces d’emploi ciblant des personnes ayant moins de cinq ans d’expérience est passée de moins de 60% en 2011 à environ 70% en 2013. D’autres formes de discrimination, comme le handicap ou la formation (qui conduit à des écarts de salaire), ont également été abordées.
Pourtant, les études ont montré que les équipes les plus performantes sont celles ayant le plus fort taux de travailleurs handicapés, le plus grand nombre de managers féminins et le plus de seniors. Une forte diversité dans les employés sera plus en adéquation avec une diversification de la clientèle, qui se reconnaitra plus dans l’entreprise, et permettra également d’identifier plus facilement les besoins et attentes de toutes les composantes des utilisateurs.
Jean Paliès et Cécilia Bossard ont ensuite indiqué ce qu’une entreprise pouvait faire pour gagner de la diversité dans l’entreprise, tant au niveau du recrutement (tests de sélection neutres, anonymisation des CV…) que du management. J’y ai appris l’existence de la charte de la diversité (dont Ippon Technologies est signataire), ainsi que les pratiques de Google, SFR et Norsys pour diversifier leur masse salariale, ce qui permet de constater que l’anonymisation est efficace.
La conclusion s’est portée sur ce que nous pouvions faire au niveau individuel :
- être attentif à sa manière de communiquer, il est très rapide et fréquent de tomber dans des travers sexistes (ou autres) ;
- apprendre à s’excuser quand on a blessé quelqu’un verbalement (au lieu de se retrancher derrière l’excuse de «l’humour») ;
- réagir quand on est victime ou témoin d’une discrimination.
Merci d’avoir soulevé ce sujet encore méconnu, et de m’avoir fait découvrir le groupe Women In Technology.
Tests étendus pour construire des applications Android robustes, avec Genymotion
La présentation a commencé par un plaidoyer en faveur des tests, en particulier les tests unitaires et d’intégration. Ce qui est très simple et rapide sur des applications classiques pose quelques difficultés sur des applications Android, où la machine de développement n’est pas la même que celle où sera utilisée l’application. Une première règle à suivre pour automatiser ses tests sur des applications mobiles est de découpler au maximum le code java du framework Android, ce qui permet de faire un maximum de tests type JUnit. Pour les dépendances dont il est impossible de se défaire, Eyal Lezmy et Florent Noël préconisent d’utiliser Robolectric. En dernier recours, on peut utiliser Android Test Framework, qui s’exécute sur un émulateur, et qui est beaucoup plus lent.
Eyal Lezmy et Florent Noël nous ont ensuite présenté Genymotion, qui permet de simuler des capacités de l’appareil : niveau de charge de la batterie, GPS, réseau… Ces capacités sont également simulables via une API Java, malheureusement payante.
Le support de présentation est disponible ici.
Guérilla design en milieu hostile : responsive et mobilité
Cette présentation de Stéphanie Walter, designer web et mobile, nous a permis de voir un peu mieux les démarches et questionnements propres à son métier. L’explosion du web mobile a bousculé le milieu des designers tout autant que celui des développeurs. Pour eux, c’est la fin des maquettes sous Photoshop dessinées au pixel près, il leur faut s’adapter au RWD et à l’Adaptative Design. Stéphanie Walter nous a donné quelques astuces issues du terrain :
- L’utilisation de prototypes avec des papiers, des ciseaux et de la colle. Non seulement ça permet de gagner du temps en amont (ce qui facilite la décision de repartir de zéro) mais en plus, c’est une aide à la discussion avec les membres de l’équipe, qui s’approprie plus facilement le matériel pouvant être modifié à la volée ;
- Plutôt que de faire des maquettes pour correspondre à toutes les tailles d’écran, il est plus important d’identifier les points bloquants et de donner des consignes globales de redimensionnement et un guide des styles ;
- La fin des maquettes rigides : des prototypes fonctionnels sont plus utiles pour faire valider les idées. Ne pas hésiter à utiliser des gifs animés pour expliquer une animation ;
- Le projet lui-même doit être responsive : des itérations courtes, une plus forte communication entre les équipes, et des lignes de démarcation plus floues entre designers et développeurs.
Cette présentation complétait bien celle que j’ai faite en début de journée, et j’ai apprécié d’y voir des maquettes papier/ciseaux, ainsi qu’une promotion de l’agilité.
Introduction aux Web Components avec Polymer
La journée s’est conclue par cette excellente session sur les Web Components, par Horacio Gonzalez. Ce nouveau standard est très enthousiasmant, car il permettra d’avoir une approche par composants du développement web. Cela facilitera l’intégration de parties issues d’autres sites, comme par exemple les boutons de partage sur les réseaux sociaux ou une carte venant de Google Maps. Nous avons également eu la démonstration qu’il existait un DOM caché (mais pas tant que ça), que les Web Components utiliseront. Le seul problème, c’est qu’ils ne sont actuellement pas disponibles sur tous les navigateurs. C’est pour y pallier qu’il existe Polymer, que l’on peut utiliser à partir de IE9.
Au final, la journée était bien remplie, avec de nombreuses découvertes, et cela valait vraiment le coup d’y être.
Crédits photos
Panda roux
