Рассказываем, как написать простое приложение для поиска погоды, используя Vue 3 и OpenWeatherMap API. Весь код — внутри.
2К открытий4К показов
Привет всем! Сегодняшняя цель – построить простое приложение для поиска погоды, используя Vue 3 + OpenWeatherMap API.
Это — перевод оригинальной статьи с Medium.com на английском языке. Автор — William Schulte. Далее ведётся повествование от лица автора.
В ходе этого проекта мы рассмотрим:
Как настроить функцию search() для обработки ответа от OpenWeatherMap API на основе введенного пользователем почтового индекса США. (В вашем случае, почтовый индекс может быть каким угодно).
Как использовать метод JavaScript Object.keys() в функции для округления значений погоды (возвращаемых из ответа) до ближайшего целого числа.
Приложение, которое мы создадим, на самом деле является урезанной, одностраничной версией приложения OpenWeatherMap API dashboard, которое я создал ранее. Если хотите, вы можете посмотреть его репозиторий на GitHub. Для этого проекта мы создадим кое-что попроще.
Давайте начнем!
Настройка проекта
Сначала откройте IDE и скопируйте и вставьте следующий код шаблона в HTML-файл:
Чтобы вызов API работал, вам нужно зарегистрироваться для получения ключа API на сайте OpenWeatherMap. После создания учетной записи и получения ключа вставьте его в URL-адрес API в указанном месте.
После ввода 5-значного почтового индекса и нажатия кнопки Enter, API вернет данные о погоде для введенного пользователем почтового индекса (см. интерполированное свойство cityZip.value в URL).
Чтобы увидеть разобранные данные, просто скопируйте и вставьте URL-адрес с ключом API и введенным почтовым индексом в браузер. После этого вы увидите большое JSON-дерево погодных данных для выбранного города.
В данном приложении нам важно получить из ответа API данные о погоде, содержащиеся в следующем объекте:
Хотя по умолчанию эти значения представлены в градусах Цельсия, мы можем преобразовать их в градусы Фаренгейта, добавив "&units=imperial" в конце URL API. После сохранения res.data.main в weatherValue.data мы должны увидеть эти значения, преобразованные в Фаренгейт.
Теперь запустите приложение в браузере. На этом этапе вы должны увидеть такое окно:
Кажется, что все работает нормально. Однако одна из задач этого проекта – возвращать значения погоды, округленные до ближайшего целого числа. Для этого мы используем метод Object.keys() как часть функции для округления значений погоды. Но сначала давайте рассмотрим основную концепцию метода Object.keys().
Метод Object.keys()
Если вы не знали, метод Object.keys() в JavaScript возвращает массив перечисляемых строковых имен свойств данного объекта. Обратите внимание на следующий пример из документации JavaScript MDN:
object1 – это объект, содержащий свойства. Каждое свойство представлено парой ключ:значение. Результатом является новый массив, содержащий только ключи исходного объекта. В данном случае результатом будет:
> Array ["a", "b", "c"]
Теперь давайте применим эту концепцию к нашему приложению. Вернемся в наш HTML-файл и добавим код ниже функции search():
Внутри функции roundedValue() мы создадим свойство roundData, которое установим в пустой объект. Затем мы используем метод Object.keys() для создания нового массива, содержащего все ключи из weatherData.value.
console.log(Object.keys(weatherData.value)) должен вернуть следующее:
Далее мы используем метод map() для итерации по вновь созданному массиву ключей, причем каждый элемент в массиве ключей будет представлен элементом key.
Чтобы округлить каждое значение погоды, мы передадим weatherData.value[key] в Math.round() внутри обратного вызова, используя при этом ключевой элемент как индекс для каждого итерируемого элемента weatherData.value.
Наконец, каждое новое округленное значение мы присвоим roundData[key].
После выполнения console.log(roundData) мы должны увидеть новый объект:
В функции setup() мы добавим новое вычисляемое свойство roundedData, которое будет возвращать наша функция roundedValue(). Не забудем включить оба этих элемента в возвращаемую функцию setup.
Лучшие онлайн-курсы по созданию сайтов. Список школ, осуществляющих обучение на бесплатной или платной основе, а так же цены на курсы по разработке сайтов с нуля
Node.js занял 50,4% рынка, поэтому мы попросили мидл и сеньор-программистов рассказать, в чём причина популярности Node.js и какие у него перспективы. Вот, что они ответили.
Разработка сайта образовательной организации: выбор платформы, структура, система администрирования и постановка тегов. Объединить имидж статусного учебного заведения, жесткие образовательные стандарты, более 500 страниц документов и уложить творческие порывы в программную логику.