Projet Mobile - Bleu Blanc Coeur

Application mobile avec géolocalisation de points de vente

Contexte du projet

Bleu-Blanc-Cœur est une association créée en 2000, son label mise sur la bonne alimentation des animaux pour nous faire mieux manger, et rester en bonne santé.

L’association rassemble des agriculteurs, des scientifiques et des marques engagés. Le logo garantit des aliments de qualité produits dans le respect de la nature et accessibles à tous.

Disposant déjà d’un site Internet, ils souhaitaient engager davantage leur communauté en créant plus d’interactions avec les labellisés et les acheteurs.

Ils ont donc souhaité mettre en place une application mobile afin de pouvoir créer un nouveau canal de communication avec les producteurs labellisés et auprès du grand public.

Résultats

L’agence Bakasable a fait appel à nous en sa qualité de maître d'oeuvre. Ils ont aussi réalisé le design et l'ergonomie de l'application.
Nous avons développé l’interface utilisateur de l’application mobile (hybride). Pour cela nous avons communiqué avec une API* déjà créée auparavant de leur côté. Nous avons donc revu avec eux le code existant et nous avons apporté des conseils techniques.

Voici les fonctionnalités développées pour l’application :

  • Sur l’écran d’accueil, L’utilisateur accède tout d’abord aux news de l’association et événements mis en place.
  • Ensuite, il peut chercher les produits qu’il souhaite en accédant à une carte géolocalisée en temps réel.
  • Cette carte lui propose de visualiser les magasins, revendeurs ou marchés où sont présents les produits labellisés BBC.
  • Il peut découvrir les éleveurs labellisés et leur histoire.
  • Il accède au catalogue en ligne des produits labellisés.
  • L’utilisateur peut découvrir différentes recettes et accéder ensuite à une liste de course correspondante.
    L’application détecte sa géolocalisation et lui propose les magasins les plus proches pour acheter ce dont il a besoin pour cuisiner.
  • Un utilisateur peut aussi créer un compte ambassadeur et interagir avec l’association :
    • Il peut envoyer des photos de produits labellisés présents dans une enseigne, prévenir qu’un produit est absent.
    • Il peut mettre des produits et magasins en favoris.

Nous avons aussi mis en place un compte dédié pour les producteurs. Ils peuvent grâce à leur compte accéder en plus à une rubrique qui leur permet de soumettre un nouveau produit à l’association afin d’être ajouté à l’application. L’association modère ensuite et valide ou non l’ajout du produit.

Conseils
Vous voulez plus d’informations ?

Problématiques

Densité d’information :

Sur la carte géolocalisé, de nombreuses informations sont diffusées, l’affichage peut donc vite devenir compliqué.
L’utilisateur peut être perdu et ne pas capter les bonnes informations.

Adaptabilité multi-devices :

Comme l’application mobile peut être utilisé par différents smartphones avec des puissances différentes, le chargement de la carte géolocalisée peut vite poser un problème. En effet, certains téléphones peu puissants peuvent mettre beaucoup de temps à afficher les informations. Il faut donc penser à ces contraintes lors du développement.

Technologies utilisées

• React Native

• API REST

• Postman (outil de test)

À savoir !
Nous proposons un template sur notre compte Github pour bien démarrer en React Native : 
https://github.com/matiere-noire/react-native-ignite-mobx

Nos conseils

Si vous souhaitez mettre en place une application mobile avec une map, nous vous conseillons de bien travailler le design des informations présentes sur la carte afin qu’elle soit facilement compréhensible.

Lorsque vous souhaitez mettre en place une application mobile, pensez-bien auparavant aux données que vous souhaitez afficher afin de proposer des bases de données et une API* propres aux développeurs. Cela permet de simplifier le développement de l’interface utilisateur.

*API est un acronyme pour Applications Programming Interface. Une API est une interface de programmation qui permet de se « brancher » sur une application pour échanger des données. Une API est ouverte et proposée par le propriétaire du programme.

Le projet en image

 
Apple App StoreGoogle Play Store

Conseils
Vous voulez plus d’informations ?