Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Time To First API Call - Google Sheets with Pizzly

Steps to reproduce:

  1. 00:00 - Go to Pizzly's readme and click on Deploy to Heroku

  2. 00:20 - Click on "Deploy app"

  3. 00:24 - While it's deploying, sign in to Google Cloud Console

  4. 00:47 - Make sure you've enabled the Google Sheets API - https://console.cloud.google.com/apis/api/sheets.googleapis.com/overview

  5. 01:03 - Grab or create your OAuth2.0 credentials

  6. 02:01 - Prepare your Google Sheets Integration

    mkdir ttfac-pizzly
    cd ttfac-pizzly
    npm init --yes
    touch index.html
    code .
    
  7. 02:43 - Go back to Heroku. And open your app. In Pizzly dashboard, select the Google Sheets API and click on "Create a new configuration"

  8. 03:27 - Provide your Client ID & Client Secret. Use the following scope: https://www.googleapis.com/auth/spreadsheets.readonly

  9. 04:10 - In Google Cloud Console, register the Pizzly callback URL. For me it was https://ttfac.herokuapp.com/auth/callback

  10. 04:40 - Back to the code. Open the editor and copy paste the example from Pizzly README:

const pizzly = new Pizzly({ host: 'pizzly.example.org' }) // Initialize Pizzly
const github = pizzly.integration('github')

github
  .connect()
  .then(({ authId }) => {
    // The authentication was successful
    console.log(`Auth ID is: ${authId}`)
  })
  .catch(error => {
    // The authentication failed
    console.error(error)
  })
  1. 06:52 - A few adaptation, it becomes:
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/pizzly-js@latest/dist/index.umd.min.js"></script>
<script>
  const pizzly = new Pizzly({ host: "https://ttfac.herokuapp.com/" }); // Initialize Pizzly
  const googlesheets = pizzly.integration("google-sheets");

  googlesheets
    .connect()
    .then(({ authId }) => {
      console.log("Sucessfully connected! with the authId:", authId);

      const spreadsheetId = "1X3j5I52WkY8JrJNvRigGYZK4UExKwRPgWHYmcv_Rjc8";
      const range = "Sheet1";

      googlesheets
        .auth(authId)
        .get(`/${spreadsheetId}/values/${range}`)
        .then((response) => response.json())
        .then(console.log)
        .catch(console.error);
     })
   .catch((error) => console.error("It failed!", error));
</script>
  1. 07:00 - Run serve
  2. 07:07 - TTFAC!
{range: "Sheet1!A1:Z1000", majorDimension: "ROWS", values: Array(1)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.