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. 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.
