UPDATE: 5/13/2020 - New Share Dialog Box steps available below.

Thanks Erica H!

Are you building a prototype dynamic web application and need to collaborate with non-developers?

I have been to a hackathon before and experienced participating with the knowledge on how to develop an application but lacked the skill or time to implement a full-stack web application in the 3-day sprint. That time may skill was way too low to even help out and was sidelined to watch tutorials and study HTML and CSS.

The result? I have learned a lot but I wished I could've contributed more.

image-125

In one of the hackathons I have participated in recently, I encountered a similar problem. This time around I was not the newbie. I had non-engineers who wanted to help in building our prototype web application. Luckily, we stumbled upon a Google Spreadsheets as a way for our non-engineers to mock up our database and have the back-end developers connect to Google Sheets JSON Endpoint and parse it.

With this guide, you'll be able to:

  1. Create a spreadsheet in Google Spreadsheets.
  2. Publish the spreadsheet to the web.
  3. Generate a JSON endpoint.
  4. Open the spreadsheet for public collaboration.
  5. Pass the JSON endpoint to your back-end developer.

After this tutorial, you'll be able to join teams and say, "I can help with the back-end!".

image-126

Section 1: Creating a Google Sheet

Step 1:

Go to Google Sheets

Step 2:

Create a new spreadsheet

1*2md2vMHKWXzXbWOwddzXPw

Section 2: Publishing your Google Sheets to the web

Note: New Share Dialog Box update as of 5/13/2020, located after Step 2.

Step 1:

Click File > Publish to the web…

1*XFtPyWBYh3JX6PdQUJ5j-w

Step 2:

Click Publish, then OK

1*QtAY0n29zHviNXdsPJZaQQ

Step 3:

No need to do anything here

1*WenBwpAkxyDc4fhGPeC6Dw

UPDATE: 5/13/2020 - New Share Dialog Box

Step 1:
Click Share

image-108

Step 2:

Click "Change to anyone with the link"

image-107

Step 3:

Click "Done"

image-109

Section 4: Using your Google Sheets as JSON endpoint

Step 1:

Copy the template URL and paste in the address bar:

https://spreadsheets.google.com/feeds/cells/YOURGOOGLESHEETCODE/SHEETPAGENUMBER/public/full?alt=json

Step 2:

Go to your opened Google Sheets and check the address bar

1*xRIMehCRmQxSQpAWi2bhlQ
Google Sheets url
1*AM6_ME5wgoQdtfMHFB_ipg
Google Sheets code

Step 3:

Go to the template URL and replace

  • YOURGOOGLESHEETCODE with 1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs
  • SHEETPAGENUMBER to 1

Step 4:

Retrieve JSON URL

https://spreadsheets.google.com/feeds/cells/1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs/1/public/full?alt=json

1*SU97RXIK-rFaMWEfaP1kng
Result of JSON url

Section 5: Making your Google Sheets public (for collaboration and data entry)

Step 1:

On the top right, click Share

1*O2SCuizLuiLPFFBQVRL9vw

Step 2:

Add a name, click Save

1*D6leg5gLfYpoTOXlrpFUcw

Step 3:

Click Advanced

1*k7DGUBwGJnVIdZeuaQbGlA

Step 4:

Click Change…

1*qkKSGYrYiNp861WQjaoUKg

Step 5:

Click On — Public on the web, then Save

1*paO-_3OAzlhzW-oZQI9udw

Common Gotchas:

If you receive the response below, please check your URL and make sure you use the Google Sheets code in the address bar.

1*xrfoHNKtE4uld3IylAI1Lw

If you receive the response below, please go back to Section 2: Publishing your Google Sheets to the web.

1*ZL71DxnV5Rw6asXjpjjC1Q

Clark Jason Ngo - Graduate Teaching Assistant - Technology Institute - City University of Seattle |…
Join LinkedIn * Passionate to nurture new software developers. Technical Skills: Git, MVC, JavaScript, NodeJS, ReactJS…www.linkedin.com