:: Enseignements :: ESIPE :: E3INFO :: 2021-2022 :: Programmation Web avec JavaScript ::

AJAX, JSON, Fetch, mise à jour du DOM

Comme pour les TPs précédents, on vous demande de créer le rapport du Tp5 dans un fichier compte-rendu-tp5.html. En plus du compte rendu, le TP consiste à éditer le fichier tickers.html.

Exercice 1 - Stock Tickers

Le but de cet TP est de réaliser une petite application qui affiche kes dernières quotations (valeurs) d'actions en bourse et qui affiche en vert les quotations inférieurs à un certain seuil
Pour les besins du TP, c'est valeurs sont simulés par un petit "serveur" écrit en Java, comme cela vous pourrez voir les requètes et les réponses HTTP au niveau du réseau.

La partie visuelle de l'application est composée

d'un bouton "Refresh" qui permet d'afficher les 10 dernières quotations (une toutes les secondes) dans la table
d'un champs texte qui permet d'afficher en vert les valeurs des actions intéressantes (les quotations dont la valeur est inférieur à un certain montant).
une table qui contient pour chaque action en abrégé (ticker en anglais) les 10 dernières quotations.

Le code JavaScript doit utiliser la version JavaScript 2015.

Pour ce TP, nous allons utiliser deux endpoints REST

GET /api/ticker qui permet d'obtenir le nom des actions en abrégé.
Vous pouvez utiliser votre navigateur pour voir le résultat au format JSON à l'URL http://localhost:8080/api/ticker.
L'ordre des éléments dans le tableau est toujours le même.
POST /api/stock qui renvoie pour chaque action, sa valeur (quotation) actuelle sous forme d'un dictionnaire.
Attention: l'ordre des noms des actions (tickers) renvoyés par cette fonction est aléatoire (et c'est fait exprès !).

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 de nouvelles quotations à chaque nouvelle demande.
Voici le fichier qui vous servir de base de travail tickers.html (il ne doit pas être modifié) ainsi que le fichier JavaScript correspondant tickers.js.
Pour visualiser le fichier tickers.html en utilisant le serveur, pointer votre navigateur à l'URL http://localhost:8080/tickers.html.
Attention (Achtung ! Achtung!): comme l'on a besoin de faire des requètes AJAX sur les endpoints du serveur, votre fichier HTML doit être distribué par le même serveur. Un navigateur ne vous permettra pas de faire des requètes AJAX si le fichier HTML est chargé en local (avec un file://) sinon vous avez trouvé un bug de sécurité !

Faire en sorte que lorsque l'on clique sur le bouton "Refresh", les tickers (les noms des actions en abrégé) soient affiché dans la console en faisant une requète AJAX (grâce à un fetch) sur l'API REST.
Note: onclick permet de s'enregistrer pour être averti d'un clique sur un bouton.
Utiliser les noms des actions obtenus par la requète AJAX pour créer une table d'une colonne avec pour chaque ligne le nom de l'action lorsque l'utilisateur click sur "Refrech".
Si l'on appuis plusieurs fois sur "Refresh", cela doit re-créer la même table.
Rappel: document.createElement permet de créer un élement DOM et parent.appendChild(child) permet d'ajouter un enfant à un parent.
On souhaite maintenant afficher sur la console les quotations courante. Pour cela, nous allons effectuer une seconde requète AJAX (un POST) une fois que la requète AJAX pour obtenir les tickers a été effectuer.
Note: pour faire un POST avec la fonction fetch, on passe en second paramètre un object JS qui indique que c'est une requète POST que l'on veut faire.
```
       fetch(???, { method: "post" })
     
```
Note: vous remarquerez que l'ordre des quotations est diférent à chaque appel.
Expliquer en commentaire dans le code, pourquoi lors de la conception de l'API, pour le endpoint /api/stock, une requète POST a été choisi plutôt qu'une requète GET.
Modifier de nouveau votre code pour afficher sur la console les quotations (une par ligne) mais dans l'ordre des tickers (les noms des actions en abrégé renvoyé par la première requète AJAX). Comme cela l'ordre ne changera pas d'un refresh à l'autre.
Note: l'ordre doit être AAPL, GOOG, INTC, MSFT, HPQ, KO, WMT et HOG. Mais ne me le mettez pas en dure dans le code, c'est le serveur qui doit indiquer l'ordre, pas le client JS.
On souhaite maintenant afficher une table à deux colonnes, avec les noms des actions dans la première colonne et les quotations de cette action dans la seconde colonne.
Pour simplifier la suite du programme, découper le code en deux parties, une partie qui créer un tableaux à deux colonnes et une seconde partie qui remplie les deux colonnes.
Note: La propriété children sur un élement de l'arbre DOM permet d'obtenir les enfants de cet élement.
Modifier le code pour afficher une table avec 11 colonnes, la première contenant les noms des actions, la seconde le résultat des quotations ("-" tant que la valeur de la quotation est pas arrivée) et pour les 9 colonnes restantes avec des cellules contenant le texte "-".
L'idée est que lorsque l'on demandera plusieurs quotations, on les affichera dans les différentes colonnes.
Faite en sorte d'afficher 10 quotations en envoyant une requète de demande de quotations toutes les secondes et en stockant les quotations dans le tableau (dans les 10 colonnes).
Rappel: window.setTimeout(foo, 1000) permet d'appeler la fonction foo dans 1000 milisecondes.
Faite en sorte que lorsqu'un utilisateur met une valeur dans le champ texte à droite du bouton "Refresh", toutes les quotations inférieurs à la valeur soient affichées en vert (les autres restent en noir).
Note: onkeyup permet de s'enregistrer pour être averti lorsque l'utiliateur tape une valeur dans le champ texte. La valeur est alors disponible dans la propriété value. Et il existe une fonction parseInt en JS.
Si cela n'a pas déjà été fait, faite en sorte que s'il l'on clique sur refresh alors qu'il y a une valeur dans le champ texte, les quotations s'affiche bien en vert lorsqu'elles apparaissent et on une valeur inférieur à la valeur du champ texte.
Que se passe-t'il si on appuie sur "Refresh" plusieurs fois rapidement.
Est-ce le comportement que l'on attend ? Si non, changer le comportement pour avoir un comportement normal.
Note: Il existe une méthode window.clearTimeout()