Тёмный

Use a google sheet as your web app database (Slingcode) 

mccormix
Подписаться 673
Просмотров 17 тыс.
50% 1

Learn how to use Google Sheets as a simple database for your single-page progressive web app. This technique is easy to set up and doesn't require complicated authentication, libraries, or APIs. Go to bettersheets.co to get more out of Google Sheets.
PS You can follow along using the editor at slingcode.net

Опубликовано:

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 92   
@BetterSheets
@BetterSheets 2 года назад
Thanks for the shoutout Chris! Great way to make a quick website with dynamic data that you can fill in with a google sheet.
@mccormix
@mccormix 2 года назад
No problem, glad you liked the video!
@docubusiness8101
@docubusiness8101 2 года назад
Your method is so much more efficient for read-only!
@BakaNekoCh
@BakaNekoCh 25 дней назад
It worked. Beautiful! Now gotta figure out how to post.
@mccormix
@mccormix 17 дней назад
You should be able to upload the contents of the zip file to any web hosting provider.
@Senjalkumar
@Senjalkumar Год назад
Thank you, Chris! from the bottom of my heart for creating such an exceptional learning video. Your expertise and dedication have made a significant difference in my understanding and overall learning experience. I eagerly look forward to exploring more of your content and continuing my educational journey with your guidance. Thanks again.
@mccormix
@mccormix Год назад
Thank you I'm glad it was helpful for you.
@rohanphadnis6812
@rohanphadnis6812 Год назад
THIS IS A LIFESAVER! LOVE IT!
@academyonnet
@academyonnet Год назад
Thank you very much for making something so simple and yet useful.
@mccormix
@mccormix Год назад
Thank you, I'm glad it's useful for you.
@felleg4737
@felleg4737 3 года назад
it’s a funny way of doing this. looks like a cool hack to avoid the process of requesting credentials, setting up auth, writing some backend code to serve it all, etc. yes, you can’t modify the data this way, but you may not need to.
@openclass4all
@openclass4all 3 года назад
Thank you for this video, very informative
@mccormix
@mccormix 3 года назад
Thank you, I'm glad it was useful!
@diababdelkrim9454
@diababdelkrim9454 2 года назад
Thank you very much, it's a great video
@rafi_45
@rafi_45 Год назад
thank you so much sir. best.
@mccormix
@mccormix Год назад
No problem!
@KuldeepSingh-pl7rv
@KuldeepSingh-pl7rv 2 года назад
if you want to perform CRUD action with this google sheet database then you would need to write some function at google sheet apps script side too. and in that case this won't gonna help. although nice tutorial
@adriano_silva_
@adriano_silva_ Год назад
Thank you!
@mccormix
@mccormix Год назад
No problem!
@keletsolwate2353
@keletsolwate2353 2 года назад
This is great. I am looking to create knowledge base. Can I add a search feature on the front end linking to the google sheets database?
@cotychaveS
@cotychaveS 2 года назад
can you share the code to search please, thank you very much
@RyRy_Createss
@RyRy_Createss Год назад
This is so useful. Thank you so much.
@mccormix
@mccormix Год назад
Glad it was helpful!
@aluracing8908
@aluracing8908 2 года назад
Hi this is great! You solve me a problem that tooka me more than 3 hours te resolve!. Any idea how i can select/print a specific cell with this method? Thanks!
@mccormix
@mccormix 2 года назад
Yes, you can select a specific cell. Once the CSV is parsed you get an array of objects. Each object is one row in the sheet. So if you wanted to get the 3rd row you would do `csv[2]`. Then to look up the cell in that row you simply find it by name. For example: `csv[2]["price"]` will get the 3rd row and the column named "price". Best of luck.
@jbean92
@jbean92 2 года назад
Great video, thank you! Is it possible to switch between different tabs in the google sheet using this method?
@mccormix
@mccormix 2 года назад
Yes it is possible to download a different sheet. Here's how: 1. When you switch sheets in Google Sheets, you will see the URL change with a parameter like `#gid=12345` on the end. 2. Copy the `gid=...` part. 3. Paste it onto the end of your fetch URL in the web app with an & like this: `&gid=...`. After that when you make your request it will be for the sheet you targeted.
@jbean92
@jbean92 2 года назад
@@mccormix worked perfectly! Thank you very much!
@arylima6116
@arylima6116 3 года назад
Thank you sir. Can you add search box, so when I write "sword" in search box its only display Sword description and price? Hope for next tutorial🙏
@mccormix
@mccormix 3 года назад
You an do this with an "onchange" event listener. When the change comes in you filter the list.
@arylima6116
@arylima6116 3 года назад
@@mccormix Thank you sir
@cotychaveS
@cotychaveS 2 года назад
@@arylima6116 can you share the code to search please, thank you very much
@TRC00020
@TRC00020 Год назад
Can you read and write via the Web App to Google sheets?
@mccormix
@mccormix Год назад
No unfortunately you can not. I don't think even reading is working any more since they changed something on the server side.
@steph291
@steph291 2 года назад
thanks ! it is useful ... at my job they based the company computer logistic on googlesheet. they are getting bigger and they need a proper ERP. BTW question : what if we have multiples sheets in a csv ?
@Coder-ki4hq
@Coder-ki4hq 2 года назад
When I move the script code in script.js file and provide the src in script tag in html the code doesn't load table data, However when the same code is run in one single html page it works properly, any idea why it's not working or suggestions how to make it work
@mccormix
@mccormix 2 года назад
Try to open the developer console and see if there are any errors printed. If there are no errors make sure your script.js file is being loaded by putting `alert("hi");` at the top and see if the message shows.
@user-kf5wz6wp1v
@user-kf5wz6wp1v Год назад
how to fetch google sheet data to github hosted website? i am facing cross origin problem
@shehzadqadri1381
@shehzadqadri1381 2 года назад
i'm facing this error, kindly give me solution if you have? from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
@mccormix
@mccormix Год назад
It seems like they changed the CORS settings on the server and this technique no longer works.
@cotychaveS
@cotychaveS 2 года назад
Gracias por este gran aporte! Solo que estamos trabados en como colocar un filtro o un search Box de los datos que traemoa de gsheets, muchas gracias!!
@sameerk12982
@sameerk12982 2 года назад
Hello from India.. superb tutorial...easy to understand..very helpful... is it possible to write data back to sheet as well? If so kindly show us the way. Highly appreciated.
@mccormix
@mccormix 2 года назад
Is it not possible with this technique. You can only read. To write you need an API key and use a different method.
@sameerk12982
@sameerk12982 2 года назад
@@mccormix thx for replying...
@shehzadqadri1381
@shehzadqadri1381 2 года назад
Its good . now also tell us how to change values from database.
@mccormix
@mccormix Год назад
It is not possible using this technique. You'll have to use the Google Sheets API.
@alexusfort6476
@alexusfort6476 3 года назад
Thanks, do you know is it possible to export Google sheets table directly to some mysql table?
@mccormix
@mccormix 3 года назад
Yes it's possible. Here are some ways to connect a Google sheets table to a database: www.quora.com/Is-there-a-way-to-connect-Google-sheets-to-MySQL?share=1
@jesuitsgvn
@jesuitsgvn Год назад
Thanks for this great video and explanation. Can you suggest a way to do exactly this without using the "fetch" command? Unfortunately my hosting provider does not allow fetch.
@mccormix
@mccormix Год назад
You will need to find a hosting provider that allows fetch. Almost any hosting provider will allow this. For free you can use GitHub pages.
@dentReviews
@dentReviews 2 года назад
i followed your code to a T, but when i get to the first step where it dumps the cell data into the page (7:05), nothing happens on my page. no data. Sheet is public, sheet link is correct, quadruple checked all the code... no idea why, but mine isn't pulling date into the html...
@dentReviews
@dentReviews 2 года назад
fyi, if i click the link it does download the csv file, so that appears to work... but the javascript doesn't appear to be working.
@iveelbold
@iveelbold Год назад
same here..
@patrick_wade
@patrick_wade Год назад
yeah same here, double checked code. On inspect i get the CORS policy error. Is this a new thing since this video tutorial.
@mccormix
@mccormix Год назад
It seems like they changed something on the server and this no longer works.
@tazulislam2698
@tazulislam2698 2 года назад
Sir, how can i write, edit, delete google sheet rows and cells using this tricks.
@mccormix
@mccormix Год назад
Using this technique it's read-only. If you want to write, edit, or delete you will need to use the Google Sheets API.
@danielbastos3991
@danielbastos3991 2 года назад
Great video! Thank you, Chris! I'm trying to add a css to create different "cards" for each row data (I'm also trying to add buttons). But when I tryied, the CSS was applyied just once to all the data in the page. I tryied to create a div, but when I do this, I only receive the data from the 1st row. Exist another workaround to create those tipes of "cards"? What I did: csv.forEach(function(row) { main.classList.add('card'); div= main.innerHTML += row.Title + "" + row.Date + "" + row.Tag;
@mccormix
@mccormix 2 года назад
You need to use something like this: div = document.createElement("div"); div.classList.add("card"); main.appendChild(div);
@cotychaveS
@cotychaveS 2 года назад
puedes usar bootstrap ejemplo: main.innerHTML += ` `+row.NCONTRATO+` `+row.TIPO+` `+row.SERV+` `;
@RiiiiNNN
@RiiiiNNN 2 года назад
Thank you this great video sir. But, can you please do it with a dropdown choices? Thank you.
@mccormix
@mccormix 2 года назад
I'm sorry, I don't know what you mean. A dropdown of choices for what?
@RiiiiNNN
@RiiiiNNN 2 года назад
Dropdown lists of items for example
@brianrompis7467
@brianrompis7467 2 года назад
Thank you, sir. Do you know how to address the other sheet if there are multiple sheets in the document?
@brianrompis7467
@brianrompis7467 2 года назад
Nevermind, found it.
@markverhulst8886
@markverhulst8886 2 года назад
Where did you find the code for other sheets?
@markverhulst8886
@markverhulst8886 2 года назад
@@brianrompis7467 do you have example of using the other sheets in google sheets?
@mccormix
@mccormix 2 года назад
It is possible to download a different sheet. Here's how: 1. When you switch sheets in Google Sheets, you will see the URL change with a parameter like `#gid=12345` on the end. 2. Copy the `gid=...` part. 3. Paste it onto the end of your fetch URL in the web app with an & like this: `&gid=...`. After that when you make your request it will be for the sheet you targeted.
@mccormix
@mccormix 2 года назад
Yes, you must use the `gid=` parameter, copied from the original Google Sheet URL when you switch sheets. See my other comment for more details.
@cotychaveS
@cotychaveS 2 года назад
can you share the code to search please, thank you very much
@KLead963
@KLead963 2 года назад
Could you please help? I need to know how to transfer data from google sheet to g-suit admin directory by using submit button for example! or when I submit a google form, the google form inputs go automatically to g-suit admin directory! I hope that I explained what I want correctly, please advise, thanks.
@mccormix
@mccormix 2 года назад
Hello! I'm sorry, I don't know how to do this. Best of luck finding a solution!
@Vietnamyearsofhistory
@Vietnamyearsofhistory Год назад
Hi admin ! THis code do not work with Browser Usage from 10'39 I did exactily like you How to fix??? Please
@mccormix
@mccormix Год назад
I guess they have changed something on the server side and this no longer works.
@MaiconGonzalez1
@MaiconGonzalez1 2 года назад
very nice and everything but it did not work for me, difficult to put together the library as you are.
@mccormix
@mccormix 2 года назад
Hello Maicon, sorry it didn't work for you. I intentionally move fast in the video so it doesn't get boring. If you let me know what error you are having maybe I can help. (Had to edit my comment as I thought you were replying regarding a paid product, whoops!)
@Coder-ki4hq
@Coder-ki4hq 2 года назад
Can you suggest how to automatically update data on web page as soon as there is some updation on excel sheet. As refreshing the page again and again is not a good option nor is setInterval or timeout function. Kindly reply ASAP, a bit urgent
@mccormix
@mccormix 2 года назад
Apart from polling using setInterval, the way to accomplish this is to use the Google Drive push notifications interface. You can find more info about that here: developers.google.com/drive/v3/web/push
@bilaltopuz9808
@bilaltopuz9808 2 года назад
@Elevationprint
@Elevationprint Год назад
Doesnt seem to work now.
@mccormix
@mccormix Год назад
Yes they must have changed something on the server side unfortunately.
@daniel-hv4qy
@daniel-hv4qy 2 года назад
Can someone please tell me what did i do wrong?
@mccormix
@mccormix 2 года назад
Could you please describe your problem in more detail so that people can help you.
@StijnHommes
@StijnHommes 2 года назад
You mean a static single page *website*. You know, the bit with the html extension.
@shopifypro
@shopifypro 2 года назад
Subswibed
Далее
Live coding an app to prank my family
3:27:55
The Most Elite Chefs Ever!
00:35
Просмотров 4,1 млн
Google Sheets - JSON API, Wep App - e.j1 p.1
23:04
Просмотров 35 тыс.
Web Scraping Made Easy With Google Sheets
10:49
Просмотров 5 тыс.
Add data to Google Sheet using App Script || Hemendra
14:02
How I Coded An Entire Website Using ChatGPT
18:22
Просмотров 1,9 млн