Création de l'application mobile Leaves & Clouds

Bonjour à toutes et à tous, ceci est une retranscription d'une interview faite lors du lancement de l'application Leaves & Clouds en décembre 2022.

Nous sommes les partenaires techniques de Leaves & Clouds depuis plusieurs années maintenant. Au vu de leurs performances et du profil de leurs utilisateurs, essentiellement mobile, la création d'une application mobile est le prolongement du site pour les années à venir.

Nous avons lancé la production de cette application iOS (spécifique pour iPhone) en juin 2022. Six mois plus tard, à la date prévue, l'application sort sur l'App Store d’Apple.

Socle technique

Coté technique, nous utilisons Flutter et Dart. Tous les deux sont développés et maintenus par Google et entièrement open source. Ce qui est un généralement un gage de transparence, sécurité et support sur le long-terme. L’autre option aurait pu être React Native (JavaScript), framework propriétaire crée et maintenu par Facebook.

Une connaissance commune nous a mis en contact principalement car il y avait déjà un besoin fort, exprimé par Marie Lopez et l’équipe qui travaille sur cette boutique. Nous avons été appelés car ils avaient une boutique PrestaShop et celle-ci fonctionnait plus ou moins bien au sens technique.

Flutter est écrit en langage Dart, ce qui permet d’écrire et de compiler le code plus rapidement que JavaScript. De plus, Flutter affiche les animations à 60 fps en standard. En règle générale, toutes les applications utilisant Flutter sont très performantes par défaut. Plus que celle utilisant React.

Car l'architecture de React Native est composée de deux parties, JavaScript et Native, le framework nécessite un pont JS pour interagir avec les éléments natifs. C'est l’un des éléments qui rend React Native un plus lent que les autres outils. Et sur un e-commerce, où chaque seconde est décisive dans l’acte d’achat d’un client, le choix du couple Flutter/Dart est logique.

Enfin, la documentation Flutter est parfaitement à jour et très précise, ce qui n’est pas toujours le cas lorsque l’on travaille avec React. C’est pourquoi le choix de départ de votre framework est si important.

Voici le top 10 des entreprises qui ont construit leurs produits avec React Native :

• Facebook
• Instagram
• Pinterest
• Uber Eats
• Bloomberg
• Walmart
• Shopify
• Skype
• Tesla
• Wix

Voici le top 10 des entreprises qui ont construit leurs produits en utilisant Flutter :

• Google Ads
• eBay Motors
• Toyota
• BMW
• Alibaba
• Groupon
• Realtor.com
• Reflectly
• Square
• Le New York Times

Le socle technique étant posé, passons maintenant à l’application en elle-même. Elle permet bien sûr aux utilisateurs l’accès à l’intégralité du catalogue du site web avec l’ajout de fonctionnalités spécifique à l’application mobile.

Fonctionnalités

- Premièrement, la page d’accueil est modifiable via une mise-à-jour JSON, pas besoin de repasser par le cycle de validation de l’app store à chaque fois (24/48h).

- Toutes les images de l’app sont gérées par le CDN Shopify.

- Nous avons recréé au sein de l’app la fonctionnalité “coffret sur-mesure” avec tout un ensemble de contraintes et des animations particulières. Je vous invite à le tester sur votre iPhone.

- L’utilisation des points relais en fin de parcours nous bloque, pour le moment, à l’intégration de paiement natif. C’est donc Shopify qui gère l’intégralité du processus de paiement.

- L’utilisation et la création de Deeplinks, afin de pouvoir partager un lien qui renvoie l'utilisateur au sein d'une page précise de l'application mobile. Ce mécanisme permet aussi de renvoyer l’utilisation au sein de l’application mobile, et ce, directement via les résultats de recherches Google. Comme pour Amazon par exemple, lorsque vous faites une recherche sur le web et qu’un lien Amazon est proposé : si vous cliquez dessus et que vous avez l’application Amazon installée sur votre téléphone, et bien, c'est elle qui s’ouvre et qui prend le relais.

- Création d’un mode “sombre” pour protéger vos yeux.

Ainsi que toutes les fonctionnalités que l’on peut attendre d’une app e-commerce : Wishlist, compte & paramètres, notation de l’app, panier, arborescence de catégories, menu principal…

L’ensemble de ce travail a été réalisé en étroite collaboration avec les équipes de LAC. Que ce soit dans les tests et vérifications, proposition de fonctionnalités ou encore création d’éléments visuels.

Nous avons pris le temps d’organiser deux sessions de bêta-test fermé, sur invitation. La communauté de Leaves & Clouds, très engagée, a répondu à nos questions durant cette phase de test et nous avons pu faire un certain nombre de corrections/améliorations suite à leurs retours très pertinents.

Perspectives futures

Après un lancement qui s’est très bien déroulé, et un excellent accueil de l’application, nous allons maintenant nous concentrer sur la personnalisation de l’expérience d’achat de chaque utilisateur. Afin de la rendre la plus personnelle et pertinente possible.

Et de nouvelles fonctionnalités sont à prévoir mais je n’en dis pas plus…