[Huawei Developers] John Wo:
More information like this, you can visit HUAWEI Developer Forum​

Introduction

Hi everyone, this article provides example of HUAWEI Location Kit using the Cordova and Capacitor for Ionic mobile application. First of all, I would like to talk about the possibilities that HUAWEI Location Kit provides.

About HUAWEI Location Kit

Huawei Location Kit combines the GPS(Global Positioning System), Wi-Fi, and base station locations to help you quickly obtain precise user locations, build up global positioning capabilities, and reach a wide range of users around the globe. Currently, it provides the three main capabilities: Fused Location, Activity Identification, and Geofence.

Fused Location: Quickly obtain the device location based on the Wi-Fi, GPS and base station location data.

Activity Identification: Identifies user motion status through the acceleration sensor, cellular network information, and magnetometer, helping you adjust your app based on user behavior.

Geofence: Allows you to set an interested area through an API so that your app can receive a notification when a specified action such as leaving, entering, or lingering in the area occurs.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820083931.42864859513071824455760990100719:50510927072616:2800:650A8003F8CC9C34B7BFBB1C4BA93CE94F0BB79E061856A757785D0924094774.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820083931.42864859513071824455760990100719:50510927072616:2800:650A8003F8CC9C34B7BFBB1C4BA93CE94F0BB79E061856A757785D0924094774.png[/IMG]

HUAWEI Mobile Services(HMS): Location Kit Advantages

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820084149.19523808438973734532009282422955:50510927072616:2800:8CAC721F61B9B35D46305744350741BAB6BFDA0D20440F081D712A334601433D.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820084149.19523808438973734532009282422955:50510927072616:2800:8CAC721F61B9B35D46305744350741BAB6BFDA0D20440F081D712A334601433D.png[/IMG]

HUAWEI Mobile Services - Location Kit

Ionic Project Demo Using HMS Location Kit

Download the project from the link.

Ionic Project Sample Code

Download the Huawei Location Plugin from the link.

Cordova Huawei Location Plugin

Prerequisites

Install [MENTION=1329689]iONiC[/MENTION]/ionic-native/core

npm install [MENTION=1329689]iONiC[/MENTION]-native/core --save
# or
# npm install

Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic mobile app easy.

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

Using Cordova

Add android platform to the project with using Cordova.

ionic cordova platform add android

Integrate Huawei Location Plugin to your project with using Cordova.

# ionic cordova plugin add PATH_TO_CORDOVA_LOCATION_PLUGIN
ionic cordova plugin add ../cordova-plugin-hms-location

Copy the “node_modules [MENTION=410390]hmsc[/MENTION]ore/cordova-plugin-hms-location/ionic/dist/hms-location” folder from library to “node_modules [MENTION=1329689]iONiC[/MENTION]-native” folder under your Ionic project.

Run the project

ionic cordova run android

Using Capacitor

Integrate Huawei Location Plugin to your project with using npm.

# npm install <CORDOVA_LOCATION_PLUGIN_PATH>
npm install ../cordova-plugin-hms-location

NPM Package: [MENTION=410390]hmsc[/MENTION]ore/cordova-plugin-hms-location

Add android platform to the project with using Capacitor.

ionic capacitor add android

Copy the “node_modules [MENTION=410390]hmsc[/MENTION]ore/cordova-plugin-hms-location/ionic/dist/hms-location” folder from library to “node_modules [MENTION=1329689]iONiC[/MENTION]-native” folder under your Ionic project.

Run the project

ionic capacitor run android --device

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820084341.12159352682518598636350306405683:50510927072616:2800:07FF405AE1D305071D98E06E3932F2FC8A09DEDBEEF6F2EE75E4537AC957D6BA.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/026/375/445/5190090000026375445.20200820084341.12159352682518598636350306405683:50510927072616:2800:07FF405AE1D305071D98E06E3932F2FC8A09DEDBEEF6F2EE75E4537AC957D6BA.gif[/IMG]

Cordova HMS Location Kit APIs Overview

HMS Location Kit: Cordova APIs Tutorial

Import and Providers: location.module.ts

/**
* Copyright 2020 Huawei Technologies Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from [MENTION=1329689]iONiC[/MENTION]/angular';
import { LocationPageRoutingModule } from './location-routing.module';
import { LocationPage } from './location.page';
import {
HMSFusedLocation,
HMSActivityIdentification,
HMSGeofence,
LocationRequest,
PriorityConstants,
Events,
Activities,
ActivityConversions
} from [MENTION=1329689]iONiC[/MENTION]-native/hms-location/ngx';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LocationPageRoutingModule,
],
declarations: [LocationPage],
providers: [
HMSFusedLocation,
HMSActivityIdentification,
HMSGeofence
]
})
export class LocationPageModule {}

Using HMS Location Functions: location.page.ts

/**
* Copyright 2020 Huawei Technologies Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, OnInit, NgZone } from '@angular/core';
import { Platform } from [MENTION=1329689]iONiC[/MENTION]/angular';
import {
HMSFusedLocation,
HMSActivityIdentification,
HMSGeofence,
LocationRequest,
PriorityConstants,
Events,
Activities,
ActivityConversions,
GeofenceRequestConstants
} from [MENTION=1329689]iONiC[/MENTION]-native/hms-location/ngx';
import { HMSLocationKit } from [MENTION=1329689]iONiC[/MENTION]-native/hms-location';
const asStr = (x) => JSON.stringify(x, null, 2);
@Component({
selector: 'app-location',
templateUrl: './location.page.html',
styleUrls: ['./location.page.scss'],
})
export class LocationPage implements OnInit {
locationHasPermissionResult = '';
locationRequestPermissionResult = '';
getLastLocationResult = '';
getLocationAvailabilityResult = '';
getLastLocationWithAddressResult = '';
flushLocationsResult = '';
checkLocationSettingsResult = '';
hasActivityPermissionResult = '';
createActivityConversionUpdatesResult = '';
registerActivityConversionUpdatesResult = '';
createActivityIdentificationUpdatesResult = '';
registerActivityIdentificationUpdatesResult = '';
createGeofenceListResult = '';
registerGeofenceUpdatesResult = '';
constructor(
private platform: Platform,
private fusedLocation: HMSFusedLocation,
private activityIdentification: HMSActivityIdentification,
private geofence: HMSGeofence,
private ngZone: NgZone
) {
this.platform.ready().then(() => {
console.log("Platform is ready.");
})
}
ngOnInit() {
HMSLocationKit.init();
}
//
// Fused Location
//
async runFunction(fn: () => any, field: string) {
console.log(`Updating ${field}`);
let result = "";
try {
result = asStr(await fn());
} catch (ex) {
result = asStr(ex);
}
console.log(result);
this[field] = result;
return field;
}
newLocationRequest(): LocationRequest {
return {
id: "locationRequest" + Math.random() * 10000,
priority: PriorityConstants.PRIORITY_HIGH_ACCURACY,
interval: 3,
numUpdates: 1,
fastestInterval: 1000.0,
expirationTime: 1000.0,
expirationTimeDuration: 1000.0,
smallestDisplacement: 0.0,
maxWaitTime: 1000.0,
needAddress: false,
language: "en",
countryCode: "en",
}
}
hasPermission() {
this.runFunction(() => this.fusedLocation.hasPermission(), 'locationHasPermissionResult');
}
requestLocationPermission() {
this.runFunction(() => this.fusedLocation.requestPermission(), 'locationRequestPermissionResult');
}
getLastLocation() {
this.runFunction(() => this.fusedLocation.getLastLocation(), 'getLastLocationResult');
}
getLocationAvailability() {
this.runFunction(() => this.fusedLocation.getLocationAvailability(), 'getLocationAvailabilityResult');
}
getLastLocationWithAddress() {
this.runFunction(() => this.fusedLocation.getLastLocationWithAddress(this.newLocationRequest()), 'getLastLocationWithAddressResult');
}
flushLocations() {
this.runFunction(() => this.fusedLocation.flushLocations(), 'flushLocationsResult');
}
checkLocationSettings() {
this.runFunction(() => this.fusedLocation.checkLocationSettings({
alwaysShow: true,
needBle: true,
locationRequests: []
}), 'checkLocationSettingsResult');
}
//
// Activity Identification
//
hasActivityPermission() {
this.runFunction(() => this.activityIdentification.hasPermission(), 'hasActivityPermissionResult');
}
requestAcitvityPermission() {
this.runFunction(() => this.activityIdentification.requestPermission(), 'locationRequestPermissionResult');
}
createActivityConversionUpdates() {
const activityConversions = [
// STILL
{
conversionType: ActivityConversions.ENTER_ACTIVITY_CONVERSION,
activityType: Activities.STILL
},
{
conversionType: ActivityConversions.EXIT_ACTIVITY_CONVERSION,
activityType: Activities.STILL
},
// ON FOOT
{
conversionType: ActivityConversions.ENTER_ACTIVITY_CONVERSION,
activityType: Activities.FOOT
},
{
conversionType: ActivityConversions.EXIT_ACTIVITY_CONVERSION,
activityType: Activities.FOOT
},
// RUNNING
{
conversionType: ActivityConversions.ENTER_ACTIVITY_CONVERSION,
activityType: Activities.RUNNING
},
{
conversionType: ActivityConversions.EXIT_ACTIVITY_CONVERSION,
activityType: Activities.RUNNING
}
];
this.runFunction(
() => this.activityIdentification.createActivityConversionUpdates(activityConversions),
'createActivityConversionUpdatesResult'
);
}
registerActivityConversionUpdates() {
window.registerHMSEvent(Events.ACTIVITY_CONVERSION_RESULT, (result) =>
this.ngZone.run(() => this.registerActivityConversionUpdatesResult = asStr(result)));
}
createActivityIdentificationUpdates() {
this.runFunction(
() => this.activityIdentification.createActivityIdentificationUpdates(2000),
'createActivityIdentificationUpdatesResult'
);
}
registerActivityIdentificationUpdates() {
window.registerHMSEvent(Events.ACTIVITY_IDENTIFICATION_RESULT, (result) =>
this.ngZone.run(() => this.registerActivityIdentificationUpdatesResult = asStr(result)));
}
//
// Geofences
//
createGeofenceList() {
const geofence1 = {
longitude: 42.0,
latitude: 29.0,
radius: 20.0,
uniqueId: 'geofence' + Math.random() * 10000,
conversions: 1,
validContinueTime: 10000.0,
dwellDelayTime: 10,
notificationInterval: 1,
};
const geofence2 = {
longitude: 41.0,
latitude: 27.0,
radius: 340.0,
uniqueId: 'geofence' + Math.random() * 10000,
conversions: 2,
validContinueTime: 1000.0,
dwellDelayTime: 10,
notificationInterval: 1,
};
this.runFunction(
() => this.geofence.createGeofenceList(
[geofence1, geofence2],
GeofenceRequestConstants.ENTER_INIT_CONVERSION,
GeofenceRequestConstants.COORDINATE_TYPE_WGS_84
),
'createGeofenceListResult'
);
}
registerGeofenceUpdates() {
window.registerHMSEvent(Events.GEOFENCE_RESULT, (result) =>
this.ngZone.run(() => this.registerGeofenceUpdatesResult = asStr(result)));
}
}

HMS Location Kit: location.page.html

<!--
Copyright 2020 Huawei Technologies Co., Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<ion-header>
<ion-toolbar>
<ion-title>HMSLocationKit Demo</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Fused Location</h1>
<ion-button (click)="hasPermission()">Check Permission</ion-button>
<ion-text>{{ locationHasPermissionResult }}</ion-text>
<ion-button (click)="requestLocationPermission()">Get Permission</ion-button>
<ion-text>{{ locationRequestPermissionResult }}</ion-text>
<ion-button (click)="getLocationAvailability()">Get Location Availability</ion-button>
<ion-text>{{ getLocationAvailabilityResult }}</ion-text>
<ion-button (click)="getLastLocation()">Get Last Location</ion-button>
<ion-text>{{ getLastLocationResult }}</ion-text>
<ion-button (click)="getLastLocationWithAddress()">Get Last Location With Address</ion-button>
<ion-text>{{ getLastLocationWithAddressResult }}</ion-text>
<ion-button (click)="flushLocations()">Flush Locations</ion-button>
<ion-text>{{ flushLocationsResult }}</ion-text>
<ion-button (click)="checkLocationSettings()">Check Location Settings</ion-button>
<ion-text>{{ checkLocationSettingsResult }}</ion-text>
<h1>Activity Identification</h1>
<ion-button (click)="hasActivityPermission()">Check Permission</ion-button>
<ion-text>{{ hasActivityPermissionResult }}</ion-text>
<ion-button (click)="requestAcitvityPermission()">Get Permission</ion-button>
<ion-text>{{ hasPermissionResult }}</ion-text>
<ion-button (click)="createActivityConversionUpdates()">Create Activity Conversion Updates</ion-button>
<ion-text>{{ createActivityConversionUpdatesResult }}</ion-text>
<ion-button (click)="registerActivityConversionUpdates()">Register Activity Conversion Updates</ion-button>
<ion-text>{{ registerActivityConversionUpdatesResult }}</ion-text>
<ion-button (click)="createActivityIdentificationUpdates()">Create Activity Identification Updates</ion-button>
<ion-text>{{ createActivityIdentificationUpdatesResult }}</ion-text>
<ion-button (click)="registerActivityIdentificationUpdates()">Register Activity Identification Updates</ion-button>
<ion-text>{{ registerActivityIdentificationUpdatesResult }}</ion-text>
<h1>Geofences</h1>
<ion-button (click)="createGeofenceList()">Create Geofence List</ion-button>
<ion-text>{{ createGeofenceListResult }}</ion-text>
<ion-button (click)="registerGeofenceUpdates()">Register Geofence Updates</ion-button>
<ion-text>{{ registerGeofenceUpdatesResult }}</ion-text>
</ion-content>

Conclusion

In this article, I explained what is the HUAWEI Location Kit, what capabilities it provides, and how to use it in the Ionic mobile application. If you have any questions, you can write the question in the comment section.

Github link: https://github.com/HMS-Core/hms-cordova-plugin/tree/master/cordova-plugin-hms-location