TP 5 : Programmation côté client (requêtage asynchrone)

Important : suite à la publication de l'API de correction

Objectifs pédagogiques du TP

Outils

Références

Première application AJAX

Cette partie n'est pas à rendre. Elle est destinée à vous "dérouiller" sur l'envoi de requêtes asynchrone.

Vous allez réaliser une application simple en Ajax qui se contente d'afficher l'heure sur le client en interrogeant le serveur de manière asynchrone. Pour cela, un projet pré-configuré est disponible ici : https://forge.univ-lyon1.fr/LIONEL.MEDINI/m1if03-tpclient-ajax. Clonez le repo de ce projet. Quelques infos sur ce projet :

Commande de démarrage
mvn jetty:run
Adresse de la page d'accueil
http://localhost:8080/index.html
Cette page télécharge directement la bibliothèque AJAX décrite en cours (cf. rubrique "Outils").
Rappel : la fonction principale de la bibliothèque AJAX s'appelle loadXMLAsynchroneously et prend les paramètres suivants :
  • le nom de la méthode HTTP utilisée ('GET' ou 'POST'),
  • l'URL relative de la ressource qui génère le document XML,
  • les paramètres éventuels de cette requête ('toto=12&titi=nimportequoi', ou null sinon),
  • la valeur de l'attribut id de l'élément de la page qui doit recevoir les données.
Adresse de la page JSP qui donne l'heure côté serveur
http://localhost:8080/time.jsp

Dans la page d'accueil :

Transformation XSLT

Reprise de votre application de blog

Dans cette partie, vous allez consommer l'API de l'application de blog réalisée au TP précédent.

Pour rappel, l'application "v1" du TP3 est capable de tester si le client dispose ou non des derniers billets envoyés et de lui renvoyer la liste complète sinon. Elle possède les faiblesses suivantes :

Vous allez donc concevoir une nouvelle version du client de l'application. Sur le même modèle que dans la question précédente, ce client téléchargera de manière asynchrone uniquement les billets qui lui manqueront (et idem pour les commentaires), et les rajoutera à l'interface sans effacement de la page affichée ni interruption de la tâche de l'utilisateur.

Dans un premier temps, vous réaliserez le squelette de l'application sous forme de Single-Page Application (SPA) et avec jQuery (utilisez un CDN). Ensuite, vous mettrez en place les scripts de communication asynchrones avec le serveur.

Pour éviter les problèmes de violation de la same-origin policy, vous placerez les éléments programmés dans ce TP sur le même serveur que celui de votre API. Pour cela, créez un répertoire client dans webapp, dans lequel vous placerez tout ce que vous aurez produit dans ce TP. La page d'accueil de votre application sur le serveur local devrait donc être accessible à une URL du type : http://localhost:8080/tp4/client.
Remarque : ce n'est pas une solution entièrement satisfaisante, et vous serez amenés à déplacer le client ultérieurement.

Single-Page Application

Vous allez réaliser l'application côté client sous forme de SPA. Le client n'aura qu'une seule page HTML à charger, et la sélection de la vue se fera en fonction du hash (la partie de l'URL après le caractère #) de la page.

L'application côté client sera constituée d'une page HTML statique (pas de génération dynamique côté serveur), contenant l'ensemble des vues nécessaires à son fonctionnement :

Pour vous faire gagner du temps, une version de cette page vous est proposée ici.

À vous d'utiliser jQuery correctement (à l'aide de l'exemple vu en cours) pour :

  1. déplier / replier le menu quand on clique sur son titre
  2. mettre en place un mécanisme de routage qui affiche la vue correspondant au hash sélectionné
  3. permettre l'édition des champs texte affichés dans l'interface

À ce stade, vous devez avoir une SPA non fonctionnelle, mais dont les différentes vues (vides) s'affichent quand on clique sur les menus ou sur les liens.

Templating

Comme vu en cours, vous allez utiliser le moteur de templates Mustache pour remplir les vues.

  1. Dans un premier temps, créez des "mock objects" qui représentent des données en JSON qui pourraient provenir du serveur. Vous pouvez utiliser les exemples fournis par Swagger dans les réponses aux requêtes GET. Ici, les URIs dans les listes seront remplacés par des sous-objets. Stockez cette hiérarchie d'objets dans une variable globale.
  2. Rajoutez l'appel à Mustache dans votre page HTML
  3. Écrivez, dans des éléments <script> de la page HTML, des templates Mustache qui permettront de remplir chacune de vos vues
  4. Créez une fonction JS qui prend en paramètres :
    • l'id d'un script contenant un template
    • les données à templater
    • l'id de l'élément HTML où placer le résultat
    Cette fonction déclenchera le moteur de templating et ajoutera le résultat à la page
  5. Dans les fonctions de callback du routeur, appelez cette fonction de templating avec les bons paramètres pour qu'elle "remplisse" les vues avec les données mockées

Dans un second temps, optimisez le chargement des templates en les pré-compilant (voir cours).

À ce stade, vous devez avoir une SPA toujours non fonctionnelle, mais avec du contenu dans les vues.

AJAX

Vous allez maintenant utiliser JavaScript et jQuery pour les requêtes asynchrones au serveur. Exploitez l'API pour envoyer les requêtes permettant :

Remarque : pour l'envoi des fomulaires en asynchrone, utilisez les fonctions de validation JavaScript (cf. rubrique "Références").

Votre SPA doit maintenant être pleinement fonctionnelle.

Fetch API

  1. Dans la vue d'un billet, remplacez les appels AJAX en jQuery des méthodes GET par des appels à la méthode fetch()
  2. Traitez les résultats en chaînant les promesses pour que chaque sous-propriété d'une ressource soit aussi obtenue par fetch().

Aide : pour les sous-propriétés, vous pouvez utiliser Promise.all().

Finalisation de votre application

Rajoutez une feuille de style (Bootstrap...).

Déployez-la sur votre VM.

Rendu du TP

Ce TP est à rendre pour le dimanche 8 décembre 2019 à 23h59.

Recommandations / rappels :

Licence Creative Commons
Valid XHTML 1.0 Transitional