Home

Awesome

Contoso-Drive Support 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 Support Portal application scenario.

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

The Support Portal codebase

The codebase is a SPA application that runs 100% in the browser. There is no server side API component. The server is only used to deliver the SPA files to the browser. All device interactions have been fully coded into the application. Therefore simulating or even using a real device will make the application functionally work as expected.

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

Usage

Setup

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

First run

When you run the application for the first time, you will need to sign in and select the subscription that the IoT Central Contoso-Drive applications have been added to. All apps in that subscription will be available, but only those with the correct IoT Central device template will be used to query data. If you have followed the Learning Path module, you will be familiar with this concept.

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

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

Once the app has been set up and is running, there are several screens that you can visit that demonstrate how to use the APIs to provide scenario-specific experiences.

View Map screen

The View Map screen is a visualization that spans across applications within the subscription. Here, devices (vehicles) can be selected which opens a side panel. Filtering the apps will remove devices from the map so you can find relevant devices.

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

Vehicle details

You can view basic telemetry that the device has sent. Additionally, the device-specific actions become available. The only operations that can be carried out are Diagnostics Mode (a writeable device property) and Reboot Device (a command). If you are using the Driver Application to simulate your devices, you will see the results of these operations in that application and the status in the details panel.

<p align="center"><img width="700px" src="images/figure3b.png" /></p>

Fleet screen

You can filter applications on this screen. You can use this page as an example for how to use the IoT Central APIs to combine device properties, cloud properties, and device data into a single view. Additionally, it demonstrates single/silent sign-in deep-linking over to IoT Central to see the version of the device's details screen.

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

Register Driver screen

This screen is designed to demonstrate a series of API calls to create and register users into the application. This is the API orchestration:

Before running the Driver Application, the user should be registered using this flow

Using the Register Driver experience

Follow the steps in order to register a new user. Though the user's email address is additionally added as a cloud property, it offers no functionality again and merely serves to demonstrate calling the API.

<p align="center"><img width="700px" src="images/figure5.png" /></p>

Once completed, the registration information can be used for the Driver Application. Use the orange arrows to follow how the data lines up between the two apps.

<p align="center"><img width="700px" src="images/figure5b.png" /></p>

Manage Apps screen

The manage apps screen provides basic information about each IoT Central application and is taken from the Azure Subscription data. The only interaction here is to deep-link over to the respective IoT Central application (which will also silently sign you in)

<p align="center"><img width="700px" src="images/figure6.png" /></p>

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:4004