Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Создание приложения Погода с помощью API Dark Sky

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Программирование для веб может быть очень забавным, особенно когда вы работаете с внешним API для динамического получения данных. Некоторые могут назвать это «веб-приложениями», другие могут назвать это «веб-страницами». В любом случае мы собираемся создать демонстрацию, чтобы отображать прогноз погоды с помощью API DarkSky и Google Maps, магии JavaScript, а так же анимации CSS. Будет очень весело, так что давайте начнем!

Примечание. Мы не будем вдаваться в детали процесса сборки, но у вас будет достаточно информации из этого обзора, чтобы самостоятельно все сделать.

Совет. Чтобы узнать больше об интерфейсах API, ознакомьтесь со статьей об увеличении роли API в веб-разработке.

Что мы будем создавать

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

Weather app demo
Демонстрация приложения для погоды

DarkSky

DarkSky предлагает один из многих API, доступных для получения информации о погоде. Мало того, что у DarkSky есть API, доступный для разработчиков, у него также есть приложение, доступное для iOS, Android и даже для часов Apple.

API обеспечивает доступ к ежечасным и ежедневным прогнозам на предстоящую неделю, поминутным «гиперлокальным» прогнозам дождя, правительственным предупреждениям о суровой погоде, наблюдениям, возвращаемым десятилетиями, десяткам языков, единицам измерения и все это сопровождается хорошей документацией. Там есть модель оплаты с оплатой по ходу, но первые 1000 прогнозов в день бесплатны. Эта часть важна, особенно если вы хотите поэкспериментировать в чисто демонстрационных целях. После первых 1000 запросов прогноз становится платной услугой по цене 0,0001 доллара за прогноз.

skycons
Skycons

DarkSky также предоставляет доступ к действительно крутому набору анимированных значков прогноза для использования вместе с их API. Эти значки называются Skycons - сильно вдохновленными Climacons - и визуализируются с использованием canvas.

Разметка

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

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

Вот результат нашей разметки с некоторыми CSS-стилями, чтобы создать плавающие инпуты и добавить цвет фона, чтобы мы могли видеть визуализированную разметку.

Автозаполнения инпутов

Мы можем пойти дальше, чем просто два инпута для широты и долготы. Что, если кто-то не знает эти координаты? Чтобы решить эту проблему, мы добавим еще одно поле, чтобы пользователи могли вводить и получать запрошенный прогноз по названию города - это, в свою очередь, автоматически заполняет поля координат!

Эта разметка сама по себе не приведет нас к цели автоматического заполнения координат путем поиска города; Для этого нам нужно окунуться в API Карт Google. Так же, как нам нужен ключ API для DarkSky, нам также нужен ключ API для Google Maps. Здесь можно получить персональный ключ API Карт Google, который не предусмотрен для этого руководства.

Запрос API Карт Google

Для этой части приложения нам нужно включить скрипт Google API, который содержит ваш персональный ключ API в URL-адресе.

Этот скрипт является вызовом для загрузки API Карт Google, но есть еще немного объяснений.

URL содержит параметры &libraries=places,geometry. Служба «Места» и «Геометрия» представляет собой набор автономных библиотек, помимо основного JavaScript API Карт Google.

С помощью ключа API, зарегистрированного для Google Maps, мы можем начать с создания JavaScript для поля поиска, в котором будут отображаться города по мере того как пользователь начинает печатать.

Чтобы отображать список городов, по мере того как печатает пользовать, мы будем использовать то, что называется Places Search Box.ъ

Аргумент SearchBox() будет передан созданному ранее инпуту для поиска.

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

Аргумент places_changed является событием, которое запускается, когда PlaceResult становится доступным для города/местоположения, который выбирает пользователь. Для справки также доступна полная документация по JavaScript API Карт Google.

Логика

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

Переменную для хранения нашего местоположения определим как locale, и затем вы можете заметить ее значение на searchBox.getPlaces()[0]. Этот метод является магией, которая поможет автозаполнять координаты по выбранному городу (первый) или, другими словами, возвращает запрос, выбранный пользователем.

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

Эти две строчки задают «значения» наших координат и используют свойства geometry и location, предоставленное place.

Если вы хотите, то так же можно стилизировать автодоплнение.

Запрос на получение прогноза

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

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

Результаты из DarkSky возвращаются в виде JSON (JavaScript Object Notation), поэтому при генерации запроса вам нужно использовать метод getJSON.

В коде выше  для простоты я использую jQuery. Аргумент forecast будет представлять возвращаемые результаты.

Использование console.log сообщит об объекте, представляющем данные API DarkSky. Как видите, есть много вариантов с точки зрения информации, которую можно получить.

Skycons

Чтобы начать использовать Skycons, нам нужно написать функцию, используя традиционную темную магию (иначе известную как JavaScript):

Этот метод для ваших Skycons должен быть помещен внутри запроса getJSON, который мы написали ранее. Функция будет отображать и прикреплять наши анимированные значки для динамически создаваемых прогнозов; детали, которые недокументированны Skycons.

Конечный результат

Объединение всей этой тяжелой работы приводит к функционированию приложения погоды в сочетании со всеми видами волшебства, такими как массивы JavaScript, циклы, вызовы api, взаимодействие и движение. Все аспекты и навыки, необходимые для создания отличного приложения.

Я настоятельно рекомендую вам ознакомиться с представленным демо-проектом. Каждая строка была полностью прокомментирована, чтобы помочь вам понять намерения для каждой строки кода. Надеюсь, что комментарии и совместные усилия по созданию этой демонстрации помогут вам расширить свой набор навыков и вдохновить вас на то, чтобы сделать свою собственную демонстрационную версию с любым API, который вы выберете.

Может быть, вы решите создать приложение Dribbble, приложение Envato или даже приложение CodePen. Независимо от того, что это, найдите время, чтобы создать что-то свое и не забудьте практиковаться, практиковаться, и еще раз практиковаться!

Ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.