App Inventor Firebasedb Tutorial - Signup Login Screen

Hello friends and welcome to Obsidian Soft

Many friends had requested a tutorial for Firebase DB in MIT App Inventor so today I will teach you the easiest steps for setting up the Firebase database, connecting it to our MIT App Inventor app, and storing or getting data from it.


I will be using the example of my sign-up login app that I previously taught with CloudDB.

After watching this tutorial, you should be able to convert any app that uses cloudDB into a Firebase database app such as my chatting app, quiz app, customer record app, etc. 

First, let’s make a simple user interface for our app. 

Open up MIT App Inventor and start a new project. Give it an appropriate name.

For screen 1, make align horizontal and align vertical both center. Make the background color: blue.

Add a text box from the User Interface palette.

Rename it to nameTxt and make background-color: white.  Make the width 50%, height 8%, font bold, and font size 20. Change the hint to “Enter user name”

Add a password textbook from the User Interface palette. Rename it to passTxt.

Give similar properties as nameTxt. Make the background color: white, font bold, font size  20.  Make its width 50% and height 8%.  Change the hint to “Enter password”

Add an empty label from the User Interface palette with height 1% between these two textboxes for spacing.

Add a horizontal arrangement from the Layout palette.

below the text boxes.

Make align horizontal and align vertical both center.

Make height 15% and width fill parent.

Drag and drop a button from the User Interface palette inside this horizontal arrangement. Rename it to loginBtn. Make the background color black. Make font bold, font size 22, width 35%, and change text to Login and color to white.


Select this button and duplicate by pressing Ctrl + C and Ctrl + V on the keyboard for Windows OR Command + C and Command + V on the keyboard for MacOS. Rename it to signupBtn and change the text to Signup.

Add an empty label with a width of 2% between these two buttons for spacing.

Add a Firebase component from the Experimental palette. Also, add a notifier component from the User Interface palette.

Now, we have to create and set up our Firebase realtime database.

Search for Firebasedb in Google and choose the first link. I will also give this link in the video description.

https://firebase.google.com/

Make sure that you have logged in with your Google account.

Then click on “Go to console” button.

Click on Add Project.

Give it an appropriate name.

Accept the terms of service if they ask and click on the Create button.


Click on the Continue button on the Google Analytics screen.


Add a Google Analytics account and press the Create Project button. It will take some time.


The Project overview window will open.


Click on All products and in the dashboard, choose Realtime Database.


Click on the Create Database button.

Now, we have to set up our realtime database. First, choose the location.


Very important: Choose the United States option otherwise Firebase db component will give an error in your app (this was the case at the time of making this tutorial).

Click on the next button after choosing the location.

Let it stay in locked mode and click on the Enable button. The database will be created.

Once it has been created, go to rules.

Make read and write true. 

Publish these changes.

This is a free plan called Spark and you are allowed 100 connections at a time and 1 GB data storage.

If you want more storage and connections, then upgrade from this plan.

Now go to the data tab and click on that pin-like icon to copy the URL.

Go back to your project in MIT App Inventor. Uncheck the "Use default" checkbox in firebaseDB component’s properties and paste the copied URL in the firebaseURL field.

Add another screen with just a label saying welcome

Now go to the blocks section. The code is the same as the one for the CloudDB app.


When the signup button is clicked, we will store the password as a value against the user name as a tag in the firebaseDB.

When the login button is clicked, we will get the password against the user name.

The getValue procedure will trigger the GotValue event. Here, we will check if the entered password is the same as the password retrieved as the value against the tag user name from the database. If it is the same, we will let the user log in and take him to the second screen. If not, we will show a message using the notifier.

So, this is done and you can see how easy it was to setup Firebase database and connect it to an MIT App inventor app.

I hope you liked this tutorial. Happy Coding!

If you like my tutorials, consider supporting me by buying me a cup of coffee by pressing the button below:

You can also have a look at the video tutorial for this app:

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.

Please like my social media pages for more educational resources and tips.
Pinterest:
For links to free educational apps, have a look at the educational apps page

Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more