title: Google Sheets API with Ionic
body: <p>I want to retrieve formula of cells from spreadsheet using <a href="https://developers.google.com/sheets/api/reference/rest/" rel="nofollow noreferrer">google sheets api</a>. I did the configurations of credential keys etc. Then I went for javascript setup as mentioned by <a href="https://developers.google.com/sheets/api/quickstart/js" rel="nofollow noreferrer">google</a>. But got error <code>cannot find gapi</code> , so I did this <a href="https://stackoverflow.com/a/41416926/2904573">solution</a> and it worked. But now I am getting error </p>
  
  <blockquote>
    <p>Property 'sheets' does not exist on type 'typeof client'.</p>
  </blockquote>
  
  <p>Have also gone through this <a href="http://leifwells.com/2016/06/09/ionic-2--angular-2-using-a-google-spreadsheet-as-a-data-source/" rel="nofollow noreferrer">article</a> but wasn't much helpful.
  Following is my implementation.</p>
  
  <p><strong>Home.ts</strong></p>
  
  <pre><code>readFromSpreadSheet() {
      gapi.client.sheets.spreadsheets.values.get({
        spreadsheetId: 'XXXIDXXX',
        range: 'Sheet1!A1:D7'
      }).then((response) =&gt; {
        var result = response.result;
        var numRows = result.values ? result.values.length : 0;
        console.log('${numRows} rows retrieved.');
      });
    }
  </code></pre>
  
  <p><strong>client_secret.json</strong></p>
  
  <pre><code>{"web":{"client_id":"XXX","project_id":"XXX","auth_uri":"XXX","token_uri":"https://accounts.google.com/o/oauth2/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"XXXXX"}}
  </code></pre>
  
  <p><strong>quickstart.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Google Sheets API Quickstart&lt;/title&gt;
      &lt;meta charset='utf-8' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;Google Sheets API Quickstart&lt;/p&gt;
  
      &lt;!--Add buttons to initiate auth sequence and sign out--&gt;
      &lt;button id="authorize-button" style="display: none;"&gt;Authorize&lt;/button&gt;
      &lt;button id="signout-button" style="display: none;"&gt;Sign Out&lt;/button&gt;
  
      &lt;pre id="content"&gt;&lt;/pre&gt;
  
      &lt;script type="text/javascript"&gt;
        // Client ID and API key from the Developer Console
        var CLIENT_ID = 'XXXX';
        var API_KEY = 'XXX';
  
        // 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({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            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: 'XXXIDXXX',
            range: 'Class Data!A2:E',
          }).then(function(response) {
            var range = response.result;
            if (range.values.length &gt; 0) {
              appendPre('Name, Major:');
              for (i = 0; i &lt; 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);
          });
        }
  
      &lt;/script&gt;
  
      &lt;script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>No idea what to do with quickstart.html . I have only changed the CLIENT_ID &amp; API_KEY</strong></p>
  
  <p><strong>$ ionic info</strong></p>
  
  <blockquote>
    <p>cli packages: (/usr/local/lib/node_modules)</p>
  
  <pre><code>@ionic/cli-utils  : 1.19.2
  ionic (Ionic CLI) : 3.20.0
  </code></pre>
    
    <p>global packages:</p>
  
  <pre><code>cordova (Cordova CLI) : 8.0.0
  </code></pre>
    
    <p>local packages:</p>
  
  <pre><code>@ionic/app-scripts : 3.1.10
  Cordova Platforms  : none
  Ionic Framework    : ionic-angular 3.9.2
  </code></pre>
    
    <p>System:</p>
  
  <pre><code>ios-deploy : 1.9.2
  Node       : v8.11.1
  npm        : 6.0.0
  OS         : macOS High Sierra
  Xcode      : Xcode 9.1 Build version 9B55
  </code></pre>
    
    <p>Environment Variables:</p>
  
  <pre><code>ANDROID_HOME : not set
  </code></pre>
    
    <p>Misc:</p>
  
  <pre><code>backend : pro
  </code></pre>
  </blockquote>
  
  <p>Please suggest steps to integrate google spreadsheet api with ionic or suggest some helpful articles.</p>