Skip to content
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci circleci enablement Sep 3, 2019
components Update readme Sep 6, 2019
pages Update readme Sep 6, 2019
static
.babelrc
.gitattributes
.gitignore Update package.json Jul 19, 2019
LICENSE Initial commit Jul 2, 2019
README.md Update README.md Sep 12, 2019
app.json update repo names Sep 6, 2019
next.config.js enable inline svg and update timeline UX Jul 23, 2019
package.json update repo names Sep 6, 2019
yarn.lock Update readme Sep 6, 2019

README.md

HyperTrack logo

Sample Frontend Integration: Placeline

Placeline is a ReactJS/NextJS sample application to track the movement of your mobile workforce through the workday. Use this web app to track the live location, activity, device status and places visited by your business assets; track summaries for drives, steps, places and inactive hours; drill down to device locations organized in activity segments for each day, and export selected segments to 3rd party applications such as expense management software.

💬 Check out this blog post to learn why this is important, how HyperTrack is using it internally, and how it all ties together with the backend, the scheduler, and the HyperTrack platform.

Placeline is built with HyperTrack APIs, SDKs, webhooks and associated helper libraries (like the sample backend NodeJS/Express project).

Overview

Features

Features of this sample application include:

View Features
Devices Overview
  • Map the live locations of devices
  • Search and browse live tracking status and days tracked
  • Drill down to live tracking views and day’s history for each device
  • Set geofences for home/work to track arrival/exits at those places of interest
Single Device
  • Track movement organized in granular segments for selected days
  • Review the location data of each segment on a map
  • Track summaries for the tracked duration, distance, activities, places, steps and more
  • Export driving segments to a 3rd party expense report
Expense Report
  • Review the detailed location history on one map
  • Review the distance, time, description, and expense amount based on a fixed rate
  • Submit expense report and see a success confirmation

How it works

The project uses the NextJS and leverages file-system routing(read more). With that, the project structure looks like this:

  • /components: HOC to be used within pages
  • /pages: Navigatable pages and general setup for app/document
  • /static: Statically served styles and images

Requirements

The goal of this project is to get you to a deployed integration in minutes. For this to work, you need to have:

Installation and setup

You can install this project on your local machine and deploy it quickly to Heroku for free.

Local setup

After cloning or forking this repository, you should install all dependencies on your machine:

# with npm
npm install

# or with Yarn
yarn

Next, you need to set your environmental variables. The project uses dotenv, so it's best to create a .env file in the root folder of the project. This file is listed in .gitignore and shall not be checked into public repositories. Below is the content on the file - please ensure to replace the keys with your own:

# Google Maps
GMAPS_KEY = <YOUR_GOOGLE_MAPS_KEY>

# Server
SERVER_URL = <YOUR_SERVER_URL>

With the dependencies and configuration in place, you can start the server in development mode:

# with npm
npm run dev

# or with Yarn
yarn dev

On startup, Localtunnel is used to generate a publicly accessible URL for your local server (https://<unqiue_id>.localtunnel.me). A new browser window will open with your unique, temporary domain. If successful, the browser window will show the device overview.

Congratulations! You just completed a web app for your HyperTrack integration.

Heroku setup

This project is set up to be deployed to Heroku within seconds. You need a Heroku account. All you need to do is to click on the one-click-deploy button below. It will provide the following services and add-ons:

  • Web Dyno - to run the server on Heroku (free)
  • NodeJS buildpack - to run NextJS on Heroku (free)
  • PaperTrail - hosted logging system (free)

Similar to the local setup, you need to have your keys ready before the deployment. The Heroku page will ask you for the following:

You need to enter all of these keys for the project to run successfully. Heroku uses the input to pre-set the environmental variables for the deployment. You can change after the setup as well.

Deploy this project now on Heroku:

Deploy

Backend

For this project to work, it needs to consume REST APIs to display the devices, places, and trips data. You can use the NodeJS Sample Backend Integration project to spin up a backend that works out fo the box.

Here are the API endpoints required:

Endpoint Method Schema Description
/devices GET Device Load all devices (overview page)
/trips GET Trip Load all trips for all devices (overview page)
/device-places GET DevicePlace Load all places for all devices (overview page)
/device-places/{device_id}/{label} POST DevicePlace Save or update a place (label can be either work or home) for a selected device (overview page)
/devices/{device_id}/trips GET Trip Load all trips for a selected device (single device page)

Note: Each endpoint gets prefixed with the SERVER_URL environmental variable.

Usage

Once the main page (index.js) is opened, it will load all devices, places, and trips from the backend and display them in the device list and on the map. A click on the device name will open up the single device view. That view loads all trips (associated with the selected device) for the current week by default. For every single trip, the summary is extracted and presented in a timeline fashion on the left menu. An overview of distance, time, and activities is calculated and displayed on the top. The map will show all polylines from every trip summary. With a click on the add button on one of the driving activities in the timeline will add it to an expense report. You can open up the report and review pre-filled fields based on the summary data form HyperTrack. You can submit the fictional report and a confirmation notification with all report details will appear.

Note: For the sake of simplicity, the expense report function is a fictional method with a slight delay, simulation a real API call you can implement.

Related

This web application is built to work seamlessly with the NodeJS Sample Backend Integration and the Placeline scheduler.

Credits

This project uses the following open-source packages:

  • nextjs: SSR React Framework
  • dotenv: Load environment variables from .env files
  • localtunnel: Expose your localhost to the world for testing and sharing
  • ant-design: An enterprise-class UI design language and React implementation
  • axios: Promise based HTTP client for the browser and node.js
  • lodash: A modern JavaScript utility library delivering modularity, performance, & extras
  • moment: Parse, validate, manipulate, and display dates in javascript
  • nprogress: For slim progress bars like on YouTube, Medium, etc
  • react-google-maps: React.js Google Maps integration component
  • react-places-autocomplete: A React component for Google Maps Places Autocomplete
  • styled-components: Visual primitives for the component age
  • randomcolor: A tiny script for generating attractive colors

License

This project is licensed under the MIT License - see the LICENSE file for details

You can’t perform that action at this time.