Створення додатку Weather

Минулого тижня я брав участь у проекті "Показ місцевої погоди" програми Free Code Camp, який передбачав створення програми, яка відображала погоду там, де знаходився користувач.

Мені довелося реалізувати такі історії користувачів:

  • Користувач може переглянути погоду у своєму поточному місцезнаходженні.
  • Користувач може перемикати одиницю вимірювання температури (Цельсія або Фаренгейта).
  • Значок погоди або фонове зображення змінюватимуться залежно від погодних умов.

Я вирішив піти трохи далі, додавши ще одну історію користувача

  • Користувач може шукати інформацію про погоду в інших місцях.

Дизайн

У мене було купу ідей щодо дизайну цього додатка, і я подивився кілька завершених проектів (звичайно, не перевіряючи їх код) від спільноти, щоб побачити, що інші люди відображають у своєму додатку та як це виглядає.

Придумати остаточний макет було трохи хитро, але мені було корисно визначитися з елементами, які я хотів відобразити для користувача, і будувати звідти.

Метою тут було зробити все просто. Я вирішив показати лише опис температури та погоди на додаток до місцевого часу.

Мені також сподобалась анімована піктограма погоди у прикладі проекту, і я вважав, що це краще зображення поточної погоди, ніж фонове зображення, тому я хотів застосувати це у своєму додатку.

Як завжди, я все заношу в свій Workflowy.

Налаштування всього було досить прямо, за винятком пошуку відповідного набору анімованих піктограм. Мені довелося трохи пошукати, перш ніж я знайшов Skycons, яким я в кінцевому підсумку скористався.

Інша справа, з якою я боровся, - це знайти хорошу колірну схему для програми, і це те, з чим я майже завжди борюся. Я експериментував з різними комбінаціями, перш ніж висаджувати кінцевий продукт.

Логіка

Переглянувши приклад відповіді API від Open Weather, я зрозумів, що мені потрібно буде отримати довготу та широту користувача, щоб мати змогу подавати інформацію про погоду при завантаженні сторінки.

Найпростіший спосіб зробити це - використовувати 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("//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 Open Weather дав мені спосіб оновити місцезнаходження, температуру та опис погоди, але мені все одно потрібно було знайти спосіб оновити місцевий час. Після невеликого пошуку я знайшов ще один API на Geonames.org, який подбав про це.

$.getJSON('//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); });

Останнє, що я зробив, це оновив піктограму погоди щодо умов у місцезнаходженні користувача чи місті, що цікавить. Я вирішив, що хороший спосіб зробити це - перевірити опис погоди та змінити піктограму на основі цього.

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

//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% надійним, але він працював досить добре, щоб я його дотримувався.

Ви можете перевірити повний код та ефекти на Codepen.

Винос на ключ

Мій головний висновок з цього проекту полягає в тому, що я навчився отримувати доступ до кожної частини повернутих даних JSON із відповіді API та використовувати їх різними способами. Хоча моя методологія потребує доопрацювання, вона обов’язково покращиться завдяки більшій практиці.

Що далі…

Наступним проектом для мене є програма Wikipedia Viewer. Я вже на півдорозі, коли пишу цю статтю, тому її слід закінчити найпізніше до четверга.

Якщо ви хочете зв’язатися зі мною або зв’язатися зі мною, ви можете знайти мене в Twitter або надіслати електронною поштою. Дякуємо за читання.