BigQuery implementation in vtecx app

Photo by NASA on Unsplash

Currently, I’m working with the Contrars developer team. Here we’re working on a service named vte.cx.

So what is vte.cx?
— In short, it's a back-end as a service(BaaS) that allows you to create web services using JavaScript frameworks such as React, without doing server-side works(Pretty interesting huh😎).

But in this part, I’m not going into details about what vte.cx is, rather I’ll try to write down step by step guide How we can implement GCP’s bigquery into a vte.cx app.

1. Get bigquery private key: IAM and Admin > Service Accounts > Action > Create key > (create JSON type private key)

generate service key

Through this step, we’ll get a JSON file and we’ll use this key as our bigquery setting.
Now copy the content from the JSON file we just created to our apps bigquery.json file

setup/_settings/bigquery.json

and the file looks like this:

2. Now that we set up our bigquery settings. We need to update setup/_settings/properties.xml file too. Add these three lines of code

_bigquery.projectid=your_project_id
_bigquery.dataset=your_dataset
_bigquery.location=asia-northeast1

And the file would look like this

3. Now we are ready to link bigquery with our vte.cx app.

npm run upload

4. Let's write some server-side code this time. Create a server-side file first

src/server/post-bq.tsx

So this piece of code expects that you have an entry schema named foo with child bar and baz

5. Deploy the server file

npm run watch:server -- --env.entry=/server/post-bq.tsx

6. If you don’t have the schema, you need to add entry schema from the vte.cx admin panel. And after add, the screen would look like the image below.

Entry Schema

Download the templates using the command

npm run download

7. Now you are ready to check the implementation. Enter the URL below:

http://localhost:8000/s/post-bq
or
https://your_vtex_service_url/s/post-bq

8. If you successfully completed those steps mentioned above. You should see a log into your service log section.

BigQuery data

If you can see the log from your vte.cx service panel then congratulations 🥳 ,
You’ve just implemented basic bigquery operations in the vte.cx app.

I was implementing these things yesterday night. At that moment was thinking why don’t I write down the steps I’m following, it would be good if this helps me later and if it helps the other somehow that would be great 😊.

As I know the best way to learn is by doing. So play around 😎

-Thank you