Using the Visual Studio 2015/2017 IoT Hub Extension and IoT Hub Device explorer

In my previous blog, I presented a simple way to connect a device (actually it was a UWP app) to an Azure IoT Hub. After that, I persisted the messages, sent to the IoT Hub,  into SqlAzure using StreamAnalytics.

This easy example can still be simplified using the recently presented IoT Hub Extension and IoT Hub Device Explorer. In this blog, I will show you how to make use of these tools.

Update: this extension is also available for Visual Studio 2017 (version 1.6 and higher) now. At this moment, it contains basically the same functionality. In the future, I hope, this extension will provide more interesting logic like ‘device twin’ support.

This is part 2 of a series of blogs about IoT Hub communication using UWP:

  • Part 1: A very simple complex IoT Hub example
  • Part 2: Using the Visual Studio 2015 IoT Hub Extension and IoT Hub Device explorer
  • Part 3: Adding the power of BI to your IoT Hub
  • Part 4: Closing the Windows IoT Core feedback loop using Azure Functions
  • Part 5: PowerBI showing telemetry of past ten minutes, always!
  • Part 6: Add more flexibility to StreamAnalytics

Let’s start with a new UWP app and let’s pretend this is the second device on the same hub. We already have an IoT Hub (I use the S1 version) so we just have to connect to it.

IoT Hub Extensions

First, install the IoT Hub extension in Visual Studio 2015:

01 iot hub extension

Or in Visual Studio 2017:

After installation, within the app project in the Solution explorer, right click the References node and select Add Connected Service:

03 iot hub extension

Or in Visual 2017:

This will give access to the IoT Hub extension wizard as a Connected Service. Select it:

02 iot hub extension

Firs,t select the right IoT Hub from the long list of available IoT hubs you have in your Azure subscription:

04 iot hub extension

Then select an existing device or create a new one. We create a second device for this IoT Hub:

05 iot hub extension

For a new device, we only have to provide a ‘unique’ understandable device name. In this example, we use ‘ParkingLevelTwo’. A Device ID will be generated and administrated at the background:

07 iot hub extension

This was the last step. After that, a new static class named ‘AzureIoTHub.cs’ is created and you are good to go! A static class is pretty easy to use, no hassle with instantiation etc.

This static class has only two methods:

  1. static async Task SendDeviceToCloudMessageAsync();
  2. static async Task<string> ReceiveCloudToDeviceMessageAsync();

First observation is that the Send method has no parameters. A closer look shows us that the message to send is hard coded. The second observation is that the Receive method only listens for one message within 10 seconds.

Note: this class is useful for a demonstration but you will have to slice-and-dice it in a real production environment.

Ok, let’s use the one that is generated! We add the following XAML to the MainPage.xaml:

<StackPanel>
    <TextBlock Text="IoT Hub Extension Test"
               FontSize="40" />
    <Button Name="btnSend"
            Content="Send"
            FontSize="40"
            Click="btnSend_Click" />
    <Button Name="btnWaitForCommand"
            Content="Wait for command"
            FontSize="40"
            Click="btnWaitForCommand_Click" />
    <ListBox Name="lbCommands"
             FontSize="30" />
</StackPanel> 

And we add the following code-behind:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
 
    private async void btnSend_Click(object sender,
                                     RoutedEventArgs e)
    {
        await AzureIoTHub.SendDeviceToCloudMessageAsync();
    }
 
    private async void btnWaitForCommand_Click(
                             object sender, RoutedEventArgs e)
    {
        btnWaitForCommand.IsEnabled = false;
 
        while (true)
        {
            lbCommands.Items.Add(
              await AzureIoTHub.
                      ReceiveCloudToDeviceMessageAsync());
        }
    }
} 

This means the Send button must be pushed. It sends one message, every time you hit the button. The Wait For Command button will start waiting for commands in a loop. Every received message will be added to the list box.

Debug and start the app…

Device Explorer

So how do we know the device (the UWP app) will work? No extra code is needed! We just use the new Device Explorer, provided by Microsoft as open source in GitHub.

Update: The device explorer has moved to another GitHub location. The easiest way to install the Device Explorer tool in your environment is to download the pre-built version by clicking Azure IoT SDKs releases. Scroll down to the Downloads section to locate the download link for the SetupDeviceExplorer.msi installer. Download and run the installer.

First, you go to the configuration tab. You will have to provide the connection string of the ‘iothubowner’ (do not share this with non-admins). You can check the validity of the connection using the Update button:

08 iot hub extension

After that, go to the Management tab. There you will see all of the devices registered in this IoT Hub:

09 iot hub extension

If needed you can also add and delete devices or change the SAS tokens of them. This is the Device explorer after all 🙂

But for this demo, we are moving to the next tab named Data. Select the correct Device ID (ParkingLevelTwo) and hit the Monitor button. Now we are waiting for messages sent to the IoT Hub. In the UWP app, hit the Send button twice:

10 iot hub extension

You will see in the Device Explorer that the IoT Hub received two ‘Hello, Cloud! ‘ messages from the device.

Great! Now move on to the last tab, Messages To Device.

Again, select the correct Device ID (ParkingLevelTwo), add the message ‘Hello from Cloud!’, check the Add Time Stamp checkbox and check the Monitor Feedback Endpoint checkbox. Then hit the Send button:

11 iot hub extension

The message is put in the message queue of the IoT Hub, waiting for the specific device to fetch it. Switch over to the UWP app and hit the Wait For Command button. The button will be disabled and the message is received:

12 iot hub extension

In the Device Monitor the delivery of the message is confirmed as a success:

13 iot hub extension

In the Device Explorer, hit the Send button a few times more and observe the behavior of the UWP app. It will receive the messages and it will confirm that back to the IoT Hub. This is a very reliable way of communication:

14 iot hub extension

Both the IoT Hub Extension and the Device Explorer are open source! So start contributing if you see something that can be made better…

Advertenties