HUAWEI Location Kit Cordova Startup Project - Huawei Developers

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.
{
"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"
}
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.
Code:
# 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
Code:
# 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.
Code:
# 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.
·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.
Using the Cordova HMS Location Kit
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.
index.html - fusedLocation.html
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.
Code:
/*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.
Code:
<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