Aplicação de Clima com OpenWeather API - Projeto de JavaScript com API

[@MatheusBattisti]

🔵 Conheça nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo

[@Rafaela-q4w]

assisti vários vídeos e nenhum me ajudou tanto como o seu, finalmente aprendi a usar uma api! muito obrigada e parabéns pelo conteúdo!

[@diego_wendt]

Cara, se eu te disser que era exatamente o que eu precisava para complementar um projeto. Top demais, valeu!!!

[@MatheusBattisti]

de nada Diego =D

[@weler2491]

Acompanhando várias aulas do canal, muita qualidade!!

[@MatheusBattisti]

valeu Weler!

[@sf-zr3oj]

sempre foi um sonho trabalhar com api, sou mto grato por esse conhecimento disponibilizado de forma gratuita e clara, vc é incrivel profe

[@felipesullivan5347]

Comentei recentemente que esse cara me salva em todo vídeo e ele posta isso logo agora que eu também tô fazendo um Weather kkkk potente demais XD

[@ribafs]

Muito bom. Gratidão. Fiz um fork do repositório, peguei minha API KEY e coloquei e funcionou.

[@MatheusBattisti]

boa Ribamar!

[@vandersontorres7192]

Pessoal, pra quem tiver tido problema pra exibir a imagem, é só adicionar na tag da imagem *crossorigin = "anonymous" *

[@nlwebtechsistemas]

vlw pela ajuda mano, ja tinha tentado de tudo kkkkk

[@vandersontorres7192]

@@nlwebtechsistemas hahaha eu também tentei

[@alessandrosaling4162]

Cara to tendo problema aqui pra conseguir kkkk eu preciso baixar a imaghem no meu pc e colocar ela ?

[@nlwebtechsistemas]

@@alessandrosaling4162 coloca só o link da api

[@isaacl4094]

@@nlwebtechsistemas qual api ele usou pra pegar imagens?

[@sakamotoyorigami1997]

Agradeço pelo conteúdo, finalmente eu to começando a entender como consumir essas APIs

[@viniciustmota14]

Mn parabéns vc me salvou com esse projeto onde tem API, tô começando agr na área, e pediram pra fazer um site que tem API vou usar seu trabalho como inspiração para realizar o meu

[@emanuelbim1022]

Esses conhecimentos são realmente muito úteis para todo programador 👍

[@MatheusBattisti]

⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE

[@lucasfinotirodrigues6808]

Vídeo excelente, sua didática é incrível, parabéns pelo seu trabalho!!!!!

[@MatheusBattisti]

valeu Lucas! já viu o meu treinamento completo? horadecodar.com.br/comunidade-hora-de-codar/

[@ronaldof16]

Ótima aula, aprendi bastante com esse projeto. Parabéns Matheus!

[@MrDvcosta]

Como sempre uma excelente aula. Parabéns, grande Mestre! Como sugestão de novo projeto, queria lhe pedir um que você ensinasse a fazer um CRUD completo em Javascript, com uso de localstorage.

[@MatheusBattisti]

boa Daniel, vou anotar aqui a sua sugestão! =)

[@NoGenius-u8h]

da para utilizar a extensão do vscode Thunder Client, que auxilia nestes testes de API

Show! Parabéns, Matheus.

[@MatheusBattisti]

valeu Mário!

[@breno3632]

Muito bom esse projeto, fiz o passo a passo e ficou bom, valeu palas dicas.

[@ПаулоОливейравич-р2б]

Muito legal projeto e novidades, parabéns!

[@MatheusBattisti]

valeu João!!

[@guimoncao]

32:25 Para não deixar a chave da API exposta no github você mencionou o .env Tem algum video no canal falando mais a fundo sobre isso?

[@Gabriel-cx5zu]

tbm quero saber sobre isso

[@nicholass994]

excelente video, sempre agregando muito conhecimento, aprendo muito com você. obg.

[@MatheusBattisti]

valeuu Nicholas!

[@diegocb81]

Excelente projeto, Matheus! Obrigado por compartilhar o conhecimento!

[@MatheusBattisti]

Quer criar este e outros projetos completos? Entre para a Comunidade: www.horadecodar.com.br/comunidade-hora-de-codar/

[@another452]

pra quem está tendo problemmas com API de flag é só usar esse comando:crossorigin="anonymous" na tag da bandeira, isso acontece por que o navegador por algum motivo esta bloqueando o conteudo dessa requisição usando esse comando vai ocultar a origem desse conteudo

[@profvictor9349]

Professor Matheus, sua aula é top! Quero terminar o projeto com todas as funcionalidades, qual é o curso lá na comunidade que devo adquirir? Eu vi que tem 6 opções. Agradeço desde já!

[@RafaelFernandesKingRafa]

Bacana o vídeo, quebrei bastante a cabeça pra corrigir erros bestas que eu mesmo fiz, só não achei legal deixar o melhor para quem fez o curso porém o github tá ai pra continuar por conta própria o projeto e sai procurando o que precisa para terminar o projeto

[@xFelipeM]

Maluco obrigado kkk eu tinha assistido um tutorial em vue fazendo uma aplicação assim só que era de 2019 e a API estava dando erro, com o seu video consegui arrumar

[@walney2008]

adorei esse projeto, muito bom, parabens

[@another452]

muito bom por mais que seja só etapa basica ja agrega muito no meu portfolio

[@adrianonasatofiedler1034]

Olá Mateus. Estou tentando fazer um modelo desses porém com a previsão para os próximos 5 dias. tem alguma dica para quem entende apenas o básico de programação?

[@caiocesar9192]

parabéns Matheus Battisti otima aula

[@graygrigori01]

professor, perguntinha boba. Como você faz para deixar suas pastas com o símbolo do CSS e JS?

[@robertferreira5008]

É uma extensão do VSCode, só procurar por "vscode-icons" na aba de extensões.

[@CarlosMagno-hp2bo]

Matheus ficou top das galáxias

[@s3p4diii12]

Esse projeto contém o design patern? Se não, vc poderia trazer um vídeo sobre? Desde já agradeço, vc é o melhor professor!

[@marcoanjos6545]

Grande vídeo e deu para aprender muito Matheus. Só uma dúvida que penso que faltou, a API openweathermap, os dados Wind speed, a Unit Default: meter/sec. Teríamos que converter para km/h, certo?

[@gustavohenklein2097]

Não encontrei de maneira o url da api do country flag. O site se atualizou, esta diferente do video. Até tentei copiar a url que foi informado no video porém ela nem existe mais. Alguém consegue me ajudar?

[@kenobidolol]

Gostei muito da sua aula, eu peguei o que aprendi com você e incrementei outras funções, queria saber se você pode olhar para ver como ficou se está bacana? Muito obrigado por tudo conhecimento que você compartilha!

[@carlosvieira5624]

Olá Matheus, tudo bem? Estou vendo seus vídeos que tem os projetinhos na área de front e tem sempre a finalização que fica para um próximo vídeo, como faço para ver essas finalizações? Obrigado, um abraço

[@tonpopshow]

Qual dos seus cursos esse projetinho da aula é finalizado?

[@fagnermartins4299]

tem como colocar Banner Publicitários para aparecer anúncios tipo Adsense ?

[@Headbanger-Alien]

Boa tarde, cadê o link com o restante da aula professor ?

[@charlesmiranda6311]

Meu professor da udemy. Já fiz 2 cursos teu.

[@MatheusBattisti]

boa Charles!!

[@astromic7794]

o meu não esta mudando as informações quando clico la no botão, no console fica mostrando apenas o noma da cidade que digitei

[@emersonpessoa05_10]

Ontem eu coloque aqui que o link das bandeiras não está funcionando mais e coloquei como eu fiz pra funcionar e a observação foi deletada. Não entendi o que houve!

[@thevenom5771]

5:27 como faz isso??? eu digito link:css e aperto tab e nd acontece

[@JustCode-CaioAzevedo]

Quando é digitado um nome inválido a API retorna Undefined. Tem como tratar essa mensagem de erro da API pra não aparecer pro usuário?

[@StilyLone]

fiz o projeto, e na hora de aparecer o a temperatura aparece como se tivesse 200 graus na aquela cidade, mais era pra ser 20 graus, so que eu não consegui adicionar uma virgula no meio.. Se alguem souber como resolver.. Obrigado

[@gabrielcoimbra9688]

O meu da um erro 401(Unauthorized) no console, alguem me da um help ai?

[@proandref]

Já salvei para assistir mais tarde:)

[@MatheusBattisti]

boa!

[@andersonsilva857]

Queria ver o restante do projeto, procurei q comunidade e não encontrei

[@tonpopshow]

Qual link dessa aula finalizada ou pra entrar na comunidade

[@ricardolaudelino4042]

Pessoal minhas scr não estão funcionando no projeto! Não aparece nenhuma imagem nas maneiras e etc! Alguém sabe o que pode ser ?

[@douglasorush]

Teu comentário tem um tempo, mas respondendo tua dúvida essa api de bandeiras está fora do ar.

[@FISHIL_]

Meu botão de pesquisa não está funcionando e nem quando eu aperto Enter, e fiz o código igualzinho o seu. Pode me ajudar pfvvvvvv

[@Matheus_1582]

E so digitar: Npx touch + o nome do arquivo. Ex: npx touch index.html Ele vai criar um arquivo em branco.

[@jobprograming]

Alguém sabe se a api do tempo está exigindo adicionar cartãoo, minha API não retorna nada, fica um erro 401, fui ver no site o motivo do erro e diz q pode ser erro na digitação ou por conta da validação do email ou até mesmo o tempo de validação necessário, porem ja tentei de todos os jeitos, alguém sabe algo???

[@BrunoMarianoGames]

Uma duvida, o meu tá aparecendo a temperatura 229°C como que resolve? E a condição era pra aparecer "Nublado" mas está escrito em inglês, mas alguem?

[@wagnerfreitas8215]

o meu está dando erro na linha 11 do addeventlistener?

[@mauroalves6240]

Professor como eu consigo entrar na comunidade , pois gostaria de saber mais a fundo como ir ate o fim com esse projeto ?

[@alisonrodrigues1364]

Top meu nobre 👊

[@MatheusBattisti]

valeu Alison!

[@profvictor9349]

Professor Matheus, sua aula é top! Quero terminar o projeto com todas as funcionalidades, qual é o curso lá na comunidade que devo adquirir? Eu vi que tem 6 opções. Agradeço desde já!

[@cervejabitseironia]

Bom dia, Ótima Aula, muito didática, com está API seria possível ter a quantidade de chuva prevista, e outra duvida seria Adicionar algum alerta dentro das informações capturadas pela API, mesmo sendo algo assíncrono ?

[@leonardotavares7317]

poderia me ajudar a entender pq no projeto eu não consigo usar o API e visiualizar a bandeira, mas sempre consigo abrir e visualizar a API sem problemas ?

[@another452]

@@leonardotavares7317 é só usar esse coando na tag da img :crossorigin="anonymous" alguns navegadores bloqueiam por ser um conteudo vindo de um site terceiro

[@leonardotavares7317]

@@another452 vlw Man eu já tinha conseguido achar como usar, mas esqueci de vir aqui falar. Obrigado

[@yaanpenalva]

Professor, de que forma o senhor faria uma refatoração neste projeto para que ele viesse a ser em OOP?

[@davirosa7484]

Por que você aplicou o display: flex no body e não no container?

[@mathQuonFelix]

container está dentro do body

[@tubalaokk]

Alguém sabe uma API Country que ta funcionando? Essa do vídeo caiu e as que estou procurando nenhuma funciona.

[@professorwagnerlobo1467]

tô com o mesmo problema

[@joaopaulobezerra-uo3eg]

flagsapi mudou url?

[@dennisferreira5217]

Vc tem esse código disponível? No Github? Ou em algum lugar?

[@tecelso]

Cara fiz esse projeto,mas queria deixar a chave da api em node usando o dotenv,mas da erro ao testar em navegador Uncaught ReferenceError: require is not defined

[@douglassilva-on8gx]

E ai blz muito bom os vídeo faz mais tipo esse ai estou terminando curso de web mas estou acompanhando ai e treinando

[@emersonmarcio6556]

Excelente! Ficou top! Sua didática é muito boa, parabéns! Eu tenho uma dúvida sobre essa API, pois fiz uma aplicação para fins de estudo usando ela, mas pelo que pude comparar com outras aplicações de clima, ela não traz a temperatura correta. Nas comparações que fiz, essa API sempre dá uma diferença entre 2 até 4 graus a menos do que nas outras aplicações que comparei. Ex. esses dias aqui na minha cidade estava entre 31°/32° e fazendo a pesquisa na aplicação, estava marcando 25°... Por que será essa diferença? PS: Fazendo uma pesquisa no google sobre essa API encontrei um vídeo em que a pessoa criava uma aplicação com ela, mas praticamente ela usava os mesmos métodos que usei, também encontrei esse seu vídeo e vi que usa uns métodos diferentes, porém, não testei o seu código. Desde já te agradeço muito! Seus conteúdos são excelentes!

[@cezarfernando400]

esse countryflagsapi n existe mais? pq eu to tentando acessar ele e n da

[@daniel_Gomez3]

tbm não consigo...

[@Matheus_1582]

Fantastico👍

[@MatheusBattisti]

valeu Matheus!

[@rubensnogueira5298]

Qual programa você está usando?

[@zezimsousa]

hablou de mais , amei o conteudo

[@wnolau]

Matheus, eu precisava que a pagina abresse direto em uma cidade especifica, é complicado?

[@leonardotavares7317]

Alguém poderia me ajudar a entender pq no projeto eu não consigo usar o API e visiualizar a bandeira, mas sempre consigo abrir e visualizar a API sem problemas ?

[@lucastertuliano7833]

Também não consigo utilizar. Posso estar errado, mas cheguei à conclusão de que a API está com problemas.

[@leonardotavares7317]

@@lucastertuliano7833 eu consegui usar, só que hoje estou no trabalho, amanhã comenta aqui que trago o que eu usei e você testa aii pra ver se funciona.

[@lucastertuliano7833]

@@leonardotavares7317 Consegui resolver. Utilizei crossorigin="anonymous" na tag IMG e deu certo.

[@leonardotavares7317]

@@lucastertuliano7833 isso mesmo, sei não lembrava de cabeça

[@deivyn2438]

@@lucastertuliano7833 pode mandar teu link da api de flags ? pq quando eu coloco a tag crossorigin msm asssim nao funciona

[@kleberaraujo1897]

Eu baixei o projeto no repositório mas parece que não funciona. Eu digito uma cidade e ele não carrega nada.

[@klebersonvinicius8566]

No final do video citou que na comunidade colocou para aparecer uma imagem referente a cidade pesquisar, usou qual API?

[@julianribeiro7756]

unsplash image api

[@dev-isaac-gomes]

projeto bem legal

[@MatheusBattisti]

valeu Isaac!

[@marlon23cs]

O meu css não esta aplicando a fonte Ubuntu aconteceu com alguem?

[@Lenioth]

tive um duvida se por a caso o input enviar um null ele deveria retornar a msm msg de erro mas nao consegui fazer tentei: if (!data.cod) { showErrorMessage(); return; } mas nao veio a msg

[@felipemarcon9868]

o input nao retorna null, ele retorna uma string vazia caso nao seja preenchido

[@Diego-pr8bf]

Alguém pode me ajudar, meu código no VSC não mostra nenhum erro, mas no inspecionar mostra que a parte (addEventListener("click", (e) => ) esta como NULL, e não estou conseguindo arrumar, alguém pode dar um help ai pfv

[@leonardotavares7317]

to tentando resolver isso agora, já conseguiu resolver ai ?

[@pedrodagostini1138]

estou com esse mesmo problema, conseguiu encontrar o erro?

[@leonardotavares7317]

Eu acho que eu consegui resolver, quando eu chegar em casa vou ver se lembro se comentar aqui como ficou

[@pedrodagostini1138]

@@leonardotavares7317 muito obrigado, vai me salvar muito! Estou travado

[@leonardotavares7317]

@@pedrodagostini1138 mano eu já terminei essa aula, não to lembrando o momento exato que dá esse eerro, vou te mandar aqui o qeue eu acho que seja a parte do código, ai depois tu confirma se era ou não searchBtn.addEventListener("click", async (e) => { console.log(); }) searchBtn.addEventListener("click", async (e) => { e.preventDefault(); const city = cityInput.value; showWeatherData(city); });

[@psicologiaincomum]

Usei o try e catch para fazer os tratamentos de erro, e vi que tu usou if, e algumas funções... Do meu jeito tem algum problema ? (try e catch) Esta funcionando corretamente, mas n sei se é o mais utilizado

[@brunin.sf18]

ta certo sim

[@ninocfjr]

Alguem teve o problema da bandeira do país não aparecer, quebrar apesar da url estar correta e corresponder a bandeira?

[@artursantana3107]

estou com este mesmo problema aqui , voce conseguio resolver ???

[@artursantana3107]

Utilizei crossorigin="anonymous" na tag IMG e deu certo.

[@jade.369]

tbm to com o mesmo problema, como se o acesso estivesse bloqueado :(

[@jade.369]

acabei de ver o comentário do @lucastertuliano7833 pra usar crossorigin="anonymous" na tag img e deu certo mesmo :)

[@HunterDeIdiotas]

@@jade.369 Mtoo obrigado

[@joaovictorconquista4677]

O link das imagens não estão funcionando, o que pode ser ?

[@rychardmaciel6655]

Nem o das bandeiras!

[@macedo_jose]

Esse site pegar as imagens da bandeira dos paises tá com problema, algm tem outro ai?

[@helenlazarotti4480]

Olá! No meu fica dando esse problema quando tento ver se a API esta funcionando: {"cod":"400","message":"Nothing to geocode"} Será que daqui a pouco normaliza?

[@Gabriel-cx5zu]

o seu normalizou?

[@rivaldosouza362]

Já vou logo falando que o projetinho é fantástico, mas achava legal se fosse fracionado numa lista como foi o curso de vue.

[@MatheusBattisti]

opa Rivaldo, lá na Comunidade está dividido xD mas te falar que curti a ideia, quem sabe o próximo faço dividido, obrigado!

[@leonardotavares7317]

poderia me ajudar a entender pq no projeto eu não consigo usar o API e visiualizar a bandeira, mas sempre consigo abrir e visualizar a API sem problemas ?

[@edgarsantosnunes5532]

onde eu vejo os tratamentos de erro?

[@MatheusBattisti]

opa Edgar, aí é só na Comunidade (www.horadecodar.com.br/comunidade-hora-de-codar/)

[@dinhocruzDev]

meus queridos boa noite, estou tendo duas dificuldades, a primeira é a bandeira que não renderizar e a segunda é o input que responde undefined, alguém pode diminuir minha ignorância por favor!!!!

[@felipesoares6245]

Como posso usar um dotenv?

[@youngdll7]

to com um problema kk, quando coloco o nome do local demora atualizar bandeira ...

[@rychardmaciel6655]

Pra mim também

[@andersonaraujo8537]

Olá professor, eu fui acompanhando o projeto e reproduzindo aqui no meu , digitando igual, consegui fazer e funcionou perfeito, porém eu fico com a sensação de estar "só copiando" o código, eu entendo o conceito, quando você explica, eu entendo o que vai acontecer , etc, mas tenho a sensação de que evoluo devagar, não sei se é normal isso, eu meio que vou vendo sua explicação e praticamente só copiando o que você faz, não consigo desenvolver por mim mesmo sabe, não sei se é assim mesmo ou é porque ainda sei muito pouco, espero que isso mude com o tempo. O projeto é fantástico e sua didática é incrível, eu acho que o problema sou eu mesmo :-(

[@andersonaraujo8537]

@@marcosev08 essa é uma ótima idéia, muito obrigado pela sua dica, eu não gosto da idéia de apenas digitar igual, mesmo que funcione, sei que não é o certo, preciso conseguir fazer por mim mesmo, mas entendo que tenho minhas limitações no momento, isso de realizar modificações é bem legal, vou fazer isso, obrigado!

[@danielpuyo7061]

Eu comprei o curso de Front-End e não tem esse projeto ai não

[@eduardoevangelista6032]

Essa chave do weather tem validade de 30 dias?

[@JailsonDev]

kkkkkkk Gostei citou Maceio, a minha Cidade morei uma vida quase toda la kkkkkkk, conheço cada bairro

[@jesusvick]

Professor, a API do country flags não deu certo pra mim :/

[@luciano2140]

pra mim também não

[@quynhorodrigues]

aqui também não

[@quynhorodrigues]

@@luciano2140 consegui colocando isso na linha da imagem:

[@fabioguimaraes545]

@@quynhorodrigues Muito obrigado.

[@andersonmendes-p5l]

essa API funciona ainda?

[@thevenom5771]

o triste é que o country flags n funciona mais

[@raizaramalho5204]

Tooo triste, fiz passo a passo e não consegui chamar nenhuma função 😢

[@lauravani9521]

Página de Clima: Escolha uma API de previsão do tempo para fornecer informações sobre o clima atual, sobre previsões futuras, ou históricos. O sistema pode permitir que o usuário informe sua localização ou use a localização do dispositivo; esse e o meu trabalho

[@lucasavelarbrasil6082]

O meu na parte do Javascript não funcionou absolutamente NADA E no seu tudo funciona redondo kkk Mesmo fazendo igual, o que acontece? Kkk

[@investidor_anonimo]

Top