FirebaseDB and App Inventor

Published on February 21, 2022

A. Introduction.

In this tutorial, we will use FirebaseDB as our database in our project. FirebaseDB is an experimental component in App Inventor that is launched just recently.

Before you use the component, you are reminded:

FirebaseDB is an experimental feature which may change in the future or break. Packaged Apps built with this component may not function into the indefinite future.

This means that the FirebaseDB component might not work anytime. It is completely normal that this guide is correct, and you copy the blocks, and they do not work. Also, if you haven't, read this TinyDB tutorial first. Unlike TinyDB, you need to be online to use FirebaseDB.

🏷️ Tags: #tutorials-and-guides, #google

B. Create your FirebaseDB project.

  1. Go to https://firebase.google.com. Click on 'Get started'.

  2. Click 'Add project' or 'Create project' to create your project. Enter 'FirebaseApp' as its project name, click 'Continue'.

  3. Enable Google Analytics for the project and click 'Continue'.

  4. Select 'Default account for Firebase' and click 'Create project'. It will take 30 seconds to 2 munites to create your project because Firebase projects use a lot of resources.

  5. After you created your project, navigate to 'Realtime Database' under Build. Click on 'Create database'.

  6. Select 'us-central1' in the popup, click Next, select 'Start in locked mode', and Enable. It will also take 30 seconds - 2 minutes to load.

  7. After you created your project in Realtime Database, you should see the screen below. Click on 'Rules'.

8. Replace the code there with this.

{

/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */

/* The above line helps you to protect your database from hackers.*/

"rules": {

".read": true,

".write": true /* This line allows your database to store user data.*/

/* The above lines enable your database to get and store user data.*/

}

}

9. Click on 'Rules playground'.

10. Navigate back to the Data tab.

11. You should see 'https://fir-app-XXXXX-default-XXXX.firebaseio.com' on your screen. Click on it and copy the URL.

Step 2. App Inventor project.

  1. In your FirebaseDB component in the Designer, paste the URL into the FirebaseURL property. Uncheck 'Use Default' if you haven't.

  2. Navigate to the Blocks editor. You will see there is a collection of blocks for FirebaseDB. Like TinyDB, you have to store a value before getting it first.

However, getting the value is different. It cannot be plugged into a socket, but an event. This means that it might take milliseconds, or even seconds. It will attempt to get the value from the database. When the value is gotten, the GotValue event is called. If the tag is not found, the valueIfTagNotThere socket is returned in the value parameter in the event.

To get a list of tags, you need to call the GetTagList method. When the database got the list of tags, the TagList event is fired.

To delete a tag, use the ClearTag method.

When an error has occurred, the FirebaseError event is fired.

💬 Messages

⚙️ ✏️ EDITED 02.21.2022 - The site owner added some minor edits in the page.