Firebase with a Web Component

INTRO

UPDATE (OCT 2024)

Google are changing the way they provide Cloud Storage. You may need to upgrade your no cost Spark Plan to the PAYG Blaze Plan. You still get the "Always Free Tier" that you get in the Spark plan though, you would just need to set a budget to get alerts, or keep a close eye on your usage. Project IDs may also change for new "buckets". Read all about the changes HERE

UPDATE (SEP 2024)

New section added to look at using Anonymous SignIn with your app

UPDATE (APR 2022)

Google appear to have recently updated the realtime database, can't find any release notes about the changes that affect this guide. Everything should still work, but the returns in responseContent may be slightly different, and you may need to include escaped double quotes on your data if you also want to use the AI2 firebase component with the data.

Yes, you read that correctly, access Firebase Realtime Database and Storage, both secure and unsecure, using just the Web component. No built-in experimental component, no extensions, no smoke and mirrors with javascript and html, just pure blocks to create, read, update and delete data and files on Firebase.

This one has been rattling around at the back of my head for a couple of years, and given that Firebase is one of the big headaches for most developers trying to use it, I thought I would set out to demystify the whole thing, and use the Firebase REST API and Authentication SDKs to help me.

My thanks, as always, goes to the ones who have gone before, all the work done by mirextremapps and his extensions, and for the useful set of videos created on youtube by "Taozilla". There are links to their Resources further down this page.

I will start by looking at Firebase Security, the good reasons why you should use it, and how to set some basic rules. Then an example of using Firebase Database and Storage without any rules, then an example employing Secure Rules and User Authentication. Again, refer to the Resources links at the bottom of this page for links back to the official Firebase documentation.

Please work your way though the parts in order, everything will make much more sense that way....

PART 0: How to set up Firebase for App Inventor

PART I: Firebase Security

PART II: Firebase Demo with No Security

PART III: Firebase Demo with Secure Rules

PART IV: Firebase Demo with Anonymous SignIn