.
Google Sheets API Quick Start
1) Follow Google Sheet API Tutorial
Step 1: Turn on the Google Sheets API
- 1.1. Use this wizard to create or select a project in the Google Developers Console and automatically turn on the API. Click Continue, then Go to credentials.
- 1.2. On the Add credentials to your project page, click the Cancel button.
- 1.3. At the top of the page, select the OAuth consent screen tab. Select an Email address, enter a Product name if not already set, and click the Save button.
- 1.4. Select the Credentials tab, click the Create credentials button and select OAuth client ID.
- 1.5. Select the application type Web application.
- 1.6. In the Authorized JavaScript origins field, enter the URL http://localhost:8000. You can leave the Authorized redirect URIs field blank.
- 1.7. Click the Create button.
- 1.8. Take note of the client ID in the resulting dialog. You will need it in a later step.
- 1.9. Click OK to dismiss the resulting dialog.
Step 2: Set up the sample
Create a file named quickstart.html and copy in the following code:
<!DOCTYPE html>
<html> <head> <title>Google Sheets API Quickstart</title> <meta charset='utf-8' /> </head> <body> <p>Google Sheets API Quickstart</p> <!--Add buttons to initiate auth sequence and sign out--> <button id="authorize-button" style="display: none;">Authorize</button> <button id="signout-button" style="display: none;">Sign Out</button> <pre id="content"></pre> <script type="text/javascript"> // Client ID and API key from the Developer Console var CLIENT_ID = '<YOUR_CLIENT_ID>'; // Array of API discovery doc URLs for APIs used by the quickstart var DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"]; // Authorization scopes required by the API; multiple scopes can be // included, separated by spaces. var SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly"; var authorizeButton = document.getElementById('authorize-button'); var signoutButton = document.getElementById('signout-button'); /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { gapi.client.init({ discoveryDocs: DISCOVERY_DOCS, clientId: CLIENT_ID, scope: SCOPES }).then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); // Handle the initial sign-in state. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); authorizeButton.onclick = handleAuthClick; signoutButton.onclick = handleSignoutClick; }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { authorizeButton.style.display = 'none'; signoutButton.style.display = 'block'; listMajors(); } else { authorizeButton.style.display = 'block'; signoutButton.style.display = 'none'; } } /** * Sign in the user upon button click. */ function handleAuthClick(event) { gapi.auth2.getAuthInstance().signIn(); } /** * Sign out the user upon button click. */ function handleSignoutClick(event) { gapi.auth2.getAuthInstance().signOut(); } /** * Append a pre element to the body containing the given message * as its text node. Used to display the results of the API call. * * @param {string} message Text to be placed in pre element. */ function appendPre(message) { var pre = document.getElementById('content'); var textContent = document.createTextNode(message + '\n'); pre.appendChild(textContent); } /** * Print the names and majors of students in a sample spreadsheet: * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit */ function listMajors() { gapi.client.sheets.spreadsheets.values.get({ spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms', range: 'Class Data!A2:E', }).then(function(response) { var range = response.result; if (range.values.length > 0) { appendPre('Name, Major:'); for (i = 0; i < range.values.length; i++) { var row = range.values[i]; // Print columns A and E, which correspond to indices 0 and 4. appendPre(row[0] + ', ' + row[4]); } } else { appendPre('No data found.'); } }, function(response) { appendPre('Error: ' + response.result.error.message); }); } </script> <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script> </body> </html> |
Replace the placeholder <YOUR_CLIENT_ID> in the copied code with the client ID you created in Step 1.
Step 3: Run the sample
We are going to use GitHub hosting. Save the quickstart.html file above to GitHub server as follows.
To create a folder via GitHub web page, type the folder name followed by “/”.
E.g. to create demo folder, type “demo/”
|
Replace the server URI in STEP 1.6 above as follows:
Replace http://localhost:8000 with http://notarazi.github.io.
Wait for the Google Server to update itself. In my case, I waited for 10 minutes. Then my web browser displays the following.
Click Authorize.
Click Allow.
3) GitHub
Run: http://notarazi.github.io/demo/GoogleSheetsAPI/quickstart.htmlSource: https://github.com/notarazi/notarazi.github.io/blob/master/demo/GoogleSheetsAPI/quickstart.html
.
This comment has been removed by the author.
ReplyDeleteHi Razi, i'm interested to transfer javascript part those quickstart to typescript (angular 2). Would you help? Thanks.
ReplyDelete