Opbygning af en vejr-app

I sidste uge tacklede jeg Free Code Camp's Show the Local Weather-projektet, der involverede opbygning af en app, der viste vejret, hvor som helst brugeren tilfældigvis var.

Jeg var nødt til at implementere følgende brugerhistorier:

  • Brugeren kan se vejret på hans / hendes nuværende placering.
  • Brugeren kan skifte temperaturenhed (Celsius eller Fahrenheit).
  • Vejrikon eller baggrundsbillede ændres afhængigt af vejrforholdene.

Jeg besluttede at tage det lidt længere ved at tilføje endnu en brugerhistorie

  • Brugeren kan søge efter vejrinformation fra andre steder.

Design

Jeg havde en masse ideer til designet af denne app, og jeg kiggede på et par afsluttede projekter (uden selvfølgelig at kontrollere deres kode) fra samfundet for at se, hvad andre mennesker viste i deres app, og hvordan det så ud.

At komme med et endeligt layout var lidt vanskeligt, men jeg fandt det nyttigt at bestemme de elementer, jeg ønskede at vise for brugeren og bygge derfra.

At holde tingene enkle var målet her. Jeg besluttede at vise kun temperatur og vejrbeskrivelse ud over den lokale tid.

Jeg kunne også godt lide det animerede vejrikon i eksempelprojektet og følte, at det var en bedre repræsentation af det aktuelle vejr end et baggrundsbillede, så jeg ville implementere det i min app.

Som sædvanlig lægger jeg alt ned i min Workflowy.

Opsætningen af ​​alt var ret ligetil undtagen at finde et passende animeret ikon. Jeg var nødt til at søge lidt, før jeg fandt Skycons, hvilket jeg endte med at bruge.

Den anden ting, jeg kæmpede med, var at finde et godt farveskema til appen, og det er noget, jeg næsten altid kæmper med. Jeg eksperimenterede med forskellige kombinationer, før jeg landede det endelige produkt.

Logik

Efter at have set på et eksempel på et API-svar fra Open Weather, regnede jeg med, at jeg bliver nødt til at få brugerens længde- og breddegrad for at kunne tjene vejrinformation om sidebelastning.

Den nemmeste måde at gøre dette på var at bruge HTML5 Geolocation API, som var ret ligetil, det var allerede blevet dækket af det i JSON og API'erne i læseplanen.

Jeg lagrede de returnerede værdier i allerede deklarerede variabler og brugte dem til at fremsætte AJAX-anmodningen.

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

Open Weather API gav mig en måde at opdatere placering, temperatur og vejrbeskrivelse på, men jeg havde stadig brug for at finde en måde at opdatere den lokale tid på. Efter lidt søgning fandt jeg en anden API på Geonames.org, som tog sig af dette.

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

Den sidste ting jeg gjorde var at opdatere vejrikonet om forholdene i brugerens placering eller by af interesse. Jeg besluttede at en god måde at gøre dette på var at kontrollere vejrbeskrivelsen og ændre ikonet ud fra det.

Så jeg overvejede et par mulige scenarier som klar himmel, sky, sne, solskin, regn osv. Og skrev en masse betingede udsagn for at kontrollere, om vejrbeskrivelsen indeholdt et af nøgleordene og derefter opdatere vejrikonet.

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

Jeg har gennem forskellige tests opdaget, at denne metode ikke er 100% idiotsikker, men den fungerede godt nok til, at jeg kunne holde fast i den.

Du kan tjekke den fulde kode og effekter på Codepen.

Vigtigste takeaway

Min største takeaway fra dette projekt er, at jeg lærte at få adgang til hver del af de returnerede JSON-data fra API-svaret og bruge det på forskellige måder. Selvom min metode har brug for noget raffinering, er det bundet til at blive bedre med mere praksis.

Hvad er det næste ...

Det næste projekt for mig er Wikipedia Viewer-appen. Jeg er allerede halvvejs igennem, mens jeg skriver denne artikel, så den skal være afsluttet senest torsdag.

Hvis du vil nå ud eller oprette forbindelse til mig, kan du finde mig på Twitter eller e-maile mig. Tak for læsningen.