Today we continue to review the process of building the sample Android application – the Restaurant-to-Go App – which is being developed with Backendless Mobile Application Development Platform.
The main focus of this tutorial is the application’s login screen and the Login API. Before you start this tutorial, we assume that you have already configured your development environment, downloaded the source code of the project and imported it into your Android Studio. These steps have been covered in our previous tutorials so we highly recommend you to review them, if necessary:
- Configuring a Dev Environment for the Backendless Android App
- Developing the Backendless Android App – User Registration Screen and API
For your convenience, the tutorial below is also available in a video on Backendless YouTube channel here.
How to link your app login module to Backendless backend?
1. Go to the BackendSettings class in the registration module and copy two lines of the code which contain Application ID and Secret Key.
2. These two copied lines should be pasted into the corresponding class in the login module. To do that you should open the java folder -> navigate to BackendSettings. Select two appropriate lines and replace them with the copied lines from the buffer.
The steps above link the login module to your Backendless backend. Otherwise – if you don’t do this – all the calls will reach out the backend that we’ve created while developing this application and you will not see any of the data.
The layout for the login screen
The layout for the login screen is a very simple form. This form is created inside the GridLayout. Here we have some labels, specifically Email address and Password, and a few text inputs – email and password. The loginButton sends the login request to the backend. The layout also provides buttons for logging in with Facebook and logging in with Twitter (these login methods will be reviewed in a separate tutorial).
Additionally there is a link for the registration screen. Typically when presenting the login screen there may be two scenarios:
1. When a user has an account, he will login using the email and password fields.
How do the basic layout and the logic behind it work from the coding prospective?
All the code is going to reside in LoginActivity (login ->LoginActivity). Double click the LoginActivity class to step into it.
When the class is created, the following things will happen. First of all, we do the app initialization. Then we set up the listeners for Login, Login with Facebook and Login with Twitter buttons. Also we set up the RegistrationLink.
If we hold Ctrl and click on makeRegistrationLink() we’ll see its code.
This code takes out the word “Register” from the text “Do not have an account? Register now!” on the login screen. Then it makes the word “Register” a link that leads to RegistrationActivity. When this text is clicked – we start RegistrationActivity.
If we step into the method (by holding Ctrl and clicking on its name) we’ll observe the code. On the screenshot below you can see that this code
- extracts the text fields;
- gets the actual values from the text fields (the user ID and the password);
- has a validation logic (isLoginValuesValid);
- creates login callback;
- executes user login.
But what if you use a different way to identify the user in your app?
Let’s see how Backendless handles such cases in the configuration prospective switching to Backendless Console. The Backendless Console is a frontend for our backend. Step into the Backendless User Service area by clicking on the Users icon in the left vertical menu. Here we have the User properties section. Notice that the email is marked as the Identity. This means that in the login API the email would be the value that we send to identify the user. In your app you may have a different identity. Just remember that the property that is marked as an Identity in the User properties section will represent the identity of a user in your app.
Running the login module to see the process in action
- Choose login in the configuration settings of your Android Studio and click Run to start it up.
- There appears the emulator that we’ve already had. Start it with the OK button.
- Our login form appears. As you can see Register text is linked.
- By clicking the Register link we’ll enter the Registration form.
- Fill it with the email of the user we’ve registered in the previous tutorial (Bob The Builder: the registered email: firstname.lastname@example.org and the password) and click LOGIN button.
- There will appear the ObjectId on the screen that is the evidence of the successful login.