字幕列表 影片播放 列印英文字幕 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]
A2 初級 1.6 用setInterval()刷新數據--在JavaScript中使用數據和API。 (1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript) 4 0 林宜悉 發佈於 2021 年 01 月 14 日 更多分享 分享 收藏 回報 影片單字