Huawei Site Kit integration using React Native API’s
Huawei Site Kit makes it possible with its highly accurate API’s to enable the convenient and secure access to diverse, place-related services.
EXPLORE THE WORLD : HMS SITE KIT
As technology have been progressing rapidly from past few years, we all are witnessing the ease of locating places with search advancements and detailed information.
In this era, it is paramount to make your business reach global and provide users flexibility to have all the details within their comfort zone.
Huawei Site Kit makes it possible with its highly accurate API’s to enable the convenient and secure access to diverse, place-related services.
Features
· Keyword Search: Converts coordinates into street address and vice versa.
· Nearby Place Search: Searches for nearby places based on the current location of the user’s device.
· Place Detail Search: Searches for details about a place as reviews, time zone etc.
· Place Search Suggestion: Suggest place names and addresses.
Scope
Huawei Site Kit can be used in any industry based on the requirements.
· Ecommerce
· Weather Apps
· Tours and Travel
· Hospitality
· Health Care
Development Overview
Huawei Site kit can be integrated with Huawei MAP kit, Analytics Kit..etc and used to create wonderful applications.
In this article, my focus is to integrate and bridge the React Native dependencies for Huawei Site Kit SDK.
In this article, I will be focusing on very simple API integration which will work with the pre-defined data to help you understanding the use of these API’s for further real-time application development.
Set up Needed
· Must have a Huawei Developer Account
· Must have a Huawei phone with HMS 4.0.0.300 or later
· React Native environment with Android Studio, Node Js and
Visual Studio code.
Major Dependencies
· React Native CLI : 2.0.1
· Gradle Version: 6.0.1
· Gradle Plugin Version: 3.5.2
· React Native Site Kit SDK : 4.0.4
· React-native-hms-site gradle dependency
· AGCP gradle dependency
Preparation
In order to develop the HMS react native apps following steps are mandatory.
· First, we need to create an app or project in the Huawei app gallery connect.
· Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.
· Download the agconnect-services.json from App Information Section.
· Create a react native project. Using
“react-native init project name”
· Open the project in Android Studio and copy-paste the agconnect-services.json file into the “android” directory’s “app” folder.
· Download the React Native SITE Kit SDK and paste
It under Node modules directory of React Native project.
Tip: Run below command under project directory using CLI if
You cannot find node modules.
“npm install”
“npm link”
Auto Linking Integration
· Configure android level build.gradle
1) Add to buildscript/repositores
maven {url ‘http://developer.huawei.com/repo/'}
2) Add to buildscript/dependencies
classpath ‘com.huawei.agconnect:agcp:1.2.1.301’’
3) Add to allprojects/repositories
maven {url ‘http://developer.huawei.com/repo/'}
· Configure app level build.gradle
1) Add to beginning of file
apply plugin: “com.huawei.agconnect
2) Add to dependencies
Implementation project (“: react-native-hms-site”)
· Linking the HMS SITE Sdk
1) Run below command in the project directory
react-native link react-native-hms-site
Adding permissions
Add below permissions to Android.manifest file.
1. <uses-permission android:name=”android.permission.INTERNET” />
2. <uses-permission android:name=”android.permission.SYSTEM_ALERT_WINDOW”/>
3. <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
4. <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>
5. <uses-permission android:name=”android.permission.ACCESS_BACKGROUND_LOCATION”
6. <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”/>
Sync Gradle and build the project.
Development Process
Getting the API key
· Login to App Gallery and re-direct to your application and select general settings under distribute.
· Scroll below and look for API Key.
· Copy this key and paste under App.js file.
Initializing Service
To begin with the site kit, first we need to import the hms-site sdk in the App.js.
Text Search: Keyword Search
Text search is used for keyword search and return the list of possible search results using the entered keyword.
Detail Search: Place Detail Search
Detail search is used for detailed search and return the list of configured details of a particular place.
Site ID: Is the place id which can be obtain using getSiteid api.
Query Suggestion: Place Search Suggestion
To perform get place details, create a QuerySuggestionRequest object and set the field values. Then invoke the querySuggestion method of the RNHMSSite module, setting the QuerySuggestionRequest object as the argument. This will return the list of response.
Nearby Search: Nearby Place Search
Nearby Search return the list of surrounded places which is implemented using onNearbySearch with the co-ordinate input.
Results
Conclusion
It’s very easy to use places/search API’s for building real time solutions in the future.
Cheers!!
