Ecovoit

Introduction

Bonjour, aujourd'hui je vais vous parler en détail de la réalisation du projet Ecovoit. Ce projet en tant qu'apprentie dans le développement web est une exellente opportunité pour y apprendre de nouvelles choses plus qu'intéressante.

Pour rappel, Ecovoit est un site web accessible via la platforme Toutatice visant à faire du covoiturage uniquement entre étudiant pour se rendre à leur établissement.

Tout d'abord, j'ai du utiliser un framework que je devais seulement commencer à apprendre dans ma deuxième année de BTS SIO, qui n'est d'autre que Symfony.

Au début, je trouvais cela impressionnant, vu que je n'avais pas encore touché à de framework et que je devais créer un site full stack sans connaitre les points basiques du framework (sauf le concept de Model/Vue/Controleur).

Mais, cela ne ma pas découragé, au contraire, cela m'a donné plus envie de me donner à fond car Symfony est un framework très interessant est surtout populaire.

Mise en contexte

Ce projet a été de basé réalisé avec le framework CodeIgniter 3. Plus tard, l'académie de Rennes a demandé à changer de framework pour passer de CodeIgniter 3 à Symfony.

Mon professeur de seconde année à donc demandé à mon professeur de première année si il n'y avait pas un étudiant pour réaliser ce projet pour un stage, ce qui résulte à mon professeur de première année de me proposer ce stage, ce que j'accepte.

La maquette

Malgré que le backend était fonctionnel, le frontend quant à lui avait une interface utilisateur peu intuitif résultat à une mauvaise expérience utilisateur. J'ai donc décidé de refaire intégralement le frontend pour proposer une meilleur expérience utilisateur sur ordinateur et téléphone.

Je me suis rendu sur Figma pour commencer les maquettes du site pour avoir un imperçu de ce à quoi le site allait ressembler pour le structurer correctment.

Voici ici 7 maquettes

• L'accueil
• Ajouter un trajet régulier
• Ajouter un trajet unique
• Rechercher un trajet
• Les réservations d'un utilisateur
• Les trajets publiés d'un utilisateur
• La messagerie

La base de données

Dans l'ancien projet, la base de données était composé d'aucune liaison (c'est à dire aucune contrainte de clé étrangère) ce qui est pour une base de données primordial pour fonctionner correctement.

J'ai donc pu reprendre un ancien modèle conceptuel sur le logiciel Looping grâce à mon professeur de première année pour comprendre les liaisons entre les tables.

Après des réajustements, j'ai commencé à créer les entités sur Symfony mais un problème se posa déjà... Comme vous pouvez le voir, il y a deux tables nommées Trajet Hebdomadaire et Trajet Ponctuel.

Pour faire la liaison, j'ai défini les trajets de Trajet Hebdomadaire et Trajet Ponctuel comme une entité de Trajet mais pour Chosir P et Choisir H, je ne pouvais pas faire la liaison via l'entité Trajet ! Car cela casserait le modèle relationel. J'ai donc du faire en sorte de faire une liaison via l'ID d'un trajet et non de l'entité. entre Trajet Hebdomadaire et Choisir H et vice-versa.

Après avoir résolu cette erreur, j'ai pu générer la deuxième et dernière version du modèle relationnel.

Maintenant, je comprenais mieux la base de données et comment intéragir avec celle-ci.

Le site

Avec la maquette et les entités prête, j'ai pu commencer à conçevoir les pages.

J'ai réalisé les pages dans cet ordre.

• Accueil
• Ajouter un trajet
• Rechercher un trajet
• La recherche
• Pouvoir réserver un trajet
• Voir nos trajets publiés
• Voir nos réservations
• Messagerie

Malgré que j'apprenais Symfony en même temps de faire le projet, j'ai très vite pris pied et j'ai su m'adapter rapidement à ce nouveau framework.

Cependant, j'ai eu affaire à des difficultés assez compliqué.

Tout d'abord, dans la page Ajouter un trajet nous avons la possibilité d'ajouter des étapes et gérer cela avec le form de Symfony n'était pas si facile que je le pensais.

Le problème: Je devais initilialiser dynamiquement les étapes si un utilisateur souhaitait ajouter des étapes.

La solution: Il y a sur Symfony un type qui s'appelle CollectionType et cela permet d'ajouter dynamiquement des champs qui seront envoyé correctement dans la requete POST.

Ensuite, sur la page recherche, pour afficher les détails d'un trajet je faisais l'utilisation d'un modal.

Le problème: Pour envoyer une requete POST pour pouvoir réserer un trajet, je devais initialiser un formulaire et pour ça j'utilisait la création de formulaire de Symfony. Cependant, il n'était pas possible de créer 2 fois le même formulaire.

La solution: J'ai donc abandonné l'utilisation de modal et je suis parti sur l'affichage d'une page indivuelle pour un trajet.

Ensuite pour les autres pages, je n'ai pas eu de problèmes majeurs donc on va directement passé à la partie Messagerie.

Messagerie

La fonctionnalité la plus interessante sur ce site est la Messagerie. En effet, je devais créer une messagerie car l'ancien projet en comportait une. Cependant, sur l'ancien projet, la messagerie intégrée n'était pas instantanée, on devait actualiser la page pour voir la réponse de l'interlocuteur.

Pour éviter de refaire la même erreur, j'ai lancé mes recherches pour trouver un outil permettant de faire la messagerie en temps réel possible. C'est là que je trouve le protocole open-source Mercure.

Pour la faire simple, Mercure est un protocole ou des utilisateurs s'abonnent à des topics sur un HUB et quand une information est envoyé sur un topic sur ce HUB, les utilisateurs abonnés à ce topic reçoivent en temps réel l'information (qu'on gère via Javascript).

Pour faire en sorte que la Messagerie soit sécurisée, j'ai utiliser un cookie d'autorisation nommé mercureAuthorazation et cela permet d'avoir un topic privé pour un utilisateur.

Utiliser le protocole n'était pas très difficile, ce qui l'était en revanche c'était la logique des messages. En effet, pour un affichage propre, j'ai du faire beaucoup de Javascript.

Voici la liste de ce que j'ai du programmer:

• L'envoie de message
• Animation de quand on écrit un message
• Cacher l'heure de l'ancien message si celui qui suit est de la même minute
• Faire passer le status du message à "Envoi", "Envoyé" et "Vu"
• Adaptation de l'affichage des informations quand un message est supprimé
• Trier les messages les plus récents dans la rebrique contact

C'est la partie qui ma demandé le plus de travail, mais celui qui m'a le plus amusé.

Les étudiants utilisant ce site web pourront discuter de manière fluide avec leur interlocuteur.

Authentification

L'authentification des utilisateurs pour ce projet est un peu enigmatique car je dois utiliser le protocole phpCAS. Cela permet de s'authentifier automatiquement à mon site web en étant déjà connecté avec les connexions Toutatice.

phpCAS n'est pas beaucoup documenté mais j'ai pu trouver un bundle spécial pour pouvoir l'intégrer à mon site web.

Déploiement

Pour mettre en ligne mon projet, j'ai du mettre les fichiers serveur sur le VPS OVH de mon établissement (qui sera l'établissement qui mettra en phase de test ce projet). Le site est en ligne sur le lien suivant https://btsrabelais22.fr/ecovoit

Conclusion

Ce projet m'a appris beaucoup de choses sur Symfony qui me serviront plus tard pour des projets personnels et professionels.

Les compétences que j'ai acquis:

• De l'autonomie
• Gérer son temps
• Apprendre un framework de manière efficace
• Chercher les bons élément dans la documentation
• Discuter avec mon maître de stage pour comprendre ses besoins