Сьогодні ми скористаємося HTML5-API Geolocation для того, щоб надати відвідувачам персоналізований прогноз погоди. Використовуючи jQuery, ми відішлемо AJAX-запит на два популярних API від Yahoo для того, щоб отримати додаткову географічну інформацію і прогноз погоди. У нашому сьогоднішньому прикладі також були використані іконки з набору climacons.
Отримання ключа додатки
Yahoo надає величезний набір корисних API. які розробники можуть використовувати абсолютно безкоштовно. Вимога полягає лише в тому, що вам необхідно зареєструвати ваш додаток в панелі розробників від сервісу. Процес реєстрації дуже простий і зрозумілий, і в результаті ви зможете отримувати id додатки (його слід шукати під заголовком додатки). Цей номер знадобиться вам пізніше в ході вивчення керівництва.
Що нам потрібно для того, щоб організувати веб-сайт з прогнозом погоди:
* Для початку ми скористаємося API Geolocation, який підтримується більшістю сучасних браузерів. API попросить користувача ввести дані про розташування і поверне дані у вигляді координат GPS.
* Далі ми зробимо запит до API PlaceFinder від Yahoo, внісши в запит вищенаведені координати. Це дасть нам назву міста, країни і woeid - спеціальний ID, який використовується для ідентифікації міста в прогнозі погоди.
* Нарешті, ми відсилаємо запит до API Weather від Yahoo з введеної рядком woeid. Це допоможе нам отримати дані про поточні погодні умови, а також прогноз погоди на найближчі дні.
Чудово! Тепер нам потрібно приступати до розробки HTML-коду.
Ми почнемо, мабуть, з пустого HTML5-документа, в головний відділ якого додамо посилання на наші таблиці стилів і на два шрифту з бібліотеки Webfonts від Google. У тіло документа додамо заголовок H1, і розмітку для слайдера прогнозу погоди.
Перед закриває тегом body нам потрібно додати найсвіжішу версію jQuery і файл нашого скрипта script.js, який ми розглянемо далі по тексту.
Перший етап полягає у визначенні двох конфігураційних змінних в /assets/js/script.js:
Вони вводяться в якості параметрів з AJAX-запитами про локації і API для отримання даних про погоду.
Випливаючи вищенаведеному списку, зараз нам слід скористатися HTML5-API Geolocation для отримання GPS-координат. Даний API підтримується всіма сучасними браузерами, включаючи IE9 і мобільні браузери. Для того щоб скористатися ним, нам потрібно перевірити, чи має глобальний об'єкт навігації параметр геолокації. Якщо так, то ми викликаємо метод getCurrentPosition, проводячи також дві функції управління подіями, що відповідають за успішне виконання і помилку. Давайте розглянемо відповідний код з script.js, який виконує цю дію:
Функція locationSuccess - це та, за допомогою якої ми в даний момент посилаємо запити до API від Yahoo. Функція locati # 111; nerror проводить об'єкт помилки із зазначенням причини виникнення цієї помилки. Ми також будемо використовувати допоміжною функцією showError для відображення повідомлень про помилки на екрані.
Повна версія locationSuccess виглядає наступним чином:
API PlaceFinder повертає нам результати у вигляді чистого JSON. Але так як він розташований на іншому домені, його зможуть обробити тільки ті браузери, де є підтримка CORS (cross origin resource sharing). Більшість сучасних браузерів, які підтримують геолокацію, також підтримують і CORS, за винятком IE9 і Opera, що означає, що наш сьогоднішній приклад не буде працювати в цих браузерах.
Також варто враховувати те, що API про погоду повертає нам прогноз лише на два дні, що трохи обмежує використання веб-додатки, але це ніяк не оминути.
API Weather ми будемо використовувати тільки для отримання даних про температуру, але воно також надає нам додаткову інформацію, яка вам може здатися корисною. Ви можете поекспериментувати з API і подивитися відповіді в консолі YQL.
Після того, як ми отримаємо дані про погоду, ми викликаємо функцію addWeather, яка створює новий LI-елемент в неврегульованих списку #scroller.
Тепер нам потрібно прослухати кліки по стрілках «вперед» і «назад», і тому ми зміщуємо слайдер для відображення потрібного дня в прогнозі.
І на цьому наш простенький прогноз погоди готовий! Всі разом можна подивитися у файлі /assets/js/script.js. Оформлення ми тут обговорювати не будемо, але ви можете самостійно вивчити /assets/css/styles.css.
В даному прикладі ви навчилися розробляти власний сайт прогнозу погоди за допомогою допоміжних API Geolocation, Weather і Places від Yahoo. Наш приклад буде працювати в більшості сучасних браузерів і на багатьох мобільних пристроях.