Astăzi vom utiliza localizarea HTML5-API pentru a oferi vizitatorilor o prognoză meteo personalizată. Utilizând jQuery, vom trimite solicitarea AJAX către două aplicații API populare de la Yahoo pentru a obține informații geografice suplimentare și o prognoză meteo. În exemplul nostru de astăzi, s-au folosit și icoane din setul de climat.
Obținerea cheii aplicației
Yahoo oferă un set imens de API-uri utile. pe care dezvoltatorii o pot folosi gratuit. Singura cerință este că trebuie să înregistrați aplicația dvs. în panoul dezvoltatorului din serviciu. Procesul de înregistrare este foarte simplu și simplu și, prin urmare, puteți primi ID-ul aplicației (trebuie căutat sub titlul aplicației). Veți avea nevoie de acest număr mai târziu în cursul manualului.
Ceea ce avem nevoie pentru a organiza un site web cu prognoza meteo:
* Mai întâi, folosim API-ul Geolocation, care este susținut de majoritatea browserelor moderne. API-ul va cere utilizatorului să introducă informații despre locație și să returneze datele sub formă de coordonate GPS.
* Apoi, vom trimite o cerere la API-ul PlaceFinder de la Yahoo introducând coordonatele de mai sus în interogare. Acest lucru ne va da numele orașului, al țării și al văii - un cod special folosit pentru a identifica orașul în prognoza meteo.
* În cele din urmă, trimitem o solicitare către API-ul Meteo de la Yahoo cu șoferul introdus. Acest lucru ne va ajuta să obținem date privind condițiile meteorologice curente, precum și prognoza meteo pentru următoarele zile.
Excelent! Acum trebuie să începem dezvoltarea codului HTML.
Vom începe, probabil, cu un document HTML5 gol, în secțiunea cap, în care vom adăuga linkuri către foile de stil și două fonturi din biblioteca Webfonts de la Google. În corpul documentului, adăugați antetul H1 și marcajele pentru glisorul pentru prognoza meteo.
Înainte de a închide eticheta corporală, trebuie să adăugăm cea mai recentă versiune a jQuery și fișierul scriptului nostru script.js, la care vom analiza ulterior textul.
Primul pas este definirea a două variabile de configurare în /assets/js/script.js:
Acestea sunt introduse ca parametri cu solicitări AJAX despre locație și API pentru obținerea datelor meteorologice.
Urmând lista de mai sus, acum ar trebui să folosim Geolocația HTML5-API pentru a obține coordonatele GPS. Acest API este suportat de toate browserele moderne, inclusiv browserele IE9 și mobile. Pentru a le folosi, trebuie să verificăm dacă obiectul de navigație global are un parametru de geolocație. Dacă da, numim metoda getCurrentPosition, efectuând și două funcții pentru gestionarea evenimentelor care sunt responsabile de execuția și eroarea de succes. Să ne uităm la codul corespunzător din script.js, care efectuează această acțiune:
Funcția locationSuccess este una prin care trimitem în prezent cereri către API de la Yahoo. Funcția locati # 111; nerror trece un obiect de eroare specificând cauza erorii. De asemenea, folosim funcția helper showError pentru a afișa mesaje de eroare pe ecran.
Versiunea completă a locațieiSuccess arată astfel:
API-ul PlaceFinder returnează rezultatele ca un JSON pur. Dar, deoarece se află într-un alt domeniu, numai browserele care suportă CORS (partajarea resurselor de origine încrucișată) o pot procesa. Majoritatea browserelor moderne care acceptă localizarea geografică suportă și CORS, cu excepția IE9 și Opera, ceea ce înseamnă că exemplul nostru de astăzi nu va funcționa în aceste browsere.
De asemenea, trebuie remarcat faptul că API-ul meteorologic ne readuce prognoza doar pentru două zile, ceea ce limitează ușor utilizarea aplicației web, dar acest lucru nu poate fi ocolit.
API Vremea vom folosi doar pentru a obține date de temperatură, dar ne oferă, de asemenea, informații suplimentare pe care le-ar putea fi utile. Puteți experimenta cu API și puteți vedea răspunsurile în consola YQL.
După ce obținem datele despre vreme, sunăm funcția addWeather, care creează un nou element LI în lista #scroller neordonate.
Acum trebuie să ascultăm clicurile pe săgețile "înainte" și "înapoi" și, prin urmare, deplasăm cursorul pentru a afișa ziua dorită în previziune.
Și pe această prognoză meteo simplă este gata! Toate împreună vă puteți uita în fișierul /assets/js/script.js. Nu vom discuta problema aici, dar puteți studia /assets/css/styles.css.
În acest exemplu, ați învățat cum să vă dezvoltați propriul site de prognoză meteo folosind API-urile Geolocation, Weather and Places helper de la Yahoo. Exemplul nostru va funcționa în majoritatea browserelor moderne și pe multe dispozitive mobile.
Articole similare
-
Creație - frumoasă - adresă CPU pentru un site pe yii2 folosind clasa de reguli pentru urlmanager
-
Utilizând Expertul interogare pentru a crea interogări simple cu gruparea datelor
Trimiteți-le prietenilor: