Build a real-time location tracking app with HyperTrack & amp- React Native / Part-2

Hey guys! I know, I know…. It’s been a while since you are looking for the continuation of my previous blog post on Feb 2, 2021, on “Build a real-time location tracking app with HyperTrack & React Native”. It was interesting right, especially during this pandemic, where it’s highly risky to go out even for our basic necessities. With Real-time location tracking, here I am to enlighten you with a deep insight and get ourselves benefited…

Real-time location tracking is the backbone of all delivery and tracking apps in the market. For example, tracking your food on your favorite delivery app or tracking your cab on apps like Uber.

The concept behind real-time tracking is to get periodic location updates, track and broadcast them to all the clients watching for location updates on the map.

In my previous blog, we explored the basic integration of HyperTrack SDK with React native app for Android & iOS (cross-platform mobile app) and initiated location tracking (just a bare location tracking), but without an idea about location and tracking.

With this blog, we are going to take a look at how location updates (position coordinates) and trip updates ( Distance, Time, etc) are measured respective to user movement. To achieve this we used HyperTrack’s View SDK, part of the HT Location Tracking Service.

HyperTrack View SDK

• Views SDK is used for getting live location and movement data for devices and trips directly to your app.
• This module subscribes to HyperTrack’s GraphQL server endpoints to get data streams and then renders it useful callbacks for app developers to build beautiful tracking experiences.
• This helps developers in creating live location views to go serverless. Their app users can directly get data securely and privately from the HyperTrack servers.

Currently, this SDK is only available on Android & iOS but we need to write a custom wrapper to use it in React Native. In this blog, I will be demonstrating how to implement and subscribe to location updates in Android apps using native SDK.

Integrate View SDK

Step 1: Add View SDK

// Import the SDK within your repositories block
repositories {
    maven {
        name 'hypertrack'
        url 'http://m2.hypertrack.com'
    }
    ...
}

//Add HyperTrack Views SDK as a dependency
dependencies {
    implementation 'com.hypertrack:hypertrack-views:0.8.7'
    ...
}

Step 2: Instantiate

Pass Context reference to get an SDK instance.

HyperTrackViews hypertrackView = HyperTrackViews.getInstance(this, PUBLISHABLE_KEY);

Step 3: Get the state of the device

Get the current state of a tracked device

hypertrackView.getDeviceMovementStatus(deviceId,
                                  new Consumer<MovementStatus>() {
                                      @Override
                                      public void accept(MovementStatus movementStatus) {
                                          Log.d(TAG, "Got movement status data " + movementStatus);
                                      }
                                  });

In the callback, we’ll receive a MovementStatus object that encapsulates various data describing device states through the second argument.

Step 4. Subscribe to updates

Finally, we can receive device state changes updates like,

 hypertrackView.subscribeToDeviceUpdates(deviceId,
   new DeviceUpdatesHandler() {
           @Override
           public void onLocationUpdateReceived(@NonNull Location location) {
               Log.d(TAG, "onLocationUpdateReceived: " + location);
           }

           @Override
           public void onBatteryStateUpdateReceived(@BatteryState int i) {
               Log.d(TAG, "onBatteryStateUpdateReceived: " + i);
           }

           @Override
           public void onStatusUpdateReceived(@NonNull StatusUpdate statusUpdate) {
               Log.d(TAG, "onStatusUpdateReceived: " + statusUpdate);
           }

           @Override
           public void onTripUpdateReceived(@NonNull Trip trip) {
               Log.d(TAG, "onTripUpdateReceived: " + trip);

           }

           @Override
           public void onError(Exception exception, String deviceId) {
               Log.w(TAG, "onError: ", exception);

           }

           @Override
           public void onCompleted(String deviceId) {
               Log.d(TAG, "onCompleted: " + deviceId);

           }
       }
   );

As a result, we’ll plot poly-lines on the map tiles based on location & movement updates. And also we update tracking info like distance and time to reach the destination.

Once we stop tracking, we must stop location & tracking updates also using a code like below,

hypertrackView.stopAllUpdates();

Each trip has a device id, for which it was created, pass it to subscribeToDeviceUpdates and you’ll receive all the trip recalculations and delays in the onTripUpdateReceived callback.

We wanna play more with this SDK. In my next blog, I will be sharing the functionality of trip tracking and how we integrated Views SDK in React Native.

Now we are at the end of this blog and I wish to believe that this blog was informative and it helps in rendering a basic understanding of what happens at the back end of location tracking.

I bet you’ll have something to say! Come back here and tell us !!!

Thank you!