CAW1 2016 Projet de Jérôme BARBIER, Rémy BEULE DAUZAT et Jean-Benjamin ROUSSEAU

De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet PlanAct
Cadre Projets de web

Équipe Jérôme Barbier Rémy Beule-Dauzat Jean-Benjamin Rousseau
Encadrants Sébastien Viardot



Objectifs du projets

Présentation générale

Création d'un outil de planification d'activités, au sens large du terme, avec options de partage. Permet la création de programmes et de leur partage à toute la communauté. Les programmes peuvent être importés dans Google Calendar

Quelques cas où l'on peut faire usage de l'outil

  • Un coach sportif qui souhaite créer un programme d’entraînement à destination des joueurs de son équipe
  • Un groupe d'amis qui souhaite planifier des vacances
  • Un club d'échecs qui souhaite partager le calendrier des compétitions et laisser ses membres s'organiser en fonction (toujours via le site)

Cas d'usage

Tous les diagrammes sont affichés en Grand à la fin de la page, en annexe.

Pour résumer, il y a plusieurs niveaux d'utilisateur :

  • Des utilisateurs non authentifiés qui peuvent simplement regarder les programmes publics
  • Des utilisateurs possédant un compte qui peuvent créer des programmes, des activités et des exercices. Ils peuvent également les partager avec la communauté (autres utilisateurs).
  • Des administrateurs qui ont tous les droits sur les programmes

Modèle de donnée utilisé

Tous les diagrammes sont affichés dans les annexes de la présente page.

Le modèle présenté dans le diagramme permet quelques optimisations qui, par manque de temps, n'ont pas été implémentées. Par exemple, il est possible de référencer une activité dans plusieurs programmes plutôt que de la dupliquer. Dans les faits, cette possibilité n'est pas utilisée, elle est en revanche implémentée dans le modèle.

Lors de la copie d'un programme public dans ses programmes, tout le programme est copié en profondeur : on duplique également les activités et les exercices.

Choix techniques

Affichage du calendrier

Pour afficher les différents évènements planifiés, nous avons eu besoin d'afficher un calendrier recensant l'ensemble de ces évènements. Des solutions sont disponibles sur la toile. Parmi celles-ci, nous nous sommes penchés sur FullCalendar.io qui est une solution facilement paramétrable et open source. De plus, elle est écrite totalement en JavaScript et donc très facilement intégrable.

Ajout/édition des programmes

Afin de proposer une interface conviviale et simple à utiliser, les opérations de création et de modification de programmes sont réalisées en JavaScript avec l'aide des librairies jQuery et jQuery-UI.

Pour simplifier les opérations de modification ou création des programmes, activités et exercices, il a été choisi de rendre atomique chacune de ces actions. Une API REST-like a été créée (elle répond comme du REST mais ne s'appuie pas sur les méthodes HTTP comme le ferait du REST, puisque les navigateurs ne gèrent pas de manière optimale les opérations autres que GET et POST, l'implémentation proposée tient compte des routes pour déterminer les opérations à effectuer).

Ainsi, l'affichage d'un programme (par exemple) revient à faire des appels AJAJ (AJAX avec JSON) vers les différentes adresses proposées pour obtenir les activités et les exercices liés.

Ensuite, étant donné que les opérations d'affichage pour l'édition et la consultation nécessitent toutes les deux de faire les mêmes appels AJAJ pour la création de la vue utilisateur, le script JS, qui permet de la construire, a été factorisé. Le comportement diffère uniquement lors d'une édition. Dans ce cas, les callbacks et les styles visuels de l'éditeur sont simplement ajoutés à la vue consultative standard.

Design

Le design du site a été conçu à l'aide du framework bootstrap. Ce framework permet de faciliter la compatibilité du site avec les différents terminaux dont les mobiles. De plus, un certain nombre de mises en forme HTML directement prêtes à l'emploi sont disponibles. Elles nous permettent d'accélérer le développement du design et de nous focaliser sur le cœur du projet.

Fluxs RSS

Nous avons ajouté une page de flux RSS qui liste les derniers programmes publics. Pour y accéder il suffit d'aller sur la page /program/listPublicPrograms/rss. Vous pouvez également retrouver cette page en passant par la liste des programmes publics.

Liaison avec Google Calendar API

Nous avons utilisé l'api de Google Calendar afin de permettre à nos utilisateurs d'importer leurs programmes dans leurs compte Google Calendar.

La partie compliquée fut l'authentification en OAUTH2. Pour cela nous avons utilisé les différentes librairies de Google : https://developers.google.com/identity/protocols/OAuth2WebServer

Pour résumer simplement : un utilisateur essaie d'importer un programme dans son compte. Soit il a déjà lié son compte avec notre site et à ce moment là l'importation se fait tout de suite, soit il est redirigé sur une page autorisation de Google.

Google nous renvoie ensuite un token A qui est utilisé pour récupérer un second token B. Le processus d'autorisation auprès de Google est alors complété.

Ensuite, on renvoie l'utilisateur sur l'importation de son programme. Le token B est alors utilisé et stocké pour appeler l'API GoogleCalendar afin de créer le calendrier. Le token se rafraîchit tout seul si sa durée de validité est expirée.

Dans son fonctionnement, Google stocke les données sans les identifier, ce qui rend difficilement testable cette partie du code. Au niveau du contrôleur, c'est également une classe compliquée à tester car certaines url ne sont appelées que par les services Google. Certains cas dépendent de ce que google retourne ou de si l'utilisateur à déjà des tokens ... Tous ces cas ne sont que difficilement maîtrisables.

Screencast

https://youtu.be/IEZT71ZEZWA notre ScreenCast du site PlanAct

Dans la vidéo, vous verrez notamment :

  • Une illustration du concept et de l'intérêt des programmes publics
  • Comment un utilisateur peut créer/modifier un programme
  • Comment un utilisateur peut lier son compte Google avec son compte PlanAct

Autres éléments

Tests

Tous les tests se trouvent dans le dossier test à la racine du projet.

Ils peuvent être lancés via JUnit dans Eclipse ou tout autre IDE gérant JUnit et Play, ou alors avec le mode test de Play.

Pour rappel, le mode test peut être exécuté comme ceci :

Comment lire les tests ? Les règles de nommage des tests sont les suivantes :

  • Toutes les méthodes de test doivent avoir un nom qui se termine par "test"
  • Le reste du nom du test indique :
    • Le nom de la méthode testée si l'on teste une méthode (principalement pour les tests du modèle)
    • Un résumé du scénario que l'on teste si l'on teste un enchaînement d'actions (principalement pour les tests fonctionnels)

Par exemple, si un test s'appelle "loggedUserCanCreateActivityTest", on est certain qu'il s'agit d'une méthode de test car elle se termine par "test", elle vérifie un scénario qui en l’occurrence est "Un utilisateur identifié peut créer une activité".

Spécificité des tests sélénium

Nos tests sélénium ne s'exécutent correctement que sur le navigateur firefox. Nous avons également remarqué que dans firefox les clickAndWait ne prenaient pas en compte la partie wait. Nous avons donc rajouté des pauses après les clickAndWait en cas de nécessité.


Couverture

Cobertura a été installé pour vérifier la couverture des tests unitaires réalisés. Pour chaque type d'entité testée, le résultat est indiqué ci-dessous.

Taux de couverture global :
91 %

Modèle

Des tests unitaires ont été réalisés pour vérifier que les primitives du modèle se comportent comme attendu.

Vous retrouverez ces tests sous les noms du type <Nom de l'élément du modèle>Test.java.

Taux de couverture des tests :
100 %

Contrôleurs

Nous avons utilisé des tests fonctionnels classiques en Java et des tests Sélenium pour tester les contrôleurs.

Les tests fonctionnels sont nommés de la sorte : <Nom du contrôleur>Test.java et les tests Sélénium, qui vérifient un scénario utilisateur portent le nom dudit scénario.

Taux de couverture des tests :
87 %

Librairies et ressources utilisées

CSS

Bootstrap a été le framework CSS adopté afin de simplifier l'écriture du code du design du site. Il est distribué sous licence MIT.

JavaScript

Les librairies JavaScript utilisées ont été sélectionnées afin de répondre au mieux aux besoins du projet. En voici la liste :

  • jQuery et jQuery UI : pour permettre la réalisation d'effets graphiques, simplifier la mise en place du Drag and Drop dans l'éditeur de programmes et afficher un sélecteur de date. Ces outils sont distribués sous licence MIT.
  • jQuery Time Picker de Jon Hornton : pour permettre la sélection de durées dans l'éditeur de programmes puisque certains navigateurs ne supportent pas le champ de type "time" de HTML 5. Ce code est distribué sous licence MIT.
  • Full Calendar : Pour afficher le calendrier de l'utilisateur avec les programmes qu'il a créés. Cet outil, dans sa version basique (que l'on utilise) est distribué sous licence MIT.

Graphiques

Les ressources graphiques utilisées sont les suivantes :

  • Les horloges ont été créées par FreePik et sont distribuées gratuitement à condition de créditer les auteurs.
  • Les personnages ont été créés par Vector characters et sont distribués gratuitement à condition de créditer les auteurs

Procédure pour le déploiement

La présente procédure se trouve dans le fichier install.txt à la racine de l'archive du projet rendue sur TEIDE.

Installation des dépendances nécessaires

La commande play dependencies permet d'installer les dépendances requises pour le projet (les API Google, Secure et Cobertura), il convient de taper cette commande avant de démarrer le serveur.

Si vous utilisez Eclipse comme éditeur de code, il faudra mettre à jour les dépendances dans le projet que vous importez dans l'éditeur. Pour cela, il faut taper la commande play eclipsify. Pour les autres éditeurs, il faudra taper play ide.

Utilisation du site

Base de données par défaut

Une fois les dépendances installées, il est possible de lancer le serveur avec la commande play run.

Vous pouvez installer une base de données par défaut en chargeant l'adresse "application/createdb" (si pour une quelconque raison vous voulez écraser la base de données, vous pouvez charger l'adresse "application/erasedb").

Par défaut, l'installation qui vous est proposée est en mode développeur. Si vous choisissez de la passer en mode production, certaines méthodes comme erasedb cesseront de répondre. Notez également que le mode développeur implique que la base de données n'est pas conservée entre deux exécutions.

Comptes utilisateurs par défaut

Vous pouvez utiliser l'un des comptes utilisateurs suivants pour vous connecter sur le site et explorer les possibilités qu'il vous offre : Nom d'utilisateur, Mot de passe, Type d'utilisateur, Commentaire

Benjamin, test, Administrateur, Possède deux programmes partagés

Remy, test, Administrateur, Possède un programme partagé

Jerome, test, Administrateur, Possède un programme privé

Sebastien, test, Simple, Ne possède pas de programme

Vous pouvez bien évidemment inscrire de nouveaux utilisateurs.

Annexes

Diagrammes UML : Use Case

Planact-UserCase-diagramm.png

Diagrammes UML : Classes

Planact-UML-diagramm.png

Diagrammes UML : Séquence modifier un exercice

Planact-Sequence-Diagram-modifierExercice.png

Diagrammes UML : Séquence modifier une activité

Planact-Sequence-Diagram-modifierActivité.png

Diagrammes UML : Séquence copier un programme public

Planact-Sequence-Diagram-copierPublicProgramme.png