[BELL RINGING]
Hello.
Welcome to another video in the Data and API series.
So far I've built two projects.
Well, the first one wasn't really a project,
if I'm being honest, it was just a quick demonstration
of the web Fetch API, the Fetch function in JavaScript
in the browser.
It's a fundamental building block
of the examples I'm building right now.
The second project was really a project.
It used Fetch to load a CSV file, tabular data,
world-average temperatures from 1880
to present and graph them using a JavaScript library called
chart.js.
But what you haven't seen, what I haven't done yet
is find some data that's external.
It's not a local file, it's not an image on my hard drive
or a CSV file, it's something that I'm
getting from an external API.
What do I even mean by an API?
API stands for Application Programming Interface.
Yes, it sounds very important, but it's really
a little technical jargon for something quite simple.
The term refers to two applications
talking to each other, two computer programs sending
information back and forth.
So if I'm the designer of an application
and I want other people who are programming stuff
to be able to talk to my application,
I will create an interface, a set of conventions,
a protocol by which other applications could
talk to my application.
And what I might want to do with my application is serve up
data, for example, maybe I'm a newspaper
and I want to let other applications to have access
to all the news articles over time, or I am an image database
and I want to let other applications have access
to images in my database.
There are a lot of pieces of this puzzle for communicating
with an API.
You might have to authenticate with some kind of security
stuff, you might have a limited number of requests
you can make from the API, you might
have to provide a certain amount of parameters to your request
so you get the right data back.
But for the purpose of this project--
I designed this project to start in a really simple place.
Remember that fetch function?
Our building block?
All we need is the URL address of the API,
we put that in the fetch function,
we call the fetch function, and back comes the data.
The API that I've been using to demonstrate this
is at a website called WhereTheISS.at
It's an API that gives you back the current location
in latitude and longitude of the International Space Station.
It actually gives you a lot of other information besides just
the latitude and longitude.
It gives you the altitude, the velocity, the visibility,
what time it is, where the sun is, all sorts of stuff.
I want to do just one thing.
I just want to get the latitude and longitude displayed
on the web page, then I also want
to plot that point on a map.
So to do that, I'm also going to use the leaflet.js library.
It's an open source mapping library
where all of the image--
the map images are Creative Commons licensed,
but you could also look into using other mapping libraries,
like Google Maps or Map Box, and try experimenting
with one of those, as well.
But before we could do any of this,
before we can dig into this project, you and me,
we're going to have a talk, we've got to talk about JSON,
J-S-O-N, or JavaScript Object Notation.
The good news, if you're here already,
you're probably familiar somewhat with JavaScript.
After all, it's kind of a requirement
to be in this video series already.
It's fine if you're a beginner and I have other resources
for people who are just learning JavaScript to kind of get up
to speed.
But right here right now, you should
be familiar with the basic idea of JavaScript,
and you've hopefully maybe written some code like this,
like maybe you wrote some code once that said let pause--
I'm going to create a variable like pause for position--
it's going to have open curly bracket, closed
curly bracket, maybe a semicolon,
and then I'm going to put two properties inside
of this JavaScript object literal,
like Lat for latitude, colon, and Lon for longitude, colon.
Latitude is between negative 90 and 90.
So let's pick negative 45, comma,
longitude is s other number, let's pick 112-- just picking
this randomly.
And here I have a JavaScript object,
a JavaScript object literal.
Let's go actually write this in code.
I have a blank HTML file here.
And I'm just going to--
with all script tag in the body, and I'm
going to just write, I'm going to put this exact code in here,
let pause equals latitude, what did I pick?
Negative 45.
Longitude, 112.
And then let's just say console.log pause.
So if I go over to the browser, I can see here,
there it is, there's my JavaScript object with two
properties, latitude and longitude.
So this, in essence--
I'm spending way too much time trying
to find something quite simple, which
is a data that's in JSON format, is exactly this.
It's data written into a file with this syntax,
the same exact syntax as JavaScript object literals.
There are a few important differences.
For example, if the data was not hard-coded into code itself,
you might find it in something like a file or a raw text file
with a name like file.json.
And in that file, you would see exactly this, an open curly
bracket, a closed curly bracket, but the property names
would have to be in quotes.
So latitude would have quotes around it,
longitude would have quotes around it,
these numbers could be without quotes,
they would look like this.
And so this could actually be the contents of a JSON
file itself.
Now, what in this file can be much more sophisticated
than just two named properties?
Two numbers with the keys Lat and Lon?
There could be a property that is actually
an array of a list of things.
There could be a property that's another object
with several other properties which has an array in it.
This can be a nested tree structure of data.
I don't want to go too far down that road,
we'll get there eventually.
I just want to do very basics here.
I want to reach out to an external API,
ask for some data, that data will come in JSON format,
I want to extract the values of certain properties,
and do something with them.
And the the WhereTheIssAt API is a really nice place for us
to start.
So here I am at the WhereTheIss.at website is.
Hopefully this website still exists
whenever you're watching this video.
This is not an official International Space Station
API, whatever that might be, this is created and maintained
by Bill Shop, and thank you so much for the work and building
out this website and API.
And I want to build, essentially,
what is the same as what's on the home page of this website.
So one that shows a map and shows where the International
Space Station is.
I'm going to make a much simpler version here,
but you can get some ideas of how
you might make yours a little fancier
with some additional features.
So the first thing you always want
to do if you're working with an API
is try to find the documentation for that API itself.
And on this website, I can find it
by looking right down here and finding this linked API.
I am going to click that.
And now, where I am, I'm at the Where The ISS At REST API
documentation.
In a future video, I'll talk about what that REST API means,
and in fact, I have a project that's
going to come in this playlist where
we'll build our own REST API.
In short, you can think of REST as a pretty good convention
and style for how an API is designed and it works.
But there's really important concepts here.
We can see, a-ha, what is the authentication required?
Really good sign for us as we're just starting out
in our journey of learning to work with APIs because there
is no authentication required.
So authentication required can involve some steps,
like signing up for an API key, which is like your secret code
for using the API, you have to put that in your code.
And sometimes you have to hide it in your code.
We're going to get into all that,
but I'm so glad to use this API that doesn't have any of that
just for starting.
Rate limiting is a concern, right?
For us right now, we don't have to worry about it.
This, the limits here are 1 per second,
so I'm going to remember that fact when a little bit later
in this video I start trying to put in a timing information
as to how often I want to request the updated
location of the space station.
And then, some other information on responses,
and then here, this is also really crucial, endpoints.
What are endpoints?
Endpoints describe the path, the URL path
that you can request a certain bit of data from.
And certain API will have different endpoints.
Oh, if you want the latitude longitude of this satellite,
go to this endpoint, if you want the latitude
and longitude of this other satellite
go to this other endpoint.
And that's what we're seeing here.
What are the example URLs.
And this one right here looks like api.wheretheiss.at/v1,
this is very common.
APIs will often include in their path
in their endpoint reference to a version number
because it might change how it works later,
and so they would then update the API to be v2,
but you could still maybe use, if they're making it available,
the old v1 links.
But rather than explain this too much more,
I can actually just copy this URL and go right here,
paste it into the browser.
We can see, oh, look, this is a list
of all the available satellites.
Well, this is a very simple API, it just
makes one thing available, the International Space Station,
and that's its ID number.
Why do I care about that?
Well, the ID number also signifies another endpoint
where I can get more information about this specific satellite.
And if I kept going down this page,
I would look down and see like, oh, right here, for example,
if I know the ID of a given satellite,
I can then go to /satellites, slash, that ID number,
I do that, I paste that URL in instead, and voila,
I have all of the data from the API.
And noticed that if I refresh, the latitude and longitude
is updating, it's changing.
Very small increments because in terms of latitude and longitude
measurements, the space station is orbiting the Earth
very slowly, but those numbers are updated
every time I refresh the API.
You might also notice this Raw Parsed button up here.
You might not see this in your browser
if you're following this along exactly,
yours might look just like this.
So this is typically what raw JSON data looks like.
It doesn't have line breaks and spaces and tabs
in it, why should it?
It's for computers to send data back and forth.
But I have a Chrome extension, a browser extension
for the Chrome browser that parses and gives
syntax highlighting and line breaks
and lets it be foldable and all sort of things.
So there's an ample number of these
if you search browser extension JSON formatter,
you'll find a bunch, but I will include
a link in this video description for the one
that I'm using right now.
OK.
There's not much more for us to do for this very first step.
I just need to remember this end point, this URL path to the API
itself.
When I go into my code, I don't need this thing anymore,
and I'm going to use the Fetch function.
So I want to just start by writing
an async function called Get Data, that way,
I could just use that wait keywords right from the outset.
And I always forget to say function.
And let's call this GetIss.
And then I'm going to say const response equals await fetch.
And then what do I want to fetch?
That particular URL.
But I don't love this.
I think I would make much more sense for me
to just store in a kind of global variable, the URL
to the API, and maybe I might even
want to call that API URL or ISS API URL or something like that.
And then I could just put it in here in the Fetch function
itself.
So if you recall, when you get data back
from the Fetch function, it comes as a stream
and you have to package it up in the format that you want.
We've done it with images as a blob,
we've done it with text CSV data as text,
and now it is time for us to say,
data equals await response.json.
We want to convert that response into JSON.
I'm going to say console.log data,
and then I'm just going to say, I'm
going to call the function get data when the page loads.
And let's see if we see the data from the API in the console.
GetData is not defined.
Oh, that's because I called it GetIss.
Would be nice to call the function with the name
that I called it.
API URL is not defined--
oh, because that is defined first-- it's very.
I've actually written this in kind of a terrible way.
Let me just be quite consistent and let me
put the function at the top, then let me define the API URL
top, and then down here, I'm going to call it GetIss.
Order of operations is a thing in programming.
There we go.
Look.
And now I have that data logged into the console.
So let's say I want to pull out specifically
just the latitude or just the longitude.
The good news is I could just get those from the JavaScript
object, the data.
This is why it's so convenient to work with JSON data
in JavaScript, comes in JavaScript data notation,
and then you've got it as a JavaScript object.
So I could just say data.latitude, data.longitude,
if I want to log just those bits of data,
we can see there they are right there.
Then I can also do this fancy thing
called JavaScript destructuring, which basically
takes the pieces out of a JavaScript object or an array,
and puts them into separate variables.
So I can just do this.
If I say const latitude in an object,
latitude comma longitude equals data, then
that will give me the latitude and the longitude
in separate variables.
There they are again.
So what do I want to do?
Maybe what I want to do actually on the web page itself is
I want to create a header saying where the ISS--
where is the ISS, then I'll make that a header tag, then I'll
make a paragraph tag, and I'll say the latitude--
or let me just say latitude span ID equals Lat Lat,
and then I will add a line break, and then I will say
do the exact same thing but with longitude.
And I'll say span ID equals lon, and then what I'll do
is I will say document.getElement
by ID lat.TextContent equals latitude.
And I'll do the same exact thing with the longitude.
And if I go back now, there we go.
Look at that.
There it is, the latitude and longitude.
And every time I refresh this page,
I'm getting the new values.
I have now successfully used the fetch function
to retrieve data from an API, from a particular endpoint
of an API.
There's the endpoint.
I take that stuff that I get back, I converted into JSON,
I destructured the data out into two separate variables,
latitude and longitude, and then I take that data
and redisplay it into an element on the webpage itself.
Woohoo.
All right.
This is actually kind of almost done,
but there are two really big things
that I want to do to this.
Number one is I want to be able to take the latitude
and longitude and plot it onto a map.
So in the next video, I'm going to do
just that with Leaflet.js, the JavaScript mapping library.
But before I get there, there's another thing
that I want to do, which I'll come back and do at the end,
but you might want to even try it as an exercise right now.
How could I have after a certain amount of time
the webpage take it upon itself to go and request updated data
and update those span elements on the webpage itself?
One way to do that is with using a function called Set Interval.
And I'll come back and add this to this program,
but that's something you could try now as an exercise.
And something else you might try is just, well,
what if you want to also add velocity to this?
Or maybe go and find a different API
with an endpoint that you can retrieve some data from
and redisplay on the webpage?
Just watch out for all of the authentication stuff.
If the API you find requires authentication,
you might have to do some funny business with an API key
or some type of a log-in before you can access that data.
All right.
Thanks for watching.
I'll see you in the next part where
we'll get that map happening here on the webpage.
[MUSIC PLAYING]