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:



che mostrerà il riepilogo dell’ultima invocazione:



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:



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:



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.

Technorati Tags: Microsoft Band,MIcrosoft Band SDK,Web Tile Preview,Web Tile