CAW1 2015 Projet de Pierre Leboucher, Kaizar Mirghane et Yohan Moron

De Ensiwiki
Aller à : navigation, rechercher
Logo full.png
Titre du projet Prometheus
Cadre Projet web

Équipe Pierre Leboucher Kaizar Mirghane Yohan Moron
Encadrants Sebastien Viardot


1 - Présentation générale

1.1 Contexte

Dans le cadre de notre deuxième année à l'ENSIMAG, nous suivons un cours de Construction d'Applications Web. Ce cours aboutit à un projet de développement d'un site internet en équipe. Bien que de thématique libre, la réalisation de ce site est guidé par un certains nombre de contraintes techniques imposées, détaillées dans le cahier des charges.

1.2 Genèse

Notre projet se nomme Prometheus. Le nom est celui du Titan Prométhée en anglais, dont la prononciation est plus proche de la prononciation grecque originale. Il est connu pour avoir volé le savoir divin et l'avoir légué aux hommes. Prometheus est un site web permettant à des utilisateurs de partager des cours et des exercices.

1.3 Cahier des charges

PROMETHEUS est un site web destiné à permettre à des personnes (en particulier des étudiants ou des professeurs) le partage et l'amélioration de cours. Pour pouvoir voir ou mettre en ligne un cours, un utilisateur doit être inscrit au site. Une fois connecté, le membre peut créer un groupe (dont il devient alors le manager). D'autre membres peuvent s'abonner par la suite à ce groupe afin de pouvoir voir les cours qui y sont publiés.

1.3.1 Gestion des cours

Un membre abonné à un groupe peut ajouter des cours à ce groupe. De plus n'importe quel membre d'un groupe peut éditer un cours appartenant au groupe où il est abonné. Les cours sont répertoriés par matière et un cours est structuré de la façon suivante :

  • chapitres (possède un titre)
    • sections (possède un intitulé)
      • sous-sections (possède un intitulé et un contenu)

1.3.2 Gestion des exercices

En plus de pouvoir créer des cours, les membres du site peuvent créer des exercices et faire un lien entre un exercice et une section d'un cours. Un exercice est caractérisé par son énoncé et une liste de questions avec leurs solutions éventuelles. Les exercices et les solutions peuvent être édités par les personnes du groupe.

1.3.3 Gestion des groupes

Lorsqu'un membre s'abonne à un groupe, il doit attendre la validation du manager pour pouvoir voir, ajouter et éditer des cours de ce groupe. Seul l'admin du groupe peut supprimer un cours ou un exercice. Un membre peut se désabonner d'un groupe et un manageur peut supprimer un membre d'un groupe.

1.4 Éléments techniques à intégrer

Le projet devra comporter les éléments suivants :

  • Utilisation d'un framework : play(conseillé) utilisant le patron modèle-vue-contrôleur (Play ou Symfony) ou modèle-vue-modèle (meteor)
  • Gestion des rôles avec des utilisateurs différents ayant des droits et des rôles différenciés (2 rôles au minimum)
  • Site adapté à plusieurs terminaux dont une version mobile (par exemple en utilisant Bootstrap)
  • 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 webservice (cf. https://code.google.com/intl/fr/apis/language/translate/v2/getting_started.html)
  • Optionnel : abonnement rss
  • Optionnel : partie du site en gwt ou au moins avec un framework type smartclient


2 - Réalisation

2.1 Modélisation

2.1.1 Cas d'utilisation

Diag use cases.png

2.1.2 Diagramme entités-associations

Diag class model.png

2.2 Environnement de développement

Nous utilisons tout les 3 le même environnement de développement

2.2.1 IDE

Nous utilisons la version 14 de IntelliJ Ultimate (gratuit pour les étudiants)

2.2.2 Système d'exploitation

Linux est le système d'exploitation utilisé

2.2.3 Gestionnaire de version

Nous utilisons le gestionnaire de version git et nous hébergeons notre code sur un dépot Github privé (5 dépots privés sont disponibles gratuitement pour les étudiants de l'ENSIMAG).

2.2.4 Outil de modélisation

Dia est utilisé pour réaliser les différents diagrammes UML

2.3 Technologies utilisées

  • Play framework 1.3.x
  • Bootstrap 3
  • Java 7+
  • AngularJS 1.3.* en tant que framework smart client pour rechercher et filtrer des groupes
  • Google Map en tant que webservice pour avoir la liste des villes disponibles lors de l'inscription de l'utilisateur
  • H2 pour la base de données en mode DEV
  • JQuery 1.11.*
  • json-simple (bibliothèque Java pour gérer les format JSON)

2.4 Fonctionnalités réalisées

  • Page d'aide pour l'utilisateur détaillant les cas d'usage de notre site
  • Inscription de l'utilisateur (avec l'utilisation du webservice google map pour afficher la liste des villes où vit l'utilisateur).
  • Connexion/déconnexion.
  • Page info sur l'utilisateur connecté.
  • Page recherche des groupes (utilisant AngularJS).
  • Ensemble des groupes auxquels l'utilisateur est inscrit.
  • Ensemble des groupes auxquels l'utilisateur a postulé.
  • Fonctionnalité au sein d'un groupe :
    • Pour le manager du groupe :
      • Validation de la candidature d'un utilisateur.
      • Expulsion d'un membre au groupe
      • Ajout/suppression d'une matière
      • Suppression d'un cours/exercice/question
    • Pour tous les membres du groupe :
      • Visualisation des infos sur le groupe pour les membres du groupe.
      • Liste des membres suivant le groupe.
      • Affichage des matières avec leurs cours et exercices.
      • Ajout/édition d'un cours.
      • Ajout/édition d'un exercice.
      • Ajout/édition d'une question.
      • Possibilité de lier une question à une sous-section d'un cours.
      • Flux rss pour s'abonner aux cours et aux exercices d'un groupe.

2.5 Identité graphique

Nous utilisons le thème bootstrap par défaut, vous pouvez voir des images du site en regardant notre screencast de présentation.

2.6 Scénario d'usage

Alice décide de créer un groupe pour partager les connaissances de la promotion 2016 d'apprentis Ensimag. Elle s'inscrit sous le pseudo Alice, avec le mot de passe "Secret", en indiquant son adresse mail "alice_w00t@gmail.com" et sa ville, Grenoble. Elle entre le captcha et valide son inscription.

Pour créer un groupe, elle entre "Apprentimag 2016" dans le champ et appuie sur Entrée pour valider.

Elle ajoute une matière, qu'elle nomme "Principes et méthodes statistiques". Puis dans la page de la nouvelle matière, elle ajoute un cours, "Tests d'hypothèses", avec 3 chapitres, 2 sections par chapitre et un total de 5 sous-sections.

Bob décide de rejoindre le groupe d'Alice. Etant déjà inscrit et connecté, il va dans "Rechercher un groupe" et tape "Apprenti". Il trouve "Apprentimag 2016" parmi les suggestions. Il clique dessus et clique sur "Demander à rejoindre ce groupe". Eve fait de même.

Alice se reconnecte plus tard sur Prometheus et voit que Bob a demandé à rejoindre apprentimag2016. Elle accepte sa demande. Cependant, comme elle connaît Eve, notoire pour son cyber-vandalisme, elle rejette sa demande.

Quand Bob se reconnecte, il voit "Apprentimag 2016" dans la rubrique "Mes groupes". Il clique sur le lien et voit la matière "Stats", puis le cours "Tests d'hypothèses". Il clique sur le lien et lit le cours, puis décide d'ajouter des exercices.

Il ajoute donc un exercice qu'il appelle "Estimation du biais d'un dé à six faces". Dedans, il écrit quatre questions qu'il lie chacune à une sous-section du cours écrit par Alice. Il connaît la réponse pour trois des quatre questions et la renseigne donc.

Quand Alice se reconnecte, elle voit l'exercice "Estimation du biais d'un dé à six faces". Elle décide donc de tester ses connaissances en tentant de répondre à chacune des quatre questions de son côté. Quand elle a fini chaque question, elle clique sur "Afficher la réponse". Elle a juste aux deux premières questions, mais pas à la troisième. Pour comprendre son erreur, elle clique sur "Afficher les sous-sections liées à cette question" et clique sur la sous-section que Bob a lié à la question. En lisant le cours, elle comprend son erreur. Ayant trouvé la solution à la quatrième question, elle peut renseigner cette solution.

Eve fait une deuxième demande de rejoindre le groupe, et Alice décide cette fois d'accorder une chance à Eve et accepte la demande. Etant fidèle à elle-même, Eve vandalise les contenus des exercices en remplaçant toutes les questions et les réponses par des insultes à l'égard d'Alice. Alice décide alors d'expulser Eve en cliquant sur le bouton "Expulser ce traître" dans la page du groupe. Eve ne peut plus rien faire sur les contenus du groupe.

Etant dégoutée par tous ses efforts ruinés, Alice abandonne l'aventure et clique sur "Purger ce groupe par le feu". Le groupe est détruit ainsi que tous les contenus qui s'y trouvaient.

Bob, qui était encore en train de parcourir les contenus du groupe, arrive sur une page d'erreur qui lui indique que la page à laquelle il souhaitait accéder n'existe plus. Il retourne donc à l'accueil en cliquant sur le logo du site situé en haut à gauche de la page.

Nous utilisons le thème bootstrap par défaut, vous pouvez voir des images du site en regardant notre screencast de présentation.

2.7 Screencast

Disponible à cette adresse

2.8 Données de tests

  • Des tests unitaires, fonctionnels et seleniums sont disponibles.
  • Les tests unitaires testent la cohérence de nos classe modèles et le bon fonctionnement de la persistance.
  • Les tests fonctionnels testent nos contrôleurs et notamment le fait que les pages dis.
  • Les tests selenium qui testent nos vues et notamment le bon fonctionnement des formulaires.

A noter que les tests selenium utilisent un fichier yml pour initialiser notre base de donnée. A notes aussi que pour les tests selenium, il faut être sur de ne pas être connecté.

2.9 Site en ligne

Le site web est disponible à cette adresse Il a hébergé en utilisant heroku et la base de donnée de production est postgresql.

3 - Avancement

3.1 - Modélisation

Modélisation des cas d'utilisation :
100 %
Modélisation du diagrammes de classes :
100 %
Modélisation des scénarios :
100 %

3.2 - Développement

Inscription :
100 %
Page d'accueil :
100 %
Connexion/Déconnexion :
100 %
Affichage de la liste des groupes :
100 %
Affichage des groupes suivis :
100 %
Affichage des groupes où on a postulé :
100 %
Recherche de groupes (avec le framework smart client AngularJS)
100 %
Création d'un nouveau groupe :
100 %
Gestion d'un groupe par le manageur
100 %
Gestion des cours
67 %
  • Ajout d'un cours
    100 %
  • Suppression d'un cours
    100 %
  • Edition d'un cours
    0 %
Gestion des exercices
100 %
Gestion des questions
100 %
Flux RSS des cours et exercices
100 %
Connexion au webservice Google pour récupérer les villes
100 %

3.3 - Tests

Test unitaires
100 %
Test fonctionnel
100 %
Test selenium
100 %

4 - Installation et aperçu

4.1 Installation

Éléments requis

- Java 1.7+

- Play Framework 1.3.x

Éléments conseillés

Installation

  • Aller à la racine du projet.
  • Lancer la commande play dependencies pour télécharger les dépendences.
  • Lancer la commande play run pour démarrer le serveur web.
  • Ouvrer votre navigateur web à l'adresse http://localhost:9000.
  • Note : des données de test sont déjà présentes (voir le fichier conf/init-data.yml), des utilisateurs avec leurs groupes sont déjà définis.
    • utilisateur présents (le mot de passe est toujours la chaine de caractère secret) :
      • ron
      • harry
      • hermione
      • mcgonagall
      • ... (voir le fichier conf/init-data.yml pour les autres utilisateurs disponibles)

  • Pour lancer les tests lancer la commande play test.
  • Ouvrer votre navigateur web à l'adresse http://localhost:9000/@tests.
  • Notez que pour que les tests passent vous devez être déconnecté de l'application au préalable.

5 - Pour aller plus loin

5.1 Fonctionnalités non développées

Nous n'avons pas eu le temps de développer le module d'édition de cours.

5.2 Améliorations envisageables

  • Gestion de la pagination de la liste des groupes, des matières, des cours, des exercices...
  • Meilleur parcours d'un cours à travers la table des matières
  • Gestion des commentaires sur un cours ou un exercice
  • Edition de son profil utilisateur
  • Système de news par email
  • Module de récupération de mot de passe, nom d'utilisateur par email