Mission Connectée

Présentation

Mission Connectée est un projet pour la mission locale du pays Villeneuvois, dans le cadre d’un projet informatique à l'ESIEA. Ce projet avait pour but de centraliser les informations sur les associations, entreprises et événements sur le territoire Villeneuvois et d’améliorer la visibilité, l’accessibilité et l’engagement des jeunes.

L’application développée était un site web interactif et possédait une interface claire, intuitive et adaptée pour les utilisateurs.

Plusieurs fonctionnalités étaient présentes :

• Une carte interactive permettant de visualiser géographiquement les structures et événements dans la région.
• Une barre de recherche sur plusieurs critères (adresse, nom, etc.).
• Un système de filtres en catégorie et sous-catégorie.
• Un espace personnel sécurisé pour les associations afin de gérer le profil, publier des événements ou modifier les informations.
• Une interface administrateur permettant à la mission locale de modérer les contenus, etc.

Contexte et objectifs

Pour la mission locale, les objectifs du projet étaient les suivants :

1. Améliorer la visibilité des structures locales auprès des jeunes.
2. Centraliser l’information pour faciliter l’accès aux événements.
3. Renforcer l’engagement des jeunes du territoire en leur proposant une interface attractive et intuitive.
4. Faciliter la gestion des contenus grâce à une interface administrateur ergonomique.

Pour l’équipe et moi, nous avions plusieurs objectifs :

1. Appliquer les compétences informatiques acquises à ESIEA dans un projet concret.
2. Travailler en conditions réelles avec un client, avec les contraintes et exigences associées.
3. Collaborer en équipe sur l’ensemble du cycle de développement (analyse, conception, développement, tests, déploiement).

Étapes

Avant de pouvoir commencer le développement, chaque membre de l’équipe a fait une maquette afin de pouvoir proposer plusieurs choix aux commanditaires. J’ai personnellement créé une maquette sous Figma. Après présentation des trois maquettes, les commanditaires n’ont pas retenu la mienne. J’ai aussi pris en charge la réalisation de l’UML.

Durant ce projet, j’ai été chargé de faire les pages front suivantes :

• Page d’accueil avec une carte interactive et un filtrage par structures ou événements, par nom, ville, adresse ou code postal ainsi que par catégories et sous-catégories.
• Agenda permettant de retrouver les événements en cours et les événements par jour.
• Annuaire affichant la liste des entreprises inscrites sous forme de cartes de visite avec un alphabet cliquable.
• À-propos regroupant les informations sur le site.
• Dashboard admin comprenant la gestion des catégories, les sous-catégories, les structures et événements. J’ai développé ces pages à l’aide des maquettes validées par les commanditaires.

J’ai utilisé Git et GitLab pour pouvoir partager mon code avec mon équipe.

Pour la page d’accueil, j’ai développé un service appelant l’API REST pour récupérer les structures, un pour récupérer les événements, un autre pour les catégories et un dernier pour les sous-catégories. J’ai également développé la logique de filtre, en sélectionnant une catégorie, il est possible de sélectionner une sous-catégorie qui lui est liée afin d’affiner sa recherche. Enfin, j’ai développé une barre de recherche permettant de retrouver les structures ou les événements avec le nom, la ville, l'adresse ou le code postal.

Pour l’agenda, j’ai utilisé le component d’Angular Material pour avoir la base de l’agenda, et j’ai fait quelques modifications pour pouvoir faire apparaître une indication visuelle sous les dates quand un événement commence ou est en cours sur celles-ci. J’ai récupéré les données en réutilisant le service existant de récupération des événements.

Pour l’annuaire, j’ai pu réutiliser le service déjà existant. J’ai développé la logique de l’alphabet cliquable. Quand l’utilisateur clique sur une lettre, on va se déplacer dans la liste jusqu’à atteindre le premier élément qui commence par la lettre cliquée, la liste étant triée par ordre alphabétique dès le début par la requête à la base de données. L’interface de l’annuaire est sous le format d’une pile de cartes de visite, on ne voit qu’une entreprise. En défilant vers le bas, une animation fait passer la carte de visite actuelle à l’arrière de la pile et laisse apparaître la nouvelle à l’utilisateur. À l’inverse, en défilant vers le haut, la carte de visite revient de l’arrière de la pile.

La partie "à propos" présente le but de la plateforme, l’équipe qui a développé le site (à la demande des commanditaires) et enfin les partenaires de la mission locale du pays Villeneuvois.

Sur le Dashboard admin, j’ai développé les services d’appel au CRUD pour les catégories et sous-catégories, et j’ai réutilisé les services existants pour les structures et les événements. Pour accéder à cette partie, l’utilisateur doit s’identifier, le mot de passe est haché en base de données avec l’algorithme Bcrypt.

Dans le but de pouvoir interagir avec les données contenues dans la base de données, j’ai mis en place plusieurs composants d’accès à la base de données :

• Les composants CRUD concernant les utilisateurs. Avec ce CRUD, il est possible de créer, de mettre à jour et supprimer un utilisateur, de lire un utilisateur en le récupérant grâce à son ID unique ou son email unique, de récupérer la liste complète d’utilisateurs.
• Les composants CRUD concernant les catégories. Avec ce CRUD, il est possible de créer, de mettre à jour et supprimer une catégorie, de lire une catégorie en le récupérant grâce à son ID unique, de récupérer la liste complète des catégories.
• Les composants CRUD concernant les tags. Avec ce CRUD, il est possible de créer, de mettre à jour et supprimer un tag, de lire un tag en le récupérant grâce à son ID unique et enfin de récupérer la liste complète des tags.

Afin que les commanditaires, futurs visiteurs et structures puissent être à l’aise avec le site et puissent l'utiliser au mieux. Plusieurs documentations ont été produites. J’ai personnellement produit la documentation administrateur en prenant les captures d’écran des pages et en décrivant le fonctionnement des actions possibles sur les différentes pages.

Les acteurs

J’ai évolué dans une équipe de 4 personnes, dans laquelle j'étais Scrum Master et développeur.

J’ai été en contact avec les commanditaires de la mission locale à chaque fin de sprint pour présenter le produit ainsi que par mail.