CAW1 2015 Projet de Thomas SELECK

De Ensiwiki
Aller à : navigation, rechercher
INP Groups icon.png
Titre du projet INP Groups
Cadre Projet Web

Équipe Thomas SELECK
Encadrants Sébastien Viardot


Présentation du projet

Contexte

Ce projet correspond à la réalisation finale du cours de Construction d'Applications Web de deuxième année. l'objectif de ce dernier est le développement d'une application Web basée sur un Framework existant comme Play! ou Symphony. Le sujet du projet est libre, mais le projet en lui-même doit répondre à une certains nombre de contraintes qui seront explicitées dans la section cahier des charges.

Présentation

Le projet se nomme INP Groups. Il s'agit d'un PoC (Proof of Concept) d'une application de gestion des groupes et des étudiants de Grenoble INP. Ce PoC pourra ensuite être utilisé de manière totale ou partielle par Grenoble INP afin de réaliser une application dans un but analogue.

Ce projet n'étant qu'un PoC, certaines fonctionnalités ne sont implémentées que partiellement. De plus, les données utilisées ne sont pas forcément représentatives de la réalité. Elles ont en partie été générées de manière aléatoire. Ce processus de génération sera expliqué plus loin.

Objectifs

Du fait de la longueur du projet et du temps disponible pour le réaliser, il a été décidé de découper ce projet en plusieurs incréments. Seul le premier incrément aura été réalisé durant le temps imparti.

Premier incrément

  • Ajouter ou supprimer un cours.
  • Editer un cours.
  • Ajouter ou supprimer un groupe institutionnel ou structurant.
  • Editer un groupe institutionnel ou structurant.
  • Ajouter un cours à un groupe.
  • Ajouter ou supprimer des étudiants à un groupe.
  • Ajouter ou supprimer des professeurs à un groupe.
  • Connaître les élèves participants à un cours donné.
  • Connaître le ou les professeurs enseignant un cours donné.
  • Disposer de plusieurs niveaux de droits en fonction des utilisateurs : étudiant (lecture seule), professeur (lecture seule), administratif (tous les droits), administrateur (tous les droits).
  • Disposer d'une interface utilisable sur une tablette ou un smartphone.

Second incrément

  • Permettre le choix des cours d'un étudiant RI (relations internationales).
  • Disposer de fonctionnalités d'administration avancées : génération de listes d'émargement, de notation, ...
  • Disposer de plusieurs niveaux de droits en fonction des utilisateurs : lecture seule, lecture / modification de certaines parties de l'application, droits totaux (administrateur).
  • Disposer d'un moteur de recherche intelligent permettant la recherche d'un groupe, d'un élève, ..., d'une fonctionnalité du site instantanément.
  • Pouvoir importer ou exporter les groupes de cette application vers d'autres applications existantes.

Contraintes

Voici les contraintes imposées initialement:

  • Utilisation d'un framework parmi Play!, Symphony ou Meteor.
  • Implémentation d'une 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.
  • 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 webservice.
  • Optionnel : Abonnement rss.
  • Optionnel : Partie du site en gwt ou au moins avec un framework type smartclient.

Cahier des charges

Cas d'utilisation

Page d'accueil

Le premier diagramme de cas d'utilisations concerne la page d'accueil de l'application. Cette page consiste en une page de login et du choix de l'école. Les fonctionnalités de choix de langues, d'affichage des informations à propos de l'application ou permettant de se déconnecter sont présentées ici et sont communes à toutes les pages du site. Elles ne seront pas répétées dans les diagrammes de cas d'utilisations suivants pour davantage de lisibilité.

Use cases diagrams home page.png

Page de gestion des cours

Le second diagramme de cas d'utilisations concerne la page de gestion des cours de l'application. Ce diagramme présente les fonctionnalités élémentaires de l'application. On pourra tout à fait rajouter de nouvelles fonctionnalités comme l'import / export de cours vers d'autres applications.

Use cases diagrams courses tab.png

Page de gestion des groupes

Le troisième diagramme de cas d'utilisations concerne la page de gestion des groupes de l'application. Ce diagramme présente les fonctionnalités élémentaires de l'application. On pourra tout à fait rajouter de nouvelles fonctionnalités comme l'import / export de groupes vers d'autres applications.

Use cases diagrams groups tab.png

Page de gestion des étudiants

Le quatrième diagramme de cas d'utilisations concerne la page de gestion des étudiants de l'application. Ce diagramme présente les fonctionnalités élémentaires de l'application. On pourra tout à fait rajouter de nouvelles fonctionnalités comme l'import / export d'étudiants vers d'autres applications.

Use cases diagrams students tab.png


Page de gestion des enseignants

Le cinquième diagramme de cas d'utilisations concerne la page de gestion des enseignants de l'application. Ce diagramme présente les fonctionnalités élémentaires de l'application. On pourra tout à fait rajouter de nouvelles fonctionnalités comme l'import / export d'enseignants vers d'autres applications.

Use cases diagrams teachers tab.png

Utilisateurs et rôles

Cette section présente les différents rôles que pourront endosser les utilisateurs. Il est décrit ici les rôles disponibles à la fin du premier incrément. Lors de la fin du second incrément, de nouveaux rôles seront ajoutés (Etudiant RI, Professeur responsable, Administratif responsable). Il est possible de connaître leurs rôles en regardant les diagrammes de cas d'utilisation ci-dessus.

Etudiant

Il s'agit des étudiants de chaque école. Ils ne peuvent que voir les cours, les groupes, les étudiants et les professeurs de l'école. Ils ne disposent pas de droits de modification.

Professeur

Il s'agit des professeurs de chaque école. Ils ne peuvent que voir les cours, les groupes, les étudiants et les professeurs de l'école. Ils ne disposent pas de droits de modification.

Lors du second incrément, ce rôle sera divisé en deux afin d'avoir des professeurs responsables ayant davantage de droits.

Administratif

Il s'agit du personnel administratif de Grenoble INP. Ils disposent de tous les droits.

Lors du second incrément, ce rôle sera divisé en deux afin d'avoir du personnel administratif n'ayant pas tous les droits.

Administrateur

Il s'agit des administrateurs de Grenoble INP. Ils ont par définition tous les droits.

Diagrammes de classes

Voici le diagramme de classes utilisé par le modèle du projet :

Classes diagram.png

Environnement de développement et technologies utilisées

Système d'exploitation

Le système d'exploitation retenu lors du développement de ce projet est Windows 7 x64.

Java

La version de Java utilisée est Java 8 version 45.

Frameworks

Le Framework retenu est Play! version 1.3.1. Le choix de ce Framework par rapport aux autres proposés vient du fait que celui-ci est le plus facile à prendre en main, dispose de bons tutoriels sur Internet permettant la création d'une application de A à Z et la programmation du serveur en Java et l'utilisation de templates permet d'accélérer le développement.

On utilisera également le Framework jQuery afin de faciliter la réalisation du code Javascript et d'améliorer la lisibilité de ce code.

Enfin, on utilisera Bootstrap 3 qui est un Framework CSS permettant d'obtenir une application disposant d'un design responsive (la page s'adapte automatiquement à la taille de l'écran sans que le contenu ne soit déformé) tout en ayant un code lisible et facile à maintenir.

IDE et gestionnaire de versions

L'IDE retenu est Eclipse. Cet IDE est parfaitement adapté à Play!. En effet, Play! dispose de la commande "play eclipsify" qui permet de générer un projet Eclipse à partir du projet Play!.

Le gestionnaire de version retenu est Git, dans sa version graphique pour Windows x64, qui permet une gestion simple et efficace des versions du projet.

Navigateur web

Le navigateur utilisé tout au long de ce projet est Mozilla Firefox 36.0 avec le plugin Firebug installé.

Autre logiciels utilisés

D'autres logiciels ont été utilisés pour réaliser ce projet. En voici la liste exhaustive :

  • Réalisation des diagrammes : Microsoft Visio 2010
  • Réalisation des icônes : Inkscape, GIMP et Paint
  • Réalisation du screencast : Open Broadcaster Software, Microsoft Movie Maker

Validation

Afin de valider le bon fonctionnement de ce projet, différents types de tests ont été réalisés.

Tests unitaires

Le but de ces tests est de valider que les classes du modèle fonctionnent.

Unit tests.png

Tests fonctionnels

Le but de ces tests est de valider que les classes du contrôleur fonctionnent.

Functional tests.png

Tests sélénium

Le but de ces tests est de valider que l'interface web est fonctionnelle.

Selenium test.png

Avancement

Premier incrément

Ajouter ou supprimer un cours :
100 %

Editer un cours :
100 %

Ajouter ou supprimer un groupe institutionnel ou structurant :
100 %

Editer un groupe institutionnel ou structurant :
100 %

Ajouter un cours à un groupe :
100 %

Ajouter ou supprimer des étudiants à un groupe :
100 %

Editer un étudiant:
100 %

Ajouter ou supprimer des professeurs à un groupe :
75 %

Editer un professeur :
25 %

Connaître les élèves participants à un cours donné :
100 %

Connaître le ou les professeurs enseignant un cours donné :
100 %

Disposer de plusieurs niveaux de droits en fonction des utilisateurs : étudiant (lecture seule), professeur (lecture seule), administratif (tous les droits), administrateur (tous les droits) :
100 %

Disposer d'une interface utilisable sur une tablette ou un smartphone :
100 %

Second incrément

Permettre le choix des cours d'un étudiant RI (relations internationales) :
0 %

Disposer de fonctionnalités d'administration avancées : génération de listes d'émargement, de notation, ... :
0 %

Disposer de plusieurs niveaux de droits en fonction des utilisateurs : lecture seule, lecture / modification de certaines parties de l'application, droits totaux (administrateur) :
0 %

Disposer d'un moteur de recherche intelligent permettant la recherche d'un groupe, d'un élève, ..., d'une fonctionnalité du site instantanément :
0 %

Pouvoir importer ou exporter les groupes de cette application vers d'autres applications existantes :
0 %

Ensiwiki

Documentation du projet :
100 %

Création du screencast :
100 %

Documentation

Origine des données de test

Cours

L'intégralité des cours proposés dans cette application provient du site officiel de Grenoble INP. La méthode employée pour extraire les cours du site est la suivante (elle nécessite comme prérequis Internet Explorer et Microsoft Excel) :

  • On va sur la page contenant les cours de l'école qui nous intéresse (en utilisant Internet Explorer).
  • On effectue un clic droit sur la liste de cours et on clique sur "Exporter vers Microsoft Excel".
  • On ne conserve dans le fichier Excel généré que les lignes qui ne concernent les cours.
  • On enregistre le fichier au format texte *.txt.
  • On génère un fichier .yml à partir du fichier .txt avec le script Python suivant :

#!/usr/bin/env python
# -*- coding: utf-8 -*-
   
# Text files containing all courses from some schools
inputFileNames = ["Liste_cours_ENSE3_FR.txt", "Liste_cours_ENSIMAG_FR.txt", "Liste_cours_GI_FR.txt", "Liste_cours_PAGORA_FR.txt", "Liste_cours_PHELMA_FR.txt"]
outputFileName = "Grenoble_INP_FR_courses.yml"
schools = ["Ense3", "Ensimag", "Génie industriel", "Pagora", "Phelma"]
  
output = open(outputFileName, 'w', encoding='utf-8')
i = 0
  
for f_idx in range(len(inputFileNames)):
   with open(inputFileNames[f_idx], encoding='utf-16') as f:
       for line in f:
           apogeeCode = line[2:].split(':')[0]
           fields = line[2:].split('\t')
           name = fields[0].replace(apogeeCode + ":", "").replace("\"", "")
           ECTS = fields[1]
           semester = fields[2].replace("Semestre ", "").replace(" EN", "").replace("\n", "").replace(" ", "").split(',')
           # Construct yaml file
           output.write("Course(course_" + str(i) + "):\n")
           output.write("    schoolStr: " + schools[f_idx] + "\n")
           output.write("    apogeeCode: " + apogeeCode + "\n")
           output.write("    name: \"" + name + "\"\n")
           output.write("    ECTS: " + ECTS + "\n")
           output.write("    semester:\n")
           for item in semester:
               output.write("        - " + item + "\n")
           output.write("\n")
           i += 1
  
output.close()

Groupes

Les données de groupes ont été générées à la main dans un fichier .yml.

Etudiants et professeurs

Les noms et prénoms des étudiants et des professeurs ont été générés aléatoirement par le site internet http://www.generatedata.com/#generator. Ce site génère différents types de fichiers. J'ai choisi au format Excel afin de pouvoir le convertir facilement en fichier texte (comme fait précédemment). J'ai ensuite utilisé le script Python suivant pour générer le fichier .yml :

#!/usr/bin/env python
# -*- coding: utf-8 -*-
  
inputFileName = "studentsData.txt" # This file contains 700 students randomly generated
outputFileName = "Grenoble_INP_students.yml"
schools = ["Ense3", "Ensimag", "Esisar", "Génie industriel", "Pagora", "Phelma", "La Prépa"]
  
output = open(outputFileName, 'w', encoding='utf-8')
i = 0
s_idx = -1
  
with open(inputFileName, encoding='utf-16') as f:
   # Change school
   if (i % 100) == 0:
       s_idx += 1
       
   for line in f:
       firstname = line.split(" ")[0]
       surname = line.split(" ")[1].replace("\n", "")
       email = firstname + "." + surname + "@grenoble-inp.fr"
        
       # Construct yaml file
       output.write("Student(student_" + str(i) + "):\n")
       output.write("    schoolStr: " + schools[s_idx] + "\n")
       output.write("    firstname: " + firstname + "\n")
       output.write("    surname: " + surname + "\n")
       output.write("    email: " + email + "\n")
       output.write("    username: " + (surname + firstname[0]).lower() + "\n")
       output.write("    password: password\n")
       output.write("    authorization: student\n")
       output.write("\n")
  
       i += 1
  
output.close()

Remarque : Le script Python générant le fichier .yml pour les professeur est analogue au script ci-dessus. Les différences sont minimes (remplacer "student" par "teacher").

Installation

La procédure d'installation de cette application Web est simple. Il suffit de télécharger le fichier .zip disponible à la fin de cette page et de le décompresser. On ouvre ensuite un terminal et on se place dans le dossier décompressé.

Il y a déjà des données présentes dans l'application, stockées sous forme de fichiers .yml qui seront importés automatiquement lors du lancement de l'application. Ces données permettent de tester l'application sans avoir besoin d'importer ses propres données.

Exécution de l'application

On exécute l'application en tapant la commande :
play run

On ouvre son navigateur préféré à l'adresse http://localhost:9000/. Si il s'agit du premier chargement de l'application, la page peut mettre un certain temps à charger. Cela est dû au fait que l'application doit importer les données dans sa base de données.

On peut désormais naviguer dans l'application.

Exécution des tests

On peut exécuter les tests de l'application pour valider son fonctionnement en tapant la commande :
play test

On ouvre son navigateur préféré à l'adresse http://localhost:9000/@tests.

Edition du code source

Le code source présent dans l'archive a été développé en utilisant Eclipse. Il est par conséquent très simple d'importer le projet dans Eclipse. Pour cela, il suffit de :

  1. Ouvrir Eclipse
  2. Cliquer sur "File", puis "Import", puis "General"
  3. Choisir "Existing Projects into Workspace"
  4. Cliquer sur "Next"
  5. Sélectionner le répertoire du projet en cliquant sur "Browse..."
  6. Cliquer sur "Finish"

Screencast

Le screencast peut être visionné ici : Lien du screencast

Sources du projet

Voici le fichier compressé contenant les sources du projet.
Fichier:INP Groups sources.zip