Utiliser Vue.js pour afficher la météo en un lieu
Objectif: Ce TP a pour but de vous faire découvrir le framework Vue.js pour construire des interfaces Web.
Références :
Dans le TP précédent vous avez travaillé avec l'API OpenWeather. Vous allez à nouveau utiliser celle-ci dans une petite application Web dont l'interface sera construite en utilisant les framework Vue.js et Bootstrap.
1. Recherche de lieux à partir d'un toponyme
Vous allez dans un premier temps construire une première version simple de l'application qui en utilisant l'API de géocodage d'OpenWeather permet de retrouver pour un toponyme (nom de lieu) donné l'ensemble des lieux répondant à ce nom connus dans la base de données d'Open Weather et des les afficher sous la forme d'un tableau comme indiqué sur la figure ci-dessous.
-
Créez un répertoire TP03
-
Dans celui-ci créez un fichier index.hml et recopiez dans celui-ci le contenu suivant
<!DOCTYPE html> <html> <head> <title>Vue Météo</title> <link rel="icon" type="image/png" href="images/logoIcon.png"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container"> <h1>Vue sur la météo <img src="images/logo.png" alt=""></h1> <form> <div class="mb-3"> <input id="nomLieu" class="form-control" type="text" placeholder="Nom du lieu"> <div id="nomLieuHelp" class="form-text">Entrez un toponyme et trouvez le(s) lieu(x) correspondant avec l'API de gécodage d'openWeather</div> </div> <button type="submit" class="btn btn-primary">Rechercher</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html>Ce code HTML permet de définir le champ de saisie du nom de lieu et le bouton de recherche avec une mise en forme effectuée avec Bootstrap 5.
-
Toujours le répertoire TP03, créez un sous répertoire images dans lequel vous enregistrez les images suivantes
et 
Pour enregister une image faire un clic droit sur l'image et choisir l'item Enregistrer l'image sous... dans le menu contextuel. Vous nommerez la première image logo.png et la deuxième logoIcon.png
-
Ouvrez la page index.html dans votre navigateur et vérifiez que l'affichage obtenu correspond bien à l'image ci-dessous.
La page d'accueil de l'application. -
Complétez ce code en utilisant Vue.js (version 3) pour invoquer l'API de géocodage d'OpenWeather lorsque l'utiliseur clique sur le bouton Rechercher et pour afficher le résultat de cette recherche.
-
Si la recherhce a été fructueuse (un ou plusieurs lieux géographiques ont été trouvés), une table HTML donnant pour chaque lieu trouvé son nom, le pays correspondant, ses coordonnées géographiques (latitude et longitude) est affichée.
-
Si aucun lieu n'a été trouvé, un message indiquant l'échec de la recherche est affiché.
-
2. Afficher la météo d'un lieu
1. Modifiez la page précédente pour que lorsque lorque la recherche a abouti (un ou plusieurs lieux ont été trouvés) les conditions météo du premier lieu trouvé soit récupérées via l'API Current Weather de openWeather et affichées en dessous de la table des lieu trouvés. Vous ferez aussi en sorte que ce premier lieu apparaisse comme sélectionné (par exemple vous appliquerez le style bootstrap table-primary à la ligne du tableau correspondant à ce lieu).
Pour obtenir l'icône correspondant aux conditions météo du lieu voir https://openweathermap.org/weather-conditions
2. Modifiez la page pour que lorsque l'utilisateur clique sur une ligne de la table des résultats celle-ci apparaisse comme sélectionnée et que la météo actuelle du lieu correspondant soit affichée.
