Construa um microsite responsivo em SPA (single-page application) para mostrar a previsão do tempo nas localidades informadas na caixa de texto branca (na imagem de exemplo é o local aonde aparece "Rio de Janeiro, Rio de Janeiro").
Logo que a página seja aberta deve ser coletada as coordenadas geográficas do usuário pela API do navegador para então ser descobrir o nome da cidade via reverse geocode.
Como fundo de tela deve ser usado a imagem de destaque do Bing. Devem ser mostradas as previsões para: hoje, amanhã e depois de amanhã.
Note que existe um degradê sobreposto na imagem original, na verdade essa cor reflete a temperatura atual do lugar buscado para as três datas. Para temperaturas abaixo de 15ºC deve ser usado tons de azul, para temperaturas acima de 35ºC deve ser usado tons de vermelho e use tons de amarelo para as demais temperaturas. Quando não houver nenhuma localidade escolhida deve ser usado tons de cinza como base para o degradê. Se o usuário clicar em qualquer temperatura, as temperaturas devem ser alteradas de Celcius para Fahrenheit ou de Fahrenheit para Celcius.
A URL da imagem de fundo deve ser extraida da API do Bing
Para consultar a previsão do tempo, utilize a do OpenWeather informando o nome da localidade no lugar de {{location_name}} usando a app id 7ba73e0eb8efe773ed08bfd0627f07b8. Caso necessário, crie uma nova conta.
Para converter latitude e longitude em uma localidade utilize o OpenCage usando a API key c63386b4f77e46de817bdf94f552cddf. Caso necessário, crie uma nova conta.
Os ícones podem ser encontrados em http://www.alessioatzeni.com/meteocons/
O uso de geohash ou custom elements dá ponto extra 🔝
- Preferencialmente faça em React, mas você poderá também fazer em jQuery mas não pode usar nenhum plugin de jQuery, queremos ver o seu trabalho. Para a folha de estilo, deve ser utilizado LESS.
- Forkar esse desafio e criar o seu projeto (ou workspace) usando a sua versão desse repositório, tão logo acabe o desafio, submeta um pull request.
- Caso você tenha algum motivo para não submeter um pull request, crie um repositório privado no Github e adicione como colaborador o usuário
automator-hurbe o deixe disponível por pelo menos 30 dias. Ao terminar o desafio nos envie um email avisando do termino. - Caso você tenha algum problema para criar o repositório privado, ao término do desafio preencha o arquivo chamado
pull-request.txt, comprima a pasta do projeto - incluindo a pasta.git- e nos envie por email.
- Caso você tenha algum motivo para não submeter um pull request, crie um repositório privado no Github e adicione como colaborador o usuário
- O código precisa rodar dentro de um container Docker
- Para executar seu código, deve ser preciso apenas rodar os seguintes comandos:
- git clone $seu-fork
- cd $seu-fork
- comando para instalar dependências
- comando para executar a aplicação
- Organização do código: Separação de módulos, view e model, back-end e front-end
- Clareza: O README explica de forma resumida qual é o problema e como pode rodar a aplicação?
- Assertividade: A aplicação está fazendo o que é esperado? Se tem algo faltando, o README explica o porquê?
- Legibilidade do código (incluindo comentários)
- Segurança: Existe alguma vulnerabilidade clara?
- Cobertura de testes (Não esperamos cobertura completa)
- Histórico de commits (estrutura e qualidade)
- UX: A interface é de fácil uso e auto-explicativa
- Escolhas técnicas: A escolha das bibliotecas, banco de dados, arquitetura, etc, é a melhor escolha para a aplicação?
Quaisquer dúvidas que você venha a ter, consulte as issues para ver se alguém já não a fez e caso você não ache sua resposta, abra você mesmo uma nova issue!
Boa sorte e boa viagem! ;)
