Passa ai contenuti principali

Microsoft Band SDK – Web Tile : REST

In questo post, ultimo di questa mini serie dedicata alle Web Tile, vedremo come sia possibile realizzare una tile che visualizza dei dati presi da un servizio REST.
Il servizio che utilizzeremo è un semplicissimo servizio REST, hostato su Azure, che permette di eseguire il ping verso un indirizzo web.
Il servizio risponde all’url

http://webtileapi.azurewebsites.net/api/Ping?urlToPing=<url da verificare>

e lo fa con un JSON del tipo

{
  "UrlPinged": "<url da verificare>",
  "Result": 0,
  "ResultString": "Ok",
  "PingDurationInMilliseconds": 100,
  "PingDateTime": "2015-07-27T18:02:57.1500904Z"
}

in cui troviamo il risultato del ping (OK o ERROR), il tempo di attesa e il timestamp di esecuzione dell’operazione.
Quello che vogliamo fare è creare una Web Tile in grado di mostrare le statistiche per due siti e i dettagli per ogni sito, quindi un totale di 3 pagine.
In questo caso, tralasciando la parte del file manifest.json relativa ai metadati, i punti cruciali del file stesso sono la definizione delle risorse (con le relative variabili da utilizzare) e la definizione delle pagine.
Partiamo con la definizione delle risorse:

"resources": [
    {
      "url": "http://webtileapi.azurewebsites.net/api/Ping?urlToPing=http://www.dotnetpodcast.com",
      "style": "Simple",
      "content": {
        "DNPpingdatetime": "PingDateTime",
        "DNPresultstring": "ResultString"
      }
    },
    {
      "url": "http://webtileapi.azurewebsites.net/api/Ping?urlToPing=http://www.domusdotnet.org",
      "style": "Simple",
      "content": {
        "DDNpingdatetime": "PingDateTime",
        "DDNresultstring": "ResultString"
      }
    }
  ]

Il tipo di entrambe le risorse è “Simple”, il che comunica all’infrastruttura delle Web Tile (gestita dall’app mobile Microsoft Health), che si avrà a che fare con una risposta composta da una struttura JSON e non da una collezione di item, come avviene nel caso del tipo “Feed”.
Nella parte di content definiamo i dati che ci interessa mostrare e, in particolare, XXXpingdatetime e XXXresultstring che conterranno i valori delle proprietà PingDateTime e ResultString della struttura JSON restituita del servizio.
Le due chiamate ai servizi verranno eseguite nell’ordine impostato.
Nella definizione delle pagine troviamo:

"pages": [
    {
      "layout": "MSBand_MetricsWithIcons",
      "condition": "true",
      "iconBindings": [
        {
          "elementId": "11",
          "conditions": [
            {
              "condition": "true",
              "icon": "dotnetpodcasticon"
            }
          ]
        },
        {
          "elementId": "21",
          "conditions": [
            {
              "condition": "true",
              "icon": "domusdotneticon"
            }
          ]
        }
      ],
      "textBindings": [
        {
          "elementId": "12",
          "value": "dotNETpodcast {{DNPresultstring}}"
        },
        {
          "elementId": "22",
          "value": "DomusDotNet {{DDNresultstring}}"
        }
      ]
    },
    {
      "layout": "MSBand_NoScrollingText",
      "condition": "true",
      "textBindings": [
        {
          "elementId": "1",
          "value": "dotNET{podcast}"
        },
        {
          "elementId": "2",
          "value": "{{DNPresultstring}}"
        },
        {
          "elementId": "3",
          "value": "{{DNPpingdatetime}}"
        }
      ]
    },
    {
      "layout": "MSBand_NoScrollingText",
      "condition": "true",
      "textBindings": [
        {
          "elementId": "1",
          "value": "DomusDotNet"
        },
        {
          "elementId": "2",
          "value": "{{DDNresultstring}}"
        },
        {
          "elementId": "3",
          "value": "{{DDNpingdatetime}}"
        }
      ]
    }
  ]

Abbiamo, quindi, tre pagine.
Il layout della prima di queste è di tipo MSBand_MetricsWithIcons:

SNAGHTMLab8921b

che mostrerà il riepilogo dell’ultima invocazione:

image

Nel JSON che definisce il binding degli elementi visuali della pagina possiamo osservare la sezione iconBindings all’interno della quale assegniamo delle icone agli elementi visuali in grado di contenerle.
Le icone in questione sono contenute nella cartella icons del package e definite nella sezione JSON icons:

"icons": {
  "dotnetpodcasticon": "icons/dotnetpodcast.png",
  "domusdotneticon": "icons/domusdotnet.png"
},

Nella parte del binding degli elementi visuali che contengono il testo, invece, assegniamo delle scritte a cui concateniamo uno dei valori prelevati dal servizio.
Le altre due pagine sono uguali tra loro e usano il layout MSBand_NoScrollingText:

SNAGHTMLab98ecb

Le tre righe sono messe in binding, rispettivamente, con una stringa costante (il nome del sito) e con i due valori ottenuti dal servizio, ottenendo, ad esempio:

image

In questo modo, ogni volta che Microsoft Health aggiornerà la Web Tile (l’intervallo in minuti è contenuto nella proprietà refreshIntervalMinutes, come visto nei precedenti post), verrà invocato due volte il servizio ed effettuato il binding dei dati sulle pagine.
Le pagine così create non hanno, al momento, interazione con l’utente.
Il file manifest completo è il seguente:

{
  "manifestVersion": 1,
  "name": "PingBand",
  "description": "Tieni sotto controllo i tuoi siti con PingBand",
  "version": 1,
  "versionString": "1.0",
  "author": "Massimo Bonanni",
  "contactEmail": "massimo.bonanni@tiscali.it",
  "tileIcon": {
    "46": "icons/largeicon.png"
  },
  "badgeIcon": {
    "24": "icons/smallIcon.png"
  },
  "icons": {
    "dotnetpodcasticon": "icons/dotnetpodcast.png",
    "domusdotneticon": "icons/domusdotnet.png"
  },
  "refreshIntervalMinutes": 15,
  "resources": [
    {
      "url": "http://webtileapi.azurewebsites.net/api/Ping?urlToPing=http://www.dotnetpodcast.com",
      "style": "Simple",
      "content": {
        "DNPpingdatetime": "PingDateTime",
        "DNPresultstring": "ResultString"
      }
    },
    {
      "url": "http://webtileapi.azurewebsites.net/api/Ping?urlToPing=http://www.domusdotnet.org",
      "style": "Simple",
      "content": {
        "DDNpingdatetime": "PingDateTime",
        "DDNresultstring": "ResultString"
      }
    }
  ],
  "pages": [
    {
      "layout": "MSBand_MetricsWithIcons",
      "condition": "true",
      "iconBindings": [
        {
          "elementId": "11",
          "conditions": [
            {
              "condition": "true",
              "icon": "dotnetpodcasticon"
            }
          ]
        },
        {
          "elementId": "21",
          "conditions": [
            {
              "condition": "true",
              "icon": "domusdotneticon"
            }
          ]
        }
      ],
      "textBindings": [
        {
          "elementId": "12",
          "value": "dotNETpodcast {{DNPresultstring}}"
        },
        {
          "elementId": "22",
          "value": "DomusDotNet {{DDNresultstring}}"
        }
      ]
    },
    {
      "layout": "MSBand_NoScrollingText",
      "condition": "true",
      "textBindings": [
        {
          "elementId": "1",
          "value": "dotNET{podcast}"
        },
        {
          "elementId": "2",
          "value": "{{DNPresultstring}}"
        },
        {
          "elementId": "3",
          "value": "{{DNPpingdatetime}}"
        }
      ]
    },
    {
      "layout": "MSBand_NoScrollingText",
      "condition": "true",
      "textBindings": [
        {
          "elementId": "1",
          "value": "DomusDotNet"
        },
        {
          "elementId": "2",
          "value": "{{DDNresultstring}}"
        },
        {
          "elementId": "3",
          "value": "{{DDNpingdatetime}}"
        }
      ]
    }
  ]
}

Con questo è tutto per quanto riguarda la mini serie dedicata alla preview delle Web Tile.

Etichette:

Commenti

Posta un commento

Post popolari in questo blog

VB for Dummies: La serializzazione – parte 2

Questo post è la continuazione del precedente post sulla serializzazione. In particolare vedremo la serializzazione SOAP e quella JSON.   Serializzazione SOAP La serializzazione SOAP è demandata alla classe SOAPFormatter contenuta nel namespace System.Runtime.Serialization.Formatters.Soap contenuto nella libreria omonima. Il formatter SOAP risale alle primissime versioni del framework e, purtroppo, da un certo punto in poi, pur non essendo stato dichiarato obsoleto, non è stato portato avanti nello sviluppo e non supporta alcuni tipi di dati usatissimi nel mondo .NET quali i generici e i nullable. Per questo motivo, non possiamo serializzare in formato SOAP (utilizzando il SOAPFormatter) la nostra Fattura (vedi post precedente) poichè questa ha una proprietà di tipo List(Of DettagliFattura) (generico).   Serializzazione JSON Il formato di serializzazione JSON (maggiori info qui ) è un formato testuale molto in voga nelle applicazioni AJAX. Si trata di un mod...
Posta un commento
Continua a leggere

Recensione: Windows Runtime via C#

Può sembrare strano che un VB-ista legga un libro su C#, ma come diceva Sun Tzu: “ Se conosci il tuo nemico, conosci te stesso ”. A parte gli scherzi, il libro vale la pena di essere letto a prescindere dal linguaggio .NET con cui si lavora. Oltre  290 pagine dedicate agli aspetti fondamentali dello sviluppo con Windows Runtime per le Windows Store App. I prerequisiti per poter leggere il libro sono la conoscenza di C# e di Visual Studio e gli autori non danno per scontato quasi nulla partendo dai concetti di base quali il type system e i suoi principi (argomento che di solito è saltato a piedi pari da chi si avvicina al mondo WinRT dal framework completo e che, se non compreso, può dare problemi nello sviluppo quotidiano). Tra i concetti che possiamo definire “core”, troviamo anche i capitoli dedicati all’app packaging e al process model, entrambi ben strutturati e chiari. Già solo questi tre capitoli iniziali giustificherebbero, in un certo qual modo, l’acquisto del libro, ...
Posta un commento
Continua a leggere

Alla scoperta del Kinect : questione di profondità

Nei due precedenti post ( link e link ) abbiamo fatto conoscenza con “l’aggeggio” kinect e visto come sia possibile, in maniera molto semplice, gestire lo stream video proveniente dalla camera. In questo post diamo un’occhiata alla capacità che ha il Kinect di fornire frame in cui l’immagine non è la rappresentazione fedele della realtà che ci circonda ma la rappresentazione bidimensionale della distanza degli oggetti dai sensori di profondità. L’aggeggio, infatti, dispone di un sensore di profondità che è in grado di fornirci la distanza dei punti inquadrati da se stesso e, in più, è in grado di dirci a quale “player” fa riferimento ogni singolo pixel. Ma andiamo con ordine. Per abilitare la ricezione del depth stream è necessario: Istanziare la classe Runtime; Agganciare il gestore dell’evento DepthFrameReady; Inizializzare l’istanza della Runtime scegliendo una delle opzioni che abilitano il sensore di profondità; Aprire lo stream dei dati relativi alla pro...
5 commenti
Continua a leggere