Voir la source de CAW1 2015 Projet de Steven Durrenmath et Thomas Guntz

{{Projet Étudiant
 |cadre=Projet Web
 |titre=8-bit
 |equipe=[mailto:steven.durrenmath@ensimag.grenoble-inp.fr Steven Durrenmath] [mailto:thomas.guntz@ensimag.grenoble-inp.fr Thomas Guntz]
 |encadrants=[mailto:Sebastien.Viardot@imag.fr Sébastien Viardot]
 |image=[[Fichier:Logo_8_bit.png]]}}

== Présentation du projet ==

=== Description générale ===

Dans le cadre du cours de Construction d'Applications Web de la 2ème année à l'Ensimag, notre plateforme Internet dénommée '''8-bit''' est née lors d'un projet de développement web. Nous intéressant beaucoup aux divers composants de nos machines respectives, nous avons décidé de créer une plateforme web où les utilisateurs peuvent décrire leur configuration système, pour ensuite la comparer à celles de divers jeux vidéo.

== Cahier des charges ==

Certains contraintes nous ont été imposées pour la réalisation du projet :
* Utilisation d'un framework basé sur le patron MVC ou MVM : play 1.3.1
* Utilisation d'un gestionnaire de sources : git
* Gestion des rôles avec des utilisateurs différents ayant des droits et des rôles différenciés (2 rôles au minimum) : Gamer (joueur) et Provider (fournisseur)
* Site adapté à plusieurs terminaux dont une version mobile
* Mise en place de jeux de tests unitaires : pour tester la partie modèle et contrôleur.
* Souhaitable : Mise en place de jeux de tests fonctionnels avec des technologies de type Selenium.
* Souhaitable : Utilisation d'un web service 
* Optionnel : Abonnement RSS
* Optionnel : Partie du site en GWT ou au moins avec un framework type SmartClient

=== Cas d'utilisation ===

Le diagramme suivant décrit les différents cas d'utilisation pour les 2 acteurs pouvant interagir avec la plateforme '''8-bit'''.

[[Fichier:Usecases-8bit.png|500px|thumb]]

==== Utilisateur ====
Un utilisateur est soit un nouvel arrivant sur la plateforme '''8-bit''', ne disposant donc pas encore de compte, soit un utilisateur non encore identifié.
Un utilisateur peut se créer un compte auprès de '''8-bit''' en tant que '''Gamer'''. Les comptes '''Provider''' sont créés par l'administrateur.

==== Gamer ====

Un Gamer est un des deux types d'utilisateurs de '''8-bit'''. Un Gamer utilisera principalement '''8-bit''' pour renseigner sa configuration système pour la comparer à celles de ses jeux vidéo favoris. Pour cela, il peut mettre à jour sa configuration, chercher des jeux, comparer ses configurations et modifier son profil. Si un jeu n'est pas présent dans la liste, le Gamer peut faire une demande auprès de '''8-bit''' et un Provider viendra renseigner le jeu manquant.

==== Provider ====

Un provider est le 2ème type d'utilisateur de '''8-bit'''. Il n'est pas là pour comparer sa configuration avec celles des jeux, mais bel et bien pour permette aux Gamers de le faire. Le provider, par l'intermédiaire de l'interface '''8-bit''', peut ajouter des processeurs et des cartes graphiques, nécessaires pour que les Gamers puissent créer leurs configurations, mais aussi des jeux vidéo. Le provider peut soit ajouter un jeu lui-même, soit répondre aux demandes de Gamers.

==== Séquence ====

* Avant toute opération, le gamer ou le provider doit disposer d'un compte '''8-bit''' et être identifié
* Une fois identifié, le gamer peut :
** Recherche un jeu n'importe quand, même s'il n'a pas renseigné de configuration
** Ajouter une nouvelle configuration avec les processeurs/cartes graphiques présents dans la base (ajoutés par les providers)
** Comparer sa ou ses configurations avec celles des jeux
** Faire une demande de nouveau jeu 
** Modifier son profil (email/mot de passe/configuration/avatar)

* Une fois identifié, le provider peut :
** Ajouter des processeurs et cartes graphiques
** Ajouter un jeu vidéo
** Répondre aux demandes des gamers s'il y en a

== Modèle de données ==

Notre modèle de données peut se décomposer en 3 packages :
* Users : Ce package regroupe toutes les informations concernant les comptes des différents types d'utilisateurs.

* Games :  Ce package regroupe les informations concernant les jeux (nom/genres/développeurs..) et les demandes faites par les gamers.

* System Configuration : Ce package regroupe les informations relatives aux configurations associées aux Gamers et/ou aux jeux vidéo. 

=== Diagramme des classes ===

[[Fichier:Diagrammedeclasse-8bit.png|500px|thumb]]

==== Description des classes ====

* Package User 
** User : Interface regroupant les informations des utilisateurs ('''pseudo''', email, avatar). Un utilisateur est '''soit''' un gamer '''soit''' un provider.
** Gamer : Gamer hérite de User, il dispose donc des informations contenues dans cette dernière, mais aussi de configurations système et de genres de jeux préférés (voir association)
** Provider : Provider hérite de User, il dispose lui aussi des mêmes informations que User, mais n'a pas de configuration.

* Package Games
** Genre : Table contenant les différents types de jeux existants (liste non exhaustive : 'Action', 'RPG', 'Reflexion', 'Stratégie'...). Cette table est utilisée pour décrire les jeux vidéo ajoutés dans la base mais aussi les gamers.
** Game : Table regroupant les informations des jeux vidéo de la base ('''nom''', développeurs, date de sortie...).
** Request : Table listant les demandes de jeux vidéo effectuées par les gamers.

* Package System Configuration
** Configuration : Table regroupant toutes les configurations créées sur '''8-bit''', aussi bien les configurations des gamers que les configurations des jeux vidéo. Une configuration regroupe les informations suivantes : RAM / Espace Disque / Système d'exploitation / Processeur / Carte graphique.
** OS : Liste les différents Systèmes d'exploitation utilisés aujourd'hui pour la création de configuration (Liste non exhaustive : Windows XP/7/8/8.1, Mac OS..). Une configuration est créée pour être rattachée à un objet, elle ne peut exister seule ; de plus, une configuration est '''soit''' rattachée à un gamer '''soit''' à un jeu vidéo (information traduite par le XOR sur le diagramme de classes)
** VideoCard : Table de cartes graphiques utilisée pour la création d'une configuration. Cette table regroupe les informations suivantes sur les cartes graphiques : '''nom''', constructeur, vitesse de la mémoire, version de DirectX. Il existe de nombreuses autres informations concernant les cartes graphiques, nous n'avons pour l'instant choisi que les plus importantes pour faciliter leur comparaison.
** Processors : Table de processeurs utilisée pour la création d'une configuration. Informations concernant les processeurs : '''nom''', constructeur, fréquence de base, nombre de cœurs. Même remarque que pour les cartes graphiques, les informations concernant les processeurs sont nombreuses. Nous conservons pour l'instant un minimum d'informations pour pouvoir les comparer facilement.

==== Description des associations ====
* Users
** Héritage : Conformément au cahier des charges, '''8-bit''' ne gère pour l'instant que 2 rôles : Gamer et Provider. Ces deux types d'utilisateurs partagent principalement les mêmes informations de compte ('''pseudo''', email, avatar), contenues dans l'interface User. De plus, les deux types de rôles ont des actions bien distinctes, un gamer ne peut pas effectuer une action d'un provider et inversement. C'est pourquoi l'héritage de User traduit un "OU Exclusif". 

* Games
** Game -> Genre : Un jeu est défini par un ou plusieurs types de jeux pour qu'il puisse être retrouvé lors d'une recherche par type.
** Genre -> Game : Un type de jeu peut être attribué à aucun ou plusieurs jeux vidéo.

* System Configuration
** Composition : Un configuration est composée de plusieurs objets bien distincts : un ou plusieurs OS, une ou plusieurs cartes vidéo, un ou plusieurs processeurs. Ces objets possèdent leur propre table et peuvent exister sans être rattachés à une configuration. Mais une configuration ne peut être créée si et seulement si elle est composée de ces 3 éléments. Une configuration détruite ne détruit bien évidemment pas ses sous-éléments. Un sous-élément peut-être assigné à plusieurs configurations. 

* Users to Games
** Gamer -> Genre : Un gamer peut avoir plusieurs préférences de jeux vidéo. Ce qui permet à '''8-bit''' de proposer une recherche de jeux vidéo à partir des préférences du gamer. Un gamer peut avoir 0 ou plusieurs préférences de jeux vidéo.
** Gamer -> Request : Un gamer peut demander un jeu vidéo qui n'est pas référencé dans la base de '''8-bit''' pour pouvoir ensuite comparer sa configuration avec la sienne. Un gamer peut effectuer plusieurs requêtes, ou aucune.
** Provider -> Gamer : Un provider vient peupler la base de données de '''8-bit''' en ajoutant des jeux.

* Users to System Configurations
** Gamer -> Configuration : Un gamer peut ajouter une ou plusieurs configurations à son compte. Un gamer peut se retrouver sans configuration (ex: un nouvel inscrit)

* Games to Users
** Genre -> Gamer : Un type de jeux vidéo peut être associé à aucun gamer ou à plusieurs.
** Request -> Gamer : Une requête est faite par un unique joueur. 
** Game -> Provider : Un jeu est ajouté par un seul provider (pas besoin d'être 2 ! Et pas besoin d'ajouter le même jeu deux fois par deux providers différents..)

* Games to System Configurations 
** Game -> Configuration : Lorsqu'un jeu est ajouté, une configuration unique lui est associée qui correspond à sa configuration minimale requise.
** Request -> OS : Une demande porte sur un jeu pouvant être exécuté sur un unique Système d'exploitation. 

* System Configurations to Users
** Configuration -> Gamer : Une configuration est unique à un gamer.

* System Configurations to Games
** Configuration -> Game : Une configuration est propre à un seul jeu vidéo.
** OS -> Request : Un système d'exploitation concerne plusieurs demandes de jeux (ou aucune).

=== Authentification ===

L'authentification est basée sur le module '''Secure''' de Play que l'on a modifié de sorte que :

* Un utilisateur non connecté soit redirigé vers la page d'inscription lorsqu'il tente d'accéder à des pages protégées -> méthode '''checkAccess()'''

* Un ''Gamer'' ne puisse pas accéder aux fonctionnalités réservées aux ''Providers'', et vice-versa -> méthode '''check()''' et annotation '''@Check'''

* Les données de l'utilisateur connecté puissent être récupérées sur chaque page -> méthode '''loadCurrentUser()'''

* Un log trace la connexion et la déconnexion d'un utilisateur -> méthodes '''onAuthenticated()''' et '''onDisconnect()'''

Afin de protéger le mot de passe d'un utilisateur, on utilise [http://bcrypt.sourceforge.net/ '''BCrypt''']. BCrypt est un algorithme de chiffrement par blocs basé sur l'algorithme Blowfish. Il est résistant aux attaques par recherche exhaustive, aux attaques par analyse fréquentielle et aux attaques utilisant des rainbow tables. Il lutte également contre les attaques par dictionnaire et contre les attaques par force brute.

Cet algorithme utilise le salage qui consiste à concaténer le mot de passe avec une chaîne de caractères générée de manière statique ou dynamique (selon l'identifiant). L'implémentation Java de cet algorithme est très simple d'utilisation (deux méthodes '''hashpw()''' et '''checkpw()'''). On décide de hacher les mots de passe dans un premier temps puis de les stocker en base de données.

=== Formulaires ===

L'application 8-bit est constituée de nombreux formulaires : connexion, inscription, ajout de configuration, ajout de matériel...

Un soin particulier a été apporté à la réalisation de ces formulaires :

* Vérification Javascript côté client -> valeur prérentrée ou événement '''blur'''

* Vérification Java côté serveur -> messages d'erreur transmis dans le '''flash''' de Play

* Utilisation personnalisée des tooltips et des ''dialog forms'' de '''jQuery UI'''

* Design des champs et des boutons des formulaires avec des icônes, des styles, des animations...

* Affichage de popups avec '''sweetAlert''' -> '''success''' ou '''error'''


<gallery widths=150px>
File:Inscription.png | Formulaire d'inscription
File:Jeu.png | Ajout d'un jeu
File:Sweetalert.png | Popup sweetAlert
</gallery>

=== Responsive web design ===

Le responsive web design met l'accent sur le redimensionnement des objets au sein de la page pour des résolutions plus petites.

[[File:Responsive.png | thumbnail | right | A responsive page :D ]]

* En ce qui concerne la barre de navigation, pour des résolutions inférieures à <u>1100px</u> en largeur, les liens sont remplacés par les icônes correspondants. Lorsque la résolution est inférieure à <u>600px</u>, la taille des icônes et le padding sont adaptés de sorte à ce que l'ensemble des icônes soient présents sur la même ligne. De plus, lorsque seuls les icônes sont affichés, on change les animations au survol.

* Le contenu de la page est généralement sur deux colonnes occupant 35% de la largeur. Une troisième colonne centrée — de 30% de largeur — est prévue pour d'autres pages comme celle des informations du jeu avec configuration utilisateur. Lorsque la résolution est inférieure à <u>800px</u> en largeur, les colonnes deviennent des lignes, c'est-à-dire qu'elles sont situées les unes en dessous des autres (on efface les flottements).

== Validation ==

Une batterie de tests est fournie avec l'archive du projet '''8-bit'''.
Pour lancer les tests :
* Aller à la racine du projet et exécuter la commande : '''play test'''
* Ouvrir votre navigateur web au lien suivant https://localhost:9443/@tests
* Lancer les tests souhaités

=== Tests unitaires ===

Un fichier de tests unitaires par classe du modèle est fourni. Tous les fichiers de tests unitaires disposent des mêmes types de tests :
* Test de création d'un objet et insertion dans la base. Vérification de l'insertion.
* Insertion d'un objet dans la base, puis destruction de l'objet. Vérification de la destruction.
* Un objet est inséré dans la base, récupéré, modifié et ré-inséré. Vérification de la modification de l'objet.
* Tests des associations de la table. Par exemple : Pour la table Gamer (fichier de test GamerTest.java), un test est fourni pour tester l'association existante entre la table Gamer et Configuration. Un objet Gamer et un objet Configuration sont créés, puis associés, puis insérés dans la table. Vérification que les tables respectives sont bien peuplées et que la table relationnelle est cohérente.

Fichiers de tests unitaires fournis : 
* GameTest.java (Teste la table Game)
* ConfigurationTest.java (Teste la table Configuration)
* GamerTest.java (Teste la table Gamer)
* ProviderTest.java (Teste la table Provider)
* RequestTest.java (Teste la table Request)

=== Tests fonctionnels ===

* ApplicationTest : vérifie l'accès principal à l'application 

* SecureTest : vérifie qu'un utilisateur non connecté est redirigé vers la page d'inscription

Pour les autres aspects fonctionnels du site, on a préféré mettre en place des tests utilisant la technologie Selenium.

=== Tests Selenium ===

* Search.test.html 
** Se connecte en tant que Gamer
** Ouvre la page de recherche de jeux
** Recherche un jeu (une fois en tapant partiellement le nom du jeu, une fois en tapant entièrement)
** Ouvre la page du jeu, vérifie que les informations du jeux vidéo sont bien affichées (info du jeu + info de la configuration)

* Compare.test.html 
** Se connecte en tant que Gamer
** Ouvre la page de recherche de jeux
** Recherche un jeu (une fois en tapant partiellement le nom du jeu, une fois en tapant entièrement)
** Ouvre la page du jeu, vérifie que les informations du jeu vidéo sont bien affichées (info du jeu + info de la configuration)
** Vérifie également que les informations de sa propre configuration sont bien affichées
** Compare sa configuration avec celle du jeu en appuyant sur le bouton "Comparer" de '''8-bit'''
** Vérifie les informations présentes sur la page de comparaison

* Configuration.test.html
** Se connecte en tant que Gamer
** Ouvre la page des configurations systèmes
** Vérifie que la configuration du Gamer est bien présente
** Ajoute une nouvelle configuration en appuyant sur le bouton "Ajouter une configuration"
** Vérifie que le formulaire d'ajout est bien affiché
** Renseigne le formulaire
** Ajoute la configuration
** Vérifie que la configuration ajoutée figure bien sur la page 

* Manage.test.html 
** Se connecte en tant que Provider
** Ouvre la page des configurations système
** Vérifie que les processeurs et cartes graphiques déjà présentes dans la base sont bien affichés
** Ouvre le formulaire d'ajout d'un processeur
** Vérifie que le formulaire est bien affiché
** Renseigne le formulaire
** Ajoute un processeur
** Vérifie que le processeur ajouté apparaît bien sur la page
** Idem pour l'ajout d'une carte graphique

* Profile.test.html
** Se connecte en tant que Gamer
** Ouvre la page du profil
** Vérifie que les éléments de la page s'affichent bien (formulaire de changement de email/password et la configuration)
** Modifie son mot de passe
** Se déconnecte
** Se connecte à nouveau à l'aide de son nouveau mot de passe 

* Signup.test.html
** Essaye de se connecter
** Remplit le formulaire d'inscription rapide de la page d'accueil
** Vérifie que la page d'inscription complète s'est ouverte et que les infos du précédent formulaire ont bien été reportées
** Remplit le formulaire avec une erreur
** Soumet le formulaire
** Corrige son erreur
** Soumet le formulaire
** Se connecte

== Avancement ==

=== Fonctionnalités développées ===

'''Connexion / Inscription'''

 {{Avancement|95}}

''On pourrait encore ajouter la possibilité de choisir un avatar, mais le code serveur de vérification et de l'affichage est déjà écrit.''

==== Gamer ====

'''Gestion des configurations'''

 {{Avancement|80}} 

''On pourrait encore ajouter la possibilité de modifier ou supprimer une configuration.''

'''Recherche d'un jeu'''

 {{Avancement|100}}

'''Présentation d'un jeu'''

 {{Avancement|90}}

''On pourrait également ajouter une image.''

'''Comparaison de configurations'''

 {{Avancement|95}}

''On a obtenu une structure solide, on pourrait maintenant complexifier les critères de comparaison.''

'''Gestion du profil'''

{{Avancement|90}}

''On pourrait aussi ajouter la gestion des avatars.''

==== Provider ====

'''Gestion du matériel'''

{{Avancement|80}}

''On pourrait encore ajouter la possibilité de modifier ou supprimer un processeur ou une carte graphique.''

'''Gestion des jeux'''

''Idem.''

=== Design ===

{{Avancement|99}}

''Le design est très bien avancé. On ne peut plus ajouter grand-chose à part quelques images et vignettes pour les utilisateurs et les jeux qu'il faudra bien entendu personnaliser. Il y a un vrai thème et beaucoup de détails qui ont été longuement pensés. Le web service Flickr que nous utilisons pour récupérer des images et les afficher comme fonds d'écran sous forme de diaporama avec Vegas pourrait être réinvesti dans le reste du site. Néanmoins, il faut voir que Flickr est assez limité car il ne propose pas de vraies images de jeux vidéo. On ne pourrait pas s'en servir pour récupérer l'image d'un jeu par exemple, ce que nous voulions faire au départ. Un site comme Shutterstock propose le même type de web service avec des images adaptées et de très haute qualité mais il est payant.'''

=== Fonctionnalités non développées ===

Ces fonctionnalités seront développées prochainement :

* Suggestions de jeux par rapport à ses préférences (Gamer)
* Recherche de jeux compatibles par rapport à la configuration d'un gamer (Gamer)
* Demande de jeux (Gamer)
* Gestion des demandes (Provider)
* Commentaires ? (Gamer)

=== Tests ===

'''Tests unitaires'''

 {{Avancement|100}}

'''Tests fonctionnels'''

 {{Avancement|75}}

''Peu exploitables finalement, les tests Selenium sont plus adaptés.''

'''Tests Selenium'''
 {{Avancement|100}}

''Quelques difficultés avec Selenium qui était soit trop lent, soit trop rapide dans ses tests mais nous avons fini par trouver l'équilibre !''

== Documentation ==

=== Installation ===

Pour installer 8-bit :

* Télécharger le framework Play sur le [https://www.playframework.com site officiel] (version 1.3.x conseillée).

* Télécharger l'[https://www.dropbox.com/s/o3xczbgb5660b6l/8-bit.zip?dl=0 archive] du projet sur Dropbox.

* Extraire l'archive.

* Se placer dans la racine du projet.

* Lancer la commande play run (ou play test).

==== Initialisation de la base de données ====

Si elle est vide, la base de données est automatiquement chargée depuis le fichier '''conf/data.test.yml''' qui matérialise :

* Un utilisateur de profil '''Gamer''' dont l'identifiant est ''Thomas'' et le mot de passe ''password''.

* Un utilisateur de profil '''Provider''' dont l'identifiant est ''Steven'' et le mot de passe ''password. 

* Un échantillon de 6 jeux et 5 genres de jeux. 

* Un échantillon de 4 systèmes d'exploitation, 7 processeurs et 7 cartes graphiques.

* Les configurations matérielles de chaque jeu et une configuration pour le gamer '''Thomas'''.

'''<u>Remarque 1</u> : '''La base de données H2 est stockée sous forme de fichier dans le dossier '''database''' du projet.

'''<u>Remarque 2</u> : ''' Le provider a pour rôle d'ajouter ensuite d'autres jeux, processeurs et cartes graphiques.

'''<u>Remarque 3</u> : ''' La gestion des systèmes d'exploitation et celle des utilisateurs de profil '''Provider''' restent à la charge de l'administrateur.

==== Lancement de l'application ====

8-bit se trouve à l'adresse https://localhost:9443. 

* Passer les étapes de sécurité rappelant qu'il s'agit d'un certificat auto-signé (!)

* On peut ensuite se logguer avec l'un des deux utilisateurs disponibles, ou bien créer un nouvel utilisateur en s'inscrivant.

* Pour le reste, voir le screencast ci-après :)

=== Screencast ===

Deux [https://www.dropbox.com/s/driklpxlel6gt5y/Screencasts%208-bit.zip?dl=0 screencasts] téléchargeables sur Dropbox visent à présenter les fonctionnalités disponibles pour le moment. 

''Je suis gamer...''

* Ajouter un certain nombre de configurations.

* Rechercher un jeu et accéder à ses informations et sa configuration

* Comparer l'une de mes configurations à la configuration d'un jeu

* Modifier mon profil (email, mot de passe)

''Je suis provider... ''

* Gérer le matériel
** Gérer les processeurs
** Gérer les cartes graphiques

* Gérer les jeux