Как я решил эту проблему на домашнем собеседовании

Я недавно подал заявление о приеме на работу в компанию и все еще прохожу с ними собеседование. У меня было первое собеседование, после которого мне прислали ссылку на репозиторий GitHub с задачей кода, которую нужно выполнить на выходных.

Проект

Репо содержало следующие инструкции:

Используйте« Create React App , чтобы написать небольшое одностраничное веб-приложение с Redux или Context API. Мы знаем, что в этом приложении не так много состояний, но создание библиотеки управления состоянием дает нам хорошее представление о вашем стиле.

Если вы не являетесь поклонником React и / или предпочитаете альтернативный веб-фреймворк. Без проблем! Мы используем React и наслаждаемся им, но вам не обязательно прямо сейчас. Не стесняйтесь использовать Vue, Angular и т. Д. Или даже простой JS, если вы выполняете требования, указанные ниже. Однако, если вы действительно используете React, используйте Create React App с некоторой библиотекой управления состоянием ».

Требования

«- имеет одну кнопку в центре под названием« Текущая погода ».

- При нажатии он использует встроенный браузер API геолокации для определения местоположения пользователя.

- Затем приложение берет текущую погоду для этого места из OpenWeatherMap и отображает ее на странице.

- Разверните где-нибудь свой проект (Surge.sh - хорошее простое решение)

В первую очередь мы обращаем внимание на вашу способность писать чистый организованный код, взаимодействовать с внешними API и обрабатывать асинхронный JavaScript. Поэтому, хотя проект небольшой, мы хотим, чтобы вы присылали нам то, что вы считаете качественным кодом. История ваших коммитов должна четко отражать ваш прогресс в приложении ».

Это было забавное упражнение и хороший обзор React / Redux. Как человек, который работал над своими навыками Angular в течение последнего месяца или около того, я должен был признать, что был немного поджарен.

Я здесь, чтобы рассказать вам о своем процессе, а также поделиться кодом. Сегодня я узнал, что команда инженеров просмотрела мою заявку и хотела бы просмотреть ее завтра через Zoom. Я очень этого жду! А пока пишу эту статью, чтобы успокоить нервы.

Как следует из названия, этот пост будет состоять из двух частей. Вот чего ожидать.

Приступим!

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

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

Я создал новый каталог, дал своему приложению запоминающееся имя (как «Weatherly» еще не приложение погоды где-то там?) , набрал в своем терминале create-response-app и позволил ему сделать это магия.

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

Позвольте мне сказать вам, это было самое легкое, что я когда-либо делал. Их документация очень проста, и вам не требуется устанавливать, требовать или импортировать что-либо дополнительное в свои компоненты. Единственное, на что я хотел бы обратить особое внимание, - это убедиться, что все ваши вызовы API выполняются на конечную точку HTTPS, а не на HTTP по умолчанию. И я имею в виду все ваши вызовы API. Мне нужно было убедиться, что все мои вызовы API Open Weather Map выполнялись в безопасном контексте и что моя ссылка на развернутое приложение также была безопасной. На всякий случай убедитесь, что все ваши ссылки - HTTPS… или еще (подробнее об этом в части 2).

Прежде чем продолжить обсуждение компонента кнопки, я хотел бы вкратце взглянуть на мои настройки файла. Это предпочтение, а не требование, и в этом, конечно, не было необходимости в приложении такого размера, но мне нравится придерживаться Принципа разделения проблем и организовывать мои Redux в отдельные папки. Если вам нужно хорошее руководство по настройке хранилища Redux в вашем приложении, я настоятельно рекомендую официальные документы Redux. Однако как вы организуете свой файл, зависит от вас, и вот как я решил это сделать:

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

См. Мою папку redux, если хотите поближе познакомиться с моими файлами.

Затем я пошел дальше и создал компонент для своей кнопки:

Здесь несколько вещей:

  • Мне нравится функциональность моих компонентов, , поскольку это облегчает их отладку, но я обычно начинаю с компонентов класса, пока не буду уверен, что все работает правильно, прежде чем я проведу рефакторинг. Я сосредотачиваюсь на том, чтобы все работало, затем на том, чтобы они хорошо выглядели для пользователя, а затем на рефакторинге для повышения производительности. Если вы думаете, что есть лучший подход, я приветствую ваши мысли.
  • Как видите, я импортирую несколько действий из своего redux. Как я упоминал ранее, приложение такого размера обычно не гарантирует использование Redux, и локальное состояние было бы совершенно нормальным (а также, возможно, с сохранением всего кода в одном компоненте), но ради упражнения и демонстрации что я знаю свой путь в Redux, вот что у меня получилось.
  • Я сжал методы, предоставляемые навигатором API геолокации, и заключил их в свою собственную функцию, где я получаю доступ к данным о местоположении и извлекаю координаты широты и долготы (строки 12–21).
  • Конечно, прежде чем я заставил все это выглядеть примерно так, я сначала протестировал кнопку и взглянул на свои данные, чтобы увидеть, с чем я работаю, напрямую подключив кнопку к методу. Это выглядело примерно так:
<button 
onClick={navigator.geolocation.getCurrentPosition(position =>       console.log(position))}>
Current Location
</button>

А вот как выглядели данные:

Так я узнал, как получить доступ к данным широты и долготы.

Я большой поклонник console.logging всего и знакомлюсь с данными, прежде чем двигаться дальше.

И это все, что касается API геолокации. Это действительно так просто. Пользователя попросят дать разрешение при первом запросе геолокации, но не при последующих запросах (если вы не очистите кеш). Кроме того, не забудьте защитить все свои ссылки с помощью HTTPS. Я столкнулся с несколькими проблемами, пока не обнаружил, что проблема была в значке погоды, который я получил через HTTP. Всегда учись на своих ошибках.

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

Мой App.js настолько прост, насколько это возможно, и завершает HomePage, где происходит настоящее волшебство:

Теперь, когда это сделано, давайте рассмотрим Open Weather Map API и то, как я устранил некоторые из появившихся ошибок.

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

Это все доступные конечные точки, которые Open Weather Map API предоставляет своим пользователям, и вот ту, которую я использовал:

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={apiKey}

Как видите, это не все параметры, которые вы можете использовать, и в моем случае я решил указать единицы измерения, в которых я хотел бы, чтобы моя информация о температуре была предоставлена ​​в «британской системе мер» (как показано в строке 2):

Вот мой WeatherOutput компонент:

Вот результаты в зависимости от выбора Цельсия / Фаренгейта:

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

TL;DR

Вот репо GitHub. Вот живое приложение, развернутое на Surge.

Не стесняйтесь обращаться к нам, если у вас есть какие-либо вопросы или замечания.

Я люблю учиться и помогать другим учиться.