Aplicativo baseado em React que traz a previsão do tempo das cidades, utilizando uma API. Também irá trazer a lista de aeroportos próximos* baseado na localizaçao obtida pelo próprio app ao receber a cidade digitada. Agora, também é possível pesquisar a previsão do tempo na sua cidade utilizando a sua localização atual.
Baseado no Workshop fornecido pela Escola Britânica de Artes Criativas e Tecnologia e guiado pelo professor de React, Miguel.
Você pode acessar o app rodando através do deploy feito no Vercel 💜
- Busca com todas as cidades do Mundo;
- Resultado na mesma tela;
- Loading de Busca;
- Retornar erros da API;
- Trazer o clima;
- Apagar o formulário depois da busca;
- Resetar o app ao estado inicial após uma busca;
- Sistema de Feedback;
- Obter Localização no Navegador;
-
Trazer aeroportos por perto usando a localização obtida pela resposta da API do tempo e com a API AeroDataBox; * - Split o app em componentes independentes (v2);
- React / Javascript
- HTML / CSS
Bibliotecas que me ajudam a montar e dar vida à este projeto
v1 - do app está concluída. Finalizado em 29.out.2021
Meu primeiro contato com o React, foi bem mais tranquilo que eu poderia imaginar.
Apesar da API da AeroDataBox fornecer o acesso gratuito, eram apenas 15 requisições de forma gratuita e com isso não foi possível manter o app exibindo a lista de aeroportos. Felizmente, o objetivo maior, que é o de aprendizado foi concluido! Ao desenvolver este app, eu aprendi algumas coisas que ainda não dominava em Javascript / React.
Ao criar o Reacast, eu aprendi a utilizar as funções de estado (UseState), Componentes para fazer o rodapé e aprendi a obter resultados da API.
app exibindo a lista de aeroportos
O mais difícil, foi utilizar a API da AeroDataBox, pois a forma que ela retorna os dados era diferente do que foi apresentado no workshop, entretanto, fui aprender mais sobre Mapeamento de Dados e como utiliza-lá para obter os dados da API de forma correta.
O uso do fetch para obter os dados foi muito tranquilo, porém precisei aprender como esperar a API retornar o resultado pra continuar com a próxima requisição, uma vez que eu precisava da latitde e da longitde para obter os aeroportos próximos. Consegui estudando o método async do Javascript. Função esta que irei aplicar no meu outro projeto que tenho em mente.
Fico feliz de ter conseguido ir além do que eu pensava, quero agradecer à EBAC pelo Workshop e ao instrutor Migel Maia pela introdução ao React! Ao futuro, preciso estudar ainda mais o React e toda a sua estruturação e também o Javascript!
Ah, e depois de aprendido, refatorar este primeiro projeto 🤗!