Sääsovelluksen rakentaminen

Viime viikolla käsittelin Free Code Camp's Show the Local Weather -hanketta, johon sisältyi sovelluksen rakentaminen, joka näytti säätä missä käyttäjä sattui olemaan.

Minun täytyi toteuttaa seuraavat käyttäjätarinat:

  • Käyttäjä voi tarkastella säätä nykyisessä sijainnissaan.
  • Käyttäjä voi vaihtaa lämpötilan yksikköä (Celsius tai Fahrenheit).
  • Sääkuvake tai taustakuva muuttuu sääolosuhteiden mukaan.

Päätin viedä sen hieman pidemmälle lisäämällä vielä yhden käyttäjätarinan

  • Käyttäjä voi etsiä säätietoja muista paikoista.

Design

Minulla oli joukko ideoita tämän sovelluksen suunnittelusta, ja tarkastelin muutamia valmiita projekteja (tietenkään tarkistamatta niiden koodia) yhteisöltä nähdäksesi, mitä muut ihmiset näyttivät sovelluksessaan ja miltä se näytti.

Lopullisen asettelun keksiminen oli hieman hankalaa, mutta minusta oli hyödyllistä päättää elementit, jotka halusin näyttää käyttäjälle ja rakentaa sieltä.

Tavoitteena oli pitää asiat yksinkertaisina. Päätin näyttää paikallisen ajan lisäksi vain lämpötilan ja sään kuvauksen.

Pidin myös animoidusta sääkuvakkeesta esimerkkiprojektissa ja tunsin, että se kuvasi paremmin nykyistä säätä kuin taustakuvaa, joten halusin ottaa sen käyttöön sovelluksessani.

Kuten tavallista, laitoin kaiken alas Workflowyni.

Kaikkien asetusten tekeminen oli melko suoraviivaista paitsi sopivan animoitujen kuvakkeiden löytäminen. Minun täytyi etsiä vähän ennen kuin löysin Skyconsin, mitä päädyin käyttämään.

Toinen asia, jonka kanssa kamppailin, oli löytää hyvä värimaailma sovellukselle, ja tämän kanssa melkein aina kamppailen. Kokeilin erilaisia ​​yhdistelmiä ennen lopullisen tuotteen laskeutumista.

Logiikka

Tarkasteltuani avoimen sään API-vastausta, ajattelin, että minun on hankittava käyttäjän pituusaste ja leveysaste, jotta voin näyttää säätietoja sivun latauksessa.

Helpoin tapa tehdä tämä oli käyttää HTML5 Geolocation -sovellusliittymää, joka oli melko yksinkertainen, ja se oli jo käsitelty opetussuunnitelman JSON- ja sovellusliittymät -osiossa.

Tallensin palautetut arvot jo ilmoitettuihin muuttujiin ja käytin niitä AJAX-pyynnön tekemiseen.

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 -sovellusliittymä antoi minulle tavan päivittää sijainti, lämpötila ja sää kuvaus, mutta minun piti silti löytää tapa päivittää paikallista aikaa. Pienen haun jälkeen löysin toisen sovellusliittymän osoitteesta Geonames.org, joka hoiti tämän.

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

Viimeinen asia, jonka tein, oli päivittää sääkuvake käyttäjän sijainnin tai kiinnostavan kaupungin olosuhteisiin. Päätin, että hyvä tapa tehdä tämä oli tarkistaa sään kuvaus ja muuttaa kuvake sen perusteella.

Joten pohdin muutamia mahdollisia skenaarioita, kuten kirkas taivas, pilvi, lumi, aurinkoinen, sade jne., Ja kirjoitin joukon ehdollisia lausuntoja tarkistaakseni, sisältyykö sääkuvaan yksi avainsanoista, ja päivitin sitten sääkuvakkeen.

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

Erilaisten testien avulla olen havainnut, että tämä menetelmä ei ole 100% typerä, mutta se toimi riittävän hyvin, jotta pysyisin kiinni siinä.

Voit tarkistaa koko koodin ja vaikutukset Codepeniin.

Avain takeaway

Suurin takeawayni tästä projektista on se, että opin kuinka käyttää jokaisen osan palautetuista JSON-tiedoista API-vastauksesta ja käyttää niitä eri tavoin. Vaikka metodologiani tarvitsevat jonkin verran tarkennusta, se paranee varmasti enemmän käytäntöjen avulla.

Mitä seuraavaksi…

Seuraava projekti minulle on Wikipedia Viewer -sovellus. Olen jo puolivälissä kirjoittaessani tätä artikkelia, joten sen pitäisi olla valmis viimeistään torstaina.

Jos haluat tavoittaa minut tai olla yhteydessä minuun, voit löytää minut Twitteristä tai lähettää minulle sähköpostia. Kiitos lukemisesta.