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](https://www.freecodecamp.org/news/content/images/2019/06/image-125.png)
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:
- Create a spreadsheet in Google Spreadsheets.
- Publish the spreadsheet to the web.
- Generate a JSON endpoint.
- Open the spreadsheet for public collaboration.
- 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](https://www.freecodecamp.org/news/content/images/2019/06/image-126.png)
Section 1: Creating a Google Sheet
Step 1:
Go to Google Sheets
Step 2:
Create a new spreadsheet
![1*2md2vMHKWXzXbWOwddzXPw](https://cdn-media-1.freecodecamp.org/images/1*2md2vMHKWXzXbWOwddzXPw.png)
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](https://cdn-media-1.freecodecamp.org/images/1*XFtPyWBYh3JX6PdQUJ5j-w.png)
Step 2:
Click Publish, then OK
![1*QtAY0n29zHviNXdsPJZaQQ](https://cdn-media-1.freecodecamp.org/images/1*QtAY0n29zHviNXdsPJZaQQ.png)
Step 3:
No need to do anything here
![1*WenBwpAkxyDc4fhGPeC6Dw](https://cdn-media-1.freecodecamp.org/images/1*WenBwpAkxyDc4fhGPeC6Dw.png)
UPDATE: 5/13/2020 - New Share Dialog Box
Step 1:
Click Share
![image-108](https://www.freecodecamp.org/news/content/images/2020/05/image-108.png)
Step 2:
Click "Change to anyone with the link"
![image-107](https://www.freecodecamp.org/news/content/images/2020/05/image-107.png)
Step 3:
Click "Done"
![image-109](https://www.freecodecamp.org/news/content/images/2020/05/image-109.png)
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](https://cdn-media-1.freecodecamp.org/images/1*xRIMehCRmQxSQpAWi2bhlQ.png)
![1*AM6_ME5wgoQdtfMHFB_ipg](https://cdn-media-1.freecodecamp.org/images/1*AM6_ME5wgoQdtfMHFB_ipg.png)
Step 3:
Go to the template URL and replace
- YOURGOOGLESHEETCODE with 1ifbWzueslEP5-_ysP6gg7o_NaHQmqF8LlXBfStCwFMs
- SHEETPAGENUMBER to 1
Step 4:
Retrieve JSON URL
![1*SU97RXIK-rFaMWEfaP1kng](https://cdn-media-1.freecodecamp.org/images/1*SU97RXIK-rFaMWEfaP1kng.png)
Section 5: Making your Google Sheets public (for collaboration and data entry)
Step 1:
On the top right, click Share
![1*O2SCuizLuiLPFFBQVRL9vw](https://cdn-media-1.freecodecamp.org/images/1*O2SCuizLuiLPFFBQVRL9vw.png)
Step 2:
Add a name, click Save
![1*D6leg5gLfYpoTOXlrpFUcw](https://cdn-media-1.freecodecamp.org/images/1*D6leg5gLfYpoTOXlrpFUcw.png)
Step 3:
Click Advanced
![1*k7DGUBwGJnVIdZeuaQbGlA](https://cdn-media-1.freecodecamp.org/images/1*k7DGUBwGJnVIdZeuaQbGlA.png)
Step 4:
Click Change…
![1*qkKSGYrYiNp861WQjaoUKg](https://cdn-media-1.freecodecamp.org/images/1*qkKSGYrYiNp861WQjaoUKg.png)
Step 5:
Click On — Public on the web, then Save
![1*paO-_3OAzlhzW-oZQI9udw](https://cdn-media-1.freecodecamp.org/images/1*paO-_3OAzlhzW-oZQI9udw.png)
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](https://cdn-media-1.freecodecamp.org/images/1*xrfoHNKtE4uld3IylAI1Lw.png)
If you receive the response below, please go back to Section 2: Publishing your Google Sheets to the web.
![1*ZL71DxnV5Rw6asXjpjjC1Q](https://cdn-media-1.freecodecamp.org/images/1*ZL71DxnV5Rw6asXjpjjC1Q.png)
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