Автор оригинала: FreeCodeCamp Community Member.
Айо Исаия
На прошлой неделе я занимался бесплатным кодовым лагерем Показать местную погоду Проект, который включал в себя создание приложения, которое отображало погоду, где бы пользователь не было.
Я должен был реализовать следующие пользовательские истории:
- Пользователь может просмотреть погоду в его/ее текущем месте.
- Пользователь может переключить температуру (по Цельсию или Фаренгейту).
- Значок погоды или фоновое изображение будут изменяться в зависимости от погодных условий.
Я решил взять его немного дальше, добавив еще одну историю пользователя
- Пользователь может искать информацию о погоде других мест.
Дизайн
У меня была куча идеи для дизайна этого приложения, и я посмотрел на несколько завершенных проектов (без проверки их кода) от сообщества, чтобы увидеть, что другие люди отображаются в их приложении, и как это выглядело.
Придумать с окончательной макетом было немного сложно, но я обнаружил, что это полезно решить элементы, которые я хотел отображать для пользователя и построить оттуда.
Удерживая все возможное, была целью здесь. Я решил показать только описание температуры и погоды в дополнение к местному времени.
Мне также понравилась анимированная погода значок в Пример проекта И чувствовал, что это было лучшее представление нынешней погоды, чем фоновое изображение, поэтому я хотел реализовать это в мое приложение.
Как обычно, я поставил все в моем Рабочий процесс Отказ
Настройка всего, было довольно прямо прямо, кроме поиска подходящего анимированного набора значка. Я должен был найти немного, прежде чем нашел Скайконы что я оказал использование.
С другой стороны, я боролся с нахождением хорошей цветовой схемы для приложения, и это то, с чем я почти всегда борюсь. Я экспериментировал с разными комбинациями, прежде чем посадить последний продукт.
Логика
Посмотрев на пример ответа API от Открыть погоду Я подумал, что мне нужно будет получить долготу и широту пользователя, чтобы иметь возможность подавать информацию о погоде на странице нагрузки.
Самый простой способ сделать это было использовать API геолокации HTML5, который был довольно простым, он уже был покрыт его в разделе JSON и API на раздел учебной программы.
Я сохранил возвращенные значения в уже объявленных переменных и использовал их, чтобы сделать запрос AJAX.
if (navigator.geolocation) {//Return the user's longitude and latitude on page load using HTML5 geolocation API
window.onload = function () { var currentPosition; function getCurrentLocation (position) { currentPosition = position; latitude = currentPosition.coords.latitude; longitude = currentPosition.coords.longitude;//AJAX request
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) { var rawJson = JSON.stringify(data); var json = JSON.parse(rawJson); updateWeather(json); //Update Weather parameters }); }navigator.geolocation.getCurrentPosition(getCurrentLocation);
};
API открытой погоды дал мне способ обновить местоположение, температуру и погода, но мне все еще нужно было найти способ обновления местного времени. После небольшого поиска я нашел еще один API на Geonames.org который позаботился об этом.
$.getJSON('http://api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function(timezone) { var rawTimeZone = JSON.stringify(timezone); var parsedTimeZone = JSON.parse(rawTimeZone); var dateTime = parsedTimeZone.time; timeFull = dateTime.substr(11); $(".local-time").html(timeFull); //Update local time timeHour = dateTime.substr(-5, 2); });Последнее, что я сделал, должен был обновить значок погоды в условиях в месте расположения пользователя или в интересах города. Я решил хороший способ сделать это, чтобы проверить описание погоды и изменить значок на основе этого.
Поэтому я рассмотрел несколько возможных сценариев, таких как чистое небо, облако, снег, солнечный, дождь E.t.c и написал кучу условных утверждений, чтобы проверить, если описание погоды содержит одно из ключевых слов, а затем обновить значок погоды.
//Update Weather animation based on the returned weather description
var weather = json.weather[0].description;
if(weather.indexOf("rain") >= 0) { skycons.set("animated-icon", Skycons.RAIN); } else if (weather.indexOf("sunny") >= 0) { skycons.set("animated-icon", Skycons.CLEAR_DAY); }Я обнаружил, через различные тесты, что этот метод не является на 100% надежно, но он работал достаточно хорошо для меня, чтобы придерживаться этого.
Вы можете оформить заказ полный код и эффекты на Кодепен Отказ
Ключ на вынос
Моя основная вынос от этого проекта состоит в том, что я узнал, как получить доступ к каждой части возвращенных данных JSON из ответа API и использовать ее по-разному. Хотя моя методология нуждается в одном переработке, это обязательно поправиться с большим количеством практики.
Что дальше…
Следующий проект для меня – Wikipedia Viewer App Отказ Я уже на полпути, как я пишу эту статью, поэтому она должна быть завершена в четверг не позднее.
Если вы хотите протянуть или связаться со мной, вы можете найти меня на Твиттер или же напишите мне Отказ Спасибо за прочтение.