Tip:
Highlight text to annotate it
X
IDO GREEN: So hello, and welcome to another episode of
GDL-IL, GDL Israel.
Today we're going to speak about Google APIs, how easy is
it to work with them and consume them, both from the
client and the server.
We have a few examples that show you the power of working
with Google APIs, with JavaScript, of course, on the
client side.
And then on the server side, I choose to show some simple
examples in PHP because it's the recent addition to Google
App Engine.
So I guess people will want to see how to leverage.
So today we don't have any slides.
We just have some codes.
And let me share with you my screen so we'll be able to
flip quickly between the browser and the text editor.
So let's make this one, and let's see first how we're
going to tackle it.
So we'll start on the server side.
And to start on the server side, basically you need to go
and download the library that enable your encapsulating for
you of all the rich functionality that you have in
Google APIs.
It's one line, and as you can see here, you just need to
copy this one--
it's curl--
and get it.
Once you get it, actually if you click on this link, it
will download it for you immediately.
You unzip it, of course, tar it, and then you have a quite
nice set of examples that's showing you the power of
different APIs that you could leverage out of the vast
enormous richness of different APIs that Google
allows you to consume.
Another important note is the console.
So on the console--
let's go here to the GDL example that I started.
When you're just starting with the console, you basically
need to create yourself an OAuth 2.0 client ID.
And you need to do it because lots of Google services and I
guess if you will create with Google Cloud Endpoint service
for you, you'll want to make sure that it's authenticated.
And the easiest way to do is just come here, to click on
the OAuth 2.0 button, give your product a name.
In our case, it will be [AUDIO OUT].
And you probably will want to give here some sort of a logo,
a nice one, and Page URL [AUDIO OUT]
all the projects, and then we're clicking yes.
You could choose if it's going to be a web application or a
service, where basically you'll want for your
application to make the calls, or an installed application.
So for native apps in Android and iOS or on Windows, Linux,
or Mac, you'll probably want to choose this option.
In our option, let's stick with web application, but
please remember that you could also get it as a service, and
then basically you don't need any other information.
If you're going with web application, one of the
important things is that you need to enter your endpoint of
your application.
And in our case just to make things [AUDIO OUT], let's keep
with the local host.
And then you'll have the redirect, of course, that
basically we get the confirmation after Google has
authenticated your user or your call and given you a
token to continue.
In my case, you could see that, quite quickly, set it to
be localauth and oauthcallback.
And of course, you could edit those settings and add a few
other redirects URL to other environments that you have.
So in most of the cases, you'd probably want to put the QI
environment, maybe the staging environment.
And then hopefully, on production, you won't use the
same keys, You will create a new one.
After we created this, we're going with services.
And for the services, you have here a huge richness of
different services that you could [INAUDIBLE].
Some of them are completely free.
Some of them are with just a bit of payment per usage.
But it's all very detailed right here in the console.
And you could see quite quickly how many you have
active, how many you have inactive.
And just to show you how you play with it, so let's say
that I want to work with--
I don't know-- the calendar API.
So I'll activate it.
Of course, I need to confirm the term of service.
And once I am accepting it, I have here now one active
service that I could run on this specific service.
Now, if I want to start and see what I could do with this
service, there's a nice question mark here.
And If I'll click and try it out, immediately I'm being
redirected, and I can start and see what this API is
exposing to me.
So this is part basically of the discovery
mechanism that we have.
And if you remember during my talk in the last I/O, we spoke
about Cloud Endpoint and how you could leverage this system
in creating your own API and enjoying this discovery
mechanism to make your work more productive.
So after we do all this, basically we have a few other
things that we could run with.
Here you have a very nice page that's letting you check which
services you authorized.
And once you're working with development, you might want to
revoke access to some of the services so you could tests
again and again the authentication phase and make
sure that you're doing the right things.
If you want to play with a certain API, one great way to
work with the API on the web without coding even one line
is just to go to developers.google.com and go
here on the API Explorer.
And in our case, I choose the YouTube data API because this
is the example that I prepared.
And here you can see that--
let's say that I want to get from YouTube the idea in the
snippet per video.
Then I want the max results to be--
I don't know--
9.
And the query that I'll put, it could be
ski, it could be snowboard.
And once I'm executing it, I'm getting here the response.
I could take basically these and just play in other
environment on it.
But here you could say that I got 200, so
everything is cool.
And here I'm getting a nice JSON object that basically is
describing all the result sets.
And you could see that I'm getting the videos.
I'm getting the thumbnails to the videos, the ID, everything
that I basically requested.
Now, if we look at how this example looked on PHP, on PHP,
it will be quite similar in a lot of sense.
So we'll come here, and it might be a bit crowded, but I
hope that you can see here.
Basically we have a simple page that's letting us query a
YouTube API.
We want to get from the user a search term and then probably
to limit the result.
And that's it in the bottom for the search action.
What I'm fetching here is two libraries, is two files that
actually are exposing and encapsulating YouTube service.
So it's first the Google client, so just I'll have all
the basic functionality and then the YouTube itself.
Once I'm doing that, I have here, of course,
the developer key.
And now I'm just calling the constructor of Google Client
and working with it.
So I'm setting the developer key, and I'm calling with this
client to YouTube service.
After I do this exactly like I showed you in the Explorer
API, I'm basically calling YouTube Search searchlist.
And you can see here in the Explorer API, that it's
exactly the same endpoint.
So this one is exactly like this one.
And again, very similar to what we did in the example on
the API Explorer, I'm going, and I'm concentrating on the
idea in the snippet.
I want to pass the query and, of course, the max results, so
this is my payload.
And now all I'm doing is going on this nice loop and making
sure that the result set-- which is basically separated
into three buckets.
One is the videos and the channels and then the playlist
we'll bring back.
And in my body, I will just make sure that I'm
constructing those lists.
So I'm using the ul and the ly tags just to
construct it in here.
Very simple.
I just embedded it here, and that's it.
Let's look how it's working on my local environment.
So let's close now with the Dev tool.
We'll look at it later.
So if I'm searching for--
I don't know.
I'm limiting it to 10 results.
When I'm clicking search, basically it's going to
YouTube, returning.
And as you can see here, basically I just added the
image as well.
So unlike the previous example, we're getting more
holistic search results, if you will, so it's a bit more
informative.
Exactly like you saw before it here on the API Explorer, I'm
just fetching that elements from the result sets and just
presenting them on the page itself.
Now, as you all know, we have a bunch of client libraries
that are actually letting you leverage Google APIs.
On the web, you might use the JavaScript library, and I'll
show you in a minute an example how easy and smooth it
is to work with.
But if you're working with JavaScript on the server side,
we have a nice library for Node.js, so please feel free
to check it out.
By the way, all the links are here.
So if you'll go to pictures-app.appspot.com,
you'll be able to look at the slides that are from that
previous I/O talk, but also, on slide 25, as you can see
here, all the links for all the different libraries and
languages that you could leverage.
So for the ones that are building native clients, both
for iOS and Android, we have nice libraries.
And of course, on the server side, you
have a bunch of languages.
And actually we have even for .NET and GWT and many others.
So let's close that and see how we could run an
authentication.
So in this specific example, let's first look at a code,
and then we'll look at a live example.
I want to authenticate myself and get some
information from G+.
In our case, probably it will be the image and the email.
But as you can imagine, you could run and do a lot of more
things once you get the token, the handle of your user.
This is a very short example, and as always in JavaScript,
let's jump to the end.
And first and foremost, we're calling Google client library,
the JavaScript client library.
And we're going to get here a callback.
So on load, we'll handle basically the callback and see
what we're doing.
So we're setting, of course, the client ID and some
boilerplate data like the API key and the scope.
And then when we're coming here to
handle the client load.
We're setting those API keys, and we just want to call
immediately the check authentication, so we did it
with set timeout.
After we're doing it, we're just going to GAPI--
Google API.
And this endpoint on the
authentication we want to authorize.
The authorize will be done with the client ID, the scope.
And of course, we want to do it immediately.
And then we're giving it another callback to just
handle the result set that we're getting back.
In our case, it's this one.
And when we're getting the authentication, we want to do
several things.
So first, if everything is OK and we don't have any error,
let's just go here and hide the Authorize button so the
user won't be confused.
And in a real world case, you might want at this stage to
make sure that you're confirming and you're showing
the user that he or she are logged in.
It might be through a nice image of the cells or any
other nice bold way to show that they are now logged in
and authenticated.
And now we're making the API call.
Of course, on the opposite direction, we do want to make
sure that the button is visible, like you've seen
here, so people could authorize themselves and log
in or sign in to our app.
Once we are handling the authentication, we want
basically to make the API call.
We're going to G+ API.
We're controlling the version.
So in our case here, it would be d1.
And basically what I want to fetch from people is just me.
And I'm taking the image of myself and just putting it on
the page itself.
Now let's work on the live example and see how it does.
So as you can see here, I'm being authenticated so it's
immediately popping up the request for permission dialog.
In this case, you could see that I used the Chrome
extension book examples, just because I have it handy.
And hopefully in the near future, you'll be able to see
some live relevant examples to Chrome extensions.
But I'm allowing access, and then basically I've been
redirected again to this page.
And as you can see, I have now my photo and my title here.
So this is one example that's showing you the power
[INAUDIBLE].
And now let's see another simple example
that's showing you.
So I have here another page, which is basically the
[INAUDIBLE] or the sample that you're getting with Google API
PHP client examples.
And here basically we'll do exactly the same, but instead
of JavaScript, we'll just leverage PHP.
So I'm going to the directory of the example, UserInfo.
And after I log out, before the session, of course, I want
now to authenticate myself.
So again I'll get this nice authorization dialog.
And after I'm doing it, and as you can see here it was in
Hebrew, I'm getting again in this case my email and photo.
How would the code look like?
Let's jump real quick and let's remove
this one for a second.
Yeah, so here, yeah.
So again I'm calling the Google OAuth 2.0 service.
And after we're setting the Google client and giving it a
bunch of IDs-- and by the way, the client ID, the developer
key and everything else could be found here on your API
access tab.
So if you'll click on it, basically all the relevant
information that you need to copy/paste, like the client
ID, the client secret, and the API key, are all here.
So just remember API's console,
and this is the location.
So once you're doing that, basically we're calling the
OAuth service with our client.
And we are pressing the code, and we want to fetch token.
The token is something that we'll carry with us so we'll
be able to confirm again and again if we need to the
service itself.
And since in this case already at the beginning if we're
getting the token here, then we just need to go do the
redirect, and we're all good.
If not, we want to set the token, make sure that if the
user is clicking on log out, we're, of course,
revoking the token.
And here we're just calling the client, and we want to
fetch the token.
So after we're getting it and this is returning as true
because we have the token in the client, we're basically
going to the OAuth service.
And with the user info object, we want to get the
information.
And as you saw in my case, it was-- in the PHP case, it was
the email and the picture, the profile picture.
And what we did with this is just we put it on the page so
we'd be able to see it.
Here, last but not least, we, of course, want to save in our
SessionToken or any other place that you find convenient
and safe for your app, the token itself, so you will able
to leverage it and use it later on in your app.
And this is all we have here.
So the bit HTML that we have later on is just to make sure
that we have those two cases of connect, or logged in, and
the logged out.
So this, I guess, was a very short
introduction to Google APIs.
Next week or in the near future, I'll try to show you
how you could leverage those type of APIs when competing
for your services.
And that's with Google Could Endpoint basically taking
those APIs that we're using internally and just expose
them to the developer.
So if you want to leverage Google App Engine and create a
powerful scalable API on top of it, you might want to use
Google Cloud Endpoint.
And then you're benefiting and getting for free all the great
capabilities of the discovery mechanism, the API Explorer,
and all the richness of libraries that are
all ready for you.
We'll speak about it hopefully next week and, if not, in the
near future.
And now is a great time for questions if someone that
joined us have, please feel free.
OK, so later on, if someone have any questions, just feel
free to reach me on plus.google.com/plusgreenido--
one word.
And until next week, have a great time and bye-bye.