Aplicação: Weather Application

ElaineDelgado 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?

Não

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

Não

Link do repositório da aplicação (ou pasta pública no Google Drive)

https://github.com/ElaineDelgado/weather-application

Maiores dificuldades durante a implementação

Refatorar isolando o código em funções únicas;
Criar nomes consistentes de varáveis;
Fazer a API gratuita funcionar, visto que a cada 250 requests eu precisava criar uma conta nova pois não era permitido apenas criar uma nova aplicação como na Accuweather (precisei utilizar outra API) e mesmo não atingindo os 250 requests às vezes dava erro por já ter utilizado a minha cota. Mas no fim deu tudo certo.

Menores dificuldades durante a implementação

Fazer o request dos dados da API;
Obter apenas os dados que precisava no projeto;
Inserir as informações nos elementos do DOM;
Fazer o destructuring dos dados recebidos no request.
Alterar os estilos da página.

Roger-Melo commented 2 years ago

Olá @ElaineDelgado.

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

Roger-Melo commented 2 years ago

Olá @ElaineDelgado! Parabéns pelo esforço 🔥

Vou deixar a análise de seu Weather App aqui.

Se houver qualquer dúvida, é só dar o toque =)

ElaineDelgado commented 2 years ago

Boa noite Professor!

Eita, eu respondi errado, eu mudei a cor da aplicação, já alterei aqui na isse tb! Verdade, esqueci um console.log e alguns comentários. Preciso melhorar meu foco na hora de revisar o código. Vi que você copiou o objeto e colou no arquivo, eu tinha feito isso mas apaguei na última versão, em versões de commit anteriores ele ainda lá, facilita muito visualizar o que está retornando. Vou voltar com ele para teste para não gastar a cota da API. Eu deixei o idioma em inglês porque a versão em português dessa API é paga! Mas quero ganhar em Dolar também! kkk

Sobre os nomes name, fetchData, eu tinha mudado pra deixar mais claro e acho que tinha outros nomes que mudei, mas teve um dia que a aplicação para trabalhar nela e o arquivo weather.js estava em branco, eu gelei, tive que refazer tudo, a chave da API não funcionava, e eu até agora não entendi o que aconteceu.

A vírgula perdida é do formater que eu tenho, eu sempre tiro mas ela volta!

Organizar com espaços ainda não é meu forte, mas estou trabalhando nisso também. Realmente if cityIsNotVisible ficou mais consistente.

O senhor, aos 32:37 do vídeo, alterou o nome "name" , que é o nome da variável que retorna do request, para "city":

const getCityData = async (cityName) => {
  const cityURL = getCityUrl(cityName)
  const {
    location: { city },
    current:weatherInfo,
  } = await fetchData(cityURL)

  return [city, weatherInfo]
}

Eu havia tentado isso, mas quando fazia request, o nome da cidade vinha "Undefined". Aí acertei para name: city, ... Avançando na aula vi que o senhor também tomou erro e foi procurar, e me senti aliviada porque achei que era pra ter funcionado do jeito que o senhor tinha mostrado antes!

Sobre o ternário no app.js:

  timeImg.src  = is_day ==='yes' ? './src/day.svg' : './src/night.svg'

Eu sabia que tinha outra forma de fazer, algo me dizia que tinha como eliminar a repetição, mas eu não conseguia pensar em nada, mas agora não esqueço mais, apaguei e reescrevi várias vezes pra fixar.

Adorei esse retorno em forma de vídeo, muito obrigada pelo seu tempo, por toda sua ajuda com essa aplicação que pra mim foi bem estressante por causa da API (a aplicação foi uma delícia de fazer). Eu estou gostando muito de trabalhar com API's, e pretendo melhorar essa aplicação qualquer dia, quem sabe um localStorage, mais dados nas respostas... =D

Obrigada!!!!!

ElaineDelgado commented 2 years ago

Professor, sem querer abusar, poderia me dar luz do porquê a aplicação que coloquei no Netlify dá erro no fetch enquanto localmente funciona normalmente?

https://picweather.netlify.app

O erro que é mostrado no console (console.log do catch no weather.js): { name: 'TypeError', message: 'Failed to fetch' }

Olhando a aba "Network" do devtolls o status é: (blocked: mixed-content).

Grata!!!

Roger-Melo commented 2 years ago

@ElaineDelgado teste subir pro Netlify incluindo "s" após "http" na URL abaixo:

const getCityUrl = (cityName) =>
  `https://api.weatherstack.com/current?access_key=${APIKey}&query=${cityName}`

// 👆🏻 adicione "s" após o "p" do http

PS: não está abusando. Sempre que estiver com dificuldades, pode dar o toque =)

ElaineDelgado commented 2 years ago

Localmente deu erro no request, e aí cai no catch e não traz os dados. ='( Vou tentar modificar no repositório remoto, mas não sei se fará diferença.

ElaineDelgado commented 2 years ago

Alterei no repositório remoto e o Netifly e já fez o deploy automático. Testei e deu erro como no teste local: o status do request é ok, aí o card carrega, só que sem as informações porque o response.success retorna "false" e o código do erro é 105. Deixei com o 's" na URL caso o senhor deseje dar uma olhada, mas pelo dev tools dá pra ter uma ideia também né?

https://picweather.netlify.app

Roger-Melo commented 2 years ago

@ElaineDelgado encontrei o problema. Dá uma olhada neste vídeo.

ElaineDelgado commented 2 years ago

Bom dia!!! Muito obrigada pela explicação! O bom de dar esses problemas agora é que se um dia acontecer em algum outro projeto já saberei o porquê. Vou procurar uma API que me não cause tantos problemas, ou tentar solucionar o erro da acuuWeather, tentar o suporte deles... Tentei fazer deploy na Vercel mas eles também não suportam http. Gratidão, professor!

Roger-Melo commented 2 years ago

Isso aí, conhecer novos erros possibilita que eles sejam evitados em projetos futuros, hahah.

Vou fechar a issue, mas no que precisar, é só abrir uma nova =)

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