HUAWEI Location Kit Example For Ionic - Huawei Developers

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.
{
"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"
}
HUAWEI Mobile Services(HMS): Location Kit Advantages
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 @iONiC/ionic-native/core
Code:
npm install [user=1329689]@iONiC[/user]-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.
Code:
ionic cordova platform add android
Integrate Huawei Location Plugin to your project with using Cordova.
Code:
# ionic cordova plugin add PATH_TO_CORDOVA_LOCATION_PLUGIN
ionic cordova plugin add ../cordova-plugin-hms-location
Copy the “node_modules @hmscore/cordova-plugin-hms-location/ionic/dist/hms-location” folder from library to “node_modules @iONiC-native” folder under your Ionic project.
Run the project
Code:
ionic cordova run android
Using Capacitor
Integrate Huawei Location Plugin to your project with using npm.
Code:
# npm install <CORDOVA_LOCATION_PLUGIN_PATH>
npm install ../cordova-plugin-hms-location
NPM Package: @hmscore/cordova-plugin-hms-location
Add android platform to the project with using Capacitor.
Code:
ionic capacitor add android
Copy the “node_modules @hmscore/cordova-plugin-hms-location/ionic/dist/hms-location” folder from library to “node_modules @iONiC-native” folder under your Ionic project.
Run the project
Code:
ionic capacitor run android --device
Cordova HMS Location Kit APIs Overview
HMS Location Kit: Cordova APIs Tutorial
Import and Providers: location.module.ts
Code:
/**
* 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 [user=1329689]@iONiC[/user]/angular';
import { LocationPageRoutingModule } from './location-routing.module';
import { LocationPage } from './location.page';
import {
HMSFusedLocation,
HMSActivityIdentification,
HMSGeofence,
LocationRequest,
PriorityConstants,
Events,
Activities,
ActivityConversions
} from [user=1329689]@iONiC[/user]-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
Code:
/**
* 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 [user=1329689]@iONiC[/user]/angular';
import {
HMSFusedLocation,
HMSActivityIdentification,
HMSGeofence,
LocationRequest,
PriorityConstants,
Events,
Activities,
ActivityConversions,
GeofenceRequestConstants
} from [user=1329689]@iONiC[/user]-native/hms-location/ngx';
import { HMSLocationKit } from [user=1329689]@iONiC[/user]-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
Code:
<!--
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