Projet ingénieurs : Une interface en Javascript pour le simulateur d économie Jamel

Transcription

1 Projet ingénieurs : Une interface en Javascript pour le simulateur d économie Jamel Pierre Boudes, Christophe Fouqueré, Antoine Kaszczyc & Pascal Seppecher 25 Septembre 2017

2 1 Objectifs 1. afficher dans le navigateur web les données du simulateur Jamel, sous forme de texte 2. réaliser un affichage graphique des données, avec la bibliothèque javascript D3JS 3. améliorer l interface : chargement progressif des données, boutons de "pause", zoom des résultats, etc... 2 Informations administratives Les clients du projet sont Pascal Seppecher du Centre d Economie de Paris Nord (le développeur du projet Jamel), ainsi que Christophe Fouqueré, Pierre Boudes et Antoine Kaszczyc du Laboratoire d Informatique de Paris Nord (LIPN). 2.1 Coordonnées Pascal Seppecher - Docteur en économie - Centre d économie de Paris Nord - Université Paris 13 bureau J308 - pascal.seppecher@univ-paris13.fr - Christophe Fouqueré - Professeur - Laboratoire d Informatique de Paris Nord - Université Paris 13 - bureau A204 - christophe.fouquere@lipn.univ-paris13.fr - Pierre Boudes - Maître de conférences - Laboratoire d Informatique de Paris Nord - Université Paris 13 - bureau A205 - boudes@univ-paris13.fr - http: //lipn.univ-paris13.fr/~boudes/ Antoine Kaszczyc - Etudiant en doctorat - Laboratoire d Informatique de Paris Nord - Université Paris 13 - bureau B305 - kaszczyc@lipn.univ-paris13.fr 2.2 Lien vers la page web de Jamel 3 Contexte Les simulations d économies simulent une abstraction de l économie afin de vérifier ou d explorer des théories. La simulation par ordinateur permet d exprimer des 2

3 simulations complexes, où un grand nombre d interactions entre agents (ménages, entreprises) est généré. Les données de ces interactions sont ensuites combinées pour être affichées à l utilisateur. On représente par exemple la moyenne des salaires des travailleurs au cours de la simulation. L interface du simulateur doit apparaître comme un outil aux yeux de l utilisateur, qu il peut manipuler et tester, et non comme un simple échantillon de données pré-sélectionnées. Le sujet de ce stage concerne donc la réalisation d une interface graphique pour un simulateur. Le simulateur en question est Jamel, et est écrit par Pascal Seppecher du Centre d Economie de Paris Nord. Dans les premières versions de Jamel, les résultats du simulateurs s affichaient dans le navigateur web grâce à une applet java. L avantage d une interface graphique par rapport à une série de capture d écrans ou de tableaux est qu elle permet d afficher convenablement beaucoup d informations. Offrir un large panel de résultats est important pour qu un simulateur puisse convaincre les autres économistes. Aussi, l applet permettait au visiteur d afficher les résultats de Jamel sur son écran, sans avoir à télécharger et installer quoi que ce soit. Cette facilité de lecture est capitale pour garantir une bonne audience au simulateur. Malheureusement aujourd hui la technologie applet a été marquée obsolète, et tous les utilisateurs n ont pas de plugin java pour des raisons de sécurité. Le but du projet est donc de redonner à Jamel une interface moderne, pratique et attractive, grâce aux technologies récentes Javascript. 4 Environnement logiciel / matériel L interface sera affichée dans un navigateur web. Le langage de description de la page est HTML accompagné de CSS. Afin de réaliser les graphiques, la technologie utilisée est la bibliothèque Javascript D3JS. Le projet doit fonctionner sur la plupart des navigateurs web. Pour le développement du projet, il faut utiliser un gestionnaire de version tel que Git. Notons qu il n y a pas de contrainte de confidentialité sur le projet. La partie serveur de Jamel, qu il faut interroger pour récupérer les données, est fournie. Il y a un travail de discussion à effectuer avec les clients afin d établir un format de donnée d échange entre le serveur et le client, et définir les requêtes nécessaires. 5 Connaissances requises Une bonne maîtrise de Javascript est nécessaire, en son absence les étudiants devront se documenter rapidement. La bibliothèque D3JS n est pas un pré-requis, l objectif est de l apprendre pendant le projet. A la fin du projet, les étudiants auront 3

4 normalement une bonne expérience avec D3JS. En ce qui concerne l interface utilisateur, il n y a pas de pré-requis demandé, les étudiants doivent y travailler pendant le projet, par exemple en se mettant à la place de l utilisateur. 6 Descriptif détaillé Comme introduit dans le contexte, le but du projet est de concevoir une interface dans un navigateur web, pour le simulateur d économie Jamel. L interface utilisateur a pour modèle celle existante de Jamel. Comme visible sur la capture d écran en figure 1, elle doit afficher plusieurs graphiques. Ces graphiques ont un titre et affichent une information particulière, comme l évolution des salaires au cours de la simulation. Comme il y a un grand nombre de graphiques, ils sont classés par onglets thématiques. Un bouton de lecture/pause permet de contrôler l arrivage de données supplémentaires. Comme chaque graphique peut comporter beaucoup d informations, il faut proposer à l utilisateur une meilleure visiblité, par exemple par une fonctionnalité de zoom. Les étudiants sont encouragés à proposer des extensions, s ils en voient la nécessité. Le langage de description de la page sera HTML accompagné de CSS. Il faut veiller à bien respecter les normes, et faire attention à la compatibilité sur les différents navigateurs. Le langage d animation sera Javascript, et la bibliothèque d affichage des graphes sera D3JS. Le principe de cette bibliothèque est le "do it yourself", elle fonctionne comme une boîte à outils permettant de réaliser les graphiques adaptés aux besoins. On attend des étudiants qu ils écrivent un script soigné. D3JS est assez populaire et est une bibliothèque intéressante à maîtriser pour les étudiants. Les données à récupérer seront fournies par l équipe d encadrants. La partie serveur n est pas demandée et la documentation des requêtes à effectuer pour obtenir les données sera fournie. Comme il y a potentiellement beaucoup de données à récupérer, l interface doit absolument les charger au fur et à mesure. Les graphiques sont donc réalisés au fur et à mesure, mis à jour automatiquement par le Javascript. Il faut trouver un bon rythme de chargement et d affichage simultané des données, afin d obtenir un démarrage rapide, et une vitesse la plus régulière possible. Le bouton pause sert à stopper la mise à jour des graphes. Il est conseillé de réaliser le projet par étapes indépendantes, par exemple en utilisant des données de test de petite taille qui n ont pas besoin d être chargées depuis un serveur. Les étudiants peuvent réfléchir à une interface de paramètrage, qui permettrait par exemple de stopper le simulateur, de modifier un paramètre et de le relancer. Le développement du projet sera stocké avec un gestionnaire de version tel que Git. Les étudiants doivent créer deux branches, ou deux dépôts, un pour le développement, et un autre pour le rendu où les mises à jours seront le plus propre possible. 4

5 L avantage d un gestionnaire de version est triple : historique des modifications, travail en équipe, sauvegarde de secours. Dans le futur, si le projet est mené à bien, il pourra servir comme interface de départ à d autres simulateurs d économies. 5

6 6 FIGURE 1 Capture d écran de l interface Java de Jamel