As suggested by some of you last week, we will be building a simple Social media app as well as some simple games as we go. When Building a social media app one of the key steps is to anticipate who your users will be and then creating a system to harness any key information. This can be easily done during the sign up or sign in process. In this lesson we will cover how to create a login Screen. We had touched on this some time back but for the benefit of those who joined us a bit later we will cover it in more detail.
In a nutshell, this is what we will learn
• How to show and hide widgets • How to use the firebase auth component to create a user
• How to create a simple algorithm that checks if a user has filled in the login form correctly.
Prerequisite
Create a firebase account for your app
Before getting started you will need to create an Account on Google's Firebase platform. Simply visit https://firebase.com and use your gmail account to sign up for one. This is free to use for small apps:
Firebase will:
• store and manage your user emails and passwords. These will be encrypted.
• handle sending of any reset password emails
• handle your app's database i.e. storing user profiles, messages and any other data that you will be collecting. More importantly, it will power the chat functionality of your app.
• We will also use firebase storage to store any user generated content and this includes documents, audio, images and video files.
If you are not sure how to set up firebase, check out this tutorial on:
Tutorial: How to create and set up a Firebase project
Please note that you do not have to use Firebase if you do not want to... you can do it all by yourself but as a newbie, they might be in a better position to keep your user data secure.
Also note that you will need to set up an Authentication method in Firebase. For now we will only use email login
Building my Sign up page
I have dragged and customized my blocks to create the look and feel of my screen. I have changed my widget style, colours and padding according to my needs.
Since I do not know what type of devices my users will be using, I have chosen not to give my widgets a fixed width. I have used the *weight* property to make it responsive to screen size. Giving a widget a weight of 1, means it will take up all the available space on that screen or in that layout.
To avoid having multiple screens I have chosen to have my login, sign up button and register button on the same page(activity). The *register* section will be hidden until the user clicks the *sign up button*
This is how my landing page will look.
Creating Components for our login/signup page
I have also created the following components:
1. Intent-
I have created an intent to move from the login page once a user signs up or to move to the forgot password screen.
2. Firebase Auth-
this will help us create new users or to authenticate the users that we already have. I have given it the name "auth" but you can give yours any name. This component will also assign a unique user ID to each user.
3. Shared Preferences
I will store the username and country on the user's device. This will help me greet them by name.
So my components section will look like in the image below
LOGIN/SIGN IN logic
Please note that these fields are case sensitive so if a user types in the correct email but then clicks the space bar afterwards, it recognizes the space as an additional character and will not log them in.
I have placed the logic for logging in *onButtonClick* and it will look like in the image below.
SIGN UP button logic
In onCreate I have chosen to hide the user registration section. So when a user clicks the sign up button it will hide the other stuff such as our login fields and then set visible the fields for our user to register. If you would like to create a separate activity for your users to register you can place an intent leading to the registration page here.
In my case I have used the *SetVisible* block to hide and show the information I want.
*How the SetVisible block works*
*Visible-* an object will become visible
*Invisible-* this will make an object invisible but it will still take up space.
*Gone-* this will hide an object and also the space that it takes up. The information will still be available though.
My logic will look like in the image below.
REGISTER/CREATE AN ACCOUNT logic
I will start by first checking if they have filled in all the required fields. If they have not, I will toast(show a message) saying "lease fill in all the required fields."
If all the fields have been filled in, I will then check if the passwords match. If they do not match, I will toast a message saying "The passwords do not match"
If the user has met all the required conditions I will then create a user with the email and password that they will have entered.
For now I will not be saving the "username" and "country" to firebase but to shared preferences.
On CreateUser/Sign Up Complete
You can add these events from the events section, under components or from the components section itself. My blocks will look like in the images below.
Comments