Jak wykorzystać API Weather Yahoo!

W 2006 roku, pracując w agencji projektowej w Cardiff w Walii, wpadłem na pomysł, aby na naszej stronie internetowej pojawiły się aktualne warunki pogodowe poza naszym biurem. Chciałem, aby nasza strona była w pełni wciągająca i pokazywała naszym odwiedzającym i klientom, czego doświadczamy w życiu codziennym, w czasie rzeczywistym.

Po przeprowadzeniu rozległych badań odkryłem, że najlepszym punktem wyjścia jest Yahoo! Weather API, ponieważ zapewnia warunki pogodowe w spójnym, nadającym się do wykorzystania formacie. W tamtym czasie jedynym sposobem na rzeczywiste przedstawienie pogody na stronie było użycie Flasha. Sam czas rozwoju wystarczył, aby odstraszyć pomysł od umysłów dyrektorów firmy i nigdy nie minął etap koncepcji.

Teraz, sześć lat później, będąc dyrektorem technicznym mojej firmy, powróciłem do tego pomysłu. Przeszukanie różnych stron internetowych, blogów i forów ujawniło, że nawet po sześciu latach nikt tak naprawdę nie zrobił tego, więc musielibyśmy stworzyć kod, żeby to zrobić. Również w ciągu sześciu lat od powstania pomysłu moje ambicje wzrosły. Nie chcę już tylko, żeby strona wyświetlała pogodę poza naszym biurem - chcę, żeby wyświetlała pogodę za oknem osoby oglądającej stronę.

Stworzyłem listę życzeń funkcji - zawierającą aktualizacje pogody na żywo, czasy zachodu i wschodu słońca, a także dzień i noc, a nawet cykle księżyca - i przekazałem je naszemu programistce, Stevenowi, aby tak się stało.

Po raz kolejny Yahoo Weather API okazało się najbardziej spójne, oferując bardzo dokładne kody dla różnych typów pogody. Dzięki tym informacjom moglibyśmy stworzyć tablicę, która mogłaby kontrolować wyświetlanie pogody.

Jednak dane Yahoo są równie dokładne, jak lokalizacja, z której byliśmy w stanie czerpać z witryny, a ze względu na słabości przeglądarki Internet Explorer firmy Microsoft nie byliśmy w stanie użyć geolokalizacji, aby uzyskać dokładną lokalizację dla każdego, kto przegląda stronę. W związku z tym musieliśmy zadowolić się następną najlepszą rzeczą i korzystać z witryny IPInfoDB w celu pobrania najbliższego kapitału lub najbliższego dużego miasta, w oparciu o adres IP użytkownika.

W Stanach Zjednoczonych zwykle skutkuje to kapitałem dowolnego państwa, w którym mieszka osoba przeglądająca witrynę. W Wielkiej Brytanii domyślnie jest to Londyn, niezależnie od tego, w którym miejscu w Wielkiej Brytanii się znajduje; mam nadzieję, że Microsoft kiedyś nadgoni resztę świata przeglądarek i pozwoli nam korzystać z geolokalizacji.

Korzystając z adresu IP użytkownika i wprowadzając go do IPInfoDB, byliśmy w stanie dokonać ekstrapolacji kraju, stanu lub prowincji oraz miasta lub miejscowości osoby oglądającej stronę internetową. Przekazanie tego do interfejsu API Yahoo dało nam aktualną pogodę dla tej konkretnej lokalizacji.

Czas zachodu i wschodu słońca jest dokładny każdego dnia i jest obliczany w locie na podstawie długości i szerokości geograficznej, również pochodzącej z Yahoo Weather API.

Wreszcie jest faza księżycowa, która, mimo że jest oparta tylko na dacie jako zmiennej, okazała się najbardziej skomplikowanym obliczeniem wszystkich.

Niech padnie śnieg, niech spadnie śnieg ...

Taka jest teoria. Teraz, jak to się stało.

Pierwszym krokiem było podzielenie typów pogody pobranych z Yahoo! do tablicy, której możemy użyć do kontrolowania efektów na stronie. Każdy z 47 różnych typów pogody Yahoo ma własną tablicę, którą podzieliliśmy na cztery liczby. Pierwszy zestaw liczb dyktuje zasięg w chmurze, od jasnego dnia do ciemnych, ciężkich chmur. Druga liczba odnosi się do deszczu, począwszy od braku deszczu do intensywnych opadów. Trzecia liczba dotyczy różnych dodatkowych typów pogody, takich jak śnieg i błyskawice. Wreszcie, czwarta liczba dotyczy tego, co nasz projektant Steven nazywa "efektami sosu", takimi jak mgła, kurz i mgła.

$weatherarray[0]=array('tornado',3,3,5,3);$weatherarray[1]=array('tropical storm',3,3,5,3);$weatherarray[2]=array('hurricane',3,2,4,3);$weatherarray[3]=array('severe thunderstorms',3,3,5,3);$weatherarray[4]=array('thunderstorms',3,2,5,2);$weatherarray[5]=array('mixed rain and snow',2,1,1,0);$weatherarray[6]=array('mixed rain and sleet',2,1,1,0);$weatherarray[7]=array('mixed snow and sleet',2,1,2,0);$weatherarray[8]=array('freezing drizzle',1,1,1,0);$weatherarray[9]=array('drizzle',1,1,0,0);$weatherarray[10]=array('freezing rain',1,2,1,0);$weatherarray[11]=array('showers',2,2,0,0);$weatherarray[12]=array('showers',2,2,0,0);$weatherarray[13]=array('snow flurries',1,0,2,1);$weatherarray[14]=array('light snow showers',1,0,2,1);$weatherarray[15]=array('blowing snow',1,0,2,2);$weatherarray[16]=array('snow',1,0,2,0);$weatherarray[17]=array('hail',1,0,4,0);$weatherarray[18]=array('sleet',1,1,4,0);$weatherarray[19]=array('dust',0,0,0,5);$weatherarray[20]=array('foggy',0,0,0,4);$weatherarray[21]=array('haze',0,0,0,5);$weatherarray[22]=array('smoky',0,0,0,5);$weatherarray[23]=array('blustery',1,0,0,2);$weatherarray[24]=array('windy',1,0,0,2);$weatherarray[25]=array('cold',1,0,0,0);$weatherarray[26]=array('cloudy',2,0,0,0);$weatherarray[27]=array('mostly cloudy (night)',1,0,0,0);$weatherarray[28]=array('mostly cloudy (day)',1,0,0,0);$weatherarray[29]=array('partly cloudy (night)',1,0,0,0);$weatherarray[30]=array('partly cloudy (day)',1,0,0,0);$weatherarray[31]=array('clear (night)',0,0,0,0);$weatherarray[32]=array('sunny',0,0,0,0);$weatherarray[33]=array('fair (night)',0,0,0,0);$weatherarray[34]=array('fair (day)',0,0,0,0);$weatherarray[35]=array('mixed rain and hail',1,1,4,1);$weatherarray[36]=array('hot',0,0,0,0);$weatherarray[37]=array('isolated thunderstorms',3,2,5,2);$weatherarray[38]=array('scattered thunderstorms',3,2,5,2);$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);$weatherarray[40]=array('scattered showers',3,2,0,2);$weatherarray[41]=array('heavy snow',1,0,3,0);$weatherarray[42]=array('scattered snow showers',1,0,2,0);$weatherarray[43]=array('heavy snow',1,0,3,0);$weatherarray[44]=array('partly cloudy',1,0,0,0);$weatherarray[45]=array('thundershowers',3,2,5,2);$weatherarray[46]=array('snow showers',1,0,2,0);$weatherarray[47]=array('isolated thundershowers',3,2,5,2);$weatherarray[3200]=array('not available',0,0,0,0);

Aby ograniczyć i tak już ciężki kod i zdjęcia do minimum, zdecydowaliśmy się na recykling tych samych obrazów, gdy tylko było to możliwe. Na przykład jest tylko jedna grafika deszczu i jest kontrolowana na podstawie informacji z Yahoo !. Jeśli grafika deszczowa ma być lekka, ustawia się ją z mniejszą kryciem, aby była lżejsza:

switch ( $effect1) {case 0:$weathercode.= 'jQuery('#rain').css("opacity", "0.0");';break;case 1:$weathercode.= 'jQuery('#rain').css("opacity", "0.10");';break;case 2:$weathercode.= 'jQuery('#rain').css("opacity", "0.30");';break;case 3:$weathercode.= 'jQuery('#rain').css("opacity", "0.50");';break;}

Strzeżcie się księżyca

Natknęliśmy się, na szczęście, na obliczenia dotyczące cyklu księżyca Blog Stephena A. Zarkosa . Zgodnie z naszym pragnieniem utrzymania obrazów na minimalnym poziomie, fazę księżyca wykonano za pomocą arkusza pikselowego ukazującego 10 różnych faz księżyca. Korzystając z obliczeń Zarkosa, poniższy kod wybiera odpowiednią część arkusza piksela do wyświetlenia, zapewniając, że poprawny cykl księżyca jest zawsze wyświetlany na naszej stronie internetowej.

background-position: px 0;

Oglądaj zachód słońca w czasie rzeczywistym

Ostatnią częścią projektu i najbardziej ekscytującym wizualnie jest zachód i wschód słońca w czasie rzeczywistym. Jak wspomniano, wykorzystuje to długość i szerokość geograficzną najbliższej stolicy osoby oglądającej stronę internetową, aby ekstrapolować dla nich czasy zachodu i wschodu słońca. Oznacza to, że ktoś, kto spogląda na stronę internetową w Los Angeles, zobaczy wschodzące słońce i ustawi się trzy godziny po tym, jak ktoś obejrzy tę stronę w Nowym Jorku.

Zachód i wschód słońca składają się z trzech osobnych efektów panoramicznych, które kolejno rozpływają się w sobie. Podczas zachodu słońca scena dzienna powoli rozpływa się w pomarańczowej scenie, po czym rozprasza się w nocną scenerię. Podczas gdy tak się dzieje, grafika słońca (która zawsze jest obecna nad zakładką przeglądarki) zaczyna opadać i "ustawiać". Cały proces trwa dokładnie 300 sekund.

Czas wygaśnięcia (wyprowadzony z długości i szerokości geograficznej) jest konwertowany na uniksowy znacznik czasu, który jest następnie zapisywany jako zmienna. Bieżący czas jest również przekształcany w uniksowy znacznik czasu, a różnica między tymi dwoma czasami jest używana dla funkcji limitu czasu jQuery. To właśnie tworzy przejście między tematem dziennym i nocnym.

jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});});   

Standardowe efekty pogodowe, niezależnie od tego, jakie są, nadal rozgrywają się, gdy słońce zachodzi i wschodzi. Może to prowadzić do całkiem pięknych przejść, szczególnie gdy pada bardzo ciężko.

Możesz zobaczyć kod w akcji na Engage Strona internetowa .

Nasza prognoza na jutro

Ponieważ jest to system, który sami opracowaliśmy, nieustannie poszukujemy sposobów jego ulepszenia i mamy dwie funkcje, które chcieliśmy dodać, ponieważ system pogodowy został uruchomiony w sierpniu tego roku.

Pierwsza to coś, co właśnie dodaliśmy; ustawienie lokalizacji na podstawie plików cookie, dzięki któremu odwiedzający witrynę może dokładniej wyświetlić swoją prognozę pogody, wprowadzając swoje miasto, miasto lub kod pocztowy, aby pobrać określone informacje pogodowe dla ich obszaru. Było to bardzo łatwe do wykonania, ponieważ API pogody w Yahoo akceptuje kody pocztowe i miasta jako dane wejściowe, a także zapisuje połączenie do iponfodb.com. Przetestowaliśmy to w różnych miastach na całym świecie, od północnej Kanady po Wyspy Antypodów u wybrzeży Nowej Zelandii - więc możesz zobaczyć, jaka jest pogoda w dowolnym miejscu na świecie.

Drugą cechą, którą wprowadzimy w Nowy Rok, jest skrzynka kontrolna, dzięki której odwiedzający mogą wprowadzać efekty pogodowe według własnego uznania, więc kombinacje różnych typów pogody są widoczne niezależnie od pogody. Na przykład odwiedzający będą mogli zwiększyć intensywność deszczu z 0% do 100% w 10% przyrostach. Obejmuje to również wyzwolenie słońca i wschodu słońca, więc każdy może grać na Ed Harris z The Truman Show i tworzyć wschód, kiedy tylko zechce.

Czy korzystałeś z interfejsu API Weather Yahoo! Co z nim zbudowałeś? Daj nam znać w komentarzach poniżej.

Wyróżniony obraz / miniatura, obraz pogodowy przez Shutterstock.