PowerPoint Presentation

Wearables development with Xamarin

Who are we?Jonah Hulselmans

@jonahhulselmansGert Cominotto

@GertCominottogert-cominotto.be

XamarinMicrosoft BandApple WatchAndroid WearWearable OverviewCode reuseLessons learned / Heads up / ConclusionQ&A

Overview

Xamarin Forms Xamarin

Microsoft Band

Fitness Band, not a watchCompatible with WP, Android & iOSTILES TILES TILES!!!Microsoft Health App (Important!)Microsoft Band

6

SensorsAccelerometerGyroscopeDistanceHeart RatePedometerSkin TemperatureUVBand Contact (worn / not worn)CaloriesGalvanic Skin Response (Band2)Ambient Light (Band2)Barometer (Band2)Altimeter (Band2)Microsoft Band

7

ToolsSDKNative SDKXamarin ComponentsWeb Tile SDKCloud API (Health Data API)Emulator?No code runs on the bandDeveloping for the Microsoft Band

Visual Studio / Xamarin StudioNo EmulatorSDKNative SDK for iOS, Android and Windows Xamarin Components for iOS and AndroidWeb Tile SDK: for quickly delivering information to the Band from any Web source in just a few easy steps (bit.ly/1h94CjZ)Cloud API (Microsoft) for accessing RESTful APIs with comprehensive fitness and health data in an easy-to-consume JSON format (bit.ly/1MIBOL7)

You have 2 ways to create an app for the Band:- You can create a WebTile, this is a tile that you can submit to the tile store which can be accessed through the Microsoft Health App. These Tiles are small applications that dont need a separate app on your phone because they run through the Microsoft Health App.- You can create an iOS, Android or Windows app and inside your app, you can create a tile on the Band. Your app is in charge of adding data / notifications to the band app, so all the logic from the band app is inside your phone app.

8

What can you do with it?Access sensorsTilesPersonalization

Pair it with your phone / pc via BluetoothConnecting to the device

Connection Demo

Accessing Sensors

Subscribe to Sensor DataSensor Data

DEMO

Sensors Demo

Create & Manage Custom TilesTile notificationsDialogsMessagesCustom layouts

Tiles

Dialogs: => Popups with content that can be dismissed.=> Content of the popup is not saved to the wearable

Messages: => These are notifications that are sent and stored in a specific tile, and a tile can keep up to 8 messages at a time. Messages can display a dialog, too. See this as a queue with a fixed size of 8. First in, first out when more than 8 messages are sent.

14

Tiles Demo

You can change your bands colors and theme

Personalization

16

NO Demo!

Background TasksOnly on Windows Phone (8.1 & 10)Custom Tile EventsRequires Microsoft Health AppWhat else can you do?

Background Task (Only Windows Phone 8.1 at the moment)Custom Tile Events (Requires Microsoft Health App)

18

Custom Tile Event Demo

19

Apple Watch

20

Apple Watch

38mm and 42mmApple PayFitness / HealthNotificationsApps

Apple Watch sensorsHeart rate sensorAccelerometerGyroscopeAmbient light sensor

Developing for the Apple WatchxCode / Xamarin Studio / Visual StudioSimulatorXamarin.iOSWatch OS 1 apps run on iPhone(Watch OS 2 apps run on the watch)

Watch OS 1: With the original Apple Watch, apps were installed on the iPhone. From there, the Watch extension would remain on the phone, and an interface would be moved over to the watch. Then, the extension on the phone would connect to networks, process information, and transmit it back and forth to the interface on the Watch. It worked but it was limited, and it was slow.Watch OS 2: The extension moves over to join the interface, and to run natively on the Watch. Speed improvements because basic processing no longer requires a round trip to the phone. It increases functionality because apps can now access the Watchs hardware.23

What can you do with it?NotificationsGlancesApp

NotificationsAre a major use-case for the Apple Watch. Both local and remote notifications are supported. Interaction with notifications occurs in two stages, called Short- and Long-Look.Short looks appear briefly, giving the user just enough time to see what the notification is about and which app sent it.Long looks provide more detail about an incoming notification. The long look appears when the users wrist remains raised or when the user taps the short look.GlancesGlances are non-interactive, single-page UIs that are intended to provide summary or crucial data. When a glance is tapped it will open the main Watch appApp24

Notifications

Short looksLong looks

Notifications demo

Deploy apps to the Apple WatchxCode and Xamarin Studio or Visual StudioApple Watch is paired to your iPhoneProvisioning profiles are setup correctlyDeploy the app to your iPhone

CommunicationCall a method against the parent appWKInterfaceController.OpenParentApplication (from watch extensions)HandleWatchKitExtensionRequest (parent app) Share a storage location with the parent iPhone appNSUserDefaultsWormHoleSharphttps://github.com/Clancey/WormHoleSharp

Android Wear

29

Stock Android!Works with Android & iOSRound or Square designFocus onTelling Time (Watch Faces)NotificationsGoogle NowApps

Android Wear

Android Wear experience will be the same no matter what smartwatch you decide to slap on your wrist and, great news, it means your chosen tech-timepiece will work with any Android handset.

You'll get notified for incoming texts, WhatsApp messages, tweets you're mentioned in, Facebook updates, emails and more. The whole shebang.

Google Now powers a great deal of what you'll see popping up on your Android Wear smartwatch, but just like Google Now on your smartphone, it's still a work in progress. At times the intuitive notifications are genius traffic concerns for your journey home, updated football scores for a team you search for a lot, the weather for the day ahead when you wake up but you'll also see some right old random nonsense cropping up too.Google Now updates, like notifications about incoming messages, are presented in card style, with updates from the same app or regarding the same subject nicely stacked.

Apps are installed through your phone (and the regular Google Play store). Apps that have Wear compatibility will either link up with your smartwatch and offer you control options (such as navigating your Spotify tracks or getting turn by turn directions from Google Maps)The apps, and default actions, are managed using the smartphone Android Wear app

30

Android Wear Sensors (Varies per device)

31

ToolsEmulator?SDKNative SDK AndroidXamarin.AndroidCode runs on the deviceCommunicate with phone via APIsDeveloping for Android Wear

Visual Studio / Xamarin StudioEmulator available32

What can you do with it?NotificationsCompanion AppsWatch Faces

NOTIFICATIONS:Lazy, but very effective! Uses Notification.WearableExtender Custom Backgrounds Actions specific for Wear Remote Input Voice InputPredefined actions Pages, Stacking, and More!

COMPANION APPSCompanion App Android app that runs on a wearable New Themes New UI Widgets -> Wearable UI Library BoxInsetLayout CircledImageView WearableListView More 33

Install Android Wear App on your deviceFollow the steps on the device to Pair it

Connecting to the device

Connection Demo

Connect via USB cableAdjust USB Options on Mobile Phone to PTPStart Android Wear Emulator in Visual Studioadb -d forward tcp:5601 tcp:5601

Real Device: adb forward tcp:4444 localabstract:/adb-hubadb connect localhost:444435

Create NotificationsAdd ActionsWearable Specific Notifications / Actions

Notifications

Notifications Demo

https://developer.android.com/training/wearables/notifications/creating.html

37

Main differences:Wearable apps are relatively small in size and functionality compared to phone apps.Users don't download apps directly onto the wearable.2 Modes -> Interactive and Ambient

Companion Apps

Wearable apps are relatively small in size and functionality compared to handheld apps. They contain only what makes sense on the wearable, which is usually a small subset of the corresponding handheld app. In general, you should carry out operations on the handheld when possible and send the results to the wearable.

Users don't download apps directly onto the wearable. Instead, you bundle the wearable app inside the handheld app. When users install the handheld app, the system automatically installs the wearable app. However, for development purposes, you can still install the wearable app directly to the wearable.

To conserve power on a wearable device, you can enable ambient mode for your Wear app. Devices transition from interactive to ambient mode when the user is idle on an activity or when the user covers the screen with their palm. Wearable apps that can transition into ambient mode are called always-on apps. The following describes the two modes of operation for always-on apps: Interactive Use full color with fluid animation in this mode. The app is also responsive to input. Ambient Render the screen with grayscale graphics and do not present any input cues in this mode. This display mode is only supported on devices running Android 5.1 or higher. 38

Companion App Demo

https://developer.android.com/training/wearables/apps/index.html

39

MessageApi Send messages to other nodes. (Small payloads)DataApi Send data to other nodes (Bigger payloads like assets)

Communication Demo

DataApi exposes an API for components to read or write data items and assets. A DataItem provides data storage with automatic syncing between the handheld and wearable. Asset is used for sending blobs of data such as images. You attach assets to DataItems and the system automatically takes care of the transfer for you.

MessageApi exposes an API for components to send messages to other nodes. Messages should generally contain small payloads. You should use Assests with DataApi to store larger data.

40

Communication Demo

41

Wearable OverviewMicrosoft BandApple WatchAndroid WearRuns on DeviceNoNoYesUser InputNoYes (Touch & Voice)Yes (Touch & Voice)SensorsYesYes (Depending on Device)Phone RequirementsBluetooth LE (Windows, iOS & Android)iOS 8.2Bluetooth LE (Android 4.3)PublishingNo separate storeWebTiles via Health AppNo separate storeDeployed with Phone appNo separate storeDeployed with Phone app

42

Not a great ideaToo different architecture and capabilitiesDifferent way of connecting to devicesVery custom experience per wearableBut I deem it possible

Code Reuse

The Xamarin Nuget packages didnt support UWP 10 at firstUWP App is coming in the next couple of weeksBy far the easiest to develop forExcellent for when using sensorsWith more background tasks capabilities, good future

Lessons learned / Heads up / ConclusionMicrosoft Band

Feels sluggish (Watch OS 1)Xamarin does not yet support watch OS 2 (only on alpha channel)Certificates + provisioning profilesDisable Enable device-specific builds in the watchKitExtensions project Lessons learned / Heads up / ConclusionApple Watch

Android wearable emulator = utter crap!If the Android emulator isnt starting:emulator -avd ExampleVDName -debug-all -noaudio -nocache -wipe-data -dns-server 8.8.8.8 Real device debugging isnt much better (long deploy times)Lessons learned / Heads up / ConclusionAndroid

Q & A

47

IS HIRING AN ANDROID DEV!