- → Программирование
- → JavaScript
- → Уроки
Скрипт прогноза погоды для сайта на jQuery + Yahoo API
Сегодня мы будем использовать геолокацию, для вывода пользователям персонального прогноза погоды. Большей мерой, наш скрипт будет написан на jQuery, который с помощью AJAX запросов будет получать информацию из двух популярных Yahoo API. После чего эти данные будут использованы для формирования и вывода прогноза погоды для каждого конкретного пользователя.
Получение ключа приложения
Yahoo предлагает большую коллекцию полезных API для разработчиков. Единственное условие, регистрация вашего приложения через developer dashboard. Регистрация не сложная, как результат вы получите id приложения (ищите его под названием вашего приложения). Вам он понадобиться позже, в этом уроке. Но сначала, давайте посмотрим, как все компоненты будут работать вместе.
Идея скрипта погоды
Вот, что нам нужно сделать в последовательности, чтобы вывести прогноз погоды:
- Прежде всего, мы будем использовать Geolocation API, которое поддерживается новыми браузерами. API выведет сообщение об авторизации доступа к вашему местонахождению, после чего возвратит GPS координаты.
- Далее, мы передадим запрос с координатами к Yahoo PlaceFinder API. Которое даст нам название города и страны, и специальный woeid – идентификатор города в прогнозах погоды.
- Под конец, мы передадим запрос к Yahoo Weather API с этим woeid. Получим погодные условия на конец текущего дня и на следующий день.
Отлично, теперь приступим к HTML структуре приложения.
HTML
Мы начнем из создания HTML5 документа, добавим CSS стили в начале страницы (head), а также подключим два шрифта из Google. В теле документа H1 заглавие и разметка для слайдера прогноза погоды.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast with jQuery & Yahoo APIs | Tutorialzine Demo</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Google Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensed:300,700" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Weather Forecast</h1>
</header>
<div id="weather">
<ul id="scroller">
<!-- The forecast items will go here -->
</ul>
<a href="#" class="arrow previous">Previous</a>
<a href="#" class="arrow next">Next</a>
</div>
<p class="location"></p>
<div id="clouds"></div>
<!-- JavaScript includes - jQuery, turn.js and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Перед тем, как закрыть тег body мы подключим последнюю версию jQuery и наш script.js, который мы обсудим в следующем разделе.
JavaScript
Первым шагом будет определение двух конфигурационных переменных в /assets/js/script.js:
var APPID = ''; // Your Yahoo Application ID var DEG = 'c'; // c for celsius, f for fahrenheit
Эти переменные передаются как параметры через AJAX запросы для API, которые вы сейчас увидите.
Следовательно пунктам в разделе идеи скрипта, мы должны рассмотреть как использовать HTML5 Geolocation API, для получения установок GPS координатов. Это API поддерживается всеми новыми браузерами, включая IE9 и мобильные устройства. Для его использования, нам понадобиться протестировать имеет ли глобальный объект свойство geolocation. Если имеет, мы запросим метод getCurrentPosition, и передадим два функции обработчика, для случая успеха и ошибки. Вот код этого скрипта из файла script.js, который делает это:
// Does this browser support geolocation?
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
}
else{
showError("Your browser does not support Geolocation!");
}
function locationSuccess(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// We will make further requests to Yahoo's APIs here
}
function locationError(error){
switch(error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
function showError(msg){
weatherDiv.addClass('error').html(msg);
}
Функция locationSuccess – это то место, где мы будем реализовывать передачу запросов к Yahoo API.
Функция locationError принимает объект ошибок, в котором определена специфика каждой из них. Также мы будем использовать хелпер showError для вывода сообщений об ошибке на экран.
Вот полная версия функции locationSuccess:
function locationSuccess(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/
// We are passing the R gflag for reverse geocoding (coordinates to place name)
var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;
// Forming the query for Yahoo's weather forecasting API with YQL
// http://developer.yahoo.com/weather/
var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
code, city, results, woeid;
// Issue a cross-domain AJAX request (CORS) to the GEO service.
// Not supported in Opera and IE.
$.getJSON(geoAPI, function(r){
if(r.ResultSet.Found == 1){
results = r.ResultSet.Results;
city = results[0].city;
code = results[0].statecode || results[0].countrycode;
// This is the city identifier for the weather API
woeid = results[0].woeid;
// Make a weather API request (it is JSONP, so CORS is not an issue):
$.getJSON(weatherYQL.replace('WID',woeid), function(r){
if(r.query.count == 1){
// Create the weather items in the #scroller UL
var item = r.query.results.channel.item.condition;
addWeather(item.code, "Now", item.text + ' <b>'+item.temp+'°'+DEG+'</b>');
for (var i=0;i<2;i++){
item = r.query.results.channel.item.forecast[i];
addWeather(
item.code,
item.day +' <b>'+item.date.replace('\d+$','')+'</b>',
item.text + ' <b>'+item.low+'°'+DEG+' / '+item.high+'°'+DEG+'</b>'
);
}
// Add the location to the page
location.html(city+', <b>'+code+'</b>');
weatherDiv.addClass('loaded');
// Set the slider to the first slide
showSlide(0);
}
else {
showError("Error retrieving weather data!");
}
});
}
}).error(function(){
showError("Your browser does not support CORS requests!");
});
}
PlaceFinder API как результат возвращает ответ в JSON формате. Но так как все это находиться на разных доменах, только браузеры, которые поддерживают CORS (cross origin resource sharing) могут получить данные. Большинство популярных браузеров, которые поддерживают геолокацию, также поддерживают CORS. За исключением IE9 и Opera, это значит, что в этих браузерах пример скрипта погоды для сайта не будет работать.
Другая вещь, это то, что Weather API возвращает прогноз погоды только на два дня. Это немножко ограничивает наше приложение, к сожалению другого выхода нет.
Мы будем использовать Weather API только для получения данных температуры, но это API также дает другую информацию, которая может быть полезной. Вы можете поиграться с API и посмотреть ответы в YQL консоли.
После получения данных о погоде, мы вызовем функцию addWeather, которая создает новый LI элемент в #scroller неупорядоченном списке.
function addWeather(code, day, condition){
var markup = '<li>'+
'<img src="assets/img/icons/'+ weatherIconMap[code] +'.png" />'+
' <p class="day">'+ day +'</p> <p class="cond">'+ condition +
'</p></li>';
scroller.append(markup);
}
Теперь нам нужно отследить клики по стрелочкам «Назад» и «Вперед», чтобы слайдер корректно отображал прогноз погоды к каждому дню.
/* Handling the previous / next arrows */
var currentSlide = 0;
weatherDiv.find('a.previous').click(function(e){
e.preventDefault();
showSlide(currentSlide-1);
});
weatherDiv.find('a.next').click(function(e){
e.preventDefault();
showSlide(currentSlide+1);
});
function showSlide(i){
var items = scroller.find('li');
// Exit if the requested item does not exist,
// or the scroller is currently being animated
if (i >= items.length || i < 0 || scroller.is(':animated')){
return false;
}
// The first/last classes hide the left/right arrow with CSS
weatherDiv.removeClass('first last');
if(i == 0){
weatherDiv.addClass('first');
}
else if (i == items.length-1){
weatherDiv.addClass('last');
}
scroller.animate({left:(-i*100)+'%'}, function(){
currentSlide = i;
});
}
На этом, наш скрипт прогноза погоды для сайта завершен! Вы можете увидеть, как все организованно в /assets/js/script.js. Мы не будем обсуждать стили в этом уроке, но вы можете посмотреть их в /assets/css/styles.css.
Послесловие
На этом примере скрипта прогноза погоды, вы выучили, как использовать HTML5 Geolocation и Yahoo API вместе. Этот скрипт работает во всех популярных браузерах, кроме Opera и IE9. Если у вас есть пожелания или вопросы по поводу скрипта, задайте их в комментариях ниже! Спасибо за внимание!
Источник материала ...
Дальше: Создаем кнопку «Наверх» или Scroll to Top на jQuery
Development — Taras Moroz