MVVM Architecture Sample Using Huawei Mobile Services

Hello all! As you know, there are several popular architectural design patterns for app development such as MVP, MVC or MVVM etc. Although it depends on your needs, in my opinion, MVVM fits very well for mobile app development.

As starting point, I would like to attempt to describe what is MVVM. It is described very well in Wikipedia:

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform.

M refers Model

V refers View

VM refers ViewModel

In general you should create a repository layer in order to connect data sources(Model) to the business logic (ViewModel). Data sources can be obtained either remote sources or local databases. When we sampling, Retrofit for remote data source and SQLite for local data source can be used.

You can find great articles and explained documents about MVVM on the Internet. My focus about the story is that implementing Huawei Mobile Service SDK to the structural pattern.

This image has been modified by myself. The original image is from https://developer.android.com/jetpack/guide

Let’s create an app together using MVVM architecture and HMS.

I am planning to create an app which will show nearby restaurants to user. Therefore, I will implement Huawei Site Kit to the app.

Before you start developing an app, configure your app information in AppGallery Connect.

Follow instructions in Creating an AppGallery Connect Project to create a project.

Make sure that Site Kit service is enabled on AppGallery Connect console.

First, create a data class which represent place details for model.

Second, create a Site Kit Nearby Place Search request in order to obtain nearby places via the service.

For the use case location is mandatory as a parameter and others are optional. I will use mock location for Istanbul Huawei R&D Center.

Next, implement repository functions. After obtaining nearby places thanks to Huawei Site Kit and convert the output to a mutable list that contains place model which is created. Then, save the list into LiveData.

So far, we are done with model part and and let’s create ViewModel logic. MainViewModel class will help us to make connection between data and UI layers.

We need an activity and and an item holder layout to show the places to user. Let’s put a progress bar to show it while places are loading, and put a recyclerview to list the items on the activity.

I will use data binding for the example, so we need to enable dataBinding and sync project with Gradle files. Put the code below into android scope on app directory’s build.gradle file in order to enable data binding.

buildFeatures {
    dataBinding true
}

Then, create item layout to represent every single place item into it.

“type” should be the path of the model. Don’t forget to change it as yours.

<data>

    <variable
        name="place"
        type="com.aral.mvvm_sample_using_hms.data.model.Place" />
</data>

Now we need to create an adapter class to adapt items into the recycler view.

Now, we are in final part that interaction with user. We need to set the Activity to show places after all steps.

That’s it! We built an app that shows nearby places using MVVM structure and implementing HMS Site Kit.

I hope it will help you! See you in next story…

You can reach the full source code here.

References:

HMS Site Kit

Android Developers