Roger-Melo
commented
3 years ago Oi Henrique.
Você viu as aulas e depois implementou sozinho? Se sim, seu código demonstra que você realmente entendeu bem =)
Antes de responder as dúvidas, deixa só eu te dar um feedback sobre algumas coisas na aplicação, sobre organização do código.
- Linhas extensas
const showCityWeather = async inputValue => {
// ...
const [{IsDayTime, Temperature, WeatherText, WeatherIcon}] = await getCityWeather(Key)
// ...
}Na linha cima, você pode quebrar o valor da const para a linha de baixo e indentá-lo. Faça isso quando estiver refatorando a aplicção, em linhas com mais de 80 caracteres:
const showCityWeather = async inputValue => {
// ...
const [{IsDayTime, Temperature, WeatherText, WeatherIcon}] =
await getCityWeather(Key)
// ...
}Linhas extensas cansam os olhos e dificultam o entendimento do código.
- Linhas em branco
Não deixe em branco a última linha de um bloco. Então no código abaixo,
try {
// ...
return response.json()
}ficaria assim:
try {
// ...
return response.json()
}- Indentação das linhas quebradas
No código abaixo,
const getCityUrl = city =>
`${baseUrl}locations/v1/cities/search?apikey=${APIKey}&q=${city}`ao invés de deixar a linha "quebrada" no mesmo nível da linha acima, prefira indentar. Isso demonstra, visualmente, que a linha abaixo é uma continuação da linha acima:
const getCityUrl = city =>
`${baseUrl}locations/v1/cities/search?apikey=${APIKey}&q=${city}`Agora sim, vamos às dúvidas =)
1 - Não ficou claro para mim a funcionalidade do "data-js". Eu entendi que usamos ele para acessar o elemento DOM, e pelo que vi ele tem a mesma função da class. Qual seria a necessidade de usar o data-js ao invés da class?
Use class para estilizar e data-js para manipulação de DOM. É uma convenção de organização de código.
Se você comparar, lado a lado, duas versões do mesmo arquivo .html, uma com data-js e class e outra apenas com class, verá que ao bater o olho no arquivo com data-js e class, você distingue rapidamente quais elementos estão sendo manipulados pelo JavaScript. Isso não é possível ao bater o olho na versão do arquivo que usa apenas class.
2 - No return do fetchUrl que é um response.json, por qual motivo no destructing ele ja acessa as informações do primeiro objeto do array retornado pela promisse ?
return response.json() faz a invocação da fetchUrl() retornar uma promise que contém um array de objetos javascript com informações do clima.
[{…}, {…}, {…}, {…}, {…}, {…}]Ou seja, na linha abaixo,
const getCityData = cityName => fetchUrl(getCityUrl(cityName))quando getCityData é invocada, ela retorna a promise que a invocação fetchUrl(getCityUrl(cityName)) retorna.
Como a invocação da getCityData retorna uma promise que contém um array com objetos com informações do clima, no código abaixo, como um await está sendo usado, a expressão await getCityData(inputValue) resulta no array de objetos.
const [{Key, LocalizedName}] = await getCityData(inputValue)Então se await getCityData(inputValue) resulta no array de objetos, const [{Key, LocalizedName}] faz um destructuring no array, e dentro do destructuring do array, faz um destructuring nas propriedades Key e LocalizedName do 1º objeto do array. Dá uma olhada nessa parte de uma das aulas.
3 - Na minha aplicação, parece haver um "bug", quando envio o submit, ele carrega primeiro a img do placeholder e depois altera para a img dia/noite. Essa transição é visível.
Não é bug. É normal que a imagem do placeholder seja exibida enquanto o request é feito e a resposta é obtida. Buscar informações em um outro lugar leva tempo.
O que você pode fazer é implementar uma outra forma de estado da aplicação enquanto as informações do request não são inseridas na tela. Existem algumas boas práticas envolvendo animações CSS para fazer isso, essa palestra pode te dar uma direção.
e por fim, eu fiz o deploy da aplicação no versel, porém o fatch da erro que diz:
Testei a aplicação aqui (live server) e rodou tranquilo. Talvez a Vercel bloqueie requests que não utilizem HTTPS.
Em seu código, na baseUrl, insira um s após o p do http. Ficará assim:
const baseUrl = 'https://dataservice.accuweather.com/'Nos meus testes, a accuweather API também respondeu usando o protocolo HTTPS.
Deixe-me saber se o que expliquei está ficando mais claro =)
@henriquebazi
henriquebazi
Olá Roger,
Segue meu código do Weather Application: https://github.com/henriquebazi/weather-application.git
Vamos as dúvida.
1 - Não ficou claro para mim a funcionalidade do "data-js". Eu entendi que usamos ele para acessar o elemento DOM, e pelo que vi ele tem a mesma função da class. Qual seria a necessidade de usar o data-js ao invés da class?
2 - No return do fetchUrl que é um response.json, por qual motivo no destructing ele ja acessa as informações do primeiro objeto do array retornado pela promisse ?
3 - Na minha aplicação, parece haver um "bug", quando envio o submit, ele carrega primeiro a img do placeholder e depois altera para a img dia/noite. Essa transição é visível.
e por fim, eu fiz o deploy da aplicação no versel, porém o fatch da erro que diz:
weather.js: 12 Conteúdo misto: a página em 'https://weather-application-one.vercel.app/' foi carregada por HTTPS, mas solicitou um recurso não seguro 'http://dataservice.accuweather.com/locations/ v1 / cities / search? apikey = DhuCwRhSQeGRovITqwRK9KOR1CVoR2Ti & q = Mogi% 20das% 20Cruzes '. Esta solicitação foi bloqueada; o conteúdo deve ser servido por HTTPS.
Obrigado desde já.
@Roger-Melo