Xamarin IoT Workshop

CI Tool	Build Status
App Center, iOS
App Center, Android

About

This workshop will connect your mobile device to an Azure IoT Hub backend using a mobile app created in Xamarin and Azure IoT Central.

The app uses Xamarin Essentials to gather sensor data from the device's Accelerometer & Gyroscope, displays the data in the app using Syncfusion's Circular Gauge control, and then sends the sensor data to the IoT Central Portal where we can view the data.

Mobile App	Sending Data to IoT Central Dashboard

Walkthrough

1. Install Xamarin App

Note: If this is workshop is being done in-person, led by Brandon Minnick, follow the App Center Installation steps.

Clone/Download this git repo

After downloading/cloning the repo, locate XamarinIoTWorkshop.sln
Launch XamarinIoTWorkshop.sln in Visual Studio on PC or Visual Studio for Mac
Build & Deploy XamarinIoTWorkshop.iOS or XamarinIoTWorkshop.Android to your local iOS or Android device

2. Create IoT Central Device

On your computer, open a browser and navigate to Azure IoT Central
If requested, sign in with your Microsoft account
- You can use any Microsoft-connected account, e.g. Azure account, Live account, Hotmail account, etc.
- If you do not have a Microsoft-connected account, now is a great time to create one!
On the Azure IoT Central Portal, select New Application

On the Create Application page, make the following selections:
- Choose payment plan: Free
- Select an application template: Custom Application
- Application Name: Xamarin IoT Workshop [Last Name] -Note: Replace "[Last Name]" with your last name to create a unique Application Name
- Url: xamarin-iot-workshop-[Last Name] -Note: Replace "[Last Name]" with your last name to create a unique Url
On the Create Application page, select Create

On the Homepage screen, select Create Device Templates

On the New device template page, enter "Mobile Device"
On the New device template page, select Create

On the Mobile Device 1 page, select "Delete"
- Mobile Device 1 is a simulated device created by Azure IoT Central
- We are deleting the simulated device and connecting a real device

On the confirmation popup, select Delete

On the Explorer page, select New -> Real

5. Add Measurements to IoT Central Device

On your computer, open a browser and navigate to Azure IoT Central
If requested, sign in with your Microsoft account
On the Mobile Device page, select New Measurement -> Telemetry

In the Create Telemetry pane, enter the following information:
- Display Name: AccelerometerX
- Field Name: AccelerometerX
- Units: [Leave Blank]
- Minimum Value: -1
- Maximium Value: 1
- Decimal Places: 5
In the Create Telemetry pane, select Save

On the Mobile Device page, select New Measurement -> Telemetry
In the Create Telemetry pane, enter the following information:
- Display Name: AccelerometerY
- Field Name: AccelerometerY
- Units: [Leave Blank]
- Minimum Value: -1
- Maximium Value: 1
- Decimal Places: 5
In the Create Telemetry pane, select Save

On the Mobile Device page, select New Measurement -> Telemetry
In the Create Telemetry pane, enter the following information:
- Display Name: AccelerometerZ
- Field Name: AccelerometerZ
- Units: [Leave Blank]
- Minimum Value: -10
- Maximium Value: 10
- Decimal Places: 5
In the Create Telemetry pane, select Save

On the Mobile Device page, select New Measurement -> Telemetry
In the Create Telemetry pane, enter the following information:
- Display Name: GyroscopeX
- Field Name: GyroscopeX
- Units: [Leave Blank]
- Minimum Value: -1
- Maximium Value: 1
- Decimal Places: 5
In the Create Telemetry pane, select Save

On the Mobile Device page, select New Measurement -> Telemetry
In the Create Telemetry pane, enter the following information:
- Display Name: GyroscopeY
- Field Name: GyroscopeY
- Units: [Leave Blank]
- Minimum Value: -1
- Maximium Value: 1
- Decimal Places: 5
In the Create Telemetry pane, select Save

On the Mobile Device page, select New Measurement -> Telemetry
In the Create Telemetry pane, enter the following information:
- Display Name: GyroscopeZ
- Field Name: GyroscopeZ
- Units: [Leave Blank]
- Minimum Value: -5
- Maximium Value: 5
- Decimal Places: 5
In the Create Telemetry pane, select Save

3. Get Device Connection String

In IoT Central on the Mobile Device page, select Connect this device

In the Connect this device popup, select the Copy button adjacent to Primary connection string

On your computer, open a text editor, e.g. Notepad, TextEdit, Visual Studio Code, etc.
In the text editor, paste the Primary connection string value

7. Install iOS App (iOS only)

We will now install the iOS app from App Center. If you have an Android Device and have already installed the Android app, skip to Step 8.

On your iOS device, open Safari
In Safari on your iOS device, navigate to the App Center installation page:https://install.appcenter.ms
On the installation page, if prompted, sign in

On the installation page in Safari, tap on Xamarin IoT Workshop, iOS

On the Xamarin IoT Workshop, iOS page, select Install

On the confirmation popup, select Install

On the iOS device, navigate to the iOS Home Screen
On the iOS Home Screen, confirm that the app is installing

8. Connect App to IoT Central

On your mobile device, launch the XamarinIoTWorkshop app
In the XamarinIoTWorkshop app, tap the Settings tab

On Settings page, enter the Primary Connection String into the text box
- To avoid typos, I recommend emailing yourself the connection string, then copy/pasting the connection string into this text box
On the Settings page, toggle the Send Data to Azure switch to On

Keep the app running in the foreground on your mobile device
- The app will only collect data and send it to IoT Central while it is running in the foreground

3. View Data On IoT Central Dashboard

As you rotate your phone, the guages in the app will update and the data will appear on the IoT Central Dashboard in near-realtime

brminnick/XamarinIoTWorkshop