👨🏼‍💻Developing a Book Store Application Using HUAWEI Services| HMS | Kotlin

Sezer Ă–zaltun
Huawei Developers
Published in
8 min readNov 1, 2022
HMS

Introduction

Hello everyone,

I’m going to explain how to develop Book Store application using HMS. First of all, I would like to talk about the Huawei Mobile Services that I use in this application. These are; Account Kit, Location Kit, Map Kit, Push Kit, Site Kit, Analytics Kit, Auth Service and Cloud DB. I will describe Location Kit, Map Kit, Site Kit and Cloud DB in this article. I would like to briefly talk about the services we will use respectively before I start coding.

About Services

1.Location Kit

Location Kit allows us to get device location quickly and it helps us build global location capabilities and expand your global business.

2.Map Kit

Map Kit provides powerful and convenient map services for you to easily implement personalized map display and interaction.

3.Site Kit

Site Kit helps your app attract more users by providing many search features such as location search, time zone search, geocoding and prefecture search.

4.Cloud DB

It is a database that provides seamless data synchronization between the device and the cloud and between devices and allows us to perform offline application operations.

Cloud DB uses data storage structure based on the Object Model. Data is stored as object in different DB Zone. Each object is a data record. Cloud DB Zone is a standalone storage space.

Object Type: Represents every table in classical database logic.

Cloud DB Zone: Represents the data region on the cloud side. It corresponds to the database name.

Implementation

Before starting the coding part, you need to integrate HMS Core into your application. You can click the link here for this.

After integrating HMS Core, we need to give the necessary permissions and add the necessary libraries. For this, let’s first define the permissions in the Android Manifest File.

AndroidManifest

Now let’s add the necessary libraries in build.gradle(app).

build.gradle(app)

We have given the permissions. Now we need to edit our layout xml file.

Let’s add the following codes in the activity_map.xml file of MapActivity.kt.

activity_map.xml

We have also finished our layout file. We can write the necessary codes in our MapActivity.kt file.

Before we start coding, we need to implement OnMapReadyCallBack for the map to work. After implementing, we create the variables we need.

MainActivity.kt 1

After creating the variables, we need to install the Map Kit SDK. We write our code as below.

MainActivity.kt 2

Now, we need to get some permissions to get the location. In addition, we need to do version control, as each device has a different android version installed. Let’s write these codes now.

MapActivity.kt 3

Now, we can move on to the use of Site Kit. First, let’s take our location.

We can get the instant location of the user using Fused Location while getting the location. If the user changes location, we call requestLocationUpdates.

MapActivity.kt 4

We got our location. Everything is perfect. Let’s find nearby book stores. We will use NearbySearch, which is the Site Kit feature for this. You can see the codes below.

location: User’s location

radius: Specifies the area to scan. The default value is 1000.

query: Keyword we want to search

poitype: The type of place we want to search. For example we will use BOOKSTORE.

NOTE: You should write your own application’s api in the field that says Huawei api key. You can check it on AppGalleryConnect.

MapActivity.kt 5

We got the book stores near us through Site kit. Now let’s show them on the map. We will use the marker addition, which is the Map Kit feature. Thus, we will get a better image. I used a personalized icon when adding the marker. You can use the default icon if you wish.

MapActivity.kt 6

Everything is perfect so far. Only one thing remains. We should show what we have done on the map. For this, as I said at the beginning of the article, we implemented OnMapReadyCallBack. After implementing it, it asks us to add override fun onMapReady. We add this and write the following codes in it.

MapActivity.kt 7

Implementing Cloud DB

We have worked with Location Kit, Map Kit and Site Kit so far. In our application, the books fetched through the Google Books Api are displayed and users who are logged into the application can add the books they want to their favorites. Users registered to the application and books added to favorites are kept on Cloud DB.

What Will We Do in Cloud DB?

1- User registration

2- Show user data on profile page

3- Adding books to favorites

4- Deleting a book from favorites

5- Show books in favorites

We have learned the operations performed on Cloud DB, we can move on to the coding part now.

First of all, we need to create Object Type on AppGallery Connect.

Object Types
User Object Type
Book Object Type

Book Object Type also includes publishedDate (String) and isFavorite (Boolean).

bookid : The id of the books.

id : Users id

We created Object Types, we need to create Cloud Zone. After going to the Cloud DB Zones tab via AppGallery Connect, you can create it by clicking the Add button. I called it UserDB.

After everything is done, you need to export as Java. We take it as Java because it does not support Kotlin.

Export

You need to write the package name of your application where it says Package Name in the picture above,. After exporting, you must upload the files into Android Studio.

Files

Only Book,User and ObjectTypeInfoHelper will be in the files you download. Let’s create other files and let’s move on to our coding.

CloudDBQuickStartApplication

We initialize the CloudDBZoneWrapper class and determine the zone area in the code above. I chose Germany when creating the DB, so I chose Germany here as well.

CloudDBZoneWrapper

We determined the zone region respectively in the coding above. Then ,we create the createObjectType required for Cloud DB. In order to use Cloud DB, we need to open it.

Upsert User Data

Code that adds users registered to the application to Cloud DB.

Database Query

Here are the codes that allow us to query on Cloud DB to show user information on our Profile page.

User-related Cloud DB codes are finished, now let’s write for Books.

Database for Book

It is almost the same as the user codes, but there is an additional delete function. We use CallBack to call these codes from related classes and not to overload them. You can see the codes below.

CallBack

Our codes in CloudDBZoneWrapper are finished. Now let’s do the User and Book operations, respectively.

CloudDB User Operations

When the user signs up for the app, his information will go to Cloud DB and user information will be fetched from Cloud DB on the profile page. Let’s do this.

SignUpActivity

In the above code snippet, when the user clicks the register button, their information is saved to Cloud DB. Since there is no AutoIncrement in Cloud DB, I defined the id from AuthService to the userId. Thus, the id of each user will be unique.

Profile Fragment

We took user information on the profile page and displayed it in the relevant TexViews. Here, I performed asynchronous operation with Kotlin Coroutines because the code when opening the Cloud DB Zone and the code we were querying conflicted in a very short time and I was getting a null error. I solved this error with coroutines.

Cloud DB Book Operations

Books are displayed on the homepage in the application. When the user clicks on any book, he is directed to the detail page of the book, where he see a favorite button that he can add to his favourites. When the user clicks on the favorite button, the relevant book is added to Cloud DB, and when the user clicks again, the relevant book is deleted from Cloud DB. The user can see the books they have added to their favorites on the favorites page. The books here are imported in Cloud DB.

This is the usecase we want to have in practice. Let’s code.

Added Book to Database

The book is added to favorites when the button is clicked. In other words, it is added to Cloud DB.

Deleted Book from Database
CallBack

Of course, we need to call UICallBack from CloudDBZoneWrapper class.

Fetched Data from DB

The codes here is fatched the favorite books from Cloud DB and display them on the relevant page. I used Hashset to show the books uniquely.

Our Cloud DB operations are also finished. Now we can move on to the application images.

You can see the application screenshot below.

Book Stores on Map
Cloud DB (Book)
Cloud DB (User)
Screenshots in the App

Significant

  • FingerPrint needs to be defined on AppGalleryConnect
  • When using Site Kit, encoding is required when defining Api key
  • To use Site Kit on Map Kit, RequiresPermission is required.
  • If you get a null error while using Cloud DB, you can solve it using Kotlin Coroutines.

Conclusion

We have developed an application that displays the book stores near us using location kit, map kit and site kit, and keeps users and books in the DB using Cloud DB in this article. I hope it has been a useful resource for you. See you in the next article. Take care of yourselves.

References

--

--