skip to Main Content
info@giuseppegioe.it

METTI CORTANA NEL TUO SITO WEB

IMPAREREMO A CONVERTIRE UN PAGINA WEB IN UNA HOSTED WEB APP PER WINDOWS 10 E INTEGREREMO CORTANA PER AGGIUNGERE AL NOSTRO SITO LA CAPACITÀ DI INTERAGIRE CON GLIUTENTI ATIRAVERO LA VOCE E TUTIE LE GRANDI FUNZIONALITÀ OFFERTE DALL’ASSISTENTE VOCALE.

Abbiamo già parlato dell’integrazione di Cortana, l’assistente virtuale di Microsoft. in un’app per Windows 10. Per ‘assistente virtuale’ si intende un programma che interpreta li linguaggio naturale (Natural Language Processing) e, se opportunamente addestrato, può dialogare con l’interlocutore umano allo scopo di fornire informazioni o compiere determinate operazioni.

In questo articolo scopriremo passo passo come integrare Cortana in un sito web o web app. Le web app di fatto sono normali applicazioni web che, su mobile, permettono di simulare l’aspetto delle interfacce e l’esperienza utente delle app native. Il più grosso vantaggio delle web app è che per sua natura, una volta costruita, può essere utilizzata ovunque. basta avere un semplice browser e una connessione internet Questo si traduce in tempi e costi di sviluppo molto contenuti. Il più grosso svantaggio è che, essendo distribuite tramite il web, non possono integrarsi con l’hardware e il software del device mobile. Come possiamo allora integrare una funzionalità di Windows 10 sulla nostra web app?

PORTA IL TUO SITO WEB IN UN’APP WINDOWS

cortanaCon Windows 10, Microsoft Introduce un bridge che permette agli sviluppatori di pubblicare la propria web app in una vera e propria App UWP. La piattaforma UWP, essendo integrata nella memoria centrale unificata di Windows 10,  offre un set di API comune che permette di creare un singolo pacchetto dell’app che può essere installata su un’ampia gamma di dispositivi che eseguono Windows 1 O. Integrare la propria web app all’interno di un App UWP, permette di poter chiamare le API di UWP tramite il codice JavaScript. Si avrà quindi la possibilità di sfruttare le funzionalità di Windows 1 O, come ad esempio Cortana per interagire con la propria web app tramite dei comandi vocali e rendere l’esperienza utente più entusiasmante.

Questo tipo di app vengono chiamate Hosted Web Apps o HWA (Progetto Westminster), dal momento che la maggior parte del contenuto viene servito del proprio sito web. Inoltre, con un singolo pacchetto dell’app, Windows Store offre un canale di distribuzione unificato per raggiungere ogni tipo di dispositivo su cui può essere eseguita l’app. Nei prossimi paragrafi vedremo come integrare Cortana nella nostra HWA, preparando un file Voice Command Definition (VCD) per la definizione dei comandi, specificando nella nostra web app il percorso del file VCD, scrivendo il codice JavaScript per l’esecuzione di un’operazione in relazione al comando, e infine creando la HWA con Vìsual Studio.

PREPARIAMO IL FILE VCD

Come abbiamo precedentemente descritto, Cortana è l’assistente vocale di Windows 1 o e bisogna addestrarlo per fornire informazioni o eseguire operazioni. In questo paragrafo vedremo come addestrare Cortana realizzando un file Voice Command Definition (VCD). Il file VCD è un file XML che mappa i comandi in frasi specifiche, per esempio un utente potrebbe toccare il pulsante Start e dire •Mio calendario, mostra appuntamenti di oggi”, con questo comando si potrà lanciare l’applicazione MioCalendario e visualizzare la pagina con gli appuntamenti del giorno. Ecco un esempio di file VCD che definisce un set di comandi per l’applicazione

MioCalendario:

<?xml version=”1.0″ encoding=”utf-8″?>

<VoiceCommands xmlns=”http://schemas.microsoft.com/volcecommands/1.2″>

<CommandSet xml:lang=”it·IT” Name=”MIOCalendarioCommandSet_1t·IT’>

<CommandPrefix> Mio calendario, </CommandPrefix>

<Example> mostra appuntamenti di oggi </Example>

<Command Name=”visualizzacalendario”>

<Example> mostra appuntamenti di oggi </Example>

<ListenFor> mostra appuntamenti {giornate}</ListenFor>

<Feedback> Sto mostrando gli appuntamenti {giornate} </Feedback>

<Navigate/>

</Command>

<PhraseList Label=”giornate”>

<Item> di 0991 </Item>

<Item> di domani </Item>

<Item> della settimana </Item>

<Item> del mese </Item>

</PhraseList>

</CommandSet>

<!– Other Command5ets for other languages –>

</VoiceCommands>

Come per qualsiasi file XML, anche un file VCD segue delle linee guida di riferimento per gli elementi di markup XML e gli attributi utilizzati nel file VCD, per specificare i vincoli di riconoscimento. Nel dettaglio:

?xml: Il file VCD Inizia con un elemento XML che specifica la versione di XML e la codifica dei caratteri.

VoiceCommands:

L’elemento principale, obbligatorio, di un file VCD. li valore del suo attributo xmlns deve essere http://shemas.microsoft.com/voicecommand/1.12. Può contenere tra 1 e 15 elementi CommandSet ognuno dei quali rappresenta i comandi vocali pe ogni singola lingua.

CommandSet: Elemento figlio, richiesto, dell’elemento VoiceCommands. Un contenitore per tutti i comandi vocali che un’app accetterà nella lingua specificata nell’attributo xml:lang. Il valore dell’attributo xml:lang deve essere unico nell’elemento VoiceCommand.

CommandPrefix: Elemento figlio facoltativo dell’elemento CommandSet, se presente, deve essere il primo elemento figlio dell’elemento CommandSet. Specifica un nome facile da pronunciare per chiamare un’app con un nome lungo o difficile da pronunciare.

Example: Elemento, richiesto, dell’elemento CommandSet e dall’elemento Command. Fornisce un esempio rappresentativo di ciò che un utente può dire per un CommandSet nel suo insieme, e per un singolo comando. Questi esempi saranno visibili quando l’utente su Cerca dice, •Aiuto” o “Cosa posso dire?.

Command: Elemento figlio, richiesto, dell’elemento CommandSet che contiene l’attributo Nome. Definisce un’azione che gli utenti possono avviare parlando e ciò che gli utenti possono dire per awiare l’azione. Ogni Command può essere associato ad una pagina specifica della vostra applicazione e contiene i seguenti elementi, richiesti, figli: Example, ListenFor, Feedback e Navigation. Questi elementi figli devono seguire l’ordine indicato.

ListenFor: Elemento figlio, richiesto, dell’elemento Command. Contiene una parola o una frase che la vostra applicazione riconoscerà per questo Command. Questo può includere o essere un riferimento all’attributo Label di un elemento Phraselist (o PhraseTopic), che appare nell’elemento ListenFor racchiuso tra parentesi graffe. ad esempio: {giornate). Il contenuto di qualsiasi elemento ListenFor può essere riconosciuto per attivare Il Command.

Feedback: Elemento figlio, richiesto, dell’elemento Command. Specifica Il testo che verrà visualizzato all’utente quando il comando viene riconosciuto.

Phraselist: Elemento, facoltativo, dell’elemento CommondSet. Un elemento CommondSet può contenere complessivamente non più di 2.000 elementi Item tra tutti gli elementi PhraseUst in un CommandSet. Ogni Item specifica una parola o una frase che può essere riconosciuta per avviare il Command che fa riferimento al PhraseList.

MODIFICHIAMO DINAMICAMENTE IL FILE VCD

La modifica dinamica di un file VCD, quindi in fase di esecuzione può essere molto utile se non è possibile associare un comando ad un’operazione definita dall’utente o scaturita da dati transitori nell’app. Ad esempio, se si desidera che Cortana sia ln grado di awiare l’applicazione e visualizzare un appuntamento che ho Inserito in calendario pronuncerò “Mio Calendario, Mostra appuntamento riunione in azienda”, dove ‘riunione in azienda’ è definito dall’utente nel titolo dell’appuntamento. Per far questo non è necessario creare un elemento UstenFor separato per ogni possibile appuntamento. Invece. è possibile popolare dinamicamente Phraselist in fase di esecuzione, magari, con il titolo dell’appuntamento creato dall’utente. Per aggiornare un elemento Phraselist nel file VCD:

  • Ottenere l’elemento CammandSet che contiene l’elenco frase. Utilizzare l’attributo Name di quell’elemento CommandSet (Il nome deve essere univoco nel file VCD) come chiave per accedere alla proprietà VoiceCommandManager.lnstalledCommandSets e ottenere il voiceCommandSet di riferimento.
  • Dopo aver identificato Il CommandSet, ed aver ottenuto un riferimento alla Phraselist che si desidera modificare, chiamare Il metodo setPhraseListAsync, utilizzando l’attributo Label dell’elemento Phraselist e un array di stringhe come nuovo contenuto della Phraselist

INTEGRIAMO IL FILE VCD

Nei paragrafi precedenti abbiamo visto come realizzare il file VCD per mappare ed istruire Cortana all’esecuzione dì una operazione in relazione ad un comando. Adesso vediamo come integrare il file VCD all’interno della web app. L’1ntegrazione è molto facile, basta aggiungere un tag <meta> nell'<head> della pagina html principale, ad esempio:

<meta name=”msapplication-cortanavcd” content=”http://contoso.com/vcd.xml”/>

Aggiunto il tag <meta> nella pagina web principale che specifica li percorso del file VCD, bisogna awiare manualmente l’app una prima volta, per permettere a Windows di scaricarlo e lo registrarlo automaticamente. Una volta scaricato e registrato il file VCD, Cortana sarà già istruita per l’esecuzione delle operazioni definite al nostro comando.

INTEGRIAMO IL CODICE JAVASCRIPT

Creato e specificato il file VCD nella web app, manca un’ultima operazione prima di integrare la web app all’interno della HWA, la scrittura del codice JavaScript con il codice da eseguire per ogni operaz.ione da eseguire al comando. Nel caso dell’applicazione MioCalendario si potrebbero visualizzare gli appuntamenti secondo il giorno richiesto. Per far tutti ciò bisogna:

1. Verificare che la vostra applicazione è stata attivata da un comando vocale. Nell’evento onaàivated, verificare se  activationKind è voiceCommand.

2. Determinare il comando richiesto, assegnare ad un oggetto speechRecognitionResult la proprietà result dell’oggetto /ActivatedEventArgs. Per determinare ciò che ha detto l’utente, interrogare la proprietà text dell’oggetto speechRecognitionResult.

3. Una volta che otteniamo il risultato del riconoscimento vocale, si ottiene il nome del comando dal primo valore della matrice della proprietà ru/ePath dell’oggetto speechRecognitionResult per intraprendere l’azione appropriata.

INTRODUZIONE ALLE HOSTED WEB APPS

Bene, abbiamo preparato il file VCD e lo abbiamo specificato nella pagina principale della web app, abbiamo scritto il codice JavaScript con il codice da eseguite, manca solo la pubblicazione online della web app e la parte più impegnativa è già passata. Adesso possiamo passare alla realizzazione della HWA con Visual Studio 2015, ma prima analizziamo un aspetto importante delle HWA: la definizione delle pagine della web app da include o escludere nella HWA e per ognuna di esse definire il tipo di accesso alle API del UWP.

DEFINIRE IL CONTENUTO E I PERMESSI (ACURS)

Come già detto precedentemente, il vantaggio delle HWA è integrazione della propria web app all’interno di un’app per Windows 1 O. Bisogna quindi definire le pagine che dovranno essere incluse o escluse nella HWA. Per far questo si utilizzano i Setting Application Content URI Rules (ACURs). Attraverso ACURs si è in grado di specificare delle regole, nel pacchetto app manifest, in indicare il contenuti remoti che verranno integrata nella HWA e li tipo di accesso diretto alle API di UWP tramite JavaScript. Le regole dovrebbero Includere la pagina iniziale defl vostro app e le altre pagine che si desidera includere come pagine app. Opzionalmente, è anche possibile escludere URL specifici. Ci sono diversi modi per specificare gli URL nelle regole:

Un hostname esatto.

Un nome host per il quale una URI, con qualsiasi sottodominio di quel nome host, è inclusa o esclusa.

Un URI esatto.

Un URI esatto che può contenere una proprietà di query.

Un percorso parziale e un jolly per indicare una particolare estensione di file per una regola da includere.

I percorsi relativi per escludere le regole.

Se l’utente passa a un URL che non è incluso nelle regole, quindi Windows apre l’URL di destinazione in un browser.

Ecco alcuni esempi di ACURs:

javascript StartPage=”http :/ /contoso.com/home”>

<uap:ApplicationContentUriRules>

<uap:Rule Type=”lndude” Match=”https://contoso.

com/” WindowsRuntimeAccess:”all” />

< uap: Rule Type=’1nclude” Match=”https ://* .c:ontoso.com/” WlndowsRuntimeAccess=”all” />

<uap:Rule Type=”exclude” Match=”https://contoso.com/excludethispage.aspx”>

</uap:Appllc:ationContentUriRules>

Se un URL è definito entro i limiti dell’app (ACURs), può chiamare le Windows Runtime API con JavaScript utilizzando l’attributo “WindowsRuntimeAccess”. Lo spazio dei nomi di Windows verrà cosi iniettato e sarà presente nel motore di script quando un URL, con accesso appropriato, viene caricato nell’HWA. Questo rende le Universal Windows API direttamente disponibili per gli script dell’app. A tal fine è necessario specificare per ogni URL il (WindowsRuntimeAccess=· < <level> > ;, nei ACURs, con uno di questi valori:

all: il codice JavaScript remoto ha accesso a tutte le API UWP e alle risorse incluse nel pacchetto.

allowForWeb: il codice JavaScript remoto ha accesso soltanto alle risorse incluse nel pacchetto.

none: Default. L’URL specificato non ha accesso alla piattaforma.

Ecco un esempio:

javascript

<uap:ApplicationContentUrlRules>

<uap:Rule Type=”include” Match=”http://contoso.com/” WindowsRuntlmeAccess=”all” />

</uap: ApplicationContenturtRules>

Ecco un esempio di come implementare una Live Tile e aggiornarlo da remoto tramite JavaScript

var notifications = Windows.UI.Notificatlons,

tile = notifications.TileTemplateType.

tileSquare150x150PeeklmageAndText01,

tileContent notifications.TileUpdateManager.getTemplatecontent(tile),

tileText = tilecontent.getElementsByTagName(‘text’),

tilelmage = tileContent.getElementsByTagName(‘lmage’);

tileText[0].appendChild(tileContent.createTextNode(message || ‘Demo Message’);

tilelmage[0].setAttribute(‘src’, imgUrl || ‘https://unsplash.lt/150/150/?random’);

tileJmage[0].setAttribute(‘alt’, imgAlt || ‘Random demo image’);

var tileNotification = new notifications.TileNotiflcation(tlleContent);

var currenmme = new Date();

tileNotification.expirationTime = new

Date(currentime.gettime() + 600 * 1000);

notifications. TileUpdateManager.createTileUpdater

ForApplication().update(tlleNotlfication);

} else {

}

} …

PREPARIAMO LA HOSTED WEBAPPS

Adesso siamo pronti a creare la HWA. seguendo 4 semplici passaggi:

1. Creare un’appJavaScript (Windows Universal) vuoto.

– Awiare Visual Studio 2015.

– Cliccare su “File-> Nuovo progetto• e scegliere • JavaScript -> Windows -> Windows Universale-> Blank App (Windows Universal)”.

2. Eliminare il contenuto HTML / CSS /JS.

– Poiché si tratta di una hosted web apps in cui il contenuto viene servito da un server remoto, non saranno necessari la maggior parte dei file che vengono fomiti dal template JavaScript.

– Procediamo a cancellare le risorse HTML, JS e CSS locali. Tutto ciò che serve è mantenere il file appx manifest (utile per configurare l’app) e le risorse di immagine da visualizzare nel negozio, menu di avvio e sulla barra delle  applicazioni.

3. Impostare la pagina iniziale URL nel file App Manifest

– Aprire il file package.appxmanifest.

– Sotto la scheda Appllcazlone trovare il campo StartPage: “default.html”.

– Sostituire “default.html” con “http://www.miocalendario.it/index.html”.

4. Definire i parametri di sicurezza ACURs.

– Nella scheda URI Content definire le URL che compongono il web app.

-Qui si è in grado di controllare quali URL hanno accesso alle funzionalità della piattaforma nativa.

– Andare avanti e aggiungere

1. http://www.miocalendario.it/index.html e 2. http: //*.miocalendario.it/

– Impostare il valore della colonna ‘WinRT Access· su “All” per entrambi gli URL.

HitRun!

-A questo punto si dispone di un pieno funzionamento nativo su Windows Web App in grado di accedere alle API di piattaforma.

Ricapitolando. Per integrare una funzionalità di Windows 10 come Cortana sulla propria web app, bisogna usare il bridge per creare una Hosted Web Apps per avere accesso alle API di UWP tramite 11 codice JavaScript Cortana per eseguire delle operazione bisogna istru i ria tramite un file XML chiamato VCD, in cui vengono specificate le azioni da compiere in relazione al comando vocale. Quello che vi manca è pubblicare la HWA su Windows Store.

Back To Top