Une petite application avec un grand objectif. C'est la meilleure façon de décrire Snap Trash, l'un de nos derniers projets et l'un des premiers que nous développons depuis la création du passer de Ruby on Rails à une pile JavaScript complète. Vous découvrirez ici cette application iOS, ainsi que le processus de développement sur la base de sa première version, qui sera bientôt disponible sur l'App Store.
SnapTrash est une application iOS qui vous permet de signaler les débris plastiques susceptibles de se trouver sur les plages en utilisant uniquement l'appareil photo de votre téléphone et
GPS. Chaque photo est téléchargée dans une base de données accessible depuis l'application et contenant l'emplacement de la photo, ses coordonnées et le nom d'utilisateur de la personne qui l'a téléchargée.
Cette base de données sera utilisée pour organiser des collectes régulières de plastique, contribuant ainsi à la propreté des plages et à l'absence de plastique dans les océans. Sa pertinence est aussi grande que son objectif, car huit millions de tonnes de plastique pénètrent dans l'océan chaque année, entraînant la mort de plusieurs espèces de faune marine qui en ingèrent quotidiennement.
L'utilisateur pourra obtenir une vue globale de toutes les photos signalées sur une carte intégrée à l'application grâce à un ensemble d'icônes intuitives. Bien que l'objectif principal de l'application soit d'organiser des collectes de grandes quantités de plastique, l'utilisateur est également encouragé à agir lui-même chaque fois que cela est possible.
Le défi de conception de SnapTrash était de le rendre aussi simple et intuitif que possible, sans perdre trop de temps dans des détails qui n'apporteraient aucune valeur ajoutée. Pour cette raison, l'interface est aussi simple et propre que possible, ce qui facilite la réalisation des tâches souhaitées. Après la connexion, il suffit de quelques clics pour signaler une photo, ce qui est aussi simple que de partager du contenu multimédia sur Instagram ou Snapchat.
Les sacs poubelles sur la carte représentent une galerie de photos prises à un endroit donné et si vous zoomez, vous les verrez réparties sur chaque photo individuelle. Les icônes et boutons restants ne prennent pas beaucoup de place sur l'écran et ont été conçus pour attirer l'attention de l'utilisateur sur l'objectif principal de SnapTrash : protéger l'océan du plastique.
Dès le départ, ma tâche était de créer une application mobile permettant aux utilisateurs de se connecter via Facebook et de prendre des photos de plastique, puis de les publier sur une carte. À l'époque, j'expérimentais encore Sangles (vous pouvez le trouver révisé ici) et il semblait adapté à cette tâche. Pour développer l'application elle-même, j'ai choisi React Native.
Pour pouvoir garder les photos visibles sur l'application, j'ai dû trouver un moyen de les stocker sur un serveur, avec toutes les informations pertinentes sur chacune d'elles. À ce stade, le côté serveur n'est pas visible pour les utilisateurs en général et ne fonctionne que comme un stockage de données.
Pour y parvenir, Strapi semblait être un bon outil pour le travail, avec une seule limite : il est destiné au développement d'applications Web. Par conséquent, le SDK ne fonctionne pas complètement dans React Native et ne vous permet pas d'utiliser le SDK pour une connexion native à Facebook. Dans tous les cas, la connexion Strapi à Facebook est désormais interrompue, car Facebook a rendu le rappel HTTPS obligatoire et Strapi ne génère que des URL de rappel avec HTTP.
À la fin, les fichiers image sont chargés sur le serveur Strapi, via le point de terminaison /upload, et le modèle photo fait référence à ce fichier. De plus, il enregistre le lieu où la photo a été prise et les informations de connexion de Facebook (jeton, e-mail et nom d'utilisateur). C'était tout ce dont j'avais besoin côté serveur.
En ce qui concerne l'application elle-même, ma première tâche était simplement d'afficher une carte, ce qui semblait assez simple. Cependant, si vous utilisez simplement l'outil React Native CLI, vous aurez de gros problèmes. Les instructions pour configurer react-native-maps sont incompréhensibles pour quelqu'un qui n'a pas d'expérience dans le développement pour Native. Heureusement, le Interface de ligne de commande Ignite dispose d'un plugin qui permet d'ajouter très facilement des cartes à votre application.
Pour obtenir la position de la photo, j'ai dû suivre la position actuelle de l'utilisateur, ce qui pourrait être plus facile à dire qu'à faire, compte tenu de la documentation disponible. Ici vous trouverez une mauvaise documentation sur la façon de procéder. Cependant, dans les deux cas, ils le font paraître beaucoup plus intuitif qu'il ne l'est en réalité.
Une fois la carte opérationnelle, j'ai dû résoudre quelques problèmes supplémentaires pour que SnapTrash soit prêt à être testé :
Au lieu de :
La solution consiste à pousser la position : vue absolue en dehors de Touchable :
Trouver les meilleures solutions à ces problèmes a été l'un des meilleurs aspects du développement de SnapTrash, car je pouvais comprendre exactement pourquoi il était essentiel que tout fonctionne le mieux possible. L'expérience utilisateur ne doit pas être gâchée par de petits problèmes qui éloigneraient l'application de ses objectifs.
SnapTrash était un excellent projet sur lequel travailler et c'est une application dont l'objectif est très important, car elle répond à l'un des problèmes les plus graves auxquels nous sommes actuellement confrontés au niveau mondial. En ce qui concerne le développement, c'était passionnant de travailler avec quelques nouveaux outils, car il s'agissait de l'un des premiers développements d'applications mobiles que j'ai réalisés. Voici les principaux enseignements que j'ai retenus de ce projet.
Dans l'ensemble, ces problèmes sont loin d'être résolus et SnapTrash sera bientôt disponible. L'expérience de son développement a été fantastique, mais je crois fermement que le résultat sera encore meilleur.
Si vous avez besoin d'aide pour le développement d'applications mobiles ou Web, notre équipe se réjouit de vous rencontrer ! Envoyez-nous un message ici!
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
Développeur complet, animateur de sondages sur les déjeuners et fier d'avoir un sens de l'humour très spécifique et rare qui est mal compris. Et il en va de même pour mes sondages du déjeuner, d'habitude.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
