Build a Weather App With JavaScript

Подписаться 1,6 млн

Просмотров 93 тыс.

50% 1

Integrating with APIs is a crucial skill for any web developer to succeed. In this video we will be integrating with the DarkSky Weather API and the Google Places API. Using these APIs we will learn how to connect to an API from both the client and the server. We will also cover how to safely store API keys for use. By the end of this video you will have a complete understanding of how to call various different APIs from both the client and server.
📚 Materials/References:
CSS Position Tutorial: • Learn CSS Position In ...
GitHub Code: github.com/Web...
DarkSky API: darksky.net/dev
Google API: console.cloud....
Skycons: cdnjs.com/libr...
🧠 Concepts Covered:
- Setting up a basic express Node.js server
- How to call an API from Node.js
- How to call an API from the client JavaScript
- The safest way to store API keys
- How to consume Google APIs
- How to consume the DarkSky API
- How to user axios
🌎 Find Me Here:
Twitter: / devsimplified
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#WeatherApp #DarkSky #GoogleAPI

Опубликовано:

13 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 199

@marcwinner567 5 лет назад

Great tutorial! I appreciate it a lot when tutorials begin with a completely empty folder and goes from there. It makes the tutorial easier to take in somehow.

@WebDevSimplified 5 лет назад

I'm really glad the video was useful for you.

@gandalfthegrey6592 2 года назад

For sure, I've found a lot of API tutorials that seem simple, but later on you realize they had jquery, nodejs, express, or some other node module that they never talked about being in their project.

@developedbyed 5 лет назад

Gud stuff!

@WebDevSimplified 5 лет назад

Thanks!

@durppp 2 года назад

FOR PEOPLE ATTEMPTING THIS AS OF MARCH 2022: You'll need to register a billing account to use the Google API, it's a free 30-day trial that doesn't automatically renew. The API will not work without doing this. Hopefully this saved someone the headache this caused me, thinking it was my code not working 😅

@ericboadu8525 2 года назад

thank you

@DaRealTT 3 года назад

WARNING: This project will not work. The Dark Sky API is no longer accepting new signups, and therefore you cannot build this project. Sorry!

@muhammadjunaid2329 3 года назад

Also, it is required to enable billing on a google cloud project. Can I do that without billing?

@valencehockey1668 3 года назад

Yeah

@tahaahmedmallick2008 3 года назад

Right

@valencehockey1668 3 года назад

@@tahaahmedmallick2008 Hby

@shakirahmed440 3 года назад

You can use WeatherStack API instead. Works pretty similarly. Just go through the API docs and then watch the video and you can replace weatherstack instructions for darksky

@radaefilms3150 3 года назад

Thank you for this amazing video, it really helped me a lot. I did this with the weatherstack api as dark sky is not accepting new users. Really didn't have to change much, it worked well.

@george5432 2 года назад

thanks for the recommendation

@rajbagi2002 Год назад

thanks for info bro U saved me a lot of time

@nsharma4981 4 года назад

I've always wondered how to hide API keys, and here you are with a solution! I also learnt about google APIs and axios which was a great surprise. Free access to dark sky may be a thing of the past, but your teachings will forever be helpful! Thanks 😊

@behar97 5 лет назад

That's a hard project to do but you are experienced with JavaScript for years keep it up man :) Would be nice to see more tutorials with Vanilla JavaScript like building a shopping cart, quizzes,popups and more stuffs :)

@WebDevSimplified 5 лет назад

Thanks. I actually have a shopping cart and popup vanilla JS course on my channel already.

@kshitijzutshi 4 года назад

@@WebDevSimplified It gives me error: "You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account. Apparently each key-press is taking the API call. How to fix this issue?? PL HELP

@RonWaller 4 года назад

Thank you so much. I was looking for tutorial like this. I think yours is the first I have seen when you show how to hide the api keys.

@WebDevSimplified 4 года назад

You are very welcome! I try to teach best practices alongside the actual code since best practices are very important to learn.

@RonWaller 4 года назад

@@WebDevSimplified which great to see. Just curious...hope to see in video you showing the network tab in dev tools...does the express server hide the api_key? just curious.

@WebDevSimplified 4 года назад

@@RonWaller Great question. The api key will be hidden since the API call that uses the API key goes from the express server to the weather api and back to the express server. This means the browser never sees that request and thus never sees the API key.

@irafaelasilva 4 года назад

I just want to say, thanks for this video! I was lost about to do API calls and you save me!!

@WebDevSimplified 4 года назад

I'm glad you enjoyed it!

@adityakumar-wd1xh 3 года назад

He is cute too, might as well marry your saviour 😆

@nz229 3 года назад

Followed this exactly and could not get the drop down to function at 20:11 :( bummer, this video is too advanced for me anyway - had to spend time figuring out how to install npm in the first place.

@MsElsospechoso28 5 лет назад

This channel is pure gold.

@WebDevSimplified 5 лет назад

Thank you!

@reynardtcloete6959 Год назад

You're the best teacher on the internet.

@themystx2 2 года назад

This tutorial has merit even in September 2022. It adds the additional steps of converting the existing Darksky API calls to OpenWeather (or other APIs) and working with data that needs to be converted. I learned more modifying this tutorial than the tutorial itself. Give it a try! It's NOT outdated if you're looking to learn.

@SethGardnerVlogs 3 года назад

i randomly thought of mkbhd while watching this and realized that you kinda sound like him. i can’t unhear it. 😂

@astrozhu3937 5 лет назад

thanks bro for making this step by step video! this is really HELPFUL!

@WebDevSimplified 5 лет назад

I'm glad I could help

@klasidarlang-larsen1907 4 года назад

Absolutely loved it (so much that I had to buy one of your courses)! Thank you!

@WebDevSimplified 4 года назад

Thank you so much for the support!

@carlonnrivers 5 лет назад

Great stuff! Thanks for making. I still don't think I have the knowledge to implement it into my full stack course, but it's definitely the better option than Websockets for a simple thing as sending one piece of information to the database without refreshing the page...only when i properly figure out how to do that with axio, but I'll keep looking for more info.

@WebDevSimplified 5 лет назад

I'm glad you enjoyed it. If you practice it a few times you will get the hang of how to use it pretty quickly.

@Hannah-on9zw 4 года назад

Thank you so much for this awesome tutorial! A bit annoying with the daily limit for google being so low, or at least for me, it drained instantly. I got it working a few times a day though lol.

@anwitmondal6417 2 года назад

Unfortunately Dark Sky API is no longer accepting new signups .

@Raphael-jo1rp 5 лет назад

Very nice project. Unfortunately, you have to register a credit card in order to use the google api right now, which is a bit sad. Altho, I'd like to know how I could integrate your workflow but for a Wordpress website, so using a classic BDD. Thank you !

@glitchinthematrix2882 2 года назад

I get the erorr "google is undefined" . I even tried, for debugging purposes, to use your exact script.js . No luck.

@AnnieTaylorChen 5 лет назад

I like the animated weather icons and easier access to the address typed in. Might consider adding those to mine :D One suggestion: you might want to include a "prerequisite" so people know how difficult the tutorial will be for them and provide links to your helpful videos if they're zero/beginning beginners. ;)

@WebDevSimplified 5 лет назад

That is a great idea. I really should have linked the introduction to Node.js tutorial since Node can be quite daunting.

@dr.jokernalayaknaik2210 5 лет назад

Thanks Brother.. I am junior dev and needed such stuff.. Please make some more projects tutus so that junior devs can learn from this... I have one doubt , why you are using axios?

@WebDevSimplified 5 лет назад

I am using axios since Node.js doesn't have an easy way to query APIs. Axios is a really easy way to query APIs and it can be used on both the front end and backend if you want.

@shreyasd4663 5 лет назад

Hi, Kyler. It's a learnable video. Small Small things that I find missing are:- #1. more detailed information about predefined function and why that function used is a good fit for the place instead of potential options available? #2. Setting up the environment or a video link in description if someone from PHP world stumped up with your tutorial. I find it bit tricky with no experience with express, node.

@WebDevSimplified 5 лет назад

That is good feedback. I have some more beginner friendly videos where I walk through the code more step by step explaining everything if you would like to check those out. I also focus this only on Node.js so if someone wanted to convert this to PHP they would need to do their own research to accommodate that since it would take too long if I explained the alternatives for every programing language in the video.

@shreyasd4663 5 лет назад

@@WebDevSimplified you are correct. If possible please try to explain why this function should be used and why not other predefined function?: in description/ a single page gist. This does 2 things:- #1. Let you explore more; #2. Let beginners following up you more because you are telling them WHY "This" function is used instead of potential options?! #3. Could be converted in a good blog post too!

@WebDevSimplified 5 лет назад

@@shreyasd4663 I will consider this in the future, but that requires a ton of extra effort from me which I could use to make more videos.

@shreyasd4663 5 лет назад

@@WebDevSimplified yep! It's a win-win grow situation :) Their is something known as functional fixedness, so many people goes through it, can you do something about it? Like a small project definitely it's gonna be a good hit for audience of websites like geeksforgeeks.org Have a great day.

@funguy29 Год назад

Keep it strong brother

@ghaithderbali2159 4 года назад

Amazing tutorial, but you can use npm init -y to initiate a project without hitting the enter key bunch of times

@JohnWeland 4 года назад

With Apple buying Darksky, it might be good to make an opensource weather API. Start out with a simple API that gets its data from DIY weather stations that user can build an add. Then use machine learning to do forecasting.

@omar_mtl 4 года назад

can i use the skycons icons without using the darksky api ?

@stratoschatziioannou 4 года назад

you create very useful video. Thanx bro, for sharing knowledge. Greetings from Hellas

@bestreact1936 4 года назад

Thanks alot dear Kyle!!!

@benberry5286 2 года назад

Hi team, am I missing something? Our primary reason for using Node.js for requesting from the API is to keep our key safe, but then the google script includes the API key in the head script tag?

@joeblow8394 5 лет назад

It would be useful if you explained what you needed to actually install those files at the beginning...I went and got Git and in the bash terminal, all it says is "bash: npm: command not found" for anything I put in. I dont have much experience with this stuff so I have no clue what to do...

@WebDevSimplified 5 лет назад

Checkout my video on how to install Node.js. I believe it is called creating your first web app with Node.js

@the_247 2 года назад

From now (2022) google cloud is required billing account. So you have to use it free for 30 days by adding your card details. I have faced this issue. Hope it saves your time

@gbtech8602 4 года назад

Amazing stuff always thank You

@sameerfarooq9698 4 года назад

Brother you are very very very good

@caeveeundkuchen8142 4 года назад

Why are you giving your HTML elements these data attributes to access them with querySelector? Can't you just use the classes you gave them? Is there a specific reason you use the attributes?

@haiyingliao Год назад

it is very amazing

@webdeveric1986 Год назад

The Google API portion of this tutorial appears to be very out of date due to changes made on the Google side. Does anyone know of an updated version of this tutorial?

@kartikagarwal406 4 года назад

@WebDevSimplified Dark Sky has stopped accepting new signups due to which we can no longer use their APIs. Please update the video or the description with a good alternative.

@Jinko5533 2 года назад

i have trouble with the terminal, I installed git bash but mine doesnt work like youurs, it says it cant find "npm" command

@susmitbanerjee6092 4 года назад

it's giving me "Places API Error: BillingNotEnabledMapError " error. Do i need to enable billing on google cloud for using google places api??? PLZ REPLY

@bikramchettri9405 5 лет назад

Will check it out later.

@WebDevSimplified 5 лет назад

I hope you enjoy it when you do.

@nunes889 4 года назад

thanks Bro, Maputo Africa

@ivanminchev888 2 года назад

help, i cant initialize the project with npm init, it doesnt recognize it as a command

@mohammeddarwish8718 2 года назад

i got an error in the console say : google is not defined . What is the problem?

@AbhishekKumar-te6yj 4 года назад

For Openweather Map API use the 'async' word in your script tag in order to load the city names.

@engr.ajaowasiu5511 5 лет назад

Nice job man!

@WebDevSimplified 5 лет назад

Thanks!

@Ram-sc6or 3 года назад

Thanks ur videos are really helpful but could not do this one I have windows system and I tried all possible way to get bash but failed

@ryanm.122 5 лет назад

Good tutorial. Only thought was I don't recall ever seeing you remove the google api key from the html doc. Although, when googling it looks like you have no choice for these kind of keys?

@WebDevSimplified 5 лет назад

From my research it appears that this type of API key cannot be used anywhere else other than in the client HTML.

@ryanm.122 5 лет назад

@@WebDevSimplified Thanks for the reply!

@bikerguy3338 4 года назад

How do I deploy this successfully to github? I pushed all the code but the app doesn't work with github pages. Any ideas would be helpful.

@MocaCDeveloper 5 лет назад

Ever thought that some of the people trying to do this don't have money? And in order to do it you got to have money or at least a deb/credit card?

@WebDevSimplified 5 лет назад

You can sign up for the API completely for free without a credit card. You will only need a credit card if you upgrade to a non-free tier.

@raviraj-ge5xt 3 года назад

@full_stack_friend Bro how did you use tom tom search api for this?

@raviraj-ge5xt 3 года назад

@full_stack_friend i used openweather api instead on dark sky but could find suitable option for google maps so i used city name directly rather that passing longitude and latitude into the api.

@techcrazycrazy7216 4 года назад

Boston in USA and Moston in UK

@techworld3043 5 лет назад

finally completed .. so much stuff

@omar_mtl 4 года назад

can i use the skycons icons without using the darksky api ?

@radanmitasik8793 5 лет назад

Thank you for doing this

@WebDevSimplified 5 лет назад

You're welcome!

@kugh2384 3 года назад

This isn't a tutorial. This is him flexing on us.

@davidrosenberger7630 5 лет назад

How would you go about adding a 7 day forecast as far as using the skycons?

@WebDevSimplified 5 лет назад

Darksky has an endpoint for a 7 day forecast and you can set the icons exactly the same as how it is done in this application but for each day.

@Tony-tj1yq 5 лет назад

thanks bruh, i would like to see how to fetch “genius API” to create songs and lyrics app👍

@WebDevSimplified 5 лет назад

I will look into that for another video.

@Tony-tj1yq 5 лет назад

Web Dev Simplified thanks 🙏 kyle

@simonmoon6672 4 года назад

hi. Darkysky has stopped registering new users. Please, advise is there any workaround? can you pls show how to use accu weather API?

@cam0cazi 3 года назад

I'm using the climacell API, it's really easy

@asabharwal2008 2 года назад

Can someone help me I've been recieving multiple errors and I don't know why they are coming P.S I am using OpenWeather API and I have turned billing on in the cloud console. Plz Help.

@farrukhatabekov595 4 года назад

Thank you

@inspirationalquotes5840 2 года назад

Does google console cost money?

@JasonStewart1124 5 лет назад

errors: Unhandled Promise Rejection: InvalidValueError: initMap is not a function TypeError: undefined is not an object (evaluating 'new google.maps.places.SearchBox')

@Jdb63 4 года назад

Credential isn't an option for on google cloud

@johanneswack4017 5 лет назад

I triple-checked your code, but i always get :"script.js:8 Fetch API cannot load file:///E:/weather. URL scheme must be "http" or "https" for CORS request." What does '/weather' refer to? Any ideas what I did wrong?

@WebDevSimplified 5 лет назад

It sounds like you are not starting your server and/or you are not putting localhost:3000 before /weather. /weather is just the route from the server that you define in your server.js file. In order to access that route you need to access the server which I believe runs at localhost:3000 and then just add /weather to the end of it. It should look like this in the URL: localhost:3000/weather.

@porterrohlfs3189 2 года назад

How can I make this work

@dogo9582 5 лет назад

Great video

@WebDevSimplified 5 лет назад

Thanks!

@suhasinikonda7903 3 года назад

can anyone tellme how to run bush project once i open the terminal it is coming powershell please anyone and shoud we pay any money for this

@philipncube2939 5 лет назад

I've never seen what you did at 15:46 before and I have no clue what it is. Can't we just use the normal "id" attribute?

@WebDevSimplified 5 лет назад

That is querySelector. It allows you to select elements based on a selector in the same way you would in CSS. I like to use it to select things like data attributes so my classes are distinct from my javascript. You could use ids as well but I generally avoid ids in my code since I prefer the explicitness of data attributes.

@philipncube2939 5 лет назад

@@WebDevSimplified Yeah I know what querySelector is. What I'm referring to is the way you selected the input element. Is it ok to just do document.querySelector('#id-of-input') compared to what you did: you used a so-called "data attribute", which is what I'm not familiar with.

@WebDevSimplified 5 лет назад

@@philipncube2939 yes. You can use any selector you want. Id selectors are fine. I opted to use a data attribute since I like using them as javascript selectors since they work well when you need to select multiple items with the same attribute.

@_.sunnyraj._ 4 года назад

Google is no longer accepting free api serving need to create billing account

@abcool0801 4 года назад

I really wanted to try this for my js project but the website says that Dark Sky API is not accepting new signups. Any other way or any other API tool to use ?

@stellak.6095 4 года назад

openweathermap.org/ is a free weather api you could use :)

@abcool0801 4 года назад

@@stellak.6095 And all the other procedure is same?

@stellak.6095 4 года назад

@@abcool0801 I haven't tried it yet, and I haven't watched Kyle's video yet, to be honest :c

@kennieamara2837 5 лет назад

Hello, I have been following this ONE tutorial for almost a week now, and I am stuck on these things: "Method not allowed", a 405 error message, and an "Unexpected end of json", a syntaxError. I cannot get pass the point where you first tested the app sending lat and long data to the server. I have tried all I could, I have run out of ideas. Any help with these? Code is available if needed.

@WebDevSimplified 5 лет назад

It sounds like your server is not set up to accept requests properly. Have you pulled down the github code lined in the description to see if that works. It could also be a problem with the Darksky API. I would look for the line number of the error you see and trace that backwards until you find the issue.

@richardm224 5 лет назад

I had the same issue. My problem was that I was using the live server extension on vs code, once I switched to localhost: 3000 it worked! hope this helps

@kennieamara2837 5 лет назад

@@richardm224, Thank you for the response, but how can I do that? I am really new and very basic in javascript and programming as a whole.

@kennieamara2837 5 лет назад

@@WebDevSimplified, thank you for the response. I will try that as well.

@WebDevSimplified 5 лет назад

Live server is a vscode extension

@SmashingthecodingInterview 4 года назад

i would love a Video game fully with javascript in the browser.Please and thank you

@WebDevSimplified 4 года назад

I have a simple Quiz app game tutorial you can checkout.

@Mohamedtarek-qz2zj 5 лет назад

npm gives me an error in vs console and how can i do this node.js and package json

@WebDevSimplified 5 лет назад

I'm not sure what you mean. This project is build with node and uses a package.json. Try reading the error to see if it points you to the problem.

@danamulyana 4 года назад

google is not defined at script.js:2

@gabrieleconcli7710 4 года назад

DarkSky API are not availble anymore.. any good alternatives?

@gabrieleconcli7710 4 года назад

@@scott_strool thx a lot

@Star-zf8su 4 года назад

How I deploy this project to Heroku ☺️☺️

@ayushmanbt 5 лет назад

Is there any way to develop this app without a backend

@WebDevSimplified 5 лет назад

Technically you can call the Darksky API from the frontend but you are exposing your API key which is a terrible idea since other people can steal and use it.

@ManishKumar-ez4gt 4 года назад

Error : unable to fetch

@ebrahemluhar4999 5 лет назад

👍

@AminSani 4 года назад

This Api does not work now! They do not accept members.

@Dragon19631 3 года назад

Do a movie app from the tmdb api tutorial

@tremolony4924 3 года назад

DarkSky doesnt work anymore

@ophx1337 2 года назад

lol the intro

@pjguitar15 3 года назад

Dark Sky Weather API doesn't exist anymore!

@ManishKumar-ez4gt 4 года назад

Error : Google maps cannot be loaded

@ManishKumar-ez4gt 4 года назад

Error 2:my container is taking entire height of the screen.

@ManishKumar-ez4gt 4 года назад

Please reply Kyle . Need your help

@Jdb63 4 года назад

Well shit DarkSki just sold themselves out to apple and are no longer accepting new signups for their api. Fuck me man. Any recommendations for other good weather apis for js?

@greed11100 5 лет назад

prntscr.com/oqicnk i have a problem what is this ?

@WebDevSimplified 5 лет назад

It looks like you have exceeded the maximum requests for the free tier of that API. You will need to wait until the quota is reset.

@peteryu4353 3 года назад

CRAP, I got my coffee mug, sat down and ready to go through this. Until "setting up our server using NodeJS"... I stopped because I haven't started learning NodeJS yet

@jumanjiwarlord 4 года назад

if anyone has recreated this project using OpenWeather, I'd be interested to see their code. I'm trying to reverse engineer it but it's over my head :(