Gdh Google Drive - Introducción - L4

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!