{"id":5379,"date":"2024-12-27T16:18:46","date_gmt":"2024-12-27T16:18:46","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5379"},"modified":"2024-12-27T16:25:04","modified_gmt":"2024-12-27T16:25:04","slug":"app-inventor-firebasedb-tutorial-signup-login-screen","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/app-inventor-firebasedb-tutorial-signup-login-screen\/","title":{"rendered":"App Inventor Firebasedb Tutorial \u2013 Signup Login Screen"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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. <\/p>\n\n\n\n

First, let\u2019s make a simple user interface for our app. <\/p>\n\n\n\n

Open up MIT App Inventor and start a new project. Give it an appropriate name.<\/p>\n\n\n\n

For screen 1, make align horizontal and align vertical both center. Make the background color: blue.<\/p>\n\n\n\n

Add a text box from the User Interface palette.<\/p>\n\n\n\n

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 \u201cEnter user name\u201d<\/p>\n\n\n\n

Add a password textbook from the User Interface palette. Rename it to passTxt.<\/p>\n\n\n\n

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 \u201cEnter password\u201d<\/p>\n\n\n\n

Add an empty label from the User Interface palette with height 1% between these two textboxes for spacing.<\/p>\n\n\n\n

Add a horizontal arrangement from the Layout palette.<\/p>\n\n\n\n

below the text boxes.<\/p>\n\n\n\n

Make align horizontal and align vertical both center.<\/p>\n\n\n\n

Make height 15% and width fill parent.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Select this button and duplicate by pressing Ctrl + C and Ctrl + V<\/strong> on the keyboard for Windows OR Command + C and Command + V<\/strong> on the keyboard for MacOS. Rename it to signupBtn and change the text to Signup.<\/p>\n\n\n\n

Add an empty label with a width of 2% between these two buttons for spacing.<\/p>\n\n\n\n

Add a Firebase component from the Experimental palette. Also, add a notifier component from the User Interface palette.<\/p>\n\n\n\n

Now, we have to create and set up our Firebase realtime database.<\/p>\n\n\n\n

Search for Firebasedb in Google and choose the first link. I will also give this link in the video description.<\/p>\n\n\n\n

https:\/\/firebase.google.com<\/a><\/p>\n\n\n\n

Make sure that you have logged in with your Google account.<\/p>\n\n\n\n

Then click on \u201cGo to console\u201d button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Click on Add Project.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Give it an appropriate name.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Accept the terms of service if they ask and click on the Create button.<\/p>\n\n\n\n

Click on the Continue button on the Google Analytics screen.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Add a Google Analytics account and press the Create Project button. It will take some time.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The Project overview window will open.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Click on All products and in the dashboard, choose Realtime Database.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Click on the Create Database button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, we have to set up our realtime database. First, choose the location.<\/p>\n\n\n\n

Very important:<\/strong> Choose the United States<\/strong> option otherwise Firebase db component will give an error in your app.<\/p>\n\n\n\n

Click on the next button after choosing the location.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Let it stay in locked mode and click on the Enable button. The database will be created.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Once it has been created, go to rules.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Make read and write true. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Publish these changes.<\/p>\n\n\n\n

This is a free plan called Spark<\/strong> and you are allowed 100 connections at a time and 1 GB data storage. <\/p>\n\n\n\n

If you want more storage and connections, then upgrade from this plan.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now go to the data tab and click on that pin-like icon to copy the URL.<\/p>\n\n\n\n

Go back to your project in MIT App Inventor. Uncheck the \u201cUse default\u201d checkbox in firebaseDB component\u2019s properties and paste the copied URL in the firebaseURL field.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Add another screen with just a label saying “Welcome”.<\/p>\n\n\n\n

Now go to the blocks section. The code is the same as the one for the CloudDB app.<\/p>\n\n\n\n

When the signup button is clicked, we will store the password as a value against the user name as a tag in the firebaseDB.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

When the login button is clicked, we will get the password against the user name.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

I hope you liked this tutorial. Happy Coding!<\/strong><\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

You can also have a look at the video tutorial for this app:<\/p>\n\n\n\n

\n