Set up an IoT Hub

An IoT Hub is a feature in Azure for connecting devices to other features in Azure. Most notably, the IoT Hub provides a message queue for you to send messages to the cloud. These messages can then be consumed by other features (or other applications) in Azure or by another application connecting to Azure. Let's begin by logging into the Azure portal ( www.portal.azure.com ).

To add an IoT Hub, click New in the Azure portal. This opens a submenu that shows a list of categories. In the blade that opens, choose Internet of Things. Figure 16-2 shows the selections made.

Figure 16-2. Adding an IoT Hub

The Azure portal page is best viewed on a wide screen because it spreads things out quite a bit by opening sliding forms (called blades) for settings, selections of features, and so forth.

On the next blade, you see the IoT specific features and products. Click the IoT Hub area. This opens a new blade, where you can fill in some information about the new IoT Hub , including the following.

• Name: Choose a name that is unique (Azure tells you if it is not). You have only a few characters to work with so keep it short.

• Pricing Tier: Use the free tier by clicking the arrow. Click F1 Free from the list and then click Select.

• Number of IoT units: Leave this set to the default.

• Device-to-cloud Partitions: Leave this set to the default. (Note: this equates to how many devices you can connect at one time.)

• Resource Group: Choose a name that is unique. You can use shared groups, but I recommend creating your own.

• Subscription: Leave this set to Free Trial.

• Location: Choose your location.

• Pin to Dashboard: Click this to place the IoT Hub on the dashboard for easy access.

Figure 16-3 shows the completed information for an IoT Hub I created when testing this project.

Figure 16-3. Setting up an IoT Hub

I highlight those areas you need to fill in when you create your own IoT Hub. Notice the names that I used. I simply used my initials and a short description. It's a bit cryptic, but remember, the names must be unique in the region where you are creating the resources. Add some numbers if you get a name violation to help make the names more unique.

The next step is the registration process. Azure merrily creates your IoT Hub for you in the background. An occasional pop-up message keeps you updated of the status. You can click the bell symbol in the top right of the portal to see your messages. I should note that, depending on resources being allocated; the registration could take some time. Now is a good time to refresh that beverage, pay some attention to the family, pet your dog, and so forth, and check back in about 15 to 30 minutes.⁵

Once created, you see a message stating, Deployments Complete. If at this point you do not see your IoT Hub in dashboard on the portal, you can try refreshing the screen or click Resource Groups to refresh the dashboard. Your IoT Hub should show up on your dashboard as a tile, as shown in Figure 16-4.

Figure 16-4. New IoT Hub on Dashboard

Click the tile for your IoT Hub. This takes you to the settings console, as shown in Figure 16-5. You can also see get to this by clicking All Resources and selecting your IoT Hub from the list.

Figure 16-5. Settings page for the IoT Hub

Notice the area marked Usage. You will use that in a moment to verify that your messages have been sent to the cloud. Notice also the subscription id and URI (hostname). Make a note of these strings, as you need them again in the project. I have redacted mine to protect my account.

While you are on this page, it is a good idea to click the small key icon to get the keys for the policy that you need to use. Click the key and then click iothubowner in the list. You see all the keys and permissions for this policy in the next blade. Copy the strings using the copy icon next to each and place these in a file somewhere. You will use the primary key and the connection string for the primary key, as annotated in Figure 16-6.

Figure 16-6. Policy settings and keys

OK, the IoT Hub is ready for messages. Next, let's set up your PC.

Set up the PC

There are two things that you need to do on your PC to create the sample project: install the Device Explorer (if you haven’t already) and install an add-in to Visual Studio called Connected Service for Azure IoT Hub. You will use the Device Explorer to test the sample application.

You also need to install the Connected Service for IoT Hub. You can install this from within Visual Studio via the Tools ➤ Extensions and Updates dialog, as shown in Figure 16-7. The Connected Service for Azure IoT Hub is a utility to help you easily and quickly add Azure IoT Hub access to the project.

Figure 16-7. Adding the Connected Services for Azure IoT Hub

Now, let's create the sample Hello, World Azure style project.

New Project

You will use a C# project template for this project—the Blank App (Universal Windows) template. Use the name HelloAzure for the project name. You can save the project wherever you like or use the default location.

Azure IoT Hub Connected Service

You will use the connected service feature to add code to the project. The utility creates a new source file named AzureIoTHub.cs, which encapsulates what you need to communicate with the cloud. Let’s run the connected service now.

Right-click the References item in Solution Explorer and choose Add Connected Service. Scroll down the dialog and select the Azure IoT Hub entry, as shown in Figure 16-8. Click the Configure button.

Figure 16-8. Adding the Azure IoT Hub Connected Service

You are asked to choose the security mode, as shown in Figure 16-9. Choose the hardcoded option. This is fine for small, experimental projects or projects for you own use. As you will see, you can choose a more restrictive method but this requires adding a bit more code in your project to use. Plus, it is still in an experimental stage. Click the OK button to continue.

Figure 16-9. Select Security Mode

On the configuration page, you are asked to log in to your Azure account. You should see your account in the upper-left corner of the dialog. If you do not see it, choose the account from the drop-down box. If you see a small yellow triangle, it means there was an issue logging in. To retry, click Re-enter your credentials. Once logged in, you see your IoT Hubs, as shown in Figure 16-10. If you do not see them, click Refresh.

Figure 16-10. Connecting to your Azure account

Next, select your IoT Hub and then click the Add button. A dialog will appear, asking you to create a new device. Simply click New Device and enter a name for your device. I used HelloAzure. Click the OK button to create the device and then click OK again to continue the registration. If you already created a device, you can select it from the list.

You see a dialog showing the progress of the registration. When done, you notice a number of new resources and service references added to your project, as well as a new code file named AzureIoTHub.cs, as shown in Figure 16-11. It even added support for JSON! This is the beauty of the connected service—all of this used to be a very manually intensive process, but it is now automated for you! Neat.

Figure 16-11. New files added to solution

You also see a list of what was installed in the Output window, as shown next.

Adding Azure IoT Hub to the project.
Installing NuGet package 'Newtonsoft.Json' version 8.0.3.
Installing NuGet package 'Microsoft.Azure.Amqp' version 1.1.5.
Installing NuGet package 'Microsoft.Azure.Devices.Client' version 1.0.11.
Installing NuGet package 'PCLCrypto' version 2.0.147.
Installing NuGet package 'PInvoke.BCrypt' version 0.3.2.
Installing NuGet package 'PInvoke.Kernel32' version 0.3.2.
Installing NuGet package 'PInvoke.NCrypt' version 0.3.2.
Installing NuGet package 'PInvoke.Windows.Core' version 0.3.2.
Installing NuGet package 'Validation' version 2.2.8.
New service instance CABWeatherHub1 created
Successfully added Azure IoT Hub to the project.

Go ahead and explore that new code file. In it, you see code to connect to the IoT Hub and code to send and receive messages. We’ll explore this code in more detail in a moment. There is also a link to the Getting Started page in Solution Explorer. Click that and learn a bit more about getting started writing C# Azure applications.

Now, let’s build a user interface and then you’ll add a class to simulate collecting data.

User Interface

Let’s build a simple user interface to send messages to the cloud as well as display the last message received from the cloud. Click the MainPage.xaml file and add the code shown in Listing 16-1.

Listing 16-1. User Interface XAML Code

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Width="400" Height="400">
            <TextBlock x:Name="title" Height="60" TextWrapping="NoWrap"
                     Text="Hello, World Azure Style!" FontSize="28" Foreground="Blue"
                     Margin="10" HorizontalAlignment="Center"/>
            <TextBlock Text="Temperature:" />
            <TextBox Name="InTemperature" Text="25.00" />
            <TextBlock Text="Pressure:" />
            <TextBox Name="InPressure" Text="10.00" />
            <Button x:Name="send_button" Content="Send Data" Width="75" ClickMode="Press"
                     Click="send_button_Click" Height="50" FontSize="24"
                     Margin="10" HorizontalAlignment="Center"/>
            <TextBlock Text="Message from Azure:" />
            <TextBlock Name="OutAzure" Text="" />
        </StackPanel>
    </Grid>

You create a number of labels as well as two text boxes to allow you to choose values for temperature and barometric pressure, and a button to send the data to Azure cloud. Figure 16-12 shows an example of what the user interface looks like when the application is running.

Figure 16-12. Sample user interface

There is just one more part you need to add to the code. You need a class to simulate encapsulation of capturing data from the sensor. Let's add a new class named SensorData.cs. You can add the new class by right clicking the project in the Solution Explorer and choose Add ➤ Add New Item... menu and then choose the Class entry in the list. Use the name SensorData and click the Add button.

Now, open that file and add the code to create a new setup attributes for the data values. Since you are simulating data from a sensor that reads temperature and barometric pressure, you create the two data attributes, as shown next.

namespace HelloAzure
{
    class SensorData
    {
        public double Temperature { get; set; }
        public double Pressure { get; set; }
    }
}

You use this class to fill in the data from the simulated sensor (the user interface). Return to the user interface MainPage.xaml.cs and add the code shown in Listing 16-2 to add the data from the user interface to the SensorData.

Listing 16-2. Code for Reading Sensor Data from User Interface

using System.Diagnostics;            // Add for debugging

namespace HelloAzure
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void send_button_Click(object sender, RoutedEventArgs e)
        {
            // Read data from the simulated sensor
            SensorData data = new SensorData();
            data.Temperature = Convert.ToDouble(this.InTemperature.Text);
            data.Pressure = Convert.ToDouble(this.InPressure.Text);
            Debug.WriteLine(String.Format("Data sent: {0}, {1}",
                data.Temperature, data.Pressure));
        }
    }
}

OK, now you're ready to complete the Azure segments of the code.

Communicating with Azure

Fortunately, most of the work is done for you. All you need to do is add code to send the data to the cloud and code to read data from the code periodically. Let's work on the code to send the data first.

To send a message to Azure, you must format it as a JSON object, which is really easy to do. In the AzureIoTHub.cs file, you have a class named SendDeviceToCloudMessageAsync(). All you need to do is modify that method to accept the data you "read" and format it into a JSON document and send it to Azure; most of the code is already there!

First, you must add two using clauses, as shown next.

using HelloAzure;      // Add for the SensorData class
using Newtonsoft.Json; // Add for JSON utilities

Next, you can modify the sample code and add code to serialize the data you "read" from the sensor. The following shows the modified method. I highlight the changes in bold.

public static async Task SendDeviceToCloudMessageAsync(SensorData data)                  
{
    var deviceClient = DeviceClient.CreateFromConnectionString(deviceConnectionString,
         TransportType.Amqp);
    var jsonMsg = JsonConvert.SerializeObject(data);              
    var message = new Message(Encoding.ASCII.GetBytes(jsonMsg));              
    await deviceClient.SendEventAsync(message);
}

Now, let's return to the send button click event and complete the code to send the data to Azure. However, since the code is a task, you need to change the signature of the button click method, as shown in Listing 16-3.

Listing 16-3. Updated Send Button Click Method Code

private async void send_button_Click(object sender, RoutedEventArgs e)
{
    // Read data from the simulated sensor
    SensorData data = new SensorData();
    data.Temperature = Convert.ToDouble(this.InTemperature.Text);
    data.Pressure = Convert.ToDouble(this.InPressure.Text);

    // Send data to the cloud
    await AzureIoTHub.SendDeviceToCloudMessageAsync(data);

    Debug.WriteLine(String.Format("Data sent: {0}, {1}",
        data.Temperature, data.Pressure));
}

OK, you're nearly there! The next thing you need to do is add code to read messages from Azure cloud periodically. For this, you use a timer event. You've already added this code to several other projects so I omit the details and simply present the completed code for the module. Modify the MainPage.xaml.cs file as shown in Listing 16-4.

Listing 16-4. Completed User Interface Code

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using System.Diagnostics;            // Add for debugging

namespace HelloAzure
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            DispatcherTimer timer = new DispatcherTimer();
            timer.Tick += timerTick;
            timer.Interval = TimeSpan.FromSeconds(3);
            timer.Start();
        }

        private async void send_button_Click(object sender, RoutedEventArgs e)
        {
            // Read data from the simulated sensor
            SensorData data = new SensorData();
            data.Temperature = Convert.ToDouble(this.InTemperature.Text);
            data.Pressure = Convert.ToDouble(this.InPressure.Text);

            // Send data to the cloud
            await AzureIoTHub.SendDeviceToCloudMessageAsync(data);

            Debug.WriteLine(String.Format("Data sent: {0}, {1}",
                data.Temperature, data.Pressure));
        }

        private async void timerTick(object sender, object e)
        {
            this.OutAzure.Text = await AzureIoTHub.ReceiveCloudToDeviceMessageAsync();
        }
    }
}

OK, you’re now ready to test the application. Be sure that your code compiles without errors first.

Testing the Application

When ready, launch the Device Explorer and use the connection string you copied from the Azure IoT Hub Settings . Refer to Figure 16-6 if you forgot where this is. Paste the string into the IoT Hub Connection String text box on the Configuration tab and then click Update. This validates the connection string. Device Explorer fetches the correct keys for access, as shown at the bottom of the dialog. Figure 16-13 shows the completed process.

Figure 16-13. Connecting to Azure with Device Explorer

Next, you can click the Data tab to see messages from your device to the cloud. To do so, launch the application and click the Send button. Then, go back to the Device Explorer and click the Monitor button on the Data tab. Go ahead and click Send in your application a few times with different values. The values won't show up instantaneously, but they should show up within a few moments. You should see your events similar to Figure 16-14.

Figure 16-14. Monitoring messages in Device Explorer

OK, that was cool, eh? Now, let's send a message to the application from the cloud. You use the Message To Device tab in Device Explorer to send a message. Go ahead and click that tab now. In the Message text box, enter Hello, from Azure!, check the Add Time Stamp check box, and then click Send. You should see the output message in the Output area, as shown in Figure 16-15.

Figure 16-15. Sending a message to the cloud in Device Explorer

Now, go look at your application. Do you see the message? Figure 16-16 shows the result.

Figure 16-16. Message received!

So what just happened? Device Explorer formatted the message you wrote adding the timestamp and then sent it to the IoT Hub message queue. The application (in the timer tick event) connected to Azure and retrieved the message. How fantastic is that?

Now, let's go back to the Azure portal and look at the IoT Hub Settings page again. Figure 16-17 shows an excerpt from the page showing usage. Here you see that my IoT Hub sample logged 3 messages, which is exactly what I sent when I tested the application. You should see something similar in your IoT Hub usage data.

Figure 16-17. Checking Usage in the Azure portal

If you got all of this to work, take a victory lab around your house, apartment, or office. You've just created a sample project that stores data in the cloud.

In the next section, you see how to take this sample project and add real sensor data and view it in the cloud. Hold on, it's going to get a bit bumpy first. The technology and code is rather straightforward but a bit tedious to set up. However, I walk you through every step.

Glovebox.IoT.Devices

The Glovebox.IoT.Devices is a library that makes it easy to use I2C sensors like the BMP280. All you need to do is instantiate the class and call the methods to read the data. To add the Glovebox.IoT.Devices library, use the NuGet Package Manager from the Tools ➤ NuGet Package Manager ➤ Manage NuGet Packages for Solution... menu. Click the Browse tab and then type glovebox in the search box. Select the entry named Glovebox.IoT.Devices in the list. Tick the project name (solution) on the right and then click Install.

Units.NET

You also need to install the Units.NET library because the Glovebox.IoT.Devices library requires it. To add the Units.NET library, use the NuGet Package Manager from the Tools ➤ NuGet Package Manager ➤ Manage NuGet Packages for Solution... menu. Click the Browse tab and then type units in the search box. Select the entry named Units.NET in the list. Tick the project name (solution) and then click Install.

Windows 10 IoT Extensions

You must add the reference to the Windows 10 IoT Extensions from the project property page. You do this by right-clicking the References item in Solution Explorer.

Azure IoT Hub Connected Service

You will use the connected service like you did in the sample project. This creates a new source file named AzureIoTHub.cs, which encapsulates what you need to communicate with the cloud. Go ahead and run it now.

Right-click the References item in Solution Explorer and choose Add Connected Service. Scroll down in the dialog and select the Azure IoT Hub entry for the IoT Solution you created and click the Configure button. Remember to choose the hard-coded security option and then click OK button to continue. On the configuration page, you are asked to log in to your Azure account.

Next, select your IoT Hub and then click the Add button. You should see both the IoT Hub you created earlier as well as the IoT Hub for the remote monitoring solution. Figure 16-31 shows an example of what you will see when you are asked to select your IoT Hub.

Figure 16-31. Selecting the IoT Hub

Next, a dialog appears, asking you to select your device, as shown in Figure 16-32. Choose the device that you created when you set up your remote monitoring solution. Click the OK button to select the device and click OK again to continue the registration.

Figure 16-32. Selecting your device

Now you’re ready to add the code to connect everything together. Let’s begin by modifying the code you added using the IoT Hub connected service.