Magic Kinder Protocollo di comunicazione Master App contenuti in

Magic Kinder ­ Protocollo di
comunicazione Master App contenuti in
HTML5
Le componenti
Il progetto prevede due componenti fondamentali che dovranno essere realizzate in maniera tale
da condividere una parte dei dati e comunicarsi reciprocamente le interazioni che avvengono in
maniera da poter sincronizzare alcune funzionalità.
Le due parti sono l’applicazione nativa, installata sul telefono dell’utente dallo store che si
occuperà di gestire i vari addons, e l’applicazione html, che visualizzerà i contenuti aggiuntivi.
La struttura dati
Il descrittore
Il descrittore è un file json contenente i dati dell’intera applicazione, esso è un oggetto
contenente tutte le informazioni necessarie ad ottimizzare il flusso di dati tra le due componenti.
I dati del descrittore conterranno le proprietà fondamentali per il protocollo, alle quali potranno
esserne aggiunte altre al fine di semplificare e standardizzare la gestione di alcuni elementi,
come ad esempio testi e sfondi, della parte html.
L’oggetto Descriptor
Il descrittore ha due proprietà fondamentali:
● contentType: proprietà di tipo stringa che indica se il pacchetto è una storia o un gioco
● homepage: identificativo di tipo Object dello step di scena della home page secondo la
struttura { scene:”idscena”,step:”idstep” }
● langDirection: proprietà di tipo stringa valorizzata “ltr” o “rtl”
● scenes: array di oggetti Scene
● sounds: array di oggetti Sound
L’oggetto Scene
La scena è un oggetto contenente le proprietà:
● id: identificativo di tipo stringa
● steps: array di oggetti Step
L’oggetto Step
Lo step è l’oggetto fondamentale della riproduzione in fase di riproduzione della storia e contiene
le informazioni riguardanti la visualizzazione dei pulsanti e la riproduzione degli speakerati, con
la seguente struttura:
● id: identificativo di tipo stringa
● buttons: oggetto di tipo Buttons, contenente le seguenti proprietà:
○ prev: booleano, ne gestisce la visibilità
○ next: booleano, ne gestisce la visibilità
● speech: path locale dell’mp3 di tipo stringa nullable. Per funzionare correttamente tutti gli
speech devono avere nomi univoci.
● firstSpeech: indica se lo step contiene il primo speech del contenuto, campo usato in
fase di registrazione audio dall’applicazione per nascondere il tasto prev
● speechDuration: indica il tempo di registrazione per il determinato step, indicato in
secondi
L’oggetto Sound
L’oggetto Sound contiene i riferimenti agli effetti sonori o di sottofondo da utilizzare in maniera
interattiva o sincronizzata durante la navigazione del contenuto html per avviare ai limiti di relativi
alla riproduzione degli stessi da parte della tecnologia HTML. La struttura è:
● id: identificativo di tipo stringa
● path: path locale dell’mp3 di tipo stringa
Esempio di descrittore base
{
“contentType”:”story”,
“langDirection”: “rtl”|”ltl”,
“homepage”:{
“scene”:”scene0”,
“step”:”init”
},
"scenes":[
{
"id":"scene0",
"steps":[
{
"id":"init",
"buttons":{
"prev":false,
"next":false
}
},
{
"id":"inside",
"buttons":{
"prev":false,
"next":true
},
“firstSpeech”:true
"speech":"path/to/speech.mp3",
“speechDuration”:15
}
]
},
{
"id":"scene1",
"steps":[
{
"id":"init",
"buttons":{
"prev":true,
"next":false
},
"speech":"path/to/speech.mp3",
“speechDuration”:15
}
]
}
],
"sounds":[
{
"id":"lose",
"path":"fx/lose.mp3"
}
]
}
Sintesi dei flussi
Le applicazioni sono sviluppate in maniera tale che possa esservi un dialogo continuo tra la
parte nativa e quella html, nello specifico l’applicazione nativa è in grado di trasmettere
attraverso chiamate javascript alcuni eventi ed i dati associati alla parte html, mentre la parte
html è in grado di fare lo stesso tramite redirect ad url prestabiliti che vengono intercettati ed
analizzati.
URL Intercettate
● http://contentupdate/{idscena}/{stepscena} utilizzato per comunicare all’app nativa la
posizione corrente della storia, nonché permettere alla stessa di interrogare i relativi dati
contenuti nel descrittore e far partire lo speech collegato
● http://contentshowbuttons viene utilizzato per comunicare all’applicazione quando deve
mostrare i bottoni (back, prev e next)
● http://contentaudio/{audioId} utilizzato per comunicare all’app nativa la necessità di
eseguire un audio, accetta due parametri:
○ http://contentaudio/{audioId}/loop per eseguire musiche di sottofondo in grado di
andare in loop
○ http://contentaudio/{audioId}/stop per interrompere l’esecuzione di un suono
precedentemente avviato
● http://contentpostroll/ utilizzato per comunicare all’app il termine dell’esecuzione del
contenuto corrente e richiedere la visualizzazione del contenuto nativo di chiusura, in
caso di registrazione audio l’applicazione mostrerà un popup che invita l’utente a tornare
alla home.
Chiamate javascript
● buttonPressed(buttonId): funzione generalista eseguita dall’applicazione nativa alla
pressione dei pulsanti di interfaccia, il parametro buttonId indica il pulsante premuto e
può essere valorizzato secondo il protocollo corrente: prev, next, back, listen, read o
record.
● speechComplete(): indica all’applicazione html il completamento della riproduzione di uno
speakerato in maniera tale da poter eseguire delle azioni sincronizzate.
● startRecording() e stopRecording() per la sincronizzazione dell’effetto di blink durante la
registrazione
Modalità di contenuto
Il comportamento generale dell’applicazione si articola su 2 modalità di contenuto:
Play e Record. La modalità Play a sua volta può essere eseguita in modalità Listen (speakerato
originale o utente) o Read. L’applicazione di default parte in modalità Play­Listen.
Play
Funzionalità gestite dall’applicazione nativa:
● Intercettazione dell’url “contentupdate” al fine dell’ottenimento dell’id dello step di scena
corrente e dei relativi dati
● Visualizzazione dei pulsanti left e right, comunicazione della loro pressione alla parte html
tramite funzione javascript “buttonPressed”
● Esecuzione eventuale dello speakerato utente o locale
● Verifica se lo step corrente è la homepage confrontando l’id con il valore contenuto nella
proprietà “homepage” del descrittore.
● Se il contentType è “story” e lo step corrente è la homepage:
○ Visualizzazione dei 3 pulsanti listen, read, record
○ Passaggio della selezione alla parte html tramite javascript “buttonPressed”
○ Cambio modalità in base al pulsante premuto
● In ogni caso, se lo step corrente è la homepage:
○ Il pulsante back chiude l’applicazione html
● Se invece lo step corrente non è la homepage:
○ Il pulsante back esegue la funzione “buttonPressed”
● Gestione del sonoro eventuale tramite intercettazione dell’url “contentaudio”
Funzionalità gestite dall’applicazione html:
● Grafiche, sfondi, testi, animazioni, numeri di pagina, contenuti ed effetti vari
● Intercettazione della chiamata “buttonPressed” e conseguenti azioni
● Comunicazione all’app nativa dello stato corrente tramite l’URL “contentupdate”
● Comunicazione all’app nativa della conclusione della storia tramite l’URL “contentpostroll”
● Comunicazione all’app nativa della necessità di visualizzare i bottoni (back, prev, next)
tramite l’URL “contentshowbuttons”
● Richiesta di riproduzione audio tramite l’URL “contentaudio”
Record
Funzionalità gestite dall’applicazione nativa:
● Intercettazione dell’url “contentupdate” al fine dell’ottenimento dell’id dello step di scena
corrente e dei relativi dati, con conseguente:
○ Visualizzazione dei pulsanti prev e next, comunicazione della loro pressione alla
parte html tramite funzione javascript “buttonPressed”
○ Ottenimento del path locale dello speakerato ed utilizzo dello stesso come id
● Gestione delle funzionalità di registrazione e riascolto degli speakerati utente
● Chiamate alle funzioni “startRecording” e “stopRecording” per la sincronizzazione
dell’effetto blink
Funzionalità gestite dall’applicazione html5:
● Gestione della navigazione in maniera tale da considerare esclusivamente gli step di
scena comprensivi di speakerato, provvedendo a visualizzare l’effettiva numerazione
degli stessi e garantire il corretto funzionamento dei pulsanti prev e next
● Visualizzazione dello sfondo blurato, del testo in sovraimpressione, dei numeri di
speakerato corrente e totali, effetto blink in fase di registrazione sincronizzato con le due
funzioni di cui sopra