REACT NATIVE | How to install & use HMS Site Kit
Introduction
Hello everyone. In this article we are going to take a look at Huawei Mobile Services(HMS) Site Kit Plugin for react native. We will cover how to install and use HMS Site Kit.
HMS Site Kit has following features
- Keyword Search: Returns a place list based on keywords entered by the user.
- Nearby Place Search: Searches for nearby places based on the current location of the user’s device.
- Place Details: Searches for details about a place.
- Place Search Suggestion: Returns a list of place suggestions.
Before we begin, you need to have Huawei developer account to use Huawei Mobile Services and thus the HMS Site Kit. You can sign in/register to Huawei developer website from here.
Configure your project on AppGallery Connect
First of all, you need to integrate Huawei Mobile Services with your application. I will not get into details about how to integrate your application but you can use this article as step by step guide.
Installation
First things first, let’s install the library.
npm i @hmscore/react-native-hms-site
After the installation completed, we can import the library.
Before we can use the features of HMS site kit. We need to initialize it. In order to initialize the service, you will need an API key. When you integrated your application with HMS, AppGallery Connect will automatically provide an API key for you. You can find your API key on AppGallery Connect > YourApp > Project Settings > General information > App information.
Since we have our api key let’s call initialize service function.
If your API key is correct you will see “Service is initialized successfully” on your console.
Usage
Now we can start using HMS React Native Site Kit. Let’s start with keyword search.
Keyword (Text) Search
HMS Site kit keyword search feature let’s you implement a functionality that returns place list based on your user’s keyword input. Also you can specify a location which search result will be baised. You can specify search radius, country, language and page size. For the keyword search you can set the POI (Point of Interest) where results can be filtered based on POI. User can search Bakery, School, ATM etc.
Let’s create a TextSearchRequest object, which is used as the request body for keyword search. Related parameters are as follows, among which query is mandatory and others are optional:
- query: search keyword.
- location: longitude and latitude to which search results need to be biased.
- radius: search radius, in meters. The value ranges from 1 to 50000. The default value is 50000.
- poiType: POI type. The value range is the same as that of LocationType.
- countryCode: code of the country where places are searched, which complies with the ISO 3166–1 alpha-2 standard.
- language: language in which search results are displayed. For details about the value range, please refer to language codes in Language Mapping. If this parameter is not passed, the language of the query field is used in priority. If the field language is unavailable, the local language will be used.
- pageSize: number of records on each page. The value ranges from 1 to 20. The default value is 20.
- pageIndex: current page number. The value ranges from 1 to 60. The default value is 1.
After that we can call textSearch function and send our TextSearchRequest object as a parameter like this.
Let’s find international school at Paris
The response json should be like this and as you can see there is alot of information to play around with.
Nearby Place Search
HMS Site kit nearby search feature let’s you implement a functionality that returns nearby places using the current location of the user. Also you can specify search keyword, search radius, language and page size. For the nearby search you can set the POI (Point of Interest) where results can be filtered based on POI. User can search Bakery, School, ATM etc.
Let’s create a NearbySearchRequest object, which is used as the request body for nearby place search. Related parameters are as follows, among which location is mandatory and others are optional:
- location: longitude and latitude to which search results need to be biased.
- radius: search radius, in meters. The value ranges from 1 to 50000. The default value is 50000.
- query: search keyword.
- poiType: POI type. The value range is the same as that of LocationType.
- language: language in which search results are displayed. For details about the value range, please refer to language codes in Language Mapping. If this parameter is not passed, the language of the query field is used in priority. If the field language is unavailable, the local language will be used.
- pageSize: number of records on each page. The value ranges from 1 to 20. The default value is 20.
- pageIndex: current page number. The value ranges from 1 to 60. The default value is 1.
After that we can call nearbySearch function and send our NearbySearchRequest object as a parameter like this.
Let’s find an ATM nearby.
The response json should be like this and as you can see there is alot of information to play around with.
Place Details Search
Place details search returns search details about a place based on the unique ID (Site Id) of the place. SiteId can get from keyword or nearby or Place Suggestion search.
Let’s create a DetailSearchRequest object, which is used as the request body for place details search. Related parameters are as follows, among which siteId is mandatory and others are optional:
- siteId: ID of a place.
- language: language in which search results are displayed. If this parameter is not passed, the local language will be used.
After that we can call detailSearch function and send our DetailSearchRequest object as a parameter like this.
Let’s look at the details of the atm we found on nearby search
The response json should be like this and as you can see there is alot of information to play around with.
Place Search Suggestion
Place search suggestion returns search suggestions during user input.
Let’s create a QuerySuggestionRequest object, which is used as the request body for search suggestion. Related parameters are as follows, among which query is mandatory and others are optional:
- query: search keyword.
- location: longitude and latitude to which search results need to be biased.
- radius: search radius, in meters. The value ranges from 1 to 50000. The default value is 50000.
- bounds: coordinate bounds to which search results need to be biased.
- poiTypes: List of POI types. The value range is a subset of LocationType. The options are as follows:
- countryCode: code of the country where places are searched, which complies with the ISO 3166–1 alpha-2 standard.
- language: language in which search results are displayed. For details about the value range, please refer to language codes in Language Mapping. If this parameter is not passed, the language of the query field is used in priority. If the field language is unavailable, the local language will be used.
If both bounds and location are passed, the value of bounds takes precedence.
After that we can call querySuggestion function and send our QuerySuggestionRequest object as a parameter like this.
The response json should be like this.
Conclusion
Now you know how to use HMS Site Kit plugin for React Native. With that knowledge you can implement amazing functionalities to your app that HMS Site Kit offers. You can interact with your users in more and different ways and attract even more users. You can implement keyword search for places, search nearby places, get places details and give search suggestions to your user.
You can ask questions on the comments section, I would be glad to answer them.
Have a great day.
