Huawei Smart Watch — Using Compass + Location to make Qibla Finder Application Development using JS on HUAWEI DevEco Studio (HarmonyOS)
Article Introduction
In this article we will develop Qibla finder application for Huawei Smart Watch device using Huawei DevEco Studio (HarmonyOS). We will fetch Location and Compass API’s of HarmonyOS JS language to develop Application.
1. Create New Project
Let’s create Smart Watch Project and choosing ability template, Wearable and Empty Feature Ability (JS)
Define project name, package name and relevant directory where you want to save your project.
2. Preparing Files and Permission
Let’s first add images and permissions which we will use for project.
All project images will be under common/images folder, check below screenshot.
Next we need to add permissions for Internet and Location under config.json file.
3. Compass Development
In Compass screen development we will cover Location permission, Location fetching, location error and compass degree value.
Let’s start development without wasting more time.
Styling:
index.css:
Layout:
Location Loading Animation:
Location Loading Output:
Location Error & Retry:
Location Error Output:
Compass UI:
Compass UI Output:
JS code:
Structural — Code:
Data:
Common — Code:
Location Fetching — Code:
Compass — Code:
Qibla Direction — Code:
Compass Screen Notes:
To manage Layout, we need to use <stack> to overlap UI component in layers. First we need to fetch location data and identify the Qibla direction in degree. And call Compass JS API to get compass degree and manage the UI accordingly.
4. Result
Tips & Tricks:
· Requesting some data from internet, you must need to add Internet permission in config.json file.
· Fetching Location data, you must need to add Internet Permission in config.json file.
· Use Dev Eco Studio Previewer to check the screen layout and design. Previewer is developer friendly to Hot release changes on fly.
· For better management of big application it’s a good practice to centralize you common scripts and common style in common folder. Add images folder for complete application images.
· In JS script when you make some variable, in callback functions you can store the reference of this to some variable and then call reference variable. Like var _this = this.
References:
HarmonyOS JS API Official Documentation:
Geographic Location Documentation:
Sensor Documentation:
Conclusion:
Developers can able to fetch user location data and compass data to make Qibla finder application. While developing application for HarmonyOS developer can get benefit for both JS and JAVA language.
