Placeholder Image

字幕表 動画を再生する

  • what's going on?

  • My name is Jay.

  • And in this video, I want to show you how you can use a public Ap.

  • Let's see.

  • So for Disney video, we're gonna be using open weather map dot Orc.

  • They have very, very simple AP.

  • I have Aton of data that we can use.

  • So if you go there and then you click a P I you will see all these options right here.

  • But the one that I want is this one first one, the current weather data.

  • That's the one that I want.

  • Okay, so click subscribe.

  • You will see all these options.

  • I'm the one that we're gonna use is the free version, which is gonna work for this video.

  • Any words for, like, a professional website and stuff like that.

  • So click on to get a P I ke and start, So you need to sign up just like a normal website.

  • Does your email on password, all that stuff and they're gonna give you an A p i ke.

  • Um so that way you can request all that data, So let's test the AP, I So let's see if it works.

  • I have here in the U R L that they provide, which is this one right here.

  • All right, so now we need to add a question mark.

  • Q equals to whatever CD, and you can see that I haven't already there.

  • So I live in Orlando.

  • So is Orlando.

  • And then And ap have I d equals do whatever a p I ke they gave you.

  • All right, so that's mine.

  • Don't try to use mine, because it's not gonna work for you.

  • I'm gonna hit Enter and here you go.

  • So I have all the data from the current weather in Orlando is great.

  • One thing that I want to do right now is because if you can see here on temperature, that's isa different unit.

  • We use a different unit, so I'm just gonna put it right here after Jews.

  • And so he's gonna be unit equals to imperial.

  • And then and I'm gonna leave the app i d I'm gonna hit enter again.

  • And now we have whatever you use.

  • You can change it, but is it what we use in the United States?

  • Cool.

  • Now that we have these oil ready to go, I'm just gonna go to my text editor and start coating here have on a steel mill file.

  • The only thing I have is requesting J Query was gonna We're gonna use it to request the data.

  • We have a script on Daddy.

  • Ah, yes, which is empty.

  • And we have a style dot CSS is empty.

  • We're gonna add some stuff in a minute.

  • So let's start by adding some html here.

  • So the first thing I'm gonna do, I'm gonna add a container.

  • Everything's gonna be inside that container so you can be like, weather container.

  • Okay.

  • And inside there, we can do paragraph, and then we can add, like, a class off.

  • Um, this can be actually, you know what?

  • First I'm gonna add an icon like if it's raining.

  • If it's raining, we can do like a rain cloud with some drops or whatever.

  • If it's sunny, we can add, you know, a son or something like that.

  • So best icon there's put Icon is a class is gonna be like the name.

  • So if it's raining is gonna be like rain.

  • If it's stunning, is gonna be sunny.

  • So this is weaken a bit.

  • Name it.

  • I don't know whether whatever you can name it whatever you want.

  • So let's create another one.

  • And this one eyes gonna be a temperature.

  • Of course, Tank.

  • All right, cool.

  • I think that's all we need for now.

  • Like, if I want the weather, I just want, like, you know, whatever is happening in the temperature.

  • And then they I can do something cool.

  • You know, that we like to see it's a message for HTML.

  • I'm going to save it.

  • And then four d Jeff, a script go here because we have Jake Query.

  • We can use something called Get Jason and get Jason is going to get all these data for us because this is Jason is Jason file.

  • So let's go back there and let's do I'm dollar sign dot Get Jason just like this, and then we're gonna do inside here.

  • We're going to the u R l coma and then function.

  • Sorry.

  • Function just like that.

  • All right, so we need to include that your l Here, let's go back and get it.

  • Where is it?

  • Here.

  • ISS copy.

  • Pasted right there.

  • All right, so what?

  • I'm gonna D'oh!

  • I'm gonna put here inside the function.

  • I'm gonna put data all the data is gonna be inside there so I can do something like Consul.

  • Don't log data, so I'm going to save that and let's go back here.

  • So this is my pace right now.

  • I'm gonna reload my page, and here you go.

  • We can see all the data, the same thing we have here.

  • We can see it.

  • We have it now available for us on the website.

  • Everything is here.

  • All right.

  • Cool.

  • Now that that's working, let's go back.

  • And here inside the function we're gonna do like, let's create the variable of the icon toe lift variable icon.

  • And I have a your l that they provided for everyone to get the icon.

  • So if we go here, let's see if they have here on weather.

  • So you can see that there is a icon here and there is like a number in the letter.

  • You understand how we gonna use days in a minute?

  • So they provided a euro for that I consulate, see, was open here and let's go back.

  • And what was the code is what 11 dealers copy and paste it dot PNG.

  • Look at this.

  • So every single thing It's a different thing.

  • Depending on the weather, that icon is going to change and it's gonna be these euro cool.

  • So let's go back to my code.

  • Let's do Oops.

  • That's not what I want.

  • I want the euro, which is death, and then I'm gonna do plus and we need to add, um, that, um, code, which is gonna be data dot Let's go here.

  • Let's see.

  • So these data dot weather zero and then dot icon.

  • So these data dot weather zero.

  • And is it because it's an array?

  • It's a lest You can see that we have groups quit.

  • We have 01 and he's in a ray.

  • So we need to do score bracket zero and then dot Icon, that's it.

  • Now we gonna have.

  • If we call icon, I'm gonna have this and then whatever code it iss And actually I need to add a PNG file.

  • So the PNG format.

  • So let's go plus sign and dot PNG.

  • Now that's gonna work.

  • There you go.

  • So now let me call the icon and see if it works.

  • Log icon.

  • All right, let's go bagless Reload this page.

  • Here it is.

  • Let's click on it does it.

  • We have the icon.

  • All right, so let's go back here.

  • So that's working.

  • Let's remove Consul log.

  • We don't need it.

  • You know, What I'm gonna do is I want to add that icon inside this image.

  • So let's do it, Gloria.

  • Sign can that, Dad, um, the icon class.

  • And then we're gonna do attributes, and then attributes is gonna be this force.

  • And that source inside that source is gonna be the icon, which is Hold this.

  • All right, Cool.

  • Let's save it.

  • Lifted.

  • That works.

  • Let's reload the page.

  • Yea, we have here.

  • It seems like it's like thunderstorms or something really bad is going on here, which is true.

  • Like, today's a very rainy day.

  • So yes.

  • Um, all right.

  • Cool.

  • Till we have the icon don.

  • So let's do the same thing with the temperature.

  • So let's create another variable.

  • Let's call attempt equals two.

  • It was gonna be data dot I think is weather dot tank.

  • Yeah, I think that's what it is.

  • And this is gonna give us that number.

  • So let's go back.

  • May should make sure that that's true.

  • All right.

  • Um, no, Actually, it's Maine.

  • So I have to fix that.

  • So it's a main dot temp, so let's go back.

  • It's not weather is Maine?

  • All right, cool.

  • Now we do the same thing.

  • We're gonna go here, and this is the dart in the class temp.

  • But this time we're gonna upend that data.

  • And this was gonna be a temp.

  • Let's say that and let's see what happens, does it?

  • Here we go.

  • We have to have the temperature.

  • We have an icon temperature and I think we're missing.

  • Were whether text, like it's raining or it's not raining, Sonny.

  • What?

  • What it iss Let's go back.

  • Let's do that.

  • Let's do it right here in the middle.

  • That way we are, like, organized so variable we can create something called whether weather name or whatever you want equals two data dot weather.

  • Let's go back and see where it is.

  • So weather.

  • And then there's the arrays.

  • I'm gonna get the 1st 1 and it's gonna be thunderstorm.

  • Okay, so there's thunderstorms.

  • So whether zero dot main Then we're gonna go down here.

  • You want to do the same thing we're gonna get the weather dot Penned was upended data, and it's gonna be?

  • What?

  • Let's save it.

  • Let's see what happens if it if it works.

  • Yeah, There we go.

  • We have the cloud.

  • It said So we have thunderstorm and is 86.

  • Now, I don't wanna show this 0.49 point 49 as one show 86.

  • And there is a trick.

  • We can do it right here on the weather.

  • No, actually, the temperature.

  • Sorry.

  • We can do math dot floor and let's see if that helps groups.

  • Sorry, Is math like this?

  • Let's go.

  • Cool.

  • Now we have only 86.

  • All right, so you don't have to do the math floor.

  • Actually, there's some other options.

  • Um, so I'm gonna put a link in the description if you want to play with this, Uh, but I think that's it.

  • We just I need to kind of make it later prettier because right now it looks very, very weird.

  • So let's go.

  • Let's add some CSS.

  • Let's say weather container.

  • Let's do like, you know, like a great background.

  • Let's you know what?

  • Let's let's line everything to the center and we have the weather text, the one that sets thunderstorm.

  • Right now.

  • Let's do fun size mom like 22 pixels bigger and let's remove all the margin because I know paragraph half like margin.

  • We have attempt like the temperature weaken.

  • D'oh!

  • This one I wanted, like pretty big.

  • So let's do light 60 big salts.

  • Um, same thing.

  • Margin zero.

  • And oops and font.

  • Wait.

  • I wanted to be bold.

  • All right, let's say that I think that's that's good for now.

  • Let's reload the page.

  • And here it is.

  • So you have the icon.

  • It said, So we have to Thunderstorm and 86.

  • So let's see what happens if we change like Orlando, Um, to like New York, for example, is going there.

  • Let's go here, Let's say, um, you know what?

  • Let's do something real quick right here so we can do that very easily.

  • So it's Dr Variable called CD, for example, and right now is Orlando.

  • And right now in the euro we can do it.

  • Let's remove the name Orlando.

  • We just closed the Orioles.

  • There we do plus sign CD plus sign, and then we open the your elegant.

  • All right, so now this is coming from this variable.

  • Okay, so let's save it to see if it works.

  • Yep, same thing.

  • So now let's changes to, like New York.

  • Go there.

  • Really?

  • The page you're is so New York, right now 75 clear seems like it's a beautiful day.

  • So that's how you do it.

  • You can go very, very complex and and use another A p I.

  • That gets the usual specific user locations.

  • And then the CD variable will change depending on the location of the person and all that stuff.

  • It can get very complicated.

  • But this is a very, very simple way to get started and understand how public AP I works not on Lee weather, but there is a bunch of other AP eyes with other data that you can use, you can just you can use it just like this.

  • Okay, so that's it.

what's going on?

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

パブリック API を使う - 初心者のためのチュートリアル (Using a Public API - Tutorial for Beginners)

  • 2 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語