Placeholder Image

字幕列表 影片播放

  • So far, we've looked at how to reach out and make

  • a request using the fetch function to an external API

  • with a particular URL path, grab the data in JSON format,

  • pull out a piece of that data we want,

  • and then use it for a particular reason.

  • And in this case, the data that I'm getting

  • is the latitude and longitude of the International Space

  • Station.

  • And I'm plotting it on a map using the Leaflet.js library.

  • So the one key feature-- there's a couple of different features

  • here that I didn't implement.

  • But one really key feature that I did not implement

  • is having that latitude and longitude refresh automatically

  • without me having to reload the page.

  • Now, it is important that I remind myself that the rate

  • limits of this API specify that I cannot make the request more

  • than once per second.

  • So I should limit my refresh rate of the application itself

  • to, at a minimum, that.

  • And this is something that you have to be conscientious about.

  • In this case, it's just an example.

  • It's just an experiment.

  • You don't have to worry too much about it.

  • But as you build applications that

  • get used by more and more people,

  • the rate at which you're requesting data from API

  • can become a fundamental thing.

  • It could, at a certain point, cost you a lot of money

  • to make a certain amount of requests.

  • So you have to be thoughtful about how often you're

  • doing that.

  • But even before that, I think what I would like to see happen

  • is, the map, when it first loads,

  • to have the space station oriented

  • in the center with a bit more zoom.

  • So let's see if we can at least fix that.

  • So I'm going to go back to the code.

  • And here, once I get the data from the International Space

  • Station, this is where I update the marker's location.

  • I should be able to also update the maps location.

  • And how do you do that?

  • Well, it's the setView function.

  • You might remember from the last video,

  • I tried to use setView with the marker.

  • So when you are specifying the location of a marker,

  • that's set lat long.

  • When you are specifying the location of the map itself,

  • that is setView.

  • And I would give it a latitude and longitude, and also then

  • some zoom level.

  • Let's just try like 5.

  • I don't know what's going to be a reasonable.

  • And there we go.

  • Apparently it's over open water right now,

  • so we're not seeing anything super interesting.

  • But let's set that back down to 2.

  • And we can see, there it is.

  • It's right there in the middle of the Atlantic Ocean right

  • now.

  • Great.

  • Now we're ready for the final step here.

  • I want to get the new latitude and longitude every so often.

  • And the way that I'm going to do that

  • is with the setInterval function.

  • So there is a function in JavaScript called setInterval.

  • And what setInterval does is, is it

  • says, hey, take this function, maybe your function called

  • getISS, and have it happen every so often, like every 1,000

  • milliseconds.

  • So in this sense, I could just call

  • getISS, which does all this.

  • I want it to happen right when the page loads,

  • because setInterval will actually wait a second

  • for the first time it calls it.

  • So I'm going to leave this redundant one in here.

  • GetISS, and then every one second, do that again.

  • Let's see what happens.

  • Wow, that was like one line of code.

  • There's a whole video for just one line of code?

  • We'll see if we run into any issues here

  • and have to do a bit more.

  • getISS is not defined.

  • Oops.

  • The Ss are capitalized.

  • JavaScript, as you might know, is case sensitive.

  • Don't forget that.

  • I always forget that.

  • So we can see this number is changing every so often.

  • Is this moving?

  • Oh, wait.

  • Ah, it keeps fixing my zoom.

  • So here's the thing.

  • Even though I wanted to set the maps location here initially,

  • its view initially to this, I only

  • want to set the view the first time.

  • So how do I want to deal with this?

  • Well, there's a variety of ways I can do this.

  • But I think one way I could do is just use a Boolean flag

  • variable.

  • So I can say something like, first time is true.

  • And I can say right here, if it's the first time, then set

  • the view.

  • And after you do that, set first time equal to false.

  • So this would be, whenever getISS is called,

  • it's going to set that view to the latitude

  • and longitude with that zoom.

  • Then set first time to false so the next time it comes around,

  • that will never happen again.

  • Maybe not the most elegant solution,

  • but one that will work.

  • Is it moving?

  • Can we see it's moving?

  • Ah, yeah, there it moved.

  • I think we're going to have to get a bit more zoom in here

  • to really see it moving.

  • There we go.

  • Now we can see the International Space Station, every one

  • second, is moving along the map.

  • There's some small cleanup things

  • we could do that might be nice for me to show you here just

  • to kind of polish this project off a little bit more.

  • One is, my web page is showing me

  • quite a bit of decimal places for the latitude and longitude.

  • That seems a little bit unnecessary.

  • I can use the JavaScript function toFixed,

  • which will fix what it is adding to only two decimal places.

  • So that's a nice little cleanup piece here.

  • I could also add the degree.

  • I might as well add the degree character here to see that.

  • Right after the span, I could put the degree character

  • right here.

  • And I go back to the page.

  • And whoops, I didn't hit save.

  • Where is it?

  • Oh, I put it in the span.

  • That's very important.

  • It'll get replaced if it's in the span.

  • It has to be outside.

  • And there we go.

  • So I have the degrees there.

  • That's kind of nice.

  • There

  • Are so many things we could add to this.

  • And a nice reference might be to go back

  • and look at the wheretheiss.at website and see.

  • For example, what if I also grab the altitude, and then

  • I made the size of the icon somehow tied to the altitude?

  • What if I added some more UI elements

  • so I could toggle things on and off?

  • Maybe actually I could keep the view always centered

  • around the ISS and have the map move behind it,

  • and the ISS would stay in place instead of it

  • moving along the map.

  • Again, I could use the p5 library

  • to do my own custom drawing, perhaps even on the path

  • or draw a velocity vector of how the map is moving.

  • In this video's description, when you go over

  • to the GitHub repository for the code in this example,

  • I'll also include the code for a variety of these solutions

  • and variations that you're seeing right now.

  • So thanks for watching this project.

  • We have done a lot in this first module

  • of working with data and APIs in JavaScript.

  • We've learned about the fetch function.

  • We know how to get different kinds of data

  • with the fetch function-- image, text, JSON data.

  • We know how to get JSON data from an external API.

  • We've looked at using some other JavaScript libraries,

  • like Chart.js and Leaflet.js.

  • For charting and mapping.

  • But we're missing a big, huge piece.

  • What if I want to save some data and use it later?

  • What if I want to authenticate with an API,

  • but hide my API keys?

  • There are so many things that I might

  • want to do that need more than just an index.html

  • file, with some JavaScript in it, some HTML in it,

  • maybe some CSS in it.

  • A lot of things that I'm going to want to do,

  • that I'm going to show you how to do,

  • involve writing your own server.

  • I'm going to show you how to use node.js, a JavaScript

  • runtime, another way of writing JavaScript outside

  • of the context of the browser, to write

  • server-side applications and do a variety of kinds of things

  • working with data, manipulating data, saving

  • data, communicating with APIs, that you couldn't

  • do so easily with just JavaScript in the browser.

  • And the two projects that I'm going

  • to build in the next set of videos,

  • they're products by Joey K. Lee.

  • Thank you so much for Joey for preparing these materials

  • and allowing me to use them in this video series.

  • The first one is going to capture images from your webcam

  • and save them to a database.

  • So you're going to learn about how to save data to a database,

  • and also how to do something more

  • with the fetch function, which is post data to the server.

  • Right now, we've been using fetch just to retrieve data.

  • We can also send data with a POST request.

  • And the third project, also by Joey Lee,

  • this project is crazy.

  • I'm going to use two different APIs at the same time, one

  • for getting weather information, one for getting air quality

  • information.

  • And what's going to be different and interesting

  • about that project is, it's going to require authentication

  • and hiding private API keys on the server itself.

  • We're going to look at how to do that

  • so that you can publish and open source your code,

  • but also keep your API keys hidden.

  • So thanks for watching.

  • You've now completed the first module

  • in working with data and APIs.

  • And we're on to module 2 in the next video.

  • [MUSIC PLAYING]

So far, we've looked at how to reach out and make

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

1.6 用setInterval()刷新數據--在JavaScript中使用數據和API。 (1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript)

  • 4 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字