Avant-propos
Tout a commencé lorsque le plus grand événement sur le développement numérique Nantais a proposé le thème suivant “Le rock” pour sa prochaine édition en 2019. Chaque stand propose généralement des animations pour rendre l’expérience encore plus unique pour les visiteurs. Ces animations sont souvent des sortes de mini-jeux avec un classement qui permet de faire gagner des lots.
Lors de mon arrivé chez Sfeir Nantes, j’ai très vite remarqué que cet événement, le Devfest, est vraiment important à leurs yeux, comme le fait que nous avons deux organisateurs de ce dernier dans l’équipe. Ainsi il était normal, que dis-je, obligatoire d’avoir nous aussi nos animations pour notre stand et montrer notre savoir faire ;).
Le thème de cette année est inspirant et les idées fusent assez vite jusqu’en retenir qu’une seule : “Et si on invitait les visiteurs à se déguiser en Rock Star et qu’une application indique à quelle véritable Rock Star ils ressemblent ?”
Nom de code : Rockstar-me
Ainsi le projet débute avec Adrien Lasselle, puis plusieurs Sfeiriens vont y participer : Jean-François Garreau, Arthur Faugeras, Emmanuel Lebeaupin, Gildas Morel des Vallons.
Finalement, une équipe de trois personnes s’est formée en autonomie totale sur ce projet : Tristan Elain, Mathob Jehanno et moi-même. A un mois du Devfest, le projet devait avancer plus vite pour être prêt à l’heure.
Techniquement, l’application est hébergé sur GCP (Google Cloud Platform) et Firebase. Pour pouvoir comparer un visiteur du Devfest et aux Rock Stars, on utilise une intelligence artificielle AutoML et VisionAPI qui sont des produits de GCP.
Côté Back, tout fonctionne avec des cloud functions sur la plateforme Google Cloud Platfom. Nous avons trois différentes cloud functions avec chacunes un but précis :
- EmailUtil : cette cloud function sert à envoyer les emails aux visiteurs qui demandent une copie de leur photo avec le pourcentage de ressemblance avec une Rock Star;
- GetRockers : celle-ci permet de récupérer la liste de toutes les Rock Stars que nous avons préalablement ajoutées dans notre modèle AutoML;
- Rockstar Predict : la dernière cloud function nous permet de comparer une photo avec toutes les Rock Stars et de donner un pourcentage de ressemblance grâce à AutoML et VisionAPI.
Pour le Front, on a choisi d’utiliser React avec le nouveau système de Hooks. Cela nous a permis d’apprendre à mettre en place ce genre de solution sans avoir un projet trop complexe et sensible à maintenir derrière. C’était avant tout l’occasion de sortir de notre zone de confort et d’expérimenter tout en réalisant un projet innovant.
Ainsi la stack technique est très orientée Javascript, que ce soit Back ou Front.
Collaboration
Comme c’est un projet avec une équipe de trois personnes à temps plein et plusieurs autres personnes à mi-temps, ils nous fallait un support sur lequel nous pouvions documenter l’avancement, les prochaines étapes et comment bien collaborer.
Pour cela, nous utilisons l’outil Notion qui se révèle pratique et multi-tâche, on peut réaliser des spécifications, rapport d’avancements et même faire de l’agilité dessus. Ce fut l’outil parfait dans cette démarche de collaboration.
Maquettage
En plus du développement, j’ai re-imaginé l’interface de l’application. Le but de celle-ci était de se calquer sur l’univers du Rock et d’ainsi s’intégrer parfaitement au stand qui sera rockstar !
Pour cela, j’ai réalisé plusieurs maquettes sur le logiciel Affinity Designer. Au début, l’application était purement fonctionnel et on se retrouvait avec cette interface ci-dessous.
Le cadre blanc symbolise la zone d’affichage de la webcam ici. On retrouve sur la partie gauche, la zone de la caméra et la saisie du pseudo de la personne, ainsi que le bouton pour prendre la photo et avoir le résultat.
Au premier abord, si vous ne saviez pas que c’est une application pour savoir à quelle Rock Star vous ressemblez, rien ne nous l’indique.
Durant ce temps de recherche graphique, Tristan et Mathob s’occupait d’implémenter les dernières fonctionnalités comme un carrousel pour afficher les photos des Rock Stars dans le menu à droite et d’ajouter encore plus de Rock Star pour avoir une représentation ethnique la plus complète possible.
Pour ajouter une nouvelle Rock Star, plusieurs étapes sont nécessaires. La première est de trouver quelle Rock Star ajouter. Ensuite pour entraîner l’intelligence artificielle, elle a besoin d’environs une centaine de photos de la Rock Star en question de face et en couleur. De ce fait, une énormément phase de recherche et de tri de photos est faite en amont. Une fois cela fait, un fichier JSON est généré pour être compatible avec AutoML.
Concernant le fonctionnement de AutoML, nous utilisons sensiblement la même architecture que celle détaillée dans l’article de Jean-François Garreau. Comme l’application est connecté avec un fichier Google Spreadsheet pour récupérer la liste des Rock Stars, on a juste à ajouter la Rock Star dans cette liste pour l’application puisse l’afficher ensuite.
Lors de ma réflexion sur comment concevoir l’interface de l’application, j’ai réfléchi aux méthodes possible pour intéresser le visiteur à venir voir l’application sur le stand. Comment attiser sa curiosité et lui donner l’envie d’en savoir plus.
Pour cela j’ai mis en avant ce cadre de la webcam pour qu’on se voit dedans plus facilement et j’ai réalisé une scène dans laquelle le visiteur est mis en avant pour qu’il se voit comme une vraie Rock Star sur scène.
Le classement rajoute cette envie de se comparer aux autres et de voir qui ressemble a quelle Rock Star. Il était important de bien mettre en avant ce classement. Pour cela j’ai joué sur les couleurs pour être marquant et attirer la curiosité plus facilement. Mais il manquait un élément essentiel : l’affichage des photos des Rock Stars dans le classement.
Après quelques ajustements, l’interface est enfin terminée. Cette application était disponible durant les deux jours du Devfest 2019 sur le stand Sfeir et reste disponible en ligne. Elle aura bien fonctionnée et aura permis à plusieurs visiteurs de savoir à quelle Rock Star ils ressemblent le plus !
Je vous laisse donner vos impressions en commentaires et espère que cet article vous a donné envie de tester l’application rockstar-me !
