FeedFriendLocator

L'idée est de créer une application permettant à tout un chacun de localiser les "frigos solidaires" présents dans un rayon autour d'un point ciblé sur la carte par l'utilisateur afin de pouvoir y déposer de bonnes choses à manger ou à boire. L'objectif est de faire un bon geste pour des personnes dans le besoin et également de lutter contre les gaspillages alimentaires.

J'ai pensé initialement cet exercice comme un projet avec un objectif concret ayant du sens. Cependant pour respecter le délai j'ai préféré m'en tenir dans un premier aux consignes de base avec quelques améliorations.

♻️ Contexte de développement: ♻️

Pour préparer un entretien pour un stage dans une entreprise qui travaille avec Flutter j'ai reçu le défi suivant :

"Créer un projet Flutter à partir de zéro avec une carte Google sur la page principale en utilisant ce package. Vous n'avez pas besoin d'une barre de navigation. Utilisez une API gratuite et publique pour récupérer les pays. Affichez un marqueur pour chaque ville que vous recherchez sur la carte. Lorsque vous cliquez sur un marqueur, naviguez vers une nouvelle page et affichez des détails sur ce pays (API au choix). Vous devriez pouvoir revenir à l'écran principal (Google Map). Tout autre développement ou amélioration est un plus."

➰ Phase 1 : Retour aux consignes de base.➰

Création d'une application Flutter qui utilise Google Maps pour afficher une carte du monde avec des marqueurs pour chaque pays.

Les pays sont récupérés à partir d'une API REST et peuvent être sélectionnés à l'aide d'un menu déroulant.

Lorsqu'un pays est sélectionné, un marqueur est affiché sur la carte, et en cliquant sur ce marqueur, l'utilisateur est redirigé vers une page de détails du pays.

S'affichent alors le drapeau, le nom et les coordonnées de latitude et de longitude du pays. Il y a un ´bouton retour` pour revenir à la carte.

🔎 Aperçu de l'appli avant les améliorations

image image image image

Affichage de la carte centrée sur un point par défaut + marqueur : image

🪄 Phase 2 : Améliorations ✨

  • Ajout d'un thème de couleur : Jaune et Gris
  • Un cadre avec un fond coloré vient contenir les informations sur la seconde page.

🔎 Apperçu de l'appli avant remise de l'exercice:

image image image

Difficultés rencontrées :

  • Cacher la clé API

    J'ai travaillé pour une version web, n'ayant pas d'environnement ni Ios ni android, je dois trouver le moyen de cacher la clé avec un plugin. En attendant, elle se trouve dans le fichier index.HTML qui est lui-même mentionné dans le gitignore par sécurité.

  • Comprendre la syntaxe pour passer correctement les infos au JSON
  • Les erreurs de syntaxe
  • Gérer les couleurs grace au système de thème de couleur

➿ Améliorations futures pensées ➿

Pour aller au bout de l'idée initiale : faire une simulation à l'échelle de Bruxelles : en ajoutant les frigos solidaires hardcodés car pas d'API gratuite dispo. Source : https://www.bornin.brussels/categorie/frigo-solidaire/ image

♿ Accessibilité

  • Grandes polices : Rendre les widgets de texte avec des tailles de police spécifiées par l'utilisateur
  • Lecteurs d'écran : Communiquer un retour d'information oral sur le contenu de l'interface utilisateur
  • Contraste suffisant : Rendre les widgets avec des couleurs suffisamment contrastées

Dark mode

La récompense après des heures de galères pour fixer tous les bugs que j'ai créé :

image