Источником данных используется сервис openweathermap. Для полноценной работы виджета я обращался к 4 адресам:
- запрос на получения координат пользователя;
- запрос на определение города по координатам;
- запрос на определение координат города по названию;
- запрос на определение погоды по координатам;
При первом запуске виджета (или когда отстутствуют данные в localstorage), идёт запрос на получение координат пользователя, по ним определяется населённый пункт и сопутствующие данные, и далее по этим данным идёт запрос на получение данных о погоде. Погода в дальнейшем отрисовывается в соответсвующих блоках. Необходимая информация по каждому конкретному городу сохраняется в config и складывается в localstorage и используется при обновлении страницы.
При добавлении новых городов принцип работы такой же. Есть нюанс с тем, что сервис openweathermap не выдаёт ошибок, если намеренно написать какое-то некорректное имя города, возвращается просто пустой массив, поэтому базовую валидацию пришлось прописать отталкиваясь от этого пустого массива.
Я немного упростил себе задачу и при выдаче результатов запросов по погоде и городам я забираю только первый элемент из массива ответа сервера. Как показала практика, первым элементом выдаётся самые известный или популрный город по запросу. На примере: при запросе погоды в городе Санкт-Петербург, будет показана погода в городе, который находится в России, а не где-нибудь в США.
В проекте я решил не использовать vuex, так как самих файлов немного и абсолютно достаточным мне показалось передавать пропсы от родителя к дочерним компонентам и поднимать обратно "наверх" события и данные через emit.
Из сторонних библиотек я использовал иконки из bootstrap(только их, в проекте не установлен полноценный bootstrap), остальную стилизацию я решил сделать сам и axios, для упрощения общения с сервером.
На данный момент я публикую в открытом доступе appId-ключ, который лежит config.json, но вы конечно можете использовать свой. Это сделано в рамках тестового задания, в остальном я понимаю, что следует хранить ключ в переменных окружения.
Виджет задеплоен здесь И его можно встроить в свой сайт, используя простенький тэг iframe:
<iframe
frameborder="0"
style="border: 0px"
width="250px"
height="300px"
src="https://weather-widget-ts.netlify.app/">
</iframe>
npm install
npm run serve
npm run build