CAW1 2019 Projet de Tristan JULIEN et Guillaume GRAVALLON : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Initialisation)
(Webservice)
Ligne 79 : Ligne 79 :
  
 
== Webservice ==
 
== Webservice ==
 +
 +
Nous ne faisons pas appel à un webservice externe mais nous utilisons notre propre API REST.
  
 
== Gestion des rôles ==
 
== Gestion des rôles ==

Version du 29 mai 2019 à 09:02

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.

Elle a été developpée 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.

Spécifications techniques

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

Webservice

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

Gestion des rôles

  • Un utilisateur non enregistré peut seulement visionner la liste des annonces et accéder au détail des annonces.
  • Un utilisateur enregistré et connecté peut déposer des annonces.
  • Un utilisateur enregistré et connecté peut accéder à son profil, et voir la liste des annonces qui lui appartiennent.
  • Un utilisateur enregistré et connecté peut supprimer une annonce, uniquement s'il en est le propriétaire.

Architecture

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

Mean architecture.jpg

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.PNG

Installation

Outils nécessaires

  • Git
  • NodeJS
  • Angular-CLI
  • MongoDB

Initialisation

  • Récupérer le projet avec
    git clone https://gitlab.ensimag.fr/gravallg/lebonpiston.git
  • Se placer dans 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

  • 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