IFT 3150 Jonathan Tannous

Le projet Mona est une application mobile qui permet de découvrir des oeuvres d'art public à Montréal. L'application utilise la géolocalisation pour permettre à l'utilisateur de découvrir des oeuvres d'art à proximité et de les ajouter à sa collection. En IFT 3150, je travaille comme développeur front-end avec la Maison MONA. En premier, je vais me familiariser avec le code existant et ensuite de travailler avec le reste de l'équipe pour améliorer/embellir l'interface du serveur.

Rapport hebdomadaires

Semaine 1 (4-10 Mai)

Première rencontre avec Lena et Mariama. On s'est fait connaissance et Lena nous a présenté Maison MONA et l'application MONA. Je vais travailler sur le côté front end de l'app, et Mariama va faire plus de travail côté données. J'ai déjà téléchargé l'application et j'ai pu uploader deux photos d'œuvres d'art public à Montréal. J'ai aussi contacté Christian pour lui demander de l'aide pour installer le projet sur mon ordinateur, et donc on se rencontre mercredi en ligne pour qu'il m'aide avec l'installation du code base. J'ai aussi téléchargé l'application Element pour communiquer avec les autres membres de l'équipe. Je ferai des changements de design sur ce rapport aussi au fur et à mesure que je travaille sur le projet.

Petite suggestion: Peut-on nous donner la chance à l'utilisateur d'ajouter ses propres retrouvailles (des trucs qui ne sont pas déjà dans l'app)? Je pense que ça pourrait être une bonne idée! (dependamment de combien de travail ça demande de faire ça, bien sûr)

Semaine 2 (11-17 Mai)

Rencontre avec l'équipe de développement. On a discuté des fonctionnalités à implémenter et des améliorations à apporter à l'interface utilisateur.

Après notre rencontre, Christian m'a aidé à installer le code base sur mon ordinateur.
On n'a pas pu installer la version Linux (code incompatible avec windows), fixé par Christian. J'ai vu les changements faits par Christian au serveur pour que ça marche sur windows, donc il fallait juste nelever les ";" des noms de fichiers.
Je vais aussi vérifier comment mettre le rapport en ligne et envoyer le lien à l'équipe sur Element. Durant la rencontre du jeudi 14 Mai, la plupart des tâches discutées ont été données à Mariama. Ce qui me concerne sera plus discuté Lundi prochain. J'ai demandé aussi à Frank de faire comme un tutoriel de GitHub ensemble (pour se motiver) pour mieux comprendre comment l'utiliser. J'ai pas encore reçu de réponse, et donc j'ai déjà essayé de l'utiliser et donc j'ai eu une petite idée de comment ça marche, mais je suis encore down pour faire un tutoriel ensemble (ça sera plus fun).

Update: J'ai fait un petit tour sur github tout seul, et j'ai réussi à faire un commit et un push. Je suis content de moi! J'ai pu mettre le rapport en ligne aussi, et je vais envoyer le lien à l'équipe sur Element.

Semaine 3 (18-24 Mai)

Pas de réponse de Frank. J'ai fait github tout seul, j'éspère que c'est pas mal. On a discuté des trucs à améliorer dans l'application, c'est réduit à trois options:

1. Faire une petite section FAQ (je pense qu'on peut commencer par ça vu que c'est simple à implémenter) et lier la page confidentialité à la page MONA au lieu de la page générique.
2. Coder pour que l'appli donne des notifications, par jour ou bien pour des oeuvres à proximité (ça en #2)
3. Ajouter des badges de complétion ou bien de "streaks" pour encourager les utilisateurs à utiliser plus souvent l'application

Les badges ont finalement été retenus comme priorité. Tâche n°1 : développer le système de badges. J'attends l'accès au Figma pour pouvoir commencer à travailler sur les designs des badges. J'ai aussi demandé à Christian si on a besoin de faire une session de code ensemble pour qu'on le fasse. Finalement, pas de travail sur les badges pour le moment, on fait d'autres trucs simples pour que je m'habitue au code base et à l'organisation du projet.

Semaine 4 (25-31 Mai)

J'ai reçu l'accès au Figma pour l'un des liens. Dernier travail "setup" va être de verifier un truc d'API avec Christian. Je suis pas mal à l'aise avec Github commands (YAY!), et j'ai finalement fait un pull request pour le projet Mona. Mon premier but de bien naviguer les documents et les fichiers du projet est atteint à l'aide de la clarité des noms des fichiers et du code bien organisé et parfaitement commenté. Merci Christian pour ça! Finalement, ma tâche de cette semaine etait de modifier la section de bouton "Photographier" pour qu'elle soit dans la section découverte.
J'ai appris beaucoup sur le code base et Vue, et j'ai pu faire ce changement.
Jusqu'à présent, le PR m'a pris le plus longtemps et fallait faire la issue avant de tout avoir modifié.

Semaine 5 (1-7 Juin)

Une petite faute de ma part, il fallait que la section découverte doit toute cliquable, et aussi que le bouton de photographier doit être dans la section découverte. J'ai fait les changements nécessaires pour que ça soit comme ça, et j'ai fait un nouveau PR pour ça. J'ai aussi fait un petit changement de design pour que le bouton de photographier soit bien positionné dans sa section. Et fallait faire la même chose pour la section AVANT de cliquer sur fiche complète(meeting was on 4 Juin). Je vais faire cela ici la semaine prochaine.

Je revoit un code fix que Christian a fait pour "Clear app data on logout". Tout va bien pour le moment, j'ai approuvé son request (aussi mon premier PR approval!).
Je voulais aussi participer à l'exposition Hochelaga mais j'aurai un meeting d'immigration important, et donc malheureusement je ne pourrai pas y participer. Cette participation allait m'aider à avoir des notes de terrain sur les gens et leur experience avec l'application MONA. J'espère que ça va bien se passer pour les autres membres de l'équipe qui y participent et que je receverai les updates! La prochaine rencontre sera le mercredi 10 Juin au lieu du Jeudi, je fera ces changements le Lundi et je vérifie si on a besoin d'autre chose, sinon je test l'app chez moi pour trouver d'autres fixes à faire.

Voici à quoi ressemble le bouton de photographier dans la section découverte après les changements:

Semaine 6 (8-14 Juin)

J'ai finalement accès au Figma complet. On attend que la personne en charge de Figma de revenir de vacances pour qu'on aie une confirmation finale sur le code du bouton. Les badges sont déjà dans l'appli.
Christian m'a aussi montré en théorie comment faire une release sur android studio, et la prochaine fois on le ferai ensemble pour que vois comment ça marche en personne.
Pour le moment, nous avons décidé que je vais travailler sur la "gameification" de l'application, et donc après une petite comparaison avec d'autres applications comme bixi et duolingo, je prépare une petite présentation pour expliquer comment on va faire ça:

• Je propose des notifications de différent types:
  1. Notifications hébdomadaires de progression / rappel de streak
  2. Informer les utilisateurs des oeuvres d'art à proximité (localisation)
  3. Après fermeture de l'application, comme l'app bixi
• Faire un widget simple pour l'application comme celui de duolingo. Le widget de MONA va être plus sur les oeuvres d'art à proximité

Personal user feedback

J'ai vu que "filtrer par distance" ne fonctionne pas assez bien, j'ai averti l'équipe et je vais voir si le groupe serveur prend en compte cette demande, ou si c'est un problème de chez moi.

Semaine 7- 8(15-28 Juin)

J'ai fait la présentation de mon idée de "gameification" de l'application MONA. Finalement, on va commencer avec notifications de géolocalisation. Vu que j'ai beaucoup d'examens, je n'ai pas pu commencer le travail, et donc à la 10ème semaine je vais commencer à travailler sur ça. Je progresse lentement, Je ne pouvait pas présenter l'idée à l'équipe Mobile car Christian fait face à des problèmes de démenagement, et Lena etait à Kingston pour le travail, ce qui fait que mon équipe au complet n'etait pas disponible pour la rencontre. J'ai fait une présentation à Anissa et Mariama en serveur puis pour le reste de l'équipe après leur retour le 25 Juin (Christian exclus).
En tout cas j'ai reçu des commentaires positifs sur mon idée, quelques suggestions de Lena sur Ionic, et je vais commencer à travailler sur ça à la 10ème semaine car la semaine prochaine je serai en vacances avec ma famille.

Semaine 9 (29 Juin - 5 Juillet)

Congé hors Montréal

Semaine 10 (6 Juillet - 12 Juillet)

• Distance entre l'utilisateur et les/l'oeuvre(s) d'art
• Densité d'oeuvres d'art / patrimoines non-photografiés dans la zone
• Si l'utilisateur a déjà photographié l'oeuvre d'art

Les détails sur la mise en œuvre est expliquée dans ce graphe de décision de manière simple:

Semaine 11 (13 Juillet - 19 Juillet)

Après avoir fait des recherches sur les notifications de géolocalisation, j'ai trouvé que chez Apple, c'est un peu plus compliqué que chez Android, et donc je recherche les meilleures pratiques pour implémenter ces notifications. En tout cas, j'ai commencé à travailler sur les notifications de géolocalisation pour Android, et je vais continuer à travailler sur ça pour la semaine prochaine. J'ai aussi fait un petit test pour vérifier si les notifications de géolocalisation fonctionnent sur Android, et ça fonctionne bien.

Problème rencontré: J'ai trouvé que les notifications fonctionnent seulement s'il y a beaucoup d'oeuvres d'art dans la zone, dans une proximité spécifique. Si j'ai je temps, je vais régler ce problème avec l'aide de Christian CETTE SEMAINE. Sinon début semaine prochaine.
Voici les photos de mon progrès! Je suis super fier de moi-même!

Semaine 12 (20-26 Juillet)

Notifs codage

Les notifications sont presque complètement fonctionnelles mais uniquement en mode foreground (dans l'application). Lors de notre réunion de conception avec Barbara, qui vient tout juste de revenir de vacances, nous avons finalisé le design des notifications : nous avons décidé d'intégrer une mascotte MONA amicale et de supprimer le doublon "MONA" qui apparaissait deux fois dans chaque notification. Cependant, les notifications en arrière-plan ne fonctionnent pas encore et nécessitent davantage de travail. Lors de cette même réunion de conception, nous avons également prévu d'ajouter une nouvelle page dans l'application dédiée aux préférences d'horaire des notifications. Par défaut, cette plage sera définie de 21h à 9h (heures de silence), mais les utilisateurs pourront personnaliser ces horaires selon leurs préférences personnelles. J'attends la confirmation de l'équipe de conception pour finaliser le design de cette page, après quoi je pourrai commencer.

Documentation et recherche:

Test et problème rencontré

Semaine 13 (27 Juillet - 2 Août)

Notification foreground complétée + background notifs code:

Cette semaine, j'ai concentré mes efforts sur recherche pour implémenter les notifications en arrière-plan sur Android et Apple (Apple sont beaucoup plus restrictifs), en parallèle au travail sur foreground. J'ai créé la documentation interne dans backgroundNotifications.ts décrivant son architecture, puis procédé aux modifications nécessaires des fichiers de configuration spécifiques à chaque plateforme : le Info.plist pour iOS et le AndroidManifest.xml pour Android afin d'activer les services de localisation persistants.

Recherche et implémentation:

UX/UI discuté avec Barbara:

J'ai obtenu l'accès à Mobbin où j'ai effectué des tests benchmarks avec deux applications de référence : Slack pour analyser leurs interfaces de préférences de notifications modernes et l'application native d'alarme iOS pour étudier leurs systèmes de timers et de sélecteurs d'horaires. Ces analyses ont été cruciales pour comprendre les meilleures pratiques en matière d'UX pour les préférences de notifications utilisateur.

En parallèle, j'ai utilisé Canva pour créer une maquette détaillée de l'interface des préférences de notifications de l'application Mona, en intégrant nos mascottes Figma existantes. Cette maquette permet de visualiser comment les éléments de notification préférés (mascotte MONA, emojis, texte explicatif) s'intégreraient harmonieusement dans l'expérience globale de l'app, tout en respectant les principes d'accessibilité et de clarté.

Semaine 14 (3-9 Août)

Notifications arrière plan: implementation et testes

Cette semaine, j'ai finalisé l'implémentation des notifications en arrière-plan sur Android. J'ai testé le code sur un appareil simulé sur Android Studio et confirmé que les notifications se déclenchent correctement même lorsque l'application est en arrière-plan ou fermée. J'ai également documenté les étapes nécessaires pour configurer les services de localisation persistants sur Android, afin que l'équipe puisse reproduire le processus sur d'autres appareils.

Voici les images de la notification en arrière-plan sur Android: en plus, les permissions dont là officiellement! Si l'appli est nouvellement téléchargée, l'utilisateur va finalement recevoir une notification pour accepter les permissions de géolocalisation ("Always allow") et de notifications. Vu que dan mon simulateur, l'application est déjà installée, j'ai dû faire une activation dans "Settings → Apps → Mona → Permissions" pour les activer:

pour jonathan : ADD PHOTO BACKGROUND LOCATION ICON