matheuskroska/angular-test

CloudCANVAS

Overview

• Instalação

Clone o repositório e em seguida execute
A chave da API está nos environments, está exposta, mas é gratuita, se preferir, crie uma conta em https://www.weatherapi.com/

npm install & ng serve

Testes

npm run test:coverage

Cobri os serviços com testes.

API's utilizadas

• https://www.weatherapi.com/, consultando três endpoints distintos:
• /search
• /current
• /forecast

Features

• Autocomplete de cidades pesquisadas
• Consulta a previsão do tempo de até 7 dias e seus horários.
• Light/Dark mode.

Idéia

- Minha ideia é consumir uma primeira API com apenas dados simples da cidade e exibir nos cards da home.
- Esse autocomplete tem um debounce e o atualizar cidade tambem.
- Tratei os dados de retorno da API para exibir a data atualizada da requisição e adicionei um campo extra "URL"
- fiz dessa forma pois a API de Autocomplete não dá o ID da cidade, a URL é "cidade-estado-pais"
- Garanto assim que a cidade seja sempre a correta escolhida.
- As requisições subsequentes a outros endpoints exibem dados completos no card e na página detalhe
- As requisições são sempre feitas dentro de um serviço e para a página detalhes eu forneco a "URL"
- Utilizei um serviço para guardar, atualizar e deletar meus dados, e persistir entre trocas de tela, semelhante a uma Store.
- Componetizei a aplicação de forma a poder utilizar a maioria dos blocos, deixei os estilos relacionados ao componente dentro dos proprios componentes
- Os estilos de layout ( grids, responsividade) são responsabilidade das pages.
- Tentei utilizar recursos recentes como "Standalone Componentes" e "Control Flow"
- Não consegui concluir todos os requisitos, mas tentei mostrar um pouco de cada coisa
- Em detrimento do tempo e para deixar a aplicação mais polida, não realizei todos os testes.