Read Data from Firebase DB - Tutorial for Beginners

In this tutorial you will learn how to control some text from firebase realtime database.

Before we begin, I would like to remind you not to use Sketchware mods.

Connecting Firebase and Sketchware

Create a new blank project in Sketchware

Next, follow the official guides for setting up firebase at docs.sketchware.io
Once you have successfully connected firebase to your project, you need to do some configuration with firebase realtime database.

Creating the database

1. From the firebase console home page, under menu, select Realtime Database. 

Be sure you are on Realtime Database, NOT Cloud Firestore.

2. Click Create Database

3. Select Start in locked mode and click Enable

Defining the rules

Your database has now been created, but your app won't be able to read or write to it. To fix this, we are going to the rules tab and edit the rules.

This is what the rules should currently look like. 

{

  "rules": {

    ".read": false,

    ".write": false

  }

}

We want .read and .write to be enabled so our app can read and write to the database. Change the rules to these, and click publish.

{

  "rules": {

    ".read": true,

    ".write": true

  }

}

Technically, we don't need .write to be true since our app is only reading data.

You probably noticed the warning saying Your security rules are defined as public, so anyone can steal, modify, or delete data in your database.

Since this is just a tutorial, that's not a problem, but if you create your own app you will need to change the rules. There's a good app for generating rules here https://project.sketchub.in/?id=665.

We're now done working with the Firebase Console, so head back Sketchware to continue.

Programming the project in Sketchware.

Note: you can download the finished project here https://project.sketchub.in/?id=1091

1. Add a textview that says Hello, I'm some text. I'm here to remind you not to use Sketchware mods. This will remind you not to use Sketchware mods. This is very important, the project might not work without it ;)

2. Add another textview. I'll give mine the ID text_change. This is the one we will set from the database.

3. Head over to that COMPONENT tab and add a Firebase DB component. I'll give mine the name AccessDB and data location Component.

4. Add a map variable, I'll call mine MAP_VAR. 

5. Add these blocks to OnActivityCreate and run the project once. This will create some data in the database. 

6. Now that you have some data in the database, remove these blocks otherwise your data will get overwritten.

7. Add a listmap, I'll name mine LIST_MAP.

8. Add the following blocks

The get value at (number) will always be zero.

The key is the one you specified in the map variable, in this case MAP_KEY.

If you run the project now, nothing seems to change. That's because you need to change the data in the database.

9. Go back to Firebase DB and change the data. Press the Enter key to save the data.

In my case, I changed it to Some text I specified in the database.

10. Now run the project and see the text magically change.

Download the project here: https://project.sketchub.in/?id=1091

Some things to keep in mind: 

If the device is offline, it can't access the database. You can set the text in Sketchware to Unable to access database or similar. If the device is online, it will get the text from the database, and if offline, show that.

If you remove keys, the app will crash since it is trying to access a key that doesn't exist. 

Thanks for reading my tutorial. 

If there is interest, I might make a tutorial on writing data to the database. That way you can have an Admin Console for your app and not have to deal with the firebase website on mobile.

If you have any questions, ask them below and I'll try to answer as best I can. And remember, don't use Sketchware mods or your phone might explode in a ball of fire.