A Novice Journey of Integrating Site Kit into Ionic Application - Huawei Developers

Introduction
HMS Site Kit allow us to search places and in return provides variety of information such as address, location, phone number etc. We can search for places either by proximity or a text string. Our app can provide users with convenient and secure access to diverse, place-related services, and therefore acquire more users.
HMS Site Kit Services
1. Place Search
2. Nearby Place Search
3. Place Details
4. Place Search Suggestion
5. Widget Search
In this article we will focus on Place Search, Nearby Place Search, Place Search Suggestion and Widget Search provided by HMS Site Kit.
Ionic Framework
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript with integrations for popular frameworks like Angular and React.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on Android or iOS but didn’t really exist before on the web.
Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or Capacitor in order to run as a native app.
Here we will use Ionic framework with Angular and Capacitor as native wrapper.
Demo
{
"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"
}
Prerequisite
1) Must have a Huawei Developer Account.
2) Must have a Huawei phone with HMS 4.0.0.300 or later.
3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4) Must install node in the system
5) Must install Ionic in the system using below command:
Code:
npm install -g [user=1329689]@iONiC[/user]/cli
Things need to be done
1) Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2) Create an app in the Huawei AppGallery connect and enable ML Kit in Manage API section.
3) Provide the SHA Key in App Information Section.
4) Provide storage location.
5) Download the agconnect-services.json and store it somewhere on our computer.
6) Create a blank Ionic Project using below command:
Code:
ionic start Your_Application_Name blank --type=angular
7) Download the Cordova Site Kit Plugin. Run the following command in the root directory of your Ionic project to install it through npm.
Code:
npm install <CORDOVA_SITE_KIT_PLUGIN_PATH>
8) If you want full Ionic support with code completion etc., install @iONiC-native/core in your project.
Code:
npm install [user=1329689]@iONiC[/user]-native/core --save-dev
9) Run the following command to copy the "ionic/dist/hms-ml" folder from library to "node_modules @iONiC-native" folder under your Ionic project.
Code:
cp node_modules/@hmscore/cordova-plugin-hms-ml/ionic/dist/hms-ml node_modules [user=1329689]@iONiC[/user]-native/ -r
10) Run the following command to compile the project:
Code:
ionic build
npx cap init [appName] [appId]
Where appName is the name of your app, and appId is package_name in your agconnect-services.json file (example: com.example.app).
11) Run the following command to add android platform to your project:
Code:
ionic capacitor add android
12) Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies as shown below:
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'https://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.3.1.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 'https://developer.huawei.com/repo/'}
}
}
13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:
Code:
android {
compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "YOUR_PACKAGE_NAME"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
signingConfigs {
release {
storeFile file("mykeystore.jks") // Signing certificate.
storePassword "XXXXXX" // KeyStore password.
keyAlias "XXXXXX" // Alias.
keyPassword "XXXXXX" // Key password.
v1SigningEnabled true
v2SigningEnabled true
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
debug {
signingConfig signingConfigs.release
debuggable true
}
}
}<img src="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/647/156/2640091000001647156.20201016091920.80521901239093620186278348845525:50511111010449:2800:68B931001F4C6BCA4A0671802459A06AA748D35EF1BA25865E9BE8C4A629C3FE.png" style="color: rgb(51,51,51);font-family: "Times New Roman" , serif;font-size: 21.0px;white-space: normal;width: 1.0px;height: 1.0px;">
14) Add plugin to the build.gradle file in the app directory as show below:
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
15) Add ads service implementation into to dependencies section of build.gradle file in the app directory as show below:
Code:
dependencies {
…
implementation 'com.huawei.hms:site:5.0.0.300'
}
16) Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:
17) To update dependencies, and copy any web assets to your project, run the following code:
Code:
npx capacitor sync
Let's Code
Avoid No Provider Error
To avoid No Provider Error, we need to add FileChooser, Android Permission and HMS ML kit in app.module.ts providers section and also make sure to import the same as shown below:
Code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from [user=1329689]@iONiC[/user]/angular';
import { SplashScreen } from [user=1329689]@iONiC[/user]-native/splash-screen/ngx';
import { StatusBar } from [user=1329689]@iONiC[/user]-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HmsSite } from [user=1329689]@iONiC[/user]-native/hms-site/ngx'
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
HmsSite,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Create page in Ionic
Run the following command to create page in Ionic project:
Code:
Ionic generate page page-name
Import
Import the following code in your home.page.ts :
Code:
import { Component, IterableDiffers } from '@angular/core';
import { HmsSite } from [user=1329689]@iONiC[/user]-native/hms-site/ngx';
Initializing the service
First we need to initialize the service. In order to that we need to call the initializeService method to initialize the HMS Site Kit service using our project API key. The API key can be found in our agconnect-services.json file.
Code:
constructor(private hmssite: HmsSite) {
var config = {
apiKey: "YOUR_API_KEY"
};
hmssite.initializeService(
config
);
}
Place Search
Basically it helps us to extract information of a particular place like tourist attraction, enterprises and school by specifying keywords, coordinates and other information.
Code:
public async onTextSearch() {
let textSearchReq = {
query: this.textSearchPlaces,
location: {
lat: 20.5937,
lng: 78.9629,
},
radius: 5000,
poiType: this.hmssite.LocationType.ADDRESS,
countryCode: "IN",
language: "en",
pageIndex: 1,
pageSize: 5
};
try {
var res = JSON.parse(JSON.stringify(await this.hmssite.textSearch(textSearchReq)));
this.data = JSON.stringify(JSON.parse(JSON.stringify(res)).sites);
this.result.length = 0;
for (var i = 0; i < JSON.parse(this.data).length; i++) {
var text: any = {
"NAME": JSON.stringify(JSON.parse(this.data)[i].name),
"ADDRESS": JSON.stringify(JSON.parse(this.data)[i].address),
"DISTANCE": JSON.stringify(JSON.parse(this.data)[i].distance),
"LOCATION": JSON.stringify(JSON.parse(this.data)[i].location),
"POIDETAILS": JSON.stringify(JSON.parse(this.data)[i].poi),
"RATING": JSON.stringify(JSON.parse(this.data)[i].rating),
"SITEID": JSON.stringify(JSON.parse(this.data)[i].siteId)
};
this.result.push(text)
}
}
catch (ex) {
alert(JSON.stringify(ex))
}
}
More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0203394385930860028&channelname=HuoDong59&ha_source=xda

---

Well explained, can we restrict area when we are searching data.

---

Thank you very much