Firebase Realtime DB access via the Web API

[roidanielsen]

Okay, so Ive tried to follow along the Web API tutorial video here; How to use the Thunkable Web API Component - YouTube

I want to apply it, to the Firebase Realtime DB, and access it through Web API, since there doesnt seem to be a component for editing my database in the thunkable X, even though i see it mentioned a lot around here. (please correct me if im wrong).

Anyway, i setup a Web API component like so, but i might be wrong here. I only added the URL, i’m not sure if i should add anything more? I know there is a API key in firebase somewhere, but im not sure if it should go the settings somewhere

And then i created this code block,

And this is how my database JSON structure is looking.
Also, i set my rules to true, so they are always open, and AFAIK should not need authentication.

When i click the button in the live web thingy, the screen just flashes out of existence, never to be seen again, so i have no idea what the problem is

[muneer]

First of all, what you are trying to accomplish here does not require API at all because it is natively available in Thunkable.

When using API, never trust the system. Therefore you should always check for status and error before proceeding to read the response of the API.

You are getting a white screen because the API call failed and you need to check the error and status to see what exactly went wrong.

[thecodingmasterabeer]

@muneer

First of all, what you are trying to accomplish here does not require API at all because it is natively available in Thunkable.

Agree! The Firebase Component is available on Thunkable, and you don’t need an API for this.

[roidanielsen]

Hello muneer!

How can i check the data, when it crashes whenever I try to call the API ?

I cannot find the Firebase component anywhere, can you direct me to it?

I have checked here;

[roidanielsen]

I should mention, I have ticked this box when i created my projects, but it seems the “new” designer does not have the Firebase component?

[muneer]

Actually the firebase components are in the Variable Drawer. These can be used in both old and new UI

So if I have in my databse the top level as UserNames and the second level is, for example, my name and the third level is Age

Then I will use the following to read the age and show it is a label

Hope this helps

[Note]
I’m assuming here that you have already supplied the API Key and the Database URL in the project settings

[luv.ak.tech]

you need to use cloud variables instead app variable for Firebase Component

[muneer]

You are right. I was just using it as an example and the variable when you remove and put back from the drawer it reverts to app type.

I have updated the image to avoid confusion. Thanks.

[roidanielsen]

Thank you for the replys.

I have already used the above solutions, see here Cloud variables and private Firebase connection doesnt seem to work? - Thunkable Discuss - Community

my problem was that i seem to only change the database entries, which i manually created, but i want to Add new entries.

How can i do that? Do i need to structure my db some special way? or do something specific in my blocks?

[luv.ak.tech]

just create a new name and it will create a new key

[muneer]

Suppose we want to record the hobby of another user “JohnDoe”, we will do this

If the key hobby does not exist, it will be created and the value will be saved in it.

We can read it like the last example by providing the Path to the data inside the database.

[tatiang]

Not sure if backwards slashes also work but I’ve had success with forward slashes (/) in the cloud variable name.

[roidanielsen]

Thanks for the replys guys, i realized halfway that i did not need to use the web api at all, but just do what @muneer told.

I misunderstod the way to use it.

On a side note, what kind of data can i put inside my firebase database? Can i also for example upload media, such as images? I know Airtable can have images in it.

[roidanielsen]

On a second site note,

I am switching back to the old designer, instead of the new “drag and drop” one.

It seems to be lacking basic grouping features, that the old one has, such as responsive rows and columns. This seems to be quite impossible to achieve a good looking results across device screen sizes, which is sad.

The new one is much more intuitive, but it lacks the fine controls of being able to add padding, locations preferences etc.

[muneer]

@tatiang It works both ways for me but I’ll remember next time to use the forward slash.

[muneer]

Yes you can store anything but you need to think of all the data structure as JSON objects with a hierarchy to comply to the needs of your data needs.

[roidanielsen]

Yes, so but for example a JSON property of “profile picture”, needs to hold the URL for the media image yes? it does not accept raw image data, as i remember?

[muneer]

Actually, in Firebase, there is the Realtime DB and there is the Storage. You will naturally store the image in the Firebase Storage and provide the download URL to the Firebase Realtime DB. However, there is no direct way to do that in Thunkable at the moment.

Therefore, you will use a cloud storage such as cloudinary to save the image and pass the URL to the RTDB.

[roidanielsen]

I see, thank you for the reply.

I will experiment a little.

Do you have maybe some pros and cons, when to use the realtime database vs using Airtable?

I’m am thinking specifically right now about saving for example items in a restaurant or a shop, and the quickest way to update prices, images, descriptions titles etc etc

I’m leaning a bit more toward Airtable, because that is a easy way to teach a new person, because it is very much like an excel sheet, which many people already know about

[muneer]

Airtable seems to be a good choice for such a project.

Another advantage of Airtable is that its tables can be directly viewed by the Data Viewer List without any coding something that is not available in Firebase.

The drawback is the limit of the free Airtable service which is only 1200 total rows in all tables which is something your project will reach to fairly quickly.

Another advantage of Airtable is the ability to set any column to type attachment which can handle any file type including images but again there is no native way to handle such from Thunkable.

Happy Thunking