logo
Menu

Build a Real-Time Asset Tracking Application with Amazon Location Service

This web app will display an Amazon Location Service tracker's position ingested via MQTT.

Zach Elliott
Amazon Employee
Published Jun 20, 2024

Introduction

Asset tracking is critical to supply chain operations. Whether it is tracking trucks across the country or last mile deliveries around a neighborhood, knowing where your fleet is located can add business value around loss prevention, sustainability, and overall cost savings. In this tutorial, we will deploy a simple web application that shows current locations of assets, as well as historical location. We'll then use AWS IoT Core to simulate a vehicle, making use of the MQTT protocol, a lightweight messaging protocol designed for IoT use cases. This tutorial walks through setting up the Guidance for Tracking Assets & Locating Devices Using AWS IoT and how to deploy an easy to use asset tracking application.

Architecture

Architecture Diagram
Architecture Diagram
This diagram shows an overview of the solution we will be building.

Installing the Application

To install the application, we will be utilizing AWS Cloud9. However you are welcome to use any IDE or Development environment that meets the requirements described here.
First, clone the application repo, including submodules:
Next, navigate to the application directory:
Next, we need to install the visualization components. Navigate to the amazon-location-samples-react/tracking-data-streaming directory and run npm install
Once the packages are installed, we need to install some infrastructure including Amazon Location Service Tracker and Geofence resources. From the amazon-location-samples-react/tracking-data-streamingdirectory, run the following, replacing <your region> with your AWS region:
A successful deployment will look like this:

Configuring IoT Resources

Now that we have our base infrastructure setup, we can deploy the IoT Resources. This includes a rules engine action to update Location Service with a Lambda Function, as well as associated IAM permissions.
Navigate to guidance-for-asset-tracking-using-aws-iot-core-and-amazon-location-services/cf and run the following command:
Get the status of the stack deployment by running the following command:
A successful deployment will look like this:

Configuring Visualization

Now that we have set up our IoT Ingestion, we can move onto the frontend application.
Navigate to guidance-for-asset-tracking-using-aws-iot-core-and-amazon-location-services/amazon-location-samples-react/tracking-data-streaming/src and open the configuration.js file in a text editor of your choice.
Run the following commands in the terminal to get the Cloudformation Stack Outputs
Which will produce output similar to this:
Set the values in configuration.js to match the values from CloudFormation, as well as your AWS Region. Final configuration should look similar to this:
Save the configuration.js file.
In the terminal, ensure you are in the guidance-for-asset-tracking-using-aws-iot-core-and-amazon-location-services/amazon-location-samples-react/tracking-data-streaming directory, and run npm start to start the local web server.
Navigate to localhost:8080 in your browser, or Preview running application if using AWS Cloud9 and verify the map is loading.
Map Preview Loading
Map Preview

Viewing IoT Positions on the Map

Now that our map is deployed. We can view positions of IoT Devices on it. In order to do this, we will simulate an IoT Device, using the MQTT test client in the AWS IoT Core console.
Navigate to the AWS IoT Core console, and select MQTT test client on the left side.
Select the Publish to a topic tab, and enter the topic locationand for the Message payload enter the following, with the timestamp set to the current Epoch time.
Select Publish.
Now navigate back to your map preview, and you should see a Vehicle-1 that is set to the location we sent via the MQTT message.
Map Preview showing device locations
Map Preview showing device locations
Feel free to send more location updates with updated timestamps to the same topic, and watch the location move on the map. You can also select View History to view past locations for each device on the map.
To view more devices on the map, simply change the deviceid in the MQTT message. This simulates multiple devices uploading positions to MQTT and AWS IoT Core.

Hosting Application in CloudFront

Having our application running locally is great, but having it hosted and accessible from anywhere would be even better. In order to do this, we will upload our completed application to an S3 bucket, then host it with Amazon CloudFront.

Creating Bucket

First, we'll create our bucket. We'll do this via the console, but you are welcome to create it via the CLI.
First, navigate to S3 and select Create bucket
Now select a name for the bucket. Note these names need to be unique and follow bucket naming rules. Leave all other options as default, and select Create bucket.

Building and uploading application files

Now, back in our Cloud9 or local development instance, we need to build the application for hosting. In the terminal, navigate to guidance-for-tracking-assets-and-locating-devices-using-aws-iot/amazon-location-samples-react/tracking-data-streaming and run npm run build. A successful build will look like this:
Now we need to push these files up to our Amazon S3 bucket we just created. Navigate to guidance-for-tracking-assets-and-locating-devices-using-aws-iot/amazon-location-samples-react/tracking-data-streaming/build and run the following command:
Now our files are in S3, but they still can't be accessed quite yet. We need to deploy a CloudFront distribution in front of the bucket.

Deploying CloudFront distribution

In the AWS console, navigate to CloudFront and select Create distribution.
For Origin domain, select the S3 bucket we created.
For Origin access, select Origin access control settings (recommended) and then Create new OAC. Select the defaults and select Create.
Cloudfront Distribution Configuration
Cloudfront Distribution Configuration
Leave all other options as default, and select Enable security protections in the Web Application Firewall (WAF) settings. Select Create distribution. It will take some time to create, and while we are doing that, we can update our Bucket Policy.
Navigate to our new Distribution and select the Origins tab. Select the radio button next to our S3 bucket origin, and select Edit. You will see an info box similar to this one, prompting you to update your S3 bucket policy. Select Copy policy and then select Go to S3 bucket permissions.
S3 Bucket Policy Info Box
S3 Bucket Policy Info Box
On the Permissions tab, scroll down to Bucket policy and select Edit.
Paste in the bucket policy you copied in the previous step. It should look like this:
Bucket Policy for Cloudfront
Bucket Policy for Cloudfront
Select Save changes.

Viewing Application via CloudFront

Now that our CloudFront distribution has deployed, we can view our application anywhere. Navigate back to the CloudFront console. In the Details section, you will find the Distribution domain name. Copy that and paste it into your web browser, adding /index.htmlto the end.
Map via Cloudfront
CloudFront hosted Application

From here, you can perform the same IoT updates via the MQTT Test Client as before, and view your assets on the map.

Next Steps

Now that we have a simple asset tracking application deployed, we can expand past the simulations and dive into tracking using real IoT Devices connected to AWS IoT Core. The AWS Partner Solutions Finder maintains a list of Asset Tracking devices that are certified to work with AWS IoT Core.

Conclusion

In this blog, we have walked through the steps required to set up a simple Asset Tracking solution using AWS IoT Core and Amazon Location Service. This application can be used with many devices to show their current location, as well as interactions with geofences. We encourage you to set this application up for yourself, as well as make customizations that are applicable to your business case and asset tracking needs.
 

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Comments