Aplicação: Weather App

danielsdecastro commented 2 years ago

As cores da sua versão da aplicação são diferentes das cores da aplicação mostrada na aula?

Sim

A aplicação contém funcionalidades que não foram mostradas nas aulas?

Sim

A aplicação contém features da linguagem que não foram mostradas nas aulas?

Não

Link do repositório da aplicação

https://github.com/danielscastro/city-weather-app

Maiores dificuldades durante a implementação

Tive algumas dificuldades ainda durante as aulas (antes de desenvolver a aplicação) para entender bem qual era o fluxo das requisições, basicamente, de onde o dado saía e para onde ele ia. Minha solução pra isso foi assistir às aulas em que o aplicativo estava sendo construído algumas vezes (percebo que aprendo melhor nos exemplos, na execução).

Menores dificuldades durante a implementação

Depois que o weather.js estava pronto, desenvolver o app.js foi relativamente fácil. Manipular a DOM e utilizar os dados retornados pelas requisições já é uma atividade que a cada vez mais é mais fácil e natural pra mim.

Procurei adicionar uma nova feature usando a API do AccuWeather, a ideia era me forçar a dar uma olhadinha na documentação e implementar algo com uma nova requisição. Consegui implementar uma "previsão do tempo" na parte de baixo do card. Na verdade esse campo que a API retorna tem uma frase que faz um comentário sobre o tempo (geralmente futuro, mas em alguns testes eu vi um texto sobre o tempo atual).

Estava muito animado para desenvolver esse aplicativo, mas como havia estudado bastante o weather.js desenvolvido nas aulas, eu passei o sábado sem olhar nada sobre o curso, e no domingo tentei desenvolver sem ajuda. Não sei se feliz ou infelizmente, eu lembrei de muita coisa, o que deixou meu código bem parecido com os das aulas, mas estou orgulhoso porque o que eu olhei de fato lá foram detalhes de melhoria no código, o desenvolvimento de fato consegui fazer todo sozinho, em uma honesta autoanálise. Também não demorei muito para desenvolver as funcionalidades básicas do app, em algumas poucas horas eu já estava polindo e alterando algumas coisas no estilo pra não enviar igual ao do boiler plate.

Roger-Melo commented 2 years ago

Olá @danielscastro.

Passando para dizer que visualizei a issue e em até 5 dias úteis a análise será postada aqui =)

Roger-Melo commented 2 years ago

Olá @danielscastro!

Parabéns pelo esforço em construir a terceira aplicação do treinamento =)

Pelo seu código é perceptível que você pegou bem a lógica até aqui.

Você também fez bom uso do ternário e os nomes das suas variáveis estão bem descritivos.

Parabéns também por se desafiar a ler a doc e implementar a nova funcionalidade.

Estava muito animado para desenvolver esse aplicativo, mas como havia estudado bastante o weather.js desenvolvido nas aulas, eu passei o sábado sem olhar nada sobre o curso, e no domingo tentei desenvolver sem ajuda.

Tome cuidado com os termos. Aplicação web e aplicativo são coisas distintas.

Aplicação web roda no browser, aplicativo roda no dispositivo do usuário (celular, desktop, tablet...) e precisa ser baixado.

Obviamente na nossa conversa isso é apenas um detalhe bobo. Mas em um teste técnico por exemplo, usar estes termos de forma equivocada pode ser prejudicial.

Sua aplicação tem poucos ajustes =)

Olha só...

Nomeação de callbacks

É importante nomear callbacks de eventos para que o código fique mais legível.

Quando vc nomeia um callback, vc está descrevendo a ação que a função faz.

E isso representa ganho de tempo de leitura do código.

O que é mais rápido e legível ler?

// isso
formChangeCity.addEventListener('submit', async event => {
  event.preventDefault();

  // ...
})

// ou isso?
formChangeCity.addEventListener('submit', showCityWeather)

Para escolher o nome da showCityWeather, o único princípio que usei foi me perguntar qual ação deve acontecer quando o form for enviado.

Variáveis globais

Nunca declare consts ou lets sem as palavras-chave const ou let, pois isso pendura uma variável global no objeto window (é como se var tivesse sido usado).

No código abaixo searchedCity, variáveis do destructuring e forecast foram penduradas no window:

  searchedCity = event.target.city.value;

  [{ Key, LocalizedName }] = await getCityData(searchedCity);
  [{ IsDayTime, WeatherText, Temperature, WeatherIcon }] = await getCityWeather(Key);
  forecast = await getCityForecast(Key);

  console.log(window.searchedCity, window.Key) // miami 347936

Sempre que possível, evite variáveis globais. Elas podem ser modificadas de qualquer lugar da aplicação, podem se sobrescrever (se duas variáveis globais tiverem o mesmo nome) e minam a modularidade do código.

Declaração de parâmetros

JS é case sensitive.

Isso significa que o parâmetro que contém "w" minúsculo não foi referenciado na interpolação da string, que contém "W" maiúsculo:

// antes
const getTimeIcon = weatherIcon => `<img src="./src/icons/${WeatherIcon}.svg">`;

Ou seja, o WeatherIcon que foi declarado ali em cima sem a palavra-chave const foi acessado na interpolação, enquanto o parâmetro weatherIcon (com "w" minúsculo) não foi usado.

Nas aulas seguintes, você verá formas de refatorar o código dessa aplicação.

Mais uma vez, parabéns pelo esforço =)

As observações fizeram sentido?

danielsdecastro commented 2 years ago

Muito obrigado pelo feedback, @Roger-Melo . Fizeram todo sentido. Infelizmente não visualizei a revisão antes de escrever o código da aplicação seguinte (currency converter). Talvez tenha repetido alguns desses erros lá. Estudo no tempo que consigo espremer por entre os dias e às vezes não sobra pra ver com atenção os feedbacks. Mas enfim, sigamos. Nos códigos seguintes tentarei aplicar as correções. Muito obrigado!

roger-melo-treinamentos / curso-de-js-roger-melo