Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MASSIMO BONANNI
Software architect e trainer @ eXagile (Roma)
Microsoft MVP dal 2011
Intel Software Innovator dal 2014
Fon...
Un “Web Tile Package” è un file compresso con estensione
.webtile la cui strutura interna è la seguente:
Non sono richieste particolari conoscenze di programmazione
per realizzare Web Tiles.
Consentono di veicolare informazioni...
Microsoft Health registra il file activation
protocol sull’estensione .webtile e l’URI
activation protocol con il protocol...
La tile comparirà tra le tile di terze parti
nell’app Health e sarà compito di Health
stessa provvedere ad aggiornare i da...
Il Microsoft Authoring Tool è uno strumento web-based per realizzare
rapidamente una Web Tile.
Si compone di 5 passi
1. Sc...
Authoring
Tool
Una Web Tile è composta da:
• Un file di manifest (manifest.json);
• Una serie di icone (.png) in una cartella (ad esempio...
Il manifest.json può essere diviso in 5 sezioni:
• metadati della tile (nome, versione, descrizione, autore e
icone della ...
Le proprietà obbligatorie del
manifest sono:
manifestVersion : è un numero
che indica la versione del
manifest. Per la pre...
Definisce i colori da utilizzare per la Tile.
Se non presente viene utilizzato il tema di default.
"tileTheme": {
"base": ...
Possono essere presenti più risorse.
Le risorse vengono elaborate nell’ordine in cui
sono inserite.
Ogni risorsa ha tre pr...
La sezione Pages contiene le informazioni relative alle
pagine che compongono la tile.
Troviamo un elemento per ogni pagin...
• iconBindings : permette di eseguire il
binding tra controlli della pagina che
possono contenere immagini e le
immagini d...
Si usa questa tipologia quando si vuole visualizzare N informazioni
da sorgenti dati JSON o XML.
• Lo style è Feed. Stiamo...
Feed Web
Tile
{
"UrlPinged": "http://www.dotnetpodcast.com",
"Result": 0,
"ResultString": "Ok",
"PingDurationInMilliseconds": 183,
"Ping...
Simple Web
Tile
Microsoft Band SDK – Web Tile
http://developer.microsoftband.com/WebTile
Microsoft Band Official Site
https://www.microsof...
Sviluppare per Microsoft Band - Web Tiles (Preview)
Sviluppare per Microsoft Band - Web Tiles (Preview)
Sviluppare per Microsoft Band - Web Tiles (Preview)
Sviluppare per Microsoft Band - Web Tiles (Preview)
Upcoming SlideShare
Loading in …5
×

Sviluppare per Microsoft Band - Web Tiles (Preview)

484 views

Published on

Slide del webcast "Microsoft Band SDK - Web Tiles (Preview)" (https://channel9.msdn.com/Blogs/Microsoft-Band-SDK-ITA/Microsoft-Band-SDK-Web-Tiles-Preview)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sviluppare per Microsoft Band - Web Tiles (Preview)

  1. 1. MASSIMO BONANNI Software architect e trainer @ eXagile (Roma) Microsoft MVP dal 2011 Intel Software Innovator dal 2014 Fondatore di: DomusDotNet (www.domusdotnet.org) dotNet{podcast} (www.dotnetpodcast.com)
  2. 2. Un “Web Tile Package” è un file compresso con estensione .webtile la cui strutura interna è la seguente:
  3. 3. Non sono richieste particolari conoscenze di programmazione per realizzare Web Tiles. Consentono di veicolare informazioni al Band prendendole direttamente da qualsiasi sorgente dati accessibile via web che restituisca dati in formato XML o JSON. L’installazione e la gestione delle web tile è a carico dell’app Microsoft Health installata nel nostro smartphone (Windows, Android, iOS).
  4. 4. Microsoft Health registra il file activation protocol sull’estensione .webtile e l’URI activation protocol con il protocollo mshealth-webtile:// . Nel momento in cui apriamo un link ad una Web Tile o un file che ci è stato inviato, Microsoft Health viene attivata e chiede l’autorizzazione ad installare la nuova tile nel Band (sempre che ci sia ancora spazio nella strip).
  5. 5. La tile comparirà tra le tile di terze parti nell’app Health e sarà compito di Health stessa provvedere ad aggiornare i dati delle pagine in essa contenute. In questa versione, non viene eseguito un controllo sull’esistenza della Web Tile all’interno della strip. Se installiamo due volte la stessa Web Tile, ci ritroviamo due tile uguali nella strip del Band
  6. 6. Il Microsoft Authoring Tool è uno strumento web-based per realizzare rapidamente una Web Tile. Si compone di 5 passi 1. Scelta del layout e del tipo di web tile (Simple o Feed); 2. Definizione della sorgente dati; 3. Definizione del binding dei dati sul layout selezionato; 4. Definizione dei metadati della tile; 5. Generazione della tile e possibilità di download della stessa.
  7. 7. Authoring Tool
  8. 8. Una Web Tile è composta da: • Un file di manifest (manifest.json); • Una serie di icone (.png) in una cartella (ad esempio Icons)
  9. 9. Il manifest.json può essere diviso in 5 sezioni: • metadati della tile (nome, versione, descrizione, autore e icone della tile); • definizione delle sorgenti dati; • definizione delle pagine e del binding dei dati; • eventuale definizione del tema grafico (non obbligatoria); • eventuali icone aggiuntive (non obbligatorie).
  10. 10. Le proprietà obbligatorie del manifest sono: manifestVersion : è un numero che indica la versione del manifest. Per la preview deve essere 1; name : E’ il nome che compare all’interno di Microsoft Health nel momento in cui installiamo la tile; tileIcon : contiene i dati dell’icona da utilizzare nella strip del Band in termini di posizione e grandezza in pixel; { "manifestVersion" : 1, "name" : "dotNET{podcast}", "description" : "Il feed di dotNET{podcast}, il primo podcast italiano su tecnologie Microsoft.", "version" : 1, "versionString" : "1.0", "author" : "Massimo Bonanni", "contactEmail" : "massimo.bonanni@dotnetpodcast.com", "organization" : "dotNET{podcast}", "tileIcon" : { "46" : "icons/largeicon.png" }, "badgeIcon" : { "24" : "icons/smallIcon.png" }, "refreshIntervalMinutes" : 15, . . . }
  11. 11. Definisce i colori da utilizzare per la Tile. Se non presente viene utilizzato il tema di default. "tileTheme": { "base": "ffaf00", "highlight": "ffaf00", "lowlight": "f99a03", "secondary": "9e9678", "highContrast": "ffa500", "muted": "bc8b00" },
  12. 12. Possono essere presenti più risorse. Le risorse vengono elaborate nell’ordine in cui sono inserite. Ogni risorsa ha tre proprietà: • url : indirizzo della risorsa da utilizzare per prelevare i dati; • style : specifica il tipo di risorsa web che si sta utilizzando. Al momento sono ammessi solo i valori “simple” e “feed”; • content : questa sezione definisce come estrarre i dati dalla risorsa. Ogni oggetto presente nella sezione definisce una sorta di variabile che potremo utilizzare nelle pagine per eseguire il binding dei dati. "resources": [ { "url": "http://www.dotnetpodcast.com/feed/RSS", "style": "Feed", "content": { "title": "title", "pubdate": "pubDate", "itunesduration": "itunes:duration" } } ]
  13. 13. La sezione Pages contiene le informazioni relative alle pagine che compongono la tile. Troviamo un elemento per ogni pagina che definisce il layout e il binding dei dati definiti nella sezione delle sorgenti dati. In questa sezione troviamo le seguenti proprietà: • layout : layout della pagina. Sono disponibili 6 possibili layout per le pagine; • condition : deve essere impostata a true; • textBindings : definisce il binding tra i controlli testuali della pagina e i valori contenuti nelle variabili definite nelle sorgenti dati "pages": [ { "layout": "MSBand_NoScrollingText", "condition": "true", "textBindings": [ { "elementId": "1", "value": "{{title}}" }, { "elementId": "2", "value": "{{pubdate}}" }, { "elementId": "3", "value": "durata: {{itunesduration}}" } ] } ]
  14. 14. • iconBindings : permette di eseguire il binding tra controlli della pagina che possono contenere immagini e le immagini definite nella sezione icons.  Ogni elemento all’interno di questa sezione contiene l’id dell’elemento grafico della pagina in cui posizionare l’immagine;  Gli oggetti conditions (in questa versione solo uno) contengono il binding effettivo alla risorsa immagine definita nelle icons "icons": { "dotnetpodcasticon": "icons/dotnetpodcast.png", "domusdotneticon": "icons/domusdotnet.png" }, . . "pages": [ { . . "iconBindings": [ { "elementId": "11", "conditions": [ { "condition": "true", "icon": "dotnetpodcasticon" } ] }, { "elementId": "21", "conditions": [ { "condition": "true", "icon": "domusdotneticon" } ] } ], . . ]
  15. 15. Si usa questa tipologia quando si vuole visualizzare N informazioni da sorgenti dati JSON o XML. • Lo style è Feed. Stiamo recuperando un feed (cioè un insieme di record) e avremo un numero di pagine (tutte uguali e fino ad un massimo di 8) che conterranno i dati della risorsa; • l’url del feed è nella proprietà url; • l’estrazione dei dati che ci interessano è definita nell’oggetto content in cui eseguiamo il mapping tra le «variabili» e i le proprietà del JSON o i nodi XML del feed; "resources": [ { "url": "http://www.dotnetpodcast.com/feed/RSS", "style": "Feed", "content": { "title": "title", "pubdate": "pubDate", "itunesduration": "itunes:duration" } } ] <?xml version="1.0" encoding="utf-8"?> <rss version="2.0"> <channel xmlns:atom="http://www.w3.org/2005/Atom" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"> . . <item xml:base="http://www.dotnetpodcast.com/show/card/53"> <title>Titolo puntata 53</title> <description>....</description> <pubDate>Mon, 27 Jul 2015 00:00:00 -0700</pubDate> . . <itunes:duration>01:07:50</itunes:duration> . . </item> <item xml:base="http://www.dotnetpodcast.com/show/card/52"> <title>Titolo puntata 52</title> <description>....</description> <pubDate>Mon, 27 Jul 2015 00:00:00 -0700</pubDate> . . <itunes:duration>01:07:50</itunes:duration> . . </item> . . </channel> </rss>
  16. 16. Feed Web Tile
  17. 17. { "UrlPinged": "http://www.dotnetpodcast.com", "Result": 0, "ResultString": "Ok", "PingDurationInMilliseconds": 183, "PingDateTime": "2015-08-02T16:29:26.8944123Z" } "resources": [ { "url": "http://webtileapi.azurewebsites.net/api/Ping?....", "style": "Simple", "content": { "DNPpingdatetime": "PingDateTime", "DNPresultstring": "ResultString" } }, . . ], Si usa questa tipologia quando si vuole visualizzare informazioni da sorgenti JSON o XML in single pagine. • Lo style è Simple. Ogni sorgente dati restituisce un record che potremmo visualizzare in una o più pagine; • l’url del feed è nella proprietà url; • l’estrazione dei dati che ci interessano è definita nell’oggetto content in cui eseguiamo il mapping tra le «variabili» e i le proprietà del JSON o i nodi XML del feed;
  18. 18. Simple Web Tile
  19. 19. Microsoft Band SDK – Web Tile http://developer.microsoftband.com/WebTile Microsoft Band Official Site https://www.microsoft.com/microsoft-band Web Tile Authoring Tool http://developer.microsoftband.com/WebTile/ChooseLayout

×