Создание приложения погоды с использованием JavaScript и CSS

Я работаю с CSS более десяти лет в различных клиентских проектах. Хотя я многому научился и применил CSS3, в том числе следовал принципам адаптивного веб-дизайна, использовал фреймворк Bootstrap и использовал CSS Grid и Flexbox в своей работе, я хотел выйти за рамки стилистических изменений. Я хотел создать полезный продукт с нуля, который бы извлекал реальные данные и красиво отображал их. В рамках моей магистерской программы по взаимодействию человека с компьютером (HCI) в Университете Мэриленда я решил реализовать это видение, создав рабочий прототип приложения погоды с использованием JavaScript.

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

Цель

Разработайте погодное приложение MVP, которое позволит пользователям отслеживать информацию о погоде на ближайшие пять дней для городов США, используя почтовые индексы, введенные пользователем.

Используемые технологии и ресурсы

Доступность данных и ограничения

возможности

API, предоставляемый OpenWeatherMap, предлагает несколько мощных точек данных как часть их бесплатного API, который предоставляет данные прогноза каждые три часа в течение пяти дней (что составляет 8 раз в день, всего 40 наборов данных), в том числе:

  • Температура: средняя, ​​максимальная и минимальная
  • Геолокация: широта и долгота
  • Влажность, объем дождя и снега и облачность
  • Скорость ветра, уровень моря и давление
  • Описание погоды и соответствующие значки

Ограничения

С учетом сказанного мне пришлось работать со следующими ограничениями API:

  1. Иконки, которые поставлялись с сервисом, были довольно устаревшими и выглядели рудиментарно. В отличие от высококачественной информации, поступающей от API, значки, похоже, не соответствуют действительности.
  2. Данные в этом конкретном API включают информацию не о текущем времени, а о времени в будущих 3-часовых интервалах. Например, это может быть 20:00, но API показывает данные, поступающие только в 9:00, 12:00, 3:00 и так далее.
  3. Время пришло только по всемирному координированному времени (UTC), что на четыре часа опережает часовой пояс восточного стандартного времени (EST), который будет применяться к студентам в Мэриленде.
  4. Данные не включают сводные данные о погоде за целый день. Например, в данных будет сказано, что в 12 часов дня в понедельник максимальная температура составляет 68º, а минимальная — 62º. Но нет ни одного места, где данные показывают, что в течение всего дня понедельника температура будет от 58º до 73º.
  5. Соглашение об именовании идентификаторов погоды для согласования с описаниями (например, «чистое небо») в основном соответствовало одному формату, но были и исключения. По сути, каждый идентификатор соответствует формату X00 (например, «700»), за исключением облаков, которые соответствуют формату 80X (например, «802»).

Я справился с этими ограничениями следующим образом:

  • Что касается значков, я изначально думал создать свой собственный набор значков для использования, но затем решил сначала проверить, не сделал ли кто-нибудь еще то же самое. К счастью, мне удалось найти набор иконок, разработанных Эриком Флауэрсом, имена файлов которых соответствовали идентификаторам описания погоды из OWM API. Это было хорошим напоминанием о том, что мне не нужно без необходимости изобретать велосипед, и я могу использовать бесплатные онлайн-ресурсы.
  • Что касается ограничений, связанных со временем, я быстро обнаружил, что ванильный JavaScript не очень хорошо манипулирует строками времени, которые я получал. После нескольких строк кода, чтобы сделать что-то простое, например, изменить время на EST и отобразить его в 12-часовом формате, я обнаружил, что многое из этого может быть достигнуто с помощью нескольких строк кода с использованием Moment.JS, библиотеки, специально предназначенной для «анализировать, проверять, обрабатывать и отображать даты и время в JavaScript.» Это значительно ускорило мою разработку и позволило мне быстро добавлять функции для управления строками времени.
  • Наконец, чтобы отобразить сводные данные о погоде и различные классы CSS на основе описания погоды, я использовал вложенные циклы for, в которых пять раз прогонялся по 40 наборам данных, чтобы извлечь данные о погоде на дату в массив, после чего другая функция определяла самый высокий, самый низкий или самый частый элемент в зависимости от цели, которую я пытался достичь. Аналогичным образом я использовал другую функцию, чтобы установить уникальный класс CSS для каждого из семи основных определенных типов погоды.

Целостность и расширяемость

Когда вы начнете просматривать проекты, вы можете задаться вопросом, почему я так старался манипулировать данными, чтобы показать время для EST — особенно потому, что в окончательной версии не отображается какое-либо конкретное время — или почему я просто не показывать данные о погоде для определенного момента времени на каждый день (например, 12 часов дня) вместо агрегирования данных по каждой дате. На самом деле, я наткнулся на других людей, которые писали, что сделали последнее как решение для создания похожих прототипов погоды на своем пути разработки. Ответ для меня был связан со следующими причинами:

  • Целостность: если я когда-либо выпускал свое приложение для использования другими, важно, чтобы они работали на основе точных данных. Если мои данные не показывали дождь, когда он мог быть, и кто-то промок в результате моего решения, то это моя вина.
  • Функциональная расширяемость. Как вы увидите ниже, несмотря на то, что в конце дизайн оставался простым, дизайн позволяет отображать дополнительную информацию при нажатии на день. Несмотря на то, что сайт в настоящее время не детализируется до 3-часовых интервалов, код был построен с использованием структуры, которая позволит добавить эту функциональность в будущем.

Я придерживаюсь этих двух причин во всей своей работе, и я считаю, что это то, что определяет профессионального создателя: честность и подготовка к будущему путем создания расширяемых продуктов.

Дизайн

Первоначальное видение, которое я разработал для каркаса с низкой точностью, заключалось в том, чтобы сохранить приложение в виде связанной панели погодных условий. Идея заключалась в том, чтобы предоставить пользователю быстрый обзор того, чего ожидать на текущую неделю, в минималистичной манере, подчеркивающей текущий день.

После взаимодействия с данными я увидел, что можно вернуть больше точек данных, поэтому я создал представление для размещения данных за несколько интервалов в течение дня. Основываясь на выводе данных, я сделал некоторые другие изменения, в том числе показывал только среднюю температуру, потому что макс. и мин. температура не сильно изменилась — если вообще изменилась — за три часа. Кроме того, для краткости я включил только значки без описания.

Этот новый дизайн означал, что было задействовано много прокрутки, но теперь прототип имел данные, которые позволяли пользователю знать, чего ожидать каждые три часа. Я был взволнован.

Я провел пользовательское тестирование после создания этого первого проекта и получил следующие предложения по улучшению:

«Мне нравятся детали, но слишком много всего происходит. Я хочу, чтобы эта информация была синтезирована для меня».

«Трудно сосредоточиться на информации на конкретный день из-за монохромного вида».

«Есть ли какая-либо другая информация, которую вы можете включить? Я знаю, что мое погодное приложение включает в себя и другую информацию, например влажность в течение дня».

«Я думаю, что было бы хорошо включить описания значков для удобства доступа и ясности. Трудно сказать, что именно означают некоторые значки.

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

Просмотреть интерактивную демонстрацию: arifkabir.com/weather

Я выбрал чистый, гладкий дизайн с яркими, но не слишком яркими цветами. Сначала я терялся, решая, делать ли цвета в зависимости от температуры или типа погоды. Поэкспериментировав с обоими, я решил больше сосредоточиться на цветах, которые являются концептуальными визуальными дифференциаторами, чтобы показать разнообразие погоды в течение недели. Цвета действительно склоняются к типу погоды — особенно когда погода меняется от облачной к штормовой — и вызывают некоторые пейзажи или эмоции, которые ощущаются во время соответствующего типа погоды, но это намеренно сделано более абстрактным, чтобы пользователи также могли читать информацию после получения первоначального понимания приложения через цвета.

Я получил дальнейшие отзывы (на этот раз более положительные!) и продолжил работу над дизайном, на этот раз сосредоточившись на том, чтобы сделать сайт удобным для мобильных устройств и добавить состояния наведения для нескольких элементов.

Следующие шаги

Я понимаю, что это только MVP-состояние приложения, которое можно развивать дальше. Я хотел бы поднять это приложение на следующий уровень со следующим:

  • Предлагайте функциональные возможности для отображения данных с более регулярными интервалами в течение дня, когда пользователь нажимает, чтобы узнать более подробную информацию о дне.
  • Включите возможности геолокации, чтобы пользователю не нужно было вводить текст.
  • Подумайте о том, чтобы обеспечить индивидуальный внешний вид для определенных регионов или часовых поясов.
  • Настройте цвета дополнительно, как с точки зрения фона, чтобы улучшить читаемость, так и с точки зрения текста, чтобы различать предоставленную информацию.
  • Добавьте значки влажности и скорости ветра. Для скорости ветра значки должны отражать степень ветра в течение дня.
  • Добавьте дизайны, обозначающие время суток. Еще больше проясните значки погоды, заставив их динамически перемещаться.

Отражение

Я многое узнал о JavaScript и связанных с ним библиотеках, погрузившись в этот проект. Я был приятно удивлен, увидев, насколько естественным образом JavaScript вытекает из CSS, и как я, наконец, могу применять на практике больше элементов дизайна, основанных на динамических взаимодействиях, а не на статическом поведении. Я также был рад видеть, что мой опыт работы с UX и CSS помогает превратить код из текста в продуманный и эстетически приятный пользовательский интерфейс. Теперь я с нетерпением жду возможности улучшить этот сайт и создать больше приложений в будущем.

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