Недавно было создано веб-приложение, которое помогает людям узнать текущие погодные условия и погодные условия на следующие 12 часов в любом месте, которое они искали. До этого приложения у меня не было должного опыта работы с API, поэтому вы можете себе представить, сколько потерь при создании этого проекта.
Это приложение было создано для тех, кто хочет знать о погодных условиях своих сообществ. Я не просто хотел, чтобы они получали нужные им данные о погоде, я хотел, чтобы они также получали данные в удобном для пользователя виде, поэтому я сосредоточил свое внимание на том, чтобы сделать пользовательский интерфейс и работу приложения приятным и простым.
Вы можете спросить: «Хорошо, хорошо. Но зачем погодное приложение, когда у нас их уже куча?»
Ответ на это прост. Все началось с моего желания сделать что-то, что поможет в достижении одной из глобальных целей ООН. Я выбрал меры по борьбе с изменением климата из 17 вариантов, которые у меня были. Да, да. Я знаю, погодное приложение позволяет узнать только погодные условия, не более того. Дело в том, что это погодное приложение — лишь первая фаза всего приложения, которое я собираюсь создать. Вы уж простите меня, но я не буду вдаваться в подробности основного приложения, пока не разверну его первую версию со всеми функциями. Но даже при этом борьба с изменением климата требует, чтобы мы активно следили за погодой, поэтому это приложение погоды по-прежнему имеет значение.
Системный или структурный дизайн
В это может быть трудно поверить, но архитектура настолько проста. Посмотри на это.
Вот и все! Однако при извлечении данных из API Open Weather и их динамическом отображении все становится очень сложно, подробнее об этом позже. Кроме того, на диаграмме, которую вы только что просмотрели, показано, как данные передаются в приложении. Пользователь вводит интересующее его местоположение, местоположение отправляется в API, который затем получает информацию о погоде для этого места. местоположение и отправляет его в веб-приложение, размещенное на веб-сервере. Содержимое веб-приложения сначала динамически обновляется на основе данных из API, а затем отображается пользователю. И весь процесс начинается снова, если пользователь ищет другое место.
Используемые технологии
При создании этого приложения я использовал два языка: HTML и JavaScript. HTML предназначен для структурирования приложения, а JavaScript — для его функциональности, что очевидно. Переходя к не столь очевидным вещам, я использовал Tailwind CSS вместо Vanilla CSS. Почему Попутный ветер? Потому что он быстрый и простой в использовании, особенно когда речь идет о адаптивности веб-сайтов. Ванильный CSS — это головная боль, когда дело доходит до адаптивности, и даже требует дополнительных навыков, чтобы все выглядело красиво.
От цветов до используемых единиц измерения — Tailwind CSS упрощает создание красивых веб-сайтов. А когда дело доходит до масштабирования проектов, Tailwind CSS справляется с этим лучше. Поскольку я намерен расширить этот проект, это лучший вариант. Я могу продолжать рассказывать о преимуществах Tailwind CSS по сравнению с Vanilla CSS, но лучше вам попробовать это самому.
В основе моего приложения лежит технология Open Weather API. Я использовал его для получения данных о погоде. Его легко использовать, если вы понимаете его документацию. Если вы хотите использовать его, не забудьте прочитать документы.
Некоторые из его особенностей
Не волнуйтесь, я не буду пересказывать отображение погодных условий, поскольку оно настолько очевидно, хотя это и функция. Первая функция, о которой я расскажу, — это окно поиска. Это дает пользователям возможность указать конкретную область или место, для которого им нужны данные о погоде.
Вторая особенность — результаты поиска. Вместо того, чтобы угадывать или предполагать, какое местоположение хочет пользователь, поскольку разные места могут иметь одно и то же имя, веб-приложение всегда отображает список местоположений с тем же или похожим именем, что и местоположение, введенное пользователем.
И вы правильно догадались, каждый элемент в списке кликабельный. Если не угадали, то ладно. Щелкнув по любому из перечисленных мест, пользователь может увидеть погодные условия и прогнозы для этого места.
Самая сложная техническая задача
Вернемся к истории, а не к технической ее части. Теперь мы переходим к сложной части, о которой я упоминал ранее. При создании приложения мне нужно было перемещать данные с одной страницы на другую, что было бы очень просто, если бы я хорошо разбирался в модульном программировании на JavaScript. Сначала я думал, что знаю это, пока не попытался реализовать. По какой-то причине я терял данные о погоде каждый раз, когда пользователи перенаправлялись на страницу, предназначенную для отображения данных. Учитывая мою структуру папок и то, что я хотел сделать, будет сложно полностью объяснить это в этом сообщении блога. Но в двух словах, когда моя страница с окном поиска и кнопкой перенаправляет пользователей на страницу отображения после того, как они ввели местоположение, данные в файле JavaScript, обрабатывающем пользовательский ввод, исчезли. Это означает, что данные о погоде полностью исчезали при каждом перенаправлении. Мне пришлось дополнительно использовать асинхронное программирование и изменять структуру файлов, чтобы заставить его работать. Значительная часть моего времени ушла на то, чтобы заставить данные передаваться надлежащим образом. В процессе решения проблемы я расстроился и напрягся… этот опыт был пыткой.
Что я узнал
Хотя создание приложения вызывало у меня стресс, в целом это был забавный процесс, и он научил меня многим вещам. Но два основных:
- Возможности использования API
- Проектирование перед добавлением функциональности.
API настолько мощны. С ними начинающие разработчики, такие как я, могут создавать классные вещи, которые мы иначе не могли бы сделать. Например, я ничего не знаю о прогнозировании погоды или даже о том, как определить текущие погодные условия, кроме того, что знаю, когда жарко. или холодно, но вот я со своим собственным погодным приложением. Они не всегда приходят бесплатно, но они того стоят.
Я не уделял внимания проектированию элементов перед тем, как сделать их функциональными, даже если и уделял этому немного внимания. Когда я постоянно перемещался между файлами HTML и JavaScript и обратно только потому, что функция, которую я хотел добавить, не имела части или элемента, с которым нужно было бы воздействовать, я осознал важность полного проектирования всех своих компонентов, прежде чем сделать их функциональными, и я сделал все необходимое. .
В заключение
… Мне было весело, пока я создавал это приложение. И если вам интересно узнать немного больше о разработчике, создавшем это приложение; позвольте мне немного рассказать о себе. Я М’мах Зомбо (я предпочитаю, чтобы меня называли Зомбо), возрожденный христианин, студент-программист и младший разработчик интерфейса. Я всегда работаю над собой и становлюсь лучше в том, что делаю.Я также увлечен решением проблем и стремлением сделать мою страну лучше. Вы можете связаться со мной в LinkedIn или Twitter. » и найти некоторые из моих работ на GitHub.
Еще одна вещь, вот ссылка на веб-приложение и его целевую страницу: Целевая страница и Сохранить приложение домашней погоды.
Спасибо за прочтение, надеюсь, вам понравилось. Если есть что-то, что вы хотите сказать, дайте мне знать в комментариях.
