Этот проект FreeCodeCamp включал создание веб-страницы для отображения погоды. Я впервые работал как с JSON, так и с API!
Вот мой готовый проект на github.io. Вы также можете легко отслеживать код здесь, в Codepen.
Вот цели проекта — кхм, «пользовательские истории».
- История пользователя: я вижу погоду в моем текущем местоположении.
- История пользователя: я вижу другой значок или фоновое изображение (например, снежная гора, жаркая пустыня) в зависимости от погоды.
- История пользователя: я могу нажать кнопку, чтобы переключиться между градусами Фаренгейта и Цельсия.
Итак, разбивая на этапы:
- Получить местоположение пользователя
- Используйте местоположение, чтобы узнать погоду
- Используйте сводку погоды, чтобы найти соответствующий значок погоды
- Отображение температуры, значка и сводки о погоде
- Заставьте температуру переключаться между единицами F и C
- Придайте ему красивый вид с помощью html/css
—
- Получить местоположение пользователя
Для первого шага мне понадобятся широта и долгота пользователя. Погуглив, как это сделать, я обнаружил существование API геолокации HTML 5, что означает, что браузер будет спрашивать пользователя, можно ли использовать его местоположение, творить чудеса и автоматически возвращать данные. Удобный! Итак, я сделал это. И… не получилось. Хм? Он даже не спрашивал меня, хочу ли я позволить ему использовать мое положение. Обратите внимание на спам в console.log() и некоторые дополнительные поиски в Google. Оказывается, с апреля 2016 года API перемещения браузера Google Chrome теперь требует, чтобы все запросы на определение местоположения были защищены с помощью SSL. Он даже не будет спрашивать вас, все ли в порядке — он просто молча терпит неудачу. (Только если вы проверите консоль, вы увидите какое-либо сообщение об ошибке.) Хотя я ценю некоторую конфиденциальность, я действительно просто хотел получить свою долготу и широту как можно проще. В конце концов я остановился на использовании ipinfo.io для приблизительного определения местоположения по IP-адресу пользователя.
Вот краткий учебник по коду, который я сделал о том, как получить широту и долготу для подключения к API погоды, несмотря на недавние изменения в Chrome.
2. Используйте местоположение, чтобы узнать погоду
FCC рекомендует использовать Open Weather API, но вместо этого я решил попробовать forecast.io, так как вывод JSON был немного опрятнее. Я застрял на этом шаге на ДОЛГОЕ время, так как я пытался назначить свое производное местоположение JSON переменной, и ничего не работало. Оказывается, поскольку Javascript является асинхронным, он сразу переходит к следующей строке кода до возврата вызова API, поэтому он вел себя так, как будто понятия не имел, где я был. Google сказал мне, что это область тех обратных вызовов и обещаний, о которых я так много слышал, просматривая обсуждения, связанные с Javascript, на Stack Overflow. Обещания все еще относительно новы и не поддерживаются в некоторых версиях браузеров, поэтому я решил пока использовать маршрут обратного вызова по умолчанию. Это была, пожалуй, самая запутанная часть всего проекта.
Как только я, наконец, заработал, пришло время иконок.
3. Используйте сводку погоды, чтобы найти соответствующий значок погоды.
Когда я начал изучать веб-разработку, я быстро обнаружил, что многие из маленьких значков, которые вы видите на сайтах, не изготавливаются на заказ, а вместо этого широко доступны бесплатно, как наборы наклеек на Facebook. API OpenWeather, предложенный FCC, имеет значки в формате .png, которые вы можете использовать, но, честно говоря, я не очень художественно настроен, и даже я мог бы сказать, что они были довольно уродливыми. Я нашел эти значки погоды Эрика Флауэрса и решил использовать их вместо них. Для них есть даже сопоставления API, которые соответствуют нескольким популярным API погоды, что заставило меня осознать, что диапазон используемых иконок очень мал по сравнению с некоторыми аналогичными сервисами. (Я могу расширить их позже.)
Раньше я не использовал подобные значки, но они в основном действуют очень похоже на шрифт, в том смысле, что вы можете стилизовать и изменять их размер в css, как текст. Мой jquery добавил класс значков, соответствующий правильному значку, в div, где должен был находиться значок погоды. Бам, готово.
4. Отображение температуры, значка и сводки о погоде
Я загружал его, поэтому использовал jQuery, чтобы вставить соответствующий текст/html, полученный из данных JSON, внутри div col-sm-4. Затем эти три блока были заключены в ряд. Смотри, ма, он откликается...! (Если вы уменьшите экран, три элемента div перестроятся из горизонтального ряда в вертикальный. Довольно аккуратно!) Я также сделал толстый div col-sm-12, чтобы поместить местоположение внизу под красной линией hr.
5. Заставьте температуру переключаться между единицами F и C
На самом деле я возился с этим в начале, используя некоторые «фиктивные данные», прежде чем я заработал какой-либо из API — я все еще был довольно незнаком с синтаксисом jQuery и не был полностью уверен, как вы будете использовать его для переключения чего-то туда и обратно. Мой первоначальный подход заключался в чтении html для проверки единиц и использовании if/else для определения подходящей единицы для переключения. Я получал странную ошибку типа [Object Object], с которой я не знал, что делать, пока не попросил кого-то из gitter проверить работоспособность. Они указали, что было бы проще просто использовать переменную javascript для отслеживания состояний, а не пытаться прочитать ее с отображаемой веб-страницы. Да! Оглядываясь назад, это действительно очевидно, но все же ключевое понимание: если мне нужно отслеживать или проверять состояние чего-либо, я должен просто делать это в javascript. Отсюда в любом случае будет генерироваться весь вывод.
6. Сделайте его красивым с помощью html/css
Мои фирменные цвета — черный и красный, поэтому я решил позволить им сиять в этом проекте, так как был настроен на минимальную цветовую схему. У меня инженерное образование, а не графический дизайн, но я заметил, что шрифты являются важной частью последнего. Я пытаюсь стать более осведомленным о шрифтах, поэтому я пролистал несколько бесплатных веб-шрифтов и выбрал Michroma, так как он мне понравился. Вертикальное выравнивание левого и правого сводок погоды доставило мне некоторые проблемы — если оставить их в покое, они были намного ближе к верхней части страницы, чем значок погоды, из-за чего все это выглядело перекошенным. Я подумал о том, чтобы поработать с полями/отступами для этих двух div, а затем попробовал flexbox, который отлично сработал. Чуть позже я уже был готов снова поразиться своей замечательной отзывчивости по горизонтали и вертикали, когда понял, что в какой-то момент она полностью перестала работать. Теперь у меня была уродливая полоса прокрутки вместо вертикальной строки при меньшем разрешении. Ах! Оказалось, что flexbox ломает отзывчивость бутстрапа, и здесь есть целая длинная дискуссия по этому поводу. Я решил эту проблему, используя свой первый в истории пользовательский медиа-запрос, чтобы загрузить flexbox при любых разрешениях ниже 768 пикселей, а это примерно то, где я хотел, чтобы сработало вертикальное стекирование. Ура! Теперь содержимое моих трех разделов наконец-то было хорошо разнесено как по вертикали, так и по горизонтали во всех разрешениях. (Как известно любому, кто работал с CSS, это главная проблема CSS.)
Мне нужен был элегантный дизайн, поэтому я решил отказаться от явной кнопки-переключателя для преобразования температуры. Вместо этого я сделал единицу измерения температуры красным, чтобы выделиться, и если вы наведете на нее курсор, гиперссылка станет синей, чтобы, надеюсь, вызвать достаточно любопытства, чтобы вы попытались щелкнуть по ней. (Для мобильных пользователей не существует такого понятия, как зависание, но я не против использовать его как пасхальное яйцо. ;))
Другие подводные камни:
1. Bootstrap не делает адаптивный текст
Все в Bootstrap предположительно отзывчиво, но я продолжал получать эту ужасную горизонтальную полосу прокрутки при разрешении ниже 1920x1080. Мой горизонтальный ряд из 3 столбцов должен был переключаться на вертикальный ряд из 3 столбцов всякий раз, когда он не помещался, но нет, там была горизонтальная полоса прокрутки.
Оказывается, текст на самом деле не включен во все это «по умолчанию все адаптивно». Вы думали, что это будет, но нет. Я решил это, используя медиа-запросы для изменения размера основного шрифта тела. (В следующем посте я расскажу о том, как я сделал это автоматически для своего следующего проекта.)
2. Chrome и Firefox имеют разные размеры шрифта по умолчанию.
Первоначально у меня был размер основного шрифта 100%, а медиа-запросы использовали ems для изменения размера всего в соответствии с шириной окна. Я писал код в Firefox и был счастлив наконец закончить свой проект, когда заметил, что злобная горизонтальная полоса прокрутки вернулась при просмотре в Chrome. Ой! Все было огромным! По наитию я установил базовый размер шрифта на 12 пикселей, и, когда все масштабируется от одного и того же основания, ошибка исчезла. Фух.
Хорошая практика кодирования CSS заключается в том, чтобы определять абсолютный размер шрифта только для элемента HTML или BODY и определять все остальные размеры шрифта относительно, то есть с точки зрения этого размера (т. е. с использованием
emили%). --guy в StackOverflow
Тогда все в порядке. Урок выучен.
И, наконец, спасибо парню из Gitter FCC, который сообщил мне, что консоль codepen.io на самом деле показывает не все. Консоль реального браузера содержала гораздо больше информации, большая часть которой была критической. Я, вероятно, понял бы все это намного раньше, если бы знал, что две консоли не идентичны с самого начала.
