:: Enseignements :: ESIPE :: E3INFO :: 2018-2019 :: Programmation Web avec JavaScript ::

TP noté de Programmation Web

Le but de ce TP noté est d'écrire une petite application HTML qui affiche des messages et permet de filtrer ceux-ci.

Comme l'environement coupe les communications TCP vers l'extérieur, le cours est disponible à cette adresse http://monge.univ-mlv.fr/~forax/progweb/.

Exercice 1 - TP noté

La partie visuelle de l'application est composée

d'un champ de texte qui permet de filtrer les messages
d'un bouton reload qui permet de recharger les données, il permet de tester que l'application se comporte correctement.
une table qui contient un message par ligne.

Le code JavaScript doit utiliser la version JavaScript 2015.

Pour ce TP, nous allons utiliser un serveur Web (écrit en Java) comme cela vous pourrez voir les requètes et les réponses HTTP au niveau du réseau et aussi vous pourrez tester les requètes AJAX avec Google Chrome.
Le serveur qui définie deux endpoints REST.

GET /api/message qui permet d'obtenir la liste des messages.
GET /api/message/[id] qui renvoie le contenu d'un message en fonction de son [id] (par exemple 741360).

Le fichier JExpress.java est un fichier java exécutable correspondant au serveur. La commande java JExpress.java permet d'exécuter celui-ci.
Une fois que le serveur a été lancé, il n'est pas nécessaire de l'arrêter avant la fin du TP. Celui-ci produit un nouveau message toutes les 30 secondes, donc au cours de vos tests le nombre de message doit grossir.
Voici le fichier qui vous servir de base de travail tpnote.html ainsi que le fichier JavaScript correspodant tpnote.js.
Pour visualiser le fichier tpnote.html en utilisant le serveur, pointer votre navigateur à l'URL http://localhost:8080/tpnote.html

Dans un premier temps, fait un requète AJAX en utilisant la fonction JavaScript fetch pour obtenir tous les messages et afficher le contenu du JSON dans la console.
Modifier le code pour que chaque ligne du JSON corresponde à une ligne de la table HTML et afficher le numéro de message (count), celui qui a envoyé le message (sender) ainsi que la date (date) de chaque message.
Faite attention de garantir que le fichier HTML a bien été complètement chargé au moment où vous remplissez la table.
Faite en sorte que lorsque l'on clique sur le bouton Reload, les messages soient rechargées en faisiant une requète AJAX.
Attention a ne pas avoir de code dupliqué !
Note: onclick permet de s'enregistrer pour être averti d'un clique sur un bouton.
Faite en sorte que lorsqu'on tape du texte dans le champ texte, seule les messages donc le sender commence par les mêmes lettres soit affichées.

Note: onkeyup permet de savoir si le contenu d'un champs texte a changé et la propriété value correspond au texte entré par un utilisateur.
Note2: il existe une méthode startsWith sur les Strings qui marche comme en Java.
Note3: Vous n'avez pas besoin de recharger les données pour les filtrer !
On veux rendre le code un peu plus objet. Pour cela, créer une classe Message et transformer le tableau d'objet que vous recevez de la requète JSON en un tableau d'instance de Message.
Modifier aussi votre code pour que la partie qui transforme un message en ligne de la table HTML utilise une méthode de la classe Message.
On veux maintenant afficher le contenu des messages, pour cela, il faut pour chaque message prendre son message_id et faire une requète AJAX pour demander le contenu (en utilisant le endpoint /api/message/[message_id]).
Bien sûr, on ne va pas démarrer autant de requète AJAX qu'il y a de messages, car le browser va pas être content, donc on se propose dans un premier temps de faire les requètes AJAX une par une de façon séquentiel.
L'idée est de faire la requète sur le contenu du premier message et une fois celle-ci terminer de faire un requète sur le contenu du message suivant, etc.
Note: Reload doit toujours recharger complètement les messages.
Il y a un bug dans votre appli, si on appuis plusieurs fois sur Reload, alors on va avoir plusieurs requètes AJAX qui vont récupérer les mêmes données en parallèle. Faite en sorte que lorsque l'on recharge les données, on arrête la fonction qui chargeais le contenu des messages précédents.
Note: arrêter une requète asynchrone est "browser dépendent", c'est plus simple d'arrêter une fois une requète faite et d'empècher les requètes suivantes.
Ajouter dans votre code une constante qui correspond au nombre de requètes AJAX chargeant le contenu que l'on peut faire en parallèle.
Modifier votre code en conséquence.