Erstellen einer Wetter-App

Letzte Woche habe ich mich mit dem Projekt "Show the Local Weather" von Free Code Camp befasst, bei dem eine App erstellt wurde, die das Wetter überall dort anzeigt, wo sich der Benutzer gerade befindet.

Ich musste die folgenden User Stories implementieren:

  • Der Benutzer kann das Wetter an seinem aktuellen Standort anzeigen.
  • Der Benutzer kann die Temperatureinheit (Celsius oder Fahrenheit) umschalten.
  • Das Wettersymbol oder Hintergrundbild ändert sich je nach Wetterbedingungen.

Ich beschloss, noch ein bisschen weiter zu gehen, indem ich eine weitere User Story hinzufügte

  • Der Benutzer kann nach Wetterinformationen anderer Orte suchen.

Design

Ich hatte eine Reihe von Ideen für das Design dieser App und habe mir einige abgeschlossene Projekte (natürlich ohne Überprüfung ihres Codes) aus der Community angesehen, um zu sehen, was andere Leute in ihrer App anzeigten und wie sie aussahen.

Das endgültige Layout zu erstellen war etwas schwierig, aber ich fand es hilfreich, die Elemente zu bestimmen, die ich für den Benutzer anzeigen und von dort aus erstellen wollte.

Hier war es das Ziel, die Dinge einfach zu halten. Ich beschloss, zusätzlich zur Ortszeit nur die Temperatur- und Wetterbeschreibung anzuzeigen.

Ich mochte auch das animierte Wettersymbol im Beispielprojekt und fand, dass es eine bessere Darstellung des aktuellen Wetters als ein Hintergrundbild ist, also wollte ich das in meine App implementieren.

Wie immer lege ich alles in meinen Workflowy.

Das Einrichten war ziemlich einfach, außer dass ein geeignetes animiertes Icon-Set gefunden wurde. Ich musste ein bisschen suchen, bevor ich Skycons fand, was ich letztendlich benutzte.

Das andere, mit dem ich zu kämpfen hatte, war, ein gutes Farbschema für die App zu finden, und damit habe ich fast immer zu kämpfen. Ich habe mit verschiedenen Kombinationen experimentiert, bevor ich das Endprodukt landete.

Logik

Nachdem ich mir eine Beispiel-API-Antwort von Open Weather angesehen hatte, stellte ich fest, dass ich den Längen- und Breitengrad des Benutzers ermitteln muss, um Wetterinformationen beim Laden der Seite bereitstellen zu können.

Der einfachste Weg, dies zu tun, war die Verwendung der HTML5-Geolocation-API, die ziemlich einfach war und bereits im Abschnitt JSON und APIs des Lehrplans behandelt wurde.

Ich habe die zurückgegebenen Werte in bereits deklarierten Variablen gespeichert und sie für die AJAX-Anforderung verwendet.

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);
 };

Die Open Weather API gab mir die Möglichkeit, den Standort, die Temperatur und die Wetterbeschreibung zu aktualisieren, aber ich musste noch einen Weg finden, um die Ortszeit zu aktualisieren. Nach einigem Suchen fand ich auf Geonames.org eine andere API, die sich darum kümmerte.

$.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); });

Als letztes habe ich das Wettersymbol über die Bedingungen am Standort oder in der gewünschten Stadt des Benutzers aktualisiert. Ich entschied mich dafür, die Wetterbeschreibung zu überprüfen und das Symbol darauf basierend zu ändern.

Daher habe ich einige mögliche Szenarien wie klaren Himmel, Wolken, Schnee, Sonne, Regen usw. in Betracht gezogen und eine Reihe von bedingten Anweisungen geschrieben, um zu überprüfen, ob die Wetterbeschreibung eines der Schlüsselwörter enthält, und dann das Wettersymbol zu aktualisieren.

//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); }

Ich habe durch verschiedene Tests festgestellt, dass diese Methode nicht 100% narrensicher ist, aber sie hat gut genug funktioniert, damit ich mich daran halten kann.

Sie können den vollständigen Code und die Auswirkungen auf Codepen überprüfen.

Schlüssel zum Mitnehmen

Meine wichtigste Erkenntnis aus diesem Projekt ist, dass ich gelernt habe, wie ich über die API-Antwort auf jeden Teil der zurückgegebenen JSON-Daten zugreifen und sie auf unterschiedliche Weise verwenden kann. Obwohl meine Methodik etwas verfeinert werden muss, wird sie mit mehr Übung sicherlich besser.

Was kommt als nächstes…

Das nächste Projekt ist für mich die Wikipedia Viewer App. Ich bin bereits in der Mitte, als ich diesen Artikel schreibe, sodass er spätestens am Donnerstag fertiggestellt sein sollte.

Wenn Sie mich erreichen oder mit mir in Verbindung treten möchten, können Sie mich auf Twitter finden oder mir eine E-Mail senden. Danke fürs Lesen.