How to update files in Google Cloud Storage with JavaScript - javascript

I've recently built a static website with a bucket via the Google Cloud Storage. The bucket includes a JSON file "data.json" which includes all the data required for the website. I knew how to use JavaScript to fetch the JSON file, just simply
fetch("data.json")
But I'll need to update the content in the JSON file and overwrite the file, what should I do then, any ideas?

The Cloud Storage Client library is not available for JavaScript. But there is the JSON API you could access whith JavaScript.
You have to keep in mind that this would be easy to attack. So there has to be some kind of security.
I would recommend moving your website into a Python Flask App and to use Google Cloud Run. It is really cheap, really simple and you have a native implementation for Cloud Storage.

Related

How to fetch data as .csv file from client with node.js application

i have written a game in javascript with the p5.js library. Now i want to host the game on a server to conduct a survey on a service like amazon turk. Ideally the clients recieve a URL to the game and play it while in-game actions are tracked and stored in node.js or on the server and exported as a .csv file once they are done playing. After they finish the game the csv. file should be sent automatically to a location that i can then access. I have zero experience in server hosting or similar topics.
So a couple questions arise:
Is a hosting service like Heroku suitable for hosting the game?
Do i need to use node.js to make this happen?
Which of those two would extract the data and store it to a csv? And where is the file stored?
How do i get or access the csv. after?
Any alternative takes to solve the problem?
Thanks alot in advance!
github repository: https://github.com/luuuucaaa/schaeffers-charade
game on github pages: https://luuuucaaa.github.io/schaeffers-charade/
If I were you, I would do it like below:
Host
Since your project is basically a html & JavaScript static contents,
AWS S3's static hosting would be sufficient (Also, the current git hub pages is another option if you just want to host it).
Hosting on node.js environment is also available using webpack serving, but it requires additional works. (but if you require other npm packages to generate .csv file, you need webpack anyway to bundle js file and attach it to html)
Data Storing
Two ways are considerable,
the first is to store it on the filesystem. Generate .csv via JS script within your app, and save it where the app is hosted (if you go with s3, you can access it afterwards, but I'm not sure if it can write objects by script)
The second is to post the data to another API endpoint. (for example building an API Gateway on AWS that triggers Lambda, which stores it on S3)
It's merely an example and I don't know exactly what you want to achieve, but take it into considerations. Good luck. Cool game BTW.

I'm looking to connect a Google VM to a website

I need reflection, vision and documentation on my problem.
I wrote a python script to calculate something from an API and export the result in a CSV file. Then, I use a JavaScript script to display the data from this CSV file on a building website.
I need to have the latest data available for my website, so I opened a VM instance in Google Cloud Platform (Google Compute Engine) and set a Crontab job to run automatically my python script. The calculation is now executed every day and the result is exported to the CSV file, but stored in this VM instance.
Here is my goal: How can I get my CSV file on my website? The CSV is always on the virtual machine and I do not know how to communicate with my JavaScript script to the VM. Do I have to communicate directly with the VM? Do I have to go through another step before (server, API, etc.)?
I cannot find a specific solution for my problem on the internet.
Thanks in advance.
How can I get my CSV file on my website?
By making your python script output the CSV into your website's root folder.
Example, if you're running apache, chances are your root folder is somewhere in /var/www/html/...
If the script is generated from another machine (not the one with your website), then I would host it and make the server hosting your website fetch it via cronjob.
Basically:
If your CSV is generated from the same machine as the website that will use it - simply output it to the website's folder
If your CSV is generated from another machine, make it publicly accessible and have your website's machine cronjob fetch that CSV a few minute after it's generated.
I would suggest you a different approach than using a VM for calculating and storing your CSV.
The idea would be using a Python Cloud Function instead, that will be run by Cloud Scheduler and Pub/Sub.
This function will generate your CSV file, that will be stored on Cloud Storage. Here you can find an example of how to upload an object to Cloud Storage using Python.
Then, you need to give your website the ability to access that CSV file in Cloud Storage when required. As indicated by #guillaumeblaquiere, the exact way will be dependent on where your website is hosted: especially, it will constraint the auth mechanisms that you need to use to download your data. The documentation in GCP provides several examples about this matter.
The documentation of Google Cloud provides an example of the proposed architecture.
I came across an article that, in a certain way, describes the setup I suggested as well.
Please, consider review the costs of the different mentioned products.

How to read in sqlite information in javascript without writing your own API?

Most of my experience with database manipulation has been through node.js, and writing simple APIs for class. I'm now trying a private project, where I would write a database, and read in information from it to display on a website hosted through github. however, for what I'm doing, an API seems unnecessary, as I should be able to upload the database file onto github, and have the website read from that, rather than hosting a node.js server. So, what I'm asking is at a high level, how would I get information from a database into a form I can read onto a website, and would just creating a json locally, or storing the info some other way, be a better solution?
If the database is very large, then this really should be done server side.
If the database is small, one option is to convert the sqlLite database to JSON, and then just use fetch to grab, and just parse using Javascript.
But another option I think you might like, is use a sqLite client compiled for the browser. If your browser is relatively new and supports webAssembly you might find this interesting.
https://github.com/sql-js/sql.js
Basically sqLite compiled for the browser..
One issue with any of these is security, anybody could of course download the JSON or Sqlite database in full and have full access. Server side you can implement user authentication etc.

Store and edit data using ReactJS

I am building an application using ReactJS. I am trying to find out how to store data and to edit it. I tried to store it on my computer with 'fs, 'browserify-fs' but it didn't work.
Should I use express, or is there any other alternatives ?
If you are using React you are operating in the browser. Your option for storage is in local storage. This is explained here.
Examples of code are:
// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();
Note this is stored in the browser and can be easily cleared. You are going to realize that you need a back end solution. This is a server you can send requests to which has an API (a place you send requests to) which executes some form of operation (normally CRUD - Create Read Update Delete via a REST endpoint or GRAPHQL) to serve you back the data you are requesting from a database (MySQL, Postgres, MongoDB). This is a whole different discussion.
To store an array in local storage you will need to make it a string via JSON.stringify. An example would be:
localStorage.setItem("array", JSON.stringify(array));
In developer tools in Chrome you can go to Application -> Storage -> Local Storage and see what is saved. Here is an example:
If you want to share the data along multiple clients you should use server-side solution or if you just want to save the data for a client only you could use client-side solution provided by #diesel.
Create your own web-server
You need to create web server and a database to store your data. Database is used to store data. You could use: MySQL, PostgreSQL, SQLite3, MongoDB, ... You also need to create web service to make secure database calls.
To create web server you could use Express.js to write your web server easily.
Headless Content Management Systems (abbr: CMS)
If you don't want to spent time on creating your own web-server you could install a headless CMS to read/write your data using api endpoints provided by CMSs. Here's list of headless CMS softwares: headlesscms.org. I tried strapi which has lots of features you might need.
Here's some strapi features:
Open-source
Model builder
Extensible (plugin support)
Content editor (eg: to edit articles)
and many more
Firebase
If you don't want to spend your time on installing CMS software to your server and maintaining it regularly you could use Database service provided by Google Firebase. It is also feature rich too. Here's some features supported by Firebase.
NoSQL Database (to store your data)
Authentication (to authenticate users)
Storage (to store files)
Functions (to write serverless functions)
Machine Learning
and many more

JS Cross domain offline local storage

I have a web page that usually suppose to work offline.(without internet connection).
Once a while it's need to connect to the web and grab some data to be used offline.
I'm searching for a way to store the data locally while it connected and still have an access to the data offline.
I checked local storage and the FileSystem-API but both are follows the Same Origin Policy.
Any suggestion will be appreciate
When I was creating offline application to sync with online version I had some JSON file with required information instead of LocalStorage.
Work flow:
User requests new files to be generated (a.k.a. sync with server) using some online interface.
Generate JSON file with needed data and save it along offline files.
User downloads new files and replaces it with old ones.
Offline JS reads JSON file and gets all information.
We were using some JAVA installer (launch4j to generate .jar files and IzPack to make installer)

Categories