CAW1 2019 Projet de Jean-Charles MUGNIER et Siwen LUO : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Mise en oeuvre)
(Mise en oeuvre)
Ligne 110 : Ligne 110 :
 
- Cliquer sur les boutons Back et Forward pour naviguer par l'histoire de pages.  
 
- Cliquer sur les boutons Back et Forward pour naviguer par l'histoire de pages.  
  
=== Mise en oeuvre ===
+
=== Réalisation ===
  
 
Notre application possède 4 pages, donc 4 composants :  
 
Notre application possède 4 pages, donc 4 composants :  

Version du 10 juin 2019 à 20:47

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 toutes catégories.

A chaque tour de jeu, Quiquiz vous propose 5 questions couvrant différents domaines. Les réponses justes vous rapportent des points afin de figurer dans un futur classement. Vous pouvez jouer autant de tours que vous voulez, et également consulter votre classement parmi tous les joueurs !

Vous êtes le bienvenu pour proposer n'importe quelle question que vous trouvez intéressante, notre administrateur du site la consultera dans les plus brefs délais afin de l'ajouter aux questions existantes. Des cadeaux pourront être offerts si vos questions proposées sont acceptées !

Utilisateurs

Quiquiz est un jeu éducatif destiné à tout public. Toute personne peux créer son compte, s'identifier et jouer !

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

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

Cas d'usage

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. Seules les questions dans l'état Publiée seront jouables par les joueurs.

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

Un utilisateur pourra proposer une question et ses réponses vers l'administrateur. Ses questions proposées seront mises dans l'état En attente directement. Elles ne seront pas disponibles aux utilisateurs tant que l'administrateur ne les aura pas acceptées.

Conception

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 à l'aide de 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.

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

Front-end

Le front-end a été realisé en Angular 6, qui est une platforme et un Framework pour construire des applications en HTML et Typescript.

Quelques noations en Angular :

NgModules (app.module.ts) : Un NgModule déclare un contexte de compilation pour chaque composant intégré dans l'application. Chaque Angular application a un root module, appelé AppModule, qui représente le bootstrap méchanism et se charge de lancer l'application.

Composants : Chaque application Angular possède au moins un composant : le root composant, qui connecte une hiérarchie des composants avec DOM (page document object model). Chaque composant définit une classe, qui contient les données et le logique de l'application, et est associé avec une template HTML, qui donne une vue à être affichée dans l'environnement ciblé.

Des règles pour créer un composant : - Un composant ne gère que sa vue et ses données. Il n'a pas à modifier les données ou le DOM qui est en dehors de son scope. - Chaque composant a son propre cycle de vie. - Les composants communiquent entre eux via les évènements, il n'y a pas d'interactions directes.

Services : Pour les données non associées à une vue spécifique, que nous voulons partager avec les autres composants, ça vaut la peine de créer une classe service. Ce service créée, permet d'aller chercher les données et les injecter dans autant de composants possibles.

Routing : Le Angular Router offert un service qui est utilisé à définir un chemin de navigation parmi de différents composants dans l'application : - Entrer un URL dans l'adresse barre pour naviguer vers la page correspondante. - Cliquer sur les links pour aller sur une nouvelle page. - Cliquer sur les boutons Back et Forward pour naviguer par l'histoire de pages.

Réalisation

Notre application possède 4 pages, donc 4 composants :

- 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 navigation à chaque page est contrôlée par un onglet du menu principal, à l'aide du ANGULAR ROUTER. Ce système permet définir un chemin de navigation parmi différents composants de l'application.

Toutes les pages ne sont accessibles qu'après la connexion d'un utilisateur. Ainsi que la page Admin n'est accessible qu'à l'administrateur. Ces restrictions ont été réalisées à l'aide de deux services : auth service et auth-guard service". Le précédent va appeler le back-end pour vérifier que le mot de passe et l'identifiant entrés sont corrects. Le dernier va donc l'autorisation de l'accès à chaque page en fonction du rôle de l'utilisateur connecté (player ou admin). Par exemple, pour role player, l'accès à la page Admin n'est pas autorisé.

ngx-cookie de l'Angular a été utilisé pour le stockage de Cookies pour chaque utilisateur.

Backend

Création d'une API avec Express.js. L'adresse URL du serveur <adresse_serv> sera "http://localhost:3000".

Authentification

Créer un nouveau compte :

Requête POST sur <adresse_serv>/api/login/new

Paramètres : username (le nom d'utilisateur), password (le mot de passe)

Retourne un booléen success


Se connecter :

Requête POST sur <adresse_serv>/api/login/log

Paramètres : username (le nom d'utilisateur), password (le mot de passe)

Retourne id (de l'utilisateur), username' (le nom d'utilisateur), role (admin/user), score (son score)


Administration

Obtenir la liste de toutes les questions :

Requête GET sur <adresse_serv>/api/admin/getquestions

Paramètres : Aucun

Retourne un tableau composé de id (de la question), question (contenu de la question), answers (réponses séparées par des slashs), real_answer (vraie réponse), status (permet de savoir si la question est publiée ou si elle est en attente de validation)


Supprimer une question :

Requête POST sur <adresse_serv>/api/admin/deletequestion

Paramètres : id (de la question)

Retourne un booléen success


Modifier une question (permet également de la valider) :

Requête POST sur <adresse_serv>/api/admin/editquestion

Paramètres : id (de la question), question (contenu de la question), answers (réponses séparées par des slashs), real_answer (vraie réponse), status (permet de savoir si la question est publiée ou si elle est en attente de validation)


Joueur

Proposer une nouvelle question (doit être validée par un admin) :

Requête POST sur <adresse_serv>/api/play/new

Paramètres : question (contenu de la question), answers (réponses séparées par des slashs), real_answer (vraie réponse)

Retourne un booléen success


Récupérer une question aléatoire :

Requête GET sur <adresse_serv>/play/question

Paramètres : Aucun

Retourne id (de la question), question (contenu de la question), answers (réponses séparées par des slashs)


Vérifier la réponse :

Requête POST sur <adresse_serv>/play/verify

Paramètres : id (de la question), answer (réponse donnée par l'utilisateur)

Retourne un booléen correct_answer

Tests

Tests unitaires du back-end

Tests du front-end

Le testing automatisé avec Selenium et Python a été mis en place.

Installation :

- Installer le serveur Selenium : [installation tuto : https://selenium-python.readthedocs.io/installation.html]
- Installer l'API Python

Test de la page Connexion réalisé :

ÉTANT DONNÉ QUE
Je navigue sur la page de LogIn du site Quiquiz (http://localhost:4200/login)
ET QUE
Je remplis les formulaires l'identifiant et le mot de passe
QUAND
Je clique sur le bouton « Connexion »
ALORS
Je vais être redirigé(e) vers la page 'Jouer' (http://localhost:4200/play)

Le code du test se situe sous frontend/tests.

Pour lacner le test, il suffit de taper la commande suivante sous la répertoire du test :

python test.py

Installation

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

Gitlab

Copie des fichiers source depuis le dépot Gitlab de l'ensimag.

   env GIT_SSL_NO_VERIFY=true git clone https://gitlab.ensimag.fr/luosi/quiquiz.git
   cd quiquiz

Node.js

Installation de la dernière version stable de Node.

   sudo yum install -y gcc-c++ make
   sudo curl -sL https://rpm.nodesource.com/setup_10.x | sudo -E bash -

Installation d'Angular.js

Installation du paquet Node Angular

   sudo npm install -g @angular/cli

Lancement des serveurs

Lancement du serveur Angular.js :

   cd frontend/
   sudo npm install
   ng serve --open

Lancement du serveur API Express.js (Ouvrir un nouveau terminal et se positionner dans le répertoire quiquiz) :

   cd frontend/angular-node-express-api/
   sudo npm install
   node bin/www


Les serveurs possèdent les adresses respectives :

   localhost:4200/    
   localhost:3000/

Screencast

Voici le lien vers la vidéo de démo du projet Qquiz : [Lien démonstration : https://drive.google.com/file/d/1RIMERAa2YgkR9oeHAiDTJiwaG06GwStH/view]