Hi.
I'm going to try to make a video now
that uses the Giphy API with zero preparation.
I never Googled it, looked it.
I don't even know if I've ever looked at the Giphy website.
This is probably going to go down in flames.
But I'm going to give it a try anyway.
We're going to see in 15 minutes,
can I make a working code example
where I query the Giphy API and get some GIFs on the screen.
And you guys can, while I'm screwing stuff up,
can argue over whether I should say "gif" or "jiff."
Somebody tell me.
I have no idea.
So let me look for Giphy.
Giphy is a website.
If I go to their search for GIFs,
I'll search for my name, which is like the most
vain thing you can do.
Of course there's no GIFs with "Shiffman" in them.
"Rainbow," there we go.
Rainbow is good.
I've got some nice rainbow GIFs here.
I like this one.
This is a nice one.
You can see nice rainbow GIFs.
So there must be an API here.
Let me look for a Giphy API.
Ah, look at that.
I've got a GitHub link.
That's good news.
I've also got here a URL, API.giphy.com.
Let's start with that URL.
OK, so often a question that comes up when using an API
is, do you need to sign up?
Do you need a key?
I have no idea.
This is like-- this is exciting.
Somehow this is like, I don't know, I feel whatever.
OK, "Get Started, Giphy Search, Giphy Trending,
Giphy Roulette--" oh, these are other apps
that people have made.
Well, let's go to Get Started.
Oh, OK, I'm on the--
"Access and API keys, public beta key.
So the Giphy API is open to the public, a single public beta
key to let anyone try it out."
Well, all right, that sounds good to me.
So I'm going to use the public API in this demonstration.
Obviously, if you're going to do something more involved,
you'll want to get a--
I'm standing in front of the text--
you're going to want to get a production API key.
But I don't think I'd even get one.
OK, so I want to use that.
I'm going to go down, "Overview.
The Giphy API provides the following--"
and I'm standing in front of the text again, this is terrible--
let me-- maybe we can't.
Let me move this over, and let me make this a little bigger.
"The Giphy API provides the following JSON endpoints."
So I can ask for a random one.
Looks like a trending one.
I can get stickers, by id, one GIF by id.
So this is good.
So I'm just figuring out these are the kinds of things
that the API can give me.
I think search is probably a good place for us to start.
Random would also be a great place for us to start.
But again, like I mentioned, I'm very easily embarrassed,
and I'm worried about getting an embarrassing GIF.
But you know, I should not be worry--
I should just live in the moment where we are.
OK, so let's see if I can find--
so this is-- OK, so let's start piecing this together a little
bit.
So I'm going to open up actually just like Text Edit.
Actually you know, I'll go to p5.
And I'm going to make a new project.
I'm gonna close this New York Times one.
I'm gonna hit Save.
I'm going to call this Giphy API.
And I'm going to just give myself
some space at the top in comments, where I can start
pasting stuff in there that I might
need for working with the API.
So what I definitely need is this.
This is the URL to the API.
I'm also going to need this public key.
Let's save that there.
Now, "Search all Giphy GIFs for a word or phrase.
Punctuation will be stripped or ignored.
Use a plus or url encode for phrases."
Oh yeah, Ryan Gosling GIFs, that's going to be good.
That was weird.
I feel like that was weird, that I made a weird dance
and talked about Ryan Gosling.
I really should edit that out, but it's too late.
Apparently that just was like I was overcome by the name
Ryan Gosling.
Maybe we'll get some good eating--
isn't there like an eating cereal meme with Ryan?
Anyway, so this is good.
This is probably all I need, because it's
like giving me-- look at this-- it's giving me
all this wonderful information.
This is the path, so I need that.
I'm going to put that in here.
And then these are some of the things I need, like search q.
So every-- this is-- in case you've come here
from some strange place on the internet,
all of those, all of these, all of this list
here are parameters.
Parameters are name value pairs that get strung together,
like q = ryan + gosling.
And then limit is like how many results do I get.
The maximum is 100.
Well, if I'm getting GIFs about Ryan Gosling,
oh my god, the limit is--
is the sky is the limit, right?
Do you think I could say "limit = sky," and I would--
the sky.
OK, so I'm back.
And so anyway, there's more stuff there.
But I don't really need all that stuff.
All I need is to realize that I want to say things like q=
and I'll go back to rainbow.
I don't think I can handle Ryan Gosling.
It's too much Ryan.
It's too much for me.
I just can't handle it.
I'll be overwhelmed.
I'll be overcome.
I've really lost it here.
OK.
Oh, q=funny+cat, that would be a good one.
Anyway, and you can see API key.
So this is really all I need.
I'm done.
We're good.
So let's put these in some variables.
This is going to be great.
HTTP-- OK, var api = a string with the path, right.
I'll call this endpoint.
I don't even know if that's the right terminology.
But this is the thing that I know needs to go after the API.
And honestly, that's silly that I'm making this into two
different variables, I guess.
I'll just put this one up here, because I'm just
using the search.
So I need to make this a little bit bigger.
So now I have a URL, which is the URL to that API.
I have an API key, which is-- oh camera.
Come back to me, camera.
I have a key, which is this.
And I'm going to put that over here.
Now I forget, what did it need?
It needs to look like this.
&, ampersand, api_key=.
So in my code, I'm actually going to say and--
no, I'm going to say, &api_key= and then I'm going to have
a query be "&q=rainbow."
And by the way this right here, a query,
a set of-- a query string always begins with the question mark.
So it's api_key= something, &q= something, &limit= something.
But all of that begins with a question mark.
So this would be the full API.
And I've kind of broken my own cardinal rule here,
where I started writing code before I even
checked to see if I was getting results in the browser.
Let's go back to the browser here.
And I need all three of these pieces.
I need this piece--
let me open a new tab-- that piece, followed by this piece,
followed by this piece.
And I'm going to hit Enter.
Oh, awesome.
So now it looks like I got some data,
and I got a url, a bitly_url, an embed_url, source.
The thing that I'm looking for is the actual GIF file.
This is like an mp4, webp.
Ah, url, this one I think will do.
Because I think this is like the link that I want.
Like I want to get something that I can display quickly
in the browser.
And I'm sure I could make any of this stuff work.
I could embed the like Giphy embed,
or I could get the original source as an mp4 file.
But what I want is something that's
like pointing to an actual GIF file.
If I copy that address, and paste it up here
in the browser, we can see that, oh yes, that I'm getting-- oh,
this is--
wow.
I never expected to get such a wonderful rainbow GIF URL.
OK.
You-- blah, blah, blah, blah, blah, blah.
Suddenly, I was so overcome that I lost the ability to speak.
All right.
So this is good.
This is good.
So now I got to go back.
I got to go back, and I've got to say create--
noCanvas.
I feel like I'm in a hurry all of a sudden.
I want to make that url, which is api + apiKey + query.
And ultimately again, I don't want "rainbow"
to be hard-coded into my code.
I want to get that from the user input.
But I might-- you know, I did that
in a couple of different previous videos.
You could almost think of that as an exercise for yourself.
But now I'm going to say loadJSON (url, gotData);.
So again, the loadJSON(); function is a p5.js function
where I give a URL from an API that's going to give me back
JSON.
I have a callback, gotData.
So if I write that gotData function,
and I give it an argument--
I've said this in like all the videos I've made today--
that (data) variable gets filled with the data from the API.
And I just want to see first, again, does this even work?
I'll add a println(data); in there, and I'm going to Run.
And I can see, look, OK so data came in there.
That's a good sign.
So now I've got to figure out-- again, this is that thing,
this is hard--
I've got to figure out, I've got to unpack this JSON.
So first, one thing I can notice is
that data-- this is going to be awkward,
because I'm going to have this moment where I'm saying
data.data, because the first key--
the first property of this object
that came back from Giphy is data.
So then, what is data?
It's an array, and each element of the array I'm guessing,
I'm assuming, is one particular GIF with lots
of information about that.
And what I want is index 0 images.orginal.url.
I guess I could get like different sizes and stuff,
but let's go with data index 0.images.original.url.
I think, was that right?
I'm having trouble getting all the way to the right here.
Yep, that's right.
I think that's right.
OK.
So let's give that a try.
Did that make sense?
So I want to say (data.data index 0.images.original.url).
Could that possibly be right?
Let's go back and look at that again,
data.data.images.original.url.
Usually I have like a whiteboard really handy,
which I have one over there.
I think that's right.
Let's just run it and have some faith.
Look at that.
That looks like a URL that makes sense.
If I click it, I see it.
Oh, good.
Now we're talking.
So guess what?
Guess what p5 has for you?
Oh, this camera's off.
One of the functions in the p5 DOM library is a function
called createImg().
Now there's a lot of different ways of working
with images in the browser.
You can load them from a file.
You can draw them in a canvas.
You can mess with their pixels.
What this particular function does
is it makes an HTML element that looks like this, right?
Now, there's lots of different attributes and ways
that you can configure and style this particular element.
But if you give it an argument, that's
what becomes the source, the source of that particular image
tag.
So what I want to do is take the path to my Giphy thing,
and then create an element that will appear on the screen--
on the web page.
So what I should be able to do is
just say createImg instead of println
with this particular URL.
I kind of want to put just like--
I'm going to just call this (giphy),
just so it doesn't say like data.data.
I think that's confusing to look at.
So gotData, fill the data with giphy.
The lighting in here changed.
And now let's run this, and see what happens.
Look, and there, I have my rainbow.
Now here's the thing.
Giphy, it gave me more than just one image, right?
So this is pretty exciting.
What I can do is now say for var i = 0; i is less than--
what's the array here, giphy.data index 0,
giphy.data.length, i++ and I can say index i now.
So I'm going to make an image element for every single image
that I've gotten from Giphy.
And we can see-- look at this, I've got this page,
they're all there, all of my--
this is quite the--
Although this is a good one.
There we go.
That is the-- I'm just going to like never make a video again,
because this is like the perfect thing
to ever have in one of my videos.
So anyway, you can see.
Boy this is fun.
There's lots of things you could probably play with.
So what do you do with this?
I don't know.
Maybe you get take user input.
Maybe you arrange them in a different way.
I don't know.
Maybe it just makes you happy to look at GIFs, I guess.
It's making me happy.
You know, we really should do the Ryan Gosling thing,
I think, before this video ends.
But you know, that would be the--
I don't even know how to spell Ryan Gosling.
Let's see if that's right.
So you can see, here we go, Ryan Gosling, there you are.
And so, you know, this is the thing,
like I'm changing the word.
What could you do with this?
Make something interesting with this.
Play around with this.
Send me an email or a tweet or write in the comments.
I would love to know what you do with this example.
Hopefully this helped you with yet another kind of API
you can use.
Now here's the thing, there was a--
we've got to have a chat, you and me,
because I've been doing a lot of these videos
about working with APIs.
And I kind of, you know, one thing I haven't really showed
you is what if you need to make like a whole lot of APIs
calls all at once.
There's some issues that can come up.
You know, you've got like-- you're creating
a lot of callbacks all at once.
How do you know which callbacks goes with which API call?
You might be generating a lot of DOM elements all ones
that could lock up your browser.
So I do need--
there's some pitfalls here, and I
think I need to make a video soon that just sort of covers
those scenarios.
And there's this thing called a JavaScript closure.
What do you think the chances are there are Giphys associated
with the word "closure"?
This is like high risk here.
I don't know what this--
This is not working for me.
But anyway, so I was hoping I would get something
interesting to look at.
Cut that out.
So I want to make a video that sort of covers this topic,
and maybe we'll look at it even in the context of Giphy, which
seemed to be a nice API to use.
OK, so this was a totally off the cuff thing that I did.
Hopefully it worked, and you got something out of it.
And I've now made three videos today.
It's two o'clock, which is the time
that I said I was going to end.
I mean the recording [INAUDIBLE]..
Never mind, you don't care about the time.
Shiffman, Ryan Gosling, hashtag rainbow heart thing,
I don't know.
That's too long.
You figure out what that is.
Wake up, mouse.
Goodbye, and I'll see you soon.