CAW1 2018 Projet de Etienne BARBIER et Etienne DUBUISSON

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet Tambora
Cadre Projet Web (alternants 2A)
Page principale CAW1_Demonstration_Realisation

Équipe Etienne BARBIER, Etienne DUBUISSON
Encadrants Sébastien Viardot


Tambora est un volcan Indonésien. Le site Tambora propose une évolution du site Teide de l'ENSIMAG. Il permet la gestion des projets proposés aux étudiants ainsi que la gestion des équipes, soutenances, rendus des produits et deadlines.

Objectifs

L'objectif est de réaliser un site permettant de se connecter via les identifiants ENSIMAG puis de pouvoir créer et gérer des projets (enseignant) et de participer à ds projets ou rendre des produits (étudiant).

Objectifs à réaliser

  • Deux interfaces différentes : enseignant et étudiant
  • Créer un projet
  • Editer un projet
  • Consulter un projet
  • Créer une équipe
  • Valider une équipe
  • Rendre un produit
  • Connexion via le CAS de l'ENSIMAG
  • Tests backend
  • Tests frontend


Choix techniques

Node + Express JS

MongoDB

Vue JS

Modèle de données

ProjectWeb.png

API

Authentification via le CAS de l'ENSIMAG.

Attention API accessible uniquement par les utilisateurs authentifié

Tableau récapitulatif
Routes GET POST PUT DELETE
/users Renvoi la liste des utilisateurs
CR 200
admin only
Ajoute un utilisateur
CR 200 ou 403
- -
/users/<ID> Renvoie les informations de l'utilisateur <ID> s'il existe
CR 200 ou 404
- admin only
Modifie l'utilisateur <ID> s'il existe
CR 200 ou 404 ou 403
admin only
Supprime l'utilisateur <ID> s'il existe
CR 200 ou 404 ou 403
/projects Renvoi la liste des projets
CR 200
teacher and admin only
Ajoute un projet
CR 200 ou 403
- -
/projects/<ID> Renvoie les informations du projet <ID> s'il existe
CR 200 ou 404
- teacher and admin only
Modifie le projet <ID> s'il existe
CR 200 ou 404 ou 403
teacher and admin only
Supprime le projet <ID> s'il existe
CR 200 ou 404 ou 403
/teams Renvoi la liste des equipes
CR 200
teacher, admin and concerned student
Ajoute une equipe
CR 200 ou 403
- -
/teams/<ID> Renvoie les informations de l'équipe <ID> si elle existe
CR 200 ou 404
- teacher only
Modifie l’équipe <ID> si elle existe
CR 200 ou 404 ou 403
teacher only
Supprime l'équipe <ID> si elle existe
CR 200 ou 404 ou 403
/groups Renvoi la liste des groupes
CR 200
admin only
Ajoute un groupe
CR 200 ou 403
- -
/groups/<ID> Renvoie les informations du groupe <ID> s'il existe
CR 200 ou 404
- admin only
Modifie le groupe <ID> s'il existe
CR 200 ou 404 ou 403
admin only
Supprime le groupe <ID> s'il existe
CR 200 ou 404 ou 403
/documents Renvoi la liste des documents
CR 200
Ajoute un document
CR 200
- -
/documents/<ID> Renvoie les informations du document <ID> s'il existe
CR 200 ou 404
- Modifie le document <ID> s'il existe
CR 200 ou 404
Supprime le document <ID> s'il existe
CR 200 ou 404

Au lancement de l'application (npm start), cette API est accessible à l'url :

http://localhost:3000/api/

Organisation du back-end

Les middlewares et les routes sont définis dans app.js.

Les modèles sont définis dans le dossier app/models

Les contrôleurs sont définis dans le dossier app/controllers

Le fichier annuaire.json dans la racine du back-end sert à pallier à l'absence d’autorisation d’accès à l'annuaire de l'université. Il donne des informations sur les utilisateurs originaire du cas au moment de leur première conection.

Organisation des vues

Organisation des vues et composants de Tambora.

Toute l'application est basé sur la vue APP. Certaines données telles que les informations de l'utilisateur connecté sont stockées directement dans la vue principale.

Vues tambora.jpg

Description

Title_component

Correspond au header du site. Comprend l'image de tambora, la description ainsi que les boutons de connexion/déconnexion.

Main_vue

Vue principale. Affichage du tableau contenant les projets disponibles. Un enseignant pourra consulter un projet puis le modifier. Un étudiant pourra seulement consulter le projet.

Project_vue_creation

Interface de création/édition des projets

Project_tab

Menu de consultation des projets pour les étudiants. Permet de consulter la description du projet ou de rendre un produit.

Rendu_produit

Permet de rendre un produit demandé pour ce projet.

Description_projet

Toutes les informations sur le projet.

Images

Vue enseignant : liste des projets + Créer nouveau projet

Rendu

Tambora.png

Les objectifs se sont montrés assez ambitieux pour la durée du projet.

Le back-end est réalisé en grande partie (création user/projects/produits) mais le front-end nécessite d'être retravaillé.

Vidéo de démonstration

Les boutons de connexion Admin/Etudiant/Enseignant sont présents pour la démonstration. Ils permettent la connexion au site via des compte génériques pré-créés.

Vidéo de démonstration

Sources du projet

https://github.com/EtienneBarbier/ProjetWebEnsimag

Toutes les instructions

https://github.com/EtienneBarbier/ProjetWebEnsimag/blob/master/README.md

Comment installer l'environnement

  • Installer mongodb
  • Installer Nodejs et npm
  • Exécuter le script install.sh
  • Lors de la première utilisation (pour une démo), se connecter à l'URL : http://localhost:8080/setup afin de créer les utilisateurs génériques ainsi que les projets.
  • Si la connexion via les comptes génériques ne fonctionnne pas après le setup, se connecter à : http://localhost:8080/reset afin de remettre à zéro les utilisateurs génériques et les projets.

Comment démarrer le serveur

  • Le port 3000 doit être disponible
  • Exécuter le script start.sh

Futur