CAW1 2019 Projet de Tristan JULIEN et Guillaume GRAVALLON

De Ensiwiki
Aller à : navigation, rechercher
Lebonpiston.png
Titre du projet LeBonPiston
Cadre Projet Web 2AA 2019
Page principale CAW1_Demonstration_Realisation

Équipe Tristan JULIEN, Guillaume GRAVALLON
Encadrants Sébastien Viardot


LeBonPiston est un site de publication d'annonces entre particuliers spécialisé dans la vente de motos. Les utilisateurs peuvent y déposer des annonces de vente pour leurs motos, en précisant de nombreux critères spécifiques à ce domaine que les autres sites ne proposent pas.

Ce site a été developpé dans le cadre d'un projet de développement d'application web en deuxième année d'apprentissage à l'ENSIMAG, par Tristan JULIEN et Guillaume GRAVALLON.

Présentation du projet

Description

Lebonpiston.png

LeBonPiston est un site de vente en ligne entre particuliers spécialisé dans la vente de motos. Les utilisateurs enregistrés peuvent y déposer des annonces de vente pour leurs motos avec de nombreux critères spécifiques à ce domaine que les autres sites ne proposent pas. Les annonces sont visibles sous forme de liste, que l'on peut filtrer en fonction de critères tels que la marque, le modèle, ou de nombreux autres critères spécifiques à la moto qui font notre force. Un utilisateur enregistré peut supprimer son annonce quand il le souhaite ainsi qu'accéder à son profil où il retrouvera toutes ses annonces.

Toute ressemblance avec des applications existantes ou ayant existé ne saurait être que fortuite.

Cahier des charges

  • Gestion de la création / connexion de comptes.
  • Gestion d'un rôle d'utilisateur et d'un rôle d'administrateur.
  • Un utilisateur a accès à toutes les fonctionnalités CRUD pour son annonce.
  • Un utilisateur peut accéder aux différentes annonces.
  • Un utilisateur peut filtrer les annonces selon différents critères.
  • Un administrateur peut consulter les annonces en attente de validation.
  • Un administrateur peut valider une annonce.
  • Design responsive.
  • Tests unitaires.
  • Tests e2e.
  • Doc.


Cas d'utilisation

Visiteur:

  • Voir la page des annonces.
  • Filtrer les annonces selon différents critères.
  • Voir le détail d'une annonce.
  • Créer un compte.
  • Se connecter.


Utilisateur:

  • Voir la page des annonces.
  • Filtrer les annonces selon différents critères.
  • Voir le détail d'une annonce.
  • Se déconnecter.
  • Voir son compte.
  • Supprimer son compte.
  • Modifier son compte.
  • Poster une annonce.
  • Voir ses propres annonces.
  • Modifier ses propres annonces.
  • Supprimer ses propres annonces.


Administrateur:

  • Voir la page des annonces.
  • Filtrer les annonces selon différents critères.
  • Voir le détail d'une annonce.
  • Se déconnecter.
  • Voir son compte.
  • Supprimer son compte.
  • Modifier son compte.
  • Voir les annonces en attente de validation.
  • Valider une annonce.
  • Refuser une annonce.

Choix techniques

Modèle de données

LeBonPiston-ModeleDeDonnees.png

Webservice

Nous ne faisons pas appel à un webservice externe mais utilisons notre propre API REST.

Gestion des rôles

La gestion des rôles est réalisée en bloquant les routes angular du côté front et les accès API du côté back aux utilisateurs non authentifiés ou qui ne respectent pas certains critères.

  • Un utilisateur non enregistré peut seulement visionner la liste des annonces existantes et accéder au détail des différentes annonces. La vue de création d'annonce lui est bloquée et l'appel API correspondant également.
  • Un utilisateur enregistré et connecté peut, en plus des utilisations citées ci-dessus :
    • Déposer de nouvelles annonces.
    • Accéder à son profil, et voir la liste des annonces qui lui appartiennent. Un utilisateur n'accède pas au profil d'un autre utilisateur.
    • Supprimer une annonce, uniquement s'il en est le propriétaire. Le boutton de suppression n'est pas affiché si ce n'est pas le cas, et l'appel API est de toute façon bloqué.

Architecture

L'architecture de l'application suit l'organisation classique des technologies du "MEAN stack".


Mean architecture.jpg


MEAN est un ensemble de composants Open Source qui, ensemble, fournissent un cadre complet pour la création d'applications Web dynamiques, en partant du haut (code courant dans le navigateur) jusqu'en bas (base de données). La pile est composée de :

  • MongoDB : base de données de documents - utilisée par l'application back-end pour stocker ses données sous forme de documents JSON (JavaScript Object Notation)
  • Node.js: Environnement d'exécution JavaScript - permet d'implémenter le back-end de l'application en JavaScript
  • Express : infrastructure d'application Web back-end s'exécutant sur Node.js
  • Angular : cadre d'applications Web front-end. Exécute le code JavaScript dans le navigateur de l'utilisateur, permettant ainsi une interface utilisateur dynamique

Tableau d'API

API
Routes GET POST PUT DELETE
/annonce Renvoie la liste des annonces.
CR 200 ou 500
- - -
/annonce/user/:email> Renvoie les annonces de l'utilisateur à l'email :email.
CR 200 ou 500
- - -
/annonce/:id Renvoie l'annonce d'id :id.
CR 200 ou 500
- - Connecté et propriétaire de l'annonce
Supprime l'annonce d'id :id.
CR 204 ou 401 ou 500
/login - Connecte l'utilisateur et renvoie son token.
CR 200 ou 401 ou 404
- -
/register - Enregistre et connecte l'utilisateur et renvoie son token.
CR 200
- -

Démonstration

Une vidéo de démonstration de l'application est disponible en cliquant sur ce lien.

On y présente les fonctionnalités élémentaires de l'application LeBonPiston : afficher les annonces existantes, les filtrer selon différents critères, créer un compte, accéder à son profil, déposer une annonce, supprimer son annonce...

Video LBP.PNG

Installation

Outils nécessaires

  • Git
  • NodeJS
  • Angular-CLI
  • MongoDB

Initialisation

Dans un premier temps, il faut initialiser le projet en récupérant les sources, en installant les dépendances nécessaires, et en initialisant la base de données. Pour ce faire :

Récupérer le projet avec
git clone https://gitlab.ensimag.fr/gravallg/lebonpiston.git
Se placer à la racine du projet, et lancer
npm install
Puis dans le dossier /server, lancer également
npm install
Après avoir démarré mongoDB, se placer dans le dossier /demo et lancer
mongorestore --db lebonpiston /lebonpiston

Lancement

Une fois le projet initialisé, on peut l'exécuter et le tester. Pour cela :

Dans le dossier /server, lancer le serveur par la commande :
nodemon server.js
Dans un second terminal, à la racine du projet, lancer la partie Front par la commande :
ng serve

Le site est alors accessible à l'adresse "localhost:4200".

Rendu

Ce qui est demandé

  • Utilisation de framework → Oui, NodeJS/Express.
  • Gestion des rôles → Oui, un visiteur ne peut pas poster d'annonce, un utilisateur connecté peut poster une annonce et supprimer une annonce uniquement s'il en est le propriétaire.
  • Site adapté aux différents terminaux → Oui avec l'utilisation de Bootstrap.
  • Tests unitaires → Oui, mis en place et un premier fichier de tests.
  • Tests fonctionnels → Oui, mis en place et un premier fichier de tests.
  • WebService externe côté serveur → Non.
  • Optionnel: API REST → Oui.
  • Optionnel: Client Angular ou vue.js → Oui, Angular.
  • Outil: Depot GitLab → Oui.
  • Outil: Integration continue → Oui, lance uniquement les tests unitaires (à cause de problèmes de drivers sur les tests e2e).

Ce qu'il resterait à faire

  • Nous avons fait un fichier de test unitaire et un fichier de test e2e pour en comprendre le fonctionnement et découvrir toutes les technologies, il faudrait désormais couvrir l'intrégralité du code.
  • Par manque de temps nous n'avons pas implémenté les fonctionnalités d'administration prévues au départ.
  • Evidemment, tout pourrait être amélioré si ce projet était un vrai site, upload d'images, validation de création de compte par mail, plus de filtres etc...