Firebase with Web Component

The big one:

now updated with a section on Anonymous SignIn

and also

A couple of somewhat terse guides to using the web component and webviewer to manipulate firebase realtime database, manage authenticated users, and use firebase storage. I have also linked in a previous guide I did for securing firebase rules, which also had a few other bits and pieces for getting tag lists and data changed. Happy to answer questions etc.

The first two make no use of the built in Firebase component or any Firebase extensions

Firebase Authentication with Web component and HTML

Firebase Storage with Web Component

and also

5 Likes

(added to FAQ)

1 Like

Main guide updated to include a section on Anonymous SignIn.

Hi @TIMAI2

Hi, I'm reading your page related Firebase with a web component (RealTime Database)
I have a couple of question

1 - My app will be used in all the world.
I have read that RealTime Database is Regional (firestore is Global). Do you think this will be a problem for the app?

2 - I can not find the number of read/write/delete per day for RealTime Database

3 - in your page (PART 0) you say that "is better at the moment (Feb 2021) to use the US servers." Is it true now? (consider I'm European)

4 - in your page (PART 0) I don't understand the step related to rules "allow read, write"

5 - in your page (PART 2) you show how to upload and download/view images.
What about use KIO4_Base64 to convert images in strings, instead of using the blocks you show in your page? In this way I can save images and retrieve as for tag-value. Do you think that this would introduce disadvantages?

6 - in my app I don't need Authentication of users. All people that download my app will enter and will read/write info. They all will share info in anonymous way and someone will pay for premium info (visible to that user, only after payment, only in that moment) . Can you confirm that if users don't authenticate, I can not use the "Secure rules" email/password you describe in PART 3 of your page? Do you refer to the same email/password users usually use to enter an app?

7 - in PART 4 of you page you suggest anonymous signin to make the read/write permission available to anonymous users with secure roles.
My question is: is this applicable to my app? (no sigin, premium info visible to that user, only after payment, only in that moment)
Sorry, but I have not well understood the logic of anonymous signin...

Thank you very much!!!

No

Look at the quotas/pricing for the "free" part of the Blaze plan

You left out the bit about some users having problems with the [beta] europe-west server. The guide was written 4 years ago, so this may now not be an issue. If you are only using the web component (not the AI2 Firebase component) then you should be able to use any regionial server.

You will need to read up about Firebase Secure Rules

You can do that, but it means that you have to convert the base64 back to an image for viewing, inside or outside of the app.

You can secure your realtime database with rules, but also have rules that leave some locations open to read/write by all. This is a potential security risk though, depending on the data you have stored.

I used the email/password option (the simplest approach) for authenticated users. You can explore OTP (Mobile number) or Google Account sign in for yourself

Quite possibly the way to go...

Hi @TIMAI2 , I'm reading your documents and online pages relating Firebase RealTime DB.
I have some questions regarding conversion of my app from current Custom TinyWebDB to RealTimeDB with web component, this last suggested by you. I'm trying to do this, but it is not simple... for me :slight_smile:

My app description (current Tiny tag-value version):
Anyone can create an event (tag) . App saves event details in a list (value).
Value list is something like a 5 elements list (when, where, who, not shared info, not shared image converted in string).
Anyone can read index1, index2 and index3, but index4 and index5 are available under payment in another screen: when payment is completed a global variable becomes true, and the screen with previously not shared info will be visible. When user exit from that page, this last becomes not accessible.
Events older than 3 day will delete. In this way my DB should be not so big...

My questions

1 - How in web component can I refer to a specific index in my lists to save, read, delete items? (remember my values are lists)

2 - the target is to stay within the limits for Firebase free services. What do you think is better between store images as a string in RealTime DB vs store them in Firebase Storage? By supposing a 2MB image, does it will increase or decrease memory required if I convert it in string with KIO4_base64? I have read that in RealTime I have 1 GB free and if I use Firebase Storage I will have 5GB more for free.

3 - Will in RealTime rules (for my app) I have to define indexes with ".indexOn" ?

4 - I have to protect with rules only 2 positions in the lists (values) related to each event (tag). How can I refer to specific position in a list when I write a rule?

5 - do you think for my app I have to use rules based on data or query?

6 - my app does not ask users to sign-in with a provider: how can I use your anonymous approach? Are tokens received as for signed-in apps?

Don't use lists. Set sub tags for each item in the event (main tag)

Do the maths. If, on average, the images are 200kb in size, then the resultant base64 would be @270kb each. This would allow you to store @ 3900 images on the realtime database as base64 (ignoring all the text data entries you would need, thus reducing the number of images you could store as base64). Firebase Storage provides 10gb of free space, so you could store @ 53,000 images there and still have space for the text data on your realtime database. Only you can decide what you need.

You may have to define indexes, depends what queries you want to run.

Someone would have to work up an example to figure out what is required for this. This could be you.

As for 3. all depends what you are doing

Read my guide on Anonymous Signin

I don't know if I have to use query (and indexOn).
In my app users will save events and retrieve info related to these events (free and under payment).
Finally a list of all events will be displayed in a listview.

Can I use the sub tags as you suggested for first question? Consider that
"Anyone can create an event (tag) . App saves event details in a list (value).
Value list is something like a 5 elements list (when, where, who, not shared info, not shared image converted in string).
Anyone can read index1, index2 and index3, but index4 and index5 are available under payment in another screen: when payment is completed a global variable becomes true, and the screen with previously not shared info will be visible."

If I will have a global variable that become true when info are purchased (e. g. PURCHASED = true), could you kindly write here the rule I have to use to give acces to read, only to that anonymous user?

Ok I have read the guide. I will test it.
If the paying user will have the possibility to read purchased info only once, and users will not need to retrieve their own info, is refresh token (and securetoken.googleapis) necessary?

Yes...?

Without completely writing your app for you, I would not know. What you should probably do is maintain two sets of data, the first for items 1,2,3 the second for items 4,5. So when a user has "purchased" you can then add their uid to another set of purchased uids, which can then have access via a secure rule to the set containing items 4,5. Something like THIS

Yes. refreshToken is essential for subsequent visits to get a secureToken as the same anonymous user. The refreshToken should be stored (tinydb) on the app for the user. You could also store it elsewhere as a failsafe backup if you wish.

Dear TIMAI2, thank you very much.

What about this?

Do you tink I will have to use query and IndexOn?

As previously advised, it will depend on the queries you want to run. You can call back a larger set of data without using indexes and filter it in the app.

Thanks @TIMAI2
I will try to understand this topic better and will test it.

Hi @TIMAI2 , for now I've set up Firebase RealTime DB following your guide (I haven't set up Storage yet).
I then tried using "POST" in MIT App Inventor (see screenshot), but I get an error message:
"Unable to complete the given request with the text...with the specified URL..."
Please note that the rules are set to "test," meaning they're open.
I've tried both the US (https://...firebaseio.com) and European (https://...firebasedatabase.app) servers.
...is it a problem not having a bucket folder?
What am I doing wrong?

@TIMAI2 I'm currently in spark plan. Could my problem be related to this?

Url setup like so:

image

Your firebase url should still have the / at the end.

You can also use PUT to do it, if you want a different structure:

image
OR
image
but this one will wipe out anything else that is already there!!! Use with caution.

and there is also PATCH which doesn't wipe out everything :wink:

image

Makes more sense to use a bucket.

@TIMAI2 thank you very much for your support!!
The solution to my error message is related to the absence of "/" at the end of URL... My error was to think that if I have not a bucket, I have not to put "/".... but it is mandatory! Thank you!!!
In any case I will introduce a bucket in order to better organize tree of my database and I will 'play' with put, push, patch and so on...
Thank you

Hi @TIMAI2
I'm testing realtime code in MIT APP.
When I use the shallow=true on a node (that contain other info) I receive a string like this

"222":true,"333":true,"444":true

But I need only 222,333,444 (my tag list).
How can I do it?

After that, how can I handle this input by MIT APP blocks in order to trasform this in a list?
I need a list to manage my listview.

From the documentation:

GET (TAGS)
By using GET, with an additional parameter, the web component can return a summary of all the tags below a level, e.g. ProjectBucket. Here we use the "?shallow=true". These can then be stored in a list, by extracting the first item in each sub list, and used to select tags for action.

A post was merged into an existing topic: Get data from a list of lists

4 posts were split to a new topic: Get data from a list of lists