TV e dispositivi connessi

Questo articolo è scritto per sviluppatori web interessanti a Firefox OS per TV, allo stato attuale dei lavori e futuro, e allo sviluppo di web app per TV. Descrive come realizzare ed eseguire un simulatore di Firefox OS per TV, quindi come iniziare a scrivere app e installarle su TV.

Le differenze principali nell'utilizzo di Firefox OS su un TV piuttosto che su un telefono (o su un desktop) sono:

Meccanismi di controllo: Firefox OS su TV probabilmente ha il solo telecomando per interagire, non offre la stessa praticità di una tastiera, mouse o touch screen.
Risoluzione: Le moderne smart TV sono generalmente Full HD (1920x1080) o Ultra HD (4K). La proporzione di un pixel sulle TV è sicuramente differente rispetto ad un dispositivo mobile.

Stato attuale e piani futuri

Dalla versione 2.2 in avanti Gaia può essere eseguito su una TV. Puoi trovare le app out-of-the-box per smart TV nella cartella gaia/tv_apps; le app con prefisso smart- identificano le app per smart TV. A partire dalla prima metà del 2015, saranno disponibili sul mercato televisori con interfaccia uente (UI) basate sulle app che vedremo di seguito.

Nota: smart-home e smart-deck sono delle buone app da utilizzare come template iniziale per lo sviluppo delle tue app, piuttosto che come fonte di idee o ispirazione.

Sviluppare app per TV

In questa sezione esplorerai come predisporre un ambiente per eseguire e testare le tue app per TV, e come scrivere una semplice app di test.

Scaricare gli strumenti

Ti servono tre componenti principali per costruire l'ambiente di sviluppo:

Simulatore per desktop: Dovresti scaricare e installare l'ultimo Simulatore Nightly per Desktop (anche conosciuto come B2G Desktop), o — se ti senti veramente avventuroso — costruiscilo da te stesso. Dovrai scaricare quello appropriato per il tuo sistema, il file inizierà per b2g-.
Firefox Nightly/Developer Edition: Dovresti inoltre installare Firefox Nightly (o la Developer Edition). Scarica la Nightly o la Developer Edition dalle loro pagine ufficiali.
Un fork locale del repository di Gaia: Puoi configurarlo seguendo le istruzioni sottostanti (vedi inoltre Eseguire il tuo build di Gaia per ulteriori informazioni):
1. Primo, fai un fork del repository principale di Gaia su Github.
2. Quindi, fai una copia locale tramite il comando:
```
git clone https://github.com/your-username/gaia.git
```
3. Aggiungi l'upstream remoto al repository locale:
```
cd gaia
git remote add upstream https://github.com/mozilla-b2g/gaia
```

Nota: Non ti serve fare il fork del repository di Gaia ne configurare l'upstream, ma è una buona pratica se vuoi contribuire al progetto riportando indietro le eventuali modifiche.

Configurare il tuo ambiente

Ora devi creare un profilo di Gaia specifico per TV. Dal tuo repository locale esegui il seguente comando:

make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1

Verrà creato un profilo per TV all'interno della cartella profile ottimizzato per il debugging. Verrà creata una versione hosted delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox Desktop come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh della app (o della finestra del browser) per verificarne il risultato, invece di ricostruire il profilo, pubblicarlo sul dispositivo, e così via. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.

Eseguire nel simulatore

Ora esegui il Simulatore di Firefox Desktop configurando opportunamente la dimensione dello schermo, abilitando il debug remoto lato server e impostando il path del profilo:

path/to/b2g-bin -screen 1920x1080 -start-debugger-server 6000 -profile /path/to/gaia/profile

Nota: Se la risoluzione dello schermo è superiore a quella del tuo PC, le app di sistema non lavoreranno correttamente. Riduci la dimensione dello schermo per adattarla a quella del tuo sistema.

Nota: Trovi b2g-bin nel pacchetto b2g installato assieme al simulatore di Firefox OS.

Nota: Il path -profile /path/to/gaia/profile che devi impostare è quello che ti stato restituito quando hai creato il profilo (dopo aver eseguito il comando di make come mostrato precedentemente).

Se tutto procede correttamente dovresti vedere la app di orologio. Temporaneamente è la app di atterraggio.

Premendo il tasto di Home nella parte inferiore della finestra viene avviata la app di Home, che rappresenta il punto di ingresso principale per le app per Smart TV. Puoi navigare utilizzando i tasti con le frecce; puoi anche selezionare l'icona Apps per avviare il contenitore delle App (App deck), dove potrai trovare la tua app di test dopo che l'avremo creata (vedi la sezione sottostante Esempio Hello World ).

Lo schermata principale che contiene le App (App deck) è simile alla seguente:

Esempio Hello World

Ora proverai a svluppare una app di test, così potrai renderti conto di quanto sia facile iniziare. Utilizzerai lo strumento WebIDE di Mozilla. Ti consente di avviare facilmente una web app, di modificare il codice HTML/CSS/JS, di fare attività di test/debug delle app — senza avere a disposizione un dispositivo reale.

Per aprire WebIDE in Firefox per Desktop, seleziona Tools > Web Developer > WebIDE dal menù principale. Ora clicca Open App nell'angolo in alto a sinistra di WebIDE e scegli New App… dal menu.

Seleziona HelloWorld, inserisci il Project Name (nome del progetto) e clicca OK.

Dopo aver specificato la cartella in cui salvare il progetto, WebIDE produrrà un template di App con poche righe di codice:

Ora puoi programmare la tua app direttamente da WebIDE, piuttosto che utilizzare qualsiasi altro editor.

Esuguire la tua app sulla TV

Se hai una televisione Panasonic VIERA con Firefox OS puoi eseguire le tue applicazioni sulla TV via WebIDE e trovi le spiegazioni nell'articolo How to connect WebIDE to TV (VIErA CX/CR series).

Poichè non è ancora presente alcun simulatore per TV in WebIDE, dovrai provare l'applicazione di esempio nel simulatore di Firefox OS scaricato precedentemente.

Se non l'hai ancora avviato, segui le istruzioni nella sezione precedente Eseguire nel simulatore per avviare l'ambiente per TV all'interno del simulatore di Firefox OS (ricordati di aggiungere il parametro -start-debugger-server 6000).
Da WebIDE, clicca Select Runtime nell'angolo in alto a destra quindi seleziona Remote Runtime dal menu.
Assicurati di digitare localhost:6000 nella form e premi OK.
Clicca sull'icona Install and Run (l'icona di "avvio") di WebIDE. Dovresti ora vedere la tua app in esecuzione all'interno del Simulatore di Firefox OS.
Ora clicca sull'icona di Debug App (l'icona "strumento") di WebIDE per avviare il debug della tua app direttamente nel simulatore utilizzando la Toolbox di DevTools.

Nota: Puoi trovare maggiori informazioni sulle modalità di debug delle tue app leggendo Debugging apps.

Interagire con meccanismi di controllo remoto per TV

Una delle differenze più evidenti fra telefoni e TV è la disponibilità di meccanismi di input. In generale, la TV non ha un touch screen, di conseguenza le app non possono essere controllate da eventi di mouse o di touch. In questo caso il meccanismo di controllo è rappresentato dal telecomando del televisore attraverso la pressione dei tasti.

Il focus è un altro aspetto importante da evidenziare. E' importante assicurarsi che il focus sia sempre sull'elemento corretto, non potendo selezionare direttamente l'elemento sulla TV tramite pressione sullo schermo.

Nota: I tasti dei telecomandi sono definiti nella specifica W3C DOM Level 3 KeyboardEvent key Values; vedi la sezione Media Controller Keys.

Vedi inoltre

Sviluppare app per TV è molto simile a come avviene per ogni altro dispositivo. Devi sviluppare codice seguendo gli standard Web, progettare l'interfaccia in modalità responsive e rispettare le caratteristiche specifiche di piattaforma.

Ci sono comunque alcune differenze di concetto e di interazione, Molte di queste sono descritte nella sezione Firefox OS for TV UX Overview di MDN.

Inoltre, leggi i seguenti: