HMS Site kit Integration into Ionic Application | Installation and Example - Huawei Developers

Introduction
Huawei Site Kit is a development kit for Android applications that provides location search functions like auto-completing keywords, searching for places and providing the details of places. With integrating of this kit into your application, you can search for a destination with keywords including location types like restaurants, hotels, hospitals and 500+ more, and provide detailed information including rating, address and phone number of the place.
You can benefit from Huawei Site Kit’s database by sending queries to its Web API. More than 130 million locations and its detailed information are accessible with easy to use API. All of these services and more is also supported in 13 languages, and 200+ countries.
{
"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"
}
Usecase
We will use Huawei site kit to search for nearby places based on query entered on search bar. Once we have nearby places, we will show them on Map.
To learn how to show places on Map, refer this article.
Prerequisites
1. Before installing Site Kit, you should have installed npm, Node.js, ionic CLI. To install ionic in system use below command.
Code:
npm install -g @ionic/cli
2. Generate a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
3. Create an app in the Huawei AppGallery connect and enable Site Kit in Manage API section. Provide the SHA Key in App Information Section.
4. Provide storage location.
5. Download the agconnect-services.json.
Installation
1. Open windows CMD or terminal, and create ionic project.
Code:
ionic start Application_Name blank --type=angular
2. Download Cordova Site kit plugin. Navigate to your project root directory and install plugin using npm.
Code:
npm install <CORDOVA_SITE_KIT_PLUGIN_PATH>
3. Install @iONiC-native/core in your project for full ionic support with completion code.
Code:
npm install @ionic-native/core --save-dev
4. Copy the “node_modules\@hmscore\cordova-plugin-hms-map\ionic\dist\hms-map” folder to “node_modules/@iONiC-native” folder under your Ionic project.
5. Compile the project.
Code:
ionic build
npx cap init [appName] [appId]
where appId is package name.
6. After this command, you should add platform to the project. To add, follow command.
Code:
ionic capacitor add android
7. Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below.
8. Add maven repository address and agconnect service dependencies in root level build.gradle.
Code:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.6.1'
classpath 'com.google.gms:google-services:4.3.3'
classpath 'com.huawei.agconnect:agcp:1.4.0.300'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
apply from: "variables.gradle"
allprojects {
repositories {
google()
jcenter()
maven { url 'http://developer.huawei.com/repo/' } //This line is added by cordova-plugin-hms-account plugin
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
9. Add signing certificate configuration information in app-level build.gradle.
Code:
signingConfigs {
release {
storeFile file("mykeystore.jks") // Signing certificate.
storePassword "******" // KeyStore password.
keyAlias "******" // Alias.
keyPassword "******" // Key password.
v1SigningEnabled true
v2SigningEnabled true
}
}
10. Add plugin to the app-level build.gradle.
Code:
apply plugin: 'com.huawei.agconnect'
11. Add Site kit dependency in app-level build.gradle.
Code:
dependencies {
implementation 'com.huawei.hms:site:5.0.1.300'
}
12. Sync the project
Code:
npx capacitor sync
13. Import HmsSite in app_module.ts and add it in provider.
Code:
import {HmsSite} from '@ionic-native/hms-site/ngx';
providers: [
StatusBar,
HmsSite,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204430607447740048