Ilmarakenduse ehitamine

Eelmisel nädalal tegelesin projektiga Free Code Camp's Show the Local Weather, mis hõlmas rakenduse ehitamist, mis kuvas ilma kõikjal, kus kasutaja viibis.

Pidin juurutama järgmised kasutajalood:

  • Kasutaja saab ilma vaadata oma praeguses asukohas.
  • Kasutaja saab temperatuuriühikut (Celsiuse või Fahrenheiti järgi) vahetada.
  • Ilmaikoon või taustapilt muutuvad sõltuvalt ilmastikutingimustest.

Otsustasin seda natuke edasi arendada, lisades veel ühe kasutajaloo

  • Kasutaja saab otsida ilmateavet teistest kohtadest.

Kujundus

Mul oli selle rakenduse kujundamiseks hunnik ideid ja vaatasin kogukonnalt mõnda lõpetatud projekti (loomulikult nende koodi kontrollimata), et näha, mida teised inimesed nende rakenduses kuvasid ja kuidas see välja nägi.

Lõpliku kujunduse väljamõtlemine oli veidi keeruline, kuid minu arvates oli kasulik otsustada elemendid, mida tahtsin kasutaja jaoks kuvada ja sealt üles ehitada.

Siin oli eesmärk hoida asju lihtsana. Otsustasin lisaks kohalikule ajale näidata ainult temperatuuri ja ilmakirjeldust.

Samuti meeldis mulle näidisprojekti animeeritud ilmaikoon ja tundsin, et see kujutab praegust ilma paremini kui taustpilti, nii et tahtsin selle oma rakendusse rakendada.

Nagu tavaliselt, panin kõik oma Workflowy alla.

Kõigi seadistamine oli üsna lihtne, välja arvatud sobiva animeeritud ikoonikomplekti leidmine. Pidin natuke otsima, enne kui leidsin Skyconsi, mida ma lõpuks kasutasin.

Teine asi, millega ma vaeva nägin, oli rakenduse jaoks hea värvilahenduse leidmine ja see on asi, millega ma peaaegu alati võitlen. Enne lõpptoote maandumist katsetasin erinevaid kombinatsioone.

Loogika

Pärast Open Weatheri API vastuse näite vaatamist arvasin, et pean hankima kasutaja pikkus- ja laiuskraadi, et saaksin ilmateavet lehe laadimisel esitada.

Lihtsaim viis seda teha oli HTML5 Geolocation API kasutamine, mis oli üsna lihtne, see oli juba hõlmatud õppekava jaotises JSON ja API-d.

Salvestasin tagastatud väärtused juba deklareeritud muutujatesse ja kasutasin neid AJAX-i päringu tegemiseks.

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 andis mulle võimaluse värskendada asukohta, temperatuuri ja ilmakirjeldust, kuid mul oli siiski vaja leida viis kohaliku aja värskendamiseks. Pärast natuke otsimist leidsin Geonames.org-ist veel ühe API, kes selle eest hoolitses.

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

Viimase asjana uuendasin ilmaikooni vastavalt kasutaja asukohas või huvipakkuvas linnas valitsevatele tingimustele. Otsustasin, et selleks on hea viis kontrollida ilmakirjeldust ja muuta selle põhjal ikooni.

Seetõttu kaalusin mõnda võimalikku stsenaariumi, nagu selge taevas, pilv, lumi, päikesepaisteline, vihm jne, ja kirjutasin hulga tingimuslikke avaldusi, et kontrollida, kas ilmakirjeldus sisaldab ühte märksõna, ja seejärel värskendada ilmaikooni.

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

Erinevate testide abil olen avastanud, et see meetod ei ole 100% lollikindel, kuid toimis minu jaoks piisavalt hästi.

Codepenil saate kontrollida kogu koodi ja efekte.

Võtme kaasa võtmine

Minu peamine väljavõte sellest projektist on see, et õppisin API vastusest tagastatud JSON-i andmete igale osale juurde pääsema ja neid erinevatel viisidel kasutama. Kuigi minu metoodika vajab mõningast täpsustamist, saab see kindlasti suurema praktika abil paremaks.

Mis järgmiseks…

Minu jaoks on järgmine projekt Wikipedia Vieweri rakendus. Olen juba poole peal, kui seda artiklit kirjutan, nii et see peaks valmima hiljemalt neljapäevaks.

Kui soovite minuga ühendust võtta või minuga ühendust võtta, võite mind leida Twitterist või saata mulle meili. Täname lugemast.