LIFAP5 - Projet : gestionnaire de liste de tâches - version du 23/03/18

L'objectif de ce projet est de mettre en pratique ce qui a été vu dans l'UE LIFAP5 à travers la réalisation de la partie client, entièrement en javascript dans le navigateur, d'une application de gestion de liste de tâches. Le projet est à réaliser en monôme ou binôme (de préférence).

Attention: il est important de lire tout l'énoncé avant de commencer à coder. En effet, certaines informations importantes sont situées au milieu ou à la fin du présent énoncé. De plus, lire le projet en entier vous permettra de mieux comprendre où vous allez.

Attention: le sujet sera mis à jour entre les séances pour répondre aux questions que vous nous poserez.

Attention: Un projet de départ vous est fourni pour démarrer le projet.

Fonctionnalités du gestionnaire de liste de tâches (to do list)

On souhaite réaliser un gestionnaire de liste de tâches (to do list). Dans un premier temps vous travaillerez en local. Ensuite, l'hébergement des listes de tâches se fera sur un serveur dédié géré par l'université (voir la section Serveur). Une tâche sera appelée TODO par la suite. On souhaite offrir les principales fonctionnalités suivantes :

Maquette de l'application

Ci-après, une esquisse de l'interface de l'application, avec toutes les fonctionnalités attendues.

Étapes du projet, évaluation

Trois séances régulières sont fléchées à l'emploi du temps sur ce projet : le 26/03, le 09/04 et le 23/04, une quatrième étant la soutenance le 14/05. Un dispositif de permanence/aide sera proposé entre les séances. Les grands jalons du projet sont les suivants.

Jalon 1 : maquette de l'application

Un projet de départ vous est fourni pour démarrer le projet, il est constitué des fichiers LIFAP5-Projet.js et LIFAP5-Projet.html et des fichiers json. Vous devez modifier la page HTML pour obtenir une maquette statique HTML/CSS de votre application, à l'image de l'esquisse proposée plus haut.

Attention : il ne s'agit pas de reproduire l'image au pixel près en HTML, bien au contraire : vous êtes libres de déplacer le header, le footer, de ne pas utiliser d'icônes : ce que vous voulez, tant que les fonctionnalités sont là. Les critères esthétiques et ergonomiques ne seront appréciés que pour des points supplémentaires

Attention : vous pouvez tout à fait entrelacer la réalisation des jalons 1 et 2, en ajoutant progressivement des éléments dans l'interface et en créant le code js correspondant

Jalon 2 : génération dynamique sans serveur

Ensuite, vous devez dynamiser votre maquette : tout le HTML statique sera générée à partir des collections Projet-2018-users.json Projet-2018-todos.json lues en local avec l'API fetch (voir plus loin pour le détail de ces données).

Il est très important de travailler dès cette partie en asynchrone, le passage à un vrai serveur à la place des fichiers locaux sera quasi-transparent.

Attention : le jalon 2 correspond essentiellement à refaire dans le projet ce que vous avez fait dans le TP3 .

Jalon 3 : accès au serveur

Vous cessez d'accéder au fichiers locaux et accédez à la collection au serveur. Vous implantez les fonctionnalités de création et suppression (celle de modification étant optionnelle) ainsi que les fonctionnalités.

Jalon 4 : fonctionnalités optionnelles et soutenance

Vous préparez une courte présentation du projet avec un scénario d'utilisation que vous montrerez à votre encadrant. Vous montrerez également votre code et expliquerez son architecture. La soutenance durera environ 10 minutes par projet, dont environ 5 minutes de présentations et 5 minutes de discussion.

Modalité d'évaluation

Modalités d'évaluation : le projet est à réaliser en monôme ou binôme (de préférence). Chaque monôme/binôme présentera son projet à son encadrant de TP/TD le lundi 14 mai au matin. Une archive zip est à déposer pour la même date, 8h du matin, sur Tomuss dans la cellule Depot_Projet de UE-INF2026L Programmation Fonctionnelle Pour Le Web Votre fichier zip contiendra tous vos fichiers html et js ainsi qu'un fichier README.txt contenant vos noms, prénoms et d'éventuels commentaires.

Attention : comme dans le TP3 et précédant il s'agit d'écrire un programme le plus fonctionnel possible avec un maximum de d'initialisation const sans utiliser d'affectations et avec un minimum de boucles (for, while et variantes) en privilégiant à la place les fonctions map, reduce et filter des tableaux. Le manquement à cette consigne sera fortement pénalisé dans le critère de qualité générale du code.

Le projet est à réaliser de préférence en binôme, éventuellement seul mais pas à plus de deux personnes. Vous serez évalués lors de la soutenance qui aura lieu le lundi 14 mai. Un ordre de passage sera fixé sur Tomuss en temps utile.

Lors de la soutenance vous serez évalués sur les critères suivants (le barème est prévisionnel) :

Description technique

Données sur les TODOs et les utilisateurs (fichiers JSON)

Chaque utilisateur est représenté par un objet JSON composé des champs suivants :

Une liste d'utilisateurs est simplement un tableau d'utilisateurs, voir le fichier Projet-2018-users.json.

Chaque TODO est représenté par un objet JSON composé des champs suivants tous obligatoires :

Une liste de TODOs est simplement un tableau de TODOs, voir le fichier Projet-2018-todos.json.

Accès au serveur

Un serveur Web est déployé sur la machine lifap5.univ-lyon1.fr. Il permet d'obtenir la liste des TODOs auxquels on est lié (soit en tant que créateur, soit parce que mentionné dans le champ people). Il permet également d'accéder aux informations utilisateurs (email, avatar, etc).

API Web déployée sur le serveur (nécessite de s'authentifier à chaque requête, voir plus bas) :

TODOs :

Utilisateurs :

Authentification sur le serveur

Toutes les interactions avec le serveur nécessitent d'être authentifié auprès de ce dernier, c'est-à-dire qu'une requête ne sera acceptée par le serveur que si ce dernier peut l'associer à un utilisateur et que cet utilisateur a le droit de faire cette requête. Il est par exemple interdit de modifier un TODO créé par un autre utilisateur.

Afin de s'authentifier auprès du serveur, chaque utilisateur dispose d'une clé d'API, composée d'une suite de caractères unique à chaque utilisateur, disponible dans tomuss (dans la case api_key). Cette clé doit être utilisée dans tous les échanges avec le serveur. Elle est transmise dans le header HTTP X-API-KEY. Dans l'exemple suivant, on fait une requête GET sur un TODO en utilisant a1b2c3d4e5f67890 comme clé d'API :

const api_header = 'X-API-KEY';
const api_key_value = 'a1b2c3d4e5f67890';
let headers = new Headers();
headers.set(api_header, api_key_value);
const url = 'http://lifap5.univ-lyon1.fr/index.php/todos/5ab8869a98af4a18008b4587';

fetch(url, { method: 'GET', headers: headers })
    .then(function(response) {
        if (response.ok) {
            return response.text(); // ou response.json() sans le JSON.parse() ci-après
        } else {
            console.log(`Erreur dans la requête ${url}: ${response.code}`);
            throw("Erreur lors de la requête sur le serveur");
        }
    })
    .then(todoEnTexte => JSON.parse(todoEnTexte)) // inutile si on avait retourné response.json() précédemment
    .then(function(todoEnJson) {
        faireQuelqueChoseAvecLesDonnees(todoEnJson);
    })
    .catch(reason => console.error(reason));
    

Un autre exemple de code qui ajoute un nouveau TODO

const api_header = 'X-API-KEY';
const api_key_value = 'a1b2c3d4e5f67890';
let headers = new Headers();
headers.set(api_header, api_key_value);
// attention ci-dessous, pas d'id dans l'URL
const url = 'http://lifap5.univ-lyon1.fr/index.php/todos/

const mon_todo = { // normalement le contenu du TODO est
                   // récupéré depuis les inputs du formulaire 
                   // de la boite de dialogue modale
  'title': 'un nouveau todo', 
  'desc': "Description du nouveau todo",
  'people': []
};

const data = JSON.stringify(mon_todo);

fetch(url, { method: POST, headers: headers, body: data })
    .then(function(response) {
        if (response.ok) {
            return response.json();
        } else {
            console.log(`Erreur dans la requête ${url}: ${response.code}`);
            throw("Erreur lors de la requête sur le serveur");
        }
    })
    .then(function(todoEnJson) { // todoEnJson contient le todo créé sur le serveur
        faireQuelqueChoseAvecLesDonnees(todoEnJson);
    });

Conseils pour le développement du client

Accès au serveur depuis l'extérieur du campus

Attention: le serveur est accessible uniquement depuis le campus.

Il est possible de s'y connecter en utilisant un tunnel SSH, sous Linux / Macosx la commande est :

ssh p123456768@linuxetu.univ-lyon1.fr -L8186:lifap5.univ-lyon1.fr:80

Sous Windows, adapter l'aide disponible ici.

Pour que cela fonctionne :