—»     —»   Как использовать Geolocation API и API от Yahoo для создания простого веб-сайта о погоде
  Раздел: Руководства   Комментариев: 4  

Как использовать Geolocation API и API от Yahoo для создания простого веб-сайта о погоде



Сегодня мы воспользуемся HTML5-API Geolocation для того, чтобы предоставить посетителям персонализированный прогноз погоды. Используя jQuery, мы отошлем AJAX-запрос на два популярных API от Yahoo для того, чтобы получить дополнительную географическую информацию и прогноз погоды. В нашем сегодняшнем примере также были использованы иконки из набора climacons.

Как использовать Geolocation API и API от Yahoo для создания простого веб-сайта о погоде

Получение ключа приложения

Yahoo предоставляет огромный набор полезных API, которые разработчики могут использовать абсолютно бесплатно. Требование заключается лишь в том, что вам необходимо зарегистрировать ваше приложение в панели разработчиков от сервиса. Процесс регистрации очень прост и понятен, и в результате вы сможете получать id приложения (его следует искать под заголовком приложения). Этот номер понадобится вам позже в ходе изучения руководства.

Суть

Что нам нужно для того, чтобы организовать веб-сайт с прогнозом погоды:

* Для начала мы воспользуемся API Geolocation, который поддерживается большинством современных браузеров. API попросит пользователя ввести данные о расположении и вернет данные в виде координат GPS.

* Далее мы сделаем запрос к API PlaceFinder от Yahoo, внеся в запрос вышеприведенные координаты. Это даст нам название города, страны и woeid – специальный ID, используемый для идентификации города в прогнозе погоды.

* Наконец, мы отсылаем запрос к API Weather от Yahoo с введенной строкой woeid. Это поможет нам заполучить данные о текущих погодных условиях, а также прогноз погоды на ближайшие дни.

Великолепно! Теперь нам нужно приступать к разработке HTML-кода.

Как использовать Geolocation API и API от Yahoo для создания простого веб-сайта о погоде

HTML-код

Мы начнем, пожалуй, с пустого HTML5-документа, в головной отдел которого добавим ссылки на наши таблицы стилей и на два шрифта из библиотеки Webfonts от Google. В тело документа добавим заголовок H1, и разметку для слайдера прогноза погоды.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast with jQuery &amp; 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-API Geolocation для получения GPS-координат. Данный API поддерживается всеми современными браузерами, включая IE9 и мобильные браузеры. Для того чтобы воспользоваться им, нам нужно проверить, имеет ли глобальный объект навигации параметр геолокации. Если да, то мы вызываем метод 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 – это та, посредством которой мы в данный момент посылаем запросы к API от Yahoo. Функция 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!");
});

}

API PlaceFinder возвращает нам результаты в виде чистого JSON. Но так как он расположен на другом домене, его смогут обработать только те браузеры, где имеется поддержка CORS (cross origin resource sharing). Большинство современных браузеров, которые поддерживают геолокацию, также поддерживают и CORS, за исключением IE9 и Opera, что означает, что наш сегодняшний пример не будет работать в этих браузерах.

Также стоит учитывать то, что API о погоде возвращает нам прогноз лишь на два дня, что немного ограничивает использование веб-приложения, но это никак не обойти.

API Weather мы будем использовать только лишь для получения данных о температуре, но оно также предоставляет нам дополнительную информацию, которая вам может показаться полезной. Вы можете поэкспериментировать с 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.

Готово!

В данном примере вы научились разрабатывать собственный сайт прогноза погоды посредством вспомогательных API Geolocation, Weather и Places от Yahoo. Наш пример будет работать в большинстве современных браузеров и на многих мобильных устройствах.

Демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: API, jQuery, ajax, HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 10425   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 6 июня 2012 @ 13:24
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
А реально сделать, что бы показывало погоду без определения местоположения, а по конкретному региону? (и желательно всё на русском языке)


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #2: 8 июня 2012 @ 10:04
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А в чем проблема? Заходите (http://developer.yahoo.com/geo/placefinder/), получайте ID города нужного вам (например столицу) и пхайте его в скрипт получения погоды по ID города. Яша отдает помимо текстовой информации на английском еще и коды погодные (направление ветра, давление ...) - так что переводить и не нужно ничего, просто посмотрите таблицу с вариантами ответов в документации
Комментарий #3: 17 декабря 2015 @ 15:28
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здесь нет проверки, обработки ошибок и дополнительных опций. Ваше веб-приложение должно включать, по крайней мере, первые два пункта. Чтобы определить поддержку API геолокации, вы можете использовать Modernizr .
Комментарий #4: 20 декабря 2015 @ 23:29
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здесь нет проверки, обработки ошибок и дополнительных опций. Ваше веб-приложение должно включать, по крайней мере, первые два пункта. Чтобы определить поддержку API геолокации, вы можете использовать Modernizr .
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31