Adresse du site https://stephsako-letsmeet.glitch.me/
npm install
LetsMeet est un site Web permettant à des utilisateurs de créer, partager et
gérer des événements et des idées de sorties, ainsi que de voir qui participe à
ses événements créés.
Certaines fonctionnalités du site sont accessibles en mode hors-connecté,
comme lister les événements et les visualiser sur la Map, mais il faut se
connecter pour accéder à son compte, créer un événement, lister ceux qu’on a
créés et lister ses participations.
CRUD est donc bien respecté:
- Create : création d’événements ;
- Read : liste de ses propres événements et participations ;
- Update : modifications des données relatives à son compte ainsi que ceux de ses événements ;
- Delete : suppression de ses événements et de ses participations.
La page principale liste tous les événements chronologiquement créés. Il suffit
de cliquer sur l'un deux pour le localiser sur la carte à droite.
Nous pouvons nous connecter et nous inscrire depuis cette page.
Une fois connecté, les boutons pour participer aux événements apparaissent alors dans la liste. Il est alors possible d’accéder à notre compte, au listing de nos événements et nos participations, et de nous déconnecter.
Voici les écrans de connexion et d'inscription.
- Le mail et le mot de passe doivent être renseignés pour se connecter.
- Pour s’inscrire, il faut renseigner au moins le prénom, nom, mail et mot
de passe, l’image de profil (URL demandée) étant facultative.
La chips dans la Navbar permet d'accéder au compte de l'utilisateur connecté
et de modifier ses informations personnelles, ainsi que son mot de passe.
- L’utilisateur peut voir en direct la modification de son image de profil en modifiant la valeur du champ.
Ce menu permet d'accéder à la page listant tous les événements créés par l'utilisateur. Il peut les modifier et les supprimer.
- Modification d’un événement :
Nous pouvons également lister nos participations à des événements et les visualiser sur la carte, ainsi que les annuler.
Enfin la fonctionnalité de créer un événement est disponible grâce au bouton flottant depuis la page principale.
- Il faut alors renseigner le titre, la description, l'adresse/lieu, la date prévue dans les champs texte. Pour localiser l'événement sur la carte à droite, il suffit juste de cliquer à l'endroit souhaité.
Enfin, la dernière icône nous permet de nous déconnecter et nous ramène à la page principale.
Nous avons déployé notre projet sur glitch.com.
URL Glitch du projet : https://stephsako-letsmeet.glitch.me/
- VueJS
- Vuetify
- NodeJS
- vue2-leaflet et leaflet pour l'affichage de la Map
Étant donné que nous avions déjà une bonne expérience avec MySQL et phpmyadmin grâce à notre DUT Informatique, nous avons hébergé une base de données sur AlwaysData.
Voici le schéma relationnel de la base de données :
- Les plus grandes difficultés pour nous ont été l'affichage et l’interaction avec le composant Map de vue2-leaflet en raison du peu de documentation.
- Comptes, Mes événements et Mes participations crashent en mode production sur glitch.com, uniquement lors d’un rafraîchissement de type CTRL+F5 de la page, alors que cela ne se produit pas en développement.
- Nous n’avons pas réussi à mettre en évidence le fait qu’un utilisateur ait déjà participé à un événement, lorsqu’il clique sur le bouton « Participer » dans la liste de la page principale, par un changement de design de ce bouton, bien qu’un message d’erreur apparaisse.