September 2016

Volume 31 Number 9

[Modern Apps]

Build a City-Wide Wi-Fi Scanner with UWP and Azure

By Frank La

In my July column (msdn.com/magazine/mt736460), I covered how to write a Universal Windows Platform (UWP) app to scan Wi-Fi networks. At the end of the article, I provided the solution to create a CSV text string. I then briefly mentioned what could be done with Power BI in terms of data visualization. However, the manual process of copying and pasting text data from the UI prevents the solution from scaling beyond a single user. Furthermore, the design goal is to run the app on an IoT device without any type of display. This means that the UWP app must send data to the cloud without any UI. This is also known as a “headless” solution. The plan entails installing numerous devices around a city to scan for Wi-Fi Networks.

First, you must set up a cloud service to take in all this data. Second, you must modify the existing UWP app’s code to send data to that cloud service. Finally, you want to visualize this data in Power BI.

The Cloud and the Internet of Things

The cloud is a marvelous innovation. It offers effectively limitless storage and compute to even the lowest-powered devices. All that’s needed is a connection to the Internet. Often when the Internet of Things (IoT) is discussed, cloud services dominate the conversation, rather than the actual devices. Why is that? Well, simply put, many of the devices connected to the Internet need a central place from which to transmit data and receive notifications. Much of the world-changing, paradigm-shifting outcomes are the result of data being crunched and analyzed in the cloud. Additionally, placing the burden of compute and storage onto the cloud means that the actual endpoint devices can be less powerful. Less power translates into cheaper and more power-efficient devices.

As the term implies, the IoT is about the Internet and the things connected to the Internet. Accordingly, this will mean having code running on the device and services in the cloud. The ultimate goal of this project is to have multiple devices with Wi-Fi adapters scanning continuously for wireless networks. These devices will report their findings in real time. For the purposes of this article, we will assume that your device has access to the Internet.

The solution is to use a Microsoft Azure IoT Hub and Azure Stream Analytics. An Azure IoT Hub is a service that’s highly scalable and can ingest millions of events per second. The IoT Hub is similar to the Azure Event Hub, except that it has extra functionality for device management. Devices have to be registered in order to connect to the IoT Hub. Once registered, a device transmits a message to the IoT Hub, which then collects the data in real time. That data can be sent off to Azure Stream Analytics.

Azure Stream Analytics is a fully managed service that provides low-latency, high-availability, scalable, complex event processing over data streaming in from various sources. Stream Analytics will collect data streaming in from each one of the Wi-Fi scanner devices running the Wi-Fi Scanner UWP app.

In short, an Azure IoT Hub collects the data from registered devices and Azure Stream Analytics lets you easily query the data. To do this, you’ll need to set up the appropriate services in Azure and make modifications to the UWP app.

Setting Up the Cloud Services

The first order of business is to create an Azure IoT Hub. To do this, browse to the Azure Portal, click New and then click Internet of Things to expand the options in that category, as shown in Figure 1. Click IoT Hub to see the dialog, as shown in Figure 2.

Creating an IoT Hub in the Azure Portal
Figure 1 Creating an IoT Hub in the Azure Portal

The Create IoT Hub Dialog
Figure 2 The Create IoT Hub Dialog

In this form, you’ll enter a unique name for your IoT Hub. I chose CityWifiScannerHub. For now, I chose the free tier of service, because it’s adequate for development. I also chose to create a new resource group and name it CityWifiScannerRG. It’s best to pick a naming convention and stick with it. As for Region, it really doesn’t matter which region you choose. Just make sure you pick the same region for all your services to save on data egress charges. For my purposes, East US will do nicely. Check the Pin to dashboard option for easier access to this service. Now, click on Create and the service will be up and running in a few moments.

While you wait for the service to start, now would be a good time to download the Device Explorer from bit.ly/25lXGY9.

Device Explorer

The Device Explorer is a utility that helps you build solutions with IoT Hub by letting you register and remove devices to your IoT Hub, as well as monitor data being sent between the device and the hub. To use the tool with the hub, you’ll need to get the connection string from the IoT Hub. On the Azure Portal, browse to the IoT Hub and click the key icon. Because you want management privileges to add and remove devices, choose the iothubowner policy. In the following dialog, click the copy icon next to Connection string—primary key, as shown in Figure 3. This will copy the connection string to the clipboard.

Getting the Connection String for Device Explorer
Figure 3 Getting the Connection String for Device Explorer

With the connection string in the clipboard, go over to the Device Explorer and paste the connection string into the IoT Hub Connection String textbox. Click Update and you should see a message box stating that “Settings updated successfully.” Click OK to close the message box.

Now, click on the Management tab. To register a device with this IoT Hub, you’ll need to click Create. On the following dialog box, enter a Device ID, as you see in Figure 4. Click the Create button to register the device with this service. A message box will appear to confirm that the operation was successful. Click Close to dismiss it.

Registering a Device with Device Explorer
Figure 4 Registering a Device with Device Explorer

You’ll notice that there’s an entry now in the Devices list. Right-click on the WiFiScanner1 entry. In the context menu that appears, choose Copy connection string for selected device, as shown in Figure 5. You’ll use this connection string in the UWP app to connect it to the IoT Hub.

Getting the Connection String for the Device
Figure 5 Getting the Connection String for the Device

Modifying the UWP Code

This wouldn’t be a column about UWP development without some UWP code. Now it’s time to modify the app created in the previous column to connect it to the IoT Event Hub. Fortunately, Microsoft has created a library to make this simple and published it on NuGet. Load the app from the previous column into Visual Studio. Right-click on References, then click Manage NuGet Packages. In the search box, type Microsoft.Azure.Devices.Client and choose the first option. Install this package as you would any other NuGet Package.

Once the package is installed, add the following using statement to the MainPage.xaml.cs file:

using Microsoft.Azure.Devices.Client;

Then add the following member to the class, replacing “[Connection String]” with the connection string created in the previous section:

private DeviceClient deviceClient =
  DeviceClient.CreateFromConnectionString(
  [Connection String]);

The code needed to send the data up to the Azure IoT Hub is trivial thanks to the code inside the namespace Microsoft.Azure.Devices.Client. The following method does exactly that:

private async void SendScanData(string message)
{
  var content = new Message(
    Encoding.UTF8.GetBytes(message));
  await deviceClient.SendEventAsync(content);
}

With this code in place in the MainPage class, you can now add the following lines toward the end of the RunWifiScan method of the MainPage.xaml.cs file. The first line in the following code converts the WiFiPointData object to a JSON string for transport, while the second line calls the method that transmits the data up to the event hub: 

string NetworkInfoJson = CreateJson(wifiPoint);
SendScanData(NetworkInfoJson);

Now it’s time to run the app and send data up to the IoT Hub. But first, go to Device Explorer, click on the Data tab, and click the Monitor button. This will let you watch the data that gets sent to the Iot Hub.

Working with Stream Analytics

With all this work done, you have an IoT Hub in the cloud and a UWP app that sends data to it. Now what? The next step is to take the data and do something useful with it. For this task, you’re going to use Stream Analytics. In the Azure Portal, click on New, then search for Stream Analytics. Click Create and the New Stream Analytics Job dialog comes up. Name the job anything you like—I chose CityWifiScannerJob. I also chose to use the resource group created earlier. Once again, I chose East US to keep all my services for this in one datacenter. You should see something similar to Figure 6. Click Create to create the job.

Configuring a New Stream Analytics Job
Figure 6 Configuring a New Stream Analytics Job

Stream Analytics jobs work by taking data from an input source, processing it through a query, then sending it to an output. When you create a new job, you have zero inputs and outputs, along with a default query.

Create the Input

First, add an input by clicking on the Inputs tile and then on the Add button. In the New input dialog, give the input a name, as shown in Figure 7 (I chose CitiWifi­ScannerInput). Change Source to IoT Hub. And then choose CityWifiScannerHub from the dropdown. Because the UWP app sends data in UTF-8-encoded JSON, there’s no need to modify the default options. Click Create to create the input.

Creating the Input
Figure 7 Creating the Input

Now that the input has been created, it’s time to create the output. At press time, the new Azure Portal didn’t support creating a Power BI output. For this, you’ll need to load the classic portal from bit.ly/1V3IFPU. From there, go to the Stream Analytics section, choose the CityWifiScannerJob and click Output. In the list of options, choose Power BI. Name the output alias CitiWifiPowerBI, the Dataset Name CityWifiScans and the Tablet Name CityWifiTable. Click the next arrow. The following screen will ask you to authorize access to Power BI. You’ll need to log into an organizational account. If you don’t have one, follow the guidance in the blog post at bit.ly/29m89ZV to create an Office 365 trial account. 

With the input and output in place, now it’s time to edit the query. The full scope of what’s possible with queries in Stream Analytics is beyond the scope of this article. Therefore, I’ll create a very simple query that will send all the data from the input to the output without any transformations or clauses:

SELECT
INTO
  CityWifiPowerBI
FROM
  CitiWifiScannerInput

This syntax should look familiar to anyone who’s used T-SQL. Note that the input and output names entered previously are used in the query to tell the job where to get the data and where to send it. Now, it’s time to save the query and run the job. Click the Start button at the bottom of the page to start the job. It might take a few moments for the job to start. Once it does, open up Power BI in your browser. You should now see CitiWifiScans as a dataset in your workspace.

Open the dataset by clicking on it. Drag the Lat field from the Fields list onto the blank white space. A map control will appear. Now, drag the Long field onto the map control. You should see a map plotted with points of the latitude and longitude coordinates of your data. With my sample dataset, I have something that looks like Figure 8.

Creating a Map in Power BI with Data from the UWP App
Figure 8 Creating a Map in Power BI with Data from the UWP App

Wrapping Up

The real power and promise of the IoT revolution lies in the cloud. The cloud represents near limitless storage and processing power. That power and storage can be exploited by low-cost, power-efficient devices thanks to the Internet. From there, the data can be queued, processed and even visualized using tools like Power BI. Having the ability to easily modify a UWP app to send data to an Azure IoT Hub and deploy it to an IoT device makes for an unbeatable combination that will transform our world.


Frank La Vigne is a technology evangelist on the Microsoft Technology and Civic Engagement team, where he helps users leverage technology in order to create a better community. He blogs regularly at FranksWorld.com and has a YouTube channel called Frank’s World TV (youtube.com/FranksWorldTV).

Thanks to the following technical experts for reviewing this article: Olivier Bloch and Rob Tiffany


Discuss this article in the MSDN Magazine forum