Hardware components | ||||||
 |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
| ||||||
 |
| |||||
 |
| |||||
Let’s walk through this article through of the eyes of a fictional company named ABC Ltd who owns a Shopping mall. Their parking lot is very actively used by their customers and they have number of parking agents to manage different buildings. Some days are busy with cars parked in all buildings but others days are different where cars are scattered around in different buildings. ABC Ltd decided to improve the efficiency of their parking system so that they can plan the workload for their parking Agents.
ABC Ltd.’s Development team took this is an opportunity to showcase the power of Internet of Things to improve not only the productivity of its employees but also improve their User engagement there by increasing profit.
As time was not a luxury, the Development team decided to use all available tools and dirty tricks to build a Proof of Concept. Let’s take a look at solution they presented to their Management.
Raspberry Pi – Parking Lot status DisplayEach building has a Raspberry Pi device that is connected to all Parking Sensors in a level. This device acts as a local hub and sends out the status of each sensor (Occupied/Free), every minute, to an Azure IoT Hub. A Windows UWP app also displays the status on a Monitor connected to the Raspberry Pi. This allows customers to quickly identify a spot which means less time spending searching for space and more time in the mall.
Parking Lot security team has Admin Web application using which they can monitor status for each parking lot. This is a modified version of a Azure IoT Suite Preconfigured solution. Admin screen also allows them to add devices and monitor their status.
The development team also developed a Messenger Bot which allows Security team to contact any car owners if they are checked-in via their Bot. Here is how the check-in process works. After parking the car, the driver can simply send the Parking lot number (A11, A610 etc.) or click Check-In persistent menu.
Admin screen displays a Message Icon if the parked car is Checked-In. Building security can send any important message to the driver. Here is how it looks like
Bot – Connecting Customers & Customer Support
Smooch framework is used to quickly connect Messenger applications and other business platforms like Slack, Email etc. ABC Mall uses Slack for their internal communication and the development team thought it would be a good idea to connect Slack and the Bot so that customers can talk to the employees directly. Here is an example, one of the customers lost his bag and you can see how quickly he can get help.
Under The HoodFollowing diagram illustrates all the elements involved in the Smart parking system.
As you can see, there are lot of elements here and we will go into detail. I should remind you that the development team is trying to build the proof of concept as soon as possible so during the course of the development we will anger few Developer gods :) but it’s okay as this is not a Production Ready solution.
Azure IoT Hub preconfigured solution – Remote monitoringAzure IoT suit preconfigured solution allows anyone to quickly build Internet of Things solution. Try out the Remote Monitoring solution by visiting https://www.azureiotsuite.com.
Remote Monitoring preconfigured solution is available for download from https://github.com/Azure/azure-iot-remote-monitoring. Download a copy and unzip the contents to your working folder.
Before proceeding, it’s important to understand the architecture of the solution. Read the following articles to learn more about the Remote Monitoring Preconfigured solution.
Local DevelopmentOpen Visual Studio Developer Command Line and run the following command to setup Remote monitoring solution for local development.
build.cmd local
Follow the wizard to provision Azure services. If everything goes well, you should see the following screen.
Above command does the following
- Save account name, subscription, connection strings, endpoints and deployment location into the local.config.user file.
- Create an Active Directory application in your directory and assign you as role administrator
- Provision the resources and connect the Stream Analytics jobs to the IotHub, EventHub, and Storage account
All Azure services are grouped under one Resource Group. This makes it easy to manage them. At this point, Azure Management portal should display the new Resource Group LocalRM and the resources under it.
Note: Web App and Azure Web Jobs are not deployed to Azure during local development.
Before testing the new solution, follow this article https://github.com/Azure/azure-iot-remote-monitoring/blob/master/Docs/configure-preconfigured-demo.md to change the service plans for following Services to minimize cost.
- Change the IoT Hub from an S2 – Standard to an S1 – Standard.
- Change the Storage account from Standard – GRS to Standard – LRS.
- Change the App Service plans from S1 - Standard to B1 – Basic.
Open RemoteMonitoring.sln Visual Studio solution and build the solution to restore Nuget packages. For the Remote Monitoring solution to work, It’s important that the Web, EvenProcessor.WebJob and Simulator.WebJob projects to run at the same time. Right click the solution and set the above three projects as Startup Projects.
Debug the solution and Login to the Dashboard with your Azure account. If all projects are running without errors, you should see the Telemetry data in the dashboard.
Congratulations! :) your own copy of preconfigured solution is up and running.
Click Devices link to check status for Simulated devices.
If you missed reading the Remote monitoring preconfigured solution walkthrough link above, it’s time to read it again to understand how all the Azure Services work together to display the real-time Telemetry data in the Dashboard.
Customize Remote Monitoring SolutionThe Simulator.Web.Job sends out test data for a cooling device. Disable this project from Start-up. This project will not be used.
Disable and Remove all the existing devices using the Devices section in the Web application. New devices will be added later for testing.
DashboardThe Web Project’s Dashboard screen will be modified to display telemetry data from parking sensors. Let’s take a look at how the Dashboard view is setup currently. Important files are marked in the below screenshot.
Following changes were done to change the Dashboard to display parking lots and status from many sensors instead of one sensor.
Index.cshmlExisting HTML elements are replaced with Divs for Parking lots. They are auto generated using Angular.JS. Each Div has a button that displays a car icon, a messenger icon and hidden span to store user’s id if the user has checked-in using Messenger. Buttons are also assigned a click event to handle sending messages.
_AlertHistory.cshtmlThis view displays current Weather, Message box with to and Message fields and clock displaying current time. When the Send Button is clicked, an Ajax request is made to the Web Api controller (/api/v1/devices/contact) to send the message to the selected user.
_DashboardDevicePane.cshtmlThis view initializes a timer that is triggered every 30 seconds. Using DashboardDevicePane.js ajax calls are made to /api/v1/telemetry/dashboardDevicePane Web Api controller to get the status of every device.
TelemetryHistory.jsThe function redraw in this file is changed to read the telemetry data and check for parkStatus property. This property holds the status of a Parking lot (Free/Occupied). Button (car icon) is shown or hidden based on the value of this property. When a user checks-in using a messenger, messengerUser property of the device is updated with the user id. This allows the admin to send messages using the smooch.io Api. Message Icons are shown or hidden based on this property value.
DeviceApiController.csTwo new methods are added to this Api controller. ContactAsync makes calls to a Node application running in Azure (Covered later) to send the message. This Web app uses Smooch Api to deliver the message. CheckInAsync method is used by Smooch Bot to check-in a user. This method simply updates the MessengerUser property of the device with the Smooch user id.
TelemetryApiController.csGetDashboardDevicePaneDataAsync method in this controller is changed to return status for all devices instead of one. This method also returns the MessengerUser property to check if the user is checked-in or not.
Run the solution and you should see the new dashboard. There are no devices connected to the IoT hub at this moment so the Dashboard will not display any status.
Add few devices by clicking Add Device button.
Make a note of Hostname and Device key. They will be used in the next project to test the devices.
Device SimulatorsThe UWP app which will send device telemetry is not yet ready. To speed up the process, Use the Remote Monitoring node Project. This is a modified version of node samples from https://github.com/Azure/azure-iot-sdks/tree/master/node/device/samples repository. This version sends telemetry data for more than one device at a time. Update the remote_monitoring.js with your device hostnames and device keys. Run the application using the following command
node remote_monitoring.js
You should start seeing telemetry data being sent. Devices view in the Web app will also start displaying devices as Running status.
It’s time to develop the UWP app which will run on a Raspberry Pi computer running Windows 10 IoT Core. The UWP app has two main function
- Send telemetry data from sensors (Free/occupied) every minute. Connecting real sensors is out of scope of this article. Sensor data will be simulated for demo purposes.
- Display parking status (Free/occupied) on a monitor so that drivers can find the free spot quickly.
Github link : https://github.com/shobankr/IoT-Suite-Smart-parking/blob/master/UWP%20App/ParkingLotDisplay/MainPage.xaml
This page has a ListView control that is designed to display a parking lot layout and Image control to display a Car icon if it’s occupied. Messenger status is removed from UWAP app.
MainPage.xaml.csGithub link : https://github.com/shobankr/IoT-Suite-Smart-parking/blob/master/UWP%20App/ParkingLotDisplay/MainPage.xaml.cs
When the UWP app is first loaded, it generates parking lot rows using the GenerateParkingRow method. The result is then bound to the ListView Control. A new Timer is initialized with one-minute interval. LoadDevices method creates connection string objects for each device. A random device is selected and its parking status is set as “Occupied”. This sensor data is then sent to the Azure IoT Hub using the SendMessageToCloudAsync method. UpdateDisplay method updates the ObservableCollection which is reflected in the screen. Timer repeats these steps every one minute by choosing a random device from the list.
This App can be deployed to a Raspberry Pi by changing the Device Configuration to ARM and choosing a Remote device for deployment.
It’s time to integrate Smooch Api and develop the Bot. It’s important to understand how Smooch Api works. Following articles should get you started
Smooch Bot is a simple Node JS Express JS web application which handles messages. Following are the main two files
Index.jsGithub link : https://github.com/shobankr/IoT-Suite-Smart-parking/blob/master/Smooch%20Bot/index.js
This file registers a new webhook with Smooch.io. This allows all messages to be sent to the url specified in the webhook which will be processed and responded by the Bot developed using Smooch Bot framework. This file also adds a persistent menu for Facebook messenger.
Run this file by executing the following command from the Command line.
node index.js
github link : https://github.com/shobankr/IoT-Suite-Smart-parking/blob/master/Smooch%20Bot/routes/webhook.js
This file has two routes one for processing all messages from customers and one for sending a custom message to a user. This method is used by the Remote monitoring web application. Smooch requires this node application to be available in the internet. You can deploy a node application to Azure within minutes. Follow the step by step guide here https://blogs.msdn.microsoft.com/cdndevs/2015/11/06/visual-studio-code-for-mac-developers-how-to-deploy-your-site-to-microsoft-azure/
Open Smooch dashboard and connect Facebook Messenger and Slack so that both these platforms can send and receive messages.
Cloud DeploymentIt’s time to deploy the modified preconfigured solution to Azure. Run the following command
build.cmd cloud release azureenvironment
This command will:
- Save account name, subscription, and deployment location into the <serviceName>.config.user file
- Create an Active Directory application in your directory and assign you as role administrator
- Provision the resources and connect the Stream Analytics jobs to the IotHub, EventHub, and Storage account
- Build and upload the current repo code as a zip package to the storage account
- Deploy 2 instances of the website and 2 instances of the webjobs
Once the deployment is complete, you should see a new resource group called azureenvironment.
The difference between local and cloud deployment is that cloud deployment provisions the Web app and two Web jobs along with the other services that were provisioned for local development. Follow the same steps that were followed earlier to change service plans.
The build script deploys the Simulator Web job that is not used by our IoT project. Open the classic Azure management portal, navigate to the Web Jobs screen and stop the Simulator job.
Navigate to Stream Analytics screen and stop the azureenvironment-Rules job. This is also not used by our project.
Open the azureenvironment-Telemetry job and navigate to query tab. Change the query to remove Temperature, Humidity, ExternalTemperature values from the query as shown below. Note: You will have to stop the job before changing the query.
That’s it! Open the newly provisioned Remote monitoring web application and enjoy your custom Azure IoT suite. :)
Improvements & New featuresThis project was intended to showcase the power of IoT and how it can be used to make employees more productive and improve customer engagement there by increasing profit. There is room for lots of improvements and here are some of them
- Currently, Check-In and Sending messages to users are done using Anonymous calls. Even though it’s difficult to guess a unique user id, this should be avoided in production application. Apps should be updated to make calls using Azure Active Direction authentication.
- Predictive Analysis: App can be further improved by collecting and processing all historical data. This data combined with other useful information like Weather, Holidays etc. to predict traffic in-flow and plan for work allocation and efficient parking.
- Smooch makes it extremely easy to connect messenger applications with business applications. The current Bot can be improved by using Microsoft Bot Framework and LUIS to answer more natural queries from customers.
In this article, I showed you how easy it is to take existing preconfigured Azure IoT solutions and customize and connect it with other services. Hope you will find it useful in building your IoT applications.
Comments