Giter Club home page Giter Club logo

brminnick / xamariniotworkshop Goto Github PK

View Code? Open in Web Editor NEW
13.0 4.0 6.0 891 KB

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

Home Page: https://azure.microsoft.com/services/iot-central/?WT.mc_id=XamarinIoTWorkshop-github-bramin

License: MIT License

C# 90.28% Shell 9.72%
xamarin xamarin-forms xamarin-ios xamarin-android iot azure-iot azure-iot-central azure-iot-hub

xamariniotworkshop's Introduction

Xamarin IoT Workshop

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

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
Xamarin iOS App 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

Clone

  1. After downloading/cloning the repo, locate XamarinIoTWorkshop.sln
  2. Launch XamarinIoTWorkshop.sln in Visual Studio on PC or Visual Studio for Mac
  3. 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

IoT Central, New Application

  1. 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
  2. On the Create Application page, select Create

IoT Central, Create Application

  1. On the Homepage screen, select Create Device Templates

IoT Central, Create Device Templates

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

IoT Central, New device template

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

IoT Central, Delete Simulated Device

  1. On the confirmation popup, select Delete

IoT Central, Confirm Delete

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

IoT Central, New Real Device

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

IoT Central, New Measurement

IoT Central, Telemetry

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

IoT Central, AccelerometerX

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

IoT Central, AccelerometerY

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

IoT Central, AccelerometerZ

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

IoT Central, GyroscopeX

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

IoT Central, GyroscopeY

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

IoT Central, GyroscopeZ

3. Get Device Connection String

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

Iot Central, Connect This Device

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

IoT Central, Copy Primary Connection String

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

Primary Connection String

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

App Center Installation Page

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

Xamarin IoT Workshop, iOS

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

iOS Installation Page

  1. On the confirmation popup, select Install

iOS Installation Confirmation

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

iOS Home Screen Installation

8. Connect App to IoT Central

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

XamarinIoTWorkshop App, Accelerometer Page

XamarinIoTWorkshop App, Accelerometer Page

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

XamarinIoTWorkshop App, Accelerometer Page

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

IoT Central Dashboard

Resources

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.