Home

Awesome

Contoso-Drive Driver Application

This repo is an IoT Central companion experience which is part of a set of repos demonstrating a Fleet Management scenario. To get up and running with the full experience, visit the Learning Path here.

Companion experience overview

Watch a 5 minute overview of the experience

IoT Central Companion Experience - Contoso Drive

Contoso-Drive is an example codebase and demonstration of an IoT Central companion experience. It's a codebase built around Fleet Management scenarios and leverages the Azure IoT Central REST APIs to communicate with the corresponding IoT Central applications.

<p align="center"><img width="600px" src="images/hero.png" /></p>

The Contoso-Drive companion experience is split into three concepts

This repo represents the Driver App scenario.

<p align="center"><img width="600px" src="images/concepts.png" /></p>

The Driver App codebase

The codebase is a SPA application that runs 100% in the browser. There is no server side API component. The code is a browser based device simulator that mimics some of the telemetry typically sent as vehicle telematics. The driver app is an authenticated experience which allows it to communicate with IoT Central. This also enables expansion into other systems requiring the same identity. To learn more about browser based device simulation visit this repo.

<p align="center"><img width="200px" src="images/figure2.png" /></p>

Usage

Setup

There are a couple of steps that need to be completed before running the code.

Once these steps are completed, build the code and run.

First run

On first run you will need to setup the application host name and device id that this simulator will be using. You will also need to sign in with the same user identity added through the support portal.

<p align="center"><img width="200px" src="images/figure1.png" /></p>

When a user is added through the support portal, the application host name (and device id will be provided) Once these fields are completed you will not need to set them again. To clear these values, clear the local storage for the browser instance or sign-out of the application.

Because this is a web app you can run multiple instances of the simulator with each using its own (user) identity and each using an incognito browser. Therefore each instance can and should have it's own application host and device id.

Authentication

Once you have provided valid credentials, you will not need to re-provide these until the authorization token expires. During that period, every use of the application will silently sign you in.

Regular use and the simulated telemetry

Once the app has been setup and is running, it displays a dashboard of information of the telemetry being sent. There are no interactions on this screen other than the ability to sign out. Below indicates what parts of the dashboard are real/simulated and which parts are purely cosmetic.

<p align="center"><img width="500px" src="images/figure3.png" /></p>

Simulated device data

The device that is being simulated has 2 types of data flow.

Data being sent

Data that can be received

The app does not remember its previous run state. Every restart or F5 press will result in a re-initialization.

Using a custom simulator

Because the driver app is just a device that uses regular Azure IoT Hub conventions, any simulator that knows the device's model can perform the D2C/C2D activities. Review the code to understand the capabilities that need to be implemented. Optionally, the Learning Path outlines how to use mock-devices to provide better scaled simulation data without the need for user credentials.

Installing, building and running the codebase

The codebase is built on create-react-app and therefore implements the same react-scripts. If you are not familiar with it visit the site for more details.

Install

npm ci

Build

npm run build

Run

npm start

Use

http://localhost:4003