How to Integrate HUAWEI Site Kit in Cordova

Introduction

Hello everyone, I’m here with a fun service. in this article, provides example of HUAWEI Site Kit using the Cordova mobile application. First of all, I want to provide you with basic information about the site kit.

Site Kit provides place search services including keyword search, nearby place search, place detail search, and place search suggestion, helping your app provide convenient place-related services to attract more users and improve user loyalty.

Use Cases

You can integrate the following core capabilities in Site Kit to quickly build apps with which your users can explore the world around them:

• 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 Detail Search: Searches for details about a place.
• Place Search Suggestion: Returns a list of suggested places.
• Autocomplete: Returns an autocomplete place and a list of suggested places based on the entered keyword.

After giving you basic information about Site kit, we can start writing our application.💪

Preperations

First of all, we need to make some adjustments in AppGallery Connect so that we can integrate our kit into our application.

Before the creating app, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers. After the login, we should create an AppGallery Project.
1. Sign in to AppGallery Connect, and click My projects.
2. Click Add project.
3. Enter a project name and click OK.

4. After the create project, go to Project Settings>General Information section and click Add app.
5. On the Add app page, enter the app information.

6. On the Project settings page, enter SHA-256 certificate fingerprint.

7. Navigate to Manage API and Enable Site kit.

8. Download the configuration file agconnect-services.json for Android platform.

NOTE: You can find detailed information about the settings in our Cordova Sitekit document.

Create an App

Before the start demo application, make sure you have installed Cordova and npm.

1. First of all, we will generate a Cordova application.

$ cordova create CordovaSiteKit com.huawei.cordova.sitekit Sitekit

2. Go into the project directory.

3. Add the android platform to the project.

cordova platform add android@9.0.0

4. Install `HMS Sitekit plugin` to the project.

You can either install the plugin through npm or by downloading it from the download page, Cordova Site plugin.

@hmscore/cordova-plugin-hms-site

• Run the following command in the project root directory of your Cordova project to install it through npm.

cordova plugin add @hmscore/cordova-plugin-hms-site

NOTE: Install the plugin manually after downloading plugin.

cordova plugin add <CORDOVA_SITEKIT_PLUGIN_PATH>

5. Copy the agconnect-services.json file to the <project_root>/platforms/android/app directory.

6. Add the keystore(.jks) and build.json files to your project’s root directory.

If all our preparations are complete, we can start writing code now.💪

Keyword Search

Overview

With this function, users can specify keywords, coordinate bounds, and other information to search for places such as tourist attractions, enterprises, and schools.

Let’s take a look at the implementation of this function together.

Implementation

1. Declare a SearchService object and use SearchServiceFactory to instantiate the object.

NOTE: To create a SearchService instance, you need to pass the API key.

2. Create a TextSearchRequest object, which is used as the request body for keyword search.

3. Use the created SearchService object to call the textSearch() API and pass the created TextSearchRequest object to the API and obtain the TextSearchResponse object. You can obtain a Site object from the TextSearchResponse object and then parse it to obtain specific search results.

The service returns this result for the parameters we entered. 👇

Nearby Place Search

Overview

With this function, your app can return a list of nearby places based on the current location of a user. When the user selects a place, the app obtains the place ID and searches for details about the place.

Implementation

1. Create a NearbySearchRequest object, which is used as the request body for nearby place search.

2. Use the created SearchService object to call the nearbySearch() API and pass the created NearbySearchRequest object to the API and obtain the NearbySearchResponse object. You can obtain a Site object from the NearbySearchResponse object and then parse it to obtain specific search results.

The service returns this result for the parameters we entered. 👇

Place Detail Search

Overview

With this function, you can search for details about a place (such as the name, detailed address, and longitude-latitude coordinates of the place) based on the unique ID (Site ID) of the place.

Implementation

1. Create a DetailSearchRequest object, which is used as the request body for place details search.

2. Use the created SearchService object to call the detailSearch() API and pass the created DetailSearchRequest object to the API and obtain the DetailSearchResponse object. You can obtain a Site object from the DetailSearchResponse object and then parse it to obtain the search results.

The service returns this result for the parameters we entered. 👇

Widget Search

Overview

The widget is a search component of the built-in place search suggestion feature. When a user enters a keyword in the search box, the widget displays a list of suggested places to the user. If the user taps a place in the list, your app will receive a Site object and use it to obtain details about this place.

Implementation

To create the search component for the built-in place search suggestion, you need to call the global API gotoSearchActivity() from HMSSite. You should pass the API key parameter (mandatory) and you can use SearchFilter to restrict suggested places for search activity. To do so, you need to create a SearchFilter object and send it as parameter.

This service opens an intent and asks us to enter keywords.👇

Conclusion

In this article, we have learnt how to integrate Site kit in Cordova. We have learnt how to use Keyword search, Nearby search, Place details, and Widget Search.
You can click the links for more Sitekit documentation, Cordova Sitekit sample codes and Cordova Sitekit library.

See you with other kit articles.👋

Tips and Tricks

• Make sure you are already registered as Huawei developer.
• Enable site kit service in the App Gallery.
• Make sure your app minSdk is 19 or greater.
• Make sure you added the agconnect-services.json file to platforms/android/app folder.
• Make sure all the dependencies are downloaded properly.

References

HMS-Core/hms-cordova-plugin

Cordova-Sitekit-Sample-Project

Cordova Site Kit Development Guide