Welcome to our project Google Developers Hackademy,
where Spanish-speaking experts from Latin America
will show you some of our tools,
developer products, APIs and new tricks.
This course is divided into five parts
We invite you to watch it and learn along.
Here we go.
Hi. Welcome back to the HTML5 web development
with Google Drive introduction course.
I'm Cesar Anton Dorantes,
Google Developer Expert for the Google Drive platform.
In the previous lesson we learned to connect
your Google Charts charts with Spreadsheets data.
In this lesson we'll see the following themes:
Creating a new project on Google Cloud Console.
Activating G+ API.
Registering an API.
G+ Login button.
And Adding the G+ Login button.
You ready? Here we go!
CREATING A NEW PROJECT ON GOOGLE CLOUD CONSOLE
Time to register our app to the Google Cloud Console.
This is very important since you need
a client identifier so Google lets you
access the platform.
You need to access Google Cloud Console first
from cloud.google. com/console#/project.
Once in this onscreen, select Create Project.
A new window will open in which to register
the name and ID you want for your project.
Though later on you'll be able to change the project's name,
you need to come up with an ID you want for it,
because you won't be able to change it later on.
ACTIVATING G+ API
That's it! Your new project is now registered,
and onscreen you can see the ID you chose
and the project number it was assigned to it.
Time to activate Google+ API
so our app can use the Login button.
We click on APIs and authentication to see
the list of Google's APIs.
Now we see a long list with all APIs available
for developers.
I invite you to explore it later,
just click on its name to see the methods it has to offer.
For now let's focus only on Google+ API.
We can find it below on the list.
Remember the APIs are listed alphabetically
but a list with the active ones is shown first.
Once we find Google+ API,
we click on the "OFF" button to change its status
and activate the API.
Once it's active, you'll see it is brought
to the upper part of the list,
that way we can always see
which APIs are active for our project quickly.
REGISTERING AN APP
It's time to register our app for this project.
Google Cloud Console lets us keep our apps separated
for every different project.
This will turn out to be useful for you as a Google developer.
Let's click on the tab "Registered apps."
On this window we can see the apps we already registered
and add some new ones.
Let's click on the "Register app" button.
Now we can see the new app registration display.
You just need to give the name you want to register
for this app in particular
and what platform it's designed for.
In this case we'll use the by-default option,
which is Web App.
Once we've given a name for the app,
let's click on "Register."
This will lead us to a new window
with our app's properties.
You can also change its name here later on
if you want to.
For now, we'll click where it says
"OAuth 2.0 client ID."
Here we can see the client ID
for our app.
Keep it at hand, you'll need it for the code in a moment.
G+ LOGIN BUTTON
The necessary JavaScript for the G+ Login button logic
will always be the same for all our projects,
therefore we'll save two separate files,
which we will name G+login.js
and G+loginhandle.js.
The best part is you'll be able to recycle them
for future projects.
Quite practical, right?
This simple code corresponds to the G+login.js file,
which will hide the button
in case the user has already signed in,
and it is also in charge of reporting to him
if a problem has happened when signing in.
This JavaScript function
corresponds to the G+loginhandle.js file.
It'll make sure the JavaScript button
loads asynchronously and therefore minimize
the loading time in our app.
ADDING THE G+ LOGIN BUTTON
To add the G+ Login button to your app,
we first need to import the code we saved
in the G+login.js file,
by declaring its route to the head tags
of our HTML5 code,
just as shown onscreen.
Declare the route to g+login-handle.js,
right after the body tag.
This will make sure the script is asynchronously
executed in the browser.
Copy this code where you wish the button
to show in your app. You'll notice one of the parameters
is called "data-clientid."
It's important to emphasize the "data-scope" parameter,
which lets us use this button to request access
to other services in future applications.
That's it, our app will now show a G+ starting button
when someone enters your app without his account active
or if the app has no authorized access
to this app in particular.
This will turn out to be very useful when you build apps
requiring access to user information.
I invite you to watch this lesson again,
this time pausing it to follow the steps
and copying the code that is shown.
As a comparison, you can see an already built example
entering to:
This will be it for now.
See you next time,
where will do a review of the previous lessons.
I say goodbye for now and remember:
keep on programming!