Slide della sessione "Sviluppare per Microsoft Band" tenuta il 30/05/2015 al DOTNETCAMPUS 2015

1. Template designed by
Massimo Bonanni
massimo.bonanni@tiscali.it
http://codetailor.blogspot.com
@massimobonanni
Sviluppare per Microsoft Band

2. MASSIMO BONANNI
Software architect e trainer @ eXagile (Roma)
Microsoft MVP dal 2011
Intel Software Innovator dal 2014
Fondatore di DomusDotNet (www.domusdotnet.org) e dotNet{podcast}
(www.dotnetpodcast.com)
Chi sono

3. Cos’è Microsoft Band
Microsoft Band SDK
Connettersi ad un Band
Accesso ai Sensori
Tile, Notifiche e Page
Personalizzazione
Conclusioni
Agenda

4. 10 Gyroscope
10
Wearable Device
10 sensori
Schermo Touch
Cos’è Microsoft Band

5. Health & Fitness
• Livello di attività e frequenza cardiaca
• Passi, calorie, distanza percorsa
• Esposizione ai raggi UV
• Durata del sonno, efficienza, frequenza di risvegli e frequenza cardiaca a riposo
• Allenamenti guidati.
Produttività:
• Interazione con centro notifiche
• Mail, SMS, Facebook, Twitter
• Chiamate in arrivo
• Integrazione con Cortana
Cos’è Microsoft Band

6. Consente alle applicazioni di estendere e potenziare l’esperienza utente sfruttando il Microsoft Band.
• 3 modi principali per interagire
• Flusso di dati provenienti dai sensori
• Creare Tile e Layout interattivi
• Personalizzare temi e colori
• Microsoft Band NON esegue codice applicativo
• Microsoft Band fornisce un modello di estensione, non una piattaforma applicativa
• È richiesto un Telefono/Tablet/PC
• Microsoft Band e’ un dispositivo di input e un display ausiliario
• Disponibile per Windows, iOS e Android
• Windows Phone 8.1 e successivi
• Windows 8.1 e successivi (Store Apps)
• iOS 7 e successivi
• Android 4.2 (API 17) e successivi
Microsoft Band SDK
http://developer.microsoftband.com/

7. Requisiti minimi:
• Visual Studio 2013 o successive
• In caso di Windows Phone, e’ necessario installare Windows Phone SDK add-on per Visual Studio (gia’ presente nei VS 2013 con update 2 o
successivi).
Si «aggancia» alla nostra app tramite NuGet.
Deve essere aggiunta la capability bluetooth.rfcomm nel manifest
Deve essere impostata la capability Proximity nel manifest
Microsoft Band SDK
<m2:DeviceCapability Name="bluetooth.rfcomm">
<m2:Device Id="any">
<!-- Used by the Microsoft Band SDK -->
<m2:Function Type="serviceId:A502CA9A-2BA5-413C-A4E0-13804E47B38F" />
<!-- Used by the Microsoft Band SDK -->
<m2:Function Type="serviceId:C742E1A2-6320-5ABC-9643-D206C677E580" />
</m2:Device>
</m2:DeviceCapability>

8. Il Band deve essere in pairing con il device.
La classe BandClientManager fornisce accesso ai Band:
• GetBandsAsync: fornisce l’elenco dei Band «visibili» (IBandInfo)
• ConnectAsync: esegue la connessione ad un Band specifico (IBandClient)
Connettersi ad un Band
BandInfo = (await BandClientManager.Instance.GetBandsAsync()).FirstOrDefault();
if (BandInfo != null)
BandClient = await BandClientManager.Instance.ConnectAsync(BandInfo);

9. IBandClient fornisce accesso a tutte le funzionalità esposte da un
singolo Band
Connettersi ad un Band - IBandClient
Notifiche
Personalizzazione
Sensori
Tile e pagine

10. Il device (ad es. Phone) deve
essere connesso al Band.
Si ottiene una eccezione se
viene persa la connessione.
Alcuni sensori richiedono il
consenso esplicito dell’utente
(ad es. Heart Rate).
L’uso prolungato dello
streaming ha effetto sul
consumo di batteria
Accesso ai sensori
Sensore Dettagli misurazione
Heart Rate BPM, qualita’ lettura
Accelerometer Accelerazione (in unita’ g) lungo gli assi X, Y e Z
Gyroscope Velocita’ angolare (in gradi al secondo) lungo gli assi X, Y e Z
Distance Distanza totale (cm), velocita’ (in cm/s), passo (in ms/m) e
stato
Pedometer Numero totale dei passi
Skin Temp Temperatura della pelle (in gradi Celsius)
UV Intensita’ dell’esposizione UV (numero di screto di valori)
Band Contact Band indossato o meno
Calories Numero totale di calorie

11. L’accesso ai sensori avviene attraverso
IBandSensorManager.
IBandSensorManager espone una proprietà
(di tipo IBandSensor<T>) per ogni sensore.
Per alcuni sensori è possibile variare
l’intervallo di reporting.
IBandSensor<T> prevede un approccio ad
eventi.
Il sensore di contatto prevede anche la
possibilità di eseguire polling.
Accesso ai sensori

12. Gli step necessari per poter ottenere i dati da un sensore sono:
1. Verificare il consenso dell’utente e, eventualmente, richiederlo
2. Sottoscrivere l’evento ReadingChanged
3. Avviare lo stream dei dati
Accesso ai sensori
if (BandClient.SensorManager.HeartRate.GetCurrentUserConsent() == UserConsent.Granted)
BandClient.SensorManager.HeartRate.ReadingChanged += HeartRate_ReadingChanged;
if (BandClient.SensorManager.HeartRate.GetCurrentUserConsent() != UserConsent.Granted)
await BandClient.SensorManager.HeartRate.RequestUserConsentAsync();
await BandClient.SensorManager.HeartRate.StartReadingsAsync()

13. L’evento ReadingChanged permette di gestire i dati caratteristici
del sensore
Accesso ai sensori
private async void HeartRate_ReadingChanged(object sender,
BandSensorReadingEventArgs<IBandHeartRateReading> e)
{
txtHeartRateValue.Text = e.SensorReading.HeartRate.ToString();
txtHeartRateQuality.Text = e.SensorReading.Quality.ToString();
txtHeartRateTimestamp.Text = e.SensorReading.Timestamp.ToString();
}

14. DEMO
Sensori

15. Ogni app può creare una o più Tile nella strip del Band.
La strip supporta fino a 13 tile.
Ogni Tile può avere:
• una icona di dimensioni 46px x 46px
• una icona piccola 24px x 24px (utilizzata quando vi sono notifiche)
• un titolo o un nome per la tile
• un GUID identificativo della tile
• Un tema per la tile (di default viene preso quello del Band)
Ogni Tile può avere, al suo interno fino a 8 pagine, ognuna delle quali può
contenere messaggi con layout predefinito o pagine con layout custom.
Le icone devono essere alpha-blended (non sono supportati i colori)
Tile

16. Le tile vengono gestite tramite la ITileManager esposta dalla
IBandClient
Tile
Aggiunge una nuova tile alla strip del
Band
Restituisce il numero degli slot disponibili
per le tile della strip del band
Restituisce l’elenco delle tile aggiunte
dall’applicazione
Rimuove una tile dalla strip del Band

17. Una tile è modellata dalla classe BandTile.
Tile
var TileGuid = new Guid("42356072-8168-47AC-A78A-1E0B280EC3FB");
var tile = new BandTile(TileGuid);
tile.Name = "Mia Tile";
tile.IsBadgingEnabled = true;
var icon = await BitmapFactory.New(1, 1)
.FromContent(new Uri("ms-appx:///Assets/LargeTile.png"));
tile.TileIcon = icon.ToBandIcon();
var smallIcon = await BitmapFactory.New(1, 1)
.FromContent(new Uri("ms-appx:///Assets/SmallTile.png"));
tile.SmallIcon = smallIcon.ToBandIcon();

18. 1. Verificare che la tile non sia già presente:
2. Verificare che vi sia ancora spazio negli slot della strip:
3. Aggiungere la tile:
Aggiungere una Tile
var tiles = await BandClient.TileManager.GetTilesAsync();
var appTile = tiles.FirstOrDefault(t => t.TileId == TileGuid);
var tileCapacity = await BandClient.TileManager.GetRemainingTileCapacityAsync();
if (tileCapacity > 0)
{
// Aggiungere la tile
}
if (await BandClient.TileManager.AddTileAsync(tile))
await ShowMessage("Tile creata con successo");
else
await ShowMessage("Errore nella creazione della Tile");

19. Le tile vengono gestite tramite la IBandNotificationManager esposta dalla IBandClient
Messagge: è una notifica, inviata ad una tile particolare, composta da un titolo e da un testo che rimane
memorizzata nel device (in una pagina della tile). Il message può generare un avvertimento o meno (haptics);
Dialog: è una notifica, inviata ad una tile particolare, composta da un titolo e da un testo ma non rimane
memorizzata tra i messaggi della tile e genera sempre un avvertimento per l’utente (è un vero e proprio dialog);
Haptics: è una notifica di tipo vibrazione inviata al Band.
Notifiche
Invia un messagio al Band
Visualizza un dialog sul band
Invia un Haptics al Band

20. 1. Ricavare l’id della Tile a cui inviare la notifica:
2. Inviare la notifica alla Tile:
Inviare una Notifica
var tiles = await BandClient.TileManager.GetTilesAsync();
var appTile = tiles.FirstOrDefault(t => t.TileId == TileGuid);
await BandClient.NotificationManager.ShowDialogAsync(appTile.TileId,
"Dialog Title",
"Dialog Message");
await BandClient.NotificationManager.SendMessageAsync(appTile.TileId,
"Message Title",
"Message",
DateTimeOffset.Now,
MessageFlags.None);

21. Le pagine custom vengono gestite tramite la ITileManager
esposta dalla IBandClient
Pagine custom
Rimuove una pagina custom da una Tile
Imposta una pagina custom in una Tile
Avvia la ricezione degli eventi generati
dalle tile e dalle pagine
Ferma la ricezione degli eventi generati
dalle tile e dalle pagine
Eventi generati dalle tile e dalle pagine

22. Ogni tile può ospitare fino a 8 pagine (standard o custom).
Quando l’utente “tappa” sulla tile, viene mostrata la prima pagina.
Ogni tile può avere 5 differenti layout.
Ciascuna delle pagine può utilizzare uno dei 5 layout.
Pagine custom

23. Il layout di una pagina è composto da:
• Elementi primitivi
TextBlock, WrappedTextBlock, Icon, Barcode, TextButton, FilledButton
• Container
FlowPanel, ScrollFlowPanel, FilledPanel
I container possono essere innestati tra loro (eccetto per il
FilledPanel che puo’ essere utilizzato solo come root).
Possono essere definite fino a 8 icone da utilizzare nel
controllo Icon oltre le icone utilizzate per la tile.
Ogni element della pagina e’ individuabile grazie ad un
ElementId
Pagine custom

24. Creare un page layout
ScrollFlowPanel panel = new ScrollFlowPanel
{
Rect = new PageRect(0, 0, 245, 102),
Orientation = FlowPanelOrientation.Horizontal
};
panel.Elements.Add(new TextButton()
{
ElementId = (short)LayoutElementId.YesButton,
Rect = new PageRect(0, 0, 100, 50),
PressedColor = new BandColor(0xFF, 0x00, 0x00),
Margins = new Margins(5, 0, 5, 0)
});
panel.Elements.Add(new TextButton()
{
ElementId = (short)LayoutElementId.NoButton,
Rect = new PageRect(0, 0, 100, 50),
PressedColor = new BandColor(0xFF, 0x00, 0x00),
Margins = new Margins(5, 0, 5, 0)
});
PageLayout layout = new PageLayout(panel);
ScrollFlowPanel
TextButton
YesButton
TextButton
NoButton

25. Per aggiungere una pagina ad una tile è sufficiente:
1. Aggiungere i layout alla collezione dei layout (fino a 5) utilizzabili per le pagine:
2. Creare il PageData (il pacchetto che come riempire la pagina):
3. Impostare la pagina:
Aggiungere una pagina alla Tile
var pageLayout = CreatePageLayout();
tile.PageLayouts.Add(pageLayout);
var pageData = new PageData(MainPageId,
(short)PageLayoutId.MainPageIndex,
new TextButtonData((short)LayoutElementId.YesButton, "Yes"),
new TextButtonData((short)LayoutElementId.NoButton, "No"));
if (await BandClient.TileManager.SetPagesAsync(tile.TileId, pageData))
await ShowMessage("Pagina aggiunta con successo!");
else
await ShowMessage("Pagina non aggiunta!");

26. Il PageData definisce come riempire i controlli presenti in un layout.
Values e’ una collezione di PageElementData
Ogni elemento primitivo ha un “Data”
Struttura del PageData

27. L’interfaccia IBandTileManager espone i tre eventi:
• TileOpened: viene sollevato quando l’utente “tappa” su una tile;
• TileClosed: viene sollevato quando l’utente preme il bottone back;
• TileButtonPressed: viene sollevato quando l’utente preme un bottone in una pagina della tile.
L’argomento degli eventi fornisce il Guid della Tile che ha generato l’evento, il Guid della pagina e il
Guid del bottone.
Registrati i gestori di evento, è sufficiente attivare l’invio degli eventi con il metodo
StartReadingAsync().
Gestire l’interazione utente
BandClient.TileManager.TileOpened += EventHandler_TileOpened;
BandClient.TileManager.TileClosed += EventHandler_TileClosed;
BandClient.TileManager.TileButtonPressed += EventHandler_TileButtonPressed;
await BandClient.TileManager.StartReadingsAsync();

28. DEMO
Tile

29. Personalizzare il tema
impostando
opportunamente i colori.
Cambiare l’immagine di
sfondo della “Me Tile”
Personalizzazione

30. La personalizzazione e’ gestita dall’interfaccia
IBandPersonalizationManager
Immagine MeTile:
Tema:
Personalizzazione
var meTileImage = await BandClient.PersonalizationManager.GetMeTileImageAsync();
await BandClient.PersonalizationManager.SetMeTileImageAsync(meTileImage);
var bandTheme = await BandClient.PersonalizationManager.GetThemeAsync();
await BandClient.PersonalizationManager.SetThemeAsync(bandTheme);

31. DEMO
Temi

32. Microsoft Band SDK
http://developer.microsoftband.com/
Microsoft Band Official Site
https://www.microsoft.com/microsoft-band
Build2015 - Microsoft Band: Developing for Microsoft Band and
Microsoft Health
http://channel9.msdn.com/Events/Build/2015/2-619
Riferimenti

34. Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
massimo.bonanni@tiscali.it
Grazie