INF tc3 - Projet d’application Web

Sujets des projets

(V3.3 – 28/10/2024)

1 Introduction
Rappel : avant la séance de TD n°1 vous avez constitué votre groupe et choisi votre sujet parmi :
 A- Comptage des mobilités du Grand Lyon
 B- Pluviométrie du Grand Lyon
 C- Disponibilité des stations Vélo’v
 D- Mesure de la pollution atmosphérique en AuRA (Auvergne Rhône-Alpes)
 E- Hydrométrie des rivières du bassin versant de la Saône
 F- Températures en France
Pour chaque sujet vous disposez sur le serveur [Link] d’un fichier ZIP contenant :
 Des fichiers CSV contenant les données de votre sujet,
 Un texte d’explication (PDF) détaillant l’origine des données et la signification des différents champs.
Remarque : les jeux de données sont conséquents et comportent de 50 000 à 300 000 lignes . En dehors
d’une mise en forme préalable pour vous faciliter la tâche, les jeux de données vous sont livrés tels que récupérés sur
les serveurs avec leurs erreurs éventuelles voire des incomplétudes, à vous d’en tenir compte dans votre application.

2 Travail à effectuer
Toutes les applications à développer sont basées sur le même principe :
 Création d’un site web présentant des informations générales sur les données visualisées et, comme élément
principal, une carte glissante avec des POI
 Lorsqu’on clique sur un POI, un graphique présentant une (ou plusieurs) série temporelle est affichée
 Au minimum, il faut pouvoir définir la plage temporelle des données affichées en donnant une date/heure de
début et/ou une date/heure de fin
 Au libre choix de chaque groupe, mettre en œuvre au moins une autre fonctionnalité, comme par exemple :
 Pouvoir définir d’autres filtres ou paramétrages en fonction des thématiques.
 Pouvoir afficher les données de plusieurs POI sur le même graphique à des fins de comparaison
 Agréger les valeurs de plusieurs POI dans des sous-zones géographiques et calculer des courbes
moyennes, etc.
Techniquement, vous devrez créer une base de données organisée de la manière suivante :
 Une première table contient les informations associées aux POI (nom, référence, coordonnées
géographiques, autres caractéristiques) provenant des données fournies. Pour certains jeux de données, il peut
y avoir plusieurs tables.
 Une deuxième table contient les données temporelles pour tous les POI (date et heure, référence du point,
une ou plusieurs valeurs, etc.) provenant des données fournies. Pour certains jeux de données, il peut y avoir
plusieurs tables.
 Une troisième table pour gérer un « cache ». Pour éviter de régénérer les graphiques à chaque fois, on stockera
dans la table l’ensemble des paramètres ayant servi au calcul ainsi que le nom du fichier graphique associé. Si
on redemande un POI avec le même jeu de paramètres, on pourra ainsi renvoyer directement le graphique
stocké dans le cache sans refaire le calcul. Cette table est donc initialement vide et se remplit au fur et à
mesure de l’utilisation du site.
Pour votre sujet vous devrez rédiger :
 Un cahier des charges fonctionnel (CdCF) de votre application web (1 page environ)
 Une documentation permettant l’installation de votre application.
 Un diaporama de présentation (pour la séance de restitution)
~1~
3 Procédure
3.1 Calendrier
A l'issue du TD n°4 vous aurez 10h (5 séances de 2h) d'autonomie planifiée pour réaliser votre projet. La
dernière séance de 2h vous permettra d’effectuer la recette d’un autre groupe (Cf. ci-dessous) et de peaufiner votre
présentation juste avant la séance de restitution de 2h.

3.2 Travail collaboratif avec gitlab

Comme il vous a été annoncé au début du TD n°1, vous devrez utiliser la plateforme [Link]
[Link]/ tout au long du développement de votre projet, c’est-à-dire dès le TD n°4 jusqu’à la séance de restitution,
avec des commit réguliers par l’ensemble des élèves du projet. Un seul commit le jour de la restitution par une
seule personne sera évalué (très) défavorablement par votre chargé de TD.
Attention : il est impératif de se connecter la plateforme [Link] avec vos identifiants de
l’Ecole Centrale de Lyon pour que votre travail puisse être évalué.
Tous les fichiers de votre projet devront être mis sur le dépôt gitlab de votre projet :
 Le code complet de votre application (client, serveur et base de données, fichiers HTML, CSS, images)
 Le cahier des charges fonctionnel de votre application
 Une documentation technique permettant l’installation et le lancement de l’application
 Le diaporama de présentation (pour la restitution orale de la dernière séance)
 Le diaporama de la recette de l’autre application (Cf. ci-dessous)
Ces fichiers pourront être récupérés à tout moment par votre chargé de TD dans leur état courant et, après la
soutenance, constitueront le rendu final.

3.3 Rendu du travail

Votre travail devra être terminé suffisamment longtemps avant la séance de restitution pour que le groupe
de projet qui effectue la recette puisse venir récupérer les fichiers et avoir assez de temps pour effectuer la recette de
votre application. Pour cela, Vous devrez donc prévenir par e-mail de la disponibilité de cette version « finale » sur
gitlab :
 Le groupe de projet qui effectue la recette de votre travail (Cf. ci-dessous)
 L’enseignant chargé de votre groupe de TD
Pour que votre projet soit accessible aux élèves qui effectuent la recette, vous devrez les ajouter comme
membres de votre projet avec le statut « reporter ».
Votre projet étant accessible en permanence sur gitlab, il n’y a donc aucun transfert de fichier à faire, il suffit
juste de rappeler l’adresse du dépôt de votre projet dans l’e-mail. Le dépôt devra contenir à ce moment-là au moins
le code complet opérationnel, le cahier des charges et la documentation technique (les diaporamas seront déposés le
jour de la restitution)
Dans l’hypothèse fort probable où votre programme contiendrait des erreurs bloquantes détectées par le groupe qui
effectue la recette, vous pouvez faire des corrections mais n’oubliez pas de les commiter sur gitlab car seuls les fichiers
sur le dépôt gitlab seront évalués par votre chargé de TD !

3.4 Recette
Chaque groupe doit effectuer la recette d’un autre groupe selon la permutation suivante :
Sujet Recette effectuée par
A- Comptage des mobilités du Grand Lyon B- Pluviométrie du Grand Lyon
B- Pluviométrie du Grand Lyon C- Disponibilité des stations Vélo’v
C- Disponibilité des stations Vélo’v D- Mesure de la pollution atmosphérique en AuRA
D- Mesure de la pollution atmosphérique en AuRA E- Hydrométrie des rivières du bassin versant de la Saône
E- Hydrométrie des rivières du bassin versant de la Saône F- Températures en France
F- Températures en France A- Comptage des mobilités du Grand Lyon
Travail à effectuer :
 Installer l'application fournie par l’autre groupe en suivant la documentation technique fournie
 Evaluer ses fonctionnalités (tester de manière exhaustive boutons, menus...) et en les comparant par rapport
aux fonctionnalités annoncées dans le cahier des charges fonctionnel
 Evaluer sa robustesse (essayer de rentrer des informations qui ne correspondent pas à ce qui est attendu...)
 Evaluer l'ergonomie et la qualité graphique
~2~
 Critères d’évaluations (critères et barème indicatifs) :
 Critères administratifs
 Présence de tous les fichiers nécessaires (html, css, py, sqlite), CdCF, documentation technique – 1pt
 Respect de la date de remise – 1pt
 Critères techniques
 Facilité d’installation et de mise en service (guide d'installation, …) – 1pt
 Robustesse (résistance à des entrées inattendues, à la suppression d'un fichier image, ...) - 1pt
 Maintenabilité (code source commenté, pertinence des noms de variables, …) – 1pt
 Critères fonctionnels
 Respect du cahier des charges (appli web qui génère des images en fonction de paramètres utilisateurs) –
2 pts
 Utilisation de la base de données pour éviter de générer des images redondantes. – 2 pts
 Ergonomie (facilité de navigation, pas de lien, de bouton, ou de menu inactifs, …) – ½ pt
 Qualité graphique (couleurs, polices de caractères, icônes…) – ½ pt
Le bilan de cette recette doit être rédigé sous forme d’un diaporama de présentation dans lequel vous
pourrez mettre des copies d’écran de l’application pour montrer des « problèmes » détectés à titre d’exemple.

3.5 Restitution
La séance de restitution donne l'occasion à chaque groupe de présenter devant ses pairs et l’enseignant de TD
l’application qui devra être fonctionnelle. Il vous est donc demandé de prévoir :
 Un diaporama de présentation de votre projet sous forme de quelques diapositives (slides) présentant le
cahier des charges de votre projet, quelques éléments techniques (schéma de la base de donnée, par exemple)
 Une démonstration de votre application
N’oubliez pas de vous munir des adaptateurs nécessaires pour connecter vos ordinateurs aux vidéoprojecteurs,
soit en HDMI, soit en VGA.
A la suite de votre présentation, le groupe qui a effectué la recette de votre application fera la présentation de
cette recette, juste avant d’enchainer par sa propre présentation de projet.

3.6 Notation du travail

L’évaluation du projet tiendra compte des éléments suivants :
1. Évaluation des livrables par l’enseignant de TD (code, documentations, diaporamas)
2. Utilisation du serveur gitlab
3. Recette effectuée par un autre groupe
4. Note individuelle au sein du groupe
Un calcul indicatif de la note est le suivant :
Note Projet / 20 = Note_livrables / 10 (code, documentations, présentations)
+ Note gitlab / 2
+ Note_Recette / 5
+/- Note_individuelle / 3

N.B. : La note individuelle est délivrée par l’enseignant (qui est seul juge de sa décision), après prise en compte
de l’auto-évaluation du groupe (répartition bonus/malus). Il pourra en particulier s’appuyer sur la contribution
individuelle sur gitlab.
Rappel : La note finale de l’AF INF-tc3 s'obtient en faisant la moyenne de la note de test et de la note de
projet.

4 Exemple d’application web

Afin de vous fournir un squelette d’application comme point de départ, une application basique est disponible
dans le dossier « TD4/regularite-TER ».
Cet exemple correspond au corrigé du dernier exercice du TD n°3.

~3~