# Firebase Realtime DB access via the Web API

**URL:** https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182
**Category:** Questions about Thunkable X
**Tags:** firebase, webapi, realtimedb
**Created:** [January 30, 2021, 9:54pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182 "2021-01-30T21:54:35Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [January 30, 2021, 9:54pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/1 "2021-01-30T21:54:35Z")

</div>

Okay, so Ive tried to follow along the Web API tutorial video here; [How to use the Thunkable Web API Component - YouTube](https://www.youtube.com/watch?v=rUnWhwHHmO4)

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

 ![web api](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/8/08c25c60ce2dc505c9ec6b281b62e8245051021a.png)

And then i created this code block,

 ![block](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/9/7958a1cb89a7c0a43f0a9eabbab24392a2eea6dd.png)

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.  
 ![firebae](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/a/ea9fed2658790a45e8a2c02ba026be034c8f7c94.png)

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 🙂

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 31, 2021, 6:09am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/2 "2021-01-31T06:09:06Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![thecodingmasterabeer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/thecodingmasterabeer/32/90158_2.png) [@thecodingmasterabeer](https://community.thunkable.com/u/thecodingmasterabeer)
#### Post date: [January 31, 2021, 10:05am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/3 "2021-01-31T10:05:20Z")

</div>

> [@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.

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 9:14am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/4 "2021-02-01T09:14:49Z")

</div>

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;

 ![component.](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/c/4c49fe0a3adc2bd52dbfcea60977c5431ce58e7b.png) ![compont3](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/7/271df5fc5b66a74a9c37e935b6014638dd5fd172.png) ![component2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/e/6e012f38393fdbc9d65a4757cb187d798361bf77.png)

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 9:19am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/5 "2021-02-01T09:19:04Z")

</div>

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?

 ![new project](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/a/4af5117aa42621d8ed74d0a20729fc6a101a515b.png)

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 9:25am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/6 "2021-02-01T09:25:32Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/f/3f1078ea4d8ca4f0533f26a22a7fc41f0ff78f37.png)

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

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/1/9145d28ac6ca242a33f4d4a3a83e94feab2c5a53.png)

Hope this helps

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

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [February 1, 2021, 10:45am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/7 "2021-02-01T10:45:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 11:18am UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/8 "2021-02-01T11:18:31Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 3:19pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/9 "2021-02-01T15:19:36Z")

</div>

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](http://community.thunkable.com/t/cloud-variables-and-private-firebase-connection-doesnt-seem-to-work/1076100)

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?

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [February 1, 2021, 3:24pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/10 "2021-02-01T15:24:54Z")

</div>

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

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 4:09pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/11 "2021-02-01T16:09:56Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/e/fed6a8a156fe015732a0d39e4c26b6202a89cc1c.png)

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.

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 1, 2021, 4:31pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/12 "2021-02-01T16:31:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 7:32pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/13 "2021-02-01T19:32:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 7:44pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/14 "2021-02-01T19:44:20Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 7:52pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/15 "2021-02-01T19:52:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 7:54pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/16 "2021-02-01T19:54:45Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 8:18pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/17 "2021-02-01T20:18:11Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 8:46pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/18 "2021-02-01T20:46:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![roidanielsen](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@roidanielsen](https://community.thunkable.com/u/roidanielsen)
#### Post date: [February 1, 2021, 8:54pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/19 "2021-02-01T20:54:31Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [February 1, 2021, 9:20pm UTC](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182/20 "2021-02-01T21:20:35Z")

</div>

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

[Next page](https://community.thunkable.com/t/firebase-realtime-db-access-via-the-web-api/1076182.md?page=2)
