A múlt héten foglalkoztam a Free Code Camp Show the Local Weather projektjével, amely egy olyan alkalmazás felépítését foglalta magában, amely megmutatta az időjárást bárhol is volt a felhasználó.
A következő felhasználói történeteket kellett megvalósítanom:
- A felhasználó megtekintheti az időjárást az aktuális tartózkodási helyén.
- A felhasználó átválthatja a hőmérsékleti egységet (Celsius vagy Fahrenheit).
- Az időjárás ikon vagy a háttérkép az időjárási viszonyoktól függően változik.
Úgy döntöttem, hogy tovább viszem egy felhasználói történet hozzáadásával
- A felhasználó időjárási információkat kereshet más helyeken.
Tervezés
Van egy csomó ötletem az alkalmazás megtervezéséhez, és megnéztem néhány befejezett projektet (természetesen a kódjuk ellenőrzése nélkül) a közösségtől, hogy megnézzem, más emberek mit jelenítenek meg alkalmazásukban, és hogy néz ki.
A végleges elrendezés elkészítése kissé trükkös volt, de hasznosnak találtam, hogy eldöntsem azokat az elemeket, amelyeket a felhasználó számára meg akarok jeleníteni, és onnan építem fel.
A dolgok egyszerűségének megőrzése volt a cél itt. Úgy döntöttem, hogy a helyi idő mellett csak a hőmérsékletet és az időjárási leírást mutatom.
Tetszett az animációs időjárás ikon a példa projektben, és úgy éreztem, hogy ez jobban ábrázolja az aktuális időjárást, mint egy háttérkép, ezért ezt szerettem volna megvalósítani az alkalmazásomban.
Szokás szerint mindent letettem a Workflowy-ba.
Mindennek a beállítása nagyon egyszerű volt, kivéve a megfelelő animált ikonkészlet megtalálását. Kicsit kutatnom kellett, mire megtaláltam a Skycons-t, és végül ezt használtam.
A másik dolog, amellyel küzdöttem, az volt, hogy megtaláltam az alkalmazás jó színvilágát, és ezzel szinte mindig küzdök. Különféle kombinációkkal kísérleteztem, mielőtt leszálltam a végterméket.
Logika
Miután megnéztem az Open Weather példáját az Open Weather-től, arra gondoltam, hogy meg kell szereznem a felhasználó hosszúságát és szélességét, hogy az időjárási információkat megjeleníthessem az oldal betöltésekor.
Ennek legegyszerűbb módja a HTML5 Geolocation API használata volt, amely meglehetősen egyszerű volt, és amelyet már a tanterv JSON és API-k szakaszában lefedtünk.
A visszaküldött értékeket már deklarált változókban tároltam, és felhasználtam az AJAX kérés elkészítéséhez.
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); };Az Open Weather API lehetőséget adott a hely, a hőmérséklet és az időjárás leírásának frissítésére, de még mindig meg kellett találnom a helyi idő frissítésének módját. Kis keresés után találtam egy másik API-t a Geonames.org oldalon, amely gondoskodott erről.
$.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); });Utoljára frissítettem az időjárás ikont a felhasználó tartózkodási helyének vagy az érdekes városnak a körülményeivel. Úgy döntöttem, hogy ennek jó módja az időjárási leírás ellenőrzése, és ez alapján az ikon megváltoztatása.
Megvizsgáltam néhány lehetséges forgatókönyvet, mint például tiszta ég, felhő, hó, napsütés, eső stb., És írtam egy csomó feltételes nyilatkozatot annak ellenőrzésére, hogy az időjárás leírása tartalmaz-e kulcsszavakat, majd frissítsem az időjárás ikont.
//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); }Különböző tesztek során rájöttem, hogy ez a módszer nem 100% -ban bolondbiztos, de elég jól működött ahhoz, hogy ragaszkodjak hozzá.
A teljes kódot és az effektusokat a Codepenen tudja megvásárolni.
Kulcs elvihető
A legfontosabb elvonásom ettől a projekttől az, hogy megtanultam, hogyan férjek hozzá a visszaküldött JSON-adatok egyes részeihez az API-válaszból, és hogyan használjam őket különböző módon. Noha a módszertanom némi finomításra szorul, ez biztosan jobb lesz a további gyakorlatokkal.
Mi a következő lépés…
A következő projekt számomra a Wikipedia Viewer alkalmazás. Már a felénél járok, amikor ezt a cikket írom, így legkésőbb csütörtökig be kell fejeznie.
Ha kapcsolatba akar lépni velem, vagy kapcsolatba akar lépni velem, megtalálhat a Twitteren vagy e-mailben. Köszönöm, hogy elolvasta.