In this chapter we gonna continue the Retrofit basics tutorial with the simple GET request to let the user login in our sample application into an example WordPress website. Thenafter, also using the GET request, we gonna fetch the list of the users.
Basically the login won’t be a usual login process, because we will use only the username to let the user login. Because the username field is always unique in WordPress, we can clearly identify the user.
If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.
Step 1 – The endpoint for @GET
In the previous chapter of the POST request we have created the JsonWordPressApi::interface, where we have defined the endpoint for the POST HTTP request. We gonna create the GET reqest also inside of this interface. So, open it from the respository package.
Copy and paste the below method into the JsonWordPressApi::interface.
- We can define the endpoint again after the @GET annotation which comes from the Retrofit library.
- This method will get the suspend modifier as well, which means that this method uses coroutines, so it will run in a background thread to fetch the user.
- The parameter of @Query will be appeneded to the URL.
In our case with the example of the admin’s email “email@example.com”, it will look like: “…/firstname.lastname@example.org”
- The returned value will be a List even if we will get back only one user.
Because of this, in the next step we use only the value from the index 0.
Step 2 – The repository
From now on our task will be very simple, because we should use the getUser() method from the interface. As before, the direct call will be in the UserRepository::class.
So, open it also from the repository package, and paste there the below getUser() method.
Step 3 – The ViewModel
The next step is to define the call of the getUser() method in the ViewModel as well.
Remember? The ViewModel act as a bridge between the repository and the UI. It gets the data from the WordPress website using the getUser() method and it notifies the user interface, when the data of the user is already available.
When something went wrong, eg the website is not available, then the ViewModel will notify the user about the issue as well via a Toast message.
So, open the RepositoryViewModel::class from the repository package, and paste there the below getUser() method.
Note here again the liveData keyword, which starts a coroutine scope, where we can run the getUser() method from the UserRepository::class.
First, before the try-catch block, we emit again the loading state. Then we can get back the user using the email address, if the app could connect to the website and fetch the needed data.
Step 4 – The click listener
Finally, we can update the code for the login screen as well and add the click listener for the button of login. So, open the LoginFragment::class from the “fragments” package.
First of all, we have to add the variable of the RepositoryViewModel as well… before the onStart() method.
Thenafter come two String variables. One for the email and one for the password.
var email = “”
var password = “”
Validation of the fields
As we have done in case of the registration, we have to validate the email and password fields as well.
The below method will get back a Boolean value based on the result of the validation. So, paste it after the onViewCreated() method.
Visibility of the Spinner
Before the implementation of the click listener for the login button, we are going to add a new method, which will set the visibility of the loading Spinner.
So, paste the below method after the field validations.
The click listener
Finally, here we go. The below lines goes into the onViewCreated() method.
The click listener
First, we check the correctness of the fields using an if-statement. If they meet the conditions, then we call the getUser() method from the ViewModel of the repository.
Depending on the result of the request…
- we hide the Spinner
- set the currently logged in user’s LiveData
- navigate to the main screen.
- hide here the Spinner also
- Notify the user about the error using a Toast.
- Show the loading Spinner for the user.
Run the app
After the implementation of the login process, we can test the app. So, run it on your device, and login with a registered email address and password.
If you have implemented correctly the above methods, then you should be redirected to the login screen after you click on the login button.
Step 5 – The click listener
In our app we can register and login. The next step is to list all of the registered users in the main screen using a RecyclerView.
In the chapter of the preparation, we have already implemented the Adapter and the ViewHolder for the RecyclerView. So, our task is only to get the users from the database of our WordPress website.
The get all request
So, open again the JsonWordPressApi::interface from the repository folder and paste there the below code.
As we have done in case of login, we will use almost the same request. The diffence is that we will get back the whole list using the same endpoint (“wp/v2/users”).
Next, open the UserRepository::class as well and paste there the below method.
Then the ViewModel
The next step is the RepositoryViewModel.
Update the RecyclerView
When we could register or login, then the layout of the MainFragment will be opened. So, we are going to call there the below created getAllUsers() method.
When the view for the fragment is created, then the RecyclerView has to be updated by the fetched users. So, the below lines goes into the onViewCreated() method.
Get all users
Note, that the update of the RecyclerView happens using the addAllUser() method if we got back anything from the Get request.
Run again the app
Step 6 – The profile
In the next step we are going to get the name of the currently logged in user in the profile screen.
Get the username
Remember? When we create a new account or login and the request was successful, then we set the currently logged in user into a LiveData. Using its observer, we will show the username in the profile screen.
So, open the ProfileFragment from the fragments folder and paste there the below variable (before the onCreateView() method) and the observer (into the onViewCreated() method).
The last thing what we are going to implement in this application, is a simple logout. In our case it won’t be a classic logout process, instead we just navigate back to the login screen.
So, paste the below lines after the observer.
Run the app
Run the last time the app and test the profile screen by clicking on the person icon on the main screen’s toolbar.
The source code is available on GitHub
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂