de Ayo Isaiah

Construirea unei aplicații meteo cu Geolocalizare și API-uri

Săptămâna trecută am abordat tabăra Free Code Afișați vremea locală proiect, care presupunea construirea unei aplicații care să afișeze vremea oriunde s-a întâmplat să se afle utilizatorul.

A trebuit să implementez următoarele povești ale utilizatorilor:

• Utilizatorul poate vizualiza vremea în locația sa curentă.
• Utilizatorul poate comuta unitatea de temperatură (Celsius sau Fahrenheit).
• Pictograma meteo sau imaginea de fundal se vor schimba în funcție de condițiile meteorologice.

Am decis să merg un pic mai departe adăugând încă o poveste de utilizator

• Utilizatorul poate căuta informații meteo din alte locuri.

Proiecta

Am avut o grămadă de idei pentru proiectarea acestei aplicații și m-am uitat la câteva proiecte finalizate (fără a le verifica codul, bineînțeles) din comunitate pentru a vedea ce afișau ceilalți oameni în aplicația lor și cum arăta.

Venirea cu un aspect final a fost cam dificil, dar mi s-a părut util să decid elementele pe care doream să le afișez utilizatorului și să le construiesc de acolo.

Menținerea lucrurilor simple a fost scopul aici. Am decis să arăt doar temperatura și descrierea vremii pe lângă ora locală.

Mi-a plăcut și pictograma vremii animate din exemplu de proiect și am simțit că este o reprezentare mai bună a vremii actuale decât o imagine de fundal, așa că am vrut să o implementez în aplicația mea.

Ca de obicei, am pus totul în mine Flux de lucru.

Configurarea a fost destul de simplă, cu excepția găsirii unui set de pictograme animate adecvat. A trebuit să caut puțin înainte să găsesc Skycons ceea ce am ajuns să folosesc.

Celălalt lucru cu care m-am luptat a fost să găsesc o schemă de culori bună pentru aplicație, iar acest lucru este aproape întotdeauna cu care mă lupt. Am experimentat diferite combinații înainte de a ateriza produsul final.

Logică

După ce am analizat un exemplu de răspuns API de la Vremea deschisă, M-am gândit că va trebui să obțin longitudinea și latitudinea utilizatorului pentru a putea furniza informații meteo la încărcarea paginii.

Cel mai simplu mod de a face acest lucru a fost să folosești HTML5 Geolocalizare API, care era destul de simplă, deja fusese acoperită în secțiunea JSON și API din curriculum.

Am stocat valorile returnate în variabile deja declarate și le-am folosit pentru a face cererea AJAX.

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("http://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-ul Open Weather mi-a oferit o modalitate de a actualiza locația, temperatura și descrierea vremii, dar totuși trebuia să găsesc o modalitate de actualizare a orei locale. După un pic de căutare, am găsit un alt API la Geonames.org care s-a ocupat de asta.

$.getJSON('http://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);    });

Ultimul lucru pe care l-am făcut a fost să actualizez pictograma meteo cu privire la condițiile din locația sau orașul de interes al utilizatorului. Am decis că o modalitate bună de a face acest lucru a fost să verific descrierea vremii și să schimb pictograma pe baza acesteia.

Așadar, am luat în considerare câteva scenarii posibile, cum ar fi cerul senin, norul, zăpada, soarele, ploaia etc.

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

Am descoperit, prin diferite teste, că această metodă nu este 100% infailibilă, dar a funcționat suficient de bine pentru ca eu să rămân cu ea.

Puteți verifica codul complet și efectele Codepen.

Cheie de luat masa

Scopul meu principal din acest proiect este că am învățat cum să accesez fiecare parte a datelor JSON returnate din răspunsul API și să le folosesc în moduri diferite. Deși metodologia mea are nevoie de ceva rafinament, va trebui să se îmbunătățească cu mai multă practică.

Ce urmeaza…

Următorul proiect pentru mine este Aplicația Wikipedia Viewer. Sunt deja la jumătatea drumului în timp ce scriu acest articol, deci ar trebui să fie finalizat cel târziu până joi.

Dacă doriți să contactați sau să vă conectați cu mine, mă puteți găsi pe Stare de nervozitate sau trimiteți-mi un e-mail. Mulțumesc pentru lectură.