CAW1 2019 Projet de Anthony RAFFY et Noé SAMAILLE : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Présentation du projet)
Ligne 69 : Ligne 69 :
 
*Voter pour un vainqueur {{Avancement|0}}
 
*Voter pour un vainqueur {{Avancement|0}}
  
= Modèle de données =
+
= Screencast =
 +
 
 +
[https://drive.google.com/open?id=17XjVxuqYAO_XhK38YGHZy2qdm65KgC3p Notre Screencast]
  
 
= Spécificités techniques =
 
= Spécificités techniques =

Version du 10 juin 2019 à 20:27

Project schedule.png
Titre du projet ClashMcQueen
Cadre Projet Web

Équipe Noé Samaille, Anthony Raffy
Encadrants Sébastien Viardot


ClashMcQueen est une application WEB permettant à ses utilisateurs de proposer des clashs en s'affrontant sous forme de duel d'argumentaire. Ils peuvent également parcourir et suivre les clash en cours, proposer leurs réactions et voter pour le vainqueur!

Présentation du projet

Description

L'objectif de ClashMcQueen est de proposer une plateforme de débat interactive. Les utilisateurs peuvent s'y confronter sous forme de débats d'idées autour de sujets quelconques.

Choix techniques

Technologies utilisées

Côté serveur

Nous avons décidé d'utiliser le framework Node.js avec le module express pour développer notre application afin de ce former sur cette technologie, maitrisant déjà le framework python Django. Notre choix s'explique principalement du fait que Node.js est un framework modulaire permettant de développer simplement et rapidement des applications web complexes, largement utilisé aujourd'hui.

Côté client

Nous avons choisi le frameworks Vue.js comme framework côté client.

Base de données

La majeure partie des données de notre application étant liée au chat et n'ayant pas de modèle relationnel complexe, nous avons décidé d'utiliser MongoDB comme système de gestion de base de donnée NoSQL, d'autant que nous voulions monter en compétences sur ce type de technologie de base de données.

WebService

Nous avons fait le choix de l’authentification SSO Google comme service tier en utilisant le module Node.js passport. Ce choix nous permet de nous assurer de la sécurité de notre authentification en déportant cette fonctionnalité vers un service tier. De plus, cette méthode nous permet d’envisager une connexion via d’autres services (facebook, twitter, …) sans plus de difficulté et même de développer à terme notre propre brique d’authentification.

Gestion des rôles

Comme cité précédemment, nous avons choisi le SSO fourni par Google (protocole OAuth2) comme méthode d’authentification. Nous pouvons ainsi récupérer des informations utilisateurs ainsi que nous assurer de la sécurité de l’authentification. Nous utilisons ces données pour identifier les utilisateurs et les insérer dans notre propre base de données MongoDB. Les utilisateurs peuvent ensuite effectuer certaines opérations (cf. Cas d’usage) seulement s’ils sont connectés et/ou auteurs ou adversaire d’un clash. Nous vérifions ces droits à chaque appel d’API vers le serveur, nous assurant ainsi en permanence de la cohérence des droits de l’utilisateur dont la session est active.

Architecture

Nous utilisons l’architecture REST pour la communication client/serveur. De plus notre base de données est provisionnée via le cloud à Frankfurt (afin de limiter au maximum la latence réseau) pour des raisons de simplicité de l’environement mais aussi d’économie de ressource (plan gratuit du cloud MongoDB).

Intégration continue

Nous avons utilisé Gitlab CI disponible sur l'instance gitlab de l'ENSIMAG afin de faire tourner nos tests unitaires en continu lors de chacun de nos push sur la branche Master de nôte dépôt git. Cela permet de garantir la non regression de notre application sur l'ensemble des fonctionnalités implémentées (supposant bien sur de développer les tests unitaires pour chacune de ces fonctionnalités).

Cas d'usages

Visiteur anonyme

  • Inscription avec Google
    100 %
  • Parcourirs les clashs
    100 %
  • Suivre un clash en mode lecture seule
    100 %

Utilisateur moyen

  • Se connecter via son compte Google
    100 %
  • Parcourirs les clashs
    100 %
  • Suivre un clash en mode lecture seule
    100 %
  • Créer un clash
    100 %
  • Inviter un adversaire
    0 %
  • Donner son avis sur les arguments
    0 %
  • Voter pour un vainqueur
    0 %

Clasher

  • Se connecter via son compte Google
    100 %
  • Parcourirs les clashs
    100 %
  • Suivre un clash en mode lecture seule
    100 %
  • Créer un clash
    100 %
  • Argumenter
    100 %
  • Inviter un adversaire
    0 %
  • Donner son avis sur les arguments
    0 %
  • Voter pour un vainqueur
    0 %

Screencast

Notre Screencast

Spécificités techniques

Architecture de l'application

Architecture-clashmcqueen.png

API

Voici une documentation de notre API REST :

Tableau récapitulatif
Routes GET POST PATCH PUT DELETE
/auth/google
Ajoute un nouvel utilisateur
CR 200
- - - -
/user/login
Affiche la page de connexion
CR 200
- - - -
/user/search/<username> <username>
Renvoie la liste d'utilisateur dont le prénom/nom contient <username>
CR 200/404
- - - -
/clash/create
Revoie la page de creation d'un clash
CR 200
- - - -
/clash/<clashId> <clashId>
Renvoie les informations de <clashId>
CR 200/404
- - <clashId> - Clash author requis
Modifie <clashId>
CR 200/404
<clashId> - Clash author requis
Supprime <clashId>
CR 200/404
/clash
Récupère la liste des clash
CR 200/400
Authentification requise
Crée un clash
CR 200/400
- - -
/clash/<clashId>/message <clashId>
Récupère tous les messages de <clashId>
CR 200/404
Clash author ou Clash opponent requis
Ajoute un message au clash <clashId>
CR 200
- <clashId> - <messageId> - Clash author ou opponent requis - Message author requis
Modifie <messageId>
CR 200/404
<clashId> - <messageId> - Clash author ou opponent requis - Message author requis
Supprime <messageId>
CR 200/404

Tests

Nos tests unitaires utilisent le framework Node.js mocha et la bibliothèque d'assertion chai. Il nous permettent de tester nos controlleurs, modèles mais aussi le bon fonctionnement de notre API REST.

Pour lancer les tests, lancer un shell à la racine du projet et lancer :

mocha --exit --timeout 10000

Installation

Prérequis

  • Installer Node.js et npm en suivant les instrcutions ici.
  • Installer mocha
    • Sur Linux, ouvrir un terminal et exectuer la commande suivante : sudo npm install -g mocha

Base de données

Pour installer la base de données, rien de plus simple, vous n'avez rien a faire. Nous avons provisionné un service cloud mongoDB sur lequel vous n'avez qu'à vous connecter (cf. ci-après). Pour en provisionner un à vous, suivez ces instructions. Vous n'aurez alors qu'à modifier le fichier .env pour y remplacer la variable DB_URL par votre nouvelle URL de connexion.

De plus, s'agissant d'une base MongoDB (donc noSQL), pas besoin de script de création du modèle de données, le tout étant géré par nos modèles mongoose (dossier models/).

Projet

git clone https://gitlab.ensimag.fr/samailln/clash-mcqueen
cd clash-mcqueen

  • Installer les dépendances Node.js

npm install

  • Créer et modifier le fichier .env:

touch .env
vim .env

  • Y inserer le contenu suivant:
DB_URL = "mongodb+srv://clash-mcqueen-app:uoiccV7BPkYKgMQH@cluster0-uwwzt.mongodb.net"
DB_NAME = "dev"

GOOGLE_AUTH_CLIENT_ID = "1041111110026-5qgtesscsen5t666oake2r3bjpcolo0j.apps.googleusercontent.com"
GOOGLE_AUTH_CLIENT_SECRET = "vbnF-zNYUmeiRMCKYe8AloQL"
GOOGLE_AUTH_CALLBACK = "http://clash-mcqueen.ensimag.fr:3000/auth/google/callback"

Vous y êtes ! Tout est installé !

Lancement

Pour lancer le projet, exectuer la commande : npm start