CAW1 2015 Projet de Quentin Pigne et Amadou Sall

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet Trophyz
Cadre Ensimag

Équipe Quentin Pigné Amadou Sall
Encadrants Sébastien Viardot


Présentation du projet

Description

Trophyz est une plate-forme en ligne centrée l'organisation de tournois et de compétitions de toutes sortes, tout cela d'une manière sociale et amusante. Elle permet à toute personne inscrite de participer à des compétitions, mais aussi d'en créer, soit en utilisant un modèle (un championnat de football, un tournoi de belote...), soit à l'aide de l'outil de création lui permettant une personnalisation sans limite. Il lui faut ensuite y inviter d'autres membres ou bien les laisser s'inscrire par eux-même. Une fois les inscriptions terminées, l'application se charge d'organiser les différents matchs selon un calendrier et les consignes laissées par l'organisateur lors de la création. À l'issu de chaque rencontre, les participants entrent leurs scores (modéré si besoin par l'organisateur en cas de litige), un classement est ainsi ensuite établi et des récompenses (trophées, badges...) peuvent être remis aux participants afin de venir enrichir leur page de profil.

En effet, chaque membre possède une page de profil recensant ses informations personnelles, les équipes qu'ils suit ou dans lesquelles il est membre, mais aussi d'autres informations comme un historique des compétitions auxquelles il a participé, des statistiques sur ses performances et pour finir une étagère sur laquelle sont entreposés les trophées et badges acquis au fil de ses participations sur la plate-forme. Chaque membre a la possibilité de suivre un autre membre ou une équipe afin d'être informé en direct de ses participations à des compétitions, de ses résultats...

Une gestion d'équipes est proposée sur la plate-forme, donnant la possibilité aux membres de créer des équipes permanentes, chacune avec sa page et son palmarès, dans lesquelles sont inscrits d'autres membres et qui peuvent ainsi participer aux compétitions par équipe.

Objectifs

Les objectifs de la plate-forme sont donc relativement simples. Le principal étant de fournir un service d'organisation de compétitions très généraliste, de par la diversité des compétitions qu'il permet d'organiser, et simple d'utilisation à travers son interface agréable, intuitive et les diverses automatisations qu'elle propose pour l'organisation (création des matchs, établissement du classement...). L'objectif secondaire étant d'être aussi social et amusant, en proposant un système de suivi de membres et d'équipes, de statistiques de performances et bien sûr de trophées et de badges, récompenses symboliques à la participation des membres aux diverses compétitions.

Contraintes

Ce projet se déroulant dans le cadre du cours de Construction d'applications WEB de 2ème année, un certain nombre de contraintes sont imposées :

  • Play Framework 2.x : Framework Java intéressant de par la facilité qu'il apporte à la création d'une application Web. Nous avons choisi d'utiliser la version 2.x pour son système de template Scala confortable à l'utilisation ainsi que la présence de l'ORM EBean, supplantant JPA présent dans les version 1.x.
  • Gestion de 4 rôles d'utilisateurs différents, chacun ayant des droits bien différenciés.
  • Site adapté à plusieurs terminaux dont une version mobile (utilisation de Bootstrap).
  • Mise en place de tests unitaires pour tester la partie modèle et contrôleur.
  • Mise en place de tests fonctionnels pour tester les vues (technologies de type selenium).
  • Utilisation d'un webservice

Cahier des charges

Cas d'utilisation

Pigneq caw1 use cases.png

Utilisateurs et Rôles

Visiteur du site

Un visiteur est un internaute navigant sur le site et n'ayant pas de compte ou ne s'étant pas encore authentifié. Il peut dans ce cas :

  • Consulter l'avancement des compétitions ayant une visibilité publique.
  • Consulter les pages de présentation et d'aide de la plate-forme.
  • Se connecter à l'aide de ses identifiants.
  • S'inscrire sur la plate-forme : Il devra pour cela renseigner son adresse email, l'identifiant et le mot de passe choisis ainsi qu'un certain nombre d'informations personnelles comme la date de naissance.

Membre connecté

Un membre connecté est un internaute qui s'est préalablement authentifié à l'aide de son identifiant et de son mot de passe. Il accède ainsi à son espace personnel depuis lequel il peut :

  • Consulter et modifier les informations relatives à son profil.
  • Consulter la liste des compétitions auxquelles il participe.
  • Consulter l'historique des compétitions auxquelles il a participé.
  • Consulter ses statistiques personnelles (nombre de matchs et de compétitions gagnés, totaux de points remportés...)
  • Consulter son étagère de trophées.
  • Consulter les pages des autres membres et équipes.
  • Suivre un membre ou une équipe.
  • Suivre une compétition afin d'être tenu informé de son avancement.
  • Recevoir des notifications concernant les membres et équipes qu'il suit.
  • Recevoir des notifications concernant les compétitions qu'il suit ou auxquelles il participe.
  • Répondre aux invitations à participer à des compétitions.
  • Créer et/ou rejoindre une équipe.
  • Créer une compétition.

Un champ de recherche lui permet d'accéder à n'importe quelle compétition. Il peut ainsi :

  • Consulter l'avancement de la compétition ou des inscriptions.
  • Demander à participer à une compétition.

Participant

Un membre authentifié devient participant d'une compétition à la suite de l'un de ces deux évènements :

  • Il a accepté une demande de participation venant d'un organisateur.
  • Il a fait une demande de participation qui a été acceptée par l'organisateur.

Il reçoit ainsi automatiquement les notifications concernant l'avancement général de la compétition ainsi que celles qui le concernent.

En navigant sur la page de la compétition, le participant peut :

  • Consulter l'avancement de la compétition à l'aide d'une timeline.
  • Consulter la liste des participants ou des équipes.
  • Consulter l'agenda de la compétition et la liste des matchs.
  • Consulter les résultats des matchs passés ainsi que le classement provisoire.
  • Enregistrer ses résultats dans les différents matchs qu'il effectue.
  • Signaler un litige sur un résultat en cas de désaccord avec son adversaire.

Organisateur

Un membre authentifié devient organisateur d'une compétition après l'avoir créée à l'aide du formulaire de création. Sur la page de la compétition, il a la possibilité de :

  • Consulter et modifier les informations relatives à la compétition.

À la suite de la création, le tournoi a le statut Inscriptions ouvertes. L'organisateur peut dans ce cas :

  • Fixer le nombre de participants désiré.
  • Inviter des membres à participer.
  • Répondre aux demandes de participations.
  • Répartir les équipes en cas de compétition par équipe.
  • Clore les inscriptions.

Une fois les inscriptions closes, le statut devient En cours et l'organisateur peut dans ce cas :

  • Consulter l'avancement de la compétition à l'aide d'une timeline.
  • Consulter la liste des participants ou des équipes.
  • Consulter et modifier l'agenda de la compétition et la liste des matchs.
  • Consulter les résultats des matchs passés ainsi que le classement provisoire.
  • Modérer un résultat en cas de litige entre deux participant.

Un membre authentifié peut être à la fois organisateur et participant d'une compétition. Il doit pour cela dans un premier temps créer le tournoi et ensuite s'ajouter à la liste des participants. Dans ce cas particulier, aucune invitation n'est envoyée et l'utilisateur est directement rajouté à la liste des participants.

Différents types de compétitions

Équipes ou Individuel

La première des caractéristiques principales d'une compétition est l'organisation des participants selon s'ils sont répartis en équipe ou non.

  • Compétition en équipes : Dans ce type de compétition, les participants sont répartis dans différentes équipes qui s'affrontent lors de matchs dans lesquels tous les membres sont concernés. Les victoires ou défaites réalisées en équipe contribuent aux statistiques de chaque participant au même titre qu'une victoire individuelle. Au cours d'une même compétition plusieurs cas sont possibles :
    • Équipes fixes : Les participants restent dans la même équipe tout au long de la compétition. Le classement est effectué en fonction des équipes et la victoire est ainsi décernée à une équipe entière et donc à tous ses membres.
    • Équipes tournantes : Les participants changent d'équipe au fur et à mesure de la compétition. Une victoire au sein d'une équipe fait remporter un certain nombre de points à tous ses membres et la victoire est individuelle, décernée au joueur ayant accumulé le plus de points.
  • Compétition en individuel : Dans ce type de compétition, les participants s'affrontent les uns les autres en accumulant des points. Ce qui permet ainsi d'effectuer un classement individuel à partir duquel un gagnant est déclaré.

Répartition en groupes

Dans le cas d'une compétition composée d'une phase qualificative suivie d'une phase à élimination directe, il peut-être nécessaire de répartir les participants dans différents groupes (aussi appelés Poules). Chaque poule est ainsi une sous-compétition dans laquelle tous les participants s'affrontent. Le classement au sein d'une poule permet alors d'effectuer des actions particulières comme par exemple qualifier un certain nombre de participants et disqualifier les autres ou bien effectuer une nouvelle répartition des participants dans de nouveaux groupes comme c'est le cas lors d'une Ronde Suisse.

Championnat

Au cours d'un championnat, tous les participants se rencontrent lors de matchs (aller-retour ou non) dont l'issue leur fait marquer un certain nombre de points. Le classement peut ensuite être établi en fonction de celui-ci, du nombre de victoires ou de la différence de score entre chaque participant.

Pigneq caw1 champ.png

Si des groupes avaient été mis en place, les participants peuvent alors être déplacés d'un groupe à un autre en fonction de leur classement. Par exemple les deux premiers accèdent à la ligue supérieur alors que les deux derniers sont relégués...

Élimination directe

Une élimination directe est composée de plusieurs manches dans lesquelles les participants s'affrontent lors de matchs dont l'enjeu est qualification pour la manche suivante. Lors de chaque manche, les matchs peuvent être tirés au sort ou non, l'ordre d'inscription des participants déterminant ainsi l'ordre des matchs.

Pigneq caw1 elim directe.png

Spécifications techniques

Diagramme de classes

Pigneq caw1 class diag.png

Authentification des utilisateurs

La gestion des différents utilisateurs et en particulier les pages et fonctionnalités auxquelles chacun à accès est un des aspects les plus importants de la sécurité de l'application.

  • Un visiteur n'a accès qu'à la page d'accueil et éventuellement aux pages des compétitions avec aucune autre possibilité que celle d'en consulter l'avancement. L'accès à toutes les autres pages de l'application doit donc lui être refusé.
  • Un membre authentifié peut quant à lui naviguer sur toutes les pages de l'application mais les fonctionnalités auxquelles il a accès sur chaque page doivent être modulé en fonction de son rôle (Est-il sur sa page de profil ou sur le profil d'un autre utilisateur? Est-il organisateur de la compétition, participant ou simple visiteur ?...)

Un membre s'authentifie au moyen du formulaire de connexion accessible via le bouton Connexion de la page d'accueil. Ce formulaire transmet au contrôleur d'authentification le nom d'utilisateur et le mot de passe qui ont été saisis. L'application vérifie ensuite si l'utilisateur est bien présent dans la base de données et si les mots de passe correspondent. Si c'est le cas, toutes les données de l'utilisateur sont récupérées et placées en variable de session. L'utilisateur est ensuite redirigé vers sa page de profil. Sinon, le processus d'authentification échoue et le visiteur est redirigé vers la page d'accueil où un message lui précise la raison de l'échec.

  • La gestion de l'accès aux pages est effectuée via la classe Secured, qui hérite de Security.Authenticator, module fourni par le framework Play dont le but est justement la gestion de la sécurité de l'application et, en l'occurence, des authentifications. Cette classe s'utilise à l'aide de l'annotation @Security.Authenticated(Secured.class) ajouté en début de chaque contrôleur que l'on souhaite protéger. Elle possède en particulier la méthode onUnauthorized, exécutée dès qu'un accès tente d'être fait alors qu'aucun utilisateur n'est présent en variable de session. Celle-ci effectue une redirection vers la page d'accueil, accompagné d'un message invitant l'utilisateur à s'authentifier.
  • La gestion des différentes fonctionnalités accessibles en fonction du rôle de l'utilisateur est fait directement via l'interface, en affichant ou en masquant des éléments à l'aide de @If(...) dont la condition porte sur l'utilisateur enregistré en session et en particulier sur le rôle qu'il a vis-à-vis de la page sur laquelle il est.

Organisation graphique de l'application

Charte graphique

L'un des objectifs de l'application étant d'être social et amusant, le design de l'application se doit de suivre cette thématique. En particulier en privilégiant l'utilisation d'un grand nombre de couleurs différentes et en osant les mariages inattendus (leur application devant se faire sur de grandes étendues plutôt que par petites zones). Les icônes et images sont de même à privilégier par rapport à l'utilisation de textes. Le design dominant étant le Flat design auquel vient se greffer des effets graphiques plus maximalistes comme des transitions avec fondus ou des effets de parallaxe.

  • Les couleurs sont très largement utilisées et nombreuses dans leur diversité. Aucune couleur dominante n'étant spécifiée, leur utilisation doit être équitablement répartie afin qu'aucune d'entre elles ne se détache. Les fonds de zones sont de couleur pastel tandis que les textes, icônes et images peuvent privilégier des couleurs vives.
  • Les polices de l'application sont d'une manière générale arrondies, sans-sérif et inspirées de l'écriture manuscrite. Elles sont au nombre de deux en fonction de leur emploi :
    • Les titres utilisent la police Pacifico, disponible sur Google Font, choisie pour sa forte ressemblance à l'écriture manuscrite.
    • Les textes utilisent la police Ubuntu, choisie pour sa lisibilité agréable.
  • Les icônes de l'applications servent à exprimer ce qui aurait pu être écrit sous forme de texte. Elles doivent être parlantes et non équivoques.

Template

Play Framework fournit un système de template utilisant le langage Scala. Un template est un "modèle" de base, que complète chaque page de l'application et qui assure une certaine cohésion graphique au sein de l'application.

  • Chaque page est composée d'un en-tête présentant le logo de l'application ainsi qu'une barre de navigation permettant l'accès aux grandes parties de l'application (page de profil, tournois...) et d'un pied-de-page présentant divers crédits et liens vers les réseaux sociaux liés à l'application. Le centre du template est l'endroit où est inclu le contenu de chaque page.
Pigneq caw1 template 1.png
  • Chaque page peut aussi posséder sa propre organisation. La page de profil par exemple, présente sur sa gauche un menu permettant d'accéder à des sous-parties de la page, comme les détails et la modification du profil, la liste détaillées des compétitions de l'utilisateur... Au centre se trouve une mosaïque composée de quatre tuiles présentant un résumé des diverses informations de l'utilisateur présentés sous forme de tableau ou bien d'une timeline. Les pages des tournois présenteront une organisation similaire, en particulier le menu sur leur gauche, permettant une navigation dans les diverses sous-parties de la compétitions (liste détaillée des compétiteurs, des matchs...)
Pigneq caw1 template 2.png

Gestion de projet

Méthode agile

Nous avons décidé de gérer le projet de manière agile. Dans ce type de gestion, il n'y a pas de chef de projet mais une forte communication entre les différents acteurs : développeurs et clients. Il permet une grande flexibilité de gestion et en particulier les retours du client permettent l'affinement du cahier des charges et des spécifications techniques au fur et à mesure du projet.

Le projet est découpé en plusieurs étapes appelées itérations qui correspondent à des jalons achevés par la production d'un livrable présenté au client pour qu'il fasse des remarques qui sont ensuite analysées par les développeurs afin de réorienter le projet dans une ligne de conduite qui correspond ainsi tout au long du projet à ce que souhaite le client.

Nous estimons la vitesse de travail à environ une itération toutes les deux semaines et ainsi estimons pouvoir livrer la 2ème itération à l'issu des quatre semaines de projet.

Itérations

  • 1ère itération : Conception complète de l'application : Explicitation de toutes les fonctionnalités et cas d'utilisation, conception des différents types de compétitions, modélisation des données, design de l'application...
  • 2ère itération : Développement d'une esquisse de la page d'accueil avec possibilité pour un utilisateur de se connecter. Gestion complète de l'authentification d'un utilisateur et sécurité de l'application. Développement d'une esquisse de la page de profil avec possibilité pour un utilisateur de modifier les informations de son profil.
  • 3ème itération : Développement d'une esquisse du processus de création d'un tournoi ainsi que sa page de gestion. Dans cette itération, il n'est possible de créer qu'un seul type de tournoi.
  • 4ème itération : Développement des interactions entre les membres et les compétitions et en particulier la possibilité d'inviter un membre à participer à une compétition et la possibilité pour un membre de soumettre une demande de participation.

L'application

Avancement du projet

Avancement général :
50 %

Conception

Fonctionnalités de l'application :
100 %
Différents rôles d'utilisateurs :
100 %
Différents types de compétitions :
100 %
Diagramme de cas d'utilisation :
100 %
Diagramme de classes :
100 %

Développement

Développement des modèles :
100 %
Développement de la page d'accueil :
80 %
Développement de l'authentification :
100 %
Développement du template :
80 %
Développement du profil utilisateur :
50 %

Installation de l'application

Les sources de l'application se trouvent ici et peuvent être téléchargées via le bouton Download ZIP.

Installation de Play Framework 2.x

Trophyz a été développé avec la version 2.x du framework Play (basé sur Activator 1.3.4). Celui-ci est téléchargeable à cette adresse. (La récupération de toutes les dépendances peut prendre un certain temps...)

Sur MacOSX, Play peut être installé via le gestionnaire de paquet Brew à l'aide de la commande brew install typesafe-activator.

Lancement de l'application

Pour lancer l'application, il faut se rendre dans son dossier et taper la commande activator run.

Le mode développement de l'application possèdent deux utilisateurs enregistrés :

  • Nom d'utilisateur : a
    • Mot de passe : a
    • Email : a@a.com
  • Nom d'utilisateur : b
    • Mot de passe : b
    • Email : b@b.com

Crédits