This is an exciting moment, because in this video,
I want to look at pulling data from an API
and answer the question, what is an API?
How do you sign up to use one, and how do you get data
from it, and how do you visualize something or use
that data in your own work?
So let's just start in a weird sort of way from scratch.
Obviously, I've kind of planned this somewhat in advance,
but I'm going to open up my web browser here,
and I'm going to go to-- don't look at that page.
I'm going to go to Google, and I'm going to say,
I'm looking for--
looking for-- I'm looking forward to hearing from you.
I really am.
By the way, this is sort of an interesting--
this is totally-- no, no, I'm not
going to get into an aside about how
they do this predictive stuff.
I'm looking for weather data.
Mm, weather.com?
No, let's see.
I'm looking for open weather data.
Oh, there we go.
So in other words, you're most likely
going to have to start searching on the internet
to find the data you want, or your friends
will tell you about some data.
This bri-- and this is a nice API to use to start.
Weather data, I think, is intuitive.
It's easy to understand.
Like, most of us are familiar with the weather,
and it's like sort of small chunks,
and you can query in different ways-- weather for this city,
weather for this day, that sort of thing,
historical weather data, current weather data.
So there's a lot of parameters and ideas
here just packaged in this simple idea.
At the same time, it's a little bit
of a cliche to say, I'm going to make a project with weather
data, because it's kind of everybody's first example.
That said, that's what I'm going to use.
So let's say you found this thing called Open Weather Map,
and I'm going to click on this, and I'm going to see that,
hm, clearly, there's weather here, data here.
There's stuff being visualized, and what I'm looking for
is something that says API.
API stands for Application Programming Interface,
meaning I am writing a program.
Open Weather Map is a program.
Their programs are running on their server.
My program is ultimately running on my server,
whether that's just my laptop or some server
that I'm going to upload my project to.
And those two servers need to talk to each other.
I could draw a diagram with two circles and things talking
to each other, but you get the idea.
They need an interface by which to talk to each other.
That's what an API is.
It's a thing for computers to talk to each other,
rather than the-- really, human beings, the thing that's me
and you-- like, we should really spend time
talking to each other, too.
I think that would be--
but hopefully, computers talking to each other
can help us talk to each other.
I don't know.
Think about that.
Think about that as you make projects.
That's too much of an aside.
OK, so look, and it's fall.
You can see the nice changing colors and leaves.
It's quite lovely.
So how do you suddenly use this API?
So the first thing you want to do is click on it,
and you could see, OK, well, there's some information here.
For example, what if I want to get--
let's say I want to get current weather data.
Let me slide this over a little bit.
I'm going to click on More, and looking here, I could see,
ah, there's like all this stuff.
So here's the thing.
Ultimately, the ease of using a particular API
is as good as its--
how easy it's going to be is how well-documented it is.
Are there examples?
Is there a video of somebody telling you how to use it?
A lot of APIs--
I'm going to show you this when we look at the New York
Times or Wordnik--
have an online tool, like a form that you can sort of play with
and test out the API, which almost writes the code for you
in a weird sort of way.
So these are types of things that you might use.
But for us right now, I'm just going to kind
of say, like, oh, look at this.
Examples of API calls api.openweatherm
ap.org/data/2.5/ weather?q=London.
That's good enough for me right now.
I'm happy to work with the weather data in London.
So what I can do is I can copy this URL.
I could actually just click on it,
and I'm going to open a new tab, and I'm
going to put it in there, and I'm going to hit Enter.
And I'm going to be excited about getting my weather data.
Oh, shoot.
So this is going to happen to you.
Now it used to be Open Weather Map was actually
one of the examples that are used to demonstrate,
because it actually didn't require an API key.
It would give you the data anyway.
But this is typically something that you're going to find.
If a company or an organization or just some person
is opening up their data, they want
you to identify yourself when you're asking for the data.
So you have to sign up for an account and get a special key.
That way, they can track how often
are you accessing the data, what are you using the data for,
and, ultimately, this is a paid service.
So we can use Open Weather Map for free, but if you built--
I don't know what the thresholds are--
but if you built an application that has millions of users that
are querying whether data, you're
going to have to pay a fee to Open Weather Map to have
all of those queries.
So we could go to this URL, which would give us
more information about it.
But ultimately, what I'm going to do is go back to here,
and I'm going to look for, ah, Sign Up.
So let's go to Sign Up, and I'm already signed in.
Log out.
I'm going to enter in an email, daniel--
I was going to sign up--
.shiffman.net, and I'm going to make up a password.
Should I tell you what my password is?
Wouldn't that be exciting?
Porcupine.
You can all use my--
I don't know.
Like, what happens on the internet
if I just say what my password is?
Technical hiccup.
I'm now going to log into my Open Weather Map account.
You're going to have to create an account.
I already had an account and was trying
to create an account with the same email address.
So it's easier if I just sign into mine,
when I'm going to hit Submit here.
And once you create an account, you're
going to see that you have an API key.
An API key is like this sort of secret thing
that identifies you, that you can use in your code
to make the API query.
So now I have to ask myself, if I copy and paste this API key,
where do I put it?
Where do I put it?
This is the path for querying Open Weather Map.
How do I get the API key to be associated with that path?
And this brings up a topic.
I really do actually need the whiteboard, which
relates to URL query strings.
So when you're working with APIs,
you typically need to not just say, give me all your weather.
You need to say things like, give me all your weather
in this city on this day.
Give me the high temperature.
Give me the low temperature.
And then you also need to say, with this API key.
How do you do that?
So if you have some URL like openweathermap.org,
a query string is a thing that comes at the end of the URL.
Now there's different ways of formatting query strings,
but the most common or one of the more common ones that
at least you're going to see with Open Weather Map--
we'll see some other scenarios of this--
is starting with a question mark.
So the question mark indicates, now
I'm going to give this URL some parameters.
Some parameters might be things like city=London.
So these are now, as almost everything is in programming,
name value pairs.
City=London.
So this is saying, give me Open Weather Map at city=London.
You can see that's actually already in there.
Now it's not City.
It's q=London, because that's what Open Weather map expects.
Q-- that's kind of like for query.
Now we need to have a second one.
In addition to the city, I need to give it the API key.
So multiple queries are strung together with an ampersand,
so you can say, something equals something, ampersand something
else equals something, ampersand something
else equals something.
There's a few little gotchas here,
like you can't use spaces and certain characters that
aren't valid in the URL.
There's ways around that through URL encoding and decoding.
And hopefully, I'll mention that or get into more specifics
about that later.
But this is essentially what we need to practice forming.
And A, just forming it now to see that the API works,
but then, ultimately, putting these kinds of query strings
together dynamically in our code, because what if the user
types in the city?
And then you get that from the user,
and then you've got to insert what the user put into your API
query.
So over here, I can now add something.
I can say-- and I happen to know this in advance--
APPID=, and a paste.
And you can see now, I have added into the query string,
q=London, and APPID equals my special API key.
And I hit Enter, and look at that.
I now have JSON data.
Look, it worked.
So this is data I can now load into my sketch
and visualize based on this API.
I can draw something based on the current weather in London,
and I'll do that in a moment.
But first, I want to mention something.
This is kind of-- now we're getting this thing,
like this is JSON data, and the computer's
going to have no problem reading it.
But to me, this is actually quite hard
to dig through looking at it.
And I would really prefer if I had it nicely
formatted with some spaces and some line
breaks and some colors.
And so one thing I recommend doing
if you're going to work with data
and APIs is installing a Chrome extension that
will automatically format the JSON data for you, as you're
like--
notice, I haven't even written any code yet.
I'm like 10 minutes into this video.
Just as I'm starting to figure out how the API works,
I'm just working in the browser.
So there is a Chrome extension.
I'm going to just Google, Chrome extension JSON formatter.
There's lots of them.
This is one that I particularly like.
It's the first one that came up.
I'm going to say, Add to Chrome, and I'm
going to say, Add Extension.
That's been added, and I'm going to close that.
And I'll get you the link to that,
but now I'm going to hit Refresh, and you can see now,
this has actually been formatted.
And you can see these buttons raw and parsed.
So I can see this is the raw data,
and this is it parsed to look nicely.
And what's really nice about this is I
can sort of fold this up.
So for example, I can see that what's actually here--
this is the sort of root object that has these things in it.
It's an object that has a coordinate, a weather, a base,
a main, a wind, a clouds.
I don't-- I have to read through the documentation to see what
all these things are.
But, for example, let's look under Main.
So by the way, these are values--
I think they're in Kelvin.
So one thing I didn't specify is the unit of measurement.
Maybe I want to get these in Celsius or in Fahrenheit.
So let's actually take a minute.
That's another thing that I need to add to this query string.
I probably need to say something like, q=London,
and APPID equals my query string,
and units equals imperial or metric or something like that.
So if I go back to the--
whoops-- if I go back to the API--
come back.
Come back.
And we look through the documentation.
I probably-- whoops.
We can see here, I could kind of like poke through this,
and it's probably going to give me some information
like, it's by zip code.
I'm looking.
Pause this video.
OK, actually, let's just be better about this.
Parameters, min, max, format--
look at this.
Format-- Units Format.
Let's click on this.
Units equal-- there we go.
So I can see here, here are some exam-- like,
you know, this is really-- this is your life.
Welcome to your life now if you want to do this stuff.
You got to look through this stuff and figure it out,
and I found that units equals metric.
I assume that's going to give me the information in Celsius.
Let's be metric today.
I feel like being metric.
So I can add to this particular URL.
I can say &units=metric.
And I'm going to refresh the page,
and you can see now I've got the temperature is 13.57 Celsius.
So this is get doing-- this is working better for us.
So now I'm just back in that scenario.
Like, let's say I want to draw something onto the screen based
on the current temperature.
So all I need to do now--
now that I've worked this out in the browser, I have grabbed--
I have this particular URL.
I can go into my code.
I'm going to open up my P5 sketch now, and I can say,
load JSON, that long URL, got data,
and now I'm going to do that thing where
I write the function got data, give it--
and then just say, print line data,
just to see that it works, or to discover
that maybe what I need is JSONP Let's see if it works.
It worked.
So this is a case where I don't need JSONP.
If I didn't see anything down there, I'd probably add JSONP.
And now I might say something like, var weather, and say,
like, when I get the data, weather=data.
And then here, I might say, if weather.
Now I can draw some stuff based on that weather.
So let's pick something that I want to do.
Let's say I want to draw one circle based
on the temperature and one circle based on the humidity.
It's my object.main.temp or my object.main.humidity.
So I could say, ellipse at 50, 100,
and then weather.main.temp as the piece
of data that's going to be the size
of this particular ellipse.
And then I'll draw another one.
That is just humidity, weather.main.humidity.
And we can see how that--
oops.
And let me--
I kind of over-- let me put that-- let
me make that canvas a little bit bigger and put this at 100.
We're going to put this at 300, and we can run this again.
And we can see, look at this.
This particular circle is being drawn with the temperature,
and that second circle is being drawn with the humidity.
So again, I've done a completely trivial result.
It's not particularly interesting.
I'm only getting this exact piece of data
from the weather in London, so I'm
going to stop this video now, because in the next video,
I want to look at how I might form a query string, how
I might allow the user to type in a city,
and then show the weather back for that city,
or click on a link or something like that.
That's what I'll do in the next video.
But for you, for your exercise is sign up
for Open Weather Map or another API.
Try to load that data.
Try to see if you need an API key.
Try to draw something based on that data.
And if you can make it a bit more flexible, like you could--
maybe the API call happens multiple times
for different cities.
Try-- eh, that's a little-- that might be a little bit tricky,
but see what else you can sort of imagine and do
with this basic idea.
And hopefully, this was helpful to you
with the sort of very basics of beginning steps
of starting to work with APIs.
So thanks for watching, and I've got a lot more data
and video data and API videos that I intend to make with--
I've made a bunch today that you're seeing now.
And if you're watching this in the future,
you'll see the next one.
But you're actually watching this right now.
The next ones will be coming soon,
probably next week OK, thanks very much.
And I'm going to hit Stop on record goodbye.