In this video, what I want to look at
is how you can take user input from a user
and pass that user input to an API query, get some data,
have the data come back into your program,
and visualize something on the screen.
So, this is an example that I built
in the previous video, which I'll link to below,
and what this example is doing is
it's querying an API called Open Weather Map.
It's sending a city.
The city that it's sending, you can see right there, is London,
and then it gets back some data about London.
What's the current temperature, what's the current humidity?
And in this example, I'm pulling that data out
into two variables and drawing two circles on the screen.
So first I've got to admit something,
which is that this is perhaps the least visually
interesting data visualization anybody has ever done.
But I'm making--
I don't have a visual bone, but I'm
demonstrating the technique.
So what you would do, hopefully, with this technique is thinking
of a new way of presenting information via weather,
or doing some type of animation, there's lots of possibilities.
But what I want to show you here is,
no matter how many times I run this,
it's always just going to query the API, boom, as
soon as the program starts, and then
it's going to get that weather from London,
and it's never going to query the API again.
So how do we make something that when the user enters a city,
that we get that--
then we query the API to show the information?
The user could then enter another city,
we'd get that information, query the API again.
So how can we have queried the API over time
while the program is running?
How do we think about it as a sequence of events?
And how do we tie that to drawing?
We, being me right now, and then you.
I got this thing about pronouns; it's
really like a problem that's in my head all the time.
I can only think about what pronoun I use.
But a link to something in the description will [INAUDIBLE]
why I think about that all the time.
OK, so let's make that happen.
So first of all, I need somewhere to get user input.
So right now, what this actually is
is a webpage just with this canvas on it.
So what I would like to do is add to the webpage something
where the user could type in some--
type in a city.
So guess what?
I'm going to add--
there is an HTML page associated with this JavaScript code;
it's the page that's loading this code.
So I'm going to go there first.
So in this P5JS editor, I'm going to hit the Settings
button and say, "show sidebar."
And there's a bunch extra stuff in here
that I'm not using because this was built,
and I'm going to go to this index, that HTML file.
And now, in the HTML body, what I want to do is add paragraph,
and then I'm going to add an input.
Can you see this?
I'm going to add an input field.
And I'm going to give it an ID; we'll call it, city.
And I'll put London in there, and I'll say, "city, colon."
So now, what I've added is just some HTML that on the page,
I want to see a field that a user could type something into.
And if we run this, you can see, there it is, oops.
And by the way, so I did that incorrectly.
Look at this.
So what I wanted to do--
well, if we look back at that window--
this was going so well until I got confused.
Look what's here.
What I wanted to do is, I wanted to have the word
London populate that text input field automatically,
and I thought, I don't know how to do this,
but sometimes it works this way.
I could just create this HTML input element
and put London in the middle.
But I forgot that the text that is in the text input element
is actually its value; value being an attribute of this HTML
element.
So if I want to do that, I just need to say,
"value equals London."
So now, if I fix that, and let me make this a little bit wider
so you can kind of see it, and I run this again, you can see,
there we go.
So I now have this text input box
at the top with the word London in it.
OK, we're getting somewhere.
Now, maybe I should also add, very briefly, I'll
put a line break, and then I'm going
to add a button with an ID called, Submit, and I'll say,
"Submit."
So now, I've also added an HTML element, a button.
So I have a text input element, pre-populated with London,
and I have a button.
So when I press that button, I'm going
to ask the API to give me the weather for whatever city
is in that field.
Excellent.
OK, so let's look at this, run this,
you can see-- there we go.
Now, I could do a better job like styling this and putting
line breaks in and that sort of thing,
but the point here is that I could do this,
and then I could type New York.
And I want to see what's in the canvas, what's
in the drawing change based on that current weather.
So how do we do that?
I'm excited.
Are you excited?
I don't know.
You shouldn't be as excited, I'm a little bit excitable, .
It's a bit of a problem; it gives me
a lot of anxiety in life, but I'm doing well today,
and I'm happy to talk about this with you.
OK, so let's first--
to answer this question, we have to look at something.
We have to look at this URL.
Look at this URL, it's a long thing.
I figured it out in the last video that I got.
I have a path to the API, I had some weather,
I have a question mark, q equals London, that's
the city app ID, that's my API key, units equal metric,
that's giving me the information in Celsius, right?
So how do we--
what do we need to do?
And to figure this out, I'm going
to come over here to my trusty friend, the whiteboard.
Hi, trusty friend, the whiteboard.
And let's think about this URL.
So most APIs, if you're making an API query,
it's very similar to typing a URL into the browser.
In fact, if I pasted that URL into the browser,
we are going to see the data associated with it.
I kind of wish I was doing that right now.
Let's do that for a second.
I'll come back to the whiteboard.
So let me go over here, and I'm going to copy this whole thing.
I'm going to go into Chrome, and I'm
going to paste it in up here, and I'm going to look and see.
Look, here's the data coming in.
And you can see that up here is the city.
So even if I just, in the browser up here, if I just
change that to New York, for example, you can see, aha,
now I have the weather associated
with New York, which the temperature is
about 18 degrees Celsius.
That's about right; it's actually quite a beautiful day.
The sun was shining, I don't know why,
inside, talking to a camera all by myself.
I make the same stupid joke in all my videos
about how I'm talking to a camera by myself,
but it is true.
OK, so that's what I'm doing.
OK, so now you can see, the way that you could
get a different city, I could--
over here, I could type Tokyo, and I'm going
to get the weather for Tokyo.
The way that I get the data from a different city
is to change the URL.
So somehow, I'm able to do that manually in the browser.
Somehow, I need to figure out a way of doing that in code.
And the reason why I was coming over here is--
was I not-- no, I was here.
Was I in the right place the whole time missing London?
Somebody tell me in the chat.
Hopefully, I record.
I'll have to fix this video if--
no, I'm over-- this is like Charlie Chaplin, like, duh,
duh, duh, duh, duh.
Someone play it, download this, edit this and that,
add some music to it.
Yeah, I'm not like Charlie Chaplin.
I wish I was like Charlie Chaplin.
That would be good.
OK, so all right.
So how do we do this?
I don't know.
This video, I kind of want to rerecord this video.
So in my code, there is a URL.
And it's one long string.
It starts with HTTP, it has like openweathermapof blah blah
blah blah blah blah.
So somehow we have to figure out the way
to do this is to piece together the URL from its components,
one of which happens to be dynamic, that's happening
with input from the user.
So for example, one way that I could think about doing this
is, I could say, "var api equals http://openweath
ermap.org/weather?
So this is the beginning of the API query.
Then, I might have another variable called, city,
which I say-- these are strings--
which I say is London.
Then I might have another variable, where I say something
like, api key equals, you know, my crazy API key,
and then, when I want to make the actual URL, which
is the actual URL that I will send to the API, then,
all I need to do is say, "I want to have the api plus the city
plus the api key," right?
Remember, the plus symbol with text--
2 plus 2 equals 4, but the string "two"
plus the string "two"--
this is actually a valid use of air quotes, by the way.
Usually air quotes are just kind of an obnoxious thing,
in general, but I feel like, if you're
trying to indicate a string, this is like a time in my life
where I'm allowed to use air quotes; now I feel ridiculous.
But the "two" in quotes plus "two" in quotes is 22.
"2" plus "2" is "22," not 22, but 2 2.
So if this is 2 2, like a thing that you
wear when you're doing ballet.
So this-- I'm trying much too hard
to be more interesting when we talk about this.
It's not going well; it feels forced today.
So this is the way that you can put together
the pieces of an API call as a URL
by having them in components.
The whole reason I'm talking about this
is because now this one can be dynamic.
So if "city" is not a hardcoded value,
it's coming from the user, and every time we
want to query the API, this always stays the same,
this always stays the same, this is the thing that changes.
So let's go see if we can add that to the code
and make this work.
I'm over here now.
OK, so coming back to the program--
let me minimize this--
coming back to the program, we can look now
at the components of this URL.
So let's say what I want is-- all the way up to here
is going to be kind of like the first part.
So I'm just going to call this the API,
and maybe, I'll call this the API path.
So it's sort of like the path of the API.
Let's just call it API.
Then, I'm going to make a variable called, city,
and I'm going to make that London.
Then, I'm going to make a variable called, api key,
and it's going to be this whole thing.
And then, I'm going to make a variable called, units,
and add this.
So you can see now-- and I think if I
make this a little bit wider, unfortunately, it's
sort of hard to fit everything on, but now I've got it.
I've got it.
You can see now-- what do I have?
I have some weird warnings here.
Missing a semicolon somewhere.
I don't see my--
oh, you know what I did is I used a double quote
and a single quote.
That'll fix things up.
OK, so you can see now that I broke the API
call into its parts.
So all of these things, all of these things
are not going to-- the API key and units are not
going to change.
I always want to query open weather map,
I always want it in metric, and I always have this API key.
Now, of course, your scenario might
be different, but for this particular scenario,
the only thing that changes is the city.
So now, when I want to load the data, I would say,
"var URL equals api plus city plus apiKey plus units.
And now, we can see-- let's see, let's just
make sure this still works as before.
It still works as before.
So instead of having the full API call as one long string,
I now have it in pieces.
And we could see, if I changed this to do New York,
now I'm seeing the New York weather.
You're just going to have to trust
that that's the right values again because this
is my pathetic little--
I'm just drawing the temperature and the humidity
as circles on the screen.
OK, so we're getting somewhere, though, because now,
I can move this, right?
This API call is happening in Setup, only in Setup.
Where do I want it to happen now?
If we look at this webpage that I've made,
I want that API call to happen when I click the Submit button.
So how do I make that happen?
I need two steps.
One, I need access to that DOM element.
I need to select that DOM element.
Then, I also need to attach a mouse pressed event
to that DOM element.
So let's add those two things to this program.
I'm going to say, "var button equals select, Submit."
So if you remember, in the HTML page,
the button has an ID "submit."
So the ID is a way that I can select that element in my code
and do things to it.
So now, in my code, as long as I select by the button's ID
submit, I can now say, "button.mousePressed(askfor)--
but I don't like-- (ask)--
(weatherask)-- I don't know.
You think of a better--
I'm so bad at function names.
You think of a better function name than me.
But the event that I want is weather ask.
So now, I can take this and I can write a function called,
weatherAsk, and I can paste that in there, and oops,
I need two parentheses.
And by the way, I'm kind of standing
in front of my code, which is the thing that always happens.
So if I move this over, that'll help you.
So now, I selected the button, when I press the button,
call weatherAsk-- when I call weatherAsk,
ask for the weather based on this URL
that I've made of all these components from the API call.
Now run this, and every time I hit Submit, I get that weather.
Now notice, every time I hit Submit, it's the same thing.
Why?
Because city is still hardcoded as New York.
But now, we can do something really exciting.
That's just a variable, right?
Why not get the value of what?
This text input field.
Why not get what's in that text input field
and store that in that particular variable?
This is going to make things a really, really great.
OK, so here we go.
So first of all, I need a variable called,
input, and I need to also select that input.
Input equals select.
Now, I don't remember what ID I gave it.
I gave it an ID, city.
So now, I need to say, "select city."
And then, what am I doing here?
Instead of city being hardcoded as New York,
I can overwrite-- you know, we actually don't even
need this variable anymore, honestly,
because we don't want to hardcode the city,
so I can take that out and actually, instead, I
can make it a separate variable.
But all I need to do now is put input, not value here.
So because I've gotten that text input element there,
I can get the value and add that to my API call.
So, again, the path to the API doesn't change,
my API key doesn't change, I always want it in metric units,
but I want the city, that piece of it,
to be from that text input field.
And here we go, it's running, I can see it submit,
and I've got London.
And let's try some other cities like Tokyo, Los Angeles,
you can see-- ooh, it's not very humid in Los Angeles--
New York, Toronto.
OK, so you get it.
It works.
Oh, that's great that it works.
So this is a nice thing to practice with APIs.
This is kind of one obvious way of doing things.
You take some from the-- you take some information
from the user and you send that to the API,
you get some data back, you display the data
back to the user.
So I might suggest, what else could you imagine here?
Could you create a checkbox and whether the checkbox
is checked, when it's checked, you would get Celsius,
when it's unchecked you would get Fahrenheit?
So that would be one thing to try
to add to this as an exercise, I think,
if you're looking for a technical exercise to do.
Mostly, I would say, what sort of data is in there?
What more interesting way can you display the data?
Like, if it's raining, can you make it rain in the canvas?
Again, these are kind of obvious literal visual representations
of the data, but I think you might also be
able to think more creatively.
And what I would like to do now--
I think that kind of covers the whole basis.
There's actually a missing piece here,
I just realized, which is that we've done two things.
One, we've queried the API the moment
the program runs, and then, we're done.
Now we've done the second thing.
Anytime the user performs an action like pressing a button,
we query the API and we get data back.
A third thing would be, have the program automatically
query the API every so often.
And this is something you want to do if you have
data that's changing a lot.
And there's an example of an API that gives you the latitude
longitude of the International Space Station,
where it is above the earth, and so,
that's an API that the space station is moving,
I think, continuously, that you get different data
all the time.
So I would also like to do it.
Maybe I'll do that in the next videos,
look at how you query an API over-- how
do you set to do it every 100 milliseconds or every one
second or every 30 seconds and just
have that happen in the background
while an animation is continuing?
So I'll take a look at that in the next video.
And the other things I want to do in some
these future videos is just look at other APIs.
The New York Times is on my list,
Wordnik is on my list, that sort of thing.
So this ended up being a very long video,
it was so short for a while, but I
had this section in the middle where I just wasn't sure
if I was in the right place and I sort of rambling
about wearing a tutu.
If you're still watching this video right now,
hashtag Schiffman tutu or something to let
me know you were watching because no one's going
to be at 18 minutes in this video, I swear.
OK, I think that's a thing that maybe I'll do at the end,
hashtag Schiffman air quotes.
I think I need to put Schiffman in there maybe--
just stop watching already.
Hopefully, you live somewhere where it's a beautiful day.
And even it's not a beautiful day, being outside is nice.
OK, even my mouse went to sleep, that's
how long I've been recording.