CAW1 2019 Projet de Jean-Charles MUGNIER et Siwen LUO

De Ensiwiki
Révision de 7 juin 2019 à 22:08 par Luosi (discussion | contributions) (Screencast)

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

Équipe Jean-Charles MUGNIER & Siwen LUO
Encadrants Sébastien Viardot


Quiquiz est un jeu de quiz en ligne, vous permettant de tester vos connaissances générales, dans plusieurs catégories : Musique, Animaux, Sport, Politique, Cinema etc. Venez vous amuser avec Qquiz !

Présentation du projet

Description

Quiquiz est un jeu pour s'amuser et se cultiver. Vous y retrouvez de nombreux quiz de plusieurs catégories.

A chaque tour de jeu, Quiquiz vous propose 5 questions disposées de manière aléatoire, couvrantes de diverse domaines possibles. Toutes vos réponses seront enregistrées, et à la fin votre note sera affichée. Vous pouvez jouer autant de tours que vous voulez, et également consulter votre classement parmi tous les joueurs !

Vous êtes bienvenu(e) pour proposer n'importe quelle question que vous trouvez intéressante, notre administrateur du site va la consulter dans le meilleur délai. Des cadeaux seront offerts si vos questions proposées sont adoptées !

Utilisateurs

Quiquiz est destiné à tout le monde, ainsi, tous les utilisateurs pourront créer son compte, s'identifier, se déconnecter et jouer les questions avec son compte.

Le site dispose d'un administrateur, qui se charge de créer des questions de jeu, ainsi que de gérer toutes les questions disponibles ou proposées.

Deux catégories d'utilisateurs existent donc sous Quiquiz : l'administrateur et les joueurs.

Cas d'usages

L'administrateur du site se charge de gérer les questions. Il pourra visualiser toutes les questions disponibles et leur état ('Publiée' ou 'En attente'). Il est également capable de créer des questions, de supprimer et modifier toutes les questions disponibles, ainsi que de retirer les questions publiées ou publier des questions en attente. Les questions créés par l'administrateur seront immédiatement publiées. Seulement les questions en état "Publiée" seront jouables par les joueurs.

Tous les utilisateurs peuvent créer un compte, s'identifier, se déconnecter et jouer les questions sur le site.

Un utilisateur pourra proposer une question et ses réponses vers l'administrateur. Ses questions proposées seront mises en état "En attente" directement, qui ne seront que capable d'être publiées par l'administrateur.

Conception

Maquettes

Cas d'utilisation

Admin.png

L'administrateur pourra visualiser toutes les questions disponibles. Il est également capable de créer des questions, de supprimer et modifier les questions disponibles, ainsi que de retirer les questions publiées ou publier des questions en attente. Les questions proposées par les joueurs seront mises en état "En attente" directement.

Login.png

Tous les utilisateurs peuvent créer un compte, s'identifier et se déconnecter sur le site.

Contribution.png

Un utilisateur pourra proposer une question et ses réponses vers l'administrateur.

Jouer.png

En se connectant à son compte, un joueur pourra également jouer les questions.

Choix techniques

Quiquiz est une application web réalisée en plusieurs technologies : le back-end en Node Express, le front-end en Angular 6, et la base de données relationnelle en Sqlite 3.

Architecture de l'application

Archiluomu.png

La communication entre le back-end et le front-end se réalise en HTTP REST.

Front-end

Le front-end a ete realisé en Angular, qui ne gère qu’une vue et donne la possibilité aux utilisateurs d’interagir avec cette application.

Il possède 4 pages dans cette application :

- Page LogIn, permettant de s'identifier et de créer un compte
- Page Administration, permettant de gérer les questions
- Page Proposition, permettant de proposer des questions
- Page Jouer, permettant de jouer les questions

La page LogIn a été réalisée à l'aide de ngx-cookie en Augular. Deux services Auth et Auth_Guard, ainsi que CanActivate ...

La page Admin n'est accessible que pour l'administrateur.

Chaque page est représentée par un composant Angular. La navigation à chaque page est contrôlée par un onglet du menu principal, à l'aide du Angular Router.

Le Angular Router offre un service qui est utilisé à définir un chemin de navigation parmi différents composants dans l'application

Back-end

Structure de la base de données

Db.png

Tous les utilisateurs ont été stockés dans une seule table dans la base de données, dont l'attribut 'role' indique l'identifiant de l'utilisateur.

Mis en œuvre

Backend

Création d'une API avec express.js.


Authentification

Créer un nouveau compte : requête POST sur <adresse_serv>/api/login/new

Se connecter : requête POST sur <adresse_serv>/api/login/log


Administration

Obtenir la liste de toutes les questions requête GET sur <adresse_serv>/api/admin/getquestions

Supprimer une question requête POST sur <adresse_serv>/api/admin/editquestion

Modifier une question (permet également de la valider) requête POST sur <adresse_serv>/api/admin/editquestion


Joueur

Proposer une nouvelle question (doit être validée par un admin) requête POST sur <adresse_serv>/api/play/new

Récupérer une question aléatoire requête GET sur <adresse_serv>/play/question

Vérifier la réponse requête POST sur <adresse_serv>/play/verify

Tests

Tests unitaires du back-end

Tests du front-end

Installation

Voici les commandes pour pouvoir lancer tout ensemble de l'application :

Screencast

Voici le lien vers la vidéo de démo du projet Qquiz : Démonstration [1]