Laboratoire 4: Application météo

Introduction

Dans ce labo, nous verrons comment alimenter notre application React avec des données venant d’une API. Nous verrons aussi les méthodes de cycles de vie qui permettent de récupérer les données sans bloquer le rendu de notre composant. Le but sera de construire une application qui permet de :

• Comparer la météo entre 2 lieux
• Voir la météo d’un lieu grâce à une URL

Prérequis

Vous devrez aussi faire des requêtes avec votre application vers une API. Pour cela, vous aurez deux moyens de le faire: via axios ou via un fetch (natif). L’API que nous utiliserons pour récupérer les données se nomme : Open Weather Map. Vous aurez besoin d’une clé pour pouvoir utiliser leur API. Vous avez besoin de vous inscrire pour en obtenir une. Nous utiliserons le plan GRATUIT pour faire le labo. Si vous rencontrez des difficultés pour récupérer votre clé, vous pouvez utiliser la documentation suivante : https://openweathermap.org/appid#get La documentation de l’API est disponible à cette adresse : https://openweathermap.org/current. Vous pourrez y découvrir les paramètres à mettre dans votre requête, mais également comment interroger l’API (définir les unités pour la température ou choisir la langue de la réponse, par exemple).

Envoyer une requête à L’API

Maintenant que vous avez votre clé, vous aimeriez pouvoir faire une requête à l’API. Dans un premier temps, vous pouvez utiliser Postman pour pouvoir tester rapidement. Cependant, vous devrez le faire en JavaScript pour que votre application puisse communiquer avec l’API. Pour cela, vous avez 2 options :

• La méthode fetch native de JavaScript
• Utiliser un module comme axios

La première approche est actuellement supportée par presque tous les navigateurs web. Vous aurez donc besoin de consulter sa documentation pour voir son fonctionnement. Cependant, la méthode fetch se tient au minimum et vous devrez gérer vous-mêmes les paramètres de la requête. Vous pourrez vous aider de URLSearchParams qui permet de générer facilement les paramètres de la requête. Voici la documentation qui pourra vous aider (et une réponse StackOverflow) :

• Documentation Fetch
• Documentation URL
• Documenation URLSearchParams
• StackOverflow

La seconde méthode consiste à utiliser un module nommé Axios qui permet de générer rapidement des requêtes grâce à un objet de configuration que vous passerez au constructeur. Si vous désirez utiliser cette approche vous devriez consulter la documentation du module à l’adresse suivante :

• Module Axios

useEffect()

Ce hook va nous permettre de rajouter un "effet" à notre composant. Il s'agit d'une fonction qui sera enclenchée à chaque fois qu'une des dépendances sera modifiée. useEffect(setup, dependencies?) prend deux paramètres: la fonction de setup et un tableau de variables représentant les dépendances (optionnel). Il va nous permettre de gérer tout ce qui est "externe" à React, notamment les appels à l'API !

La fonction de setup est une fonction représentant l'action à effectuer. Le comportement de l'effet variera en fonction de la valeur de retour de cette fonction ! Si la fonction ne renvoie rien, l'effet est juste appliqué. Par contre, si la fonction renvoie une autre fonction, alors cette dernière sera utilisée avant chaque rendu (sauf la première fois que le composant est rendu). Cette "autre fonction" est appelée fonction de nettoyage et permet de supprimer les ressources utilisées et non controllées par React: un websocktet, un timer, un interval, une animation, une ressource d'une librairie, etc. La première approche sera utilisée lorsque que la ressource ne persiste pas (exemple: une requête à une API), tandis que la seconde sera utilisée dans les autres cas.

Voici un exemple où le composant ouvre une connexion et cette connexion persiste (pour recevoir des messages en "temps réel"). Il faut supprimer la connexion quand le composant est démonté (sinon, elle restera ouverte tant que l'utilisateur ne ferme pas l'onglet):

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
  	const connection = createConnection(serverUrl, roomId);
    connection.connect();
  	return () => { // Fonction de nettoyage
      connection.disconnect(); 
  	};
  }, [serverUrl, roomId]);
  // ...
}

Source

Le deuxième paramètre est une liste de dépendances. Le principe est simple: React va surveiller chacune des variables présentes dans le tableau. Dès qu'une des variables change de valeur, le useEffect va s'enclencher. Par contre, si vous ne précisez rien, l'effet s'enclenchera à chaque nouveau rendu de votre composant. Si vous mettez un tableau vide, alors l'effet ne s'enclenchera qu'au premier rendu de votre composant (lorsqu'il est créé).

astuce

En résumé:

Tableau de dépendances	Signification
Tableau vide	L'effet ne s'enclenchera qu'à l'apparition de votre composant sur la page web (montage)
Aucun tableau	l'effet s'enlenchera à tous les rendus de votre composant
Tableau avec des variables	l'effet s'enclenchera à l'apparition de votre composant sur la page web ET à chaque fois qu'une des variables de votre tableau changera de valeur

Et le cycle de vie ?

Comme pour les composants avec les classes, on peut représenter le cycle de vie avec les hooks ! Le voici:

Source

Exercice

Maintenant que vous avez les informations nécessaires disponibles, il est temps de passer à l’exercice. Vous devrez faire 2 vues :

• Une première qui permet de comparer la météo de 2 villes
• Une deuxième qui affiche seulement la météo d’une ville précisée dans l’URL

Vous devrez également gérer :

• Si l’utilisateur tape le nom d’une ville inconnue
• Un affichage spécifique durant les temps de chargement

Enfin, il vous est demandé de faire du code "propre". Il y a beaucoup de points communs entre les 2 vues. A vous de faire en sorte de ne pas dupliquer inutilement du code. Ne vous préoccupez pas de la "beauté" de votre application, ce n’est pas le but de l’exercice. Voici à quoi vous devriez arrivés : Pour la comparaison de ville :

Si on tape l’URL avec le nom de la ville (ex : /city/namur) :