Appli mobile de chauffage

Appli mobile de chauffage

Présentation

L'application Hestiia permet à ses utilisateurs de piloter les radiateurs de son logement. 

Hestiia, c'est une startup nantaise complètement barrée. 

Ces gars là ont eu l'idée folle de créer un radiateur qui chauffe les maisons en minant de la cryptomonnaie. J'ai adoré bosser pour eux car rares sont les projets aussi innovants. 

Petit extrait de la navigation
Client
Hestiia
Période
Jun 2024
Poste
Dev fullstack
Platforme
Mobile

Mise en place

A vrai dire, lorsque l'on m'a proposé de réaliser cette appli mobile, cela faisait longtemps que je n'avait pas touché à React Native et je n'avais jamais fait de gros projets avec. Mais j'ai accepté sans hésiter car je savais que ce serait stimulant. En plus, quand j'ai une grosse marge de progression, je suis toujours ultra motivé. 

Dans mes souvenirs, React Native c'était chouette, mais il fallait pas mal bidouiller quand même lorsque qu'on voulait faire autre chose que des formulaires. Ca donnait beaucoup de if(IOS) ...else un peu partout dans le code et ça nécessitait d'aller mettre les mains dans le code java ou swift directement.  Quant au fait de publier son app sur les stores...une vraie galère.

Après une recherche rapide, j'apprend qu'il existe un outil qui aujourd'hui résout tout ces problèmes : Expo.

 https://expo.dev/

En fait, c'est une vraie dinguerie.

Expo permet de développer, tester en hot reload, builder, releaser, déployer sur les stores...etc.  Si vous souhaitez en savoir plus, n'hésitez pas à consulter mon article sur le sujet

Voici en résumer la stack que j'ai utilisé côté front :

Expo : https://expo.dev/

Je m'en passe plus

Typescript : https://www.typescriptlang.org/

Je ne code plus du tout en JS tellement typescript a résolu de problèmes que j'avais avec. 

React Native : https://reactnative.dev/

Le choix est évident. Connaissant bien React JS, je n'était pas trop perdu et je pouvais réutiliser quasiment toutes mes connaissances

React Query: https://tanstack.com/query/v3

Indispensable pour un front qui appelle une API Rest. Il permet en plus de mutualiser la donnée venant d'un serveur ws en parallèle.

React Hook Form: https://react-hook-form.com/

Pour gérer les formulaires. Coupler avec Yup, on peut facilement valider la structure des données et gérer les erreurs de remplissage.

Nativewind: https://www.nativewind.dev/

C'est tailwind pour React Native. Tellement simple d'utilisation. 

Detox: https://wix.github.io/Detox/

Pour les tests e2e. Et là ça n'a pas été simple. J'ai d'abord testé Maestro. Mais j'ai finalement choisi detox car plus flexible. Une fois mis en place, ça m'a permis d'éviter énormément de bugs.

Côté back, j'épaulais Jens, un tueur. Il a choisi NestJS pour sa scalabilité. 

En effet, le backend devait communiquer avec les radiateurs via un middleware embarqué (lui-même codé en python). 

Il devait aussi maintenir à jour l'état des radiateurs grâce à IOT AWS. 

Enfin, il fallait communiquer avec l'appli en REST et également en WS. 

Les défis rencontrés

Connecter le radiateur à l'appli via bluetooth

Voilà une feature qui m'a donné du fil à retordre. Mais grâce à la lib react-native-ble-plx, je m'en suis sorti.

Il a fallu tout de même passer beaucoup de temps à tester avec Antoine qui lui codait la partie middleware qui envoyait les données via bluetooth depuis le radiateur. 

Au final, grâce à cette feature, l'oboarding de l'utilisateur était hyper fluide. Une fois son compte créé, il flash le QR code de son radiateur, puis via bluetooth, l'appli lui transmet les informations du wifi et..voilà, le radiateur est connecté à son logement.

Définir les programmes de chauffe

L'utilisateur a la possibilité de choisir, par jour de la semaine, la température qu'il souhaite dans son logement au quart d'heure près.

La difficulté à surmonter fût de traiter les programmes sous la forme suivante : une température par défaut et des plage horaire où la température est différente. Or le middleware attendait seulement une liste de couple heure / température.

Il a donc fallu convertir en temps réel les objets.

L'autre challenge se situait au niveau de l'UX. Rendre visuellment des programmes par jour de semaine et les rendre éditable ne fût pas évident. 

Gérer l'instantanéité de la donnée

L'appli devait être capable de réagir au changement d'état intantanément, que cela soit suite à une action de l'utilisateur ou bien provenant d'une autre source. 

Avec l'aide React Query, j'ai pu mettre en place une stratégie de mise à jour optimiste. C'est à dire que l'interface va se mettre à jour avant même d'avoir eu la confirmation d'un changement d'état. 

Par exemple : Je clique sur Hors-Gel, je sais donc que si l'API répond correctement, je vais recevoir une réponse de celle ci positive. Eh bien avant même d'avoir reçu cette réponse, je mets à jour mon interface. 

D'autre part, en mutualisant les objets gérés via l'api REST et les données issues des évènement Websocket, j'ai pu gérer les changements de données provenant de l'extérieur tout en gardant une architecture simple. 

Mise à jour instantanée sur les stores Android et IOS

L'une des features les plus intéressante d'Expo selon moi et la possibilité de réaliser des "instant update". 

C'est à dire qu'au lieu de rebuilder à chaque release et relancer la soumission sur les stores Android et IOS, Expo ne mets à jour que la partie JS de l'app sur tous les utilisateurs. 

Cela permets de mettre à jour vos app presque aussi simplement qu'un site web. 

Appli mobile de chauffage

Ce qu'en pensen mes clients.

Antoine Sachet
Hestiia

PH a été Tech-Lead Front-End chez hestiia pendant un an et demi et a joué un rôle central dans le développement de nos projets web et mobiles. Son expertise technique en React et NextJS a permis de lancer notre site vitrine avec succès, offrant une interface utilisateur moderne, performante et hautement réactive. PH s'est également distingué par son travail sur notre application mobile, où il a pris un concept initial sur Figma et l'a transformé en une application complète, disponible sur le Google Play Store et l'App Store. Sa maîtrise de React Native et d'Expo a été cruciale pour ce projet, assurant une intégration fluide et une expérience utilisateur optimale. PH possède également une solide expérience en méthodologies agiles et en Scrum, ce qui a grandement facilité la gestion de projets et l'organisation des équipes. Grâce à son expertise, nous avons pu effectuer des mises en production régulières et sans heurts, garantissant la qualité et la stabilité de nos applications.

Hervé Rohou
Tuffigo Rapidex

Rapide, efficace, force de proposition, Pierre-Henri s'adapte vite à de nouveaux environnements et de nouvelles technologies et sera un bon atout pour vos projets !

Alexandre Penombre
VP Auto

Pierre-Henri (alias PH) m'a rejoint à la team Lead des développeurs front chez VP Auto. C'est quelqu'un d'extrêmement compétent, fiable et efficace. Il a rapidement pris en main le code source et a été une force de proposition et un des éléments clés de nos réalisations. A la fois enthousiaste et créatif, sa collaboration a permis d'atteindre un niveau de performance inimaginable au début de la plateforme, qui se traduit par une réduction drastique du nombre de bugs, une réduction des temps de réponse, une augmentation des livrables et j'en passe.Techniquement il a produit un code lisible, simple et efficace. De même, il s'est montré volontaire pour faire progresser ses collègues en partageant ses connaissances sur Typescript et React. Humainement, il a apporté une ambiance agréable au travail et a été une source de motivation pour les collaborateurs. Evoluer dans une équipe avec Pierre-Henri, c'est s'assurer d'être dans un milieu sain, ludique et jovial. C'est un véritable plaisir de travailler avec lui !

Nicolas Vallée
Solériel

J'ai eu l'opportunité de travailler avec Pierre-Henri sur la conception d'un simulateur solaire pour notre site internet et je suis extrêmement satisfait du résultat. Il a su faire preuve d'écoute en tenant compte de mes besoins et en étant force de proposition à chaque étape du projet tant sur les choix techniques que sur l'UX et le développement. Sa polyvalence et son expertise en développement front et back ont été un réel atout pour la réussite du projet. Je le recommande vivement pour son professionnalisme et sa capacité à délivrer un travail de qualité.

Adrien Henry
Tuffigo Rapidex

Pierre Henri est intervenu en renfort de l'équipe de développement. Il a su rapidement s'intégrer, s'adapter à notre organisation et être force de proposition durant toute la durée de sa prestation (1 an et demi).Il a été un soutien important et nous retravaillerons avec lui avec plaisir.

Customers - Dev X Webflow Template
Abdelafid Afidi
VP Auto

J'ai eu la chance de directement travailler avec Pierre-Henri dans la même équipe et ça a été un grand plaisir ! C'est un excellent développeur avec beaucoup d'expérience. Il est très impliqué et très appliqué dans son travail. J'ai beaucoup appris juste en relisant son code qui est robuste et de grande qualité, d'autant plus qu'il est très à cheval sur les bonnes pratiques. Franchement je ne me fais aucun soucis pour les projets sur lesquels il est intervenu et j'apprécierai grandement retravailler avec lui de nouveau à l'avenir.

Prêt à donner vie à vos idées ?