Utiliser des APIs Web avec fetch

Correction

La méthode Geolocation.getCurrentPosition() qui fournit la position actuelle de l'appareil est une méthode aynchrone, il faut donc intégrer le traitement effectuant la requête à OpenWeather API dans la fonction callback passée en paramètre de l'appel à getCurrentPosition().

Le code de weather2.js

const apiKey = "a08807a5e6c7223bf1c221f8f87580a4";
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?appid=${apiKey}&units=metric`;

const options = {
	// les options pour Geolocation.getCurrentPosition
	enableHighAccuracy: true,
	timeout: 5000,
	maximumAge: 0,
};

navigator.geolocation.getCurrentPosition(success, error, options);

//---------------------------------------------------------------------
// fonctions utilisées par le programme ci-dessus
//---------------------------------------------------------------------

/**
 * Fait une requête sur WeatherMap API pour obtenir les conditions météorologiques
 * actuelles en un lieu donné et affiche le résultat dans la page HTML
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @param {string} elementId l'id de l'élement HTML où doit être affiché le résultat
 */
function afficherMeteo(latitude, longitude, elementId) {
	// Effectuer une requête à l'API OpenWeatherMap
	fetch(apiUrl + `&lat=${latitude}&lon=${longitude}`)
		.then(response => response.json())
		.then(data => {
			// Récupérer les données de température et de description du temps
			const temperature = data.main.temp;
			const description = data.weather[0].description;

			// Afficher les données dans la page HTML
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `Vous êtes à (lat=${latitude}, lon=${longitude}).
                   Il fait actuellement ${temperature} degrés Celsius avec ${description}.`;
		})
		.catch(error => console.error(error));
}

/**
 * Callback pour getCurrentPosition en cas de succès
 * @param {Position} pos la position retrouvée
 */
function success(pos) {
	let crd = pos.coords;
	// trace sur la console
	console.log("Votre position actuelle est :");
	console.log(`Latitude : ${crd.latitude}`);
	console.log(`Longitude : ${crd.longitude}`);
	console.log(`La précision est de ${crd.accuracy} mètres.`);
	// utiliser les coordonnées obtenues pour récuperer la méto et afficher
	// les résultats dans la page Web
	afficherMeteo(crd.latitude, crd.longitude, "weather");
}

/**
 * Callback pour getCurrentPosition en cas d'échec
 * @param {Error} err l'erreur détectée
 */
function error(err) {
	// trace sur la console
	console.warn(`ERREUR (${err.code}): ${err.message}`);
	// affiche un message sur la page HTML
	const weatherElement = document.getElementById(elementId);
	weatherElement.innerHTML = `Erreur lors de la géolocalisation de votre appareil ${err.message} (code : ${err.code})`;
}

La fonction Geolocation.getCurrentPosition() étant asynchrone, il faut lui transmettre le traitement à effectuer lorsque la géolocalisation est acquise au travers d'une fonction callback. On peut reprocher à cette manière un éventuel manque de clarté, le traitement étant enfoui dans la fonction callback. Une alternative est de transformer cette fonction en une promesse (Promisification en anglais) ce qui donnerait le code suivant.

const apiKey = "a08807a5e6c7223bf1c221f8f87580a4";
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?appid=${apiKey}&units=metric`;

const options = {
	// les options pour Geolocation.getCurrentPosition
	enableHighAccuracy: true,
	timeout: 5000,
	maximumAge: 0,
};

geolocalisation()
	.then((coord) => afficherMeteo(coord.latitude, coord.longitude, "weather"))
	.catch((err) => {
		const weatherElement = document.getElementById('weather');
		weatherElement.innerHTML = `Erreur lors de la géolocalisation de votre appareil
		    ${err.message} (code : ${err.code})`;
	}
	);

//---------------------------------------------------------------------
// fonctions utilisées par le programme ci-dessus
//---------------------------------------------------------------------

/**
 * Fait une requête sur WeatherMap API pour obtenir les conditions météorologiques
 * actuelles en un lieu donné et affiche le résultat dans la page HTML
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @param {string} elementId l'id de l'élement HTML où doit être affiché le résultat
 */
function afficherMeteo(latitude, longitude, elementId) {
	// Effectuer une requête à l'API OpenWeatherMap
	fetch(apiUrl + `&lat=${latitude}&lon=${longitude}`)
		.then(response => response.json()})
		.then(data => {
			// Récupérer les données de température et de description du temps
			const temperature = data.main.temp;
			const description = data.weather[0].description;

			// Afficher les données dans la page HTML
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `Vous êtes à (lat=${latitude}, lon=${longitude}).
                   Il fait actuellement ${temperature} degrés Celsius avec ${description}.`;
		})
		.catch((error) => {
			console.error(error);
		});
}

/**
 * Permet d'obtenir de manière asynchrone la géolocalisation de l'appareil
 * @returns une Promesse qui lorsqu'elle sera résolue (c'est à dire la géolocalisation obtenue) 
 *      aura pour 
 */
function geolocalisation() {
	return new Promise(function (resolve, reject) {
		/**
		 * Callback pour getCurrentPosition en cas de succès
		 * @param {GeolocationCoordinates} pos un objet de type GeolocationCoordinates (voir la doc de MDN
		 *   https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates)
		 */
		function success(pos) {
			let crd = pos.coords;
			// trace sur la console
			console.log("Votre position actuelle est :");
			console.log(`Latitude : ${crd.latitude}`);
			console.log(`Longitude : ${crd.longitude}`);
			console.log(`La précision est de ${crd.accuracy} mètres.`);
			// la promesse est tenue on renvoie les coordonnées géographiques
			resolve(crd);
		}

		/**
		 * Callback pour getCurrentPosition en cas d'échec
		 * @param {Error} err l'erreur détectée
		 */
		function error(err) {
			// trace sur la console
			console.warn(`ERREUR (${err.code}): ${err.message}`);
			// affiche un message sur la page HTML
			const weatherElement = document.getElementById(elementId);
			// la promesse est rompue on renvoie l'erreur
			reject(err);
		}

		navigator.geolocation.getCurrentPosition(success, error, options);
	});
}

Vous remarquerez que pour pouvoir accéder aux fonctions callback resolve et reject de la promesse créée les fonctions success et error passées en paramètre de la méthode getCurrentPosition() sont déclarées dans l'executor (la fonction anonyme) passé en paramètre du constructeur de la promesse.

Correction

Pour obtenir le résultat attendu, nous allons refactoriser la méthode afficherMeteo() afin de pouvoir lui faire réaliser deux appels à l'API d'OpenWeather (un pour obtenir les conditions météorologiques, l'autre pour obtenir le nom du lieu associé à votre géolocalisation) et ensuite procéder à l'affichage.

/**
 * Fait une requête sur WeatherMap API pour obtenir les conditions météorologiques
 * actuelles en un lieu donné et affiche le résultat dans la page HTML
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @param {string} elementId l'id de l'élement HTML où doit être affiché le résultat
 */
function afficherMeteo(latitude, longitude, elementId) {

	Promise.all(
		[
			recupererConditionsMeteo(latitude, longitude),
			recupererNomDuLieu(latitude, longitude)
		]
	).then(function (res) {
		// Afficher les données dans la page HTML
		const weatherElement = document.getElementById(elementId);
		weatherElement.innerHTML = `Vous êtes à ${res[1]}.
                   Il fait actuellement ${res[0].temperature} degrés Celsius avec ${res[0].description}.`;
	});
}

On utilise la méthode statique Promise.all() afin de pouvoir effectuer en parallèle les deux requêtes via OpenWeather API. Les promesses passées en paramètre de cette méthode sont retournées par les fonctions recupererConditionsMeteo et recupererNomDuLieu.

/**
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @returns {Promise} une promesse qui si elle est résolue (fulfilled) a pour
 *       valeur un objet avec deux attributs
 *       - temperature : la température en degrés Celsius
 *       - description : une description (en anglais) des conditions météo
 */
function recupererConditionsMeteo(latitude, longitude) {
	return fetch(currentWeatherAPIUrl + `&lat=${latitude}&lon=${longitude}`)
		.then( response =>  response.json())
		.then( data => {
			// Récupérer les données de température et de description du temps
			const temperature = data.main.temp;
			const description = data.weather[0].description;
			return { temperature, description }
		});
}

/**
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @returns {Promise} une promesse qui si elle est résolue (fulfilled) a pour
 *       valeur le nom du lieu
 */
function recupererNomDuLieu(latitude, longitude) {
	return fetch(reverseGeocodingAPIUrl + `&lat=${latitude}&lon=${longitude}`)
		.then(response =>  response.json())
		.then(data => data[0].name); // Renvoyer le nom du lieu
}

Correction

Le code HTML weather3.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AWA TP2</title>
    <link rel="icon" type="image/png" href="../ukraine-icon.png">
</head>
<body>
    <h1>Météo</h1>
    <p>
        Consultez la météo de la localité de votre choix
    </p>
    <div>
        <label for="">Localité : </label>
        <input type="text" id="nom-localite" placeholder="nom de la localité">
        <button id="searchBtn">Chercher</button>
    </div>
    <p id="weather"></p>
    <script src="weather3.js"></script>
</body>
</html>

Le code javavascript weather3.js

const apiKey = "a08807a5e6c7223bf1c221f8f87580a4";
const currentWeatherAPIUrl = `https://api.openweathermap.org/data/2.5/weather?appid=${apiKey}&units=metric`;
const geocodingAPIUrl = `https://api.openweathermap.org/geo/1.0/direct?appid=${apiKey}`;

document.getElementById("searchBtn").addEventListener("click", function() {
	afficherMeteo(document.getElementById("nom-localite").value, "weather");
} );

//---------------------------------------------------------------------
// fonctions utilisées par le programme ci-dessus
//---------------------------------------------------------------------
/**
 * Fait une requête sur WeatherMap API pour obtenir les conditions météorologiques
 * actuelles en un lieu donné et affiche le résultat dans la page HTML
 * @param {number} latitude  latitude du lieu
 * @param {string} longitude longitude du lieu
 * @param {string} elementId l'id de l'élement HTML où doit être affiché le résultat
 */
function afficherMeteo(name, elementId) {
	
	console.log("name " + name + " elementId" + elementId);
	fetch(geocodingAPIUrl + `&q=${name}`)
		.then( response => response.json()) // Renvoie les données du résultat de la requête au format JSON
		.then(data => { 
			const latitude = data[0].lat;
			const longitude = data[0].lon; 
			return fetch(currentWeatherAPIUrl + `&lat=${latitude}&lon=${longitude}`)
		})
		.then(response => response.json())
		.then(data => {
			// Récupérer les données de température et de description du temps
			const temperature = data.main.temp;
			const description = data.weather[0].description;
			// Afficher les données dans la page HTML
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `A  ${name} il fait actuellement ${temperature}
                             degrés Celsius avec ${description}.`;
		})
		.catch( err => {
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `Erreur ${err.message}`;
		});
}

Correction

Si l'on prend le programme donné en solution de l'exercice précédent, la vidéo ci-dessous vous montre et vous explique ce qu'il se passe si le nom de la localité n'est pas reconnu

Comme indiqué dans la vidéo explicative précédente il suffit donc de détecter si tableau résultat de la requête à l'API de géocodage inversé est vide ou non. Si il est vide on lance une erreur avec un message explicite pour l'utilisateur.

function afficherMeteo(name, elementId) {
	fetch(geocodingAPIUrl + `&q=${name}`)
		.then( response => response.json()) // résultat de la requête au format JSON
		.then(data => { 
			if (data.length === 0) {
				// le tableau est vide
				// aucune localité a été trouvée à ce nom
				throw new Error(`Aucune localité connue au nom de ${name}`)
			}
			const latitude = data[0].lat;
			const longitude = data[0].lon; 
			return fetch(currentWeatherAPIUrl + `&lat=${latitude}&lon=${longitude}`)
		})
		.then(response => response.json()) // résultat de la requête au format JSON
		.then(data => {
			// Récupérer les données de température et de description du temps
			const temperature = data.main.temp;
			const description = data.weather[0].description;
			// Afficher les données dans la page HTML
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `A ${name} il fait actuellement ${temperature} degrés Celsius
			      avec ${description}.`;
		})
		.catch( err => {
			const weatherElement = document.getElementById(elementId);
			weatherElement.innerHTML = `Erreur: ${err.message}`;
		});
}