Рассказываем, как написать простое приложение для поиска погоды, используя 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.