Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 How to Use the Google Drive API

In this lesson, we'll start by authorizing the API for use in your app. After that, we'll take a look at the Google Drive API starter code to build a couple simple apps using the Google Drive API and the Picker API.

Code Snippet:

Here is an example of how we authorize the API when we start our app.

function checkAuth() {
    gapi.auth.authorize(
      {
        'client_id': CLIENT_ID,
        'scope': SCOPES.join(' '),
        'immediate': true
      }, handleAuthResult);
  }

1.How to Use the Google Drive API
2 lessons, 11:01

1.1
Introduction
00:59

1.2
How to Use the Google Drive API
10:02


1.2 How to Use the Google Drive API

[SOUND] Hello I'm Reggie Dawson. Welcome to the Google Drive API Coffee Break Course for Tutsplus. For just about every service that Google offers, they also have an API to go with it. What this means is that you can programmatically access these services through code. One of the services I find myself using frequently is Google Drive. Similar to Dropbox, it is a place where you can easily store your files in the cloud. As long as you are logged into your Google account, you have access on all devices. One of the cool things I recently discovered is that there is even an API that allows you to use the Google Drive platform from your projects. Now you may not immediately recognize a use for this type of functionality, but the Google team has built a couple of projects that demonstrate what you can do with the API. First, the ZIP Extractor let you extract the contents of a ZIP file directly into your Google Drive. I know I often use ZIP files and being able to store their contents directly in my Google Drive is very useful. The QuickEditor is a text editor built with AngularJS. This allows you to create text files and save them to your Google Drive. Additionally, we can also share this file as well as open our file from our Google Drive with this editor. Now before we get started looking at a few examples of using the Google Drive API, we have to authorize our app first. Now as long as you have a Google account, you can access the Google Developers Console. Now if this is your first time visiting the Google Developers Console, you have to create a project. Once you create your project, then go to the Library and find the API that you want to use. Find the Google Drive API and make sure that you enable the API. Mine says, DISABLE because mine is already enabled. But this is the area that you have to enable your API. After the API is enabled, go to credentials. For this we will need to generate a OAuth client ID. Click on the OAuth consent screen link. It should already have your email address of your Google account. Then enter a product name and save. Then after that select Create credentials then choose OAuth client ID. After that choose web application. In the authorized JavaScript origins we will add the URL of our server. Here I have a localhost which is the address of our local machine with a port of 3000 which is the port that my web server will use. After that click on Create, then save the client ID for use in your project. After that we can look at the Google Drive API quickstart project. I have copied that project to a file named index.html. I will go through this file line by line so you can better understand how to use the Google Drive API. First, we have our javascript at the top of our file. First, you need to add your client ID in the client ID variable. After that we have our auth scope. This controls what level of access to Google Drive we give our apps. If we look at the documentation, we can see the different scopes that we can use with our project. Now at the bottom of this file, there is a Google API script. This has an on load callback to execute to the checkAuth function. This function uses our client ID and scope to authorize our app to use the Google Drive. After that, this will call the handleAuthResult function. Now this function will first grab the authorizeDiv. You have seen this before if you've ever used an app that uses Google based authentication. These are the dialogs that appear that ask you to give permission to access your Google account. Then it will use an IF statement to make sure the app is authorized and no errors have occurred. If that is the case, it will hide the authorization div and execute the loadDriveApi function. If the app is not already authorized, it will display the authorization div. Then the handleAuthClick function is how we handle the authorization screen. Once we click this, the authorize method will run the same as it did with the checkAuth function. It is also calling the handleAuthResult function as well. Now I know this may be confusing, but when we first run this OAuth for authorization, it first goes to checkAuth which hands off the handle off. On the first run there is no authorization, so we see the authorization div. After we authorize it saves the auth. So when it executes the handleAuthResult, the loadDriveApi will execute. Then if we visit again we will not be prompted to authorize again and instead, we will see the display of files immediately. Next, in the loadDriveApi function we see the client.load method. Drive is specifying what API to use, v3 is the version of the API, and listFiles is the function to handle the response from the API. The listFiles function grabs the file list. After that the response is handled by the request.execute method. First the message files is appended to the display followed by a file list. Here a loop is used to cycle over the response and build a list of files. After that we have the appendPre function that appends our list to the pre-element. Then we have our Google script with the on load callback that initiates everything in this file by calling checkAuth. Then we have our authorize-div which is set to display none. Remember that this is the div that is displayed dynamically depending on the authorization state. It starts not being displayed by default which is why the display is set to none. Then this div has the authorize button that executes the handleAuthClick function. And then after that, the last thing of note in the file is the pre tag which is where our list will be displayed. Now with this file we simply cannot run it by previewing in a browser. Instead, we have to set up a web server. This is easier than it sounds if you have Node.js installed. We will install the lite-server to preview our project. This command will install the lite-server globally so that you can use it anywhere. I have set up my file with a package.json file that I have installed the lite-server to instead. As a result, I can start the server by using an in npm script When you run your script on the first run, you should be prompted to authorize. After that you should see a list of the files in your Google Drive. Now we know that this is a read-only list of metadata. And as a result, it is only useful to look at a list of our files. In order to add the real functionality with the Google Drive, we need to use the Picker API. The Picker API's another part of Google Drive that will let us use the web based file picker for Google Drive that we are used to. Now that we understand how the Google Drive API works, using the picker should be easy. First, we need to go back to the Google Developers Console and enable the Picker API. After that we need to generate an API key in the credentials. Make sure you save your API key to use in your project. After that I've set up the sample app from the picker API documentation with a few slight changes. Just like the first example, this file's initiated by the on load callback at the bottom of the file. Again we have our client ID but this time we also have our developer key. This is the API key that we just generated. Then we have our scope which originally was set to photos. Since I don't really have any photos in my Google Drive, I'll change this to files to display all file types. After that, we have a couple of variables followed by the onApiLload function. This loads auth and the picker. These calls to the API both have callback functions. The callback for auth is the next function, the onAuthApiLoad function. This handles our authorization the same as it did in the last example. Then the picker call executes the onPickerApiLoad functions. This sets the pickerApiLoaded variable to true and then creates the picker. Now the next function is the callback to the authLoad and will set the access token. Now I know you may be wondering why the createPicker function is here but it will not work. This will cause the next API load to execute which is the pickerApiLoad. This will also call createPicker. Now if we look at the createPicker function, we will see that the OAuthToken needs to be set, as well as the pickerApiLoaded variable set to true. We know that this gets set by the onPickerApiLoad. In the createPicker function, we call the PickerBuilder method. We know this gets set by the onPickerApiLoad. In the createPicker function we call the PickerBuilder method. After that we set the view. Initially, this was set to pictures and if I left it that way nothing would display. If you look at the documentation, we can see the various views that we can use here. In this case the view was set to display documents only. Then we use the OAuthToken and developerKey followed by a Callback and a build method. Then the picker is set to visible. After that we have the pickerCallback which sets the picker to be the innerHTML of the results div. Now in this callback function we are just alerting the user letting them know what file they selected. In a real app, we would instead add some code to manage the selected file. After that we have the pickerCallback which sets the picker to be the innerHTML of the results div. Then we have the Google API script with the on load callback. Now if you installed the lite-server globally, all you have to do is type in lite-server while in the project directory. On your first visit you'll be prompted for authorization and after that the picker will appear that you can use to choose your files from. Now if you click on one it will just let you know the file that you picked. This is because we didn't add any way to handle the selected file in our pickerCallback function. The important thing is that you now know how to use the Google Drive API in your apps. You can then build upon this knowledge and use the Google Drive API in your own projects. I wanna thank you for taking the time to watch the Google Drive API Coffee Break Course. This has been Reggie Dawson for Tutsplus.

Back to the top