Open source sample app to track the movement history of your workforce

Alex G
HyperTrack
Published in
5 min readOct 8, 2019

One of the first questions we grow up answering and then grow up to ask–“How was your day?” We built an app just for that!

This sample app–built by and with HyperTrack–helps the team track our movement throughout the day. Places visited, commutes taken, walks to lunches, drives to meetings … really the timeline of movement from place to place, a.k.a. Placeline.

Placeline Web App

Our team actively uses this web app to test the readiness, accuracy, and quality of new platform features like geofences as part of trips.

What we built

We discovered that the Placeline app had a bunch of really awesome features that HyperTrack users could re-use and benefit from.

Scheduled trips

Scheduled actions for trip creation and completion

At midnight, a scheduler completes the ongoing Trip and creates a new one. This code may be modified to track work hours only, or shifts with a set time schedule.

Geofences for custom places

Tracking view with home and work geofences

Scheduled Trips are created with customizable places (work or home) as geofences. This way, users get notified in the app when they arrive or leave the geofence. The time spent at these places gets tracked automatically. This code may be modified to track customer sites or other business places.

Real-time app notifications using WebSockets

App notification from a WebSocket message

HyperTrack sends Webhooks for geofence arrivals and exits, device status changes to inactive and disconnected, activity changes (stops, walks, runs, cycles and drives), battery status changes to low battery and charging, and more. These Webhooks are streamed through WebSockets to an app to update the live views. This code may be modified to notify any app capable of WebSocket consumption.

Real-time mobile push notifications

Push Notification on trip arrival

To indicate the arrival at trip destinations in our internal testing app, we enabled the backend to subscribe to HyperTrack webhooks and emit push notifications to devices. This code may be modified to notify any mobile app for any updates.

Device overview

The live location and status of devices, along with a count of active and completed trips per device, is displayed in list view. You can drill down into active trips and track them using HyperTrack’s embed views. This is also where you can customize places (home and work) that will be added as geofences to scheduled trips. You may modify this code to build your own dashboard for tracking.

Movement summary

Review movement summaries for selected days on the map and in a timeline. You can also highlight interesting segments and select them to be added to an expense report. This code may be modified to build your own views for the location history and summary of a group of devices.

Expense management

Expense report screen with automatically pre-filled fields

Review and export selected segments to 3rd party expense management tools. The report details like amount, distance, date, description are pre-filled using HyperTrack summary data. This code may be modified to build your own expense management or time tracking system that automatically tracks visits and drives, and makes it easy for the workforce to bill or expense.

Re-use and deploy easily

With the realization that our developers would benefit from this app we took steps to polish, package, and release it into the wild as an open-source project! You can clone and even deploy it yourself on Heroku in just within minutes — for free and without additional coding.

Head over to the Placeline repository to get started right away.

Keep in mind this is just one of many ways to use the HyperTrack platform! We’re working on more sample apps. Stay tuned for future announcements!

Architecture

Placeline architecture overview

Placeline is built with a Node.js/Express server, a React/Next.js web app, and a job scheduler using RabbitMQ. It works with any mobile app that has the HyperTrack SDK in it. Here’s how they work together:

  • A mobile app with the HyperTrack SDK initializes and tracks devices on the HyperTrack platform
  • The scheduler creates and completes trips daily using configurable cron jobs that feed a messaging queue. Tasks get picked up from the queue and processed by a worker inside the scheduler project as soon as they arrive. The worker uses the HyperTrack APIs to manage trips and stores them in a MongoDB database
  • The backend server is built with general purposefulness in mind — usable within and outside on the Placeline project. It’s a sample integration leveraging all of HyperTrack APIs and Webhooks — storing updates to a MongoDB database and exposing them through REST APIs, WebSockets, or Push Notifications to web or mobile apps of any kind. On startup, the server synchronizes devices and trips using the HyperTrack APIs
  • The Placeline web app consumes the server APIs and WebSockets to provide a beautiful, responsive, and real-time dashboard. It also helps store custom places in the MongoDB database, which are picked up by the scheduler for geofencing
  • A mobile app (could be the same that initialized the HyperTrack SDK) that is configured to receive push notifications will be notified upon geofence webhooks arriving on the server

You can run the projects locally on Heroku with the click of a button — no additional coding is required.

With that being said, go build awesome things with it, let us know about it, and stay tuned for more samples!

--

--