Alright, so I’ve got this little inventory site I’m making for my job. I’ve put all the code I have for it in a little codepen here, so everyone can see what I’m working with:
I’ve got everything working like I want…you can see the variable values in the table, add and subtract values based on using/restocking items, some conditional formatting…all good. I’m working on this code using VisualStudio Code, with a little node/gulp/browsersync system I’ve managed to get working. (I had to follow a loooot of tutorials to finally get that to work, so I don’t fully understand what it does or how it’s working…just that it does work.) Just put it all in a pen so it was easy to share with others. Also, I’m working on a Windows 10 environment.
My issue is, it doesn’t store the updated values long-term / across refreshes. Which makes sense, since currently the values are hard-coded in my js file. I know I need either local storage or a database solution to solve this…I know they need to be stored somewhere outside of the code, that can then be accessed when I need to update the values.
However…I’m struggling on finding the easiest/best way to do this. Things I’ve tried so far:
- Google Sheets API. I have the data stored in a spreadsheet there, and it seemed like I could use the API to access it with my code. Haven’t managed to get anything to work with that yet. Again, may just be that I can’t figure out how to properly write the code…reading the articles it seems pretty straightforward, but I can’t seem to get it to show anything for me.
- Embedding my Google spreadsheet into an iframe on a page. Works great on my computer, I can edit and see the whole sheet. However…it’s super buggy on my phone, using the mobile browser (chrome). It moves part of the bottom of the sheet to overlap the top for some reason, and I can’t edit anything. I can request the desktop site, but it’s super slow. The whole point of this (instead of just accessing the spreadsheet from my phone’s drive app) is that the drive/sheets shortcut is somewhat slow on my phone, and most mobile sites are a bit faster. But if I can’t edit it and even see it properly…not worth it. Something’s buggy with iframes on mobile, I think. And as my main access point for this site will be my phone, while I’m at work…kinda need it to work on mobile.
- Looked into AirTable and FireBase as options…AirTable seems really nice, but trying to read the docs to figure out how to access it from my code seemed too over my head. FireBase felt way more technical than I could understand right now, and also seemed like it involved more than I really need for this project.
- Considered using an older site I built, that had a database, and just re-writing the code to fit the data model I need for this. But…it just felt like waaaay to much work to almost completely rewrite the whole thing, plus that old site already had borrowed code from a class, which was the only way I could get it to work (since I didn’t understand what it was really doing, other than accessing the database). It just felt like a step backwards, and not the best for this project.
I’m realizing that I’m likely getting ahead of myself here…I’m still in the front-end section of the FCC course, and though I did some work with databases in the CS50 course on EdX, it mostly used php which I haven’t been messing with lately. I really wanted to figure this out with JS, as that’s more of what I’m learning now and more where I see my interest currently. Just…every Google search I do uses frameworks I haven’t even looked at yet, or the sample code I find doesn’t seem to work, and I just can’t seem to actually get anywhere.
So I guess what I’m asking is…if this was your project, and you needed a way to store some variable values that you could access across multiple sessions and update when needed…how would you do it? Are there any articles for storage/databases you’ve found that made sense to someone near the beginning of their learning that might help? Or even some pseudo-code to help me go in the right direction? I’m open to using most anything…I’m just not really sure where to go from here. I want this project done because it’ll help me a good bit at work, and I just can’t figure this last bit out.