Utiliser Vue.js pour afficher la météo en un lieu (suite)

Téléchargez une correction de cette application : TP3_Correction.zip et vérifiez son bon fonctionnement.

ATTENTION : vous devez renseigner votre clé d'API Openweathermap dans le module openWeatherUtils.js.

Exercice 1: L'API de géocodage ou l'API d'acquisition des données météorologiques ne répond plus

1. Que se passe-t-il dans le cas où l'utilisateur envoie une demande de géocodage et une demande d'acquisition des données météo et que l'un des deux services n'est plus accessible ? Pour les deux cas suivants, pouvez-vous indiquer ce que serait l'affichage produit ?

   1. l'utilisateur lance l'application, saisit un nom de lieu (par exemple Brest), lance la recherche pour le géocodage (comme indiqué sur la figure ci dessous) mais le service de géocodage n'est pas accessible

      

   2. l'utilisateur lance l'application, saisit un nom de lieu (par exemple Brest), lance la recherche pour le géocodage (comme sur la figure précédente), le service de géocodage fonctionne par contre celui d'obtention des conditions météorologiques actuelles n'est plus accessible

      

2. Pour vérifiez si vos prévisions sont justes, simuler les situations précédentes en modifiant dans weatherUtils.js les urls de l'API openweathermap (geocodageURL pour le cas a., currentWeatherAPIUrl pour le cas b.) en introduisant une erreur dans le nom du serveur (par exemple xapi.openweathermap.org au lieu de api.openweathermap.org) et observez le comportement de l'application. Obtenez vous bien la même chose que ce que vous aviez imaginé ?

3. Ouvrez la console javascript du navigateur ? Qu'observez vous ?

Exercice 2: Afficher les erreurs dans l'interface utilisateur

En cas d'erreur sur l'un des services, plutôt que de réagir en silence dans la console, il est préférable d'afficher des messages explicites visibles dans l'interface de l'application afin que l'utilisateur comprenne bien la situation.

1. Dans le cas où le service de géocodage est inaccessible

   

2. Dans le cas où le service d'acquisition des données météo est inaccessible

   

Modifiez l'application pour assurer ce comportement (pour tester faites comme pour le point 2. de l'exercice précédent).

Exercice 3 : latitude incorrecte

1. dans le module openWeatherUtils.js modifiez le code de la fonction getMeteo() afin d'appeler l'api de consultation des données météo avec une latitude incorrecte, par exemple en concaténant une lettre à la valeur de la latitude, et vérifiez que vous obtenez bien l'affichage suivant.

   

2. En utilisant Postman ou les outils réseau du navigateur rejouez la requête qui a produit cette erreur. Vous pouvez constater que le service envoie un réponse avec plus de précision sur l'erreur et indiquant ici que la laitude est incorrecte.

3. Modifiez le code de la fonction getMeteo() afin de récupérer la cause précise de l'erreur indiquée dans la réponse de l'API et de l'ajouter au message d'erreur de l'exception levée.

Exercice 4 : clé d'API incorrecte

1. Dans le module openWeatherUtils.js modifiez l clé d'API incorrecte en rajoutant par exemple une lettre à la fin de celle-ci et vérifiez que vous obtenez bien l'affichage suivant.

   

2. En utilisant Postman ou les outils réseau du navigateur rejouez la requête qui a produit cette erreur. Vous pouvez constater que le service envoie un réponse avec plus de précision sur l'erreur et indiquant ici que la clé d'API est incorrecte.

3. Modifiez le code de la fonction getLocations() afin de récupérer la cause précise de l'erreur indiquée dans la réponse de l'API et de l'ajouter au message d'erreur de l'exception levée.

Exercice 3: Modifiez l'application afin de remonter les erreurs et de les afficher dans un dialogue modal.

1. Dans le module vueVapp.js

   1. modifier les méthodes findLocation() et sélectionnerLieu(lieu) du module vueApp.js pour ne plus attraper les exceptions mais les laisser remonter.

   2. rajouter à l'objet vueApp un gestionnaire d'erreur qui permettra

      • d'afficher les détails de l'erreur sur la console (utiliser console.err() plutôt que console.log())
      • d'enregistrer l'erreur dans l'état du modèle (pour cela définir dans l'option data une propriété à laquelle sera affectée la référence de l'erreur)
      • une fois le modèle mis à jour afficher le dialogue modal

      // afficher l'erreur sur la console
      ...
      // enregistrer l'erreur dans le modèle
      ...
      // recupérer l'instance de la fenêtre modale et l'afficher
      const modal = bootstrap.Modal.getOrCreateInstance("#errorDialog");
      modal.show();

2. Dans la page index.hml rajoutez le code bootstrap pour un dialogue modal

   <!-- Dialogue Modal pour afficher les messages d'erreur-->
   <div id="errorDialog" class="modal" tabindex="-1">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">
                       <a title="OpenClipart-Vectors, CC0, via Wikimedia Commons"
                           href="https://commons.wikimedia.org/wiFile:Alert-Stop-Warning-Error_icon.svg">
                           <img width="32" alt="Alert-Stop-Warning-Error icon"
                               src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Alert-Stop-Warning-Error_icon.svg/32px-Alert-Stop-Warning-Error_icsvg.png"
                           >
                       </a>
                       <strong>Erreur</strong>
                   </h5>
                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                   </button>
               </div>
               <div v-if="error" class="modal-body">
                   <p>afficher le type de l'erreur</p>
                   <p>afficher le message d'erreur</p>
                   <p>Pour plus de détails consultez la console JavaScript</p>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
               </div>
           </div>
       </div>
   </div>
                                   

   Le texte surligné en vert sera à remplacer par une expression d'interpolation avec l'erreur définie comme propriété de l'attribut data de l'application Vue.