OpenWeatherMap API Tutorial 2021

Рет қаралды 76,687

2 жыл бұрын

This video explains how you can use the OpenWeatherMap API and geolocation to create embedded weather data on your webpages for any location using the One Call API.
The different APIs available through Open Weather Map APIs are also discussed.
Code from video: gist.github.com/prof3ssorSt3v...
Bootstrap Framework Cards reference: getbootstrap.com/docs/5.0/com...
OpenWeatherMap API Plans: openweathermap.org/price
OpenWeatherMap One-Call reference: openweathermap.org/api/one-ca...
OpenWeatherMap Icon reference: openweathermap.org/weather-co...

Пікірлер: 59

@kllokoq 2 жыл бұрын

This is great! Wow, I didn't know that we can limit the number of elements map returns! I needed it so many times. This is effectively like using break in a for loop! I think last time when I used this API, about 9 months ago, the free option did not have all this data. This is fantastic, I can now attempt a lot more complex weather app, perhaps this time using React, just for practice.

@jimlanpheer5281 2 жыл бұрын

Great video and well-explained as always Steve! Thank you very much, i've learned a good deal from a few of your tutorials. Cheers!

@jimsteffes6826 2 жыл бұрын

Perfect! Just what I needed--short and to the point.

@dkevin1553 2 жыл бұрын

Again a Wonderful Video from Steve. Kudos to your effort 👏👏👏

@valeriyakim4983 Жыл бұрын

gave me an idea to solve an issue with displaying the icons! thank you, great job!

@rinatvaliullov3247 2 жыл бұрын

Thanks! Your video helped me a lot to understand how to work effectively with the OpenWeather API .

@koppix24 Жыл бұрын

Dear Steve, thank you for this video and providing such a well coded and explained example for a small html5 application. Knowledge transfer can be so easy and smart. I give you 5 of 5 stars! *****

@soniablanche5672 Жыл бұрын

I actually use that api to get city longitude/latitude, since I was too lazy to find a database, I used this API to fill the database automatically whenever we need the longitude/latitude of a city

@visualbree Жыл бұрын

I haven't implemented this but i wanna thank you in advance. I'm bagging this degree no matter what!.

@ibugilang2748 2 жыл бұрын

thanks sir, for the tutorial, Does openweather's review provide the Rainfall and Forecast values, for the territory of Indonesia... I want to make a WebGIS for Rainfall Distribution Map

@xandertem 2 жыл бұрын

Hi Steve, thank you for your helpful tutorial. Question: in fetchWeather(), why do you use a promise chain and not the async/await method with a try/catch?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

I prefer the promise chain syntax. I like to be able to pass functions that are declared and used elsewhere into the then( ) methods, like this: fetch(url) .then(validate) .then(parseData) .then(buildHTML) .then(messageUser) .catch(console.warn);

@xandertem 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Got it. Thank you 🙏

@user-cl4nn5qc5k 2 жыл бұрын

Thanks!!!

@cristiandanielherrera4349 2 жыл бұрын

Nice!

@rufaro003 2 жыл бұрын

awesome video. is there a chance to get a different video using async and await?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

The video is about the API. I won't be making a different version or multiple versions of the code. It can be written many different ways. I have a video on using async and await with fetch if you want to do that for yourself. kzfaq.info/get/bejne/r8l6gr2hxN27kZ8.html

@mahbubhasanrafi139 2 жыл бұрын

Hey steve. I hope you are doing well. I am facing a problem. I want to show the timezone or you can say the city name. but it is not showing in the html template. I am using this into the return code that you have written ${timezone}. but not working. can you kindly give me a solution that how can I show the city name.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

It all depends on what you are putting into your variable timezone. Timezone is in a different part of the data that is returned. It is not inside "daily".

@golddiamondbrgames4304 Жыл бұрын

Congratulations, great video, very well explained. I have a question, how could I do a direct search by city name instead of longitude and latitude?

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

openweathermap.org/current#name

@golddiamondbrgames4304 Жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thxx

@Rainstorm121 Жыл бұрын

Dear Sir, thanks for this. Do you recommend API for the weather forecaster on duty at a national weather office especially when answering calls to give a particular caller answers? How about information about a weather forecast, would that possible with API?

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

It's an excellent API for weather data. I don't know the specifics of that job or what data it needs so I can't comment about that. It depends on what information you want about a weather forecast. I would recommend reading the guide and faq on the website for more information - openweathermap.org/guide

@Rainstorm121 Жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 Thanks

@neurosp Жыл бұрын

It gives an 401 error when I use onecall , but it works with weather and forecast

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

401 means unauthorized. It means that your api key is not allowed to use onecall. Not sure which APIs are paid and which are free currently.

@zuhairtaha34 2 жыл бұрын

Can you please explain FinalizationRegistry and WeakRef

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Please add any tutorial requests in the comments here - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html

@alkdsjfadsf 2 жыл бұрын

I got error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at Object.init (index.html:20:7) at index.html:112:5

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Whenever you see the error message "cannot read properties of null" look on the line where the error occurred at the keyword the browser was "reading". It means what ever was in front of the keyword is null. So, you are trying to access a variable or property that has not been declared or assigned yet. Maybe you are trying to access it before the page has finished loading / or before DOMContentLoaded. Maybe you are loading the script without defer or async and trying to run it before the page is ready.

@alkdsjfadsf 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 All fixed, thanks a lot!

@clentargerototing2792 2 жыл бұрын

Great Work Sir, Is there a way to automate the fetching base on the condition of the code?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Sorry. I don't understand your question.

@clentargerototing2792 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 sorry about that, thanks for the fast reply. I mean I want to use weather API for our capstone project, we need to get weather forecast from a weather API then we need to send the weather forecast, the problem is that we need to send the weather forecast for 15 different places at the same time, is there a way for me to automate the sending process to 15 different places?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

@@clentargerototing2792 it would be 15 separate calls but you can wrap them all in a Promise.all call

@clentargerototing2792 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 thanks so much

@HassnainAli Жыл бұрын

Hey Steve! I have used the code you have provided but it was giving me a 401 error so I replaced the one call api with the weather api so it's no longer giving me that error, but now it throws an error which says "caught (in promise) TypeError: Cannot read properties of undefined (reading 'map') at Object.showWeather (where-is-the-pub-crawl:1033:8) at where-is-the-pub-crawl:1004:13s" Can you please help me what I need to do to get rid of this error. Great Job you are making authentic content that's helping us newbies!

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

Yeah they changed the free version features after I made this video. So, you have to change which end points you use for free, which you already figured out. The different end points will have different properties. So, you have to call the map method on the right property. I would suggest that you just console out the response and look to see which property is the array. You can only call map on an Array.

@coryu.1022 2 жыл бұрын

Cant get it working due to the .js file button listener on line 5 (supposedly). I get an error in the console when I load the page saying Cannot read properties of null (reading 'addEventListener') citing app.js:5:5. I tried swapping out various values and api keys and variable syntax and concatenating methods, always the same error =( Watched every minute of the video too. Don't know what I'm missing but it's obviously a 'me' thing. Very nice looking ap. I just wish I could get it working.

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

Are you loading the script and trying to add the event listener before the DOM is loaded? The error about null is telling you that it doesn't have a reference in the thing that is in front of addEventListener.

@coryu.1022 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 I don't remember but I copy pasted verbatim from your git files while trying to fix - still got the same error

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

@@coryu.1022 are you running the page over not file:///

@hdm_vision Жыл бұрын

in the current => weather , i got morethan 1 weather, which one is the current weather?

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

It is an array because there can be multiple things happening in the same area. Each type of current weather has a different icon and label.

@Omhange 2 жыл бұрын

can we retrieve historical or past weather data?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

As long as you pay for the right licence you can

@Omhange 2 жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 how to do that do you have any tutorial how to get past history weather data?

@AM-jw1lo Жыл бұрын

I hope by now you have gotten a mic that does not transmit all your keystrokes, very annoying.

@yasmeinSalem44 Жыл бұрын

they changed their pricing, and what you can access in the free plan

@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын

they still have quite a bit you can use - current weather and 5 day forecast.

@yasmeinSalem44 Жыл бұрын

@@SteveGriffith-Prof3ssorSt3v3 yes, thank you for the explaination

@ibugilang2748 2 жыл бұрын

thanks sir, for the tutorial, Does openweather's review provide the Rainfall and Forecast values, for the territory of Indonesia... I want to make a WebGIS for Rainfall Distribution Map

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

You will have to check their documentation. I don't know.