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.

1. Clone/Download this git repo

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

2. Create IoT Central Device

1. On your computer, open a browser and navigate to Azure IoT Central
2. 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!
3. On the Azure IoT Central Portal, select New Application

4. 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

5. On the Create Application page, select Create

6. On the Homepage screen, select Create Device Templates

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

9. 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

10. On the confirmation popup, select Delete

11. On the Explorer page, select New -> Real

5. Add Measurements to IoT Central Device

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

4. 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
5. In the Create Telemetry pane, select Save

6. On the Mobile Device page, select New Measurement -> Telemetry
7. 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
8. In the Create Telemetry pane, select Save

9. On the Mobile Device page, select New Measurement -> Telemetry
10. 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
11. In the Create Telemetry pane, select Save

12. On the Mobile Device page, select New Measurement -> Telemetry
13. 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
14. In the Create Telemetry pane, select Save

15. On the Mobile Device page, select New Measurement -> Telemetry
16. 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
17. In the Create Telemetry pane, select Save

18. On the Mobile Device page, select New Measurement -> Telemetry
19. 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
20. In the Create Telemetry pane, select Save

3. Get Device Connection String

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

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

3. On your computer, open a text editor, e.g. Notepad, TextEdit, Visual Studio Code, etc.
4. 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.

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

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

5. On the Xamarin IoT Workshop, iOS page, select Install

6. On the confirmation popup, select Install

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

8. Connect App to IoT Central

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

3. 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
4. On the Settings page, toggle the Send Data to Azure switch to On

5. 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

Resources

• App Center
• Azure IoT Central
• Azure IoT Hub
• Syncfusion's Circular Gauge control
• Visual Studio for Mac
• Visual Studio on PC
• Xamarin
• Xamarin Essentials