Ionic Capacitor

GitHub
npm

Ionic Capacitor HyperTrack SDK is a wrapper around native iOS and Android SDKs that allows to integrate them into Ionic Capacitor apps.

Requirements

Basic integration

Add HyperTrack SDK to your project

npm install hypertrack-sdk-ionic-capacitor

iOS

Install the native HyperTrack SDK through CocoaPods:

cd ios
pod install

We constantly work on making our SDKs better, so make sure you have the latest version. You can get it in the changelog here.

Enable Background Modes

Enable Background Modes

Add purpose strings

Add purpose strings

Set up silent push notifications

The SDK has a bi-directional communication model with the server. This enables the SDK to run on a variable frequency model, which balances the fine trade-off between low latency tracking and battery efficiency, and improves robustness. This also enables HyperTrack Trips to start and stop tracking automatically when trip starts and ends. For this purpose, the iOS SDK uses APNs silent remote notifications and Android SDK uses FCM silent notifications.

Initialize the SDK

Get your publishable key from the Setup page.

import { HyperTrack } from 'hypertrack-sdk-ionic-capacitor';

const PUBLISHABLE_KEY = "Paste_your_publishable_key_here";

const hyperTrack = await HyperTrack.initialize(PUBLISHABLE_KEY);

Start tracking

Now the app is ready to be tracked from the cloud. HyperTrack gives you powerful APIs
to control device tracking from your backend.

To use the HyperTrack API, you will need the {AccountId} and {SecretKey} from the Setup page.

Track devices during work

Track devices when user is logged in to work, or during work hours by calling the
Devices API.

To start, call the start API.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}/start

Get the tracking status of the device by calling
GET /devices/{device_id} api.

curl \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}

To see the device on a map, open the returned embed_url in your browser (no login required, so you can add embed these views directly to you web app).
The device will also show up in the device list in the HyperTrack dashboard.

To stop tracking, call the stop API.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}/stop

Track routes with ETA

If you want to track a device on its way to a destination, call the Routes API
and add destination.

HyperTrack Trips API offers extra fields to get additional intelligence over the Devices API.

set destination to track route and ETA
set scheduled_at to track delays
share live tracking URL of the trip with customers
embed live tracking view of the trip in your ops dashboard

curl -u {AccountId}:{SecretKey} --location --request POST 'https://v3.api.hypertrack.com/trips/' \
--header 'Content-Type: application/json' \
--data-raw '{
    "device_id": "{device_id}",
    "destination": {
        "geometry": {
            "type": "Point",
            "coordinates": [{longitude}, {latitude}]
        }
    }
}'

To get {longitude} and {latitude} of your destination, you can use for example Google Maps.

HyperTrack uses GeoJSON. Please make sure you follow the correct ordering of longitude and latitude.

The returned JSON includes the embed_url for your dashboard and share_url for your customers.

When you are done tracking this trip, call complete Trip API using the trip_id from the create trip call above.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/trips/{trip_id}/complete

After the trip is completed, use the Trips API to
retrieve a full summary of the trip.
The summary contains the polyline of the trip, distance, duration and markers of the trip.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/trips/{trip_id}

Dashboard

Once your app is running, go to the dashboard where you can see a list of all your devices and their live location with ongoing activity on the map.

Prepare for App Store and Google Play submission

Recommended additional steps

Identify devices

All devices tracked on HyperTrack are uniquely identified using UUID. You can get this identifier programmatically in your app by calling getDeviceId() after initialization.

Another approach to identification is to tag devices with names that will make it easy to distinguish them on HyperTrack Dashboard.

hyperTrack.setName("Device name")

You can additionaly tag devices with custom metadata (and filter them in the Dashboard using metadata fields). Metadata should be representable in JSON.

hyperTrack.setMetadata({"key": "value"})

Handle errors

Use the errors subscription to make sure that when the driver navigates to the screen where tracking is supposed to happen, there are no blockers that can prevent that.

You can use subscription API to be able to react immediately when errors come up:

const errorsSubscription = hyperTrack.subscribeToErrors { errors in
  switch (errors) {
    ...
  }
}
errorsSubscription.remove()

Reference

For a full SDK API reference see HyperTrack React Native SDK Reference

SDK integration examples

To learn more about SDK integration examples, you may visit these resources:

Quickstart apps

Support

Join our Slack community for instant responses. You can also email us at [email protected].

Frequently Asked Questions

Support

Join our Slack community for instant responses. You can also email us at [email protected].