Steps to reproduce:
-
00:00 - Go to Pizzly's readme and click on Deploy to Heroku
-
00:20 - Click on "Deploy app"
-
00:24 - While it's deploying, sign in to Google Cloud Console
-
00:47 - Make sure you've enabled the Google Sheets API - https://console.cloud.google.com/apis/api/sheets.googleapis.com/overview
-
01:03 - Grab or create your OAuth2.0 credentials
-
02:01 - Prepare your Google Sheets Integration
mkdir ttfac-pizzly cd ttfac-pizzly npm init --yes touch index.html code . -
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"
-
03:27 - Provide your Client ID & Client Secret. Use the following scope:
https://www.googleapis.com/auth/spreadsheets.readonly -
04:10 - In Google Cloud Console, register the Pizzly callback URL. For me it was
https://ttfac.herokuapp.com/auth/callback -
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)
})
- 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>
- 07:00 - Run
serve - 07:07 - TTFAC!
{range: "Sheet1!A1:Z1000", majorDimension: "ROWS", values: Array(1)}