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

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.

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

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:

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:

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.

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.

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.

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.

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.

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.

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.

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.

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:

Select Save changes.

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.

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

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.

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.