Информер погоды на сайте — api OpenWeatherMap

Backend
41224
Информер погоды на сайте — api OpenWeatherMap
Active vision

В этой статье мы создадим небольшое приложение на PHP, которое будет показывать прогноз погоды, а затем повторим тоже самое на JavaScript. Для этих целей нам понадобиться данные о погоде и получать мы их будем с помощью API. Существует множество вариантов, за которые нужно заплатить. Для наших целей мы будем использовать сервис OpenWeatherMap, который позволяет отправлять до 60 запросов в минуту бесплатно. Если ваш трафик будет больше, то вы сможете либо воспользоваться продвинутым платным API, либо настроить кэширование для информера погоды на сайте.

openweathermap Пример интеграции прогноза погоды на сайт

Интегрировать этот API на свой сайт и создать полноценный информер погоды довольно легко. Мы сделаем это в 3 этапа, а затем попробуем сделать тоже самое на JS:

Быстрая навигация:

  1. # Получим API ключ
  2. # Найдем id нужного нам города
  3. # Отправим запрос на получение прогноза погоды на PHP
  4. # API погоды через JavaScript

1 Получение ключа OpenWeatherMap API

Чтобы получить API ключ, нам нужно зарегистрироваться в сервисе OpenWeatherMap. Если у вас возникли проблемы и страница не загружается, не работает регистрация — попробуйте зарегистрироваться через VPN.

погода api

Для создания информера погоды на сайте введите название компании и выберите цель вашего приложения.

openweathermap api key получить

После регистрации вы окажетесь в вашем профиле. Перейдите на вкладку API keys и скопируйте ключ, мы будем использовать его для отправки запросов к API погоды.

weather api

1 Определение id города

Скачайте архив с json файлом, откройте его в текстовом редакторе/вашей любимой IDE. Через поиск (ctrl + F) найдите нужный вам город. К примеру Moscow. Обратите внимание, что городов с одинаковым названием может быть несколько, по этому ориентируйтесь по полю country. Сохраните id города под рукой, он нам еще понадобится.

информер погоды на сайт

PHP код отправки запроса в API погоды OpenWeatherMap

С помощью кода ниже мы отправим запрос для получения прогноза погоды. Для этого мы используем PHP cURL и в ответ получим данные в формате JSON. Для начала подготовим URL:


PHP
<?php
$apiKey = "ваш API ключ";
$cityId = "Id нужного города";
$apiUrl = "http://api.openweathermap.org/data/2.5/weather?id=" . $cityId . "&lang=ru&units=metric&APPID=" . $apiKey;

Далее выполняем cURL запрос:


PHP
$crequest = curl_init();

curl_setopt($crequest, CURLOPT_HEADER, 0);
curl_setopt($crequest, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($crequest, CURLOPT_URL, $apiUrl);
curl_setopt($crequest, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($crequest, CURLOPT_VERBOSE, 0);
curl_setopt($crequest, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($crequest);

curl_close($crequest);
$data = json_decode($response);
$currentTime = time();
?>

Мы получили нужные данные и текущее время, давайте создадим разметку и подставим в нее нужные значения.

Подготовка HTML разметки для отображения прогноза погоды на сайте

Выведим в HTML код описание погоды, диапазон температуры, влажность и скорость ветра.


HTML
<div class="weather">
    <h2 class="weather__title">Погода в городе <?php echo $data->name; ?></h2>
    <div class="weather__time">
        <p class="weather__time"><?php echo date("l g:i a", $currentTime); ?></p>
        <p class="weather__date"><?php echo date("jS F, Y",$currentTime); ?></p>
        <p class="weather__status"><?php echo ucwords($data->weather[0]->description); ?></p>
    </div>
    <div class="weather__forecast">
        <span class="weather__min"><?php echo $data->main->temp_min; ?>°C</span>
        <span class="weather__max"><?php echo $data->main->temp_max; ?>°C</span>
    </div>
    <p class="weather__humidity">Влажность: <?php echo $data->main->humidity; ?> %</p>
    <p class="weather__wind">Ветер: <?php echo $data->wind->speed; ?> км/ч</p>
</div>

4 API погоды через JavaScript

Такой же запрос можно сделать на клиенте, для этого воспользуемся JavaScript методом fetch, получим нужные данные и отобразим их в html разметке.

Попробуйте создать новую разметку в виде виджета погоды. Добавьте в неё элементы с классами weather__city, weather__forecast, weather__desc и weather__icon.


JS
//Получаем прогноз в массив data
fetch('http://api.openweathermap.org/data/2.5/weather?id=ID_ВАШЕГО_ГОРОДА&lang=ru&appid=ВАШ_API_КЛЮЧ').then(function (resp) {return resp.json() }).then(function (data) {
    //добавляем название города
    document.querySelector('.weather__city').textContent = data.name;
    //data.main.temp содержит значение в Кельвинах, отнимаем от  273, чтобы получить значение в градусах Цельсия
    document.querySelector('.weather__forecast').innerHTML = Math.round(data.main.temp - 273) + '&deg;';
    //Добавляем описание погоды
    document.querySelector('.weather__desc').textContent = data.weather[0]['description'];
    //Добавляем иконку погоды
    document.querySelector('.weather__icon').innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]['icon']}@2x.png">`;
    })
    .catch(function () {
        //Обрабатываем ошибки
    });

Посмотрите как работает такой код. В этом примере вместо иконки мы используем разные background-image.

OpenWeatherMap является отличным способом попробовать API погоды на своем сайте, но все же работает он не идеально. Если вы приняли решение, что вам нужен подобный функционал, стоит обратить внимание на платные решения.

5 комментариев

  • Максим Корнышев Новый пользователь
    6 октября 2020 14:06
    Что я делаю не так? Страница пуста.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Weather</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    //Получаем прогноз в массив data
    fetch('http://api.openweathermap.org/data/2.5/weather?id=ID_айди&lang=ru&appid=типа ключ').then(function (resp) {return resp.json() }).then(function (data) {
    //добавляем название города
    document.querySelector('.weather__city').textContent = data.name;
    //data.main.temp содержит значение в Кельвинах, отнимаем от 273, чтобы получить значение в градусах Цельсия
    document.querySelector('.weather__forecast').innerHTML = Math.round(data.main.temp - 273) + '&deg;';
    //Добавляем описание погоды
    document.querySelector('.weather__desc').textContent = data.weather[0]['description'];
    //Добавляем иконку погоды
    document.querySelector('.weather__icon').innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]['icon']}@2x.png">`;
    })
    .catch(function () {
    //Обрабатываем ошибки
    });
    </script>
    </head>

    <body>
    <div class="weather__city"></div>
    <div class="weather__forecast"></div>
    <div class="weather__desc"></div>
    <div class="weather__icon"></div>

    </body>
    </html>
  • Zhangali SSS Новый пользователь
    30 апреля 2021 14:41
    а где архив?, которую надо скачать
  • Сергей Тарасов Новый пользователь
    13 декабря 2021 09:43
    ссылка на архив:
    http://bulk.openweathermap.org/sample/

    архив со списком городов называется city.list.json.gz
  • Vavada ovege Vavada ovege Новый пользователь
    4 ноября 2023 01:02
    Казино Вавада предлагает большое количество игровых слотов и возможность выиграть крупные суммы денег. Чтобы начать играть, необходимо [url=https://play-casino-vavada.online/]пройти регистрацию в Vavada[/url].
    [url=https://play-casino-vavada.online/]Регистрация в Vavada[/url] очень простая и быстрая.. Вам потребуется заполнить небольшую форму, указав свои личные данные, такие как имя, фамилия, электронная почта и номер телефона. Пожалуйста, убедитесь, что вводите правильные данные, чтобы избежать проблем при выводе выигрышей.
    После заполнения формы вам будет предложено создать уникальное имя пользователя и пароль для входа в ваш аккаунт. Используйте только надежные пароли во избежание потери аккаунта.
    После завершения регистрации просто подтвердите свой аккаунт, перейдя по ссылке, которая придет вам на почту. После подтверждения авторизоваться и сразу начать играть Vavada.
    Не забудьте прочесть правила, чтобы знать все возможные ограничения и требования. Следите за рисками при игре, не проигрывайте больше, чем готовы проиграть.
    Удачи в [url=https://play-casino-vavada.online/]vavada[/url]! Наслаждайтесь азартом и возможностью выиграть большие призы!
  • Lacky mag Lacky mag Новый пользователь
    10 ноября 2023 17:15
    Демо игровых автоматов онлайн без регистрации и депозита предлагают уникальную возможность насладиться азартом и развлечениями казино, не тратя при этом своих финансовых средств. Это идеальный способ испытать удачу, узнать новые игры и разработать стратегии без каких-либо обязательств.

    Благодаря широкому выбору демо-слотов, каждый игрок найдет что-то по своему вкусу. От классических трехбарабанных слотов до современных видеослотов с крутейшей графикой и увлекательными бонусными раундами, вам будет чем заняться.

    Играть в [url=https://lucky-slots.ru/sloty-s-pokupnymi-bonusami/]играть в слоты с покупными бонусами демо[/url] просто и легко. Вам не нужно регистрироваться и пополнять баланс - просто выберите интересующую вас игру и начинайте вращать барабаны. Это отличная возможность попробовать разные стратегии ставок, изучить выигрышные комбинации и просто кайфануть в игру в казино.

    Демо-режим также дает возможность вам сделать оценку отдачи игрового аппарата и понять, подходит он вам или нет. Вы можете играть сколько угодно долго, не боясь за свои деньги.

    Так что, если вы хотите поиграть в казино, без риска для своих денег, демо игровых автоматов онлайн без регистрации и депозита - это отличный способ. Заходите прямо сейчас и наслаждайтесь игрой в казино без каких либо ограничений!

Написать комментарий