Contexte et Besoin
Qui est l’organisation ?
Ce projet a été réalisé en interne dans l’école de design de Nantes. C’est un établissement considéré comme étant une École Supérieure Privé organisé pars pour une association à but non-lucratif. Elle est en lien avec Nantes Université et est reconnue pars l’Etat en termes de diplôme. L’école possède plusieurs cursus de design allant jusqu’à bac +5 avec de nombreux partenariats avec des entreprises du monde entier. Elle porte les valeurs d’excellence et de reconnaissance internationale avec ses 5 studios internationale. En savoir plus …
Quel problème ou besoin métier ?
Ce projet est une refonte d’une page existante sur l‘intranet Néocampus de l’établissement. Néocampus est un outil qui rencontre plusieurs outils comme Microsoft, Notion, Projets d’écoles, profil élèves, cours en visioconférence…
La page actuelle affiche les salles disponibles et possède 2 moyens de les filtrer : la date (jour, mois, année, heure, minute) et une durée (heure-minute). Le problème actuel de cette page est qu’elle est :
- Requête l’ERP à chaque recherche avec un filtre.
- Inaccessible à tout profil (UI/UX).
- Lente dans son chargement
De plus quelques besoins métiers sont à ajouter pour des besoins utilisateur qui ont été remarqués après l’utilisation de ceux-ci :
- Modification et Ajout de filtre :
- Capacité (1 – maxdePlace)
- Le type de salles (ex : Amphithéatre, Atelier maquette, Réunion, ect…)
- Heure – minute séparer de jour-mois-année
- Temporalité fixe toute les 30 minl
Compétence professionnelle maîtrisée
C.01 – Gérer le patrimoine informatique
Le recensement du patrimoine informatique est exhaustif et réalisé au moyen d’un outil de
gestion des actifs informatiques
| Élément | Choix |
| Langages | Php 7, JavaScript, Css, Html |
| Frameworks | Twig, Symfony 4, Vue 2 |
| Base de données | ERP Aurion |
| Outils | PhpStorm, Extensions vue js tools dans le navigateur, Yarn run Watch, |
| Hébergement | Serveur Interne |
Les sauvegardes sont réalisées dans les conditions prévues conformément au plan de
sauvegarde.
Nous réalisons des versions sur différentes branche grâce à gitlab.
C.02 – Répondre aux incidents et demandes
Analyse de l’existant
Page Web actuelle
La refonte du projet commence par l’analyse de l’existant avec des points négatifs. Voici la page existante et les points problématiques :
Problème
1. Barre de navigation à droite
La barre de navigation devrait être mise à jour et coloriée en rouge pour indiquer a l’utilisateur ou est ce qu’il est dans le site. Ajouter un onglet avec la carte interactive. Dans l’ancienne version, elle n’est disponible que via des pages et pas grâce à la navigation directement.
2. Redirection vers la carte interactive
La carte interactive n’est pas utile à ce niveau, elle s’ouvre déjà quand on clique sur le code de la salle pour savoir sa localisation.
3. Affichage imagé de l’étage
L’image qui affiche la carte de l’étage n’est pas utile non plus, il existe une carte interactive. Les utilisateurs ne l’utilisent pas beaucoup et elle prend pas mal de place. De plus, elle est en premier dans la liste alors que ce n’est pas le but premier.
4. Affichage de la liste des Salles Libres
Le listing des salles libres se fait comme un texte tout a la suite. Cet affichage ne facilite pas la lecture de celle-ci (pas aérée comme affichage).
5. Visibilité du filtrage
La possibilité de filtrer n’est pas ouverte, on ne vois donc pas tout de suite que l’on peux filtrer et comment.
6.Imput de sélection temporelle
Choisir une date est très complexe, on a le choix trop de choix ; chaque minute, chaque heure, chaque jour, chaque mois, chaque année peut-être sélectionnée. Pour moins perdre l’utilisateur, on peut supprimer la plupart de ses choix en termes de temps.
7. Bouton rechercher et requêtage
Le bouton recherché réactualise la page en même temps de faire une nouvelle requête ce qui est très lourd. Il y a donc une forte possibilité de spam et de dénis de services sur l’ERP notamment. Autre problème avec ce bouton, c’est que le rechargement de la page est long et pour une recherche rapide à la minute près, c’est embêtant.
8. Filtre par étages
Filtrer part pour étages n’est pas forcément utile et négligé la plupart des salles. Cela prend en plus beaucoup de place dans l’interface.
Diagramme
Schéma de cas d’utilisation
C.03 – Développer la présence en ligne
Travail réalisé
Refonte visuelle
Pour comprendre l’architecture et le projet existant, j’ai eu à créer une maquette moderne, simple et utile. Cette maquette a été réalisée sur l’application Figma. L’application est directement liée à une architecture HTML et à un visuel CSS notamment avec les flexbox ou grid. Cela m’a permis de comprendre la logique de la page avec des blocs. De plus, nous avons réalisé une réunion d’équipes avec un UI / UX designer qui a pu nous diriger vers les bonnes pratiques utilisateurs.
Ci-joint ma maquette version mobile et ordinateur
Maquette Mobile
Maquette Ordinateur
Le Résultat
Voici le résultat de ma production, il est dynamique donc je vous mets ici une suite d’image qui montre les différentes interactions.
Plan de base
Filtres Supplémentaires
Les étages
La date
La durée
Le titre
On as fais le choix de prédéfinir des créneaux pour moins de divergences et de soucis dans le filtrage de la liste et le requêtage.
Il se mets a jour en fonction de la date de l’heure et de la durée rentrée
C.04 – Travailler en mode projet
Méthode utilisée
Pour le projet Néocampus, nous travaillons avec une méthodologie Agile. Le principe est de travailler en sprint (fonctionnalité) afin de la concevoir au mieux. Cette méthodologie permet également un travail en groupe rigoureux et fluide. Ci-joint le schéma du déroulement du développement de la fonctionnalité grâce à la méthode Agile
La durée d’un sprint est d’environ 4 semaines. J’ai été en stage durant 6 semaines, c’est long pour une fonctionnalité, mais j’ai été là aussi pour apprendre de nouveaux langages et framework.
Découpage des tâches
Le découpage de tache et donc de Sprint dans le projet se fais part des users Stories (cas d’utilisation). Une demande d’une personne de l’école se fait et c’est là que la tache se créait. Ça ne devient pas nécessairement un sprint, selon son importance, des fois, ce n’est juste qu’un problème pour certains utilisateurs.
Outils de suivi
Le suivi de taches se fait sur Trello, dans lequel nous avons plusieurs colonnes selon le statut de la tâche à effectuer
Nous réalisons des versions sur différentes branche grâce à gitlab.
Organisation personnelle grâce a TickTick
Puis pour chaque partie, j’ai défini les sous-grandes parties et toujours en estimant le temps que cela me prendra. Avec ces grands points de taches, je pouvais chaque jour établir une to do liste qui était mouvante.
En voici un exemple sur l’application TickTick
Cet outil me permet de créer des taches trier par étiquettes par importance grâce a une matrice Eisenhower
Je peux également lancer un timing pomodoro pour cette tache. Je peux ainsi connaître le temps que j’ai pris pour la réalisée.
C.05 – Mettre à disposition un service
C.06 – Organiser son développement pro
Problèmes rencontrés & solutions
| Problème | Cause | Solution |
| Chargement et requêtage de données systématiques aux changements du formulaires | Code de l’algorithme de tris des salles libres dans le Back | Création de l’algorithme en JS dans le Vue et non dans le fichier de services PHP en parallèle du contrôleur |
En php
En JavaScript
| Création d’un programme en Vue JS 2 | Aucune connaissance de ce framework | Apprentissage grace a ces sources : -> https://vuejs.org/tutorial/#step-1 -> https://v2.vuejs.org/ -> https://grafikart.fr/tutoriels/introduction-vuejs-2224#autoplay |
Preuve de l’apprentissage
| Gestion et manipulation des dates en JavaScript | Formatage de date et connaissance des méthodes | Utilisation de ces documentations : -> https://blog.devops.dev/vue-js-get-current-date-and-time-e748c5191025 -> stack-overflow -> https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date -> https://www.w3schools.com/js/js_dates.asp |
| Connaissances des valeurs et types de variables pour pouvoir les manipuler | Nous utilisations de certains outils ou méthodes | Utilisation du debogger Phpstorm et de l’extension VueJs devtools sur le navigateur. En terme de méthodes le console.log() avec un typeof() de la variable que l’on souhaite inspecter |
Ce que j’améliorerais
Pour aller encore plus loin dans ce projet je pense que l’on pourrais ajouté certaines fonctionnalité a ce projet comme :
- Intégrer des tests unitaires et fonctionnels pour sécuriser les évolutions futures.
- Migrer vers Vue 3 à terme pour bénéficier d’une meilleure gestion de la réactivité.
- Ajouter un système de sauvegarde des filtres préférés pour améliorer l’expérience utilisateur.