[Huawei Developers] Freemind R:
Hi everyone, let’s create a Cordova android mobile application that uses the HUAWEI Location Kit. Before I start create the android mobile application, I would like to talk about the possibilities that HUAWEI Location Kit provides.

I will share the GitHub link of the project at the end of the article. (:

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

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/006/560/358/2640852000006560358.20200923103718.31727900177209815254711989596538:50511026081739:2800:49EB9F93D25E39F1486376C7B07EB1D056B4F37669C293E21E7EC6FAF1407726.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923103718.31727900177209815254711989596538:50511026081739:2800:49EB9F93D25E39F1486376C7B07EB1D056B4F37669C293E21E7EC6FAF1407726.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923103746.18600434907267027727371969672765:50511026081739:2800:E30ADCD8807B0464AFC2C3F0DA49E5AAA9ACC88BEBABFF9869F31B33A30E74E4.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923103746.18600434907267027727371969672765:50511026081739:2800:E30ADCD8807B0464AFC2C3F0DA49E5AAA9ACC88BEBABFF9869F31B33A30E74E4.png[/IMG]

Location Kit

https://developer.huawei.com/consumer/en/hms/huawei-locationkit

FAQs HUAWEI Location Kit

https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/location-faq

Create Cordova Application

Apache Cordova

⋆ Prerequisites: npm, Node.js and Cordova CLI(Command Line Interface) should be installed.

Let’s create a Cordova project using Cordova CLI in the Windows operating system and then add the Android platform to the project.

# create a cordova application using Cordova CLI
$ cordova create HmsLocationKitDemo com.hms.kitdemo HmsLocation

Project Folder: HmsLocationKitDemo

Package Name: com.hms.kitdemo

App Name: HmsLocation

# add android platform to project using Cordova CLI
$ cd HmsLocationDemo
$ cordova platform add android

Apache Cordova

https://cordova.apache.org/

HMS(Huawei Mobile Services) Location Kit Plugin

The Cordova HMS Location Kit Plugin provides adaption code used for the Huawei Location Kit to use in Cordova platform.

Add the cordova-plugin-hms-location plugin to your project using the command below.

# run command in root directory of your project
$ cordova plugin add @hmscore/cordova-plugin-hms-location
# Adding cordova-plugin-hms-location to package.json
# run project
$ cordova run android

The cordova-plugin-hms-location plugin has successfully added to the project.

For detailed information about the cordova-plugin-hms-location plugin:

https://www.npmjs.com/package/@hmscore/cordova-plugin-hms-location

We can start using the HMS Location Kit plugin in project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923103955.73778969588695225967501772009174:50511026081739:2800:F0F5152FD245DA2D11862B4B180F5494447BBFC1B10102D70C6E6DB3D21696BB.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923103955.73778969588695225967501772009174:50511026081739:2800:F0F5152FD245DA2D11862B4B180F5494447BBFC1B10102D70C6E6DB3D21696BB.jpg[/IMG]

·src/main/com/huawei/hms/cordova/location: core layer that exposes LocationKitSDK functionality to JS(JavaScript) side.

·www/: Public interfaces for interacting LocationKitSDK through Cordova.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104035.39136938009938757132898331263777:50511026081739:2800:C6753A6A65561CD711D1059282368BA81562C2CDB576C4BF34500820F20976E5.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104035.39136938009938757132898331263777:50511026081739:2800:C6753A6A65561CD711D1059282368BA81562C2CDB576C4BF34500820F20976E5.png[/IMG]

Using the Cordova HMS Location Kit

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104117.22428856837124205618722081969682:50511026081739:2800:52670999BF89CDDE1071E8AD8A11F9EE4E4FC476A3BEF8659252585169419BD6.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104117.22428856837124205618722081969682:50511026081739:2800:52670999BF89CDDE1071E8AD8A11F9EE4E4FC476A3BEF8659252585169419BD6.png[/IMG]

JS and HTML files that I created to use the cordova-plugin-hms-location plugin we have added in the Cordova project are in the picture left.

In order to show the use of the functions in the Cordova HMS Location-Kit, I created the following screens in the Cordova startup project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104146.25242619561445254790193473015345:50511026081739:2800:C5049BD3CB5B4113B97F042CE20302A09FF2B105AB5C02E59E0A28B59CE137DC.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104146.25242619561445254790193473015345:50511026081739:2800:C5049BD3CB5B4113B97F042CE20302A09FF2B105AB5C02E59E0A28B59CE137DC.png[/IMG]

index.html - fusedLocation.html

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104217.87610377761704402744749450056777:50511026081739:2800:3716A3E0BC93636C722EE82F9770AE01D20ED32A218A8D3169628E45262E442E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/006/560/358/2640852000006560358.20200923104217.87610377761704402744749450056777:50511026081739:2800:3716A3E0BC93636C722EE82F9770AE01D20ED32A218A8D3169628E45262E442E.png[/IMG]

activityIdentification.html - geofences.html

JS file used in index.html file

Initialize the HMSLocationKit on line 33 of the index.js file. It will run the following Java code in the cordova-plugin-hms-location plugin.

/*part of HMSLocationKit.java*/
if (action.equals("init")) {
Log.d(TAG, "init called.");
HMSBroadcastReceiver.init(cordova, webView);
callbackContext.success();}

A broadcast receiver is an Android component which allows you to register for system or application events.

<p style="line-height: 1.5em;">/*
* HMS Location Kit Cordova Startup Project - index.js
*/
const $ = (_id) => document.getElementById(_id);

$('fusedLocation').onclick = () => {
goPage("/fusedLocation.html");
}
$('activityIdentification').onclick = () => {
goPage("/activityIdentification.html");
}
$('geofences').onclick = () => {
goPage("/geofences.html");
}

function goPage(pageName) {
let dirPath = location.href.replace(/\\/g, '/').replace(/\/[^\/]*$/, '');
fullPath = dirPath + pageName;
window.location = fullPath;
}

var app = {
// Application Constructor
initialize: function () {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function () {
this.receivedEvent('deviceready');
// HMSLocationKit initialize
HMSLocationKit.init();
},
// Update DOM on a Received Event
receivedEvent: function (id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();</p>

First Screen - index.js

First screen of the HMS Location-Kit Cordova Startup Project: Cordova HMS Location-Kit provides the three main capabilities: Fused Location, Activity Identification, and Geofence. Let’s show relevant capabilities usage.

More information, you can visit https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201362404645680315&fid=0101187876626530001