Home
CS POK MON Projets

Mobilité

Tags :
  • PROJET
  • 2023-2024
  • projets
  • mobilité
Auteurs :
  • Le Boursicaud Lucie
  • Rabachou Agathe
  • Kawtar Bahri
  • Le Bihan Paul
  • Schultz Mathis

L'objectif est de pouvoir centraliser les informations sur les mobilités afin que les étudiants puissent les filtrer à leur guise et obtenir les contacts nécessaires.

Introduction - définition du projet

Pour notre projet Do_It, nous avons voulu créer une plateforme permettant de recenser l'ensemble des mobilités des Centraliens, afin d'aiguiller les prochains élèves dans le choix de leur destination.

L'équipe du projet

Notre équipe pour mener à bien ce projet est la suivante :

Les missions

Voici les différentes étapes mises en œuvre durant ce projet :

Étude du besoin

La première étape afin de réaliser notre site web a été de faire une étude afin de définir clairement nos objectifs, de rencontrer les parties prenantes et de comprendre plus précisément les besoins et les opportunités.

Rencontre avec les Élèves

Afin d'obtenir une vision plus large sur notre projet nous avons voulu contacter les 1As, 2As et 3As pour savoir si le projet les intéressait, et s'ils seraient prêt à y accorder un peu de temps.

Contact des élèves cherchant une mobilité Les 1As sont les utilisateurs principaux ciblés par notre site internet. En effet, les données collectées et les informations mises en avant sont destinées majoritairement aux 1As. Nous avons donc voulu savoir quelles étaient les questions qu'ils se posent. Nous sommes donc allés directement à leur rencontre dans les couloirs de l'école pour les questionner sur notre idée de projet. Nous avons pu grâce à leur regard extérieur lister les informations et fonctionnalités primordiales à intégrer.

Contact des élèves revenant de mobilité Les 2As et 3As sont tout aussi importants, puisqu'ils vont devoir utiliser notre solution pour partager leur expérience sur leur mobilité et alimenter le site internet. L'enjeu pour nous est de savoir dans quelle mesure on peut les impliquer sans que la tâche ne soit trop complexe ou chronophage, le but étant qu'ils n'abandonnent pas la démarche de partage au milieu de celle-ci.

Exemples de questions pour mener des interviews Nous avons donc établit une trame de question afin d'entamer la discussion avec les élèves :

Rencontre avec l'administration

L'administration est au cœur de notre projet avec un double rôle :

Ainsi, nous avons contacté les différentes parties afin de comprendre quel pourrait-être leur rôle dans notre projet, dans quelle mesure il pourrait les intéresser et comment ils pourraient nous aider.

Voici quelques questions que nous avons pu leur poser et sujets dont nous avons discuté :

Voici le retour des différentes parties :

Gestionnaire des SMA et doubles diplômes : Olivier Boiron Le 5 octobre 2023, nous sommes allés rencontrer Monsieur Olivier Boiron pour lui présenter notre projet et le questionner sur le fonctionnement actuel. Voici les idées qui en ressortent.

Gestionnaire des SSE & TFE : Muriel Roche
Les SSE et TFE sont gérés comme des stages, donc via le site des stages, les informations liées à ces mobilités ne sont pas rassemblées et ne peuvent être partagées. De plus, le service ne souhaitant pas modifier ses méthodes, il est nécessaire que cette plateforme ne rajoute pas de travail, et que les informations sur la plateforme soient exactes et à jour. Donc il est nécessaire que le site renvoie vers le moodle.

Gestionnaire des Alternants entreprise : Guillaume Graton
Les mobilités des alternants sont gérées via d'autres services hors école, notamment le CFA, qui collecte les données à part et qui ne partage qu'un mail avec le BIP.

Gestionnaire des mobilité recherche : Daniel Mazzoni
Aucune information notable n'a été partagée.

Vincent Merval
Nous avons rencontré Monsieur Merval en vue d'échanger à propos des enjeux RGPD associés au projet. Ce qui est ressorti de cette réunion est qu'il n'est pas possible d'engager l'image de l'école sur un projet étudiant. En terme de sécurité si le projet est réalisé, il faut que les données soient protégées. La connexion CAS est une bonne idée et il sera nécessaire de faire une revue de code avec les services informatiques de l'école. De plus, il a insisté sur la nécessité d'avoir une pérennité dans le projet pour autoriser son déploiement.

Conclusion des rencontres

Tout d'abord, les élèves comme l'administration ont reconnu le potentiel et les intérêts de ce projet pour les centraliens. Cependant des contraintes sont apparues et ont aiguillé le projet :

Construction de la base de données

À la suite des différents échanges avec les élèves et l'administration nous avons donc pu relever les points les plus importants aux yeux des utilisateurs afin de rendre le service pertinent à l'utilisation. Nous avons tout d'abord mis à l'épreuve ces différentes données au près des utilisateurs pour étudier leur exhaustivité et pertinence. De ces recherches, nous avons sélectionné un ensemble de catégories de données que nous souhaitons récolter et exposer sur le site :

Questions spécifiques aux SMA et DD

Questions spécifiques aux SSE, Alternant et TFE

Ces données sont à la discrétion de l'élève, il choisit ou non de les partager. L'élève pourra donc remplir ces données sur le site via le formulaire dédié. Et sa mobilité sera donc accessible sur la page d'accueil via un ensemble de filtres.

Design du site web

Nous avons utilisé nos études antérieures ainsi que nos cours de design pour structurer notre projet et élaborer un cahier des charges afin de le mener à terme.

Persona, à qui s'adresse notre projet ?

Premier persona : l'élève de première année

Cet élève a besoin pour compléter son diplôme d'effectuer une mobilité internationale. Notre objectif va donc être de le guider en lui exposant les différentes possibilités en fonction de son parcours, de son budget et des expériences antérieures.

Second persona : l'élève qui rentre de mobilité

Cet élève n'a pas directement besoin de notre site. En effet c'est nous qui avons besoin de lui. Mais nous comptons beaucoup sur sa participation grâce à un effet de remerciement envers le service qu'il aurait pu utiliser les années précédentes.

Troisième persona : l'administration

L'administration a émit le souhait d'avoir des retours sur les mobilités, sur l'aspect expérience et sur les cours qui sont proposés notamment en SMA.

Cahier des charges

Ce paragraphe décris l'ensemble des objectifs à atteindre afin de considérer le projet comme abouti.

Fonctionnalités :

Critères de validation :

Planification

Voici le GANTT des tâches à réaliser afin de compléter notre projet, réparti en sprints tout au long de l'année. L'enjeu a donc été d'évaluer la durée de chaque tâche ainsi que les moyens techniques à mettre en œuvre afin d'atteindre nos objectifs.

Maquettes

Cette section regroupe donc les premiers designs et maquettes réalisés afin d'obtenir une expérience utilisateur optimale et pouvoir passer au développement en ayant une visualisation claire du projet. Ces différents modèles ont été conçu au travers des cours d'UX et d'UI via Canva et Figma.

Première maquette - Canva

L'intérêt de cette maquette est de mettre à plat les idées et les contraintes de charte graphique et de choisir la disposition d'ensemble du site.

Minimum Viable Project - Figma

Au travers des différents outils que propose Figma nous avons voulu construire la structure et les fonctionnalités du site web. De plus, cette maquette nous a permis de réaliser les différents tests pour vérifier que notre interface est intuitive.

Voici par exemple le parcours utilisateur d'un élève :

Deuxième maquette - Figma

Suite à cette première maquette, nous l'avions révisé pendant le cours d'UI. Cela nous a donc mené à ce design général sur lequel on s'appuiera lors du développement :

Développement

Une fois que nous avons assez d'éléments pour guider notre projet nous avons commencé le développement du site en local. Pour ce faire nous avons créer un GitHub dédié afin de pouvoir tous travailler sur le même projet.

Comment ça marche ?

Supposons qu'un utilisateur possède un compte et décide de se connecter au site. Il va d'abord s'identifier sur la page d'authentification à l'aide de son nom d'utilisateur et son mot de passe. Une fois connecté il arrive sur la page Carte des mobilités dans laquelle il peut naviguer sur la carte, filtrer et se renseigner sur chaque mobilité. Il peut ensuite se rendre sur l'onglet FAQ pour obtenir des réponses aux questions qu'il peut se poser lors de sa recherche de mobilité. Si l'étudiant veut partager son expérience de mobilité il se rend sur l'onglet Mon espace. Il peut alors remplir le formulaire dédié à l'aide de ses informations. Une fois soumis sa mobilité apparaîtra à condition qu'il ait bien accepté le partage de celle-ci. Si il se rend de nouveau sur Mon espace il aura accès à ses informations et pourra les modifier. Il peut aussi décider à tout moment de ne plus partager sa mobilité.

Points techniques

Le site a été codé en JavaScript à l'aide de Node.JS, Express, Sequelize et de nombreuses autres bibliothèques. Nous avons utilisé aussi BootStrap pour faciliter le CSS.

Pour réaliser notre site le point assez important résidait dans la carte interactive, sans celle-ci le site perd un gros atout. Pour ce faire nous avons utilisé Leaflet, une bibliothèque JavaScript spécialisées dans les cartes interactives.

Dans notre BDD SQLite on retrouve 3 tables :

Chaque mobilité est rattaché à un user et un user ne peut avoir qu'une mobilité. La table Locations permet d'avoir notre propre BDD des localisations des villes que l'on souhaite afficher sur la map. Lorsqu'un utilisateur ajoute sa mobilité, si la ville n'existe pas dans la table alors on l'ajoute en récupérant sa localisation à l'aide d'une API d'OpenStreetMap. On va ensuite chercher la localisation des villes via cette table là pour afficher les mobilités. De cette façon on utilise que les données nécessaires et rien de superflus, d'autant plus que les gros fichiers CSV que nous avions utilisé au départ n'étaient jamais traduits en Français mais étaient dans la langue du pays (en gros si on voulait afficher Pékin il fallait avoir le nom de la ville en Chinois...).

On a au total 5 fichier HTML :

A chaque fichier se rattache un fichier JavaScript et nous avons un fichier CSS global pour toutes nos pages.

Résultats

Nous avons un site qui fonctionne en local avec un système d'authentification simple, une carte interactive où l'on peut filtrer les mobilités par type,pays,et domaine, une FAQ contenant les réponses aux questions récurrentes et les liens vers les informations officielles de l'administration et un formulaire de fin de mobilité à remplir par les étudiants.

Voici les différentes pages :

Ecarts

  1. Design Le design n'est pas exactement comme la maquette Figma que nous avons élaboré bien que notre site s'en approche très fortement. Nous avons privilégié un apport de fonctionnalités à la place de rendre une copie conforme de nos maquettes.

  2. Hébergement Le site n'a pas pu être hébergé comme nous l'aurions voulu. L'administration nous a fait comprendre qu'ils ne souhaitaient pas s'impliquer dans notre projet par manque de moyens mais aussi vu la complexité de la mise en place de la politique de RGPD.

  3. Connexion CAS Comme notre site n'allait pas être hébergé, l'utilité de la connexion CAS n'était plus présente. Nous avons donc préféré faire l'impasse dessus et la remplacer par un système d'authentification simple indépendant.

  4. Promotion du site Nous aurions voulu promouvoir notre site aux élèves de l'Ecole notamment avec une vidéo qui aurait mis en avant les fonctionnalités du site, néanmoins en l'absence d'un site disponible pour tous nous n'avons pas effectué cette démarche.

Postérité du projet

Ce projet a été salué par de nombreux élèves qui sont intéressés par son aboutissement. Cette section a donc pour objectif de donner les clés pour reprendre le projet et le faire avancer.

Voici tout d'abord les défis à relever pour aller plus loin :

Ces différentes étapes n'ont pas été mises en œuvre dû à des restrictions administratives pour publier le site publiquement sur les serveurs de centrale pour des raisons de sécurité des données et de maintient du code dans le temps. Cependant, il est possible de publier le site pour des durées d'un an reconductible à condition d'effectuer les mises à jours de sécurité annuelles. Pour réaliser la connexion CAS, la première étape est de se renseigner auprès de Monsieur Brucker ou du Ginfo afin d'avoir un script pour implémenter la connexion CAS.

Héritage du code

Voici une présentation des outils mis en œuvre afin de réaliser le site. Plus de détails sont accessibles directement dans le code. Voici le Github pour accéder au code : Github du code De plus, pour réaliser ce projet nous avons choisit les outils suivants :