REACT NATIVE | How to install & use HMS Site Kit - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.
Code:
npm i @hmscore/react-native-hms-site
After the installation completed, we can import the library.
Code:
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.
Since we have our api key let's call initialize service function.
Code:
const config = {
apiKey: '<Your_API_KEY>' // You can find it in AppGallery Connect > YourApp > Project Settings > General information > App information};
RNHMSSite.initializeService(config)
.then(() => {
console.log('Service is initialized successfully');
})
.catch((err) => {
console.log('Error : ' + err);
});
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
Code:
const onTextSearch = () => {
let textSearchReq = {
query: 'International',
location: {
lat: 48.893478,
lng: 2.334595,
},
radius: 1000,
countryCode: 'FR',
language: 'en',
pageIndex: 1,
pageSize: 1,
poiType: RNHMSSite.LocationType.SCHOOL
};
RNHMSSite.textSearch(textSearchReq)
.then((response) => {
console.log(JSON.stringify(response));
})
.catch((err) => {
console.log(JSON.stringify(err));
});
};
The response json should be like this and as you can see there is alot of information to play around with.
Code:
{
"totalCount": 1,
"sites": [
{
"siteId": "FB3941B313927D74413FFF0E883144FE",
"poi": {
"rating": 0,
"poiTypes": [
"SCHOOL"
],
"phone": "+(33)-(1)-42000679",
"openingHours": {},
"internationalPhone": "+(33)-(1)-42000679"
},
"viewport": {
"southwest": {
"lng": 2.3455935548062814,
"lat": 48.87367776679441
},
"northeast": {
"lng": 2.3494610451937183,
"lat": 48.87622143320559
}
},
"name": "Acting International",
"formatAddress": "15, Rue Ambroise Thomas, 75009, 9e Arrondissement, Paris, Ile-de-France, France",
"address": {
"subLocality": "9e Arrondissement",
"subAdminArea": "Paris",
"postalCode": "75009",
"thoroughfare": "Rue Ambroise Thomas",
"countryCode": "FR",
"locality": "Paris",
"country": "France",
"adminArea": "Ile-de-France"
},
"distance": 2269.4454697030014,
"location": {
"lng": 2.3475273,
"lat": 48.8749496
}
}
]
}
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.
Code:
const onNearbySearch = () => {
let nearbySearchReq = {
location: {
lat: 51.500775,
lng: -0.115756,
},
query: 'BANK',
radius: 1000,
poiType: RNHMSSite.LocationType.ATM,
language: 'en',
pageIndex: 1,
pageSize: 1
};
RNHMSSite.nearbySearch(nearbySearchReq)
.then((response) => {
console.log(JSON.stringify(response));
})
.catch((err) => {
console.log(JSON.stringify(err));
});
};
The response json should be like this and as you can see there is alot of information to play around with.
Code:
{
"totalCount": 1,
"sites": [
{
"siteId": "7B4F4024A4FD4D700E61B659247BB854",
"poi": {
"rating": 0,
"poiTypes": [
"ATM"
],
"openingHours": {},
"internationalPhone": ""
},
"viewport": {
"southwest": {
"lng": -0.11576103182719415,
"lat": 51.498155166794405
},
"northeast": {
"lng": -0.11167496817280585,
"lat": 51.50069883320559
}
},
"name": "Bank of Ireland - Post Office",
"formatAddress": "125-131, Westminster Bridge Road, Lambeth, London, England, the United Kingdom",
"address": {
"subAdminArea": "London",
"thoroughfare": "Westminster Bridge Road",
"countryCode": "GB",
"locality": "Lambeth",
"country": "the United Kingdom",
"adminArea": "England"
},
"distance": 206.06612089844526,
"location": {
"lng": -0.113718,
"lat": 51.499427
}
}
]
}
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.
Code:
const onDetailSearch = () => {
let detailSearchReq = {
siteId: '7B4F4024A4FD4D700E61B659247BB854',
language: 'en'
};
RNHMSSite.detailSearch(detailSearchReq)
.then((response) => {
console.log(JSON.stringify(response));
})
.catch((err) => {
console.log(JSON.stringify(err));
});
};
The response json should be like this and as you can see there is alot of information to play around with.
Code:
{
"site": {
"siteId": "7B4F4024A4FD4D700E61B659247BB854",
"poi": {
"rating": 0,
"poiTypes": [
"ATM"
],
"openingHours": {},
"internationalPhone": ""
},
"viewport": {
"southwest": {
"lng": -0.11576103182719415,
"lat": 51.498155166794405
},
"northeast": {
"lng": -0.11167496817280585,
"lat": 51.50069883320559
}
},
"name": "Bank of Ireland - Post Office",
"formatAddress": "125-131, Westminster Bridge Road, Lambeth, London, England, the United Kingdom",
"address": {
"subAdminArea": "London",
"thoroughfare": "Westminster Bridge Road",
"countryCode": "GB",
"locality": "Lambeth",
"country": "the United Kingdom",
"adminArea": "England"
},
"distance": 0,
"location": {
"lng": -0.113718,
"lat": 51.499427
}
}
}
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.
Code:
onQuerySuggestion = () => {
let querySuggestionReq = {
query: "Big",
location: {
lat: 51.500775,
lng: -0.115756,
},
radius: 50000,
poiTypes: [RNHMSSite.LocationType.ADDRESS, RNHMSSite.LocationType.GEOCODE],
language: 'en',
};
RNHMSSite.querySuggestion(querySuggestionReq)
.then((response) => {
console.log(JSON.stringify(response));
})
.catch((err) => {
console.log(JSON.stringify(err));
});
};
The response json should be like this.
Code:
{
"sites": [
{
"address": [Object],
"distance": 2440116.1140924874,
"formatAddress": "Turkey",
"location": [Object],
"name": "Biga",
"poi": [Object],
"siteId": "2C462CB00BCF862B69D61DE831BF71E7"
},
{
"address": [Object],
"distance": 8749522.705467587,
"formatAddress": "United States",
"location": [Object],
"name": "Big Sur",
"poi": [Object],
"siteId": "58DDFA5DD1C4612CCA4FBC5EF5108062"
},
{
"address": [Object],
"distance": 2417935.062591788,
"formatAddress": "Kemer, Turkey",
"location": [Object],
"name": "Parium",
"poi": [Object],
"siteId": "EA13FD95D3EAFD7CA4D58CD543A8F801"
},
{
"address": [Object],
"distance": 44437.27858333883,
"formatAddress": "Stubbles Lane, the United Kingdom",
"location": [Object],
"name": "Bigfrith",
"poi": [Object],
"siteId": "06A86F8B8118741D6485DFE8E65E0833"
},
{
"address": [Object],
"distance": 23565.326723216425,
"formatAddress": "Main Road, the United Kingdom",
"location": [Object],
"name": "Biggin Hill",
"poi": [Object],
"siteId": "EFFF479C18F55D7FCB776E80FD790A39"
}
]
}
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.
References
Huawei Developer Documents