Hogyan használhatjuk a geolocation api és api-t a yahoo-ból, hogy létrehozzunk egy egyszerű időjárás weboldalt
Ma használjuk a HTML5-API földrajzi elhelyezkedését, hogy a látogatók személyre szabott időjárás-előrejelzést nyújtsanak. A jQuery használatával elküldjük az AJAX kérést a Yahoo két népszerű API-jába, hogy további földrajzi adatokat és időjárás-előrejelzést kapjunk. Ma a mai példánkban a klimakonok ikonjait is használják.
Az alkalmazáskulcs megszerzése
A Yahoo számos hasznos API-t kínál. amelyet a fejlesztők ingyen használhatnak. Az egyetlen követelmény az, hogy regisztrálnia kell az alkalmazást a fejlesztő panelben a szolgáltatásból. A regisztrációs folyamat nagyon egyszerű és egyszerű, így megkaphatja az alkalmazás azonosítóját (az alkalmazás címében kell keresni). Ezt a számot a kézikönyv későbbi részében kell megadnia.
Amire szükségünk van az időjárás előrejelzésére szolgáló weboldal megszervezéséhez:
* Először a Geolocation API-t használjuk, amelyet a legmodernebb böngészők támogatnak. Az API fel fogja kérni a felhasználót, hogy adja meg a helyadatokat, és az adatokat GPS-koordináták formájában adja vissza.
* Ezután kérést fogunk tenni a PlaceFinder API-nak a Yahoo-tól a fenti koordináták lekérdezésével. Ez megadja nekünk a város nevét, az országot és a sokat - egy különleges azonosítót, amely a várost az időjárás előrejelzésében azonosítja.
* Végül kérést küldünk a Weather API-nak a Yahoo-tól a beírt string woeid-rel. Ez segít nekünk az aktuális időjárási viszonyokról, valamint az elkövetkező napok időjárás-előrejelzéséről.
Nagy! Most meg kell kezdeni a HTML-kód fejlesztését.
Talán elkezdünk egy üres HTML5-dokumentummal, amelynek fejlécében a Google Webfonts könyvtárából kétféle betűtípussal bővítjük a stíluslapjainkat és a két betűtípust. A dokumentum testében adja hozzá a H1 fejlécet és az időjárás előrejelző csúszkájának jelölését.
A testcímke bezárása előtt meg kell adnunk a jQuery legújabb verzióját és a script.js parancsfájl fájlját, amelyet később megnézünk a szövegben.
Az első lépés az, hogy meghatározzunk két konfigurációs változót a /assets/js/script.js fájlban:
Paraméterként szerepelnek az AJAX kérésekről a helyről és az API-ról az időjárási adatok megszerzéséhez.
A fenti listát követve a GPS-koordináták beszerzéséhez a HTML5-API földrajzi helyet kell használnunk. Ezt az API-t minden modern böngésző támogatja, beleértve az IE9-et és a mobil böngészőket is. Ennek használatához meg kell győződnünk arról, hogy a globális navigációs objektumnak van-e geolokációs paramétere. Ha igen, hívjuk a getCurrentPosition módszert, és két olyan függvényt is végrehajtunk, amelyek a sikeres végrehajtásért és hibáért felelős események kezeléséért felelősek. Nézzük meg a script.js megfelelő kódját, amely végrehajtja ezt a műveletet:
A locationSuccess funkció az egyik, amellyel jelenleg az API-t küldjük a Yahoo-tól. A locati # 111; nerror függvény egy hibaobjektumot ad meg, amely meghatározza a hiba okát. A showError helper funkcióval a képernyőn megjelenő hibaüzeneteket is megjelenítjük.
A LocationSuccess teljes verziója így néz ki:
A PlaceFinder API az eredményeket tiszta JSON-ként adja vissza. De mivel egy másik domainben található, csak a CORS (forrás eredetű forrásmegosztás) támogató böngészők képesek feldolgozni. A legtöbb geodéziai támogató böngésző a CORS-et is támogatja, az IE9 és az Opera kivételével, ami azt jelenti, hogy mai példánk nem működik ezeken a böngészőkben.
Érdemes megjegyezni, hogy az időjárási API csak két napra tér vissza az előrejelzéshez, ami kissé korlátozza a webes alkalmazás használatát, de ezt nem szabad megkerülni.
API Időjárás, amelyet csak a hőmérsékleti adatok fogadására használunk, de további információkkal is szolgál, amelyek hasznosak lehetnek. Kísérletezhet az API-val és megnézheti a válaszokat az YQL konzolban.
Miután megkapjuk az időjárási adatokat, hívjuk az addWeather funkciót, ami új LI elemet hoz létre a rendezetlen #scroller listában.
Most meg kell hallgatnunk az "előre" és a "vissza" nyilakra mutató kattintásokat, ezért a csúszkát az előrejelzés kívánt napjának megjelenítéséhez mozgatjuk.
És ezen az egyszerű időjárás előrejelzésünk készen áll! Mindannyian megnézheted a /assets/js/script.js fájlt. A kérdést itt nem fogjuk megvitatni, de tanulmányozhatod a /assets/css/styles.css fájlt.
Ebben a példában megtanultad, hogyan fejlessze saját időjárás-előrejelző webhelyét a Yahoo Geolocation, Weather és Places helper API-k segítségével. Példánk a legtöbb modern böngészőben és számos mobileszközön fog működni.