C’est à l’occasion de la préparation du déménagement des locaux de la filiale canadienne de Davidson, qu’est venue l’idée de mettre en place un système permettant d’améliorer la vie en entreprise. Après quelques réflexions en considérant les avantages & inconvénients, Flutter a pu se démarquer des différentes solutions proposées. Le développement du minimum viable et la publication sur les stores étaient les tâches nécessaires à réaliser pour s’accorder le succès du projet !
Un peu d’histoire…
C’est en 2018 que Davison s’est implanté au pays de l’érable. Une première équipe s’installe et débute dans un espace de coworking. Quelque temps après, le nombre de collaborateurs augmente, des locaux sont alors nécessaires pour accueillir les premiers collaborateurs canadiens.
Deux ans plus tard, Davidson grandit encore et atteint les limites de ces bureaux. En parallèle de cela, le Canada est frappé par une crise sanitaire qui va bouleverser les méthodes et modes de travail.
Nous avons entamé la recherche de nouveaux locaux pendant la pandémie de la Covid 19, afin de préparer le retour des collaborateurs au siège.
Dans ce contexte, nous devions envisager deux types de problématiques : anticiper le nombre de personnes qui voudraient se rendre au bureau, ainsi que la réservation de salles, élément qui posait des problèmes de disponibilité durant les deux dernières années.
Différentes solutions ont été proposées et étudiées afin de pouvoir satisfaire ces besoins et être acceptées par tous les employés de Davidson.
Une solution imparfaite
Lors du choix de la technologie que nous souhaitions adopter, nous nous sommes focalisés sur l’utilisation quotidienne du produit. Pour cela nous avons étudié différentes technologies en prenant en considération leurs aspects négatifs comme les défauts ou les inconvénients. Parmi ces technologies nous retrouvions des propositions innovantes comme les agents conversationnels avec Google ou Amazon mais très peu utilisées aujourd’hui, des méthodes de stockage de type relationnel ou document, l’utilisation des API de Google Agenda, ou encore différents clients comme les applications web, mobile, PWA et enfin des bots sur les plateformes de messagerie comme Discord que nous utilisons aujourd’hui, au quotidien.
Deux solutions se complètent alors dans leurs défauts: celle de Google Agenda qui ne possède pas une interface suffisamment lisible pour la disponibilité des salles ou les places restantes. Les applications mobiles quant à elles, doivent être installées sur le téléphone de tous les utilisateurs, que ce soit sur Android ou iOS.
Ce qui manque à Google Agenda est une vue d’ensemble concernant la disponibilité des salles. L’application mobile est le client idéal pour représenter visuellement cette information. De plus, les téléphones sont des appareils que nous utilisons quotidiennement.
Le choix de l’application mobile fait suite à la réflexion sur les PWA, le Push Notifications n’est pas disponible sur iOS. Pour rendre cela possible, les applications mobiles natives étaient la seule solution. Il reste alors un problème à résoudre : le développement sur les deux plateformes Android et iOS. Par manque de disponibilité, nous ne pouvions pas développer l’application avec deux code source différents.
Nous devions opter pour une technologie qui, depuis un codebase, produit plusieurs applications : c’est ce qu’on appelle le cross-platform.
C’est à ce moment qu’intervient Flutter.
Flutter parmi les autres
Il existe une multitude de technologies permettant de développer des applications cross-platform issues d’un codebase unique. On peut retrouver parmi eux PhoneGap, Cordova, Ionic, Xamarin, Koni, React Native ou encore Flutter et bien d’autres. Beaucoup d’entre eux utilisent les concepts web pour s’interfacer sur nos appareils.
Le web est le développement le plus commun, donc il y n’y avait rien de plus simple que d’incorporer du web dans les applications mobiles et gagner du temps sur le développement avec les connaissances que nous possédions déjà. Cependant, ces technologies provoquent des pertes de performances qui impactent et rendent l’expérience utilisateur désagréable.
Cross-platform, mais Native cross-platform
Flutter est un framework open-source comme les très connus ReactJS, Angular ou encore Vue, mais basé sur le langage de programmation Dart développé tous les deux, par Google.
Sa particularité ?
Il est native cross-platform, ce qui signifie que le rendu après la compilation est un programme en binaire pouvant communiquer avec le système ciblé. Flutter est capable de compiler pour Android (mobile et wear), iOS, mais également pour le Web et les systèmes d’exploitation Windows, MacOS et Linux de manière stable depuis la version 3.
L’aspect native cross-platform rend les performances d’exécution presque similaires aux développements native spécifiques aux systèmes.
Efficacité de la compilation
Atteindre une telle performance est rendu possible grâce au langage de programmation Dart qui possède plusieurs modes de compilation: JIT (Just-In-Time) et AOT (Ahead-Of-Time).
La méthode JIT permet d’utiliser les outils de debugging implémentés dans la machine virtuelle de Dart, ainsi que la fonction de hot-reload permettant de mettre à jour des changements pendant la phase de développement sans relancer la compilation du projet.
La fonction de hot-reload est une fonctionnalité phare de Dart, elle permet durant le développement avec Flutter, de mettre à jour l’interface graphique et rendre le visuel ou les règles métiers disponibles instantanément.
La méthode AOT est une version faite pour la production : optimisée, traitement à la compilation et d’autre au runtime. Le code est compilé en langage machine et ne passe alors plus par la machine virtuelle pour exécuter les instructions.
“C’est simple à utiliser”
La difficulté lors du développement d’une application mobile avec comme fonctionnalité principale la réservation de salle, est d’être ergonomique. Pour rappeler le contexte du projet, l’application sera utilisée par les collaborateurs de Davidson Canada, dans le meilleur des cas, de manière quotidienne, donc pour le moment, ne comptera pas plus de 30 utilisateurs au moment de la première publication et sera utilisée dans le cadre d’un milieu professionnel uniquement.
De ce fait, l’application n’a pas besoin d’avoir une navigation innovante mais plutôt un affichage commun, efficace, dont les utilisateurs se serviront tous les jours.
Google Maps a été aussi bien une référence qu’une source d’inspiration. L’idée est de visualiser les salles avec un plan d’architecte, de zoomer ou dézoomer dessus et sélectionner une salle pour consulter ses informations. Dans un premier temps, il a fallu intégrer le plan sur l’application et dans un second temps, placer un composant sur chaque pièce. Flutter possède des widgets (ou composants dans les autres framework front) mis à disposition pour réaliser ce type d’affichage, en voici une petite liste :
- InteractiveViewer crée un viewport pour visualiser des éléments plus grand que celui-ci
- Image rend une image disponible dans les assets de l’application
- Stack permet à ses éléments enfants de s’empiler (le premier est le plus bas)
- ClipPath va, avec quelques instructions, pouvoir dessiner n’importe quelle forme demandée
- InkWell est le Widget qui va permettre de rendre ses enfants actifs avec des comportements comme au tap, au maintien ou encore au double tap
- DraggableScrollSheet permettra de disposer les informations d’une salle en sortant du bas de l’écran
“Elle est belle l’application”
Si l’ergonomie permet à l’utilisateur de naviguer dans l’application de manière intuitive, le rôle de l’interface utilisateur est de créer un univers ou une cohérence entre les éléments graphiques, les couleurs et les formes. L’identité graphique va, en quelques sortes, répondre à la question : “à qui appartient l’application ?”. Si le produit devait ressembler à une personne ou une entreprise, comment celle-ci devrait y être reflétée. Suite à quelques recherches et réflexions, nous nous sommes rendu compte que cette étude avait déjà été résolue: https://www.davidson.fr/.
Cette solution, sous nos yeux depuis le début, nous a permis de prendre connaissance d’une charte graphique du site et son univers.
Tous les aspects de la charte ont été implémentés de manière à s’intégrer dans le thème Material initialement présent dans les librairies de Flutter comme les polices, la sémantique des couleurs, la formulation des phrases pour le wording ou encore le dégradé qui représente Davidson constitué de trois couleurs. Flutter donne la possibilité de créer des thèmes et d’appliquer selon certaines règles les bonnes couleurs. Ceci permet de respecter les principes de Material et créer une harmonie sur tous les composants graphiques non personnalisés.
L’impensable indispensable
Le cas d’utilisation de l’application est très simple: visualisation de salle disponible ou occupée et nombre de places libres dans les open-spaces. Dans cette optique, l’utilisateur n’utiliserait l’application que très peu et n’aurait donc pas de plus-value. Nous devions trouver une solution pour rendre l’application plus utile qu’elle ne l’est sans que celle-ci ne soit trop invasive. Un des problèmes les plus récurrents des applications est le fait de rappeler aux utilisateurs que l’application existe. De ce fait, cela incite à dire qu’elle n’est pas utile et donc pas indispensable.
Si nous sommes amenés à vouloir rendre l’application utile, c’est tout simplement pour que la réservation soit un réflexe et non une obligation. Donc, si l’utilisation de l’application devient un réflexe, nous n’aurons aucun problème de salle non réservée ou l’absence de place disponible.
Des fonctionnalités mineures ont été ajoutées pour compléter ces manques comme l’ajout du calendrier personnel sous forme de liste et un accès rapide à tous les réseaux sociaux où Davidson Consulting est présent (Instagram, Facebook, LinkedIn).
Toujours dans une réflexion d’optimisation, une mise à jour majeure en cours va permettre d’accéder aux évènements du groupe canadien au sein d’une section prédéfinie. Il sera également possible d’accéder à des informations pratiques liées à la vie en entreprise chez Davidson (plateforme de compte rendu d’activité, de congés ou de note de frais).
Bien évidemment, tous les collaborateurs posent leurs questions et soumettent leurs idées qui permettront d’améliorer aussi bien le contenu, que l’expérience de l’application.
Une application pour tous
Chez Dav, on aime la diversité. Nous tenons à accueillir des collaborateurs du monde entier. De ce fait, l’application intègre aujourd’hui trois langues : le français, l’anglais ainsi que l’espagnol. Un système a été mis en place pour faciliter l’intégration de ces langues à l’aide d’un tableur.
L’application a vu le jour de manière partielle lors de l’inauguration du nouveau siège de la filiale canadienne. La publication Android a été réalisée à temps mais nous avons rencontré quelques difficultés avec celle de la version iOS. Cela ne nous a pas empêché d’utiliser l’application, de recueillir plusieurs retours et de découvrir des comportements sur les divers appareils que nous disposons.
La proximité nous a permis également de partager notre point de vue sur la réalisation de certaines fonctionnalités et faire participer tout le monde.
Quelque temps après, nous avons publié l’application de manière privée et généré des liens de téléchargement pour les distribuer à tous les collaborateurs.
N’étant développée que pour la réservation de salles, de nouvelles idées ont été soumises et un nouveau projet est en cours de développement, ça ne sera certainement pas le dernier !
