В настоящее время на пути к программированию я прорабатываю учебную программу Free Code Camp. Один из моих недавних проектов требовал, чтобы я создал погодное приложение, которое работало бы с выбранным мной API, чтобы отображать погоду и местоположение области на основе геолокации человека. Еще одна «пользовательская история», с которой мне нужно было познакомиться, заключалась в том, чтобы позволить пользователям переключаться между градусами Фаренгейта и Цельсия. Это было мое первое знакомство с работой с API, поэтому я знал, что предстоит крутая кривая обучения, но я был взволнован возможностью, наконец, получить практическое применение Javascript и создать работающий продукт.

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

Как только я установил эту настройку, я был готов приступить к программированию. Я начал с создания своего HTML. Я не особо увлекался архитектурой или дизайном, поскольку упор в сборке будет сделан на Javascript. Исходная разметка HTML содержала информацию о заполнителях в div temp и location, чтобы я мог видеть, что я стилизовал, но позже это было удалено, так как приложение будет заполнять информацию для этих div при загрузке. Одна вещь, которую я сделал внутри своего HTML, заключалась в том, и я уверен, что это стандартная практика для всех остальных, я пошел дальше и разместил идентификаторы для элементов, которые, как я знал, я хотел бы позже настроить таргетингом с помощью своего Javascript.

После того, как HTML был на месте, мне потребовалось несколько минут, чтобы немного стилизовать его. Опять же, основной целью этого проекта была работа с Javascript, поэтому HTML и CSS получили минимум обработки. Сначала я хотел уделить каждому из них одинаковое количество внимания, но в конечном итоге мне очень хотелось вникнуть в JS.

А теперь самое интересное.

Это был буквально мой первый раз, когда я работал с API и с Javascript на этом уровне, поэтому мне пришлось много читать, смотреть и исследовать, чтобы завершить этот проект. К сожалению для меня, 99,9% руководств, форумов, блогов и т. Д. В этом проекте написаны на jQuery. Я ничего не имею против языка, но я был категорически настроен на использование ванильного JS, поэтому ресурсы, которые у меня были, чтобы помочь мне в этом процессе, были ограничены.

Я начал свой JS с создания пустых переменных информации, которые я хотел бы вызывать и обрабатывать позже, а именно: icon, temp и location. Я также создал переменную с именем APPID, и в ней я сохранил свой ключ API, чтобы я мог легко вызывать ее, когда это необходимо, вместо того, чтобы каждый раз вводить 32-значную буквенно-цифровую последовательность.
После того, как я установил глобальные переменные, я написал функцию который обновит соответствующие div с информацией о погоде, которую API получит позже. Я смог проверить, что это работает, используя строки и числа, так как я не полностью настроил API.

Когда функция обновления работает правильно, я затем настроил функцию window.onload, которая будет собирать данные о геолокации пользователей с помощью navigator.geolocation при загрузке экрана. Внутри navigator.geolocation я заключил информацию о широте и долготе в вызов функции updateByGeo, что было следующим шагом. Функция onload также захватывает элементы HTML, на которые необходимо настроить таргетинг.

Теперь создадим функцию updateByGeo, которая создаст URL-адрес, необходимый для использования API OpenWeatherMap для сбора информации о погоде. Эта функция довольно проста. Он просто создает переменную с именем URL и создает URL, необходимый для API, и объединяет необходимые широту и долготу, а также ваш ключ API. В конце функции есть вызов sendRequest (URL), который принимает URL, который мы только что создали ранее в функции. Следующим шагом будет создание этого sendRequest.

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

По сути, в этой функции происходит то, что она берет URL-адрес, который мы создали в функции updateByGeo, которая использует геолокацию пользователя, и отправляет его в API OpenWeatherMap, и оттуда мы можем проанализировать полученную информацию и доставить ее обратно пользователю.

Помните, ранее мы создавали функцию, которая обновляла бы div с соответствующей информацией? Вот откуда эта информация! Выше, в объектах weather.icon, weather.loc и weather.temp, вы можете увидеть, откуда мы получаем информацию о погоде из API.

data.weather [0] .icon, data.name и data.main.temp извлекают информацию из массива, который API отправляет обратно, как только становится известно местоположение пользователя. Это похоже на изображение ниже. В конце всего этого сбора данных мы приказываем javascript запустить нашу функцию обновления, которую мы создали ранее. Итак, теперь мы заполняем приложение погодными условиями пользователя на основе их глобального местоположения!

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

Вы, возможно, заметили выше, что наш data.main.temp был заключен в функцию K2F. Это потому, что я уже написал функцию до того, как написать это. Я не ученый и не математик, поэтому для этого мне пришлось погуглить формулу преобразования. Когда у вас есть эта формула, вы можете просто перетащить ее в функцию с вызовом return. Следует помнить, что настройка по умолчанию будет давать вам числа, которые будут давать вам десятичные точки в течение нескольких дней, поэтому вы можете захотеть поместить уравнение в Math .пол.

Поскольку мы уже находимся в математическом режиме, мы продолжим и создадим функции для преобразования Цельсия в Фаренгейты и наоборот. Опять же, быстрый поиск в Google даст вам нужную формулу, а затем вы сможете вставить ее в функцию.

Мы почти там!

Все, что осталось, - это установить переключатель между градусами Цельсия и Фаренгейта. Мы сделаем это с помощью оператора if. Мы сообщаем javascript, что если вы видите, что один тип степени в этом блоке изменяется при нажатии на другой, это должно происходить в обоих направлениях для функции.

Осталась одна крошечная вещь. Нам нужен слушатель событий! Нам нужно указать javascript для прослушивания определенного события, в данном случае щелчка, чтобы запустить нашу функцию переключения. Для меня завершение этого проекта написанием такой простой функции казалось вишенкой на вершине.

Вот и все! Теперь у нас есть работающее приложение погоды, созданное с использованием ванильного javascript! Я многому научился в этом проекте. В частности, как работать с API; по мере. Я знаю, что каждый API работает иначе, чем другие, но, наконец, знакомство с одним, а также использование javascript в практическом смысле вместо написания случайных циклов или строк было очень информативным и огромным опытом обучения.

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

Мой следующий проект - программа для просмотра википедии для Free Code Camp, и я буду писать в блоге по этому поводу!