CentraleSupélecDépartement informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
TD 5 — AJAX avec jQuery

Ce TD correspond au tuto AJAX.

Dans ce TD, nous allons récupérer les informations depuis internet, en utilisant un service météo. Nous allons aussi mettre une jolie icone à la bonne place sur une carte.

0 - Préliminaires

  1. Avant toute chose, lisez bien le tuto AJAX et assurez-vous de faire fonctionner les exemples.

Attention

Sur Firefox vous ne devriez pas avoir de problème mais avec Chrome et Safari le chargement dynamique de fichiers locaux est par défaut interdit

  • Avec Safari: dans le menu de développement, vous pouvez désactiver les "Cross Orgin Restrictions"
  • Avec Chrome: Il faut utiliser le programme avec l'option --disable-web-security et –allow-file-access-from-files.

1 - De la météo en direct.

Tout à la fin de ce tuto, vous trouverez le fichier weather.html, qui contient le coeur d'une interface web pour une application d'affichage de la météo utilisant les service de http://openweathermap.org. Nous allons essentiellement nous inspirer de ce fichier pour compléter notre application météo.

L'objectif est de modifier la fonction litDonnees() pour récupérer les données en faisant un appel à openweathermap, comme dans l'exemple.

À faire

  1. Allez sur la page http://openweathermap.org/appid et obtenez votre propre ID
  2. Téléchargez le fichier weather.html, et changez l'ID pour la votre. Assurez-vous que cela marche toujours.
  3. Changez la langue utilisée pour les réponses: par exemple, en français. La doc du service est là.
  4. Le serveur donne beaucoup d'informations: Pouvez-vous trouver la température, la pression, le vent, l'humidité, la couverture nuageuse ?
  5. Un champ "icon" pointe sur une icone résumant le temps : Voir la doc ici.
  6. Dans votre application météo, modifiez la fonction litDonnees() pour effectuer un appel AJAX avec .ajax à openweathermap à la place du .get local. Quid des unités des valeurs numériques ?

2 - Affichage de la météo sur une carte

Notre application météo comporte une image. Nous allons remplacer cette image par une carte où nous placeront à la bonne place l'icone donnée par openweathermap. À cette fin, nous allons utiliser un service de fond de carte. Google propose un tel service, mais je vous propose plutôt d'utiliser ici OpenLayers (nous nous servirons de la version 2, particulièrement simple à utiliser).

  1. Trouver dans les informations données par le serveur openweathermap la longitude et la latitude de la ville.
  2. Nous allons maintenant faire appel à OpenLayers pour afficher l'icone à la latitude et longitude donnée. Un exemple d'utilisation de MapQuest (utilisant la version 2) se trouve ici : geo.html. Inspirez-vous en pour ajouter une carte à votre appli météo centrée sur la ville avec l'icone résumant le temps.

3 - Encore plus de paramétrage

Il est dommage que la ville ne soit pas paramétrable dans l'application météo... Nous allons y remédier.

  • Ajouter dans le fichier meteo.js une variable globale
var villeCourante = {
    nom : "Gif-Sur-Yvette",
    pays: "Fr"
}    
  • Dans le fichier HTML, placez le nom de la ville entre des balises <span>. Donnez à l'élément un ID, par exemple "ville":
<span id="ville">Gif-Sur-Yvette</span>
  • Modifiez la fonction afficher() pour qu'elle modifie l'élément d'id="ville" avec le contenu de la variable villeCourante.nom.
  • Modifiez la fonction litDonnees() pour qu'elle fasse un appel AJAX à openweathermap en utilisant comme query et non plus une query fixée en dûr:
villeCourante.nom + ","+ villeCourante.pays
  • Testez en modifiant dans la console la valeur de villeCourante et en appelant litDonnees():
litDonnees(afficher)
  • Le problème est que le texte de description reste le même... Dans l'exemple, celui de Gif-Sur-Yvette. Qu'à cela ne tienne, on va aussi paramétrer ce champ.
    • Donnez à l'élément contenant ce texte un id, par exemple id="descriptionVille".
    • Testez l'appel suivant à l'API de wikipedia:
https://fr.wikipedia.org/w/api.php?format=xml&origin=*&action=query&prop=extracts&exintro=&explaintext=&titles=Gif-sur-Yvette
  • Trouvez-vous le champ de description utilisé dans l'exemple ?
  • Pouvez-vous générer un appel AJAX à l'API de wikipedia qui affiche la description de la ville indiquée dans la variable villeCourante ?
  • Le dernier problème est que cette ville devrait être paramétrable dans le fichier config.json. Pouvez-vous faire quelque chose à cette fin ?