Javascript asynchrone

Licence Informatique 1ère année

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Service d'articles #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP09/ex1/articles.html
(en remplaçant LOGIN par votre identifiant numérique). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGIN" />
en remplaçant LOGIN par les identifiants des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si lecarp213 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="lecarp213,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Un web service d'articles

Pour cet exercice, nous allons utiliser un service web qui propose une base d'articles (fictifs) dans laquelle on peut rechercher par nom d'auteur (nom partiel ou complet). La documentation du service web est à l'URL https://ensweb.users.info.unicaen.fr/TW2/services/articles/

Interrogation du service web

Télécharger l'archive contenant les fichiers du TP et installer le tout dans le dossier du TP.

Compléter la fonction init() pour que le formulaire capte le submit.

Écrire la fonction recherche qui est déclenchée au submit du formulaire et qui va effectuer la recherche d'articles en effectuant une requête XHR vers le service web. Attention penser à bloquer le submit avec preventDefault() comme d'habitude.
Attention si le champ de recherche est vide ou ne contient que des espaces, il ne faut pas interroger le service web et il faut afficher un message d'erreur comme ci-dessous.
L'évènement load de la requête XHR déclenchera la fonction afficheReponse (on pourra commencer en y mettant simplement un console.log de la réponse reçue.

Message d'erreur si champ vide
Message d'erreur si champ vide

Affichage des résultats de recherche

Écrire la fonction afficheReponse qui affichera les résultats de l'interrogation du service web.
Attention il faut regarder si la réponse contient un message d'erreur ou non.

Si la valeur contenue dans la clé result correspond à une erreur, afficher le message d'erreur dans le formulaire comme sur l'exemple ci-dessous.
Pour tester cela il faudra mettre dans clés erronées dans l'URL de la requête XHR.

Message d'erreur si la réponse est un message d'erreur
Message d'erreur si la réponse est un message d'erreur

Si la liste des résultats est vide, afficher comme sur l'exemple ci-dessous :

Liste de résultats vide
Liste de résultats vide

Si la liste des résultats est non vide, afficher les articles en utilisant un élément section par article, comme sur l'exemple ci-dessous.

Exemples de noms pour tester :

  • Carson (8 résultats)
  • Stein (78 résultats)
  • Dora (3 résultats)
Affichage des articles
Affichage des articles

Exercice 2 — Images Flickr #

Attention : cet exercice sera continué lors du prochain TP et sera noté sur 10.

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP09/ex2/images.html
(en remplaçant LOGIN par votre identifiant numérique). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGIN" />
en remplaçant LOGIN par les identifiants des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si lecarp213 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="lecarp213,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Flickr et services web

Un des objectifs de cet exercice est d'utiliser des outils réels du web. Pour cette première partie, nous utiliserons les services de Flickr.
Flickr est un service de gestion et de partage d'images qui propose une API permettant d'explorer les images publiques des utilisateurs.

Création de compte et de clé d'API

Pour utiliser l'API de Flickr, il faut avoir un compte utilisateur et une clé d'API fournie par Flickr sur demande.

  1. Créer un compte utilisateur https://identity.flickr.com/sign-up
  2. Créer une clé d'API https://www.flickr.com/services/apps/create/
    Choisir application non commerciale.
    Noter votre clé publique qui servira par la suite

Pour avoir la liste de toutes vos applications Flickr : https://www.flickr.com/services/apps/by/me (en étant connecté bien sûr).

Découverte de l'API Flickr

La documentation de l'API Flickr est disponible à https://www.flickr.com/services/api/

Consulter les pages de la section Consultez les rubriques suivantes, en particulier Présentation, Codage, Dates, Tags, URL.

À noter que la partie Authentification de l'utilisateur n'a rien à voir avec votre clé d'API et que nous n'utiliserons pas l'authentification pour les fonctionnalités que nous allons développer.

Pour commencer, nous allons faire une recherche d'images et afficher les petites images des résultats.
Consulter la documentation sur la recherche d'image et expérimenter avec l'Explorateur API (en bas de page) en utilisant votre clé d'API (choisir le format JSON et l'option Ne pas signer l'appel).
Cela vous montre les URLs utilisées pour faire des requêtes.

Important !

Noter en particulier que l'URL se termine par format=json&nojsoncallback=1 donc vos URLs pour interroger l'API Flickr doivent toujours inclure ces 2 paramètres. Ce n'est pas clairement spécifié dans la documentation mais ils sont indispensables pour avoir du JSON en réponse.

Recherche d'images

Télécharger l'archive contenant les fichiers du TP et installer le tout dans le dossier du TP.

Compléter la fonction init() pour que le formulaire capte le submit.

Écrire la fonction recherche qui est déclenchée au submit du formulaire et qui va effectuer la recherche d'images en effectuant une requête XHR vers le service web de Flickr. Attention penser à bloquer le submit avec preventDefault() comme d'habitude.
Attention si le champ de recherche est vide ou ne contient que des espaces, il ne faut pas interroger le service web et il faut afficher un message d'erreur comme dans l'exercice précédent.
L'évènement load de la requête XHR déclenchera la fonction afficheReponse (on pourra commencer en y mettant simplement un console.log de la réponse reçue.

Écrire la fonction afficheReponse qui affichera les résultats de l'interrogation du service web.
Attention il faut regarder si la réponse contient un message d'erreur ou non.

Si la valeur contenue dans la clé stat correspond à une erreur, afficher le message d'erreur dans le formulaire comme dans l'exercice précédent.

Si la liste des résultats est vide, afficher aucun résultat comme dans l'exercice précédent.

Si la liste des résultats est non vide, afficher les images dans la section resultats en utilisant l'image carrée 75x75 (voir la page de documentation sur les URLs). La CSS fournie dans la page doit alors permettre d'avoir 3 images par ligne.
Mettre le titre de l'image pour les valeurs des attributs alt et title de l'élément image.
Compléter les paramètres de la requête pour avoir un nombre de résultats multiple de 3 (par défaut Flickr renvoie 100 résultats), et ce qui permet donc de n'avoir que des lignes complètes, comme ci-dessous.

Affichage des images
Affichage des images

Compléter la fonction afficheReponse pour que les images captent le clic. Au clic sur une image, la fonction getDetails est appelée.
Pour une première version de cette fonction, la section details affichera l'image en grand (par exemple la version large en 1024px).

Affichage des détails

Modifier la fonction getDetails pour que celle-ci, au lieu de simplement afficher l'image en grand, interroge à nouveau Flickr pour avoir les détails de l'image (titre, description, etc).
Voir la méthode flickr.photos.getInfo

Il faut donc faire une nouvelle requête XHR qui appellera la fonction afficheDetails pour le traitement de sa réponse.

Afficher le titre, la description, la date de création et le pseudo du propriétaire de l'image.
Sur le pseudo, on fera un lien vers la page Flickr de cet utilisateur, comme ci-dessous :

Exemple d'afficahge complet
Exemple d'affichage des détails d'une image