react native

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 the HMS Site Kit.

HMS Site Kit has the 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 a Huawei developer account to use Huawei Mobile Services and thus the HMS Site Kit. You can sign in/register to the 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 is completed, we can import the library. 

import RNHMSSite from '@hmscore/react-native-hms-site' 

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.

app gallerySince 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 a keyword search.

Keyword (Text) Search

HMS Site kit keyword search feature lets you implement functionality that returns place lists based on your user’s keyword input. Also, you can specify a location in which search results 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. Users can search for 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 a 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 a place details search. Related parameters are as follows, among which siteId is mandatory and others are optional:

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 a 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.



Source link

Write A Comment