Google Drive API: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(20 intermediate revisions by the same user not shown)
Line 9: Line 9:
== Basic Requirements ==
== Basic Requirements ==


1. Apps must run from a server. They cannot easily be run locally on your desktop.
1. Apps must run from a server, either VoltServer or your own. They cannot be run locally on your desktop.


2. Security, as you should expect, is good. You can only access files in Drive if you have a Google Client ID and your server is registered to that ID. See "Setting up your Credentials".
2. Security, as you should expect, is good. You can only access files in Google Drive if you have a Google Client ID and your server is registered to that ID. See "Setting up your Credentials".


3. Google Drive requires a library be included in your app. Put this line in extraheaders in Project Properties:
== Add GoogleDrive Library to your project ==
<pre>
 
&lt;script src="https://apis.google.com/js/client.js">&lt;/script>
1. In the Project Explorer, select "Project Properties and Global Code".
</pre>
 
2. In the Libraries panel which appears, select "Google Drive".
 
AppStudio should look like this:
 
[[File:Googledrivelibrary.png]]


4. If you are accessing spreadsheets, you need a library to convert the incoming data to a format you can use:
Three files will be included in your project:
<pre>
# GoogleDrive.js: a set of functions to make it easier to call the Google API from AppStudio.
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js">&lt;/script>
# client.js: a library from Google to call the Google API.
</pre>
# papaparse.min.js: a library which parses csv files like Google Sheets. From [http://papaparse.com/ PapaParse].


== Setting up your Credentials ==
== Setting up your Credentials ==
Note: Google is constantly fiddling with the UI for this. These instructions are meant only as a guideline. Check Google's documentation for changes.


1. Set up new project in the [https://console.developers.google.com/ Google API Console].
1. Set up new project in the [https://console.developers.google.com/ Google API Console].


2. In Overview, enable Drive API
2. In Dashboard, enable Drive API


3. Go to Credentials
3. Go to Credentials, click on "Create credentials", then "Help me choose".


4. You'll see the question "Where will you be calling the API from?"
4. You'll see the question "Where will you be calling the API from?"
Line 38: Line 45:
5. Click on "What credentials do I need?"
5. Click on "What credentials do I need?"


6. For "Authorized JavaScript origins:", enter the name of your server, i.e "https://www.nsbasic.com"
6. For "Authorized JavaScript origins:", enter the name of your server. For a VoltServer app, something like this: https://googlespreadsheet-signs-smoothly.volt.live


7. Click on Create client ID
7. Click on Create client ID.


8. On Credentials screen, select Create credentials.
8. Set up the consent screen by entering in a 'Product name' and clicking on 'Continue'.


9. Choose API Key
9. It will now show your Client ID. Save that.


10. Choose Browser key
10. Go back to Credentials and choose "Create credentials" again. This time, choose the "API key" option.


11. Create. Note: It may take up to 5 minutes for settings to take effect
11. It will display your API key. Save that.


12. Your credentials screen should now look like this:
12. Your credentials screen should now look like this:
[[File:Credentials.png|thumbnail]]
 
[[File:Credentials.png]]


== Add your credentials to your app ==
== Add your credentials to your app ==


1. Copy credentials: Client ID. It will look something like
Copy credentials: Client ID. It will look something like
304468290387-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com.  
304468290387-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com.  


Copy this into the CLIENT_ID variable in your Google Drive App.
Copy this into the CLIENT_ID variable in your Google Drive App.


2. Copy API key. It will look something like
<pre>
AIzxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
GoogleDrive.CLIENT_ID = "988...apps.googleusercontent.com"
 
</pre>
Copy this into the API_KEY variable in your Google Drive App.


== Get the File ID of your spreadsheet ==
== Get the File ID of your spreadsheet ==
Line 85: Line 92:
<pre>
<pre>
btnGet.onclick = function() {
btnGet.onclick = function() {
     getSpreadsheet(FILE_ID, getSpreadsheetCallback);
     GoogleDrive.getSpreadsheet(FILE_ID, getSpreadsheetCallback);
}
}


Line 114: Line 121:
<pre>
<pre>
btnSave.onclick = function() {
btnSave.onclick = function() {
     saveSpreadsheet(spreadsheet, FILE_ID, saveSpreadsheetCallback);
     GoogleDrive.saveSpreadsheet(spreadsheet, FILE_ID, saveSpreadsheetCallback);
}
}



Latest revision as of 15:33, 25 February 2021

Overview

Google Drive lets you store spreadsheets, documents, slides and other documents in the cloud. The files can be access by any desktop or mobile computer with the appropriate sign on credentials.

If you are working on the desktop in a browser, your regular logon will let you access the files. You can also do so from the browser on your device.

Where it gets exciting is that you can read and write the files from within your AppStudio app. For example, you could use a Google Drive Spreadsheet as a database, which would be accessible from both the desktop and your app. If your device is offline, the changes will be made next time it has a chance to sync.

Basic Requirements

1. Apps must run from a server, either VoltServer or your own. They cannot be run locally on your desktop.

2. Security, as you should expect, is good. You can only access files in Google Drive if you have a Google Client ID and your server is registered to that ID. See "Setting up your Credentials".

Add GoogleDrive Library to your project

1. In the Project Explorer, select "Project Properties and Global Code".

2. In the Libraries panel which appears, select "Google Drive".

AppStudio should look like this:

Three files will be included in your project:

  1. GoogleDrive.js: a set of functions to make it easier to call the Google API from AppStudio.
  2. client.js: a library from Google to call the Google API.
  3. papaparse.min.js: a library which parses csv files like Google Sheets. From PapaParse.

Setting up your Credentials

Note: Google is constantly fiddling with the UI for this. These instructions are meant only as a guideline. Check Google's documentation for changes.

1. Set up new project in the Google API Console.

2. In Dashboard, enable Drive API

3. Go to Credentials, click on "Create credentials", then "Help me choose".

4. You'll see the question "Where will you be calling the API from?" Answer with "Web Browser (javascript)"

For "What data will you be accessing?", enter "User Data".

5. Click on "What credentials do I need?"

6. For "Authorized JavaScript origins:", enter the name of your server. For a VoltServer app, something like this: https://googlespreadsheet-signs-smoothly.volt.live

7. Click on Create client ID.

8. Set up the consent screen by entering in a 'Product name' and clicking on 'Continue'.

9. It will now show your Client ID. Save that.

10. Go back to Credentials and choose "Create credentials" again. This time, choose the "API key" option.

11. It will display your API key. Save that.

12. Your credentials screen should now look like this:

Add your credentials to your app

Copy credentials: Client ID. It will look something like 304468290387-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com.

Copy this into the CLIENT_ID variable in your Google Drive App.

GoogleDrive.CLIENT_ID = "988...apps.googleusercontent.com"

Get the File ID of your spreadsheet

1. Run the GoogleDriveAPI app. A permission screen should display, based on the credentials you entered. Click on "Allow".

2. If the Authorize button is enabled, click on it. You are now able to access the Google Drive API.

Getting the list of files on your Google Drive

1. Click on "List Files". The files on your Google Drive will appear, along with their File IDs.

2. Get the FILE_ID for your spreadsheet from the File_Id column. Put that in the top of the app: it is hardcoded in the sample. You're welcome to use better ways to select the FILE_ID in your own app.

Reading and Writing Spreadsheets

Reading

Restart the app and click on Get Spreadsheet. The contents of the spreadsheet will appear. The code to do this is

btnGet.onclick = function() {
    GoogleDrive.getSpreadsheet(FILE_ID, getSpreadsheetCallback);
}

function getSpreadsheetCallback(results) {
    spreadsheet = results;
    console.table(results);
}

Notice that the getSpreadsheet call has a callback function. It may take a few seconds to get the spreadsheet: the callback function is called with the results when they are available.

Here is what shows in the Chrome Console:

Updating

You can now modify the spreadsheet in your code. The spreadsheet is stored as 2d array. Here's how to reference it:

spreadsheet[0][0]      - the top left corner
spreadsheet[0][1]      - the top item in second column.
spreadsheet[1][1] = "B2"   - Set the value of row 2, col 2 to "B2"

Saving

To write your spreadsheet out, use the saveSpreadsheet function:

btnSave.onclick = function() {
    GoogleDrive.saveSpreadsheet(spreadsheet, FILE_ID, saveSpreadsheetCallback);
}

function saveSpreadsheetCallback() {
    alert("done");
}

Once again, there is a callback function once the save is complete.