https://github.com/thecodetraveler/xamariniotworkshop
A workshop that demonstrates how to collect IoT data from a mobile device using a Xamarin app, aggregating the data to the cloud using Azure IoT Hub
https://github.com/thecodetraveler/xamariniotworkshop
azure-iot azure-iot-central azure-iot-hub iot xamarin xamarin-android xamarin-forms xamarin-ios
Last synced: about 1 month ago
JSON representation
A workshop that demonstrates how to collect IoT data from a mobile device using a Xamarin app, aggregating the data to the cloud using Azure IoT Hub
- Host: GitHub
- URL: https://github.com/thecodetraveler/xamariniotworkshop
- Owner: TheCodeTraveler
- License: mit
- Created: 2018-06-06T21:56:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-22T16:19:58.000Z (almost 3 years ago)
- Last Synced: 2025-04-30T15:43:30.264Z (about 1 month ago)
- Topics: azure-iot, azure-iot-central, azure-iot-hub, iot, xamarin, xamarin-android, xamarin-forms, xamarin-ios
- Language: C#
- Homepage: https://azure.microsoft.com/services/iot-central/?WT.mc_id=XamarinIoTWorkshop-github-bramin
- Size: 870 KB
- Stars: 13
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Xamarin IoT Workshop
|CI Tool |Build Status|
|---------------------------|---|
| App Center, iOS | [](https://appcenter.ms) |
| App Center, Android | [](https://appcenter.ms) |
# About
This workshop will connect your mobile device to an [Azure IoT Hub](https://azure.microsoft.com/services/iot-hub?WT.mc_id=mobile-0000-bramin) backend using a mobile app created in [Xamarin](https://visualstudio.microsoft.com/xamarin?WT.mc_id=mobile-0000-bramin) and [Azure IoT Central](https://azure.microsoft.com/services/iot-central?WT.mc_id=mobile-0000-bramin).
The app uses [Xamarin Essentials](https://docs.microsoft.com/xamarin/essentials?WT.mc_id=mobile-0000-bramin) to gather sensor data from the device's Accelerometer & Gyroscope, displays the data in the app using [Syncfusion's Circular Gauge control](https://www.syncfusion.com/products/xamarin/circular-gauge), 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](./AppCenterInstallation.md).
1. Clone/Download this git repo
2. After downloading/cloning the repo, locate `XamarinIoTWorkshop.sln`
3. Launch `XamarinIoTWorkshop.sln` in [Visual Studio on PC](https://visualstudio.microsoft.com/vs/?WT.mc_id=mobile-0000-bramin) or [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/?WT.mc_id=mobile-0000-bramin)
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](https://apps.azureiotcentral.com/myapps?WT.mc_id=XamarinIoTWorkshop-github-bramin)
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](https://apps.azureiotcentral.comhttps://apps.azureiotcentral.com?WT.mc_id=XamarinIoTWorkshop-github-bramin)
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](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](https://appcenter.ms?WT.mc_id=XamarinIoTWorkshop-github-bramin)
- [Azure IoT Central](https://azure.microsoft.com/services/iot-central?WT.mc_id=mobile-0000-bramin)
- [Azure IoT Hub](https://azure.microsoft.com/services/iot-hub?WT.mc_id=mobile-0000-bramin)
- [Syncfusion's Circular Gauge control](https://www.syncfusion.com/products/xamarin/circular-gauge)
- [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac?WT.mc_id=mobile-0000-bramin)
- [Visual Studio on PC](https://visualstudio.microsoft.com/vs?WT.mc_id=mobile-0000-bramin)
- [Xamarin](https://visualstudio.microsoft.com/xamarin?WT.mc_id=mobile-0000-bramin)
- [Xamarin Essentials](https://docs.microsoft.com/xamarin/essentials?WT.mc_id=mobile-0000-bramin)