Créer une application météo

La semaine dernière, j'ai abordé le projet Show the Local Weather de Free Code Camp, qui consistait à créer une application affichant la météo où que l'utilisateur se trouve.

J'ai dû implémenter les user stories suivantes:

  • L'utilisateur peut voir la météo dans son emplacement actuel.
  • L'utilisateur peut basculer l'unité de température (Celsius ou Fahrenheit).
  • L'icône météo ou l'image d'arrière-plan changera en fonction des conditions météorologiques.

J'ai décidé d'aller un peu plus loin en ajoutant une autre user story

  • L'utilisateur peut rechercher des informations météorologiques d'autres endroits.

Conception

J'avais un tas d'idées pour la conception de cette application et j'ai regardé quelques projets terminés (sans vérifier leur code, bien sûr) de la communauté pour voir ce que les autres affichaient dans leur application et à quoi cela ressemblait.

La mise en page finale était un peu délicate, mais j'ai trouvé utile de décider des éléments que je voulais afficher pour l'utilisateur et de construire à partir de là.

Garder les choses simples était le but ici. J'ai décidé de n'afficher que la température et la description de la météo en plus de l'heure locale.

J'ai également aimé l'icône météo animée dans l'exemple de projet et j'ai estimé que c'était une meilleure représentation de la météo actuelle qu'une image d'arrière-plan, alors je voulais l'implémenter dans mon application.

Comme d'habitude, je mets tout dans mon Workflowy.

Tout configurer était assez simple, sauf trouver un jeu d'icônes animées approprié. J'ai dû chercher un peu avant de trouver Skycons, ce que j'ai fini par utiliser.

L'autre chose avec laquelle j'ai eu du mal était de trouver une bonne palette de couleurs pour l'application, et c'est quelque chose avec lequel je lutte presque toujours. J'ai expérimenté différentes combinaisons avant de décrocher le produit final.

Logique

Après avoir examiné un exemple de réponse d'API d'Open Weather, j'ai pensé que je devrais obtenir la longitude et la latitude de l'utilisateur pour pouvoir fournir des informations météorologiques lors du chargement de la page.

Le moyen le plus simple de le faire était d'utiliser l'API de géolocalisation HTML5 qui était assez simple, car elle avait déjà été traitée dans la section JSON et API du programme.

J'ai stocké les valeurs retournées dans des variables déjà déclarées et les ai utilisées pour faire la requête AJAX.

if (navigator.geolocation) {
 //Return the user's longitude and latitude on page load using HTML5 geolocation API
 window.onload = function () { var currentPosition; function getCurrentLocation (position) { currentPosition = position; latitude = currentPosition.coords.latitude; longitude = currentPosition.coords.longitude;
 //AJAX request
 $.getJSON("//api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) { var rawJson = JSON.stringify(data); var json = JSON.parse(rawJson); updateWeather(json); //Update Weather parameters }); }
 navigator.geolocation.getCurrentPosition(getCurrentLocation);
 };

L'API Open Weather m'a permis de mettre à jour l'emplacement, la température et la description de la météo, mais j'avais encore besoin de trouver un moyen de mettre à jour l'heure locale. Après quelques recherches, j'ai trouvé une autre API sur Geonames.org qui s'est occupée de cela.

$.getJSON('//api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function(timezone) { var rawTimeZone = JSON.stringify(timezone); var parsedTimeZone = JSON.parse(rawTimeZone); var dateTime = parsedTimeZone.time; timeFull = dateTime.substr(11); $(".local-time").html(timeFull); //Update local time timeHour = dateTime.substr(-5, 2); });

La dernière chose que j'ai faite a été de mettre à jour l'icône météo sur les conditions de l'emplacement ou de la ville d'intérêt de l'utilisateur. J'ai décidé qu'un bon moyen de le faire était de vérifier la description de la météo et de modifier l'icône en fonction de cela.

J'ai donc envisagé quelques scénarios possibles tels que ciel dégagé, nuages, neige, ensoleillé, pluie, etc.

//Update Weather animation based on the returned weather description
 var weather = json.weather[0].description;
 if(weather.indexOf("rain") >= 0) { skycons.set("animated-icon", Skycons.RAIN); }
 else if (weather.indexOf("sunny") >= 0) { skycons.set("animated-icon", Skycons.CLEAR_DAY); }

J'ai découvert, grâce à divers tests, que cette méthode n'est pas infaillible à 100% mais qu'elle a suffisamment bien fonctionné pour que je puisse la suivre.

Vous pouvez consulter le code complet et les effets sur Codepen.

À emporter

Mon principal avantage de ce projet est que j'ai appris à accéder à chaque partie des données JSON renvoyées à partir de la réponse de l'API et à l'utiliser de différentes manières. Bien que ma méthodologie ait besoin d'être affinée, elle s'améliorera avec plus de pratique.

Et après…

Le prochain projet pour moi est l'application Wikipedia Viewer. J'en suis déjà à mi-chemin alors que j'écris cet article, il devrait donc être terminé jeudi au plus tard.

Si vous souhaitez me contacter ou me contacter, vous pouvez me trouver sur Twitter ou m'envoyer un e-mail. Merci d'avoir lu.