Guida Veloc e Sviluppo Fire Foxos

Guida veloce allo sviluppo per Firefox OS
Daniele Scasciafratte and Edoardo Putti

This book is for sale at http://leanpub.com/guidavelocesviluppofirefoxos
This version was published on 2015-03-17
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported

License
Indice
Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Questo testo in beta perenne . . . . . . . . . . . . . . . . . . . . . .
Me, me stesso e io. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Com nato questo testo . . . . . . . . . . . . . . . . . . . . . . . . .
Rimanere aggiornati . . . . . . . . . . . . . . . . . . . . . . . . . . .
Donazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Come contattare lautore . . . . . . . . . . . . . . . . . . . . . . . . .
Illustrazione della copertina . . . . . . . . . . . . . . . . . . . . . . .
Chi dovrebbe leggere questo testo . . . . . . . . . . . . . . . . . . . .
Migliori tecniche di programmazione VS introduzione per principianti
Commenti e Pull Requests . . . . . . . . . . . . . . . . . . . . . . . .
Traduzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Storico delle versioni . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduzione . . . . . . . . . . . . . . .
Firefox OS . . . . . . . . . . . . . . .
La piattaforma che HTML5 merita . .
Accesso Hardware tramite le WebAPI
Libert di sviluppare e di distribuire .
Riassunto . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
i
i
i
i
i
ii
ii
ii
ii
iii
iii
iii
iv
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
2
3
3
4
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 . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
5
5
5
8
9
Concetti Base . . . . . . . . . . .
File manifesto dellapplicazione
Tipi di Applicazioni . . . . . . .
Livelli di accesso per la sicurezza
WebAPI di Mozilla . . . . . . .
Riassunto . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
10
10
17
18
19
23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
INDICE
La prima app . . . . . . . . . . . . . . .
Creare il manifesto dellapp . . . . .
Scriviamo il codice HTML . . . . . .
Manipoliamo il codice JavaScript . . .
Provare lapplicazione col simulatore
Riassunto . . . . . . . . . . . . . . .
Firefox OS Boilerplate App . . . . . .
Multilingua . . . . . . . . . . . . . .
Riassunto . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
24
27
28
32
40
46
46
50
51
Strumenti per sviluppatori . . . . . . . . . .

Introduzione alla Visualizzazione flessibile
Strumenti di sviluppo . . . . . . . . . . . .
Riassunto . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
52
52
55
57
WebIde . . . . . . . . . . . . . . . . . . . . . . .
Aggiungere Applicazioni . . . . . . . . . . . .
Avviare il simulatore . . . . . . . . . . . . . .
Avviare lapplicazione . . . . . . . . . . . . .
Aggiornare lapplicazione . . . . . . . . . . . .
Debug . . . . . . . . . . . . . . . . . . . . . .
Provare le applicazioni su un dispositivo reale .
Connettere un dispostivo Firefox OS . . . . . .
Riassunto . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
58
58
63
64
65
65
66
67
68
Il Simulatore Firefox OS . . . . . . . . . . . .
Aggiungere Applicazioni . . . . . . . . . . .
Debug . . . . . . . . . . . . . . . . . . . . .
Provare lapplicazione su un dispositivo reale
Connessione con un dispositivo Firefox OS .
Riassunto . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
69
70
72
74
74
77
Distribuire le app . .
App hosted . . . .
App pacchettizzate
Riassunto . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
78
78
79
80
Firefox Marketplace . . . . . . . . . . . . . .
Passi che precedono lideazione di unapp .
Passi preliminari prima della pubblicazione
Pubblicazione dellapp sul Marketplace . .
Le informazioni sulla nostra app . . . . . .
Guide linea per il marketplace . . . . . . .
Privacy . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
81
82
82
83
89
90
90
INDICE
Contenuto . . .
Funzionalit . .
Usabilit . . . .
Alcuni consigli
Riassunto . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
91
91
91
91
91
Altro . . . . . . . . . . .
Gaia Building Blocks .
Web Components . . .
Hosting App su Github
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
93
93
94
95
Appendice 1: Link utili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
INDICE
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 lutente 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 lultima 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 allaiuto 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 allinterno del loro gruppo durante lestate.
Rimanere aggiornati
Questo testo distribuito gratuitamente tramite Leanpub.
http://leanpub.com
INDICE
ii
Scaricando il testo dalla pagina ufficiale su Leanpub possibile registrarsi per ricevere gli
aggiornamenti automatici. Lauspicio 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 lesperienza 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 laccount 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 lautore

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. Linsegnamento di HTML, CSS e Javascript
lo scopo del testo. Verranno consigliati dei buoni libri che trattano questi argomenti.
http://leanpub.com/quickguidefirefoxosdevelopment
mailto:fxosquickguide@andregarzia.com
http://andregarzia.com
http://twitter.com/soapdog
http://raphaeleckhardt.com/
INDICE
iii
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 luso degli anti-pattern nel testo, voglio altres
evitare luso delle immediate function e altre tecniche simili di programmazione. Il motivo principale
di questa scelta che questo testo vuole essere unintroduzione allargomento. 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:
http://shop.oreilly.com/product/9780596517748.do
https://github.com/soapdog/firefoxos-quick-guide
https://github.com/MozillaItalia/firefoxos-quick-guide
INDICE
iv
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 laiuto 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 laiuto di Edoardo Putti e Niccolo Cant la guida stata revisionata ed stato aggiunto materiale
nuovo rispetto alloriginale 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. Linglese 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 delloriginale in portoghese.
http://leanpub.com/guiarapidofirefoxos
https://github.com/MozillaItalia/firefoxos-quick-guide
http://braziljs.com.br/
http://leanpub.com
Introduzione
Firefox OS
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 dellanno.
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 unalternativa 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.
http://mozilla.org/firefox/os/
http://mozilla.org
Introduzione
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 lhardware del telefono ad avere problemi nelle prestazioni, tutto ci ha come
risultato una pessima esperienza mobile per lutente finale. Firefox OS progettato specificatamente
per funzionare su hardware limitato fornendo una discreta esperienza utente.
Un altro fattore distintivo di Firefox OS lessere 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 luso 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 unapp nativa sia per
iOS che Android utilizzando i sistemi ufficiali, sar necessario programmare unapp in Objective-C
ed unaltra in Java rispettivamente. 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 allutilizzo 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 miglioramenti significativi alle prestazioni e nuove
funzionalit, rimanendo facili da utilizzare sia per i principianti che per gli sviluppatori esperti.
Firefox OS , in parole povere, unestensione del web mobile. Mozilla ha aperto la sua piattaforma a
milioni di sviluppatori web rendendo HTML5 lelemento principale. Anche se ci sono altri produttori
http://phonegap.com
Introduzione
di browser che supportano HTML5 nei loro telefoni, Firefox OS va oltre, offrendo una famiglia di
API per accedere allhardware e al sistema utilizzando JavaScript. Queste API sono conosciute come
WebAPI.
Accesso Hardware tramite le WebAPI

Alcune piattaforme precedenti hanno provato a creare sistemi operativi che utilizzavano tecnologie
web per la creazione di applicazioni. Per esempio, quando venne presentato liPhone, lunico
modo per creare applicazioni era usare tecnologie web. Queste applicazioni web erano limitate
dal fatto che non avevano accesso allhardware o al dispositivo - quindi potevano esserci solo
poche applicazioni. Quando Apple ha permesso di sviluppare in Objective-C, conseguentemente
di accedere alle funzionalit del dispositivo, 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 allaccesso 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.
Unaltra piattaforma precedente, WebOS, offriva accesso allhardware 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 unesclusiva 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 lapertura 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.
Lidea 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 unapplicazione
https://wiki.mozilla.org/WebAPI
https://github.com/mozilla-b2g/B2G
https://marketplace.firefox.com/
Introduzione
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 lunico 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 negozio. 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, lutilizzo 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 lapp stessa alla revisione dello staff Mozilla, che dovr
firmare digitalmente lapp 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 lapertura 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 allhardware
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 prodotti 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 largomento.
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.
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 trasportano 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 unalternativa in caso
alcune di queste funzionalit non siano disponibili.
http://getfirefox.com
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/
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.
https://developer.mozilla.org/it/Firefox_OS/usare_l_app_Manager
Adesso il momento di vedere come funziona WebIde. Clicca su Strumenti -> Web Developer ->
WebIde.
Dove puoi trovare WebIde
Dopo lapertura dellApp 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 laddon 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 mostrati
tra i dispositivi utilizzabili dal WebIde
adb la sigla con cui indichiamo il programma android debug bridge uno strumento per comunicare con i dispositivi che si basano su Android
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/
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 lambiente di sviluppo, siamo pronti per soffermarci su qualche
concetto base prima di creare la nostra prima app.
Concetti Base
Prima di sporcarci le mani con la nostra prima applicazione, vediamo di scoprire alcuni concetti
base per lo sviluppo su Firefox OS. Nellintroduzione 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 unicona con cui lutente lancia lapplicazione.
Accesso ai servizi di sistema (dati utente, notifiche) e funzionalit hardware (sensori).
Osservando il quadro generale, unapplicazione 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 dellapplicazione come nome, icona ecc. sono definiti nel file manifesto
dellapplicazione, che sar largomento della prossima sezione.
File manifesto dellapplicazione

Il manifesto un file JSON obbligatorio che contiene i metadati dellapplicazione. 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, licona, le lingue in cui disponibile e molto altro.
Manifest desempio
1
2
3
4
5
6
7
8
9
{
"name": "Memos",
"version": "1.1",
"description": "A simple memo taking app",
"launch_path": "/index.html",
"permissions": {
"storage": {
"description": "Required for storing and retrieving notes."
}
https://developer.mozilla.org/docs/Apps/Manifest
http://json.org
Concetti Base
10
11
12
13
14
15
16
17
18
19
11
},
"developer": {
"name": "Andre Garzia",
"url": "http://andregarzia.com"
},
"icons": {
"60": "/style/icons/icon_60.png",
"128": "/style/icons/icon_128.png"
}
}
Sopra possiamo vedere il manifest di unapplicazione chiamata Memos. Tra le altre cose descrive
chi ha creato lapplicazione, quali icone usare, qual il nome dellapplicazione, quale file usato
per lanciare lapplicazione (in questo caso index.html), quali permessi daccesso hardware richiede
lapplicazione, ecc. Questo file usato da Firefox OS per aggiungere lapplicazione alla schermata
principale e per mostrare sul Firefox Marketplace le informazioni dellapplicazione.
Questa applicazione di esempio per Firefox OS disponibile su Firefox Marketplace e il codice sorgente su GitHub.
12
Concetti Base
Lapplicazione 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.
13
Concetti Base
Memos nel simulatore
Riunendo il codice HTML, CSS, JavaScript e un file manifesto gi possibile avere unapplicazione
pronta per funzionare su Firefox OS. Continuando nellesplorazione dei concetti base per lo sviluppo
di unapp, 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 dellinformazione 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 lapp packaged) e il campo developer che con le sue propriet name e url definiscono,
rispettivamente, nome e URL dello sviluppatore dellapplicazione (utili nel caso vogliate pubblicare
la vostra app sul Mozilla Marketplace).
Le propriet del manifest

Il manifest descrive una marea di propriet utili, perci vediamo il nome e lutilit di ognuna.
Concetti Base
14
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 unesempio, 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 lutente prova a condividere una foto dallapp galleria, apparir anche la vostra applicazione
tra quelle che possono svolgere questo compito. La sintassi di questo campo un po complessa, per
questo vi 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 nellimmagine
Nota: tenete presente che questa funzionalit va utilizzata solo se non possibile implementare una
soluzione propria, poich le linee guida per luser experience prevedono linserimento di un tasto
back da parte dellapplicazione.
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 dellapplicazione ovvero quella che verr usata se nel sistema impostata una lingua per
cui non avete traduzioni.
Esempio per linglese
1
"default_locale": "en"
description
La descrizione dellapplicazione (massimo 1024 caratteri), siate il pi chiari e sintetici possibile perch
questo il testo che verr visualizzato sul Mozilla Marketplace (successivamente si pu modificare).
developer
Abbiamo incontrato questa propriet nel manifest di prova, puoi indicare chi lo sviluppatore e qual
il suo sito web.
https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities
Concetti Base
15
fullscreen
Se impostata a true, metter la vostra applicazione a schermo intero (utile per i giochi) nscondendo
la barra delle notifiche.
icons
Anche questa propriet era presente nellesempio e serve per far sapere quali risoluzioni dellicona
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 licona 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 Mozilla Marketplace.
installs_allowed_from
Indica una serie di siti a cui permesso installare lapplicazione (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 dellapplicazione 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 lapp.
Esempio:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"locales": {
"es": {
"description": "Accin 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
Concetti Base
16
Indica quali messaggi del sistema la vostra app pu leggere per eseguire del codice specifico.
Esempio:
1
2
3
4
5
6
7
"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
allancora #keyboard-view quando levento telephony-new-call viene rilevato dal telefono.
name
Indovinate? Il nome della vostra app!
orientation
Questa propriet imposta lorientamento predefinito dellapplicazione, i due valori ammessi sono
landscape e portrait (predefinito). Lasciatela vuota o addirittura non mettetela se non vi interessa.
origin
Indica unURL che lapplicazione pu utilizzare al posto dellUUID, raro utilizzare questo valore.
permissions
Propriet chiave del manifest, permette di chiedere allutente il permesso di utilizzare elementi
specifici del telefono, come la geolocalizzazione, i contatti,
Esempio:
1
2
3
4
5
6
7
8
9
"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: laccesso allelenco dei contatti in modalit lettura/creazione e la possibilit di usare la sveglia.
17
Concetti Base
Inoltre bisogna fornire due ulteriori campi, un campo description in cui bisogna spiegare allutente
a cosa ci serve il permesso e un campo access opzionale in cui specificate il grado daccesso. 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 Mozilla 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 hosting. Vedi lultimo 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 lutente avvia unapplicazione 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 lutente avvia unapp pacchettizzata, i suoi contenuti sono
caricati da un file zip nel dispositivo anzich da un server remoto.
http://mozilla.org
Concetti Base
18
Esistono vantaggi e svantaggi nellutilizzo 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 lutilizzo del tanto discusso file
appcache. Inoltre, le hosted app hanno delle limitazioni nelluso di alcune WebAPI e dunque non
possibile implementare tutte le funzioni che si possono utilizzare in unapp packaged.
Dallaltro lato tutti i file di unapp packaged sono memorizzati localmente sul dispositivo - ci
significa che sono sempre disponibili quando lutente 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 dellapplicazione 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 unapp packaged. Se
lapp 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 unapp 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 unocchiata ai
diversi livelli di accesso che unapp 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 Mozilla.
https://developer.mozilla.org/docs/HTML/Using_the_application_cache
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).
https://marketplace.firefox.com/developers/docs/hosted
19
Concetti Base
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 dellhardware, le compagnie di
telecomunicazione, ecc). Le applicazioni certificate hanno un accesso a tutte le API, come
lAPI 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 lapp sul Firefox Marketplace. A
questo punto il codice viene controllato in un rigoroso processo di approvazione e se tutto OK
lapp 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 dallimmagine 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. Laccesso al hardware ed ai servizi avviene attraverso
https://developer.mozilla.org/en-US/docs/WebAPI
Concetti Base
20
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 unapplicazione 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
2
3
4
5
6
var call = new MozActivity({

name: "dial",
data: {
number: "5555-9999"
}
});
Questo codice effettua una richiesta allapplicazione dialer per chiamare un numero predefinito.
In realt non partir la chiamata, sar necessario lesplicita conferma dellutente che dovr toccare
il tasto di chiamata per avviarla. La richiesta di unazione esplicita dellutente prima di avviare
unoperazione un modello molto comune: si tratta di un buon modello di sicurezza perch
richiesta unesplicita conferma dellutente prima di avviare unoperazione. Altre API possono
effettuare chiamate senza una interazione dellutente ma richiedono un livello daccesso pi elevato.
Le applicazioni certificate possono effettuare chiamate senza interazione con lutente. Le API usate
nel codice sopra, chiamate Web Activities, sono disponibili per tutte le applicazioni.
Per maggiori informazioni sullAPI 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 unapp per trasferire i contatti
dalla rete intranet alla rubrica telefonica. possibile farlo grazie alla Contacts API.
https://wiki.mozilla.org/WebAPI
https://hacks.mozilla.org/2013/01/introducing-web-activities/
Concetti Base
21
Salvare un contatto
1
2
3
4
5
6
7
8
9
10
var contact = new mozContact();

contact.init({name: "Odin"});
var request = navigator.mozContacts.save(contact);
request.onsuccess = function() {
// contact saved successfully
};
request.onerror = function() {
// there was an error while trying to save the contact
};
Questa API crea un oggetto con i dati del contatto e lo salva nella rubrica telefonica senza bisogno di
alcuna interazione da parte dellutente. Poich laccesso ai contatti comporta implicazioni riguardo la
privacy, questa API disponibile per le app con privilegi. Il modello di questa API prevede lutilizzo
di due callback ed un approccio condiviso da molte altre API. Forniamo quindi due funzioni,
success in caso di buona riuscita delloperazione e error in caso contrario da eseguire una volta che
si risolta lazione principale (in questo caso salvare 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 unapp 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 limmagine da una galleria.
Scegliere una foto
1
2
3
4
5
6
7
8
9
10
var getphoto = new MozActivity({

name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]
}
});
getphoto.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
https://wiki.mozilla.org/WebAPI/ContactsAPI
Concetti Base
11
12
13
14
15
16
17
22
img.src = window.URL.createObjectURL(this.result.blob);
}
};
getphoto.onerror = function () {
// erro!
};
Questo un altro esempio di WebActivity. Le funzioni (activity) dellAPI 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 allutente chiedendo se vuole selezionare limmagine da camera, galleria o sfondi.
Se lutente seleziona una immagine, la callback di successo viene invocata. Se lutente annulla
loperazione, la callback di errore eseguita. Nellimmagine sottostante, possiamo vedere la finestra
di richiesta sul dispositivo:
23
Concetti Base
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 di Mozilla. Le WebAPI non sono
disponibili per le applicazioni hosted o le pagine web classiche.
Adesso giunta lora di sporcarsi le mani e creare unapplicazione.
La prima app
Memos, un blocco note minimale
In questo capitolo vedremo come realizzare un semplice Notepad, cio unapplicazione 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 lutente
vedr, in cui presentiamo lelenco 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.
25
La prima app
Memos, schermata di modifica
Dalla parte superiore dello schermo possibile cancellare una nota prescelta se si fa clic sul Cestino.
Questa azione aprir una finestra di conferma.
26
La prima app
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. Unaltra copia
del codice sorgente disponibile nella cartella code della repository Github di questo libro.
Memos utilizza IndexedDB per salvare le note e il toolkit Gaia Building Blocks 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 sullargomento e
per sapere quali interfacce vi sono integrate visitare i link appena segnalati.
Il primo passaggio creare una cartella per lapplicazione di nome memos.
https://github.com/soapdog/memos-for-firefoxos
https://github.com/soapdog/memos-for-firefoxos/archive/master.zip
https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
La prima app
27
Creare il manifesto dellapp

Il file manifesto di Memos molto semplice. Crea un file chiamato manifest.webapp nella cartella
memos. I manifesti sono dei file in formato JSON che descrivono unapplicazione per Firefox OS.
In questo file possibile trovare le informazioni sullapp, quali il nome, il nome dello sviluppatore,
le icone utilizzate, il file che avvia lapp, quali API e con privilegi sono utilizzate e molto altro.
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. Per ulteriori
informazioni su questi file consultare la pagina su MDN.
Memos manifest (manifest.webapp)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "Memos",
"version": "1.1",
"description": "A simple memo taking app",
"launch_path": "/index.html",
"permissions": {
"storage": {
"description": "Required for storing and retrieving notes."
}
},
"developer": {
"name": "Andre Garzia",
"url": "http://andregarzia.com"
},
"icons": {
"60": "/style/icons/icon_60.png",
"128": "/style/icons/icon_128.png"
}
}
Analizziamo i campi di questo file manifesto:
http://json.org
https://marketplace.firefox.com/developers/validator
https://developer.mozilla.org/docs/Apps/Manifest
28
La prima app
Campi
Descrizione
name
version
launch_path
permissions
developer
icons
Il nome dellapplicazione
La versione attuale dellapplicazione
Il file utilizzato per avviare unapplicazione
I permessi API richiesti, con molte informazioni
I contatti dello sviluppatore
Licona 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
dellutente!).
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 digressione su Gaia Building
Blocks, una raccolta di codici CSS e JavaScript che rispettano il layout degli elementi dinterfaccia
nativi di Firefox OS e che possiamo riutilizzare per creare linterfaccia della nostra applicazione.
Come nelle pagine web, non richiesto luso 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 unesperienza utente proprie. La cosa importante da
capire che unapplicazione 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 lapplicazione Memos non era compatibile
con lultima versione di Gaia Building Blocks. Nei propri progetti sempre meglio utilizzare
lultima versione disponibile del toolkit.
Per saperne di pi su questa autorizzazione leggi la pagina MDN sui permessi.

https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
https://github.com/soapdog/memos-for-firefoxos/archive/master.zip
29
La prima app
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 lutilizzo del toolkit Gaia
Building Blocks nelle proprie applicazioni.
Iniziamo con linserimento del codice necessario nel file index.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
" />
css" />
<title>Memos</title>
</head>
type="text/css"
type="text/css"
type="text/css"
type="text/css"
type="text/css"
href="/style/base.css" />
href="/style/ui.css" />
href="/style/building_blocks.css" />
href="shared/style/headers.css" />
href="shared/style_unstable/lists.css\
type="text/css" href="shared/style_unstable/toolbars.\
type="text/css" href="shared/style/input_areas.css" />
type="text/css" href="shared/style/confirm.css" />
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 nellapp: 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 unapplicazione a 5 stelle.
Iniziamo a costruire le varie schermate. Come abbiamo detto prima, ogni schermata racchiusa in
una <section> allinterno del corpo (il tag <body>) del documento HTML. Allelemento <body>
assegnamo un attributo role il cui valore deve essere application, in questo modo quando lapp
verr lanciata verranno utilizzati i fogli di stile di Gaia Building Blocks per definire laspetto
dellinterfaccia. Scriviamo quindi <body role="application">. Adesso creiamo la prima schermata,
quindi la prima <section>, e dichiariamo il tag body come abbiamo detto prima.
La prima app
1
2
3
4
5
6
7
8
9
10
11
30
<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 permetta di
aggiungere nuove note ed il nome dellapplicazione stessa. La schermata include un tag <article>
che utilizzato per mostrare il contenuto della nota. Useremo il pulsante e lID dellarticolo 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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
La prima app
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
31
<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 dallelemento <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 lazione.
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.
La prima app
1
2
3
4
32
<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 dellinterfaccia e la gestione
dellinput 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 lutente.
app.js: collega gli eventi dellinterfaccia agli elementi HTML e contiene la struttura logica
dellapplicazione.
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 unapplicazione se consumer troppa
memoria senza motivo. Memorizzare troppo materiale porta a problemi di prestazioni e lapp
risulter lenta e poco reattiva. Al momento del caricamento su Firefox Marketplace, sar necessario
indicare nel modulo diretto ai revisori il motivo per cui lapp 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 lapp, che quindi
non verr pubblicata sul sito.
La parte di codice in model.js che mostriamo qui sotto si occupa del collegamento e della creazione
dello storage.
https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
La prima app
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
allinferno 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.
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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");
33
La prima app
34
35
36
37
38
39
40
41
42
34
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 allinsegnamento. 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. Loggetto db utilizzato in altre
funzioni per manipolare le note memorizzate.
Nellimplementazione della funzione request.onupgradeneeded creiamo una nota di benvenuto.
Questa funzione eseguita quando lapplicazione viene lanciata per la prima volta (o quando la
versione del database cambia). In questo modo, al primo avvio dellapplicazione, 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
35
La prima app
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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);
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);
console.log("Memo deleted!");
inCallback();
La prima app
59
60
36
};
}
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.
Siccome 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.
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
.
Ora che larchiviazione delle note e le funzioni di modifica sono state implementate, lavoriamo alla
struttura logica dellapplicazione nel file app.js.
app.js
Questo file contiene la logica dellapplicazione. Il codice sorgente troppo lungo da mostrare in una
volta sola, quindi verr diviso in parti per studiarlo meglio.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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() {
La prima app
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
37
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);
}
Allinizio 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, loggetto di riferimento per la nota che lutente 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 prima app
38
La funzione textChanged() prende il contenuto dei campi e lo inserisce nelloggetto currentMemo

che salva la nota. Questo perch avremo unapplicazione 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 lelenco delle note presenti. Per esempio,
svuota il contenuto di currentMemo se non stiamo leggendo una nota.
La prima app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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);
});
}
39
La prima app
40
La funzione refreshMemoList() modifica il DOM della nostra applicazione aggiornando lelenco

delle note. Sarebbe pi facile usare alcuni sistemi di templating come handlebars o underscore
ma questapplicazione contiene solo vanilla javascript quindi faremo tutto a mano.
Queste sono le funzioni utilizzate dallapplicazione. Le uniche che mancano sono il gestore eventi e
la chiamata iniziale di refreshMemoList().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 lapplicazione nel simulatore.
Provare lapplicazione col simulatore

Prima di avviare lapplicazione nel simulatore preferibile verificare che tutti i file siano al posto
giusto altrimenti lapplicazione non funzioner. Ecco quale dovrebbe essere il contenuto della
cartella memos:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
http://handlebarsjs.com/
http://underscorejs.org/
41
La prima app
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 (unulteriore 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 **.
https://github.com/soapdog/guia-rapido-firefox-os
42
La prima app
Apertura della Dashboard del simulatore
Fai clic sul pulsante Apri app, seleziona Apri app pacchettizzata e seleziona la cartella contenente
il file manifesto dellapplicazione Memos for Firefox Os.
43
La prima app
Aggiunta di una nuova applicazione
Se tutto funziona come previsto Memos verr aggiunta ai progetti del WebIde.
44
La prima app
Memos mostrata nella Dashboard
Una volta aggiunta lapplicazione 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.
45
La prima app
Memos installato nel Simulatore
Congratulazioni! Abbiamo creato e provato la nostra prima applicazione. Non unapplicazione

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 dellapplicazione presente nel simulatore.
La prima app
46
Riassunto
In questo capitolo abbiamo creato la nostra prima applicazione per Firefox OS e labbiamo lanciata
nel simulatore. Nel prossimo capitolo vedremo uno strumento molto utile chiamato BoilerPlate,
un insieme di esempi che rispondono ad esigenze basilari di unapplicazione, 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, dallo scattare una foto ad aggiungere
un contatto o far vibrare il telefono.
Firefox OS Boilerplate App

Il boilerplate di cui abbiamo letto in precedenza unapplicazione dimostrativa con molti esempi
basilari. Contiene un esempio per la maggior parte delle Web Activity, la questione multilingua,
installazione dellapplicazione, API HTML5 e linterfaccia 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 qui.
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
lapice 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.
NB: Le API pensate ed integrate in Firefox OS sono proposte al W3C per una loro standardizzazione
(come lAPI per la batteria o la vibrazione che sono uno standard). Questo a ricordare che Mozilla
lavora per la standardizzazione delle sue idee e non ha interesse a chiudersi.
https://github.com/robnyman/Firefox-OS-Boilerplate-App
http://robnyman.github.io/Firefox-OS-Boilerplate-App/
https://developer.mozilla.org/it/Persona
https://hacks.mozilla.org/2013/02/getting-started-with-open-web-apps-why-and-how/
http://marketplace.firefox.com/
https://github.com/mozilla/mortar
La prima app
47
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 lapplicazione
Multilingua
Grafica di Gaia
Alcune di queste cose le abbiamo viste o le vedremo in questa fantastica guida. Quindi passiamo
agli argomenti che non sono stati ancora visti o non hanno un capitolo dedicato.
Offline
Con OffLine mi riferisco a del codice che permette di sapere se il dispositivo connesso sfruttando
loggetto 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 lAPI 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 lapplicazione in modalit offline, nel boilerplate
utilizzato per mostrare il pallino verde se si online.
Vediamo un attimo questi due codici:
1
2
3
var connection = window.navigator.mozConnection,

online = "<strong>Connected:</strong> " + (connection.bandwidth),
metered = "<strong>Metered:</strong> " + connection.metered;
http://mdn.beonex.com/en/DOM/window.navigator.connection.html
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/js/webapp.js#L331
La prima app
1
2
3
4
5
48
var appCache = window.applicationCache;

appCache.onerror = function() {
displayStatus.className = "offline";
displayStatus.title = "Offline";
};
Installare lapplicazione
Installazione 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 dei test di successo o fallimento dellinstallazione.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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");
}
La prima app
49
Come si pu vedere il codice molto semplice, si d lindirizzo del file manifest e si verifica se
stato installato. Per installare il boilerplate fate click sul simbolo pi in alto a destra.
Questo codice eseguito su Firefox OS, Firefox for Android e Firefox desktop aprir un mini pop up
per chiedere se installare lapplicazione.
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 quelle 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 unemail (con lapplicazione 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 senza che voi dobbiate lavorarci.
Naturalmente limportanza 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 qu
https://github.com/Mte90/moz-polyfills
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/js/webapp.js
https://developer.mozilla.org/en-US/docs/Web/API/Web_Activities
La prima app
50
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 spengimento dello schermo che sono solo per Firefox OS mentre
vibrazione, verifica della connessione (ne abbiamo parlato prima), geolocalizzazione, quantit di
luce ambientale, prossimit dellutente 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 lapplicazione 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 dellapplicazione. Dopodich se c la lingua utilizzata dal
sistema provvede a sostituire i testi che gli abbiamo indicato alla creazione dellapp, se la lingua non
presente viene lasciata la versione base (dobbiamo indicarla noi).
Diamo unocchiata al codice prima di vedere come avviene la magia della localizzazione.
1
2
<link rel="resource" type="application/l10n" href="locales/locales.ini" />

<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.
http://robnyman.github.io/Firefox-OS-Boilerplate-App/
https://github.com/fabi1cazenave/webL10n/tree/master
La prima app
1
2
3
4
5
6
7
8
9
51
<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
1
2
3
[it]
test = Questo un test
test.title = Cliccami!
Il testo allinterno del bottone verr sostituito dal testo Questo un test nel caso io chieda la lingua
italiana.
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 allinterno del tag contenente nellattributo 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 quinidi 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 nel proprio lavoro.
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/locales/locales.ini
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/locales/en-US/manifest.properties
https://github.com/robnyman/Firefox-OS-Boilerplate-App/blob/gh-pages/locales/en-US/app.properties
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 lestensione Firebug senza aver
realizzato che ora Firefox ha degli strumenti di sviluppo integrati che possono sostituirlo.
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

Unattivit molto comune durante lo sviluppo web quella di modificare il sorgente HTML di una
pagina e poi ricaricarla per vedere le modifiche effettuate allopera 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 lideale per sviluppare unapp
destinata a funzionare su tablet, phablet, grandi schermi TV o qualunque altro dispositivo con una
diversa risoluzione.
Per controllare laspetto dellapp 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 nellimmagine qui di seguito. Allattivazione
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.
https://addons.mozilla.org/it/firefox/addon/firebug/
https://developer.mozilla.org/en-US/docs/Tools
53
Attivazione della visualizzazione flessibile
Lutilizzo della Visualizzazione flessibile particolarmente utile al fine di provare le media

query, in quanto permette di ridimensionare lo schermo e visualizzare la reazione del layout
del proprio sito immediatamente. Unaltra 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.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
54
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).
Nelleventualit 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 query e pensare ad un layout flessibile (responsive n.d.t) per permettere allapp
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
Lacronimo dpi denota lunit 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 larticolo di Wikipedia sullargomento.
http://www.abookapart.com/products/responsive-web-design
http://www.abookapart.com/products/mobile-first
55
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 lestensione 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.
https://developer.mozilla.org/en-US/docs/Web/API/console
56
Console JavaScript
Oltre alla Console JavaScript sono disponibili altri strumenti come lEditor stili, il Monitor di rete,
il Profiler JavaScript, il Debugger JavaScript, lo strumento Analisi pagina e molti altri.
Nellapplicazione 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 listruzione
alert() allinterno di tutti i loro sorgenti JavaScript come strumento di debugging.
Lutilizzo dellistruzione alert() davvero un metodo barbaro e deprecabile, in quanto se ci si
dimentica di rimuovere tutti gli alert() dal sorgente prima di rilasciare lapp, sar lutente a pagarne
le conseguenze.Lutilizzo 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. Lutilizzo della Console inoltre evita
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
https://developer.mozilla.org/en-US/docs/Tools/Profiler
https://developer.mozilla.org/en-US/docs/Tools/Debugger
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
57
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 sorgente).
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 unapp. Nel prossimo capitolo andremo a conoscere pi da vicino il simulatore e
impareremo a farne un buon uso.
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
WebIde
Firefox OS Simulator Dashboard
Abbiamo scaricato il simulatore nel capitolo precedente riguardo lambiente di lavoro e labbiamo
usato nel capitolo riguardo la prima applicazione. Ora tempo di dare unocchiata pi approfondita
al WebIde e le sue funzionalit base.
Per saperne di pi, date unocchiata alla pagina dedicata al WebIde su MDN.
Ricordati: se stai usando un dispositivo Firefox OS 1.1 o ancora pi vecchio devi usare il
Simulatore 1.1 e non lApp 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:
https://developer.mozilla.org/it/docs/Tools/WebIDE
59
WebIde
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 letichetta I miei progetti
Creare un nuovo progetto

Cliccando sullopzione Nuova Applicazione verr aperta una finestra che ci propone i modelli
disponibili.
60
WebIde
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 unapp di tipo privileged, quindi per forza una app packaged, con una
struttura minima da cui partire.
Il secondo un modello per unapp di tipo privileged, quindi per forza una app packaged, gi
funzionante e finita.
WebIde
61
Aggiungere Applicazioni packaged
Abbiamo gi parlato di applicazioni packaged durante la creazione della nostra prima applicazione,
adesso ora di provarla.
Una volta premuto Apri App Packaged viene apera 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.
62
WebIde
Memos stata aggiunta al WebIde
Aggiungere Applicazioni hosted
Una volta premuto Apri App Hosted viene aperta una finestra in cui puoi inserire lindirizzo web
a cui troviamo la tua applicazione, ovvero anche in questo caso lindirizzo web in cui disponibile
il file manifest.webapp.
WebIde
63
Per poter essere considerata come una app hoste un sito ha bisogno di un file manifest.webapp
valido.
Problemi con le applicazioni hosted
Se stai realizzando unapplicazione 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 limpossibilit di installare lapp.
Nota che il simulatore non segnala errori riguardo il MIME type sbagliato, importante controllare
queste cose prima di caricare lapplicazione 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 allapplicazione 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 letichetta Simulatori
64
WebIde
Le versioni del simulatore installate
Avviare lapplicazione
Una volta che il WebIde mostra lapplicazione avvia il simulatore e premi il pulsante triangolare per
installare lapplicazione ed avviarla sul simulatore.
I bottoni del WebIde
Licona dellapplicazione apparir nella schermata principale del Simulatore dopo la fine dellinstallazione. Fai clic sullicona per lanciarla.
65
WebIde
Aggiornare lapplicazione
Ogni volta che si cambiano i file e si vuole provare nel simulatore le modifiche sar necessario
premere il pulsante triangolare che reinstaller lapplicazione nel simulatore.
Debug
Dopo che lapplicazione sar installata nel simulatore potremo fare il debug it facendo clic sul
pulsante Debug del WebIde, il pulsante il cerchio con due righe verticali allinterno. Verr aperta
la Console JavaScript relativa allapplicazione.
Il terzo il pulsante che avvia la Console per il Debug
Pulsante di Debug
Dopo il clic su questo pulsante verr aperta una schermata come questa:
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
66
WebIde
Developer Tools connessi allapplicazione nel simulatore
COn gli strumenti connessi allapplicazione 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 lapplicazione 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
WebIde
67
effettuano toccando uno touchscreen e premendo con le dita dei pulsanti reali. Unesperienza utente
e sviluppatore completamente diversa.
Per sottolineare limportanza 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 linterfaccia 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 linterfaccia.
Per evitare di avere unesperienza cos frustrante indispensabile verificare sempre lapp 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 laddon per Firefox ADB Helper verr segnalato al WebIde che esiste il
tuo dispositivo e questo verr aggiunto sotto letichetta 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.
se lavori in ambiente Windows, altrimenti non ne hai bisogno
68
WebIde
Dispositivo connesso!
Una volta che la connessione effettuata sar possibile usare i pulsanti Aggiorna e Debug nel
WebIde per aggiornare e fare il debug dellapplicazione 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 dellApp 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.
Il Simulatore Firefox OS
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 ilWebIde
di cui abbiamo parlto nel capitolo precedente. Il contenuto di questo capitolo per quelle
persone che devono provare le applicazioni sulla versione 1.1 di Firefox OS.
70
Attenzione: Se stai usando Firefox 29 o successive e dispositivi con Firefox OS 1.1 o

precedenti hai bisogno di unaltra versione del Simulatore Firefox OS 1.1 che non
disponibile nelladd-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 unocchiata alla bug request #1001590 it.
Abbiamo installato il Simulatore Firefox OS nel capitolo Ambiente di sviluppo per Firefox OS e
lo abbiamo utilizzato nel capitolo La prima app. giunta lora 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 laggiunta di unapp 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.
http://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-5.0pre7-mac.xpi
http://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-5.0pre7-linux.xpi
http://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-5.0pre7-windows.xpi
https://bugzilla.mozilla.org/show_bug.cgi?id=1001590
https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator
71
Aggiungere unapplicazione packaged al simulatore
Dopo aver fatto clic sul pulsante evidenziato nellimmagine,si aprir una finestra di dialogo di
selezione file. Per aggiungere lapp prescelta al simulatore, sar sufficiente trovare la cartella
dellapplicazione. Se non ci sono errori nel file manifesto e nel file che avvia lapp, 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 lapp verr aggiornata sar necessario fare clic sul pulsante Aggiorna per aggiornare
lapplicazione 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 unapplicazione 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. Si noti che il simulatore
non segnala errori, anche di una certa rilevanza come, appunto, un MIME Type non valido, ma
importante verificare che tutto funzioni se si vuole pubblicare lapp su Firefox Marketplace.
La maggior parte delle applicazioni hosted non sono realizzate specificatamente per Firefox OS,
si tratta piuttosto di veri e propri siti web che sfruttano il design responsive per adattarsi a pi
72
dispositivi e risoluzioni. Solitamente queste app web funzionano grazie a un complesso back end
che deve essere in esecuzione per consentire un loro corretto funzionamento ed proprio per questo
motivo che si rende necessario verificarne il funzionamento con un vero server web per assicurarsi
che tutto funzioni correttamente.
Per caricare unapp hosted nel simulatore, inserire nella casella di testo, nel box in basso a sinistra,
lURL completa del manifesto dellapp e fare clic sul pulsante +.
Aggiungere unapplicazione hosted al simulatore
Dopo aver fatto clic sul pulsante, il simulatore verificher il file manifesto e, se non verranno rilevati
errori, lapp verr eseguita allinterno 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 lapp 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 lapp 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
lapplicazione sul simulatore. A questo punto, si aprir unistanza della Console JavaScript connessa
allapp in esecuzione nel simulatore. In basso sar possibile vedere il contenuto nel file manifest
tramite visualizzazione ad albero.
73
Il pulsate da premere
Alla pressione del pulsante scelto verr mostrata una schermata simile a quella di questa immagine:
Developer Tools connessi allapplicazione nel simulatore
Con gli strumenti di sviluppo connessi allapplicazione 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 lapp risulter funzionante nel simulatore, sar tempo di provarla su un vero dispositivo.
74
Provare lapplicazione 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. Unesperienza utente
e sviluppatore completamente diversa.
Per sottolineare limportanza 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 linterfaccia 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 linterfaccia.
Per evitare di avere unesperienza cos frustrante indispensabile verificare sempre lapp 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.
Inoltre, nel caso si risiedesse in un paese in cui i dispositivi Firefox OS sono gi in commercio,
possibile acquistare direttamente un dispositivo per lutente finale. Unaltra soluzione sostituire
Android con Firefox OS su alcuni dispositivi (alcuni dispositivi lo supportano!) ma, a meno di non
essere esperti e disposti a perdere del tempo con lhacking, non una cosa che mi sento di consigliare.
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.
75
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 linstallazione
dellapplicazione.
Il pulsante da premere per fare il push delle app sul dispositivo
Nellimmagine sottostante possibile vedere la finestra di richiesta permessi:
76
Non la foto migliore del mondo ma mostra la finestra dei permessi (scusate per la faccia ma erano le 4:25 di
mattina)
Con lapplicazione in esecuzione nel dispositivo possibile usare il remote debugging per aprire
unistanza della Console JavaScript collegata con lapp in modo da effettuare il debug.
Nel Gestore App, facendo clic su Dispositivo si apre una schermata con le informazioni del
dispositivo collegato o del simulatore.
Applicazioni del dispositivo!
Da questo dispositivo si possono debuggare le applicazioni installate tra cui anche quelle di sistema.
77
Tabella dei permessi!
In questa tabella c un riassunto dei permessi utilizzabili nel manifest a seconda del tipo di
applicazione che abbiamo visto qualche pagina fa.
Riassunto
Riassumendo, il simulatore Firefox OS spettacolare per creare applicazioni specifiche per Firefox OS
- ma ha alcuni limiti se si vuole sviluppare unapp 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 unapp Firefox OS. Nel prossimo
capitolo vedremo come distribuire unapplicazione 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 unapp conveniente
in questi due casi:
1. Si sta sviluppando unapp per uso interno aziendale o per una ristretta cerchia di utenti.
Pubblicandola su Firefox Marketplace, lapp sar disponibile a chiunque e si render necessario
implementare un sistema di autenticazione per consentire lutilizzo solo agli utenti autorizzati.
Ad esempio, nelle prime versioni dellapp Evernote era richiesta lidentificazione sui loro
server prima di poterla utilizzare.
2. Si dispone gi di un grosso bacino dutenza che possibile sfruttare per distribuire lapp. Un
esempio potrebbe essere un giornale, come il Financial Times, che pu limitarsi a rendere
disponibile lapp sul proprio sito per raggiungere la quasi totalit dei propri utenti. bene
ricordare che possibile distribuire lapp 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
lapp 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 lapp, o utilizzare
un particolare URL che quando aperto attiva lesecuzione della routine di installazione. In entrambi
i casi, allutente finale verr presentata una finestra di dialogo in cui gli verr chiesto di confermare
linstallazione.
App hosted
Nel caso la vostra app sia disponibile sul web sotto forma di un sito come facciamo a chiedere
allutente di installare la nostra app?
Ecco che qu arriva in soccorso Firefox ed una WebApi. Grazie a questo strumento possiamo chiedere
allutente di installare il nostro lavoro quando viene visitata la nostra pagina.
http://marketplace.firefox.com
Distribuire le app
79
Code for hosted app installation
1
2
3
4
5
6
7
8
var installapp = navigator.mozApps.install(manifestURL);

installapp.onsuccess = function(data) {
// A App was installed.
};
installapp.onerror = function() {
// A App was not installed, more information at
// installapp.error.name
};
Nellesempio riportato qui sopra manifestURL riporta lindirizzo del file manifest. Allesecuzione di
questo codice, il sistema chieder allutente se desidera installare lapp 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 sullinstallazione delle app.
App pacchettizzate
Linstallazione di app pacchettizzate funziona in modo analogo, per in questo caso anzich
utilizzare la funzione mozApps.install() utilizzeremo mozApps.installPackage(), come mostrato
nel codice desempio riportato qui di seguito.
Code for packaged app installation
1
2
3
var packageURL = "http://myapp.example.com/myapp.zip"; // <-- absolute url to pa\

ckage
var installapp = navigator.mozApps.installPackage(packageURL);
Nota: ho il sospetto che linstallazione di app pacchettizzate da siti diversi da Firefox

Marketplace non sia consentita nella versione 1.0.1 di Firefox OS. Nonostante lAPI sia
documentata, non ho mai provato di persona, quindi se qualche lettore ha lopportunit
di verificare questa mia supposizione, lo prego gentilmente di contattarmi affinch possa
aggiornare questo testo.
https://developer.mozilla.org/docs/Apps/JavaScript_API
Distribuire le app
80
Riassunto
In questo capitolo sono stati trattati i metodi di distribuzione delle app alternativi al sito Firefox
Marketplace grazie allutilizzo della API di Installazione e gestione delle Open Web Apps.
Questa parte lavevamo accennata nel capitolo sul boilerplate ma in questo capitolo abbiamo
visto le differenze ed alcuni esempi duso alternativi. Esistono molte altre routine disponibili, ad
esempio per controllare se lapplicazione 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 allinstallazione 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.
boilerplate.md
https://developer.mozilla.org/docs/Apps/JavaScript_API
Firefox Marketplace
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 lunica alternativa possibile. Se sei interessato a distribuire app
esternamente al Marketplace, leggi il capitolo precedente.
Per pubblicare unapp sul Marketplace necessario effettuare lidentificazione tramite Mozilla
Persona. Sar sufficiente fare clic sul pulsante Registrati e seguire le istruzioni. Una volta
effettuato laccesso al Marketplace sar possibile pubblicare lapp.
http://marketplace.firefox.com
https://login.persona.org/about
Firefox Marketplace
82
Passi che precedono lideazione di unapp

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 unapp 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 lapp rimandi a una pagina dalla quale non possibile
ritornare pi indietro (in altre parole se lutente nellutilizzo dellapp arriva a un punto morto)
lapp verr rifiutata.
Lapp deve avere unicona di 60x60 pixel e una descrizione chiara del suo funzionamento.
Lapp deve funzionare esattamente come riportato nella sua descrizione. Se nella descrizione
si dichiarano delle caratteristiche e nellutilizzo ne emergono delle altre, lapp verr respinta.
Se lapp richiede unautorizzazione particolare si obbligati a farne uso nel codice sorgente.
Dichiarare che si tratta di unapp con privilegi e non fare uso di alcuna API fra quelle riservate
alle app con privilegi, porter al rifiuto dellapp da parte dei revisori che chiederanno allo
sviluppatore di ripubblicarla come app semplice.
Lapplicazione deve essere accompagnata da uninformativa 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 unesplicita 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 dallinizio (i revisori sono ben lieti di approvare delle buone app).
Passi preliminari prima della pubblicazione

I passaggi richiesti per la pubblicazione di unapp sul Marketplace variano a seconda che si tratti di
unapp hosted o di unapp 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.
https://developer.mozilla.org/it/Marketplace/criteri_revisione_marketplace
83
Firefox Marketplace
Un errore comune a molti sviluppatori quello di selezionare la cartella che contiene i file dellapp
e di comprimerla. Come risultato il file zip contiene una cartella che a sua volta contiene lapp vera
e propria. Questo non il modo corretto per creare larchivio zip di unapplicazione Firefox OS.
Il modo corretto di creare larchivio zip consiste nel selezionare tutti i file e le cartelle dellapp in
modo che il file manifesto sia nel primo livello dellarchivio. Su sistemi operativi Mac e Linux
possibile aprire il Terminale, navigare fino alla directory dellapp 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 dellapp sul Marketplace

Ora che lapplicazione 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.
84
Firefox Marketplace
Le mie app
Arrivati nella pagina di gestione dei caricamenti, fare clic su Invia unapp dal menu superiore.
Invio di unapp
Come possibile notare dallo schermata qui sotto, questo link aprir il modulo per linvio di nuove
app.
85
Firefox Marketplace
Invio di nuove app
Da questa pagina si dovranno impostare le seguenti opzioni:

Se si tratta di unapp hosted o di unapp packaged.
Se si tratta di unapp gratuita o di unapp 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 unaltra pagina. In questo testo
tratteremo esplicitamente il caso di unapp pacchettizzata, ma la procedura analoga per unapp
ospitata.
Nel proseguo del capitolo faremo sempre riferimento a unapp 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 lupload del file, questo subir un processo automatico di verifica e al termine
verr mostrato un resoconto con una serie di opzioni.
86
Firefox Marketplace
Dopo aver caricato il file zip
Dalla schermata mostrata qui sopra, possibile notare che lapp 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, lultima 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 sullapp, 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 simulatore ci viene in
soccorso e ci permette di fare gli screenshots senza tanta fatica.
87
Firefox Marketplace
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.
88
Firefox Marketplace
Lo screenshot preso precedentemente
89
Firefox Marketplace
Le informazioni sulla nostra app
Inserimento di informazioni dettagliate
Dopo aver inserito in dettaglio le informazioni sullapp, il processo di caricamento completo.

Arriveremo a un passaggio dedicato alla certificazione guidata dellapplicazione, 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 lapprovazione da parte dei revisori del Marketplace. Complimenti,
lapp 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 dellapp.
Dalla pagina di gestione dellapp potremo anche vedere le statistiche di installazione, visita, supporto
ecc.
Per ulteriori informazioni riguardo al caricamento delle app consultare questo articolo del Centro
https://marketplace.firefox.com/developers/submissions
Firefox Marketplace
90
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 dellapplicazione 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 lapp 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 duso
come un utente normale e provano lapplicazione sui sistemi specificati nel marketplace.
Il recensore in caso di rifiuto dellapplicazione 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 dellapplicazione ma solo come lapplicazione funziona. Lo
sviluppatore avr sempre il beneficio del dubbio e potr rinviare lapplicazione 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 dellapplicazione quindi lo stesso dominio, deve
essere fornito con il mime-type application/x-web-app-manifest+json e lapplicazione non deve
contenere iframe. Questo impedisce ad altre persone di fare applicazioni hosted il cui sito non di
loro gestione.
Privacy
Per lapprovazione 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.
https://marketplace.firefox.com/developers/docs/submission
https://wiki.mozilla.org/Apps/Security
https://github.com/flamsmark/privacy-policy-template
https://developer.mozilla.org/en-US/Marketplace/Publishing/Privacy_policies
Firefox Marketplace
91
Contenuto
Non deve contenere materiale pornografico, codice maligno o promozione di materiale illegale/gioco
dazzardo/servizi illegali. Potremmo dire: regole del buon senso!
Funzionalit
Il revisore deve provare le funzionalit principali dellapplicazione, 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 lapplicazione 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 lapplicazione per Firefox Desktop/Firefox for Android/Firefox OS mobile o Firefox
OS per tablet.
Inserisci dei bei screenshot dellapplicazione 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 unemail che informer di nuovi aggiornamenti. Se invece stato scaricato da
altri siti, il mio consiglio quello di riscaricarlo da pagina ufficiale su Leanpub e registrare il
http://leanpub.com/quickguidefirefoxosdevelopment
Firefox Marketplace
92
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.
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.
http://twitter.com/soapdog
mailto:fxosquickguide@andregarzia.com
http://andregarzia.com
http://www.mozilla.org/en-US/contribute/
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 lutilit 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:
Action menu
Buttons
Confirm
Drawer
Edit Mode
Filters
Headers
Input Areas
Lists
Progress And activity
Scrolling
Seek Bars
http://buildingfirefoxos.com/building-blocks/
http://buildingfirefoxos.com/building-blocks/action-menu.html
http://buildingfirefoxos.com/building-blocks/buttons.html
http://buildingfirefoxos.com/building-blocks/confirm.html
http://buildingfirefoxos.com/building-blocks/drawer.html
http://buildingfirefoxos.com/building-blocks/edit-mode.html
http://buildingfirefoxos.com/building-blocks/filters.html
http://buildingfirefoxos.com/building-blocks/headers.html
http://buildingfirefoxos.com/building-blocks/input-areas.html
http://buildingfirefoxos.com/building-blocks/lists.html
http://buildingfirefoxos.com/building-blocks/progress-and-activity.html
http://buildingfirefoxos.com/building-blocks/scrolling.html
http://buildingfirefoxos.com/building-blocks/seek-bars.html
94
Altro
Status
Switches
Tabs
Toolbars
Value Selector
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 unapproccio grafico al lavoro.
Web Components
I Web Components sono una tecnologia emergente che attualmente nello stato di Working Draft
dal W3C ma viene 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 su
richiesta.
Questa idea permette di avere ad esempio un tag <map> per visualizzare una mappa tramite Google
Maps o OpenStreetMap, un tag <calendar> per permettere allutente 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 dellapplicazione - una comoda barra per contenere titolo e pulsanti
http://buildingfirefoxos.com/building-blocks/status.html
http://buildingfirefoxos.com/building-blocks/switches.html
http://buildingfirefoxos.com/building-blocks/tabs.htm
http://buildingfirefoxos.com/building-blocks/toolbars.html
http://buildingfirefoxos.com/building-blocks/value-selector.html
http://buildingfirefoxos.com/transitions/app-invokes-app.html
http://buildingfirefoxos.com/downloads/
http://www.w3.org/TR/2013/WD-components-intro-20130606/
http://www.polymer-project.org/
http://mozbrick.github.io/
http://mozbrick.github.io/docs/brick-appbar.html
95
Altro
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 - 10 chat in 10 schede giusto?
Form - nome, cognome e indirizzo? Eccoti servito
Menu - vi serve un menu?
Storage-IndexdDB - per conservare informazioni sul dispositivo dellutente
Per mostrare luso di questi componenti, Daniele ha realizzato un boilerplate di nome Brickly che
potete studiare per prendere confidenza con i Web Components.
Non nellinteresse della guida approfondire questa libreria ma solo pubblicizzare questo materiale
gi disponibile alluso.
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 laccesso. Nella schermata che
troverete davanti (detta Dashboard) alla destra della vostra immagine di profilo c un icona a forma
di pi che permette di creare una repository.
Una repository pu essere descritta semplicemente come una cartella che contiene un progetto e la
storia dei suoi file da quando lavete creata. Questo ci permette di tenere traccia delle modifiche ai
file nel tempo.
http://mozbrick.github.io/docs/brick-calendar.html
http://mozbrick.github.io/docs/brick-deck.html
http://mozbrick.github.io/docs/brick-flipbox.html
http://mozbrick.github.io/docs/brick-layout.html
http://mozbrick.github.io/docs/brick-action.html
http://mozbrick.github.io/docs/brick-tabbar.html
http://mozbrick.github.io/docs/brick-form.html
http://mozbrick.github.io/docs/brick-menu.html
http://mozbrick.github.io/docs/brick-storage-indexeddb.html
http://mte90.github.io/Brickly
96
Altro
aggiungi una 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 nuova repository
In questa nuova schermata presente una barra sulla destra che permette di gestire il progetto, fate
97
Altro
click su Settings
e scorrete fino alla sezione che ha per titolo Github Pages dove troverete il pulsante Automatic
Page Generator, premetelo.
genera pagina automatica
La pagina che verr creata servir come base per lapplicazione, 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 allindirizzo:
http://miousername.github.io/nomedelprogetto. Potete trovare lindirizzo 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):
98
Altro
Una delle pagine disponibili
Per far si che lapp 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 lindirizzo 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
1
2
3
4
"icons" : {
"128" : "/nomedelprogetto/cartellaIcone/icona128.png",
"60" : "/nomedelprogetto/cartellaIcone/icona60.png"
}
Infine per caricare lapplicazione 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:
99
Altro
$ 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:

1
2
3
4
$
$
$
$
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 lindirizzo del vostro progetto vedrete anzich la pagina generata automaticamente
lHomepage 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 unapp selezionate Hosted app e inserite lindirizzo
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 linstallazione
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 lapplicazione.
https://github.com/alexgibson/concierge
http://alxgbsn.co.uk/concierge/
Altro
1
2
3
4
5
6
7
8
9
10
11
12
100
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 lutente 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!
https://github.com/alexgibson/concierge
https://www.mozilla.org/it/firefox/developer/
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
http://mozilla.org)
http://www.mozillaitalia.org
http://marketplace.firefox.com/developers
http://developer.mozilla.org/
http://www.mozilla.org/it/firefox/os/
http://wiki.mozilla.org/WebAPI

Guida Veloc e Sviluppo Fire Foxos

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Guida Veloc e Sviluppo Fire Foxos

Transféré par

Droits d'auteur :

Formats disponibles

Guida veloce allo sviluppo per Firefox OS

Daniele Scasciafratte and Edoardo Putti

This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported

Ambiente di sviluppo per Firefox OS . . . . . .

Strumenti per sviluppatori . . . . . . . . . .

Appendice 1: Link utili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Questo testo in beta perenne

Me, me stesso e io.

Com nato questo testo

Come contattare lautore

Illustrazione della copertina

Chi dovrebbe leggere questo testo

Migliori tecniche di programmazione VS introduzione

JavaScript: The Good Parts: The JavaScript Book.

Commenti e Pull Requests

Portuguese Version: Guia Rapido para Desenvolvimendo para Firefox OS.

Storico delle versioni

La piattaforma che HTML5 merita

Accesso Hardware tramite le WebAPI

Libert di sviluppare e di distribuire

Ambiente di sviluppo per Firefox OS

Di che cosa abbiamo bisogno?

Configurazione del WebIde

Ambiente di sviluppo per Firefox OS

Dove puoi trovare WebIde

Dopo lapertura dellApp Manager vedrai una schermata come questa.

Ambiente di sviluppo per Firefox OS

WebIde viene aperto in una nuova finestra

La barra degli strumenti di WebIde

Ambiente di sviluppo per Firefox OS

Il men del simulatore con le varie opzioni

Usare un dispositivo Firefox OS per lo sviluppo

Ambiente di sviluppo per Firefox OS

Senza e con ADB helper

File manifesto dellapplicazione

Lapplicazione Memos vista su Firefox Marketplace

Memos nel simulatore

Il nostro primo manifest

Le propriet del manifest

"chrome": { "navigation": true }

Livelli di accesso per la sicurezza

Livello di accesso alle API

Esempio #1: Effettuare chiamate

var call = new MozActivity({

Esempio #2: Memorizzare un contatto

var contact = new mozContact();

Esempio #3: Selezionare una immagine dalla fotocamera

var getphoto = new MozActivity({

Questo un altro esempio di WebActivity. Le funzioni (activity) dellAPI WebActivities sono

Esempio di pick activity

Memos, un blocco note minimale

Memos, schermata di modifica

Memos, finestra di conferma della cancellazione

Creare il manifesto dellapp

Analizziamo i campi di questo file manifesto:

Scriviamo il codice HTML

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

Includere Gaia Building Blocks

Costruiamo la schermata principale

Costruire la schermata di modifica

<section role="region" id="memo-detail" class="skin-dark hidden">

Nella parte superiore dello schermo, rappresentata dallelemento <header> si trovano:

Manipoliamo il codice JavaScript

var dbName = "memos";