Read Guida veloce allo sviluppo per Firefox OS

Guida veloce allo sviluppo per Firefox OS

Daniele Scasciafratte e Edoardo Putti

Introduzione
Ambiente di sviluppo per Firefox OS
Concetti Base
La prima app
Strumenti per sviluppatori
WebIde
Il Simulatore Firefox OS 1.1
Distribuire le app
Firefox Marketplace
Altro
Appendice 1: Link utili

Ringraziamenti

A mia moglie Lili, la miglior moglie nel mondo.

A Mozilla per aver sempre creduto in noi, per il suo sforzo di mantenere il web aperto e libero e perché mette sempre l’utente al primo posto.

Alla comunità brasiliana di Mozilla per avermi accolto e per essere così incredibili.

Al mio mentore GSoC Marcos Caceres, al Mozilla WebAPI Team, al Mozilla Tech Evangelist Team e il Dev Engagement Team per essere così eccezionali.

A Google per aver ideato Google Summer of Code 2013. Questo programma è spettacolare.

Questo testo è in beta perenne

Il mio auspicio è di aggiornare questo testo spesso, ampliandone i contenuti e revisionandolo secondo le segnalazioni dei lettori. Poiché alcune API sono in via di sviluppo su Firefox OS, è meglio assicurarsi di aver scaricato l’ultima versione disponibile di questo testo.

Me, me stesso e io.

In molte parti del testo esprimo le mie opinioni personali e faccio delle scelte un po’ differenti dalla maggior parte degli sviluppatori, soprattutto se questo può servire a descrivere un concetto in modo più semplice. Cercherò sempre di essere chiaro e di motivare le mie opinioni personali. A ogni modo, se ci sono degli errori in quello che dico, correggerò il testo e aggiornerò il testo. Per ulteriori informazioni a riguardo fare riferimento alla sezione Commenti e Pull request.

Com’è nato questo testo

Inizialmente, avevo cominciato a scrivere il testo nel mio tempo libero - ma grazie all’aiuto del mio mentore al Google Summer of Code (GSoC), Marcos Caceres, questo testo è diventato parte del mio progetto GSOC - che aveva lo scopo di creare risorse utili per gli sviluppatori Firefox OS. Quindi un grosso ringraziamento a Google che finanzia questa opera e al Mozilla WebAPI team per avermi accolto all’interno del loro gruppo durante l’estate.

Rimanere aggiornati

Questo testo è distribuito gratuitamente tramite Leanpub.

Scaricando il testo dalla pagina ufficiale su Leanpub è possibile registrarsi per ricevere gli aggiornamenti automatici. L’auspicio è di aggiornare il testo qualche volta al mese. Se si è ottenuto questo testo da un amico o da qualche altro sito, si vada alla pagina su Leanpub per scaricare e registrarsi in modo da ricevere le notifiche sugli aggiornamenti.

Donazioni

Scrivere un testo richiede molto lavoro e, dopo l’esperienza del Google Summer of Code 2013, vorrei dedicare più tempo a questa attività. Quelli che pensano che questo testo sia utile (o intrigante) possono effettuare una donazione scegliendo una cifra a piacere diversa dai 0 euro sulla pagina di download su Leanpub. Per coloro che preferiscono donare utilizzando PayPal, posso ricevere donazioni utilizzando l’account agarzia@mac.com.

Indipendentemente dalle donazioni, è importante inserire il proprio indirizzo email nel modulo di download per rimanere aggiornati sulle future modifiche apportate al testo.

Come contattare l’autore

Per opinioni e commenti inviare un email a fxosquickguide@andregarzia.com. Il mio sito è http://andregarzia.com. Il mio account Twitter @soapdog.

Se si desidera migliorare il contenuto di questo testo, fare riferimento alla sezione Commenti & Pull Request.

Illustrazione della copertina

La copertina è stata creata da Raphael Eckhardt, un disegnatore ed illustratore brasiliano. È possibile osservare il suo lavoro e contattarlo (è un freelancer) su http://raphaeleckhardt.com/.

Chi dovrebbe leggere questo testo

Questo testo è stato scritto per lettori con una conoscenza intermedia di HTML, CSS e Javascript che vogliono creare applicazioni mobile per Firefox OS. L’insegnamento di HTML, CSS e Javascript è lo scopo del testo. Verranno consigliati dei buoni libri che trattano questi argomenti.

Migliori tecniche di programmazione VS introduzione per principianti

Gli sviluppatori esperti noteranno che talvolta negli esempi non seguo le migliori tecniche di programmazione. Anche se sto cercando di evitare l’uso degli anti-pattern nel testo, voglio altresì evitare l’uso delle immediate function e altre tecniche simili di programmazione. Il motivo principale di questa scelta è che questo testo vuole essere un’introduzione all’argomento. I programmatori esperti saranno in grado di modificare il codice mentre i principianti saranno in grado di comprenderlo. Il codice è, ovviamente, funzionante e mi propongo di aggiornare e migliorare le tecniche di programmazione seguendo i commenti e i suggerimenti dei lettori.

Ecco qualche buon testo per chi volesse approfondire il codice JavaScript a un livello avanzato:

JavaScript: The Good Parts: The JavaScript Book.
JavaScript Patterns: Patterns and best practices.
JavaScript Enlightenment: Advanced JavaScript techniques.
Maintainable JavaScript: Writing code that is easy to maintain and work with.

Commenti e Pull Requests

Questo è un testo gratuito e libero e sono entusiasta di ricevere qualunque commento o suggerimento. Il contenuto in lingua inglese di questo testo si trova su GitHub ed è scritto in Markdown (con alcune specifiche estensioni di Leanpub). Per commenti, correzioni di bug e miglioramenti inviare una pull request su Github. Grazie in anticipo per i contributi.

Il repository Git di questo testo in inglese è https://github.com/soapdog/firefoxos-quick-guide.

Il repository Git di questo testo in italiano è https://github.com/MozillaItalia/firefoxos-quick-guide.

Traduzioni

Questo testo è stato scritto inizialmente in portoghese e successivamente tradotto in inglese da me. In un secondo tempo, Daniele lo ha tradotto in italiano. La traduzione italiana è stata aggiornata da @gialloporpora e controllata da @Sara_t e @miki64.
La versione italiana ha del materiale inedito ma per maggiori informazioni fare riferimento allo storico versioni. Entrambe le versioni sono disponibili gratuitamente su internet:

Portuguese Version: Guia Rapido para Desenvolvimendo para Firefox OS.
English Version: Quick Guide for Firefox OS App Development.
Italian version: Guida veloce per lo sviluppo su Firefox OS.

Accetto con piacere tutto l’aiuto per tradurre questo testo in lingue diverse (e correggere il mio Inglese).

Storico delle versioni

Versione 0.3

Aggiunto nuovo materiale come Brick, Firefox OS Boilerplate, ADB Helper ed il multilingua grazie a Daniele Scasciafratte, la sezione del Manifest invece è di Giammarco Di Lella.
Con l’aiuto di Edoardo Putti, Niccolo Cantù e Aronne Brivio la guida è stata revisionata, corretta ed è stato aggiunto materiale nuovo rispetto all’originale inglese.

Versione 0.2

Testo rivisitato e corretto da Marcos Caceres, membro del Mozilla WebAPI team. Il contenuto di ogni capitolo è stato controllato per correzioni tecniche e molti errori grammaticali ed errori di battitura.

Versione 0.1

Questa è la prima versione di questo testo. Non ho ancora verificato con un editor gli errori di battitura, errori grammaticali e altre cose sbagliate. L’inglese non è la mia lingua principale quindi correggetemi per eventuali errori. La versione che il lettore sta leggendo ha avuto inizio il 20 agosto del 2013, una guida veloce distribuita alla BrazilJS Conference tenutasi tra il 22 e il 23 dello stesso mese. In pratica questo testo è stato scritto in soli due giorni.

Sto utilizzando Leanpub per scrivere il testo. Questo sistema mi permette di scrivere velocemente e di gestire il progetto in modo facile rimanendo sano di mente. Questa versione è la traduzione letterale dell’originale in portoghese.

Introduzione

Firefox OS

Firefox OS è una nuova piattaforma mobile sviluppata da Mozilla e dai suoi partner. Dispositivi con Firefox OS sono già disponibili in molti paesi e molti altri ne sono previsti entro la fine dell’anno.

Finalizzata per i mercati emergenti, la missione di Firefox OS è quella di portare il prossimo miliardo di persone online. Per raggiungere questo obiettivo, i dispositivi con Firefox OS sono costruiti per fornire un ottimo primo smartphone a prezzi competitivi. I dispositivi con Firefox OS non devono essere confrontati con smartphone di fascia alta come Apple iPhone 5S e Samsung Galaxy S4; sono realizzati per essere un’alternativa ai telefoni avanzati in modo che gli utenti di questi dispositivi possano compiere il passaggio a Firefox OS con un costo accessibile e ricevere una esperienza smartphone completa.

Nei mercati in via di sviluppo come il Brasile o la Colombia, smartphone con prestazioni decenti sono solitamente troppo costosi per il consumatore medio. Le persone sono in grado di acquistare telefoni a basso costo, le piattaforme di questi telefoni però sono progettate per dispositivi di fascia alta - questo porta l’hardware del telefono ad avere problemi nelle prestazioni, tutto ciò ha come risultato una pessima esperienza mobile per l’utente finale. Firefox OS è progettato specificatamente per funzionare su hardware limitato fornendo una discreta esperienza utente.

Un altro fattore distintivo di Firefox OS è l’essere un ecosistema aperto. Si tenga presente che i sistemi operativi mobile attuali sono paragonabili a dei silos proprietari, dove ogni produttore ha il privilegio di obbligare gli sviluppatori e utenti a seguire i propri desideri a prescindere dalla loro volontà (si ricordi a proposito quando la Apple ha vietato l’uso dei linguaggi diversi da Objective-C nel suo app Store). In questi ecosistemi proprietari è possibile distribuire le applicazioni solo su canali autorizzati - e il venditore ottiene una commessa sugli acquisti effettuati dal dispositivo.

Oltre a costringere gli sviluppatori su canali di distribuzione proprietari, questi sistemi li obbligano a utilizzare i loro Software Development Kit (abbreviato in SDK). Per realizzare un’app nativa sia per iOS che Android utilizzando i sistemi ufficiali, sarà necessario programmare rispettivamente un’app in Objective-C ed un’altra in Java. Dal punto di vista di uno sviluppatore questo significa non poter riutilizzare codice tra i vari progetti (magari pure le risorse multimediali non saranno riutilizzabili). In altre parole uno sviluppatore dovrebbe imparare due linguaggi e realizzare lo stesso software due volte.

Firefox OS si differenzia grazie all’utilizzo di “HTML5” come piattaforma di sviluppo. HTML5 è un termine di marketing utilizzato per indicare le tecnologie web in continua evoluzione, ovvero: HTML, JavaScript e CSS. Questi standard privi di brevetti sono supportati dai principali browser web, rendendo in questo modo possibili le app web. Sfruttando le tecnologie che includono HTML5, milioni di sviluppatori possono programmare per Firefox OS. Le applicazioni create per Firefox OS sono facili da migrare su altre piattaforme utilizzando dei framework come Phonegap.

La piattaforma che HTML5 merita

Il web è ovunque. Nel computer, nei telefoni cellulari, nelle smart TV e persino nelle console per videogiochi. Il linguaggio di programmazione del Web, JavaScript, è uno dei linguaggi più diffusi al mondo. Come già accennato, quando le persone parlano di HTML5 di solito si riferiscono alla combinazione di tre tecnologie, ovvero: HTML, CSS e JavaScript. I recenti progressi in HTML hanno introdotto moltissime nuove caratteristiche rispetto a XHTML 1.0 e HTML 4.01 - nuovi campi per i form, WebSocket, markup più semantico. I progressi in CSS hanno introdotto moltissime nuove caratteristiche, come Flexbox e animazioni CSS, che rendono più semplice creare layout responsive. I recenti progressi in JavaScript hanno portato significativi miglioramenti alle prestazioni e nuove funzionalità, rimanendo facili da utilizzare sia per i principianti che per gli sviluppatori esperti.

Firefox OS è, in parole povere, un’estensione del web mobile. Mozilla ha aperto la sua piattaforma a milioni di sviluppatori web rendendo HTML5 l’elemento principale. Anche se ci sono altri produttori di browser che supportano HTML5 nelle versioni mobile, Firefox OS va oltre, offrendo una famiglia di API per accedere all’hardware e al sistema utilizzando JavaScript. Queste API sono conosciute come WebAPI.

Accesso Hardware tramite le WebAPI

Alcune piattaforme precedenti hanno provato a realizzare sistemi operativi che utilizzavano tecnologie web per la creazione di applicazioni. Per esempio, quando venne presentato l’iPhone, l’unico modo per creare applicazioni era usare tecnologie web. Queste applicazioni web erano limitate dal fatto che non avevano accesso all’hardware o al dispositivo - quindi potevano esserci solo poche applicazioni. Quando Apple ha permesso di sviluppare in Objective-C, le funzionalità del dispositivo sono diventate accessibili, ha portato una ventata di innovazione. Purtroppo, le web app non hanno ottenuto accesso alle caratteristiche del dispositivo e sono state abbandonate come “cittadini di seconda classe” - questo le ha rese meno interessanti sia per gli sviluppatori che per gli utenti, in quanto non competitive in confronto alle app native di quei sistemi.

Quando scriviamo “funzionalità del dispositivo” ci riferiamo all’accesso hardware, di funzionalità del sistema e di servizi: parliamo di caratteristiche come aggiornamento della rubrica, invio di SMS, accesso alla fotocamera ed alla galleria. Su Firefox OS, le WebAPI permettono di accedere a molte di queste funzionalità.

Un’altra piattaforma precedente, WebOS, offriva accesso all’hardware via JavaScript ma non ha mai standardizzato le sue API. Mozilla lavora con il W3C e le altre parti interessate per rendere le WebAPI uno standard aperto in modo che altri browser le adottino. Poiché queste API sono integrate in altri browser, le applicazioni richiederanno sempre meno modifiche per le varie piattaforme.

È importante ricordare che le WebAPI non sono un’esclusiva dei dispositivi Firefox OS. Mozilla le sta implementando in altre piattaforme con cui Firefox è compatibile, sia desktop che Android. In questo modo, sarà possibile usare le open web app in Firefox OS, Firefox desktop e Firefox per Android.

Libertà di sviluppare e di distribuire

Come qualunque cosa made in Mozilla, Firefox OS è costruito per l’apertura e la libertà. Tutti gli sviluppatori possono seguire il repo di Mozilla-B2G su GitHub. Con Firefox OS si è liberi di seguire e contribuire allo sviluppo del sistema e anche di pubblicare le proprie applicazioni nei canali di Firefox Marketplace. La particolarità di Firefox OS è che tutte le applicazioni di sistema sono scritte in HTML5, permettendo a chiunque di vederle e studiare come funzionano.

L’idea alla base di tutto è che Mozilla non mette alcun limite. Se si vuole prendere il codice sorgente del sistema e cambiarlo per le proprie necessità, beh, si può fare. Se si deve realizzare un’applicazione per uso interno alla propria azienda, se si vogliono distribuire le proprie creazioni esclusivamente sul proprio sito, ciò è possibile. Solitamente nelle altre piattaforme si è bloccati dallo store ufficiale, che è l’unico canale di distribuzione per le applicazioni. Firefox OS ha un market ufficiale chiamato Firefox Marketplace che ha un processo di approvazione, ma si è liberi di distribuire le proprie app fuori dal portale. Analogamente a quanto accade sul web dove è possibile scegliere qualunque host per il proprio sito, con Firefox OS è possibile distribuire la propria app utilizzando qualunque host.

Purtroppo esiste una piccola controindicazione: per ragioni di sicurezza, l’utilizzo di alcune WebAPI sensibili non può essere consentito a chiunque. Per distribuire le app che utilizzano alcune delle API “con privilegi” si rende necessario sottoporre l’app stessa alla revisione dello staff Mozilla, che dovrà firmare digitalmente l’app prima di poterla pubblicare.

Riassunto

HTML5 è progettato per rimanere e migliorare nel tempo. Firefox OS è il nuovo sistema operativo mobile aperto di Mozilla completamente basato su tecnologie web. Questo sistema è costruito per l’apertura e offre una implementazione robusta di HTML5 che va oltre le altre piattaforme, offrendo delle WebAPI che sono una raccolta di API per accedere al sistema operativo e all’hardware utilizzando JavaScript. Queste nuove API sono state standardizzate con il World Wide Web Consortium (W3C) e speriamo adottate da altri browser in futuro.

Nel prossimo capitolo vedremo come preparare un ambiente di sviluppo per Firefox OS.

Ambiente di sviluppo per Firefox OS

Il motore Gecko

I browser utilizzano diversi motori di rendering per mostrare le pagine web: Google Chrome e Opera utilizzano Blink (un fork di WebKit), Internet Explorer utilizza Trident, mentre Safari utilizza WebKit. Mozilla ha il suo motore, chiamato Gecko, che viene utilizzato da Firefox desktop, Firefox per Android e Firefox OS. Poiché questi progetti usano lo stesso motore, è possibile sviluppare per Firefox OS utilizzando il browser Firefox desktop (con alcuni svantaggi¹).

Di che cosa abbiamo bisogno?

Per sviluppare e provare le applicazioni realizzate per Firefox OS abbiamo bisogno di:

Una versione recente di Firefox desktop.
Firefox OS Simulator (scegli la versione che vuoi installare. Anche tutte).
(facoltativo) Un editor testuale per programmare².

Configurazione del WebIde

Se stai usando la versione attuale di Firefox (34 o successive) il WebIde è già integrato. WebIde da solo non basta, se non hai un disposititvo devi installare anche i simulatori per fare le prove. Mozilla ha una documentazione completa a riguardo se vuoi approfondire l’argomento.

WebIde può gestire più versioni di Firefox OS quindi puoi installare le versioni 1.3, 1.4 e 2.0 senza avere problemi di compatibilità, ricordati che più è alto il numero di versione e più tardi verrà rilasciata al pubblico.

Adesso è il momento di vedere come funziona WebIde. Clicca su Strumenti -> Web Developer -> WebIde.

Dove puoi trovare WebIde

Dopo l’apertura dell’App Manager vedrai una schermata come questa.

WebIde viene aperto in una nuova finestra

La finestra è ancora vuota e noi adesso andiamo ad installare i simulatori sul computer.

La barra degli strumenti di WebIde

Nella barra degli strumenti abbiamo il pulsante Seleziona …, fai click per scegliere o installare una particolare versione del simulatore.

Il menù del simulatore con le varie opzioni

Fai clic su Installa il simulatore e seleziona la versione da installare facendo click sul bottone relativo. Hai finito!

Usare un dispositivo Firefox OS per lo sviluppo

Puoi usare il tuo dispositivo con Firefox OS per effettuare il debug delle tue applicazioni. Ecco come fare:

Installa adb³
Installa l’addon per Firefox ADB Helper per far comunicare Firefox con il tuo dispositivo

Se hai fatto tutto per bene e colleghi il tuo dispositivo al computer, Firefox lo rileverà e verrà mostrato tra i dispositivi utilizzabili dal WebIde

Senza e con ADB helper

Per fare debugging remoto il sistema deve riconoscere il dispositivo quindi sono necessari gli Android Tools o in parole povere adb. Come abbiamo accennato Firefox OS è basato su Android e quindi possiamo sfruttare alcuni dei suoi strumenti da sviluppatore come adb, che permette di passare dei file e di comunicare da computer a dispositivo e viceversa.
Se adb non è presente nel computer, Firefox non potrà rilevare alcun dispositivo connesso!

Riassunto

In questo capitolo abbiamo scoperto che tutto ciò di cui abbiamo bisogno per sviluppare app per Firefox OS è il browser Firefox per desktop (e un buon editor di testo).

Ora che abbiamo configurato l’ambiente di sviluppo, siamo pronti per soffermarci su qualche concetto base prima di creare la nostra prima app.

Nonostante i prodotti Mozilla utilizzino lo stesso motore di rendering, la versione di Gecko disponibile in Firefox OS è meno aggiornata rispetto a quella di Firefox desktop. Questo perché il ciclo di rilascio di Firefox OS è più lento rispetto a quello della versione Desktop. In pratica, questo vuol dire che alcune funzionalità non sono disponibili (o non funzionano come immaginato) quando si provano su Firefox OS - quindi è sempre importante verificare che la propria applicazione funzioni su un dispositivo Firefox OS. Inoltre, bisogna ricordarsi che gli utenti possono utilizzare versioni differenti di Firefox OS, quindi alcune potrebbero non avere tutte le funzionalità richieste. È importante fornire sempre un’alternativa in caso alcune di queste funzionalità non siano disponibili.↩
esistono molti buoni editor con diversi livelli di complessità e caratteristiche. Un editor molto diffuso, che mi sento di consigliare a chi non ha ancora trovato il suo preferito, è SublimeText. Personalmente, io utilizzo WebStorm che è un IDE completo per la realizzazione di web app.↩
adb è la sigla con cui indichiamo il programma android debug bridge uno strumento per comunicare con i dispositivi che si basano su Android↩

Concetti Base

Prima di sporcarci le mani con la nostra prima applicazione, vediamo di scoprire alcuni concetti base per lo sviluppo su Firefox OS. Nell’introduzione abbiamo detto che le applicazioni Firefox OS, analogamente alle pagine web, sono basate su HTML5, tuttavia non abbiamo spiegato cosa rende le applicazioni per Firefox OS differenti dalle pagine web classiche.

Se utilizziamo le nostre conoscenze riguardo le altre piattaforme mobile (Android o iOS per citare i più diffusi) possiamo osservare che le applicazioni native hanno delle caratteristiche ben definite:

Un nome e un’icona con cui l’utente lancia l’applicazione.
Accesso ai servizi di sistema (dati utente, notifiche) e funzionalità hardware (sensori).

Osservando il quadro generale, un’applicazione Firefox OS non è altro che una pagina web con una icona, un nome e di solito è in grado di funzionare anche non in linea (decisione che spetta allo sviluppatore). Tutti i dati dell’applicazione come nome, icona ecc. sono definiti nel file manifesto dell’applicazione, che sarà l’argomento della prossima sezione.

File manifesto dell’applicazione

Il manifesto è un file JSON obbligatorio che contiene i metadati dell’applicazione. Questo file è chiamato manifest.webapp e viene posizionato accanto al classico file HTML index.html, nella stessa cartella. Questi metadati servono al sistema per sapere il nome dello sviluppatore, la versione, i permessi richiesti per le varie API, l’icona, le lingue in cui è disponibile e molto altro.

Manifest d’esempio

 1 {
 2   "name": "Memos",
 3   "version": "1.1",
 4   "description": "A simple memo taking app",
 5   "launch_path": "/index.html",
 6   "permissions": {
 7     "storage": {
 8       "description": "Required for storing and retrieving notes."
 9       }
10   },
11   "developer": {
12     "name": "Andre Garzia",
13     "url": "http://andregarzia.com"
14   },
15   "icons": {
16     "60": "/style/icons/icon_60.png",
17     "128": "/style/icons/icon_128.png"
18   }
19 }

Sopra possiamo vedere il manifest di un’applicazione chiamata Memos¹. Tra le altre cose descrive chi ha creato l’applicazione, quali icone usare, qual è il nome dell’applicazione, quale file è usato per lanciare l’applicazione (in questo caso index.html), quali permessi d’accesso hardware richiede l’applicazione, ecc. Questo file è usato da Firefox OS e dalle Open Web Apps per aggiungere l’applicazione alla schermata principale e per mostrare sul Firefox Marketplace le informazioni dell’applicazione.

L’applicazione Memos vista su Firefox Marketplace

Si noti come le informazioni del file manifesto sono utilizzate dal sistema per aggiungere le applicazioni alla schermata principale, come è possibile osservare nella seguente schermata.

Memos nel simulatore

Riunendo il codice HTML, CSS, JavaScript e un file manifesto è già possibile avere un’applicazione pronta per funzionare su Firefox OS. Continuando nell’esplorazione dei concetti base per lo sviluppo di un’app, vediamo ora quali sono i vari tipi di applicazioni possibili.

Il nostro primo manifest

Come possiamo notare, il manifest è composto da un elenco di informazioni che scriviamo separando il nome dell’informazione dal suo valore tramite il carattere “:”, e separiamo ogni informazione con una “,”, come per un elenco.

Cosa mettere nel manifest

È obbligatorio inserire name, description e icons; il campo launch_path indica il file da avviare (necessario se l’app è packaged) e il campo developer che con le sue proprietà name e url definiscono, rispettivamente, nome e URL dello sviluppatore dell’applicazione (utili nel caso vogliate pubblicare la vostra app sul Mozilla Marketplace).

Le proprietà del manifest

Il manifest descrive molte proprietà utili, perciò vediamo il nome e l’utilità di ognuna.

activities

La proprietà activities specifica quali Web Activities supporta la nostra applicazione. Registrare la vostra applicazione come una “Web Activities” vi permette di rendere la vostra applicazione accessibile alle altre. Volendo fare un’esempio, se voi sviluppate un applicazione che permette di condividere le vostre foto su di un sito, potreste implementare la web activities share; in questo modo, quando l’utente prova a condividere una foto dall’app galleria, apparirà anche la vostra applicazione tra quelle che possono svolgere questo compito. La sintassi di questo campo è un po’ complessa, per questo ti rimando alla pagina di documentazione su MDN.

chrome

Il campo chrome indica se la vostra applicazione fa uso dei pulsanti di navigazione predefiniti dal sistema come vediamo nell’immagine

Nota: tenete presente che questa funzionalità va utilizzata solo se non è possibile implementare una soluzione propria, poiché le linee guida per l’user experience prevedono l’inserimento di un tasto back da parte dell’applicazione.
La sintassi della proprietà è la seguente:

1 "chrome": { "navigation": true }

default_locale

Questo parametro è necessario quando è presente anche la proprietà locales ed indica qual è la lingua predefinita dell’applicazione, ovvero quella che verrà usata se nel sistema è impostata una lingua per cui non avete traduzioni.

Esempio per l’inglese

1 "default_locale": "en"

description

La descrizione dell’applicazione (massimo 1024 caratteri), siate il più chiari e sintetici possibile perché questo è il testo che verrà visualizzato sul Firefox Marketplace (successivamente si può modificare sul portale).

developer

Abbiamo incontrato questa proprietà nel manifest di prova, puoi indicare chi è lo sviluppatore e qual è il suo sito web.

fullscreen

Se impostata a true, metterà la vostra applicazione a schermo intero (utile per i giochi) nascondendo la barra delle notifiche.

icons

Anche questa proprietà era presente nell’esempio e serve per far sapere quali risoluzioni dell’icona mettiamo a disposizione. Naturalmente è bene fornire la stessa icona con più risoluzioni, in modo che il dispositivo prenda quella adeguata; pensate a come sarebbe piccola l’icona pensata per il telefono rispetto a quelle del tablet o, ancora peggio, rispetto a quelle di uno schermo da 40 pollici. Alcune dimensioni sono obbligatorie per il Firefox Marketplace.

installs_allowed_from

Indica una serie di siti a cui è permesso installare l’applicazione (questo campo è inutile se pubblicate la vostra app solamente nel Mozilla Marketplace). Se usate il vostro sito come base per la vostra applicazione allora dovete inserirlo in questo campo.

launch_path

Ne abbiamo già parlato nel codice di esempio più in alto.
Questo campo indica il percorso di lancio dell’applicazione che deve essere relativo ed è obbligatorio per le app packaged.

locales

Questa proprietà ci permette di impostare i dati come URL o description per le varie lingue in cui è rilasciata l’app.

Esempio:

"locales": {
 "es": {
   "description": "¡Acción abierta emocionante del desarrollo del Web!",
   "developer": {
     "url": "http://es.mozillalabs.com/"
   }
 },
 "it": {
   "description": "Emozionati nello sviluppo libero del Web!",
   "developer": {
     "url": "http://it.mozillalabs.com/"
   }
 }
}

messages

Indica quali messaggi del sistema la vostra app può leggere per eseguire del codice specifico.

Esempio:

"messages": [
 { "telephony-new-call": "/dialer/index.html#keyboard-view" },
 { "bluetooth-dialer-command": "/dialer/index.html#keyboard-view" },
 { "headset-button": "/dialer/index.html#keyboard-view" },
 { "notification": "/dialer/index.html#keyboard-view" },
 { "alarm": "/facebook/fb_sync.html" }
]

Il campo messages così compilato permette, per esempio, di aprire la pagina /dialer/index.html all’ancora #keyboard-view quando l’evento telephony-new-call viene rilevato dal telefono.

name

Indovinate? Il nome della vostra app!

orientation

Questa proprietà imposta l’orientamento predefinito dell’applicazione, i due valori ammessi sono “landscape” e “portrait” (predefinito). Lasciatela vuota o addirittura non mettetela se non vi interessa.

origin

Indica un’URL che l’applicazione può utilizzare al posto dell’UUID, è raro utilizzare questo valore.

permissions

Proprietà chiave del manifest, permette di chiedere all’utente il permesso di utilizzare elementi specifici del telefono, come la geolocalizzazione, i contatti, …

Esempio:

"permissions": {
 "contacts": {
   "description": "Required for autocompletion in the share screen",
   "access": "readcreate"
   },
 "alarms": {
   "description": "Required to schedule notifications"
 }
}

In questo caso abbiamo richiesto due permessi: l’accesso all’elenco dei contatti in modalità lettura/creazione e la possibilità di usare la sveglia.

Inoltre bisogna fornire due ulteriori campi, un campo description in cui bisogna spiegare all’utente a cosa ci serve il permesso e un campo access opzionale in cui specificate il grado d’accesso. I valori possibili sono readonly, readwrite, readcreate e createonly.

redirects

Permette di impostare un redirect da un sito esterno, per esempio per ragioni di autenticazione.
Richiede un campo from di input e uno to di elaborazione.

type

Indica se la vostra app è web, privileged o certified. Le certified sono particolari e la loro certificazione avviene solo tramite il Firefox Marketplace o tramite il debug remoto.

version

Il numero di versione della vostra app sotto forma di stringa.

Github fornisce tramite GitHub Pages il mime type giusto per il file manifest. Alcuni sviluppatori distribuiscono le proprie applicazioni hosted da Github, il vantaggio è che sono sempre aggiornate e finché si tratta di applicazioni semplici in JavaScript è una buona soluzione di hosting. Vedi l’ultimo capitolo per approfondimenti.

Tipi di Applicazioni

Attualmente esistono due tipi di applicazioni Firefox OS che potete sviluppare: ospitate (hosted) e pacchettizzate (packaged) - forse in futuro saranno disponibili altri tipi di applicazioni (per esempio che consentiranno di personalizzare la tastiera o di creare altri servizi di sistema).

Nota del traduttore: è sempre difficile rendere alcuni termini tecnici in italiano, nel sito di Firefox Marketplace è stato scelto di tradurre le hosted app in app ospitate e le packaged app in app pacchettizzate. Ciò nonostante nel mondo degli sviluppatori italiani si usano i termini app hosted e app packaged. Nel proseguo del testo verranno utilizzati entrambi i termini a discrezione dei localizzatori.

App Hosted: Sono disponibili ad un indirizzo web come www.mozilla.org esattamente come i classici siti web. Questo significa che quando l’utente avvia un’applicazione hosted, il suo contenuto è caricato dal server remoto (o dalla cache, se disponibile).
App Packaged: Sono distribuite come file zip e vengono salvate nel dispositivo al momento della loro installazione. Quando l’utente avvia un’app pacchettizzata, i suoi contenuti sono caricati da un file zip nel dispositivo anziché da un server remoto.

Esistono vantaggi e svantaggi nell’utilizzo di entrambi i tipi. Da un lato le app hosted sono più facili da aggiornare, infatti è sufficiente cambiare i file sul server web. Però è più complicato implementare il loro funzionamento in modalità non in linea in quanto richiede l’utilizzo del tanto discusso file appcache. Inoltre, le hosted app hanno delle limitazioni nell’uso di alcune WebAPI e dunque non è possibile implementare tutte le funzioni che si possono utilizzare in un’app packaged.

Dall’altro lato tutti i file di un’app packaged sono memorizzati localmente sul dispositivo - ciò significa che sono sempre disponibili quando l’utente non è collegato (e quindi non sarà necessario utilizzare AppCache). Hanno anche la possibilità di accedere a WebAPI sensibili per la sicurezza che non sono disponibili per le app hosted. Il loro aggiornamento può essere problematico, perché sarà necessario caricare qualsiasi nuova versione su Firefox Marketplace - ciò significa far sostenere a ogni nuova versione dell’applicazione il processo di revisione che potrebbe richiedere un po’ di tempo.

Quando si sceglie quale tipo di applicazione realizzare è necessario fare delle valutazioni: se si dovranno utilizzare delle WebAPI avanzate sarà necessario orientarsi verso un’app packaged. Se l’app che si sta progettando può funzionare senza accedere a servizi di sistema avanzati o funzionalità del dispositivo oltre a quelle già disponibili in un browser web, sarà necessaria un’app hosted. In caso non si disponga di un server per la distribuzione utilizzare il tipo app packaged.

Sopra ho detto che utilizzare AppCache può essere complicato (ma talvolta è indispensabile per alcune app hosted). Niente paura, esistono degli strumenti per semplificare la generazione di file AppCache e facilitare il processo di distribuzione².

In questo testo vedremo come realizzare applicazioni packaged, in quanto questo ci permetterà di esplorare tutte le possibilità offerte dalle WebAPI. In ogni caso la maggior parte di ciò che vedremo sui file manifest si applica anche alle app hosted. Per ulteriori informazioni sulla distribuzione delle app hosted consultare la documentazione sulle app hosted nel Centro di sviluppo.

Ora che abbiamo trattato i due tipi di applicazioni supportate da Firefox OS, diamo un’occhiata ai diversi livelli di accesso che un’app può richiedere.

Livelli di accesso per la sicurezza

Esistono tre livelli di sicurezza su Firefox OS - ogni livello fornisce un maggiore accesso alle API rispetto a quello precedente.

Semplice (a.k.a. web): questo è il livello predefinito di tutte le applicazioni. Questo livello si applica alle app hosted e alle app packaged che non dichiarano una proprietà type nel loro file manifesto. Queste applicazioni hanno un accesso alle comuni API dei browser - ma non hanno un accesso ad alcuna delle WebAPI specifiche di Firefox OS.
Con privilegi: questo tipo di applicazioni ha accesso a tutte le API disponibili nel browser Firefox, oltre a quelli aggiuntivi, come i contatti e gli allarmi di sistema. Solo le packaged possono essere app con privilegi ed il pacchetto deve essere firmato digitalmente dal Marketplace Firefox.
Certificato: per motivi di sicurezza, questo livello è permesso per le app realizzate direttamente da Mozilla e dai suoi partner (per esempio i fornitori dell’hardware, le compagnie di telecomunicazione, ecc…). Le applicazioni certificate hanno un accesso a tutte le API, come l’API Telephony e altro ancora. Un esempio di applicazione certificata in Firefox OS è il telefono.

Durante lo sviluppo è possibile accedere alle API con privilegi senza richiedere permessi speciali a Mozilla. In fase di distribuzione, però, sarà necessario caricare l’app sul Firefox Marketplace. A questo punto il codice viene controllato in un rigoroso processo di approvazione e se è tutto corretto l’app sarà firmata digitalmente - questo garantirà agli utenti di Firefox OS che a questa applicazione è consentito accedere alle API sensibili.

Sulla pagina delle WebAPI sul Mozilla Developer Network è possibile verificare quali API sono implementate sui vari dispositivi e controllare il livello di accesso necessario per utilizzare ciascuna API.

Livello di accesso alle API

Come si può vedere dall’immagine qui sopra, qualsiasi applicazione può accedere alle API IndexedDB API e FileHandle API ma solamente le app con privilegi possono accedere ai Contacts API e Device Storage API.

WebAPI di Mozilla

Firefox OS fornisce le API necessarie per sviluppare applicazioni con le stesse funzionalità delle applicazioni native sulle altre piattaforme. L’accesso a questo hardware ed ai servizi avviene attraverso le WebAPI. Per saperne di più sulle API disponibili nelle varie versioni di Firefox OS consultare la pagina WebAPI nel Wiki Mozilla.

Analizzeremo alcuni esempi di codice per vedere come le API sono facili da utilizzare. Gli esempi non vanno presi come una documentazione completa sulle WebAPI, sono una piccola dimostrazione di come si possa accedere al dispositivo usando JavaScript.

Esempio #1: Effettuare chiamate

Si immagini di avere un’applicazione che ha bisogno di usare il dialer con un numero di telefono già pronto. È sufficiente utilizzare il seguente codice:

Invia un numero di telefono al dialer

1 var call = new MozActivity({
2   name: "dial",
3   data: {
4     number: "5555-9999"
5   }
6 });

Questo codice effettua una richiesta all’applicazione dialer per chiamare un numero predefinito. In realtà non partirà la chiamata, sarà necessario l’esplicita conferma dell’utente che dovrà toccare il tasto di chiamata per avviarla. La richiesta di un’azione esplicita dell’utente prima di avviare un’operazione è un modello molto comune: si tratta di un buon modello di sicurezza perché è richiesta un’esplicita conferma dell’utente prima di avviare un’operazione. Altre API possono effettuare chiamate senza una interazione dell’utente ma richiedono un livello d’accesso più elevato, infatti le applicazioni certificate possono effettuare chiamate senza interazione con l’utente. Le API usate nel codice sopra, chiamate “Web Activities”, sono disponibili per tutte le applicazioni.

Per maggiori informazioni sull’API Web Activities consultare questo post sul blog Mozilla.

Esempio #2: Memorizzare un contatto

Si immagini di avere una rete intranet aziendale e di voler sviluppare un’app per trasferire i contatti dalla rete intranet alla rubrica telefonica. È possibile farlo grazie alla Contacts API.

Salvare un contatto

 1 var contact = new mozContact();
 2 contact.init({name: "Odin"});
 3 
 4 var request = navigator.mozContacts.save(contact);
 5 request.onsuccess = function() {
 6   // contact saved successfully
 7 };
 8 request.onerror = function() {
 9   // there was an error while trying to save the contact
10 };

Questa API crea un oggetto con i dati del contatto e lo salva nella rubrica telefonica senza bisogno di alcuna interazione da parte dell’utente. Poiché l’accesso ai contatti comporta implicazioni riguardo la privacy, questa API è disponibile per le app con privilegi. Il modello di questa API prevede l’utilizzo di due callback ed è un approccio condiviso da molte altre API. Forniamo quindi due funzioni, success in caso di buona riuscita dell’operazione e error in caso contrario. Queste callback vengono eseguite una solta volta durante o dopo l’azione principale (in questo caso al salvataggio di un contatto).

Per ulteriori informazioni su questa API consultare la pagina dedicata alle Contacts API sul wiki Mozilla.

Esempio #3: Selezionare una immagine dalla fotocamera

Si immagini di voler creare un’app che applichi delle decorazioni alle immagini, come una cornice o dei baffi. Sarà quindi necessario utilizzare un pulsante che permetta di scattare una foto con la fotocamera o scegliere l’immagine da una galleria.

Scegliere una foto

 1 var getphoto = new MozActivity({
 2   name: "pick",
 3   data: {
 4     type: ["image/png", "image/jpg", "image/jpeg"]
 5   }
 6 });
 7 
 8 getphoto.onsuccess = function () {
 9   var img = document.createElement("img");
10   if (this.result.blob.type.indexOf("image") != -1) {
11     img.src = window.URL.createObjectURL(this.result.blob);
12   }
13 };
14 
15 getphoto.onerror = function () { 
16 	// erro!
17 };

Questo è un altro esempio di WebActivity. Le funzioni (activity) dell’API WebActivities sono disponibili per tutte le applicazioni. In questo esempio specifico stiamo usando la pick activity passando il MIME Types dei file richiesti. Quando questo codice è eseguito, il sistema mostra una schermata all’utente chiedendo se vuole selezionare l’immagine da camera, galleria o sfondi. Se l’utente seleziona una immagine, la callback di successo viene invocata. Se l’utente annulla l’operazione, la callback di errore è eseguita. Nell’immagine sottostante, possiamo vedere la finestra di richiesta sul dispositivo:

Esempio di pick activity

Riassunto

In questo capitolo abbiamo visto che rispetto alle pagine web classiche, entrambi i tipi di applicazione per Firefox OS (hosted e packaged) si basano su un file manifest. Abbiamo visto anche che dal punto di vista della sicurezza le applicazioni packaged possono essere con privilegi o certificate. Solo le app privilegiate e certificate possono accedere alle WebAPI specifiche di Firefox OS. Le WebAPI non sono disponibili per le applicazioni hosted o le pagine web classiche.

Adesso è giunta l’ora di sporcarsi le mani e creare un’applicazione.

Questa applicazione di esempio per Firefox OS è disponibile su Firefox Marketplace e il codice sorgente è su GitHub.↩
Esistono molti strumenti utili, come Grunt, Volo, Yeoman, Bower. Questi strumenti sono molto spesso equivalenti nel risultato ed è una questione di preferenza. (Mi piace Volo rispetto a Grunt perché i Volofiles sono più semplici da leggere).↩

La prima app

Memos, un blocco note minimale

In questo capitolo vedremo come realizzare un semplice Notepad, cioè un’applicazione per prendere appunti. Prima di concentrarci sul codice cerchiamo di studiare il funzionamento di questa applicazione.

La nostra idea è di avere di tre schermate. La prima è la schermata principale, la prima che l’utente vedrà, in cui presentiamo l’elenco delle note già salvate. Se si fa clic su una nota (o se ne viene aggiunta una) viene aperta la schermata con i dettagli, nella quale è possibile modificare il titolo ed il testo della nota scelta. Ecco come vorremmo che si presentassero.

Memos, schermata di modifica

Dalla parte inferiore dello schermo è possibile cancellare una nota prescelta se si fa clic sul Cestino. Questa azione aprirà una finestra di conferma.

Memos, finestra di conferma della cancellazione

Il codice sorgente di Memos è disponibile nel Repository su Github (è possibile anche scaricarlo come file .zip). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un’altra copia del codice sorgente è disponibile nella cartella code della repository Github di questo libro.

Memos utilizza [IndexedDB][4] per salvare le note e il toolkit [Gaia Building Blocks][5] per creare le interfacce. In un futuro aggiornamento il testo conterrà molte informazioni su Gaia Building Blocks, ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull’argomento e per sapere quali interfacce vi sono integrate visitare i link appena segnalati.

Il primo passaggio è creare una cartella per l’applicazione di nome memos.

Creare il manifesto dell’app

Il file manifesto di Memos è molto semplice. Crea un file chiamato manifest.webapp nella cartella memos. I manifesti sono dei file in formato [JSON][6] che descrivono un’applicazione per Firefox OS di cui abbiamo già parlato nel precedente capitolo.

Qui di seguito è riportato il contenuto del file manifesto di Memos. Fate attenzione con il copia e incolla, perché è molto facile mettere una virgola nel posto sbagliato (o non metterla) e creare un file JSON non valido. Esistono molti strumenti per validare un file JSON, incluso uno specifico per validare i file manifesto delle app, lo puoi trovare online su [il marketplace][7]. Per ulteriori informazioni su questi file consultare la [pagina su MDN][8].

Memos manifest (manifest.webapp)

 1 {
 2   "name": "Memos",
 3   "version": "1.1",
 4   "description": "A simple memo taking app",
 5   "launch_path": "/index.html",
 6   "permissions": {
 7     "storage": {
 8       "description": "Required for storing and retrieving notes."
 9       }
10   },
11   "developer": {
12     "name": "Andre Garzia",
13     "url": "http://andregarzia.com"
14   },
15   "icons": {
16     "60": "/style/icons/icon_60.png",
17     "128": "/style/icons/icon_128.png"
18   }
19 }

Analizziamo i campi di questo file manifesto:

Campi	Descrizione
name	Il nome dell’applicazione
version	La versione attuale dell’applicazione
launch_path	Il file utilizzato per avviare un’applicazione
permissions	I permessi delle API utilizzate, con molte informazioni
developer	I contatti dello sviluppatore
icons	L’icona utilizzata in diversi formati

La parte più interessante di questo file manifesto è la richiesta per i permessi di storage per poter utilizzare IndexedDB senza alcun limite di spazio disco¹(con questi permessi possiamo salvare le note che vogliamo - anche se dobbiamo fare attenzione a non usare troppo spazio sul disco dell’utente!).

Ora che il file manifesto è pronto, passiamo al codice HTML.

Scriviamo il codice HTML

Prima di iniziare a lavorare sul codice HTML facciamo una breve panoramica su Gaia Building Blocks, una raccolta di codici CSS e JavaScript che rispettano il layout degli elementi d’interfaccia nativi di Firefox OS e che possiamo riutilizzare per creare l’interfaccia della nostra applicazione.

Come nelle pagine web, non è richiesto l’uso del look and feel di Firefox OS nella propria applicazione. Utilizzare o meno Gaia Building Blocks è una scelta personale - e le buone applicazioni dovrebbero sapersi distinguere per uno stile e un’esperienza utente proprie. La cosa importante da capire è che un’applicazione non subirà alcun tipo di pregiudizio o penalità su Firefox Marketplace se non utilizza lo stile di Gaia. Personalmente, non essendo un bravo designer, preferisco ricorrere a degli UI toolkit già pronti piuttosto che creare uno stile personale per le app.

La struttura HTML che utilizzeremo per questa applicazione seguirà gli schemi adottati da Gaia Building Blocks in cui ogni schermata è racchiusa in un tag <section> e gli elementi seguono un formato predefinito. Se non si è ancora scaricato il codice sorgente dal repository memos, è importante farlo quanto prima poiché contiene i file necessari, inclusi quelli del toolkit Gaia Building Blocks. Per coloro che dovessero avere poca confidenza con git e Github, i file sono disponibili anche come file .zip.

Attenzione: la versione di Gaia Building Blocks che ho utilizzato non è la più recente. Purtroppo, ho dovuto fare questa scelta perché l’applicazione Memos non era compatibile con l’ultima versione di Gaia Building Blocks. Nei propri progetti è sempre meglio utilizzare l’ultima versione disponibile del toolkit.

Includere Gaia Building Blocks

Prima di qualsiasi altra cosa copiare le cartelle shared e styles incluse nel repository che è stato scaricato, nella cartella memos creata in precedenza. Questo consentirà l’utilizzo del toolkit Gaia Building Blocks nelle proprie applicazioni.

Iniziamo con l’inserimento del codice necessario nel file index.html.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="/style/base.css" />
   <link rel="stylesheet" type="text/css" href="/style/ui.css" />
   <link rel="stylesheet" type="text/css" href="/style/building_blocks.css" />
   <link rel="stylesheet" type="text/css" href="shared/style/headers.css" />
   <link rel="stylesheet" type="text/css" href="shared/style_unstable/lists.css\
" />
   <link rel="stylesheet" type="text/css" href="shared/style_unstable/toolbars.\
css" />
   <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css" />
   <link rel="stylesheet" type="text/css" href="shared/style/confirm.css" />
   <title>Memos</title>
</head>

La prima riga dichiara che il documento utilizza il formato HTML5. Dalla linea 5 alla 15 vengono inclusi i file CSS dei vari componenti da usare nell’app: testata, liste, campi testuali, ecc…

Costruiamo la schermata principale

Adesso che abbiamo incluso i riferimenti a Gaia Building Blocks possiamo sfruttare il lavoro di Mozilla per creare un’applicazione a 5 stelle.

Iniziamo a costruire le varie schermate. Come abbiamo detto prima, ogni schermata è racchiusa in una <section> all’interno del corpo (il tag <body>) del documento HTML. All’elemento <body> assegnamo un attributo role il cui valore deve essere application, in questo modo quando l’app verrà lanciata verranno utilizzati i fogli di stile di Gaia Building Blocks per definire l’aspetto dell’interfaccia. Scriviamo quindi <body role="application">. Adesso creiamo la prima schermata, quindi la prima <section>, dichiariamo il tag body come abbiamo detto prima.

<body role="application">

<section role="region" id="memo-list">
   <header>
       <menu type="toolbar">
           <a id="new-memo" href="#"><span class="icon icon-add">add</span></a>
       </menu>
       <h1>Memos</h1>
   </header>
   <article id="memoList" data-type="list"></article>
</section>

Nella schermata abbiamo incluso un <header> in cui mettiamo un pulsante che permette di aggiungere nuove note ed il nome dell’applicazione stessa. La schermata include un tag <article> che è utilizzato per mostrare il contenuto della nota. Useremo il pulsante e l’ID dell’articolo per catturare gli eventi nella parte JavaScript.

Sottolineo il fatto che ogni schermata è un semplice blocco di codice HTML. Costruire queste schermate utilizzando diversi linguaggi su altri sistemi richiede molto lavoro. Tutto quello che faremo è dare ad ogni contenitore un ID specifico che richiameremo successivamente.

Gli ID sono differenti dalle classi perchè devono essere univoci e vengono usati principalmente per JavaScript. Le classi non hanno questa limitazioni e sono pensate per i CSS. Possono essere usate anche al contrario ma hanno altre differenze che non approfondiremo in questo libro.

La prima schermata è completa adesso vediamo la schermata di modifica.

Costruire la schermata di modifica

La schermata di modifica è un po’ complessa perché contiene la finestra di dialogo di eliminazione delle note.

<section role="region" id="memo-detail" class="skin-dark hidden">
   <header>
       <button id="back-to-list"><span class="icon icon-back">back</span>
       </button>
       <menu type="toolbar">
           <a id="share-memo" href="#"><span class="icon icon-share">share</spa\
n>
           </a>
       </menu>
       <form action="#">
           <input id="memo-title" placeholder="Memo Title" required="required" \
type="text">
           <button type="reset">Remove text</button>
       </form>
   </header>
   <p id="memo-area">
       <textarea placeholder="Memo content" id="memo-content"></textarea>
   </p>
   <div role="toolbar">
       <ul>
           <li>
               <button id="delete-memo" class="icon-delete">Delete</button>
           </li>
       </ul>
   </div>
   <form id="delete-memo-dialog" role="dialog" data-type="confirm" class="hidde\
n">
       <section>
           <h1>Confirmation</h1>
           <p>Are you sure you want to delete this memo?</p>
       </section>
       <menu>
           <button id="cancel-delete-action">Cancel</button>
           <button id="confirm-delete-action" class="danger">Delete</button>
       </menu>
   </form>
</section>

Nella parte superiore dello schermo, rappresentata dall’elemento <header> si trovano:

un pulsante per ritornare alla schermata principale
un campo di testo per modificare il titolo della nota
un pulsante per condividere la nota via email

Sotto questa parte è presente il testo della nota racchiuso dal tag <textarea> , ancora più sotto c’è una seconda barra con il pulsante per cancellare la nota attuale.

Questi tre elementi e il loro contenuto rappresentano la schermata di modifica. Successivamente abbiamo un elemento <form> che verrà utilizzato per mostrare la finestra di conferma di cancellazione della nota. Questa finestra è molto semplice, contiene del testo e due pulsanti, uno per cancellare la nota ed uno per annullare l’azione.

A questo punto chiudiamo il tag <section> avendo tutte le schermate necessarie, il codice HTML rimanente serve per includere i file JavaScript e completare il documento HTML con tutti i tag di chiusura.

<script src="/js/model.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

Manipoliamo il codice JavaScript

Adesso ci divertiremo a dare vita alla nostra applicazione utilizzando JavaScript. Per organizzare meglio questo codice ho scelto di suddividerlo in due file:

model.js: contiene le routine per salvare e recuperare le note dalla memoria del dispositivo, ma non la struttura logica, la gestione dei click sugli elementi dell’interfaccia e la gestione dell’input utente, questi sono nel secondo file, in questo modo abbiamo scritto del codice modulare. In teoria potremmo riutilizzare questo file in altre applicazioni che creano e gesticono note per l’utente.
app.js: collega gli eventi dell’interfaccia agli elementi HTML e contiene la struttura logica dell’applicazione.

Entrambi i file devono essere posizionati nella cartella js che troviamo accanto alle cartelle style e shared.

model.js

Utilizzeremo IndexedDB per salvare le note nel dispositivo. Avendo chiesto i permessi storage nel file manifesto possiamo salvare quante note vogliamo - però non dobbiamo abusarne!

Infatti i dispositivi Firefox OS solitamente non hanno molta memoria da dedicare alle app e il loro contenuto (le note nel nostro caso) ed è sempre meglio essere consapevoli di quali dati vengono memorizzati, inoltre gli utenti daranno un voto negativo a un’applicazione se consumerà troppa memoria senza motivo. Memorizzare troppo materiale porta a problemi di prestazioni e l’app risulterà lenta e poco reattiva. Al momento del caricamento su Firefox Marketplace, sarà necessario indicare nel modulo diretto ai revisori il motivo per cui l’app necessita di accesso illimitato alla memoria per il suo funzionamento, se non lo segnalate vi verrà esplicitamente richiesto dai revisori. Nel caso non siate in grado di giustificare tale richiesta, i revisori respingeranno l’app, che quindi non verrà pubblicata sul portale.

La parte di codice in model.js che mostriamo qui sotto si occupa del collegamento e della creazione dello storage.

Importante: Questo codice è scritto per essere capito velocemente e non per illustrare le migliori tecniche di programmazione JavaScript. Nel codice sono presenti delle variabili globali (andrò all’inferno per questo, lo so) tra le altre chicche. La gestione degli errori è praticamente inesistente. Lo scopo principale di questo testo è insegnare il workflow di sviluppo di applicazioni per Firefox OS e non i migliori pattern JS, quindi a seconda dei commenti migliorerò il codice, sempre che non abbia un brutto impatto sui principianti.

var dbName = "memos";
var dbVersion = 1;

var db;
var request = indexedDB.open(dbName, dbVersion);

request.onerror = function (event) {
   console.error("Can't open indexedDB!!!", event);
};
request.onsuccess = function (event) {
   console.log("Database opened ok");
   db = event.target.result;
};

request.onupgradeneeded = function (event) {

   console.log("Running onUpgradeNeeded");

   db = event.target.result;

   if (!db.objectStoreNames.contains("memos")) {

       console.log("Creating objectStore for memos");

       var objectStore = db.createObjectStore("memos", {
           keyPath: "id",
           autoIncrement: true
       });
       objectStore.createIndex("title", "title", {
           unique: false
       });

       console.log("Adding sample memo");
       var sampleMemo1 = new Memo();
       sampleMemo1.title = "Welcome Memo";
       sampleMemo1.content = "This is a note taking app. Use the plus sign in t\
he topleft corner of the main screen to add a new memo. Click a memo to edit it.\
All your changes are automatically saved.";

       objectStore.add(sampleMemo1);
   }
}

Importante: chiedo ancora perdono per aver utilizzato delle variabili globali, questo è solo del materiale utile all’insegnamento. Inoltre ho rimosso i commenti dal codice per risparmiare spazio nel testo. Su Github il codice è completo di commenti.

Il codice appena visto crea un oggetto db ed un oggetto request. L’oggetto db è utilizzato in altre funzioni per manipolare le note memorizzate.

Nell’implementazione della funzione request.onupgradeneeded creiamo una nota di benvenuto. Questa funzione è eseguita quando l’applicazione viene lanciata per la prima volta (o quando la versione del database cambia). In questo modo, al primo avvio dell’applicazione, il database conterrà una nota di esempio.

Una volta aperta la connessione al database e inizializzato il meccanismo di archiviazione, è ora di creare le funzioni basilari per manipolare le note.

function Memo() {
   this.title = "Untitled Memo";
   this.content = "";
   this.created = Date.now();
   this.modified = Date.now();
}

function listAllMemoTitles(inCallback) {
   var objectStore = db.transaction("memos").objectStore("memos");
   console.log("Listing memos...");

   objectStore.openCursor().onsuccess = function (event) {
       var cursor = event.target.result;
       if (cursor) {
           console.log("Found memo #" + cursor.value.id + " - " + cursor.value.\
title);
           inCallback(null, cursor.value);
           cursor.continue();
       }
   };
}

function saveMemo(inMemo, inCallback) {
   var transaction = db.transaction(["memos"], "readwrite");
   console.log("Saving memo");

   transaction.oncomplete = function (event) {
       console.log("All done");
   };

   transaction.onerror = function (event) {
       console.error("Error saving memo:", event);
       inCallback({
           error: event
       }, null);

   };

   var objectStore = transaction.objectStore("memos");

   inMemo.modified = Date.now();

   var request = objectStore.put(inMemo);
   request.onsuccess = function (event) {
       console.log("Memo saved with id: " + request.result);
       inCallback(null, request.result);

   };
}

function deleteMemo(inId, inCallback) {
   console.log("Deleting memo...");
   var request = db.transaction(["memos"], "readwrite").objectStore("memos").de\
lete(inId);

   request.onsuccess = function (event) {
       console.log("Memo deleted!");
       inCallback();
   };
}

In questo blocco di codice abbiamo creato un costruttore che produce nuove note con alcuni campi già inizializzati. Dopodiché abbiamo implementato le altre funzioni per la presentazione, il salvataggio e la cancellazione delle note. Molte di queste funzioni richiedono che sia passato un parametro chiamato inCallback. Questo parametro è esso stesso una funzione che verrà invocata al termine della funzione chiamante. Questo è necessario per la natura asincrona di IndexedDB. Tutte le callback hanno la medesima struttura di chiamata callback(error, value), con due parametri in ingresso, in cui uno dei due assumerà il valore null a seconda del risultato della funzione chiamante.

Poiché è un testo per principianti ho scelto di non usare le Promises perché non tutti potrebbero capirle. Consiglio di usare questi concetti per avere un codice più pulito e facile da mantenere.

Ora che l’archiviazione delle note e le funzioni di modifica sono state implementate, lavoriamo alla struttura logica dell’applicazione nel file app.js.

app.js

Questo file contiene la logica dell’applicazione. Il codice sorgente è troppo lungo da mostrare in una volta sola, quindi verrà diviso in parti per studiarlo meglio.

var listView, detailView, currentMemo, deleteMemoDialog;

function showMemoDetail(inMemo) {
   currentMemo = inMemo;
   displayMemo();
   listView.classList.add("hidden");
   detailView.classList.remove("hidden");
}


function displayMemo() {
   document.getElementById("memo-title").value = currentMemo.title;
   document.getElementById("memo-content").value = currentMemo.content;
}

function shareMemo() {
   var shareActivity = new MozActivity({
       name: "new",
       data: {
           type: "mail",
           body: currentMemo.content,
           url: "mailto:?body=" + encodeURIComponent(currentMemo.content) + "&s\
ubject=" + encodeURIComponent(currentMemo.title)

       }
   });
   shareActivity.onerror = function (e) {
       console.log("can't share memo", e);
   };
}

function textChanged(e) {
   currentMemo.title = document.getElementById("memo-title").value;
   currentMemo.content = document.getElementById("memo-content").value;
   saveMemo(currentMemo, function (err, succ) {
       console.log("save memo callback ", err, succ);
       if (!err) {
           currentMemo.id = succ;
       }
   });
}

function newMemo() {
   var theMemo = new Memo();
   showMemoDetail(theMemo);
}

All’inizio vengono dichiarate alcune variabili globali (bleah :-P!) per mantenere dei riferimenti a elementi nel DOM che saranno utilizzati in alcune funzioni. La variabile globale di maggiore interesse è currentMemo, l’oggetto di riferimento per la nota che l’utente sta visualizzando.

Le funzioni showMemoDetail() e displayMemo() lavorano in coppia. La prima carica la nota selezionata in currentMemo e modifica il CSS degli elementi mostrati nella schermata di modifica. La seconda prende il contenuto della variabile currentMemo e mostra la nota a schermo. Potremmo mettere il codice nella stessa funzione ma averlo separato permette di divertirci di più con nuove implementazioni.

La funzione shareMemo() utilizza una WebActivity per aprire il programma predefinito per la posta elettronica con il contenuto della nota selezionata.

La funzione textChanged() prende il contenuto dei campi e lo inserisce nell’oggetto currentMemo che salva la nota. Questo perché avremo un’applicazione con auto-salvataggio. Tutte le modifiche al contenuto o al titolo invocheranno la funzione che salverà in IndexedDB.

La funzione newMemo() crea una nuova nota e apre la schermata di modifica con la nuova nota creata.

function requestDeleteConfirmation() {
   deleteMemoDialog.classList.remove("hidden");
}

function closeDeleteMemoDialog() {
   deleteMemoDialog.classList.add("hidden");
}

function deleteCurrentMemo() {
   closeDeleteMemoDialog();
   deleteMemo(currentMemo.id, function (err, succ) {
       console.log("callback from delete", err, succ);
       if (!err) {
           showMemoList();
       }
   });
}

function showMemoList() {
   currentMemo = null;
   refreshMemoList();
   listView.classList.remove("hidden");
   detailView.classList.add("hidden");
}

La funzione requestDeleteConfirmation() mostra la richiesta di conferma di cancellazione della nota.

Le funzioni closeDeleteMemoDialog() e deleteCurrentMemo() sono invocate dai pulsanti nella finestra di conferma.

La funzione showMemoList() effettua una pulizia e mostra l’elenco delle note presenti. Per esempio, svuota il contenuto di currentMemo se non stiamo leggendo una nota.

function refreshMemoList() {
   if (!db) {
       // HACK:
       // this condition may happen upon first time use when the
       // indexDB storage is under creation and refreshMemoList()
       // is called. Simply waiting for a bit longer before trying again
       // will make it work.
       console.warn("Database is not ready yet");
       setTimeout(refreshMemoList, 1000);
       return;
   }
   console.log("Refreshing memo list");

   var memoListContainer = document.getElementById("memoList");


   while (memoListContainer.hasChildNodes()) {
       memoListContainer.removeChild(memoListContainer.lastChild);
   }

   var memoList = document.createElement("ul");
   memoListContainer.appendChild(memoList);

   listAllMemoTitles(function (err, value) {
       var memoItem = document.createElement("li");
       var memoP = document.createElement("p");
       var memoTitle = document.createTextNode(value.title);

       memoItem.addEventListener("click", function (e) {
           console.log("clicked memo #" + value.id);
           showMemoDetail(value);

       });

       memoP.appendChild(memoTitle);
       memoItem.appendChild(memoP);
       memoList.appendChild(memoItem);


   });
}

La funzione refreshMemoList() modifica il DOM della nostra applicazione aggiornando l’elenco delle note. Sarebbe più facile usare alcuni sistemi di templating come [handlebars][14] o [underscore][15] ma quest’applicazione contiene solo vanilla javascript quindi faremo tutto a mano.

Queste sono le funzioni utilizzate dall’applicazione. Le uniche che mancano sono il gestore eventi e la chiamata iniziale di refreshMemoList().

window.onload = function () {
   // elements that we're going to reuse in the code
   listView = document.getElementById("memo-list");
   detailView = document.getElementById("memo-detail");
   deleteMemoDialog = document.getElementById("delete-memo-dialog");

   // All the listeners for the interface buttons and for the input changes
   document.getElementById("back-to-list").addEventListener("click", showMemoLi\
st);
   document.getElementById("new-memo").addEventListener("click", newMemo);
   document.getElementById("share-memo").addEventListener("click", shareMemo);
   document.getElementById("delete-memo").addEventListener("click", requestDele\
teConfirmation);
   document.getElementById("confirm-delete-action").addEventListener("click", d\
eleteCurrentMemo);
   document.getElementById("cancel-delete-action").addEventListener("click", cl\
oseDeleteMemoDialog);
   document.getElementById("memo-content").addEventListener("input", textChange\
d);
   document.getElementById("memo-title").addEventListener("input", textChanged);

   // the entry point for the app is the following command
   refreshMemoList();

};

Ora che tutti i file sono pronti proviamo l’applicazione nel simulatore.

Provare l’applicazione col simulatore

Prima di avviare l’applicazione nel simulatore è preferibile verificare che tutti i file siano al posto giusto altrimenti l’applicazione non funzionerà. Ecco quale dovrebbe essere il contenuto della cartella memos:

Lista dei file utilizzati da Memos

Se si ha il vago sospetto di aver commesso qualche errore è possibile verificarlo confrontando il repository memos su github (un’ulteriore copia del codice sorgente è disponibile nella cartella code nel repo del testo).

Tutto a posto? Bene, cominciamo.

Per aprire la Dashboard del Simulatore fare clic nel menu Sviluppo -> WebIde.

Apertura della Dashboard del simulatore

Fai clic sul pulsante Apri app, seleziona Apri app pacchettizzata e seleziona la cartella contenente il file manifesto dell’applicazione Memos for Firefox Os.

Aggiunta di una nuova applicazione

Se tutto funziona come previsto Memos verrà aggiunta ai progetti del WebIde.

Memos mostrata nella Dashboard

Una volta aggiunta l’applicazione scegliamo la versione del simulatore che vogliamo usare e avviamola. Una volta avviato possiamo installare Memos premendo il bottone triangolare e sul simulatore verrà avviata la nostra app.

Il bottone triangolare da premere

A questo punto è possibile provare tutte le funzionalità di Memos.

Memos installato nel Simulatore

Congratulazioni! Abbiamo creato e provato la nostra prima applicazione. Non è un’applicazione complessa o rivoluzionaria - ma spero sia utile per capire il workflow di sviluppo di Firefox OS. Chi ha già visto e lavorato con il web ha di sicuro potuto notare che non è molto diverso dallo sviluppo web classico.

Sottolineiamo che ogni volta che viene modificato il codice sorgente è necessario premere il pulsante Aggiorna per aggiornare il contenuto dell’applicazione presente nel simulatore.

Riassunto

In questo capitolo abbiamo creato la nostra prima applicazione per Firefox OS e l’abbiamo lanciata nel simulatore. Nel prossimo capitolo vedremo uno strumento molto utile chiamato Boilerplate, un insieme di esempi che rispondono ad esigenze basilari di un’applicazione, come selezionare un contatto dalla rubrica, far vibrare il telefono o controllare la carica della batteria, tutto questo è documentato con codice già pronto e adatto ad ogni evenienza.

Firefox OS Boilerplate App

Il boilerplate di cui abbiamo letto in precedenza è un’applicazione dimostrativa con molti esempi basilari. Contiene un esempio per la maggior parte delle Web Activity, la questione multilingua, installazione dell’applicazione, API HTML5 e l’interfaccia grafica di Gaia realizzata con Gaia Building Blocks.
La parte interessante è che si trova su Github, quindi c’è anche una demo sempre aggiornata che puoi trovare online.

Puoi provare il boilerplate nel tuo browser preferito ma se usi Chrome vedrai che nella console apparirà Open Web Apps not supported che vuol dire che non supporta questo standard proposto da Mozilla.

Lo standard “Open Web App” consiste in un accesso hardware, installazione locale, storage offline, marketplace, API per i pagamenti e le ricevute, Persona per i login e il famoso manifest. Questo insieme di caratteristiche ed il manifesto di Mozilla formano le Open Web Apps!
Noi sviluppatori web speriamo che le Open Web Apps vengano supportate da altri browser e sistemi operativi in modo da semplificare il lavoro per noi e per una migliore esperienza utente.
Dopo questo messaggio pubblicitario riprendiamo il discorso!
I prodotti di Mozilla che utilizzano Gecko supportano le Open Web Apps e in Firefox OS vediamo l’apice delle loro potenzialità. Firefox sia per Android che desktop le supporta quindi collegandosi al marketplace si possono installare le applicazioni pensate per queste interfacce (se specificate nel marketplace).

Il boilerplate è un esempio per le Open Web Apps (template) più il supporto proprietario (al momento!) per Firefox OS.

Le API pensate ed integrate in Firefox OS sono proposte al W3C per una loro standardizzazione (come l’API per la batteria o la vibrazione che sono uno standard). Questo per ricordare che Mozilla lavora per la standardizzazione delle sue idee e non ha interesse a chiudersi.

Il boilerplate è diviso in tre sezioni ma io ne aggiungo una quarta per gli altri dettagli.

I dettagli che fanno la differenza

Incominciamo da questi dettagli:

AppCache
Offline
Installare l’applicazione
Multilingua
Grafica di Gaia

Alcune di queste cose le abbiamo viste o le vedremo in questa fantastica guida.

Offline

Con Offline mi riferisco a del codice che permette di sapere se il dispositivo è connesso sfruttando l’oggetto window.navigator.connection che è descritto sulla pagina MDN dedicata con i dettagli tecnici e il supporto crossbrowser.

Il codice è presente in due versioni:

Uno dei tanti pulsanti che usa l’API diretta fornisce due informazioni: la banda disponibile in MB (0 se è offline, infinity se sconosciuta o solitamente la linea fissa) e se la connessione è a consumo.
Con AppCache per sapere se si utilizza l’applicazione in modalità offline, nel boilerplate è utilizzato per mostrare il pallino verde se si è online.

Vediamo quindi questi due codici:

var connection = window.navigator.mozConnection,
online = "<strong>Connected:</strong> " + (connection.bandwidth),
metered = "<strong>Metered:</strong> " + connection.metered;

var appCache = window.applicationCache;
appCache.onerror = function() {
     displayStatus.className = "offline";
     displayStatus.title = "Offline";
};

Installare l’applicazione

Installazione dell’applicazione vuol dire utilizzare le Open Web Apps. Vediamo come funziona il codice di installazione e di verifica installazione. Prima di tutto verifichiamo se il sistema le supporta (con navigator.mozApps) dopo di che inseriamo delle callback di successo o fallimento dell’installazione.

if (navigator.mozApps) {
   var checkIfInstalled = navigator.mozApps.getSelf();
   checkIfInstalled.onsuccess = function () {
       if (checkIfInstalled.result) {
           // Already installed
           var installationInstructions = document.querySelector("#installation\
-instructions");
           if (installationInstructions) {
               installationInstructions.style.display = "none";
           }
       }
       else {
           var install = document.querySelector("#install"),
               manifestURL = location.href.substring(0, location.href.lastIndex\
Of("/")) + "/manifest.webapp";
           install.className = "show-install";
           install.onclick = function () {
               var installApp = navigator.mozApps.install(manifestURL);
               installApp.onsuccess = function() {
                   install.style.display = "none";
               };
               installApp.onerror = function() {
                   alert("Install failed\\n\\n:" + installApp.error.name);
               };
           };
       }
   };
} else {
   console.log("Open Web Apps not supported");
}

Come si può vedere il codice è molto semplice, si dà l’indirizzo del file manifest e si verifica se è stato installato. Per installare il boilerplate fate click sul simbolo ‘+’ in alto a destra.
Questo codice eseguito su Firefox OS, Firefox for Android e Firefox desktop aprirà una finestra modale nativa per chiedere se installare l’applicazione.

WebActivity

Finalmente parliamo di una delle grandi novità per gli sviluppatori web! Finalmente potremo accedere al sistema in modo più profondo! Ho già detto finalmente?
Scherzi a parte, in questa sezione possiamo accedere ad alcune delle azioni del sistema come fare una telefonata o scattare una foto. Queste WebActivity purtroppo sono solo per Firefox OS e quindi il testing è solo con simulatore ma c’è chi sta lavorando ad una polyfill per supportare le web activity anche da browser (dove possibile).

Non vedremo il codice nel dettaglio delle varie WebActivity, quindi rimando al file webapp.js, ma per completezza ecco alcune rese disponibili da Firefox OS:

Cercare file
Scattare una foto
Registrare un video
Avviare una telefonata
Mandare un SMS
Aggiungere un contatto
Modificare un contatto
Condividere un sito
Condividere una foto sui social network
Condividere una foto via mail
Aprire un sito
Scrivere un’email (con l’applicazione di sistema)
Salvare un segnalibro
Aprire un video
Modificare le impostazioni del telefono

Praticamente vi stiamo dicendo di non pensare a come implementare tutte queste funzionalità dalla vostra app. Se volete ve le diamo noi già pronte.

Naturalmente l’importanza di questa idea non è limitata alle precedenti opzioni e basta, potete registrare la vostra WebActivity personalizzata nella vostra app per fare più o meno quello che vi pare, dal selezionare foto di gattini a prendere i contatti da una rubrica segreta o rendere disponibile un lettore di codici a barre.

La lista completa delle WebActivity disponibili su Firefox OS la trovi online.

WebAPI

Questa sezione del boilerplate contiene sia esempi esclusivi per Firefox OS ma anche alcuni esempi di tecnologie HTML5 di recente standardizzazione. Tra questi abbiamo le notifiche di sistema, il blocco della rotazione o dello spegnimento dello schermo che sono solo per Firefox OS mentre vibrazione, verifica della connessione (ne abbiamo parlato prima), geolocalizzazione, quantità di luce ambientale, prossimità dell’utente allo schermo, accesso alla batteria sono invece API standard e quindi disponibili a chiunque abbia un browser moderno.

API Privilegiate

Queste API sono particolari e sono disponibili solo per le app privilegiate e sono quasi tutte standard HTML5.

Tra gli esempi disponibili abbiamo: verificare se l’applicazione è in primo piano, accedere alle immagini sul dispositivo, effettuare una richiesta ad un server e prendere i contatti dal telefono. Questi esempi sono uno standard HTML5 mentre selezionare i contatti e fare richieste XHR CrossDomain sono una peculiarità di Firefox OS.

Multilingua

Nel Boilerplate appena visto è utilizzata una libreria JavaScript chiamata webL10n. Questa libreria è presente in Gaia ma si tratta di una versione modificata (questa è la versione presente nel boilerplate).

Grazie a webL10n il sito riconosce in automatico la lingua utilizzata dal dispositivo e carica le traduzioni appropriate.

Al caricamento del file JavaScript della libreria viene caricato il file locales.ini che contiene i riferimenti alle varie lingue disponibili dell’applicazione. Dopodiché se c’è la lingua utilizzata dal sistema provvede a sostituire i testi che gli abbiamo indicato alla creazione dell’app, se la lingua non è presente viene lasciata la versione base (dobbiamo indicarla noi).

Diamo un’occhiata al codice prima di vedere come avviene la magia della localizzazione.

1 <link rel="resource" type="application/l10n" href="locales/locales.ini" />
2 <script type="application/javascript" src="js/l10n.js"></script>

Con questo codice il boilerplate carica i file della lingua… ma come sa dove agire per cambiare il testo? La libreria si basa sugli attributi data-l10n-id che mettiamo agli elementi di cui vogliamo la traduzione che deve contenere il nome di riferimento della stringa da mostrare.

Ecco un esempio per chiarire le idee.

<html>
<head>
 <script type="text/javascript" src="l10n.js"></script>
 <link rel="prefetch" type="application/l10n" href="locales.ini" />
</head>
<body>
 <button data-l10n-id="test" title="click me!">This is a test</button>
</body>
</html>

Il bottone ha una proprietà data-l10n-id con attributo test, questo vuol dire che se nel file locales.ini esiste una riga di testo simile a questa

[it]
test = Questo è un test
test.title = Cliccami!

Il testo all’interno del bottone verrà sostituito dal testo Questo è un test nel caso io chieda la lingua italiana. Esistono anche librerie più avanzate realizzate sempre da Mozilla come l20n che ha più funzionalità rispetto a quella contenuta nel boilerplate.

File della lingua

locales.ini: un esempio che contiene i percorsi dei vari file di lingua con il loro codice di riconoscimento.
manifest.properties: un esempio che contiene la traduzione del manifest.
app.properties: un esempio che contiene la traduzione completa del boilerplate.

Come si può vedere è il classico file .ini proprietà = testo che viene elaborato da JavaScript e caricato all’interno del tag contenente nell’attributo data-l10n-id.

Riassunto

Abbiamo visto molte funzionalità di Firefox OS e delle Open Web Apps tramite un semplice ma completo boilerplate. Ricordati che per poter utilizzare le WebActivity o alcune API hai bisogno dei permessi degli utenti e quindi devi chiedere i permessi relativi compilando il file manifest accuratamente. Abbiamo visto anche la questione multilingua che è molto importante e di come sia semplice integrare questa soluzione nei propri progetti.

Per saperne di più su questa autorizzazione leggi la pagina MDN sui permessi.↩

Strumenti per sviluppatori

Il browser Firefox mette a disposizione molti strumenti per consentire agli sviluppatori di eseguire il proprio lavoro al meglio. Molte persone continuano a usare l’estensione Firebug senza aver realizzato che ora Firefox ha degli strumenti di sviluppo integrati che possono sostituirlo (anche la versione 3 di Firebug si integrerà con gli strumenti nativi).

In questo capitolo andremo ad analizzare gli strumenti più utili per sviluppare app per Firefox OS.

Se si è interessati a saperne di più su questi strumenti e conoscere quali straordinarie novità in materia di sviluppo web saranno implementate nelle prossime versioni di Firefox, consultare la pagina developer tools su Mozilla Developer Network (ci conto, apri davvero questo link! Ti aspetto).

Introduzione alla Visualizzazione flessibile

Un’attività molto comune durante lo sviluppo web è quella di modificare il sorgente HTML di una pagina e poi ricaricarla per vedere le modifiche effettuate nel browser. A meno che non si stiano utilizzando strumenti come Grunt o Volo non sarà necessario effettuare operazioni intermedie.

Anche se il Firefox OS Simulator consente di vedere la tua app attualmente non è in grado di utilizzare risoluzioni diverse da 480x320 pixel. Questo non è certo l’ideale per sviluppare un’app destinata a funzionare su tablet, phablet, grandi schermi TV o qualunque altro dispositivo con una diversa risoluzione.

Per controllare l’aspetto dell’app con qualunque tipo di risoluzione è possibile utilizzare lo strumento Visualizzazione flessibile (Responsive View) (Ctrl+Shift+M) di Firefox che permette di cambiare lo schermo e il riquadro di visualizzazione. Può essere attivata dal menu Strumenti -> Sviluppo web -> Visualizzazione flessibile come mostrato nell’immagine qui di seguito. All’attivazione della modalità di visualizzazione flessibile, la finestra diventerà “ridimensionabile“ in modo da permettere, appunto, di variarne le dimensioni, trascinando gli angoli o impostandone le dimensioni nelle apposite caselle.

Attivazione della visualizzazione flessibile

L’utilizzo della Visualizzazione flessibile è particolarmente utile al fine di provare le media queries, in quanto permette di ridimensionare lo schermo e visualizzare la reazione del layout del proprio sito immediatamente. Un’altra utile caratteristica della Visualizzazione flessibile è la possibilità di memorizzare delle dimensioni schermo differenti dalle predefinite. Se si conoscono già le dimensioni schermo che si vuole provare, sarà possibile farlo velocemente senza dover ogni volta ridimensionare la finestra di Firefox. Inoltre permette di scattare uno screenshot dell’area visionata e di simulare gli eventi touch JavaScript.

Esempio di visualizzazione flessibile

Al momento della stesura di questo testo, la maggior parte degli smartphone Firefox OS in commercio utilizzano schermi di 480x320 pixel con una densità dei punti di 96 dpi¹. Tuttavia c’è da aspettarsi che questa situazione cambi nel tempo: gli schermi avranno dimensioni maggiori e maggiori densità dei punti (come gli schermi Retina di Apple).

Nell’eventualità di future verifiche delle proprie app, si segua questo consiglio: non basare mai i propri CSS su una specifica risoluzione schermo o densità dei punti. Piuttosto, si dovrebbero utilizzare le media queries e pensare ad un layout flessibile (responsive n.d.t) per permettere all’app di adattarsi alle varie risoluzioni schermo. Per saperne di più sul layout flessibile consiglio la lettura di questi libri: Responsive Web Design e Mobile First.

Riepilogando, la Visualizzazione flessibile ci permette di provare la nostra app a varie risoluzioni dello schermo senza dover ridimensionare la finestra di Firefox. A mio modesto avviso, la Visualizzazione flessibile è uno degli strumenti di sviluppo più utili a disposizione - purtroppo ha un grande limite: attualmente non consente di provare differenti configurazioni di densità dei punti, quindi ricordatevi di usare anche dispositivi diversi.

Strumenti di sviluppo

Gli strumenti di sviluppo di Firefox sono simili a quelli disponibili con l’estensione Firebug o in altri browser di nuova generazione. Utilizzando questi strumenti è possibile eseguire ed effettuare il debug del codice JavaScript tramite la console di Firefox e manipolare sia il DOM che i fogli di stile CSS della pagina.

Esistono diversi modi per invocare la Console:

Dal menu Strumenti -> Sviluppo web -> Console del browser (Ctrl+Maiusc+J)
Facendo clic col tasto destro nella pagina da analizzare e scegliendo Ispeziona elemento e quindi selezionando la scheda Console.

Console JavaScript

Oltre alla Console JavaScript sono disponibili altri strumenti come l’Editor stili, il Monitor di rete, il Profiler JavaScript, il Debugger JavaScript, lo strumento Analisi pagina e molti altri.

Nell’applicazione che abbiamo creato nel precedente capitolo, abbiamo utilizzato la Console web per verificare lo stato di avanzamento del nostro progetto. Questo è un modo elegante e molto efficace di effettuare il debug delle nostre app, anche se alcuni sviluppatori continuano a utilizzare l’istruzione alert() all’interno di tutti i loro sorgenti JavaScript come “strumento di debugging”.

L’utilizzo dell’istruzione alert() è davvero un metodo barbaro e deprecabile, in quanto se ci si dimentica di rimuovere tutti gli alert() dal sorgente prima di rilasciare l’app, sarà l’utente a pagarne le conseguenze.L’utilizzo della Console permette di evitare questo tipo di problemi: la Console, infatti, consente di inserire questi messaggi, in maniera semplice e innocua, in una interfaccia al quale di solito un utente non accede, risultando così invisibile. L’utilizzo della Console inoltre evita di dover rimuovere le istruzioni che generano i messaggi di log dal codice sorgente, a meno che non lo si voglia davvero fare, ovviamente. Questo ci aiuterà nelle operazioni di manutenzione e di debugging del codice sorgente nel caso ci fossero dei bug imprevisti (come accade solitamente con qualunque codice).

Imparare a utilizzare in modo appropriato gli strumenti di sviluppo inclusi in Firefox (o in qualunque altro browser in uso) è un importante passo nel processo di diventare uno sviluppatore migliore. Per questo motivo consiglio a tutti di consultare i link riportati qui sopra e approfondire la propria conoscenza degli strumenti di sviluppo inclusi in Firefox.

Uno speciale strumento che non è stato sin qui menzionato è il Debugger remoto. Questo strumento consente di connettersi a uno smartphone Android o Firefox OS e utilizzare gli altri strumenti di sviluppo per effettuare il debug delle pagine web aperte su questi dispositivi. Non vi preoccupate, lo vedremo nel prossimo capitolo con un dispositivo dotato di Firefox OS!

Riassunto

In questo capitolo sono stati descritti in maniera sintetica gli strumenti di sviluppo inclusi in Firefox. Questi strumenti renderanno il processo di sviluppo più semplice, specialmente se utilizzati assieme al Firefox OS Simulator. Rappresentano una combinazione indispensabile per permetterci di sviluppare un’app. Nel prossimo capitolo andremo a conoscere più da vicino il simulatore e impareremo a farne un buon uso.

L’acronimo dpi denota l’unità di misura della densità dei punti, in inglese dots per pixel, cioè punti per pollice (1 pollice corrisponde a 2,54 cm). Per ulteriori informazioni leggere l’articolo di Wikipedia sull’argomento.↩

WebIde

Firefox OS Simulator Dashboard

Abbiamo scaricato il simulatore nel capitolo precedente riguardo l’ambiente di lavoro e l’abbiamo usato nel capitolo riguardo la prima applicazione. Ora è tempo di dare un’occhiata più approfondita al WebIde e le sue funzionalità base.

Per saperne di più, date un’occhiata alla pagina dedicata al WebIde su MDN.

Ricordati: se stai usando un dispositivo Firefox OS 1.1 devi usare il Simulatore 1.1 e non l’App Manager. Questo simulatore è spiegato nel prossimo capitolo.

Aggiungere Applicazioni

Dal WebIde puoi accedere sia alle applicazioni remote (hosted) che locali (packaged). Vediamo come fare.

Da il menù Progetti puoi scegliere tra queste opzioni:

aprire un nuovo progetto
aprire un progetto packaged esistente ma non ancora aggiunto al WebIde
aprire un progetto hosted esistente ma non ancora aggiunto al WebIde

Queste azioni sono replicabili anche cliccando sul bottone Apri applicazione

Il bottone apri applicazione e il suo menu

I progetti che hai già aperto vengono elencati sotto l’etichetta I miei progetti

Creare un nuovo progetto

Cliccando sull’opzione Nuova Applicazione verrà aperta una finestra che ci propone i modelli disponibili.

I modelli che possiamo usare

Il primo è il modello base, valido sia per packaged che hosted e genera un file sul vostro computer che potete poi usare come pensate meglio.

Il secondo è un modello per un’app di tipo privileged, quindi per forza una app packaged, con una struttura minima da cui partire.

Il secondo è un modello per un’app di tipo privileged, quindi per forza una app packaged, già funzionante e finita.

Aggiungere Applicazioni packaged

La finestra per selezionare la cartella dell’applicazione

Abbiamo già parlato di applicazioni packaged durante la creazione della nostra prima applicazione, adesso è ora di provarla.

Una volta premuto Apri App Packaged viene aperta una finestra da cui poter scegliere la cartella che contiene i file che ci interessano.

Per poter essere considerata come una app packaged una cartella ha bisogno di contenere un file manifest.webapp valido.

Se tutto va a buon fine la tua app verrà caricata nel WebIde e vedrai una schermata come la seguente.

Memos è stata aggiunta al WebIde

Aggiungere Applicazioni hosted

La finestra per inserire la URL del file manifest.webapp

Una volta premuto Apri App Hosted viene aperta una finestra in cui puoi inserire l’indirizzo web a cui troviamo la tua applicazione, ovvero anche in questo caso l’indirizzo web in cui è disponibile il file manifest.webapp.

Per poter essere considerata come una app hosted un sito ha bisogno di un file manifest.webapp valido.

Problemi con le applicazioni hosted

Se stai realizzando un’applicazione hosted dovrai provarla con un server web. Ci sono degli errori che sono caratteristici quando usiamo un server web, come servire il manifest con il MIME type sbagliato, problema che si conclude con l’impossibilità di installare l’app.

Nota che il simulatore non segnala errori riguardo il MIME type sbagliato, è importante controllare queste cose prima di caricare l’applicazione nel Mozilla Marketplace.

Molte delle applicazioni hosted non sono applicazioni realizzate specificatamente per Firefox OS ma si tratta di siti realizzati in modo responsive che adattano il layout della pagina allo spazio disponibile sullo schermo del dispositivo. Queste applicazioni web hanno di solito un backend complesso che serve all’applicazione per funzionare e per questo è necessario provarla in un vero web server.

Per testare sul campo che tutto sia a posto avvia il simulatore, naviga fino al tuo sito tramite il browser del simulatore e controlla che il simulatore ti segnali che la pagina è una Open Web App installabile.

Avviare il simulatore

Per avviare il simulatore dopo averlo installato basta sceglierlo dal menù che appare quando premi il pulsante Scegli runtime, le versioni installate vengono elencate sotto l’etichetta Simulatori.

Le versioni del simulatore installate

Avviare l’applicazione

Una volta che il WebIde mostra l’applicazione avvia il simulatore e premi il pulsante triangolare per installare l’applicazione ed avviarla sul simulatore.

I bottoni del WebIde

L’icona dell’applicazione apparirà nella schermata principale del Simulatore dopo la fine dell’installazione. Fai clic sull’icona per lanciarla.

Aggiornare l’applicazione

Ogni volta che si cambiano i file e si vuole provare nel simulatore le modifiche sarà necessario premere il pulsante triangolare che reinstallerà l’applicazione nel simulatore.¹

Debug

Dopo che l’applicazione sarà installata nel simulatore potremo fare il debug facendo clic sul pulsante Debug² del WebIde, il pulsante è il cerchio con due righe verticali all’interno. Verrà aperta la Console JavaScript relativa all’applicazione.

Pulsante di Debug

Dopo il clic su questo pulsante verrà aperta una schermata come questa:

Developer Tools connessi all’applicazione nel simulatore

Con gli strumenti connessi all’applicazione puoi provare il tuo codice JavaScript, fare il debug del DOM, modificare lo stile, ecc… esattamente come se usassi gli strumenti per sviluppatori di Firefox.

Una volta che l’applicazione è avviata sul simulatore è tempo di provarla su di un dispositivo reale.

Provare le applicazioni su un dispositivo reale

Niente può sostituire il testing su un dispositivo reale. Nel simulatore i test vengono effettuati facendo clic con un mouse su uno schermo di computer, mentre con un dispositivo reale i test si effettuano toccando uno touchscreen e premendo con le dita dei pulsanti reali. Un’esperienza utente e sviluppatore completamente diversa.

Per sottolineare l’importanza di effettuare dei test su un dispositivo reale, racconterò un fatto personale. Alcuni anni fa Raphael Eckhardt (il designer della copertina di questo testo) e io stavamo realizzando un puzzle game simile a Bejeweled. Il nostro gioco consisteva nel trascinare e posizionare dei pezzi su una tavola e funzionava abbastanza bene sul simulatore.

Quando abbiamo provato il gioco su un telefono reale ci siamo resi conto che i componenti del gioco non erano ottimizzati per la piattaforma mobile: quando posizionavamo la mano sullo schermo tutto scompariva dietro la mano. Inoltre i componenti di gioco erano troppo piccoli per le dita, quindi gli utenti non potevano rendersi conto di quello che stavano facendo, in poche parole l’interfaccia non era un granché. Il problema era che noi avevamo effettuato i nostri test utilizzando il mouse e il puntatore del mouse è molto piccolo. Quando abbiamo provato con le nostre dita “cicciotelle” ci siamo resi conto che dovevamo rielaborare l’interfaccia.

Per evitare di avere un’esperienza così frustrante è indispensabile verificare sempre l’app su un dispositivo reale… O ancora meglio su qualunque dispositivo si abbia a disposizione. Effettuare dei buoni test su dei semplici prototipi è molto importante per non dover perdere tempo e denaro a rimodificare tutto ogni volta.

Connettere un dispostivo Firefox OS

Adesso che sappiamo quanto sia importante testare il proprio lavoro prima di consegnarlo al mondo vediamo come possiamo usare il WebIde in simbiosi con un dispositivo reale per provare il nostro lavoro.

Installa i driver del tuo dispositivo³
Installa adb
Installa ADB Helper
collega il dispositivo al computer tramite il cavo USB

Da adesso se hai installato l’addon per Firefox ADB Helper verrà segnalato al WebIde che esiste il tuo dispositivo e questo verrà aggiunto sotto l’etichetta Dispositivi USB.

Puoi decidere di usare il tuo dispositivo al posto del simulatore, andando quindi ad installare la tua app su quello.

Al primo collegamento tra dispositivo e WebIde apparirà un messaggio di avviso sul telefono; dobbiamo dare il permesso al WebIde di agire sul telefono quindi scegliamo di confermare il collegamento.

Dispositivo connesso!

Una volta che la connessione è effettuata sarà possibile usare i pulsanti Aggiorna e Debug nel WebIde per aggiornare e fare il debug dell’applicazione sul dispositivo connesso come con il simulatore.

Riassunto

Per riassumere, il WebIde è fantastico. Molto meglio rispetto alla vecchia estensione del Firefox OS 1.1 Simulator e anche meglio dell’App Manager.

Adesso abbiamo a disposisizione un ambiente di sviluppo completo con cui possiamo gestire tutto il ciclo del nostro lavoro.

Arrivati a questo punto avrai la sensazione di aver capito come stanno andando le cose, quali sono gli strumenti che ti servono e come dovrebbe procedere il tuo lavoro quando vuoi realizzare una app per Firefox OS.

Nel prossimo capitolo parleremo della vecchia versione del Simulatore di Firefox OS 1.1. Questo studio è necessario se si devono connettere dispositivi con Firefox OS 1.1. Il capitolo è molto simile a a questo infatti i contenuti sono gli stessi ma cambiano le interfacce degli strumenti.

Dopo il capitolo sul simulatore parleremo della distribuzione della tua applicazione.

puoi anche usare la scorciatoia da tastiera Ctrl + r↩
Alternativamente puoi premere il pulsante F12 della tua tastiera per aprire e chiudere la console del WebIde↩
se lavori in ambiente Windows, altrimenti non ne hai bisogno↩

Il Simulatore Firefox OS 1.1

Gestore App

Attenzione: Questo capitolo è presente solo per una compatibilità per i dispositivi con Firefox OS 1.1. Il metodo attuale per provare e fare il debug delle applicazioni è il WebIde di cui abbiamo parlato nel capitolo precedente. Il contenuto di questo capitolo è per quelle persone che devono provare le applicazioni sulla versione 1.1 di Firefox OS.

Attenzione: Se stai usando Firefox 29 o successive e dispositivi con Firefox OS 1.1 o precedenti hai bisogno di un’altra versione del Simulatore Firefox OS 1.1 che non è disponibile nell’add-ons marketplace. Questa versione è una BETA ma al momento non ci sono alternative. Puoi scaricarla per Mac OS X, Linux o Windows. Scarica il file xpi e caricalo in Firefox e segui le istruzioni. Se vuoi seguire la questione del supporto per il simulatore Firefox OS 1.1 su Firefox 29 dai un’occhiata alla bug request #1001590.

Abbiamo installato il Simulatore Firefox OS nel capitolo Ambiente di sviluppo per Firefox OS e lo abbiamo utilizzato nel capitolo La prima app. È giunta l’ora di approfondire la conoscenza del simulatore e imparare come effettuare le operazioni più comuni.

Per ulteriori informazioni fare riferimento alla documentazione di Firefox OS Simulator su MDN.

Aggiungere Applicazioni

È possibile aggiungere sia applicazioni hosted che packaged al simulatore. Vediamo come fare.

Aggiungere applicazioni packaged

È già stata trattata l’aggiunta di un’app packaged nel capitolo La prima app, ma vediamo di richiamare i concetti in modo da mostrare tutte le opzioni possibili.

Per aggiungere una nuova applicazione packaged fare clic sul pulsante + nel Gestore App, come è mostrato nella schermata sottostante.

Aggiungere un’applicazione packaged al simulatore

Dopo aver fatto clic sul pulsante evidenziato nell’immagine,si aprirà una finestra di dialogo di selezione file. Per aggiungere l’app prescelta al simulatore, sarà sufficiente trovare la cartella dell’applicazione. Se non ci sono errori nel file manifesto e nel file che avvia l’app, essa verrà avviata nel simulatore. Se il file manifesto contiene degli errori verranno riportati nel Gestore App.

Esempio di un file manifesto non valido

Ogni volta che l’app verrà aggiornata sarà necessario fare clic sul pulsante Aggiorna per aggiornare l’applicazione nel simulatore in esecuzione (in alternativa è possibile utilizzare la scorciatoia da tastiera CMD/CTRL+R dalla finestra del simulatore).

Aggiungere applicazioni hosted

Se si sta sviluppando un’applicazione hosted è necessario provarla utilizzando un server web. Non utilizzare il metodo descritto in precedenza con le app hosted in quanto alcuni errori potrebbero non essere rilevati, ad esempio un MIME Type non valido del file manifesto.

Per caricare un’app hosted nel simulatore, inserire nella casella di testo, nel box in basso a sinistra, l’URL completa del manifesto dell’app e fare clic sul pulsante +.

Aggiungere un’applicazione hosted al simulatore

Dopo aver fatto clic sul pulsante, il simulatore verificherà il file manifesto e, se non verranno rilevati errori, l’app verrà eseguita all’interno del simulatore. Eventuali errori, analogamente a quanto avviene per le app packaged, verranno riportati nel Gestore (ad esempio, “app submission to the Marketplace needs at least an 128 icon”).

Come per le app packaged, ogni volta che l’app verrà aggiornata sarà necessario fare clic sul pulsante Aggiorna per aggiornare la versione in esecuzione nel simulatore (è anche possibile utilizzare la scorciatoia da tastiera CMD/CTRL+R dalla finestra del simulatore).

Debug

Una volta che l’app è stata aggiunta al simulatore, accedendo al Gestore sarà possibile effettuarne il debug facendo clic sul pulsante Avvia Simulatore che si trova in basso nel gestore applicazione, al clic apparirà la schermata che permette di eseguire una versione specifica del simulatore (se presente) e di installarne altri. Facendo clic su Debug accanto al pulsante Aggiorna verrà lanciata l’applicazione sul simulatore. A questo punto, si aprirà un’istanza della Console JavaScript connessa all’app in esecuzione nel simulatore. In basso sarà possibile vedere il contenuto nel file manifest tramite visualizzazione ad albero.

Il pulsate da premere

Alla pressione del pulsante scelto verrà mostrata una schermata simile a quella di questa immagine:

Developer Tools connessi all’applicazione nel simulatore

Con gli strumenti di sviluppo connessi all’applicazione sarà possibile verificarne il funzionamento Javascript, effettuare il debug del DOM, modificare lo stile ecc. Come amano dire i ragazzi delle startup Provare finché non è pronta.

Quando l’app risulterà funzionante nel simulatore, sarà tempo di provarla su un vero dispositivo.

Provare l’applicazione su un dispositivo reale

Fare riferimento alla sezione del capitole precedente su questo argomento.

Connessione con un dispositivo Firefox OS

Avendo a disposizione un dispositivo Firefox OS (con i driver installati) connesso al computer, è possibile fare un push delle applicazioni direttamente dal simulatore al dispositivo. Facendo clic nella barra laterale dove è scritto Dispositivo si passa al gestore del dispositivo (che può essere anche il simulatore stesso). Quando il simulatore riconosce che un dispositivo con Firefox OS phone è collegato, verrà mostrato un messaggio Dispositivo Connesso.

Dispositivo connesso!

Se lo smartphone è connesso e riconosciuto, il simulatore mostrerà un nuovo pulsante chiamato Push accanto ai pulsanti Aggiorna e Connetti. Premendo questo pulsante, una finestra di richiesta per i permessi apparirà sul dispositivo chiedendo la conferma per poter procedere con l’installazione dell’applicazione.

Il pulsante da premere per fare il push delle app sul dispositivo

Nell’immagine sottostante è possibile vedere la finestra di richiesta permessi:

Non è la foto migliore del mondo ma mostra la finestra dei permessi (scusate per la faccia ma erano le 4:25 di mattina)

Con l’applicazione in esecuzione nel dispositivo è possibile usare il remote debugging per aprire un’istanza della Console JavaScript collegata con l’app in modo da effettuare il debug.

Da questo dispositivo si possono debuggare le applicazioni installate tra cui anche quelle di sistema.

Riassunto

Riassumendo, il simulatore Firefox OS è spettacolare per creare applicazioni specifiche per Firefox OS - ma ha alcuni limiti se si vuole sviluppare un’app che funzioni su una maggior gamma di dispositivi (ad esempio al momento non è possibile emulare il comportamento di Firefox OS su un tablet).

A questo punto del testo, oltre a una sensazione di incredibile forza, si dovrebbe, o così mi auguro, riuscire a comprendere il workflow necessario per sviluppare un’app Firefox OS. Nel prossimo capitolo vedremo come distribuire un’applicazione agli utenti.

Distribuire le app

Ora che la nostra applicazione è pronta, abbiamo bisogno di trovare un modo per renderla disponibile ai nostri utenti. Nel capitolo introduttivo avevo accennato che, diversamente da Apple, Mozilla non obbliga a utilizzare il proprio canale di distribuzione - lasciando ognuno libero di esprimere la propria creatività. In questo capitolo impareremo come distribuire la nostra app al di fuori del canale ufficiale del Firefox Marketplace.

A mio modesto avviso, non utilizzare il canale ufficiale Mozilla per distribuire un’app è conveniente in questi due casi:

Si sta sviluppando un’app per uso interno aziendale o per una ristretta cerchia di utenti. Pubblicandola su Firefox Marketplace, l’app sarà disponibile a chiunque e si renderà necessario implementare un sistema di autenticazione per consentire l’utilizzo solo agli utenti autorizzati. Ad esempio, nelle prime versioni dell’app Evernote era richiesta l’identificazione sui loro server prima di poterla utilizzare.
Si dispone già di un grosso bacino d’utenza che è possibile sfruttare per distribuire l’app. Un esempio potrebbe essere un giornale, come il Financial Times, che può limitarsi a rendere disponibile l’app sul proprio sito per raggiungere la quasi totalità dei propri utenti. È bene ricordare che è possibile distribuire l’app sia su Firefox Marketplace, sia su un canale esterno, in questo modo sarà possibile sfruttare il canale di marketing preesistente e utilizzare Firefox Marketplace per raggiungere nuovi utenti.

Il processo di distribuzione delle app packaged e delle app hosted è simile, anche se utilizzano delle funzioni differenti. Ecco perché tratterò i due casi separatamente. Indipendentemente dal fatto che l’app sia pacchettizzata o ospitata, il procedimento è più o meno lo stesso: sarà necessario rendere disponibile un pulsante o un link nella pagina, denominato Fai clic per installare l’app, o utilizzare un particolare URL che quando aperto attiva l’esecuzione della routine di installazione. In entrambi i casi, all’utente finale verrà presentata una finestra di dialogo nativa in cui gli verrà chiesto di confermare l’installazione.

App hosted

Nel caso la vostra app sia disponibile sul web sotto forma di un sito come facciamo a chiedere all’utente di installare la nostra app?

Ecco che quì arriva in soccorso Firefox ed una WebApi. Grazie a questo strumento possiamo chiedere all’utente di installare il nostro lavoro quando viene visitata la nostra pagina.

Codice per l’installazione di app hosted

1 var installapp = navigator.mozApps.install(manifestURL);
2 installapp.onsuccess = function(data) {
3   // A App was installed.
4 };
5 installapp.onerror = function() {
6  // A App was not installed, more information at 
7  // installapp.error.name
8 };

Nell’esempio riportato qui sopra manifestURL riporta l’indirizzo del file manifest. All’esecuzione di questo codice, il sistema chiederà all’utente se desidera installare l’app e, a seconda della risposta, richiamerà la callback appropriata: success in caso di risposta affermativa e error in caso contrario.

Per ulteriori informazioni su questa API consultare la pagina su MDN sull’installazione delle app.

App pacchettizzate

L’installazione di app pacchettizzate funziona in modo analogo, però in questo caso anziché utilizzare la funzione mozApps.install() utilizzeremo mozApps.installPackage(), come mostrato nel codice d’esempio riportato qui di seguito.

Codice per l’installazione di app packaged

1 var packageURL = "http://myapp.example.com/myapp.zip"; // <-- absolute url to pa\
2 ckage
3 var installapp = navigator.mozApps.installPackage(packageURL);

Riassunto

In questo capitolo sono stati trattati i metodi di distribuzione delle app alternativi al sito Firefox Marketplace grazie all’utilizzo della API di Installazione e gestione delle Open Web Apps.
Questa parte l’avevamo accennata nel capitolo sul boilerplate ma in questo capitolo abbiamo visto le differenze ed alcuni esempi d’uso alternativi. Esistono molte altre routine disponibili, ad esempio per controllare se l’applicazione è installata (in questo modo sarà possibile nascondere il pulsante Fai clic qui per installare). Per ulteriori informazioni su queste API consultare la pagina di MDN dedicata all’installazione delle app (sì, avete ragione, questo link non è nuovo, però ci sono informazioni importanti che dovete assolutamente conoscere).

Nel prossimo capitolo impareremo come distribuire la nostra app attraverso il Marketplace Firefox.

Firefox Marketplace

Firefox Marketplace è il negozio online dal quale è possibile scaricare o acquistare applicazioni per Firefox OS, Firefox e Firefox per Android. Questo è il principale canale di distribuzione per le app Firefox OS, tuttavia non è l’unica alternativa possibile. Se sei interessato a distribuire app esternamente al Marketplace, leggi il capitolo precedente.

Per pubblicare un’app sul Marketplace è necessario effettuare l’identificazione tramite Mozilla Persona. Sarà sufficiente fare clic sul pulsante Registrati e seguire le istruzioni. Una volta effettuato l’accesso al Marketplace sarà possibile pubblicare l’app.

Passi che precedono l’ideazione di un’app

Tutte le applicazioni pubblicate sul Marketplace sono sottoposte a un processo di revisione e devono essere approvate dai revisori del sito (non c’è bisogno di preoccuparsi, è meno pauroso di quanto sembri). Il processo di controllo delle app ospitate e delle app pacchettizzate semplici è più snello rispetto a quello delle app con privilegi, in quanto le prime utilizzano API meno sensibili. Prima di inviare un’app su Firefox Marketplace leggere attentamente le linee guida per la revisione. A mio avviso le parti più importanti sono:

I dispositivi Firefox OS, contrariamente ai dispositivi Android e ai browser desktop, non hanno un pulsante Indietro. Nel caso in cui l’app rimandi a una pagina dalla quale non è possibile ritornare più indietro (in altre parole se l’utente nell’utilizzo dell’app arriva a un punto morto) l’app verrà rifiutata.
L’app deve avere un’icona di 60x60 pixel e una descrizione chiara del suo funzionamento.
L’app deve funzionare esattamente come riportato nella sua descrizione. Se nella descrizione si dichiarano delle caratteristiche e nell’utilizzo ne emergono delle altre, l’app verrà respinta.
Se l’app richiede un’autorizzazione particolare si è obbligati a farne uso nel codice sorgente. Dichiarare che si tratta di un’app con privilegi e non fare uso di alcuna API fra quelle riservate alle app con privilegi, porterà al rifiuto dell’app da parte dei revisori che chiederanno allo sviluppatore di ripubblicarla come app semplice.
L’applicazione deve essere accompagnata da un’informativa sulla privacy.
I file manifesto dovrebbero essere distribuiti con il corretto MIME type e utilizzare lo stesso dominio di origine in caso di app ospitate.

Alla pagina sopraindicata vengono discussi altri criteri di validità e altri potrebbero essere aggiunti in futuro senza un’esplicita comunicazione. Sarà utile impiegare bene il proprio tempo e leggere con attenzione quella pagina. Vedere la propria applicazione rifiutata per delle sciocchezze che richiedono poco sforzo per essere risolte è una gran perdita di tempo. È sempre meglio iniziare a fare le cose per bene sin dall’inizio (i revisori sono ben lieti di approvare delle buone app).

Passi preliminari prima della pubblicazione

I passaggi richiesti per la pubblicazione di un’app sul Marketplace variano a seconda che si tratti di un’app hosted o di un’app pacchettizzata. Nel caso di app hosted, è sufficiente che sia raggiungibile online e che il manifesto sia distribuito con il corretto MIME type. I file delle app packaged devono essere raccolti in un archivio compresso utilizzando il formato zip e richiedono qualche maggiore attenzione.

Un errore comune a molti sviluppatori è quello di selezionare la cartella che contiene i file dell’app e di comprimerla. Come risultato il file zip contiene una cartella che a sua volta contiene l’app vera e propria. Questo non è il modo corretto per creare l’archivio zip di un’applicazione Firefox OS.

Il modo corretto di creare l’archivio zip consiste nel selezionare tutti i file e le cartelle dell’app in modo che il file manifesto sia nel primo livello dell’archivio. Su sistemi operativi Mac e Linux è possibile aprire il Terminale, navigare fino alla directory dell’app e eseguire il comando zip -r myapp.zip * per ottenere il risultato desiderato, come mostrato nella schermata sottostante.

Modo corretto di comprimere i file da terminale

Questo file zip è quello che dovremo pubblicare sul Marketplace.

Pubblicazione dell’app sul Marketplace

Ora che l’applicazione è pronta - e con la consapevolezza che dovrà soddisfare i criteri del Marketplace per essere approvata dai revisori - è tempo di pubblicarla sul Marketplace. Per farlo, fare clic su Le mie app utilizzando il pulsante a forma di ingranaggio posizionato in alto nella pagina del Marketplace.

Le mie app

Arrivati nella pagina di gestione dei caricamenti, fare clic su Invia un’app dal menu superiore.

Invio di un’app

Come è possibile notare dallo schermata qui sotto, questo link aprirà il modulo per l’invio di nuove app.

Invio di nuove app

Da questa pagina si dovranno impostare le seguenti opzioni:

Se si tratta di un’app hosted o di un’app packaged.
Se si tratta di un’app gratuita o di un’app a pagamento (o se utilizzano i pagamenti in-app).
Per quali dispositivi è disponibile (Firefox OS per smartphone e tablet, Firefox Desktop, Firefox For Android ecc…).

Dopo aver impostato queste preferenze si verrà rimandati a un’altra pagina. In questo testo tratteremo esplicitamente il caso di un’app pacchettizzata, ma la procedura è analoga per un’app ospitata.

Nel proseguo del capitolo faremo sempre riferimento a un’app pacchettizzata gratuita per Firefox OS. In questo caso dobbiamo caricare il file zip della nostra app, di cui si è discusso nella sezione precedente.

Dopo aver effettuato l’upload del file, questo subirà un processo automatico di verifica e al termine verrà mostrato un resoconto con una serie di opzioni.

Dopo aver caricato il file zip

Dalla schermata mostrata qui sopra, è possibile notare che l’app da me caricata non presenta errori, ma riporta 6 avvisi. Ignorando la discussione degli avvisi per non complicare eccessivamente la trattazione, concentriamoci sul significato della voce Requisiti minimi della nostra app. In questo specifico caso, l’ultima opzione Smartphone-Sized Displays (qHD) dovrebbe essere deselezionata in quanto la nostra applicazione si adatta a schermi di qualunque dimensione.

Il passaggio successivo è denominato Passaggio #3: dettagli ed è quello in cui si dovranno inserire delle informazioni dettagliate sull’app, come categoria, testo descrittivo, qualche screenshot, ecc…

Come ottenere degli screenshots per il Marketplace

Siccome non tutti abbiamo confidenza con i programmi di grafica ecco che il WebIDE ci viene in soccorso e ci permette di fare gli screenshots senza tanta fatica.

Un click e via, ecco lo screenshot

Basta scegliere Runtime > Screenshot perché venga salvata nella cartella Immagini del vostro computer la schermata che vedete al momento sul simulatore. Ecco la schermata che abbiamo salvato.

Lo screenshot preso precedentemente

Le informazioni sulla nostra app

Inserimento di informazioni dettagliate

Dopo aver inserito in dettaglio le informazioni sull’app, il processo di caricamento è completo.
Arriveremo a un passaggio dedicato alla certificazione guidata dell’applicazione, passaggio in cui ci verrà chiesto di selezionare gli argomenti trattati se sono violenti, illeciti, se è un gioco ecc. In questo modo la nostra applicazione verrà certificata per la sua comparsa sui vari paesi a seconda proprio di questo passaggio obbligatorio.
Ora non ci resta che attendere l’approvazione da parte dei revisori del Marketplace. Complimenti, l’app ora è distribuita su Firefox Marketplace.

Dalla pagina di gestione delle app sarà possibile verificare lo stato delle app caricate e, se lo si desidera, modificare le informazioni dell’app.
Dalla pagina di gestione dell’app potremo anche vedere le statistiche di installazione, visita, supporto ecc.

Per ulteriori informazioni riguardo al caricamento delle app consultare questo articolo del Centro di sviluppo di Firefox OS.

Guide linea per il marketplace

Le applicazioni quando sono inviate nel marketplace vengono controllate da tool automatici e testate da volontari di Mozilla. Questi volontari a loro volta sono sottoposti a dei test per verificare le loro conoscenze.

I criteri di accettazione dell’applicazione sono molteplici e passano dalla sicurezza, privacy, contenuto, funzionalità e usabilità.

Durante il processo di recensione verrà controllato il file manifest per la completezza delle informazioni quindi è molto importante che sia completo e preciso perché è uno dei primi motivi per cui l’app può essere bocciata. Per esempio specificando lingue disponibili che non lo sono, permessi documentati male, schermata mancante o descrizione incompleta.

Un dettaglio da non dimenticare è che i recensori non sono un team di QA, fanno dei test d’uso come un utente normale e provano l’applicazione sui sistemi specificati nel marketplace.

Il recensore in caso di rifiuto dell’applicazione fornisce una spiegazione dei problemi riscontrati, spiegando i passaggi per riprodurre i problemi dando riferimenti alla documentazione per correggere le carenze. Non commenta la grafica dell’applicazione ma solo come l’applicazione funziona. Lo sviluppatore avrà sempre il beneficio del dubbio e potrà rinviare l’applicazione e chiedere maggiori dettagli sulle motivazioni del rifiuto.

Sicurezza

Per maggiori informazioni, fate riferimento alla pagina dedicata su MDN.

Il manifest deve essere fornito dallo stesso origin dell’applicazione quindi lo stesso dominio, deve essere fornito con il mime-type application/x-web-app-manifest+json e l’applicazione non deve contenere iframe. Questo impedisce ad altre persone di fare applicazioni hosted il cui sito non è di loro gestione.

Privacy

Per l’approvazione deve essere presentata una privacy policy ma non ci sono requisiti specifici sul formato o contenuto. Ecco un template di esempio con del materiale di riferimento e consigli.

Contenuto

Non deve contenere materiale pornografico, codice maligno o promozione di materiale illegale/gioco d’azzardo/servizi illegali. Potremmo dire: regole del buon senso!

Funzionalità

Il revisore deve provare le funzionalità principali dell’applicazione, se ci sono piccoli problemi tecnici o problemi grafici potrà essere approvata. Inoltre, come abbiamo già detto, non deve compromettere il sistema o la sua stabilità.

Usabilità

Lo sviluppatore deve cercare di ottimizzare l’applicazione sia a livello di layout che di piattaforma. Dettaglio da non trascurare che Firefox OS non ha pulsanti fisici quindi deve avere dei pulsanti di navigazione. Cosa molto importante se qualcosa deve essere oggetto di click/tocco deve avere delle dimensioni usabili.

Alcuni consigli

Se stai realizzando un gioco consiglio di presentare le istruzioni subito invece della partita già avviata e specificare se l’applicazione è per Firefox Desktop/Firefox for Android/Firefox OS mobile o Firefox OS per tablet.

Inserisci dei bei screenshot dell’applicazione che sono una vetrina del tuo lavoro.

Riassunto

Complimenti! La propria nuova applicazione ora è su Firefox Marketplace e ci si sta apprestando a esplorare un nuovissimo tipo di mercato.

Spero che la lettura di questa veloce guida sia stata piacevole. Ho in mente di aggiornare e ampliare spesso questa guida, quindi consiglio di tenere gli occhi aperti e iscriversi per ricevere le notizie sul suo aggiornamento. Se si è scaricato questo testo dal sito Leanpub non ci sono problemi: si riceverà automaticamente un’email che informerà di nuovi aggiornamenti. Se invece è stato scaricato da altri siti, il mio consiglio è quello di riscaricarlo dalla pagina ufficiale della versione italiana su Leanpub e registrare il proprio indirizzo email. Ovviamente è tutto gratuito e, no, non verranno mai inviati messaggi di spam, promesso.

Invito tutti i lettori ad inviarmi le proprie opinioni su questo lavoro (in inglese). Questo testo è stato scritto nelle notti precedenti una conferenza tecnica, quindi si può intuire quanto io sia affezionato a questo progetto e quanto vorrei che avesse successo. È possibile inviare le proprie opinioni via Twitter al mio account @soapdog o al mio indirizzo di posta elettronica fxosquickguide@andregarzia.com. Il mio sito web è http://andregarzia.com. Per la versione italiana fare riferimento anche al repository su GitHub che ricordo contiene materiale inedito rispetto alla versione originale ed inglese.

Ora che si è entrati a far parte del gruppo di sviluppatori di app Firefox OS, il prossimo passo è quello di unirsi al gruppo più esteso della comunità Mozilla, aiutandoci a mantenere il Web libero e creato dagli utenti per gli utenti.
È possibile unirsi a noi visitando http://www.mozilla.org/contribute/ e aiutare la crescita di Firefox OS.

Altro

In questo capitolo vedremo in modo veloce alcune tecnologie che ci possono essere utili nello sviluppo per Firefox OS.

Gaia Building Blocks

Per chi è abituato ad utilizzare i framework CSS sarà molto semplice capire l’utilità di Building Blocks. Questo framework già citato è utilizzato nel boilerplate e in molte applicazioni presenti sul marketplace.
Si tratta di un framework CSS basato sulle release giornaliere di Gaia che permette di avere sempre le ultime novità.
Come si può vedere dal sito http://buildingfirefoxos.com/ ci sono moltissimi esempi riguardanti:

Come si può vedere ci sono molte interfacce e opzioni possibili per avere la stessa grafica del sistema un modo semplice. Inoltre è presente una sezione dedicata alle icone tramite Font Icon.
Non è finita qui ci sono anche le transizioni e per chi lavora con Photoshop ci sono anche i file psd per un’approccio grafico al lavoro.

Web Components

I Web Components sono una tecnologia emergente che è attualmente nello stato di Working Draft dal W3C ma già supportata da Chrome e Firefox.

La caratteristica principale di questa nuova tecnologia è la personalizzazione di HTML, possiamo creare dei nuovi tag, definendone il comportamento, e questi verranno aggiunti alla nostra pagina.

Questa idea permette di avere ad esempio un tag <map> per visualizzare una mappa tramite Google Maps o OpenStreetMap, un tag <calendar> per permettere all’utente di scegliere un giorno dal calendario, <qr> o <barcode> per mostrare un codice qr o un codice a barre personalizzati, etc, etc…

Questa tecnologia è retrocompatibile infatti se volete essere compatibili con una versione datata di un browser e usare i Web Components basta usare una polyfill che vi viene data dal progetto Polymer di Google.

La libreria Polymer è integrata nella raccolta di Web Components Brick 2.0, sponsorizzata da Mozilla. In questa guida li introdurremo semplicemente senza andare nei dettagli (un po’ come abbiamo fatto con Gaia Building Blocks).

Attualmente sono disponibili in Brick i seguenti componenti, che potete già utilizzare.

Barra dell’applicazione - una comoda barra per contenere titolo e pulsanti
Calendario - un calendario per selezionare una data
Deck o schermata - un “mazzo di carte” che è possibile scorrere per visualizzarle tutte
FlipBox - per avere fronte e retro di una schermata, come un foglio
Layout (un contenitore) - comodo per isolare parti di una schermata
Action - hai bisogno di controllare cosa succede?
Barra delle schede - la classica barra delle schede
Form - nome, cognome e indirizzo? Eccoti servito
Menu - vi serve un menu?
Storage-IndexdDB - per conservare informazioni sul dispositivo dell’utente

Per mostrare l’uso di questi componenti, Daniele ha realizzato un boilerplate di nome Brickly che potete studiare per prendere confidenza con i Web Components.

Non è nell’interesse della guida approfondire questa libreria ma solo pubblicizzare questo materiale già disponibile all’uso.

Hosting App su Github

Github offre sui suoi server un servizio di web hosting, questa sezione tratterà di come sfruttare Github per distribuire la propria applicazione sulla rete.

Come prima cosa è necessario registrarsi su Github ed affettuare l’accesso. Nella schermata che troverete davanti (detta Dashboard) alla destra della vostra immagine di profilo c’è un icona “+” che permette di creare una repository.

Un repository può essere descritto semplicemente come una cartella che contiene un progetto e la storia dei suoi file da quando l’avete creato. Questo ci permette di tenere traccia delle modifiche ai file nel tempo.

Aggiungi un repository

Verrete indirizzati alla schermata di creazione della repository; qui dovrete inserire il nome della vostra applicazione e una breve descrizione della stessa, lasciando i restanti campi immodificati premete create repository. La repository sarà quindi creata automaticamente e vi troverete nella pagina del progetto.

Crea un nuovo repository

In questa nuova schermata è presente una barra sulla destra che permette di gestire il progetto, fate click su Settings.

Impostazioni

Scorrete fino alla sezione che ha per titolo Github Pages dove troverete il pulsante Automatic Page Generator, premetelo. In questo modo verrà generato il ramo gh-pages con del contenuto già pronto ideale per questo esempio.

Genera il ramo gh-pages automaticamente

La pagina che verrà creata servirà come base per l’applicazione, motivo per cui non dovremo perdere tempo a modificare i contenuti o a scegliere il layout: la pagina generata verrà scartata in favore della nostra applicazione.

Nella prima pagina New project site fate click su continue to layouts senza modificare nulla e nella pagina di scelta del layout premete publish page.

Github creerà quindi un sito per il vostro progetto che sarà visitabile da chiunque all’indirizzo: http://miousername.github.io/nomedelprogetto. Potete trovare l’indirizzo completo nella pagina Settings della vostra repository. Seguendo i passaggi sopra elencati il sito sarà così realizzato (titolo e sottotitolo dipenderanno dal nome e dalla descrizione):

Una delle pagine disponibili

Per far si che l’app sia effettivamente installabile occorre modificare il file manifest.webapp. In particolare bisogna sostituire nel campo “launch_path” il nuovo indirizzo del vostro file index.html.

Se ricordate l’indirizzo che avrà il vostro progetto sarà circa: http://miousername.github.io/nomedelprogetto, il manifesto deve quindi essere così modificato.

1  "launch_path" : "/nomedelprogetto/index.html"

Per la corretta visualizzazione delle icone è necessario aggiornare anche il campo “icons”

"icons" : {
   "128" : "/nomedelprogetto/cartellaIcone/icona128.png",
   "60" : "/nomedelprogetto/cartellaIcone/icona60.png"
   }

Infine per caricare l’applicazione è necessario installare sul computer un software distribuito da Github.

Per Windows tale programma è disponibile con interfaccia grafica o tramite un terminale apposito (Git Power Shell), mentre per GNU/Linux è disponibile solo su terminale, questa guida per semplicità farà riferimento ai comandi da eseguire da terminale.

Per iniziare è necessario clonare la repository sul proprio pc digitando questi comandi nel terminale:

1 $ git clone https://github.com/miousername/nomedelprogetto.git

Ora bisogna sostituire il contenuto della cartella nomedelprogetto con i file che compongono la vostra applicazione, questa operazione per semplicità può essere eseguita tramite il file manager.

Attenzione: Dovete copiare solamente i file, non la cartella che li contiene

Quindi per aggiornare i file su GitHub digitare:

$ cd nomedelprogetto
$ git add -A
$ git commit -m "hosting app"
$ git push origin gh-pages

Inserite le vostre credenziali per avviare il caricamento dei file. Una volta finito il caricamento visitando l’indirizzo del vostro progetto vedrete anzichè la pagina generata automaticamente l’Homepage della vostra applicazione.

NOTA: Può capitare che a volte la modifica della pagina impieghi anche 30 minuti, nel caso pazientate.

Ultima tappa è la pubblicazione sul Firefox Marketplace. Accedete o registratevi al Firefox Marketplace come sviluppatori, nella pagina Carica un’app selezionate Hosted app e inserite l’indirizzo del manifesto ossia: http://miousername.github.io/nomedelprogetto/manifest.webapp

Concierge

Tra gli strumenti a nostra disposizione se vogliamo pubblicare la nostra app come hosted c’è Concierge, una libreria che si occupa di:

rilevare se la nostra app è installata
proporre l’installazione
creare un bottone di installazione semplice e di buon gusto

Potete vedere la demo su questa pagina.

Per usare Concierge basta includere il suo file JavaScript, il file CSS e aggiungere il seguente codice alla nostra pagina su cui troviamo l’applicazione.

var install = new Concierge({
   onSuccess: successCallback,
   onError: errorCallback
});

function successCallback () {
   console.log('App installed!');
}

function errorCallback (error) {
   console.error('Concierge() error: ' + error);
}

Questo è tutto, se vi doveste trovare in imbarazzo e non funzionasse controllate per bene di aver seguito tutti i passaggi elencati sulla pagina del progetto.

Firefox Developer Edition

Per i 10 anni di Firefox, il browser indipendente che mette l’utente al centro, Mozilla ha fatto un enorme balzo in avanti verso la comunità degli sviluppatori web come noi (si, anche tu!). La versione Firefox Developer Edition include TUTTI gli strumenti su cui Mozilla lavora per aiutare gli sviluppatori web, compresi quelli ancora non inclusi nelle versioni generiche, ed è compatibile con i più nuovi standard.

Se continuerai questo percorso da Web Developer non potrai fare a meno di sporcarti le mani e questi strumenti sono i migliori disponibili al momento!

Appendice 1: Link utili

Sito di Mozilla
Sito della comunitÃ italiana
Centro di sviluppo per Firefox OS
Mozilla Developers Network (MDN): dove trovare la migliore documentazione disponibile.
Sito di Firefox OS
Pagina dedicata alle WebAPI sul wiki MDN

Table of Contents

Ringraziamenti

Questo testo è in beta perenne

Me, me stesso e io.

Com’è nato questo testo

Rimanere aggiornati

Donazioni

Come contattare l’autore

Illustrazione della copertina

Chi dovrebbe leggere questo testo

Migliori tecniche di programmazione VS introduzione per principianti

Commenti e Pull Requests

Traduzioni

Storico delle versioni

Versione 0.3

Versione 0.2

Versione 0.1

Introduzione

Firefox OS

La piattaforma che HTML5 merita

Accesso Hardware tramite le WebAPI

Libertà di sviluppare e di distribuire

Riassunto

Ambiente di sviluppo per Firefox OS

Il motore Gecko

Di che cosa abbiamo bisogno?

Configurazione del WebIde

Usare un dispositivo Firefox OS per lo sviluppo

Riassunto

Concetti Base

File manifesto dell’applicazione

Il nostro primo manifest

Cosa mettere nel manifest

Le proprietà del manifest

Tipi di Applicazioni

Livelli di accesso per la sicurezza

WebAPI di Mozilla

Esempio #1: Effettuare chiamate

Esempio #2: Memorizzare un contatto

Esempio #3: Selezionare una immagine dalla fotocamera

Riassunto

La prima app

Creare il manifesto dell’app

Scriviamo il codice HTML

Includere Gaia Building Blocks

Costruiamo la schermata principale

Costruire la schermata di modifica

Manipoliamo il codice JavaScript

model.js

app.js

Provare l’applicazione col simulatore

Riassunto

Firefox OS Boilerplate App

I dettagli che fanno la differenza

Offline

Installare l’applicazione

WebActivity

WebAPI

API Privilegiate

Multilingua

File della lingua

Riassunto

Strumenti per sviluppatori

Introduzione alla Visualizzazione flessibile

Strumenti di sviluppo

Riassunto

WebIde

Aggiungere Applicazioni

Creare un nuovo progetto

Aggiungere Applicazioni packaged

Aggiungere Applicazioni hosted

Problemi con le applicazioni hosted

Avviare il simulatore

Avviare l’applicazione

Aggiornare l’applicazione

Debug

Provare le applicazioni su un dispositivo reale

Connettere un dispostivo Firefox OS

Riassunto

Il Simulatore Firefox OS 1.1