👨🏼💻Three in One! An Event App with HMS Location, Map and Push Kit for React Native
Introduction
Hi people 👋!
In this article, I will introduce three awesome Huawei kits with an app in React Native to you!
HUAWEI Map Kit provides an access to SDK for map development. With this SDK, you can easily add a real map into your apps, draw something on it and many more cool functions.
HUAWEI Location Kit provides a set of easy-to-use APIs for your app to quickly obtain the device location based on the GNSS, Wi-Fi, and base station location data.
HUAWEI Push Kit is a messaging service provided for you to establish a cloud-to-device messaging channel. By integrating Push Kit, you can send messages to your apps on user devices in real time. Also you can send local notifications.
About GeoFence
Geofence literally means a virtual border around a geographic area. Geofencing technology is the name of the technology used to trigger an automatic alert when an active device enters a defined geographic area (geofence).
As technology developed, brands started to reach customers. Of course, at this point, with digital developments, multiple new marketing terms started to emerge. Geofencing, a new term that emerged with this development, entered the lives of marketers.
Preparing the Development Environment
First of all you will need a Huawei Developer Account to create an app in AppGallery Connect and activate Location API, Map API and Site API. You can follow the preparation steps of the Location Kit because almost all of them are the same. You can also check out this medium article.
App Permissions
Since the kits we use have access to sensitive information about the user’s location, we must ask the user for permission at the first opening of our application.
First we need to add the permissions to AndroidManifest.xml file.
Then we need to ask the user for permissions. We can use React Native official PermissionsAndroid API for this.
Join Us!
The app we are making here is an event application where people organize events in a region they want and invite people who enter the region.
First of all, we add basic app requirements like navigation between pages, home screen etc.
Then we add a map to our app with HMS Map Kit.
There are so many properties for HMSMap. For example we’re using onMapLongClick property to select a center for our event.
We have quite wealthy options for drawing shapes on the map because we have HMSPolygon! But in this app I chose HMSCircle.
We give our event’s center to HMSCircle and set radius of the circle to the radius of our event and add some style to our circle with strokeColor and fillColor properties. 🌈
Also I want to customize our marker on the map.
Now you can change location of our custom marker and select a center for your event via long pressing a point on the map. And also set radius of your event with a slider.
There is a fairly new feature on HMSLocation called GeoCoder! You can obtain an address by giving longitude and latitude or you can do reverse of this and give an address and get possible longitude and latitude information.
Creating an Event
After we select a center and radius for our event finally we can create a GeoFence!
Now we added a virtual fence on the map!
We must add a listener to be alerted when we enter the area of an event.
You can access the id numbers of the geofences you entered, you can do useful things by blending them with databases.
To obtain geofence result when the application is in the background or killed state we must use registerGeofenceHeadlessTask(callback) function.
It is very efficient to use notifications with such functions that register to headless tasks. You can do that easily with HmsLocalNotification module of HMS Push Kit!
You can find the full code in my GitHub page. Here is the link for you.
Conclusion 🎉
In this article you have learnt how to use some of the features of Huawei Map, Location and Push kits in your projects.
I hope it was useful and you enjoyed it!
