CAW1 2019 Projet de Anthony RAFFY et Noé SAMAILLE

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

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.

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 %

Spécificités techniques

Architecture de l'application

API

Voici une documentation de notre API REST :

Tableau récapitulatif

Routes	GET	POST	PATCH	PUT	DELETE
/auth/google	Ajoute un nouvel utilisateur STATUS 200	-	-	-	-
/user/login	Affiche la page de connexion STATUS	-	-	-	-
/user/search/<username>	<userID> Renvoie les informations de <username> STATUS 200 ou 404	-	-	-	-
/clash/create	<userID> Revoie la page de creation d'un clash STATUS 200	-	-	-	-
/clash/<clashId>	<clashId> Renvoie les informations de <clashId> STATUS 200 ou 404	-	-	-	-
/clash	-	Authentification requise Crée un clash STATUS 200 ou 400	-	-	-
/clash/<clashId>/message	-	Authentification requise, Clash author ou Clash opponent requis Ajoute un message au clash <clashId> STATUS 200	-	-	-