(ding) - Hello,
welcome to a followup Coding Challenge:
Quick Draw Again, thingamabob,
Quick Draw API Web Component edition.
So, previously in a Coding Challenge, I downloaded
a large data file from the Google Quick Draw data set.
I talked about what the Google Quick Draw data set is.
It's just a collection of millions and millions
of these doodles that people made playing
the Google Quick Draw game, and I created a node server
locally on my computer to open that very large data file,
and pass information about the drawings
to a JavaScript program that would read that information
and then replay the drawings in a canvas.
Basically, almost to the day that I released
that Coding Challenge, Google came out with something new
called the Quick Draw component,
and what the Quick Draw web component is,
it allows you to actually, using markup,
and importing a JavaScript file,
just actually embed Quick Draw doodles in a web page.
I'm not going to do that in this video.
What I'm going to do is actually show you
how to use the API directly to pull the data
from the drawing yourself so that you can draw it
in a canvas.
So what I'm going to do, just to be clear,
I know that wasn't clear at all,
I'm going to do exactly what I did
in the previous Coding Challenge
but instead of downloading a very large data file
and spitting out my own node server,
I'm just going to ask the Google API itself for a drawing.
And then I'm going to go eat lunch.
I should probably go eat lunch now.
Maybe pizza is one or something.
Actually I'm not a big pizza eater,
but we'll pick some food themed drawing,
and just to be sure that it's actually working
to do it this way, I am going to do this
in the p5 web editor so that I can be sure
that you can be sure that I'm not secretly downloading
a big file, running a node server somewhere.
Why would I do that though?
Okay, so here's the thing, it's a bit confusing.
Because this is so new, this API is available,
it's out there, but it's a bit confusing to use it,
so the first thing you're going to want to do is go to
this GitHub repository quickdraw-component,
and then down here somewhere in here,
you're going to want to find this,
join the Quick Draw API Google group.
Now by the time you're watching this, this may have changed,
but I will hopefully keep the code up to date,
but maybe this sign up process will have changed.
So as soon as you go
to the Google Quick Draw API Google group, I joined,
you'll end up at this page, click join.
You'll need some sort of Google account.
Then you're going to want to go to your Google API dashboard.
So here I am,
I'm at console.developers.google.com/apis/dashboard,
there are a lot of APIs there that you could look at,
and what I'm going to do is now search for Quick Draw.
I made a project by accident, which I didn't mean to,
but this is what I'm looking for,
Quick, Draw! Data API private.
Now, this will not appear to you unless you join
that Google group,
so that's a little bit of the confusing thing,
at least at the time that I'm doing this today,
November something, 2018.
It's the 25th, 26th, something like that, all right.
So, I'm going to click here to,
and I need to make a project,
so I'm going to call this project...
So I want to first create a project, try to click enable,
I'm going to call this Coding Train Test, I'm going to hit create,
and then I'm going to go back and search again for Quick, Draw,
Quick comma Draw,
and I'm going to grab this here.
Okay (grunts).
Ah, here we are.
Somehow I made it to the Coding Train Test project.
You want to create a project and get to your Coding Train,
well you're not going to call it Coding Train,
get to your project page.
Now,
I'm going to find that API.
It takes a minute for the project to actually be created.
I think I was going too quickly there.
I'm going to go to Quick Draw data API, ah ha, there we go.
Now I'm on this page.
Now I'm going to click enable.
Okay, so now I have this API enabled.
The next thing that I want to do is go here under credentials
because I'm going to need an API key,
so I'm going to go here under credentials.
Here's my API key, fantastic.
So here's the thing, I am going to regenerate this API key
as soon as I finish this video so you won't be able
to use it, you'll have to create your own,
and I'm going to copy it very quickly just over here.
Now in my code, I'm just going to add it
at the top as a comment so I always remember it.
Okay, so here's the thing, I should mention
that this while you can use the API,
I'm going to do that right now,
if you're going to use this for a large project,
you might want to actually consider self hosting the API,
which is kind of what I did in the previous video,
but actually using Google's code,
which is probably much more robust
and has a lot more possibilities.
But once I have my API key,
all I need to do, I'm going to scroll down here
to API middleware, I just need to go to this particular URL.
I'm going to use the load json function in p5,
I'm going to paste this in here.
So now what I want to do is I want to say drawing category.
I know that cat is category, I'm going to say ID.
So I could ask for a very specific drawing,
but I think I can actually just say random
to get a random one and then get my API key,
and then, is animated, I don't want animated,
and format equals, I want it json.
We want to get that json, so let's see,
if I take this URL now...
(scoffs) Not found.
(buzz) (ding)
All right, I'm back.
So interestingly enough, even though the documentation says
ID required, ID (number) or "random,"
I thought this means I can actually type random
into the URL query string, but maybe not,
because now if I go back here,
and I just zoom in up here and get rid of id=random,
just start with key, I can see, there we go,
each time I do this,
I'm going to get a random cat drawing here in json.
So look at this.
Ah, lovely, all right, so, great, we're not using this API.
So I can go back here, I can go back to my code,
and I'm going to say a constant URL equals.
So I'm just going to save this,
and obviously I would want to do something more,
I could do so much here by I could actually form the URL
with a particular category, but cat, meow, agory,
but right now I am just going to keep that, and in setup,
I'm going to say load json URL,
I'm going to give it a callback, got cat,
I'm going to write this got cat function drawing,
and I'm just going to say console.log drawing,
so let's see that in p5,
if
I actually, and I'm going to get rid of the draw function,
if I've actually got, there we go, drawing.
So this looks like, there it is,
so you can see down here in the console,
all that data came in.
So all that data came in so I've got the cat,
and now, guess what, I can draw it, okay.
So, let's just make this 255 255.
I wonder if this is the simplified data.
Looking back at the documentation,
I just realized is animated, if I set that to true,
I will get the data back that actually has
the timing information related to how the user drew
the drawing down to the milliseconds,
but in my previous coding challenge,
I didn't bother to use, I just used this simplified data,
which is just the X and Y values
of the particular path
that the user drew,
and it also is reduced normalized
to 255 by 255 pixels square.
So I want to use the simplified data just to make
my life easier, 'cause as I mentioned,
I need to go get something to eat.
Is pizza one of the categories?
I guess I'll try pizza.
Yeah, looks like pizza came in as something.
So now what I'm going to do here is in got cat,
which I'm now going to call got pizza,
got pizza, what I'm going to do,
I really, I could just go to my previous code, do I dare?
Github.com/codingtrainwebsite,
and I'm going to go to Coding Challenges all the way down
to quick coding challenge 122, Quick Draw, sketch.js,
and this is the code right here
where I in draw, where I draw that particular pattern.
So I'm going to grab that, oh this is terrible.
Look at this.
Basically, actually, here's the thing,
this whole thing, there's no reason for me to rewrite this.
Just to prove that this works, this is the entire code,
and I am going to go back to my code.
I'm going to paste my entire thing in here.
The only thing I'm going to change is instead
of my own node server slash cat,
I am going to go to the particular URL.
There might be some slight differences here,
but let's see what happens.
Blocked by CORS.
(buzz) (grunts)
I didn't have the CORS problem before.
Hi, I'm back, and I'm moving very quickly,
because the reason it wasn't working wasn't my code,
wasn't some mistake I made, wasn't the dreaded CORS error,
it was that I exceeded my quota.
Now how could I possibly have exceeded my quota?
Because I certainly did not make
something like 19 thousand API requests
in the last few minutes, and in fact,
somebody watching this,
this is why we can't have nice things, people,
must have taken the API key.
So I have a different API key,
and because I talked for too long,
it probably also just got used,
but let's hope it's here in this sketch, I'm going to run it.
429 error.
(buzz) So let me at least show you
what the error is.
I thought this was a CORS error,
but it's actually the server responded with the error 429,
and 429 is an issue with the key, so I'm going to conquer this.
I'm going away, I'm going to generate a new key,
and then I'm going to immediately run it
for the first time live before anybody can possibly get it.
(ding) All right,
I'm going to conquer you, internet.
Thank you to meiamsome for the suggestion.
What I'm going to do, I already started doing this,
I'm going to create an input field, key input.
I'm going to say key input = create input
with nothing in it.
Let me, I'll put on auto refresh here,
and let me uncomment this out, okay.
So now,
we should see there's this input field,
so what I'm going to do now is I'm going to say
key input.attribute,
this is all the p5 dom library,
type is a password,
so what this means is anything that I type in here,
you can't see, and then when I call new cat,
I'm actually going to say,
I'm going to get the API key is key input.value,
so I'm going to get the input from the value.
(laughs) My brain is not speaking anymore.
I'm going to, yes, I'm going to get the API key from there,
and then I'm going to with,
what I did to this URL is I just left it
with key = blank at the end, so now,
I am going to say + API key,
so if the API key is in here,
if the API key is in here,
then,
what will happen is it will pull it from there.
You won't be able to see it,
it will pass into the, you won't need to do this,
you don't need to be crazy,
I'm just here trying to defeat the internet,
and unfortunately, I might have made a mistake, but hold on.
So I'm going to get rid of the screen behind me,
I'm going to go get my API key,
I'm going to put it in my clipboard,
I'm going to put this back,
I'm going to paste it in...
(tapping fingers)
Oh.
Syntax error, syntax error, what's going on?
(buzz) All right,
new cat is commented out, that was a problem.
I think what I want to also do is create a button
like start,
and then I'm going to say start
= create button,
start = create button, start,
and then I'm going to say start mouse pressed new cat,
so now,
now, I should, the sequence should be,
I'm going to win, this is going to work,
I'm going to paste my API key in there,
then I'm going to click the start button,
then I should start seeing my cats,
and it won't be cats, they'll be pizza,
because I'm going to go eat lunch, but probably just a salad.
Okay whew.
Here it comes again.
Disappear.
Quick, get my API key.
Then paste this in here.
You can see it again, now I'm going to hit start.
Ha.
(celebratory music)
Thank you very much.
I can get another pizza.
There we go, every time I press start, we'll get a pizza.
So anyway, you can see now, there was no point to this.
The whole point to this was that the exact same code I wrote
in the previous Coding Challenge,
I can now
run from anywhere by using
the official Quick Draw API from Google.
I might have to just come back and do this video again,
but it's going to exist in some form
'cause this was all too insane.
So I am going to take this away
so that nobody sees my key by accident,
and I will see you in a future Coding Challenge.
(imitating motor)
(upbeat music)