CAW1 2015 Projet de Jean Froment, Romaric Delaunoy et Florent Jamet

De Ensiwiki
Aller à : navigation, rechercher
Crew.jpg
Titre du projet CrewThis
Cadre Projet Web

Équipe Romaric Delaunoy Florent Jamet Jean Froment
Encadrants Sébastien Viardot


CrewThis est notre projet de Web (cuvée 2015). Ce site a pour but de donner la possibilité à un groupe de personnes (apppelé "Crew") de travailler ensemble, et de partager un agenda, un mini-forum, des informations...


Présentation générale du projet

CrewThis est une plateforme sociale dont le but est de regrouper des personnes ayant déjà une affinité. Nous proposons une interface agréable et simplifiée pour créer des groupes et communiquer plus simplement. Les utilisateurs peuvent créer des groupes (Crews) et inviter d'autres utilisateurs à en faire partie. Les utilisateurs peuvent créer des événements et y inviter plusieurs personnes. Ils peuvent également discuter sur des canaux dédiés. Chaque membre du Crew peut avoir un label (trésorier, président, simple citoyen, ...) et des permissions peuvent accordées en fonction d'un rôle (Administrateur, Utilisateur, Visiteur).

Objectifs

Nous avons divisé le travail en trois principales parties. Plusieurs milestones sont disposées à chaque incrément.

Premier incrément

Ici, le but est d'obtenir un site fonctionnel. Au programme :

  • Mise en place du site et de la base,
  • Choix et installation des modules nécessaires au bon fonctionnement du site (rendu graphique souhaité, base de données, dépôt Git...).
  • Création de l'interface de connexion, de l'inscription, de la déconnexion, de création de Crews.

Second incrément

Les premières fonctionnalités vont être implémentées à cette étape.

Dans un premier temps,

  • Ajout des interfaces de gestion diverses (profil personnel, profil d'un Crew,...),
  • Implémentation d'options de "confort" et de sécurité (vérification des droits, conservation des cookies, amélioration du design,...).

Dans un second temps, les fonctions nécessaires à l'utilisation du site vont être ajoutées. Notamment :

  • L'ajout du module de discussion,
  • L'ajout de nouveaux membres à un Crew,
  • La création et éventuellement la gestion d'événements.
  • L'exploration d'un catalogue de crews dits "publics", libre d'accès sans invitations par un de ses membres.
  • L'administration d'un crew (renommer, changer le flag "public", changer la photo).

Troisième incrément

Dans cette dernière partie, nous allons nous consacrer aux fonctions que nous avons jugé "utiles mais pas indispensables", par exemple,

  • Déposer des fichiers et y associer un système de gestion de configuration pour traquer les modifications version après version.
  • Une fenêtre de chat plus réactive et simple à utiliser en temps réel que le système de fils de discussion déjà implémenté.
  • Notifications d'événements (avec un bordereau pour y répondre) sur le tableau de bord de chaque Crew.
  • Retirer un utilisateur d'un Crew.
  • Administration des utilisateurs (changer leurs labels - un titre honorifique modifiable selon les droits dans le Crew, les exclure du crew, ...).


Nous allons également pousser certains tests (unitaires et fonctionnels) afin de vérifier que le site est "user-proof".

À terme, nous souhaitons que les utilisateurs puissent partager des morceaux de musique, des partitions, de communiquer via des fenêtres de chat locales à chaque groupe, éventuellement modifier leurs partitions directement en ligne...

Fonctionnement détaillé du site

Nous détaillons ici le principe de fonctionnement de CrewThis.


Cas d'utilisation

Ce chapitre regroupe les différentes fonctionnalités proposées par notre site et un manuel utilisateur pour chacune d'elles.

Sécurité

Cette section regroupe les fonctions liées à la sécurité du site et du compte des utilisateurs.

  • Inscription

Un internaute arrivant sur le site devra se créer un compte afin de pouvoir accéder aux fonctionnalités.

En cliquant sur le bouton Inscription dans la barre située en haut de l'écran.
Il doit fournir un pseudonyme, une adresse e-mail valide et un mot de passe. Il peut également renseigner son nom, son prénom, sa date de naissance et la ville d'où il vient.
Une fois ces informations remplies, il peut cliquer sur le bouton S'inscrire afin de finaliser son inscription. Un mail de confirmation a été envoyé récapitulant ses informations personnelles.


  • Connexion

Un utilisateur ayant déjà créé un compte va pouvoir se connecter sur CrewThis.

Il doit pour cela aller cliquer sur le bouton Login en haut à droite de son écran.
Il rentre ensuite son identifiant (pseudonyme ou adresse e-mail) et saisit son mot de passe.
En cliquant sur le bouton Connexion il va être redirigé vers la page d'accueil si la connexion a réussi, il verra un message d'erreur sur la page de connexion en cas d'échec.


  • Déconnexion

Une fois connecté, l'utilisateur va pouvoir se déconnecter. Pour cela, il va devoir aller place son curseur dans la barre en haut à droite sur "Bienvenue {utilisateur}" et cliquer sur le bouton Déconnexion


  • Modification des informations de profil

Chaque compte dispose d'informations personnelles qui peuvent être remplies, modifiées ou supprimées. Pour accéder à cet onglet, il faut placer le curseur dans la barre en haut à droite sur "Bienvenue {utilisateur}" et cliquer sur le bouton Mon profil. Cet écran est aussi accessible depuis l'entrée "Options > Mon Profil" du menu latéral.

Depuis cette fenêtre, il peut modifier ses informations personnelles, son image de profil et changer son mot de passe. Une fois les modifications faites, il faudra cliquer sur le bouton Sauvegarder pour les informations de profil et sur le bouton Enregistrer pour modifier son mot de passe.

Gestion d'un Crew

Cette section regroupe les fonctions liées à la création et à la gestion d'un Crew.

  • Creation d'un Crew

Une fois connecté, l'utilisateur peut créer un Crew afin de commencer à travailler avec son groupe. Pour cela, il faut aller dans le menu à droite de l'écran, dans l'onglet "Mes Crews" et cliquer sur le bouton Nouveau Crew. Il faut ensuite compléter le nom du Crew et cocher la case si l'utilisateur souhaite que son Crew soit visible de tous.
L'utilisateur peut aussi choisir une photo de profil pour son crew, qu'il peut uploader sur cet écran. Après avoir complété les champs, l'utilisateur doit cliquer sur le bouton Lancer mon Crew pour passer à l'écran suivant et à l'invitation de membres. A noter:Pour des raisons de sécurité et de compatibilité, certains caractères sont interdits pour nommer un crew. Sont prohibés les accents, les balises "<", ">", les caractères spéciaux...


  • Invitation de membres

Cette fenêtre est accessible à la création d'un Crew et dans l'onglet lié au Crew à travers le bouton "Inviter des membres".
Dans le champ "Pseudonyme ou Email", il faut saisir l'identifiant (pseudo) ou l'email de la ou les personnes que l'on souhaite inviter à rejoindre notre Crew. Un lien permet d'ajouter cette invitation à la liste des invitations. Pour finaliser l'opération, il faut cliquer sur le bouton Inviter. Sera envoyée une invitation pour chaque personne reconnue (c'est-à-dire trouvée par le biais du pseudo ou de l'email) et non-membre du crew. Nota bene: Si l'utilisateur a un rôle visiteur dans ce crew, il ne pourra pas être en mesure d'envoyer des invitations (ni d'accéder à l'écran).


  • Modification des informations liées au Crew

Administrateurs de crew uniquement: Depuis le tableau de bord du Crew, cliquer sur l'onglet Options dans la barre d'accès en haut de la fenêtre. De là, l'utilisateur va effectuer les modifications et appuyer sur le bouton correspondant. Sont possibles les actions suivantes :

  • Renommer le crew
  • Changer la visibilité (public / non public)
  • Changer la photo du crew
  • Supprimer totalement le crew.


  • Renvoi d'un membre du Crew

Si l'utilisateur est administrateur du Crew (créateur ou administrateur nommé), il peut aller dans l'onglet Membres de son Crew et cliquer sur le nom du membre qu'il souhaite renvoyer. Il suffit de cliquer sur le bouton Exclure pour exclure le membre.

  • Transférer la propriété d'un Crew

Si l'utilisateur est propriétaire du Crew (créateur ou propriétaire désigné), il peut décider de rendre un autre utilisateur propriétaire. Attention: ce nouvel utilisateur sera automatiquement administrateur du crew, et l'ancien propriétaire ne le sera plus (il n'y a qu'un seul propriétaire pour un crew).

  • Suppression d'un Crew

Depuis le tableau de bord du Crew, l'administrateur (créateur ou administrateur nommé) doit cliquer sur le menu Options et cliquer sur le bouton Supprimer le Crew.


  • Créer un événement

Depuis le tableau de bord du Crew, aller dans l'onglet agenda. Il suffit de renseigner les champs à droite et de cliquer sur le bouton "Ajouter" pour créer l'événement. Pour envoyer des invitations (demander une réponse de chaque membre du Crew et comptabiliser les réponses), il suffit de laisser la case "Envoyer les invitations" cochée. Si vous souhaiter à l'inverse créer un événement sans forcément avoir besoin d'un retour des utilisateurs, il faut décocher cette même case. Nota bene: Si l'utilisateur a un rôle visiteur dans ce crew, il ne pourra pas être en mesure de créer d'événements.

  • Modifier un événement

Pour modifier un événement, il faut cliquer sur l'événement et cliquer sur le bouton Modifier. Cette fonction n'est disponible que pour le créateur de l'événement.


  • Supprimer un événement

Le créateur d'un événement va pouvoir supprimer cet événement en passant par l'agenda. Il doit pour cela cliquer sur l'événement en question et cliquer sur le bouton Supprimer.

  • Consulter un événement

Tout membre du groupe peut consulter qui participe à un événement, changer sa réponse, et voir sur une carte où il se situe.

Cas spécifiques au membre

  • Création d'une discussion

Dans le dashboard d'un Crew, un utilisateur peut créer un nouveau fil de discussion. Il doit renseigner un titre et ajouter un texte. Pour cela, il faut cliquer sur "Nouvelle Discussion" dans le dashboard, renseigner les champs et cliquer sur le bouton Poster.


  • Ajout d'un commentaire dans une discussion

Le créateur du fil et les autres membres du Crew vont pouvoir ajouter des commentaires suite au premier texte. Pour cela, il faut cliquer sur la discussion qu'il souhaite commenter dans le dashboard, cliquer sur le bouton +Commentaires, renseigner les champs et cliquer sur le bouton Poster. L'utilisateur peut aussi supprimer ses propres commentaires.


  • Modification et/ou suppression d'une discussion

Le créateur d'une discussion pourra également modifier la discussion qu'il a créé. En cliquant sur la discussion qu'il a créée, il va pouvoir cliquer sur le bouton Modifier, modifier les champs qu'il souhaite et enfin cliquer sur le bouton Poster.


  • Rejoindre ou refuser l'invitation à rejoindre un Crew

Dans le tableau de bord de l'utilisateur (la fenetre vers la quelle il est redirigé après s'être identifié, ou quand il clique sur le logo du site en haut à gauche), si il a une(des) invitation(s) à un(des) Crew(s) en attente, il aura une fenêtre à droite de son écran. Dans cette fenêtre, la liste des Crews auxquels il est invité. Il peut tout accepter (ou ignorer) en cliquant sur le bouton vert (rouge) ou déplier l'invitation à un Crew spécifique en cliquant dessus et le rejoindre ou ignorer l'invitation.


  • Quitter un Crew

Un membre d'un Crew peut décider de quitter un Crew. Pour cela, il doit aller dans le dashboard du Crew en question et cliquer sur le bouton Quitter le Crew.
NB: Si l'utilisateur est propriétaire du Crew ou s'il s'agit du dernier adminitrateur du Crew, il ne sera pas en mesure de quitter le crew. Cette mesure prévient les crews vides, que personne ne peut rejoindre et qui deviennent des "crews fantômes".


  • Accepter un événement

Dans l'onglet agenda d'un Crew spécifique, l'utilisateur peut voir tous les événements prévus par ce Crew. La couleur d'affichage d'un événement indique l'état actuel :
- Orange : L'utilisateur n'a pas encore répondu.
- Gris : L'utilisateur a indiqué qu'il ne participera pas.
- Vert : L'utilisateur a indiqué qu'il participera.
- Bleu : Événement public du Crew, l'utilisateur n'a pas besoin de répondre.


  • Afficher la localisation d'un événement

En allant dans l'onglet Agenda, il faut cliquer sur l'événement que l'on souhaite consulter et cliquer sur le bouton Localisation.


  • Modifier son propre label dans un Crew

Dans le dashboard du Crew, l'utilisateur doit aller dans l'onglet membres et peut modifier son Label puis cliquer sur le bouton Modifier.


  • Modifier le label et/ou les droits des membres de son Crew

Si l'utilisateur est administrateur, et dans le dashboard d'un Crew, il peut aller dans l'onglet Membres et cliquer sur le nom du membre du Crew qu'il souhaite modifier. Il peut changer le rôle via la liste déroulante ad hoc et/ou modifier le label du membre. Il suffira ensuite de cliquer sur le bouton correspondant.

  • Donner la propriété d'un crew

cf. section "Gestion d'un crew".

  • Consulter les crews publics

Tous les crews publics peuvent être rejoints sans invitation par n'importe qui. Le menu "Catalogue de Crews" permet d'accéder à un espace listant tous les crews publics. Un bouton de cet écran permet d'exporter toutes les données brutes (format JSON) concernant les crews publics. A la manière d'un flux RSS (mais en plus moderne), ces données brutes, à la manière d'une API, permettraient à des application tierces de les formater et de les exploiter.
Exemple: Screen json crewthis.png

Diagramme de cas d'utilisation

DiagrammeUseCases.jpg

Utilisateurs & Rôles

Cette présentation suit un modèle de généralisation, un Utilisateur authentifié pourra faire tout ce qu'un simple visiteur peut faire (le fait de s'inscrire en moins).

Simple visiteur

Un internaute arrivant sur le site va être notre visiteur. Plusieurs possibilités lui sont proposées :

  • Consulter la partie du site visible.
  • Se connecter à l'aide de ses identifiants.
  • S'inscrire : 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 (Non disponibles pour les rôles suivants).

Utilisateur authentifié

Une fois que le simple visiteur s'est identifié, il aura accès à de nouveaux menus et options et pourra :

  • Se déconnecter.
  • Éditer son profil et ajouter (ou enlever) de nouvelles informations personnelles.
  • Créer un nouveau Crew.
  • Accepter ou refuser une invitation à un Crew.

Membre de Crew

Un utilisateur peut être invité à rejoindre un Crew, si il accepte, il devient un membre du Crew. Encore une fois, il a de nouvelles options :

  • Consulter et éventuellement modifier les Crews dont il fait partie (si il a les droits nécessaires).
  • Créer des fils de discussion et poster des commentaires sur les murs des Crews dont il fait partie.
  • Modification et/ou suppression d'une discussion
  • Créer, accepter ou refuser des événements (si il est invité). (sauf Visiteurs pour la création)
  • Consulter la localisation des événements auxquels il est invité (ou des événements publics).
  • Modifier et/ou supprimer les événements qu'il a lui-même créé.
  • Inviter des nouveaux membres à rejoindre ce Crew. (saufs Visiteurs)
  • Modifier son propre label dans le Crew.
  • Quitter le Crew, bien que cela soit triste !

Créateur de Crew

Si un utilisateur authentifié crée un Crew, il va avoir les droits d'administration de ce groupe. Il pourra :

  • Modifier les labels et/ou les rôles des membres de son Crew.
  • Supprimer le Crew.
  • Éditer les informations relatives au Crew (image de profil, photos du groupe, nom du groupe,...).
  • Renvoyer des membres du groupe.

Diagramme de classes

DiagrammeClasses.png

Choix techniques

  • Comme framework, nous avons choisi d'utiliser Play. C'est un outil très puissant qui permet de gérer le code en Java de façon transparente et qui gère la base de données pour nous.
  • Nous avons choisi pour nous aider un framework front-end moderne basé sur le "Material Design". MaterializeCSS est un outil important pour notre site. Il propose une interface plus simple pour gérer le CSS du site et il permet également d'ajouter des fenêtres pop-up agréables à voir et non-intrusives. La création et le design des éléments est grandement facilité par cet outil qui nous a permis de gagner beaucoup de temps sur la mise en place du rendu graphique que nous voulions.
  • La bibliothèque "Jquery" nous a semblé être une évidence : Elle est suffisamment commune pour que la plupart des développeurs sachent la manier (la documentation est également simple à trouver).
  • Nous utilisons également "Fullcalendar". c'est un gestionnaire d'événements (et de calendrier) en JavaScript. Le calendrier proposé (disponible pour la création des événements sur le site) utilise Ajax pour créer et mettre à jour les événements. Il gère le Drag-&-Drop et il est simple à configurer et à adapter au site.
  • La librairie javascript "Alphanum". Elle permet de restreindre la saisie de certains caractères sur des champs de formulaires très facilement.

Validation

Nous avons réalisé des jeux de test unitaires, fonctionnels et en utilisant selenium. Ils sont disponibles dans le code de l'application.

Screencast

Lien vers le ScreenCast de CrewThis

Avancement

Conception

Conception des fonctionnalités :
100 %

Conception des maquettes de fenêtres :
100 %

Conception de la base de données :
100 %

Conception des incréments :
100 %

Documentation

Wiki :
100 %

Développement

Incrément 1

Mise en place du Serveur, du site, du Git, des modules Play1.3 et MaterializeCSS :
100 %

Inscription :
100 %

Connexion :
100 %

Création Crew :
100 %

Incrément 2

Tableau de bord utilisateur :
100 %

Page de profil utilisateur :
100 %

Invitation de nouveaux membres à un Crew :
100 %

Acceptation invitation Crew :
100 %

Tableau de bord Crew :
100 %

Affichage des membres du Crew :
100 %

Création de fils de discussion :
100 %

Ajout de commentaires dans un fil de discussion :
100 %

Incrément 3

Dépôt de fichiers :
0 %

Gestion de version de fichiers :
0 %

Amélioration des fils de discussion en fenêtre de Chat :
0 %

Affichage Agenda :
100 %

Ajout d'un événement :
100 %

Acceptation des nouveaux événements :
100 %

Notification d'invitation à un Crew :
100 %

Notification d'invitation à un événement :
0 %

Retirer un utilisateur d'un Crew :
100 %

Gestion des droits pour la suppression d'un utilisateur du Crew :
100 %

Tests

Tests unitaires :
100 %

Tests fonctionnels :
100 %

Tests selenium :
100 %