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!
Sommaire
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
- Parcourirs les clashs
- Suivre un clash en mode lecture seule
Utilisateur moyen
- Se connecter via son compte Google
- Parcourirs les clashs
- Suivre un clash en mode lecture seule
- Créer un clash
- Inviter un adversaire
- Donner son avis sur les arguments
- Voter pour un vainqueur
Clasher
- Se connecter via son compte Google
- Parcourirs les clashs
- Suivre un clash en mode lecture seule
- Créer un clash
- Argumenter
- Inviter un adversaire
- Donner son avis sur les arguments
- Voter pour un vainqueur
Modèle de données
Spécificités techniques
Architecture de l'application
API
Voici une documentation de notre API REST :
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 |
- | - | - |