Izrada vremenske aplikacije

Prošli tjedan bavio sam se projektom Free Code Camp Show the Local Weather, koji je obuhvaćao izgradnju aplikacije koja prikazuje vrijeme gdje god se korisnik nalazio.

Morao sam implementirati sljedeće korisničke priče:

  • Korisnik može vidjeti vrijeme na svom trenutnom mjestu.
  • Korisnik može prebacivati ​​temperaturnu jedinicu (Celzijus ili Fahrenheit).
  • Ikona vremena ili pozadinska slika promijenit će se ovisno o vremenskim uvjetima.

Odlučio sam otići malo dalje dodavanjem još jedne korisničke priče

  • Korisnik može tražiti vremenske informacije drugih mjesta.

Oblikovati

Imao sam hrpu ideja za dizajn ove aplikacije i pogledao sam nekoliko dovršenih projekata (bez provjere njihovog koda, naravno) iz zajednice kako bih vidio što drugi ljudi prikazuju u svojoj aplikaciji i kako to izgleda.

Dolazak do konačnog izgleda bio je pomalo zeznut, ali bilo mi je korisno odlučiti o elementima koje sam želio prikazati korisniku i odatle graditi.

Cilj je bio zadržati jednostavnost stvari. Odlučio sam prikazati samo opis temperature i vremena uz lokalno vrijeme.

Također mi se svidjela animirana ikona vremena u primjeru projekta i smatrao sam da je to bolji prikaz trenutnog vremena od pozadinske slike, pa sam to želio implementirati u svoju aplikaciju.

Kao i obično, sve sam stavio u svoj Workflowy.

Sve je bilo postavljeno prilično izravno, osim pronalaska odgovarajućeg animiranog skupa ikona. Morao sam malo potražiti prije nego što sam pronašao Skycons što sam na kraju i iskoristio.

Druga stvar s kojom sam se borio bila je pronalaženje dobre sheme boja za aplikaciju, a to je nešto s čime se gotovo uvijek borim. Eksperimentirao sam s različitim kombinacijama prije slijetanja konačnog proizvoda.

Logika

Nakon pregleda primjera API odgovora iz Open Weather-a, shvatio sam da ću trebati dobiti zemljopisnu dužinu i širinu korisnika da bih mogao poslužiti vremenske informacije prilikom učitavanja stranice.

Najlakši način da se to učini bio je korištenje HTML5 API za geolokaciju, koji je bio prilično jednostavan, već je bio pokriven u odjeljku JSON i API-ja kurikuluma.

Vraćene vrijednosti pohranio sam u već deklarirane varijable i upotrijebio ih za izradu AJAX zahtjeva.

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

API za otvoreno vrijeme dao mi je način da ažuriram lokaciju, temperaturu i opis vremena, ali svejedno sam trebao pronaći način za ažuriranje lokalnog vremena. Nakon malo pretraživanja pronašao sam još jedan API na Geonames.org koji se pobrinuo za ovo.

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

Posljednje što sam učinio bilo je ažuriranje ikone vremena o uvjetima na korisnikovom mjestu ili gradu od interesa. Odlučio sam da je dobar način za to provjeriti opis vremena i na temelju toga promijeniti ikonu.

Stoga sam razmotrio nekoliko mogućih scenarija kao što su vedro nebo, oblak, snijeg, sunčano, kiša itd. I napisao hrpu uvjetnih izjava kako bih provjerio sadrži li opis vremena jednu od ključnih riječi, a zatim ažurirao ikonu vremena.

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

Kroz razne testove otkrio sam da ova metoda nije 100% sigurna, ali je djelovala dovoljno dobro da je se pridržavam.

Možete provjeriti cijeli kôd i učinke na Codepenu.

Ključ za poneti

Moje glavno iznošenje iz ovog projekta je to što sam naučio kako pristupiti svakom dijelu vraćenih JSON podataka iz API odgovora i koristiti ga na različite načine. Iako je mojoj metodologiji potrebno malo pročišćavanja, sigurno će biti bolje s više prakse.

Što je sljedeće…

Sljedeći projekt za mene je aplikacija Wikipedia Viewer. Već sam na pola puta dok pišem ovaj članak, pa bi trebao biti završen najkasnije do četvrtka.

Ako želite kontaktirati ili se povezati sa mnom, možete me pronaći na Twitteru ili mi poslati e-poštu. Hvala na čitanju.