guida veloc e sviluppo fire foxos
DESCRIPTION
Guida ufficale tradotta in italianoTRANSCRIPT
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 Publishingprocess. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools andmany iterations to get reader feedback, pivot until you have the right book and build traction onceyou do.
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 UnportedLicense
Indice
Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iQuesto testo è in beta perenne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iMe, me stesso e io. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iCom’è nato questo testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iRimanere aggiornati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iDonazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiCome contattare l’autore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiIllustrazione della copertina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiChi dovrebbe leggere questo testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiMigliori tecniche di programmazione VS introduzione per principianti . . . . . . . . . . . iiiCommenti e Pull Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiTraduzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiStorico delle versioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Introduzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1La piattaforma che HTML5 merita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Accesso Hardware tramite le WebAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Libertà di sviluppare e di distribuire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Ambiente di sviluppo per Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Il motore Gecko . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Di che cosa abbiamo bisogno? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Configurazione del WebIde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Usare un dispositivo Firefox OS per lo sviluppo . . . . . . . . . . . . . . . . . . . . . . . . 8Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Concetti Base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10File manifesto dell’applicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Tipi di Applicazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Livelli di accesso per la sicurezza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18WebAPI di Mozilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
INDICE
La prima app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Creare il manifesto dell’app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Scriviamo il codice HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Manipoliamo il codice JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Provare l’applicazione col simulatore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Firefox OS Boilerplate App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Multilingua . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Strumenti per sviluppatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Introduzione alla Visualizzazione flessibile . . . . . . . . . . . . . . . . . . . . . . . . . . 52Strumenti di sviluppo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
WebIde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Aggiungere Applicazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Avviare il simulatore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Avviare l’applicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Aggiornare l’applicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Debug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Provare le applicazioni su un dispositivo reale . . . . . . . . . . . . . . . . . . . . . . . . . 66Connettere un dispostivo Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Il Simulatore Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Aggiungere Applicazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Debug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Provare l’applicazione su un dispositivo reale . . . . . . . . . . . . . . . . . . . . . . . . . 74Connessione con un dispositivo Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . 74Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Distribuire le app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78App hosted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78App pacchettizzate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Firefox Marketplace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Passi che precedono l’ideazione di un’app . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Passi preliminari prima della pubblicazione . . . . . . . . . . . . . . . . . . . . . . . . . . 82Pubblicazione dell’app sul Marketplace . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83Le informazioni sulla nostra app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Guide linea per il marketplace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90Privacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
INDICE
Contenuto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Funzionalità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Usabilità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Alcuni consigli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Riassunto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Altro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Gaia Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Web Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Hosting App su Github . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Appendice 1: Link utili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
INDICE i
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 eperché mette sempre l’utente al primo posto.
Alla comunità brasiliana di Mozilla per avermi accolto e per essere così incredibili.
Al mio mentore GSoC Marcos Caceres, al Mozilla WebAPI Team, al Mozilla Tech Evangelist Teame 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 secondole segnalazioni dei lettori. Poiché alcune API sono in via di sviluppo su Firefox OS, è meglioassicurarsi di aver scaricato l’ultima versione disponibile di questo testo.
Me, me stesso e io.
In molte parti del testo esprimo le mie opinioni personali e faccio delle scelte un po’ differentidalla maggior parte degli sviluppatori, soprattutto se questo può servire a descrivere un concettoin modo più semplice. Cercherò sempre di essere chiaro e di motivare le mie opinioni personali. Aogni modo, se ci sono degli errori in quello che dico, correggerò il testo e aggiornerò il testo. Perulteriori informazioni a riguardo fare riferimento alla sezione Commenti e Pull request.
Com’è nato questo testo
Inizialmente, avevo cominciato a scrivere il testo nel mio tempo libero - ma grazie all’aiuto del miomentore al Google Summer of Code (GSoC), Marcos Caceres, questo testo è diventato parte del mioprogetto GSOC - che aveva lo scopo di creare risorse utili per gli sviluppatori Firefox OS. Quindiun grosso ringraziamento a Google che finanzia questa opera e al Mozilla WebAPI team per avermiaccolto all’interno del loro gruppo durante l’estate.
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 gliaggiornamenti automatici. L’auspicio è di aggiornare il testo qualche volta al mese. Se si è ottenutoquesto testo da un amico o da qualche altro sito, si vada alla pagina su Leanpub per scaricare eregistrarsi in modo da ricevere le notifiche sugli aggiornamenti.
Donazioni
Scrivere un testo richiede molto lavoro e, dopo l’esperienza del Google Summer of Code 2013, vorreidedicare 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 paginadi download su Leanpub. Per coloro che preferiscono donare utilizzando PayPal, posso riceveredonazioni utilizzando l’account [email protected].
Indipendentemente dalle donazioni, è importante inserire il proprio indirizzo email nel modulo didownload per rimanere aggiornati sulle future modifiche apportate al testo.
Come contattare l’autore
Per opinioni e commenti inviare un email a [email protected]³. 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 & PullRequest.
Illustrazione della copertina
La copertina è stata creata da Raphael Eckhardt, un disegnatore ed illustratore brasiliano. È possibileosservare 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 Javascriptche vogliono creare applicazioni mobile per Firefox OS. L’insegnamento di HTML, CSS e Javascriptè lo scopo del testo. Verranno consigliati dei buoni libri che trattano questi argomenti.
²http://leanpub.com/quickguidefirefoxosdevelopment³mailto:[email protected]⁴http://andregarzia.com⁵http://twitter.com/soapdog⁶http://raphaeleckhardt.com/
INDICE iii
Migliori tecniche di programmazione VS introduzioneper principianti
Gli sviluppatori esperti noteranno che talvolta negli esempi non seguo le migliori tecniche diprogrammazione. Anche se sto cercando di evitare l’uso degli anti-pattern nel testo, voglio altresìevitare l’uso delle immediate function e altre tecniche simili di programmazione. Il motivo principaledi questa scelta è che questo testo vuole essere un’introduzione all’argomento. I programmatoriesperti saranno in grado di modificare il codice mentre i principianti saranno in grado di compren-derlo. Il codice è, ovviamente, funzionante e mi propongo di aggiornare e migliorare le tecniche diprogrammazione 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 suggerimen-to. Il contenuto in lingua inglese di questo testo si trova su GitHub¹¹ ed è scritto in Markdown (conalcune specifiche estensioni di Leanpub). Per commenti, correzioni di bug e miglioramenti inviareuna 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 allostorico versioni. Entrambe le versioni sono disponibili gratuitamente su internet:
⁷http://shop.oreilly.com/product/9780596517748.do⁸http://shop.oreilly.com/product/9780596806767.do⁹http://shop.oreilly.com/product/0636920027713.do¹⁰http://shop.oreilly.com/product/0636920027713.do¹¹https://github.com/soapdog/firefoxos-quick-guide¹²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 l’aiuto per tradurre questo testo in lingue diverse (e correggere il mioInglese).
Storico delle versioni
Versione 0.3
Aggiunto nuovo materiale come Brick, Firefox OS Boilerplate, ADB Helper ed il multilingua graziea Daniele Scasciafratte, la sezione del Manifest invece è di Giammarco Di Lella.Con l’aiuto di Edoardo Putti e Niccolo Cantù la guida è stata revisionata ed è stato aggiuntomaterialenuovo rispetto all’originale inglese.
Versione 0.2
Testo rivisitato e corretto daMarcos Caceres, membro del MozillaWebAPI team. Il contenuto di ognicapitolo è 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 dibattitura, errori grammaticali e altre cose sbagliate. L’inglese non è la mia lingua principale quindicorreggetemi per eventuali errori. La versione che il lettore sta leggendo ha avuto inizio il 20 agostodel 2013, una guida veloce distribuita alla BrazilJS Conference¹⁷ tenutasi tra il 22 e il 23 dello stessomese. In pratica questo testo è stato scritto in soli due giorni.
Sto utilizzando Leanpub¹⁸ per scrivere il testo. Questo sistema mi permette di scrivere velocementee di gestire il progetto in modo facile rimanendo sano di mente. Questa versione è la traduzioneletterale dell’originale in portoghese.
¹⁴http://leanpub.com/guiarapidofirefoxos¹⁵https://github.com/soapdog/firefoxos-quick-guide¹⁶https://github.com/MozillaItalia/firefoxos-quick-guide¹⁷http://braziljs.com.br/¹⁸http://leanpub.com
IntroduzioneFirefox OS
Firefox OS
Firefox OS¹⁹ è una nuova piattaforma mobile sviluppata da Mozilla²⁰ e dai suoi partner. Dispositivicon Firefox OS sono già disponibili in molti paesi e molti altri ne sono previsti entro la fine dell’anno.
Finalizzata per i mercati emergenti, la missione di Firefox OS è quella di portare il prossimo miliardodi persone online. Per raggiungere questo obiettivo, i dispositivi con Firefox OS sono costruiti perfornire un ottimo primo smartphone a prezzi competitivi. I dispositivi con Firefox OS non devonoessere confrontati con smartphone di fascia alta come Apple iPhone 5S e Samsung Galaxy S4; sonorealizzati per essere un’alternativa ai telefoni avanzati in modo che gli utenti di questi dispositivipossano compiere il passaggio a Firefox OS con un costo accessibile e ricevere una esperienzasmartphone completa.
¹⁹http://mozilla.org/firefox/os/²⁰http://mozilla.org
Introduzione 2
Nei mercati in via di sviluppo come il Brasile o la Colombia, smartphone con prestazioni decentisono solitamente troppo costosi per il consumatore medio. Le persone sono in grado di acquistaretelefoni a basso costo, le piattaforme di questi telefoni però sono progettate per dispositivi di fasciaalta - questo porta l’hardware del telefono ad avere problemi nelle prestazioni, tutto ciò ha comerisultato una pessima esperienza mobile per l’utente finale. Firefox OS è progettato specificatamenteper funzionare su hardware limitato fornendo una discreta esperienza utente.
Un altro fattore distintivo di Firefox OS è l’essere un ecosistema aperto. Si tenga presente che i sistemioperativimobile attuali sono paragonabili a dei silos proprietari, dove ogni produttore ha il privilegiodi obbligare gli sviluppatori e utenti a seguire i propri desideri a prescindere dalla loro volontà (siricordi a proposito quando la Apple ha vietato l’uso dei linguaggi diversi da Objective-C nel suo appStore). 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 autilizzare i loro Software Development Kit ( abbreviato in SDK). Per realizzare un’app nativa sia periOS che Android utilizzando i sistemi ufficiali, sarà necessario programmare un’app in Objective-Ced un’altra in Java rispettivamente. Dal punto di vista di uno sviluppatore questo significa non poterriutilizzare 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 duevolte.
Firefox OS si differenzia grazie all’utilizzo di “HTML5” come piattaforma di sviluppo. HTML5 èun termine di marketing utilizzato per indicare le tecnologie web in continua evoluzione, ovvero:HTML, JavaScript e CSS. Questi standard privi di brevetti sono supportati dai principali browserweb, 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 OSsono 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 pervideogiochi. Il linguaggio di programmazione del Web, JavaScript, è uno dei linguaggi più diffusial mondo. Come già accennato, quando le persone parlano di HTML5 di solito si riferiscono allacombinazione di tre tecnologie, ovvero: HTML, CSS e JavaScript. I recenti progressi in HTML hannointrodotto moltissime nuove caratteristiche rispetto a XHTML 1.0 e HTML 4.01 - nuovi campi peri form , WebSocket, markup più semantico. I progressi in CSS hanno introdotto moltissime nuovecaratteristiche, come Flexbox e animazioni CSS, che rendono più semplice creare layout responsive.I recenti progressi in JavaScript hanno portato miglioramenti significativi alle prestazioni e nuovefunzionalità, rimanendo facili da utilizzare sia per i principianti che per gli sviluppatori esperti.
Firefox OS è, in parole povere, un’estensione del web mobile. Mozilla ha aperto la sua piattaforma amilioni di sviluppatori web rendendo HTML5 l’elemento principale. Anche se ci sono altri produttori
²¹http://phonegap.com
Introduzione 3
di browser che supportano HTML5 nei loro telefoni, Firefox OS va oltre, offrendo una famiglia diAPI per accedere all’hardware e al sistema utilizzando JavaScript. Queste API sono conosciute comeWebAPI.
Accesso Hardware tramite le WebAPI
Alcune piattaforme precedenti hanno provato a creare sistemi operativi che utilizzavano tecnologieweb per la creazione di applicazioni. Per esempio, quando venne presentato l’iPhone, l’unicomodo per creare applicazioni era usare tecnologie web. Queste applicazioni web erano limitatedal fatto che non avevano accesso all’hardware o al dispositivo - quindi potevano esserci solopoche applicazioni. Quando Apple ha permesso di sviluppare in Objective-C, conseguentementedi accedere alle funzionalità del dispositivo, ha portato una ventata di innovazione. Purtroppo, leweb app non hanno ottenuto accesso alle caratteristiche del dispositivo e sono state abbandonatecome “cittadini di seconda classe” - questo le ha rese meno interessanti sia per gli sviluppatori cheper gli utenti, in quanto non competitive in confronto alle app native di quei sistemi.
Quando scriviamo “funzionalità del dispositivo” ci riferiamo all’accesso hardware, di funzionalitàdel sistema e di servizi: parliamo di caratteristiche come aggiornamento della rubrica, invio di SMS,accesso alla fotocamera ed alla galleria. Su Firefox OS, le WebAPI²² permettono di accedere a moltedi queste funzionalità.
Un’altra piattaforma precedente, WebOS, offriva accesso all’hardware via JavaScript ma non ha maistandardizzato le sue API.Mozilla lavora con ilW3C e le altre parti interessate per rendere leWebAPIuno standard aperto in modo che altri browser le adottino. Poiché queste API sono integrate in altribrowser, le applicazioni richiederanno sempre meno modifiche per le varie piattaforme.
È importante ricordare che le WebAPI non sono un’esclusiva dei dispositivi Firefox OS. Mozillale 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 perAndroid.
Libertà di sviluppare e di distribuire
Come qualunque cosa made in Mozilla, Firefox OS è costruito per l’apertura e la libertà. Tutti glisviluppatori possono seguire il repo di Mozilla-B2G²³ su GitHub. Con Firefox OS si è liberi di seguiree contribuire allo sviluppo del sistema e anche di pubblicare le proprie applicazioni nei canali diFirefox Marketplace²⁴. La particolarità di Firefox OS è che tutte le applicazioni di sistema sono scrittein HTML5, permettendo a chiunque di vederle e studiare come funzionano.
L’idea alla base di tutto è che Mozilla non mette alcun limite. Se si vuole prendere il codice sorgentedel sistema e cambiarlo per le proprie necessità, beh, si può fare. Se si deve realizzare un’applicazione
²²https://wiki.mozilla.org/WebAPI²³https://github.com/mozilla-b2g/B2G²⁴https://marketplace.firefox.com/
Introduzione 4
per uso interno alla propria azienda, se si vogliono distribuire le proprie creazioni esclusivamentesul proprio sito, ciò è possibile. Solitamente nelle altre piattaforme si è bloccati dallo store ufficiale,che è l’unico canale di distribuzione per le applicazioni. Firefox OS ha un market ufficiale chiamatoFirefox Marketplace che ha un processo di approvazione, ma si è liberi di distribuire le proprie appfuori dal negozio. Analogamente a quanto accade sul web dove è possibile scegliere qualunque hostper il proprio sito, con Firefox OS è possibile distribuire la propria app utilizzando qualunque host.
Purtroppo esiste una piccola controindicazione: per ragioni di sicurezza, l’utilizzo di alcune WebAPIsensibili non può essere consentito a chiunque. Per distribuire le app che utilizzano alcune delle API“con privilegi” si rende necessario sottoporre l’app stessa alla revisione dello staff Mozilla, che dovràfirmare digitalmente l’app prima di poterla pubblicare.
Riassunto
HTML5 è progettato per rimanere e migliorare nel tempo. Firefox OS è il nuovo sistema operativomobile aperto di Mozilla completamente basato su tecnologie web. Questo sistema è costruitoper l’apertura e offre una implementazione robusta di HTML5 che va oltre le altre piattaforme,offrendo delle WebAPI che sono una raccolta di API per accedere al sistema operativo e all’hardwareutilizzando JavaScript. Queste nuove API sono state standardizzate con il World Wide WebConsortium (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 OSIl motore Gecko
I browser utilizzano diversi motori di rendering per mostrare le pagine web: Google Chrome eOpera utilizzano Blink (un fork di WebKit), Internet Explorer utilizza Trident, mentre Safari utilizzaWebKit. Mozilla ha il suo motore, chiamato Gecko, che viene utilizzato da Firefox desktop, Firefoxper Android e Firefox OS. Poiché questi prodotti usano lo stesso motore, è possibile sviluppare perFirefox 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 dasolo non basta, se non hai un disposititvo devi installare anche i simulatori per fare le prove. Mozillaha una documentazione completa a riguardo²⁹ se vuoi approfondire l’argomento.
WebIde può gestire più versioni di Firefox OS quindi puoi installare le versioni 1.3, 1.4 e 2.0 senzaavere 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 rispettoa quella di Firefox desktop. Questo perché il ciclo di rilascio di Firefox OS è più lento rispetto a quello della versione Desktop. In pratica, questovuol dire che alcune funzionalità non sono disponibili (o non funzionano come immaginato) quando si trasportano su Firefox OS - quindi è sempreimportante verificare che la propria applicazione funzioni su un dispositivo Firefox OS. Inoltre, bisogna ricordarsi che gli utenti possono utilizzareversioni differenti di Firefox OS, quindi alcune potrebbero non avere tutte le funzionalità richieste. È importante fornire sempre un’alternativa in casoalcune 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
Ambiente di sviluppo per Firefox OS 6
Adesso è il momento di vedere come funziona WebIde. Clicca su Strumenti -> Web Developer ->WebIde.
Dove puoi trovare WebIde
Dopo l’apertura dell’App Manager vedrai una schermata come questa.
Ambiente di sviluppo per Firefox OS 7
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 unaparticolare versione del simulatore.
Ambiente di sviluppo per Firefox OS 8
Il menù del simulatore con le varie opzioni
Fai clic su Installa il simulatore e seleziona la versione da installare facendo click sul bottonerelativo. 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 comefare:
• Installa adb³⁰• Installa l’addon per Firefox ADB Helper³¹ per far comunicare Firefox con il tuo dispositivo
Se hai fatto tutto per bene e colleghi il tuo dispositivo al computer Firefox lo rileverà e verrà mostratitra 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/
Ambiente di sviluppo per Firefox OS 9
Senza e con ADB helper
Per fare debugging remoto il sistema deve riconoscere il dispositivo quindi sono necessari gliAndroid Tools o in parole povere adb. Come abbiamo accennato Firefox OS è basato su Androide quindi possiamo sfruttare alcuni dei suoi strumenti da sviluppatore come adb, che permette dipassare 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 perFirefox OS è il browser Firefox per desktop (e un buon editor di testo).
Ora che abbiamo configurato l’ambiente di sviluppo, siamo pronti per soffermarci su qualcheconcetto base prima di creare la nostra prima app.
Concetti BasePrima di sporcarci le mani con la nostra prima applicazione, vediamo di scoprire alcuni concettibase per lo sviluppo su Firefox OS. Nell’introduzione abbiamo detto che le applicazioni Firefox OS,analogamente alle pagine web, sono basate su HTML5, tuttavia non abbiamo spiegato cosa rende leapplicazioni per Firefox OS differenti dalle pagine web classiche.
Se utilizziamo le nostre conoscenze riguardo le altre piattaforme mobile (Android o iOS per citare ipiù diffusi) possiamo osservare che le applicazioni native hanno delle caratteristiche ben definite:
• Un nome e un’icona con cui l’utente lancia l’applicazione.• Accesso ai servizi di sistema (dati utente, notifiche) e funzionalità hardware (sensori).
Osservando il quadro generale, un’applicazione Firefox OS non è altro che una pagina web con unaicona, un nome e di solito è in grado di funzionare anche non in linea (decisione che spetta allosviluppatore). Tutti i dati dell’applicazione come nome, icona ecc. sono definiti nel file manifestodell’applicazione, che sarà l’argomento della prossima sezione.
File manifesto dell’applicazione
Il manifesto³² è un file JSON³³ obbligatorio che contiene i metadati dell’applicazione. Questo fileè chiamato manifest.webapp e viene posizionato accanto al classico file HTML index.html, nellastessa cartella. Questi metadati servono al sistema per sapere il nome dello sviluppatore, la versione,i permessi richiesti per le varie API, l’icona, le lingue in cui è disponibile e molto altro.
Manifest d’esempio
1 {
2 "name": "Memos",
3 "version": "1.1",
4 "description": "A simple memo taking app",
5 "launch_path": "/index.html",
6 "permissions": {
7 "storage": {
8 "description": "Required for storing and retrieving notes."
9 }
³²https://developer.mozilla.org/docs/Apps/Manifest³³http://json.org
Concetti Base 11
10 },
11 "developer": {
12 "name": "Andre Garzia",
13 "url": "http://andregarzia.com"
14 },
15 "icons": {
16 "60": "/style/icons/icon_60.png",
17 "128": "/style/icons/icon_128.png"
18 }
19 }
Sopra possiamo vedere il manifest di un’applicazione chiamata Memos³⁴. Tra le altre cose descrivechi ha creato l’applicazione, quali icone usare, qual è il nome dell’applicazione, quale file è usatoper lanciare l’applicazione (in questo caso index.html), quali permessi d’accesso hardware richiedel’applicazione, ecc. Questo file è usato da Firefox OS per aggiungere l’applicazione alla schermataprincipale e per mostrare sul Firefox Marketplace le informazioni dell’applicazione.
³⁴Questa applicazione di esempio per Firefox OS è disponibile su Firefox Marketplace e il codice sorgente è su GitHub.
Concetti Base 12
L’applicazione Memos vista su Firefox Marketplace
Si noti come le informazioni del file manifesto sono utilizzate dal sistema per aggiungere leapplicazioni alla schermata principale, come è possibile osservare nella seguente schermata.
Concetti Base 13
Memos nel simulatore
Riunendo il codice HTML, CSS, JavaScript e un file manifesto è già possibile avere un’applicazionepronta per funzionare su Firefox OS. Continuando nell’esplorazione dei concetti base per lo sviluppodi un’app, vediamo ora quali sono i vari tipi di applicazioni possibili.
Il nostro primo manifest
Come possiamo notare, il manifest è composto da un elenco di informazioni che scriviamo separandoil nome dell’informazione dal suo valore tramite il carattere “:”, e separiamo ogni informazione conuna “,”, come per un elenco.
Cosa mettere nel manifest
È obbligatorio inserire name, description e icons; il campo launch_path indica il file da avviare(necessario se l’app è packaged) e il campo developer che con le sue proprietà name e url definiscono,rispettivamente, nome e URL dello sviluppatore dell’applicazione (utili nel caso vogliate pubblicarela vostra app sul Mozilla Marketplace).
Le proprietà del manifest
Il manifest descrive una marea di proprietà utili, perciò vediamo il nome e l’utilità di ognuna.
Concetti Base 14
activities
La proprietà activities specifica quali Web Activities supporta la nostra applicazione. Registrarela vostra applicazione come una “Web Activities” vi permette di rendere la vostra applicazioneaccessibile alle altre. Volendo fare un’esempio, se voi sviluppate un applicazione che permette dicondividere le vostre foto su di un sito, potreste implementare la web activities share; in questomodo,quando l’utente prova a condividere una foto dall’app galleria, apparirà anche la vostra applicazionetra quelle che possono svolgere questo compito. La sintassi di questo campo è un po’ complessa, perquesto vi rimando alla pagina di documentazione su MDN³⁵.
chrome
Il campo chrome indica se la vostra applicazione fa uso dei pulsanti di navigazione predefiniti dalsistema come vediamo nell’immagine
Nota: tenete presente che questa funzionalità va utilizzata solo se non è possibile implementare unasoluzione propria, poiché le linee guida per l’user experience prevedono l’inserimento di un tastoback da parte dell’applicazione.La sintassi della proprietà è la seguente:
1 "chrome": { "navigation": true }
default_locale
Questo parametro è necessario quando è presente anche la proprietà locales ed indica qual è la linguapredefinita dell’applicazione ovvero quella che verrà usata se nel sistema è impostata una lingua percui non avete traduzioni.
Esempio per l’inglese
1 "default_locale": "en"
description
La descrizione dell’applicazione (massimo 1024 caratteri), siate il più chiari e sintetici possibile perchéquesto è il testo che verrà visualizzato sul 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) nscondendola barra delle notifiche.
icons
Anche questa proprietà era presente nell’esempio e serve per far sapere quali risoluzioni dell’iconamettiamo a disposizione. Naturalmente è bene fornire la stessa icona con più risoluzioni, in modo cheil dispositivo prenda quella adeguata; pensate a come sarebbe piccola l’icona pensata per il telefonorispetto a quelle del tablet o, ancora peggio, rispetto a quelle di uno schermo da 40 pollici. Alcunedimensioni sono obbligatorie per il Mozilla Marketplace.
installs_allowed_from
Indica una serie di siti a cui è permesso installare l’applicazione (questo campo è inutile se pubblicatela vostra app solamente nel Mozilla Marketplace). Se usate il vostro sito come base per la vostraapplicazione allora dovete inserirlo in questo campo.
launch_path
Ne abbiamo già parlato nel codice di esempio più in alto.Questo campo indica il percorso di lancio dell’applicazione che deve essere relativo ed è obbligatorioper le app packaged.
locales
Questa proprietà ci permette di impostare i dati come URL o description per le varie lingue in cui èrilasciata l’app.
Esempio:
1 "locales": {
2 "es": {
3 "description": "¡Acción abierta emocionante del desarrollo del Web!",
4 "developer": {
5 "url": "http://es.mozillalabs.com/"
6 }
7 },
8 "it": {
9 "description": "Emozionati nello sviluppo libero del Web!",
10 "developer": {
11 "url": "http://it.mozillalabs.com/"
12 }
13 }
14 }
messages
Concetti Base 16
Indica quali messaggi del sistema la vostra app può leggere per eseguire del codice specifico.
Esempio:
1 "messages": [
2 { "telephony-new-call": "/dialer/index.html#keyboard-view" },
3 { "bluetooth-dialer-command": "/dialer/index.html#keyboard-view" },
4 { "headset-button": "/dialer/index.html#keyboard-view" },
5 { "notification": "/dialer/index.html#keyboard-view" },
6 { "alarm": "/facebook/fb_sync.html" }
7 ]
Il campo messages così compilato permette, per esempio, di aprire la pagina /dialer/index.html
all’ancora #keyboard-view quando l’evento telephony-new-call viene rilevato dal telefono.
name
Indovinate? Il nome della vostra app!
orientation
Questa proprietà imposta l’orientamento predefinito dell’applicazione, i due valori ammessi sono“landscape” e “portrait” (predefinito). Lasciatela vuota o addirittura nonmettetela se non vi interessa.
origin
Indica un’URL che l’applicazione può utilizzare al posto dell’UUID, è raro utilizzare questo valore.
permissions
Proprietà chiave del manifest, permette di chiedere all’utente il permesso di utilizzare elementispecifici del telefono, come la geolocalizzazione, i contatti, …
Esempio:
1 "permissions": {
2 "contacts": {
3 "description": "Required for autocompletion in the share screen",
4 "access": "readcreate"
5 },
6 "alarms": {
7 "description": "Required to schedule notifications"
8 }
9 }
In questo caso abbiamo richiesto due permessi: l’accesso all’elenco dei contatti in modalità lettura/-creazione e la possibilità di usare la sveglia.
Concetti Base 17
Inoltre bisogna fornire due ulteriori campi, un campo description in cui bisogna spiegare all’utentea cosa ci serve il permesso e un campo access opzionale in cui specificate il grado d’accesso. I valoripossibili 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 certificazioneavviene 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. Alcunisviluppatori distribuiscono le proprie applicazioni hosted da Github, il vantaggio è chesono sempre aggiornate e finché si tratta di applicazioni semplici in JavaScript è una buonasoluzione hosting. Vedi l’ultimo capitolo per approfondimenti.
Tipi di Applicazioni
Attualmente esistono due tipi di applicazioni Firefox OS che potete sviluppare: ospitate (hosted) epacchettizzate (packaged) - forse in futuro saranno disponibili altri tipi di applicazioni (per esempioche 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 diFirefox Marketplace è stato scelto di tradurre le hosted app in app ospitate e le packagedapp in app pacchettizzate. Ciò nonostante nel mondo degli sviluppatori italiani si usano itermini app hosted e app packaged. Nel proseguo del testo verranno utilizzati entrambi itermini a discrezione dei localizzatori.
• AppHosted: Sono disponibili ad un indirizzo web comewww.mozilla.org³⁶ esattamente comei classici siti web. Questo significa che quando l’utente avvia un’applicazione hosted, il suocontenuto è caricato dal server remoto (o dalla cache, se disponibile).
• App Packaged: Sono distribuite come file zip e vengono salvate nel dispositivo al momentodella loro installazione. Quando l’utente avvia un’app pacchettizzata, i suoi contenuti sonocaricati da un file zip nel dispositivo anziché da un server remoto.
³⁶http://mozilla.org
Concetti Base 18
Esistono vantaggi e svantaggi nell’utilizzo di entrambi i tipi. Da un lato le app hosted sono più facilida aggiornare, infatti è sufficiente cambiare i file sul server web. Però è più complicato implementareil loro funzionamento in modalità non in linea in quanto richiede l’utilizzo del tanto discusso fileappcache³⁷. Inoltre, le hosted app hanno delle limitazioni nell’uso di alcune WebAPI e dunque nonè possibile implementare tutte le funzioni che si possono utilizzare in un’app packaged.
Dall’altro lato tutti i file di un’app packaged sono memorizzati localmente sul dispositivo - ciòsignifica che sono sempre disponibili quando l’utente non è collegato (e quindi non sarà necessarioutilizzare AppCache). Hanno anche la possibilità di accedere a WebAPI sensibili per la sicurezzache 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 sostenerea ogni nuova versione dell’applicazione il processo di revisione che potrebbe richiedere un po’ ditempo.
Quando si sceglie quale tipo di applicazione realizzare è necessario fare delle valutazioni: se sidovranno utilizzare delle WebAPI avanzate sarà necessario orientarsi verso un’app packaged. Sel’app che si sta progettando può funzionare senza accedere a servizi di sistema avanzati o funzionalitàdel dispositivo oltre a quelle già disponibili in un browser web, sarà necessaria un’app hosted. In casonon 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 peralcune app hosted). Niente paura, esistono degli strumenti per semplificare la generazione di fileAppCache e facilitare il processo di distribuzione³⁸.
In questo testo vedremo come realizzare applicazioni packaged, in quanto questo ci permetterà diesplorare tutte le possibilità offerte dalle WebAPI. In ogni caso la maggior parte di ciò che vedremosui file manifest si applica anche alle app hosted. Per ulteriori informazioni sulla distribuzione delleapp hosted consultare la documentazione sulle app hosted nel Centro di sviluppo³⁹.
Ora che abbiamo trattato i due tipi di applicazioni supportate da Firefox OS, diamo un’occhiata aidiversi livelli di accesso che un’app può richiedere.
Livelli di accesso per la sicurezza
Esistono tre livelli di sicurezza su Firefox OS - ogni livello fornisce un maggiore accesso alle APIrispetto a quello precedente.
• Semplice (a.k.a. web): questo è il livello predefinito di tutte le applicazioni. Questo livello siapplica alle app hosted e alle app packaged che non dichiarano una proprietà type nel lorofile manifesto. Queste applicazioni hanno un accesso alle comuni API dei browser - ma nonhanno un accesso ad alcuna delle WebAPI Mozilla.
³⁷https://developer.mozilla.org/docs/HTML/Using_the_application_cache³⁸Esistonomolti strumenti utili, comeGrunt, Volo, Yeoman, Bower. Questi strumenti sonomolto 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
Concetti Base 19
• Con privilegi: questo tipo di applicazioni ha accesso a tutte le API disponibili nel browserFirefox, oltre a quelli aggiuntivi, come i contatti e gli allarmi di sistema. Solo le packagedpossono essere app con privilegi ed il pacchetto deve essere firmato digitalmente dalMarketplace Firefox.
• Certificato: per motivi di sicurezza, questo livello è permesso per le app realizzate diretta-mente da Mozilla e dai suoi partner (per esempio i fornitori dell’hardware, le compagnie ditelecomunicazione, ecc…). Le applicazioni certificate hanno un accesso a tutte le API, comel’API Telephony e altro ancora. Un esempio di applicazione certificata in Firefox OS è iltelefono.
Durante lo sviluppo è possibile accedere alle API con privilegi senza richiedere permessi specialia Mozilla. In fase di distribuzione, però, sarà necessario caricare l’app sul Firefox Marketplace. Aquesto punto il codice viene controllato in un rigoroso processo di approvazione e se è tutto OKl’app sarà firmata digitalmente - questo garantirà agli utenti di Firefox OS che a questa applicazioneè consentito accedere alle API sensibili.
Sulla pagina delle WebAPI sul Mozilla Developer Network⁴⁰ è possibile verificare quali API sonoimplementate sui vari dispositivi e controllare il livello di accesso necessario per utilizzare ciascunaAPI.
Livello di accesso alle API
Come si può vedere dall’immagine qui sopra, qualsiasi applicazione può accedere alle API IndexedDBAPI e FileHandle API ma solamente le app con privilegi possono accedere ai Contacts API e DeviceStorage API.
WebAPI di Mozilla
Firefox OS fornisce le API necessarie per sviluppare applicazioni con le stesse funzionalità delleapplicazioni native sulle altre piattaforme. L’accesso 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 lapagina WebAPI nel Wiki Mozilla⁴¹.
Analizzeremo alcuni esempi di codice per vedere come le API sono facili da utilizzare. Gli esempinon vanno presi come una documentazione completa sulle WebAPI, sono una piccola dimostrazionedi come si possa accedere al dispositivo usando JavaScript.
Esempio #1: Effettuare chiamate
Si immagini di avere un’applicazione che ha bisogno di usare il dialer con un numero di telefonogià pronto. È sufficiente utilizzare il seguente codice:
Invia un numero di telefono al dialer
1 var call = new MozActivity({
2 name: "dial",
3 data: {
4 number: "5555-9999"
5 }
6 });
Questo codice effettua una richiesta all’applicazione dialer per chiamare un numero predefinito.In realtà non partirà la chiamata, sarà necessario l’esplicita conferma dell’utente che dovrà toccareil tasto di chiamata per avviarla. La richiesta di un’azione esplicita dell’utente prima di avviareun’operazione è un modello molto comune: si tratta di un buon modello di sicurezza perchéè richiesta un’esplicita conferma dell’utente prima di avviare un’operazione. Altre API possonoeffettuare chiamate senza una interazione dell’utente ma richiedono un livello d’accesso più elevato.Le applicazioni certificate possono effettuare chiamate senza interazione con l’utente. Le API usatenel codice sopra, chiamate “Web Activities”, sono disponibili per tutte le applicazioni.
Per maggiori informazioni sull’API Web Activities consultare questo post sul blog Mozilla⁴².
Esempio #2: Memorizzare un contatto
Si immagini di avere una rete intranet aziendale e di voler sviluppare un’app per trasferire i contattidalla 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 var contact = new mozContact();
2 contact.init({name: "Odin"});
3
4 var request = navigator.mozContacts.save(contact);
5 request.onsuccess = function() {
6 // contact saved successfully
7 };
8 request.onerror = function() {
9 // there was an error while trying to save the contact
10 };
Questa API crea un oggetto con i dati del contatto e lo salva nella rubrica telefonica senza bisogno dialcuna interazione da parte dell’utente. Poiché l’accesso ai contatti comporta implicazioni riguardo laprivacy, questa API è disponibile per le app con privilegi. Il modello di questa API prevede l’utilizzodi due callback ed è un approccio condiviso da molte altre API. Forniamo quindi due funzioni,success in caso di buona riuscita dell’operazione e error in caso contrario da eseguire una volta chesi è risolta l’azione principale (in questo caso salvare un contatto).
Per ulteriori informazioni su questa API consultare la pagina dedicata alle Contacts API sul wikiMozilla⁴³.
Esempio #3: Selezionare una immagine dalla fotocamera
Si immagini di voler creare un’app che applichi delle decorazioni alle immagini, come una corniceo dei baffi. Sarà quindi necessario utilizzare un pulsante che permetta di scattare una foto con lafotocamera o scegliere l’immagine da una galleria.
Scegliere una foto
1 var getphoto = new MozActivity({
2 name: "pick",
3 data: {
4 type: ["image/png", "image/jpg", "image/jpeg"]
5 }
6 });
7
8 getphoto.onsuccess = function () {
9 var img = document.createElement("img");
10 if (this.result.blob.type.indexOf("image") != -1) {
⁴³https://wiki.mozilla.org/WebAPI/ContactsAPI
Concetti Base 22
11 img.src = window.URL.createObjectURL(this.result.blob);
12 }
13 };
14
15 getphoto.onerror = function () {
16 // erro!
17 };
Questo è un altro esempio di WebActivity⁴⁴. Le funzioni (activity) dell’API WebActivities sonodisponibili per tutte le applicazioni. In questo esempio specifico stiamo usando la pick activitypassando il MIME Types dei file richiesti. Quando questo codice è eseguito, il sistema mostrauna schermata all’utente chiedendo se vuole selezionare l’immagine da camera, galleria o sfondi.Se l’utente seleziona una immagine, la callback di successo viene invocata. Se l’utente annullal’operazione, la callback di errore è eseguita. Nell’immagine sottostante, possiamo vedere la finestradi richiesta sul dispositivo:
⁴⁴https://hacks.mozilla.org/2013/01/introducing-web-activities/
Concetti Base 23
Esempio di pick activity
Riassunto
In questo capitolo abbiamo visto che rispetto alle pagine web classiche, entrambi i tipi di applicazioneper Firefox OS (hosted e packaged) si basano su un file manifest. Abbiamo visto anche che dalpunto 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 sonodisponibili per le applicazioni hosted o le pagine web classiche.
Adesso è giunta l’ora di sporcarsi le mani e creare un’applicazione.
La prima app
Memos, un blocco note minimale
In questo capitolo vedremo come realizzare un semplice Notepad, cioè un’applicazione per pren-dere appunti. Prima di concentrarci sul codice cerchiamo di studiare il funzionamento di questaapplicazione.
La nostra idea è di avere di tre schermate. La prima è la schermata principale, la prima che l’utentevedrà, in cui presentiamo l’elenco delle note già salvate. Se si fa clic su una nota (o se ne vieneaggiunta una) viene aperta la schermata con i dettagli, nella quale è possibile modificare il titolo edil testo della nota scelta. Ecco come vorremmo che si presentassero.
La prima app 25
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.
La prima app 26
Memos, finestra di conferma della cancellazione
Il codice sorgente di Memos è disponibile nel Repository su Github⁴⁵ (è possibile anche scaricarlocome file .zip⁴⁶). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un’altra copiadel 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 leinterfacce. In un futuro aggiornamento il testo conterrà molte informazioni suGaia Building Blocks,ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull’argomento eper sapere quali interfacce vi sono integrate visitare i link appena segnalati.
Il primo passaggio è creare una cartella per l’applicazione di nomememos.
⁴⁵https://github.com/soapdog/memos-for-firefoxos⁴⁶https://github.com/soapdog/memos-for-firefoxos/archive/master.zip⁴⁷https://github.com/soapdog/memos-for-firefoxos⁴⁸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 dell’app
Il file manifesto di Memos è molto semplice. Crea un file chiamatomanifest.webapp nella cartellamemos. I manifesti sono dei file in formato JSON⁵⁰ che descrivono un’applicazione per Firefox OS.In questo file è possibile trovare le informazioni sull’app, quali il nome, il nome dello sviluppatore,le icone utilizzate, il file che avvia l’app, 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 copiae incolla, perché è molto facile mettere una virgola nel posto sbagliato (o non metterla) e creareun file JSON non valido. Esistono molti strumenti per validare un file JSON, incluso uno specificoper validare i file manifesto delle app, lo puoi trovare online su il marketplace⁵¹. Per ulterioriinformazioni su questi file consultare la pagina su MDN⁵².
Memos manifest (manifest.webapp)
1 {
2 "name": "Memos",
3 "version": "1.1",
4 "description": "A simple memo taking app",
5 "launch_path": "/index.html",
6 "permissions": {
7 "storage": {
8 "description": "Required for storing and retrieving notes."
9 }
10 },
11 "developer": {
12 "name": "Andre Garzia",
13 "url": "http://andregarzia.com"
14 },
15 "icons": {
16 "60": "/style/icons/icon_60.png",
17 "128": "/style/icons/icon_128.png"
18 }
19 }
Analizziamo i campi di questo file manifesto:
⁵⁰http://json.org⁵¹https://marketplace.firefox.com/developers/validator⁵²https://developer.mozilla.org/docs/Apps/Manifest
La prima app 28
Campi Descrizione
name Il nome dell’applicazioneversion La versione attuale dell’applicazionelaunch_path Il file utilizzato per avviare un’applicazionepermissions I permessi API richiesti, con molte informazionideveloper I contatti dello sviluppatoreicons L’icona utilizzata in diversi formati
La parte più interessante di questo file manifesto è la richiesta per i permessi di storage per poterutilizzare IndexedDB senza alcun limite di spazio disco⁵³(con questi permessi possiamo salvarele note che vogliamo - anche se dobbiamo fare attenzione a non usare troppo spazio sul discodell’utente!).
Ora che il file manifesto è pronto, passiamo al codice HTML.
Scriviamo il codice HTML
Prima di iniziare a lavorare sul codice HTML facciamo una breve digressione su Gaia BuildingBlocks⁵⁴, una raccolta di codici CSS e JavaScript che rispettano il layout degli elementi d’interfaccianativi di Firefox OS e che possiamo riutilizzare per creare l’interfaccia della nostra applicazione.
Come nelle pagine web, non è richiesto l’uso del look and feel di Firefox OS nella propriaapplicazione. Utilizzare o menoGaia Building Blocks è una scelta personale - e le buone applicazionidovrebbero sapersi distinguere per uno stile e un’esperienza utente proprie. La cosa importante dacapire è che un’applicazione non subirà alcun tipo di pregiudizio o penalità su Firefox Marketplacese non utilizza lo stile di Gaia. Personalmente, non essendo un bravo designer, preferisco ricorrerea 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 GaiaBuilding Blocks in cui ogni schermata è racchiusa in un tag <section> e gli elementi seguonoun 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 toolkitGaia BuildingBlocks. Per coloro che dovessero avere poca confidenza con git e Github, i file sono disponibili anchecome file .zip⁵⁶.
Attenzione: la versione di Gaia Building Blocks che ho utilizzato non è la più recente.Purtroppo, ho dovuto fare questa scelta perché l’applicazione Memos non era compatibilecon l’ultima versione diGaia Building Blocks. Nei propri progetti è sempremeglio utilizzarel’ultima 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⁵⁶https://github.com/soapdog/memos-for-firefoxos/archive/master.zip
La prima app 29
Includere Gaia Building Blocks
Prima di qualsiasi altra cosa copiare le cartelle shared e styles incluse nel repository che è statoscaricato, nella cartella memos creata in precedenza. Questo consentirà l’utilizzo del toolkit GaiaBuilding Blocks nelle proprie applicazioni.
Iniziamo con l’inserimento del codice necessario nel file index.html.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" type="text/css" href="/style/base.css" />
6 <link rel="stylesheet" type="text/css" href="/style/ui.css" />
7 <link rel="stylesheet" type="text/css" href="/style/building_blocks.css" />
8 <link rel="stylesheet" type="text/css" href="shared/style/headers.css" />
9 <link rel="stylesheet" type="text/css" href="shared/style_unstable/lists.css\
10 " />
11 <link rel="stylesheet" type="text/css" href="shared/style_unstable/toolbars.\
12 css" />
13 <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css" />
14 <link rel="stylesheet" type="text/css" href="shared/style/confirm.css" />
15 <title>Memos</title>
16 </head>
La prima riga dichiara che il documento utilizza il formato HTML5. Dalla linea 5 alla 15 vengonoinclusi i file CSS dei vari componenti da usare nell’app: testata, liste, campi testuali, ecc…
Costruiamo la schermata principale
Adesso che abbiamo incluso i riferimenti a Gaia Building Blocks possiamo sfruttare il lavoro diMozilla per creare un’applicazione a 5 stelle.
Iniziamo a costruire le varie schermate. Come abbiamo detto prima, ogni schermata è racchiusa inuna <section> all’interno del corpo (il tag <body>) del documento HTML. All’elemento ‘<body>’assegnamo un attributo role il cui valore deve essere application, in questo modo quando l’appverrà lanciata verranno utilizzati i fogli di stile di Gaia Building Blocks per definire l’aspettodell’interfaccia. 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 30
1 <body role="application">
2
3 <section role="region" id="memo-list">
4 <header>
5 <menu type="toolbar">
6 <a id="new-memo" href="#"><span class="icon icon-add">add</span></a>
7 </menu>
8 <h1>Memos</h1>
9 </header>
10 <article id="memoList" data-type="list"></article>
11 </section>
Nella schermata abbiamo incluso un <header> in cui mettiamo un pulsante che permetta diaggiungere nuove note ed il nome dell’applicazione stessa. La schermata include un tag <article>
che è utilizzato per mostrare il contenuto della nota. Useremo il pulsante e l’ID dell’articolo percatturare gli eventi nella parte JavaScript.
Sottolineo il fatto che ogni schermata è un semplice blocco di codice HTML. Costruire questeschermate utilizzando diversi linguaggi su altri sistemi richiede molto lavoro. Tutto quello chefaremo è 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 eliminazionedelle note.
1 <section role="region" id="memo-detail" class="skin-dark hidden">
2 <header>
3 <button id="back-to-list"><span class="icon icon-back">back</span>
4 </button>
5 <menu type="toolbar">
6 <a id="share-memo" href="#"><span class="icon icon-share">share</spa\
7 n>
8 </a>
9 </menu>
10 <form action="#">
11 <input id="memo-title" placeholder="Memo Title" required="required" \
12 type="text">
13 <button type="reset">Remove text</button>
14 </form>
15 </header>
La prima app 31
16 <p id="memo-area">
17 <textarea placeholder="Memo content" id="memo-content"></textarea>
18 </p>
19 <div role="toolbar">
20 <ul>
21 <li>
22 <button id="delete-memo" class="icon-delete">Delete</button>
23 </li>
24 </ul>
25 </div>
26 <form id="delete-memo-dialog" role="dialog" data-type="confirm" class="hidde\
27 n">
28 <section>
29 <h1>Confirmation</h1>
30 <p>Are you sure you want to delete this memo?</p>
31 </section>
32 <menu>
33 <button id="cancel-delete-action">Cancel</button>
34 <button id="confirm-delete-action" class="danger">Delete</button>
35 </menu>
36 </form>
37 </section>
Nella parte superiore dello schermo, rappresentata dall’elemento <header> si trovano:
• un pulsante per ritornare alla schermata principale• un campo di testo per modificare il titolo della nota• un pulsante per condividere la nota via email
Sotto questa parte è presente il testo della nota racchiuso dal tag <textarea> , ancora più sotto c’èuna seconda barra con il pulsante per cancellare la nota attuale.
Questi tre elementi e il loro contenuto rappresentano la schermata di modifica. Successivamente ab-biamo un elemento <form> che verrà utilizzato per mostrare la finestra di conferma di cancellazionedella nota. Questa finestra è molto semplice, contiene del testo e due pulsanti, uno per cancellare lanota ed uno per annullare l’azione.
A questo punto chiudiamo il tag <section> avendo tutte le schermate necessarie, il codice HTMLrimanente serve per includere i file JavaScript e completare il documento HTML con tutti i tag dichiusura.
La prima app 32
1 <script src="/js/model.js"></script>
2 <script src="/js/app.js"></script>
3 </body>
4 </html>
Manipoliamo il codice JavaScript
Adesso ci divertiremo a dare vita alla nostra applicazione utilizzando JavaScript. Per organizzaremeglio questo codice ho scelto di suddividerlo in due file:
• model.js: contiene le routine per salvare e recuperare le note dalla memoria del dispositivo,ma non la struttura logica, la gestione dei click sugli elementi dell’interfaccia e la gestionedell’input utente, questi sono nel secondo file, in questo modo abbiamo scritto del codicemodulare. In teoria potremmo riutilizzare questo file in altre applicazioni che creano egesticono note per l’utente.
• app.js: collega gli eventi dell’interfaccia agli elementi HTML e contiene la struttura logicadell’applicazione.
Entrambi i file devono essere posizionati nella cartella js che troviamo accanto alle cartelle style eshared.
model.js
Utilizzeremo IndexedDB⁵⁷ per salvare le note nel dispositivo. Avendo chiesto i permessi storage nelfile 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 lorocontenuto (le note nel nostro caso) ed è sempre meglio essere consapevoli di quali dati vengonomemorizzati, inoltre gli utenti daranno un voto negativo a un’applicazione se consumerà troppamemoria senza motivo. Memorizzare troppo materiale porta a problemi di prestazioni e l’apprisulterà lenta e poco reattiva. Al momento del caricamento su Firefox Marketplace, sarà necessarioindicare nel modulo diretto ai revisori il motivo per cui l’app necessita di accesso illimitato allamemoria per il suo funzionamento, se non lo segnalate vi verrà esplicitamente richiesto dai revisori.Nel caso non siate in grado di giustificare tale richiesta, i revisori respingeranno l’app, che quindinon verrà pubblicata sul sito.
La parte di codice in model.js che mostriamo qui sotto si occupa del collegamento e della creazionedello storage.
⁵⁷https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
La prima app 33
..
Importante: Questo codice è scritto per essere capito velocemente e non per illustrare le miglioritecniche di programmazione JavaScript. Nel codice sono presenti delle variabili globali (andròall’inferno per questo, lo so) tra le altre chicche. La gestione degli errori è praticamente inesistente.Lo scopo principale di questo testo è insegnare il workflow di sviluppo di applicazioni per FirefoxOS e non i migliori pattern JS, quindi a seconda dei commenti migliorerò il codice, sempre che nonabbia un brutto impatto sui principianti.
1 var dbName = "memos";
2 var dbVersion = 1;
3
4 var db;
5 var request = indexedDB.open(dbName, dbVersion);
6
7 request.onerror = function (event) {
8 console.error("Can't open indexedDB!!!", event);
9 };
10 request.onsuccess = function (event) {
11 console.log("Database opened ok");
12 db = event.target.result;
13 };
14
15 request.onupgradeneeded = function (event) {
16
17 console.log("Running onUpgradeNeeded");
18
19 db = event.target.result;
20
21 if (!db.objectStoreNames.contains("memos")) {
22
23 console.log("Creating objectStore for memos");
24
25 var objectStore = db.createObjectStore("memos", {
26 keyPath: "id",
27 autoIncrement: true
28 });
29 objectStore.createIndex("title", "title", {
30 unique: false
31 });
32
33 console.log("Adding sample memo");
La prima app 34
34 var sampleMemo1 = new Memo();
35 sampleMemo1.title = "Welcome Memo";
36 sampleMemo1.content = "This is a note taking app. Use the plus sign in t\
37 he topleft corner of the main screen to add a new memo. Click a memo to edit it.\
38 All your changes are automatically saved.";
39
40 objectStore.add(sampleMemo1);
41 }
42 }
..
Importante: chiedo ancora perdono per aver utilizzato delle variabili globali, questo è solo delmateriale utile all’insegnamento. Inoltre ho rimosso i commenti dal codice per risparmiare spazionel testo. Su Github il codice è completo di commenti.
Il codice appena visto crea un oggetto db ed un oggetto request. L’oggetto db è utilizzato in altrefunzioni per manipolare le note memorizzate.
Nell’implementazione della funzione request.onupgradeneeded creiamo una nota di benvenuto.Questa funzione è eseguita quando l’applicazione viene lanciata per la prima volta (o quando laversione del database cambia). In questo modo, al primo avvio dell’applicazione, il database conterràuna nota di esempio.
Una volta aperta la connessione al database e inizializzato il meccanismo di archiviazione, è ora dicreare le funzioni basilari per manipolare le note.
1 function Memo() {
2 this.title = "Untitled Memo";
3 this.content = "";
4 this.created = Date.now();
5 this.modified = Date.now();
6 }
7
8 function listAllMemoTitles(inCallback) {
9 var objectStore = db.transaction("memos").objectStore("memos");
10 console.log("Listing memos...");
11
12 objectStore.openCursor().onsuccess = function (event) {
13 var cursor = event.target.result;
14 if (cursor) {
15 console.log("Found memo #" + cursor.value.id + " - " + cursor.value.\
16 title);
La prima app 35
17 inCallback(null, cursor.value);
18 cursor.continue();
19 }
20 };
21 }
22
23 function saveMemo(inMemo, inCallback) {
24 var transaction = db.transaction(["memos"], "readwrite");
25 console.log("Saving memo");
26
27 transaction.oncomplete = function (event) {
28 console.log("All done");
29 };
30
31 transaction.onerror = function (event) {
32 console.error("Error saving memo:", event);
33 inCallback({
34 error: event
35 }, null);
36
37 };
38
39 var objectStore = transaction.objectStore("memos");
40
41 inMemo.modified = Date.now();
42
43 var request = objectStore.put(inMemo);
44 request.onsuccess = function (event) {
45 console.log("Memo saved with id: " + request.result);
46 inCallback(null, request.result);
47
48 };
49 }
50
51 function deleteMemo(inId, inCallback) {
52 console.log("Deleting memo...");
53 var request = db.transaction(["memos"], "readwrite").objectStore("memos").de\
54 lete(inId);
55
56 request.onsuccess = function (event) {
57 console.log("Memo deleted!");
58 inCallback();
La prima app 36
59 };
60 }
In questo blocco di codice abbiamo creato un costruttore che produce nuove note con alcunicampi 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 unparametro chiamato inCallback. Questo parametro è esso stesso una funzione che verrà invocata altermine della funzione chiamante. Questo è necessario per la natura asincrona di IndexedDB. Tuttele callback hanno la medesima struttura di chiamata callback(error, value), con due parametri iningresso, 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 potrebberocapirle. 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 l’archiviazione delle note e le funzioni di modifica sono state implementate, lavoriamo allastruttura logica dell’applicazione nel file app.js.
app.js
Questo file contiene la logica dell’applicazione. Il codice sorgente è troppo lungo da mostrare in unavolta sola, quindi verrà diviso in parti per studiarlo meglio.
1 var listView, detailView, currentMemo, deleteMemoDialog;
2
3 function showMemoDetail(inMemo) {
4 currentMemo = inMemo;
5 displayMemo();
6 listView.classList.add("hidden");
7 detailView.classList.remove("hidden");
8 }
9
10
11 function displayMemo() {
12 document.getElementById("memo-title").value = currentMemo.title;
13 document.getElementById("memo-content").value = currentMemo.content;
14 }
15
16 function shareMemo() {
La prima app 37
17 var shareActivity = new MozActivity({
18 name: "new",
19 data: {
20 type: "mail",
21 body: currentMemo.content,
22 url: "mailto:?body=" + encodeURIComponent(currentMemo.content) + "&s\
23 ubject=" + encodeURIComponent(currentMemo.title)
24
25 }
26 });
27 shareActivity.onerror = function (e) {
28 console.log("can't share memo", e);
29 };
30 }
31
32 function textChanged(e) {
33 currentMemo.title = document.getElementById("memo-title").value;
34 currentMemo.content = document.getElementById("memo-content").value;
35 saveMemo(currentMemo, function (err, succ) {
36 console.log("save memo callback ", err, succ);
37 if (!err) {
38 currentMemo.id = succ;
39 }
40 });
41 }
42
43 function newMemo() {
44 var theMemo = new Memo();
45 showMemoDetail(theMemo);
46 }
All’inizio vengono dichiarate alcune variabili globali (bleah :-P!) per mantenere dei riferimentia elementi nel DOM che saranno utilizzati in alcune funzioni. La variabile globale di maggioreinteresse è currentMemo, l’oggetto di riferimento per la nota che l’utente sta visualizzando.
Le funzioni showMemoDetail() e displayMemo() lavorano in coppia. La prima carica la notaselezionata 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. Potremmomettere il codice nella stessa funzione ma averlo separato permette di divertirci di più con nuoveimplementazioni.
La funzione shareMemo() utilizza unaWebActivity⁵⁸ per aprire il programma predefinito per la postaelettronica con il contenuto della nota selezionata.
⁵⁸https://hacks.mozilla.org/2013/01/introducing-web-activities/
La prima app 38
La funzione textChanged() prende il contenuto dei campi e lo inserisce nell’oggetto currentMemo
che salva la nota. Questo perché avremo un’applicazione con auto-salvataggio. Tutte le modificheal 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 notacreata.
1 function requestDeleteConfirmation() {
2 deleteMemoDialog.classList.remove("hidden");
3 }
4
5 function closeDeleteMemoDialog() {
6 deleteMemoDialog.classList.add("hidden");
7 }
8
9 function deleteCurrentMemo() {
10 closeDeleteMemoDialog();
11 deleteMemo(currentMemo.id, function (err, succ) {
12 console.log("callback from delete", err, succ);
13 if (!err) {
14 showMemoList();
15 }
16 });
17 }
18
19 function showMemoList() {
20 currentMemo = null;
21 refreshMemoList();
22 listView.classList.remove("hidden");
23 detailView.classList.add("hidden");
24 }
La funzione requestDeleteConfirmation() mostra la richiesta di conferma di cancellazione dellanota.
Le funzioni closeDeleteMemoDialog() e deleteCurrentMemo() sono invocate dai pulsanti nellafinestra di conferma.
La funzione showMemoList() effettua una pulizia e mostra l’elenco delle note presenti. Per esempio,svuota il contenuto di currentMemo se non stiamo leggendo una nota.
La prima app 39
1 function refreshMemoList() {
2 if (!db) {
3 // HACK:
4 // this condition may happen upon first time use when the
5 // indexDB storage is under creation and refreshMemoList()
6 // is called. Simply waiting for a bit longer before trying again
7 // will make it work.
8 console.warn("Database is not ready yet");
9 setTimeout(refreshMemoList, 1000);
10 return;
11 }
12 console.log("Refreshing memo list");
13
14 var memoListContainer = document.getElementById("memoList");
15
16
17 while (memoListContainer.hasChildNodes()) {
18 memoListContainer.removeChild(memoListContainer.lastChild);
19 }
20
21 var memoList = document.createElement("ul");
22 memoListContainer.appendChild(memoList);
23
24 listAllMemoTitles(function (err, value) {
25 var memoItem = document.createElement("li");
26 var memoP = document.createElement("p");
27 var memoTitle = document.createTextNode(value.title);
28
29 memoItem.addEventListener("click", function (e) {
30 console.log("clicked memo #" + value.id);
31 showMemoDetail(value);
32
33 });
34
35 memoP.appendChild(memoTitle);
36 memoItem.appendChild(memoP);
37 memoList.appendChild(memoItem);
38
39
40 });
41 }
La prima app 40
La funzione refreshMemoList() modifica il DOM⁵⁹ della nostra applicazione aggiornando l’elencodelle note. Sarebbe più facile usare alcuni sistemi di templating come handlebars⁶⁰ o underscore⁶¹ma quest’applicazione contiene solo vanilla javascript quindi faremo tutto a mano.
Queste sono le funzioni utilizzate dall’applicazione. Le uniche che mancano sono il gestore eventi ela chiamata iniziale di refreshMemoList().
1 window.onload = function () {
2 // elements that we're going to reuse in the code
3 listView = document.getElementById("memo-list");
4 detailView = document.getElementById("memo-detail");
5 deleteMemoDialog = document.getElementById("delete-memo-dialog");
6
7 // All the listeners for the interface buttons and for the input changes
8 document.getElementById("back-to-list").addEventListener("click", showMemoLi\
9 st);
10 document.getElementById("new-memo").addEventListener("click", newMemo);
11 document.getElementById("share-memo").addEventListener("click", shareMemo);
12 document.getElementById("delete-memo").addEventListener("click", requestDele\
13 teConfirmation);
14 document.getElementById("confirm-delete-action").addEventListener("click", d\
15 eleteCurrentMemo);
16 document.getElementById("cancel-delete-action").addEventListener("click", cl\
17 oseDeleteMemoDialog);
18 document.getElementById("memo-content").addEventListener("input", textChange\
19 d);
20 document.getElementById("memo-title").addEventListener("input", textChanged);
21
22 // the entry point for the app is the following command
23 refreshMemoList();
24
25 };
Ora che tutti i file sono pronti proviamo l’applicazione nel simulatore.
Provare l’applicazione col simulatore
Prima di avviare l’applicazione nel simulatore è preferibile verificare che tutti i file siano al postogiusto altrimenti l’applicazione non funzionerà. Ecco quale dovrebbe essere il contenuto dellacartella memos:
⁵⁹https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction⁶⁰http://handlebarsjs.com/⁶¹http://underscorejs.org/
La prima app 41
Lista dei file utilizzati da Memos
Se si ha il vago sospetto di aver commesso qualche errore è possibile verificarlo confrontando ilrepository memos su github⁶² (un’ulteriore copia del codice sorgente è disponibile nella cartellacode 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/memos-for-firefoxos⁶³https://github.com/soapdog/guia-rapido-firefox-os
La prima app 42
Apertura della Dashboard del simulatore
Fai clic sul pulsante Apri app, seleziona Apri app pacchettizzata e seleziona la cartella contenenteil file manifesto dell’applicazioneMemos for Firefox Os.
La prima app 43
Aggiunta di una nuova applicazione
Se tutto funziona come previsto Memos verrà aggiunta ai progetti del WebIde.
La prima app 44
Memos mostrata nella Dashboard
Una volta aggiunta l’applicazione scegliamo la versione del simulatore che vogliamo usare eavviamola. Una volta avviato possiamo installare Memos premendo il bottone triangolare e sulsimulatore verrà avviata la nostra app.
Il bottone triangolare da premere
A questo punto è possibile provare tutte le funzionalità di Memos.
La prima app 45
Memos installato nel Simulatore
Congratulazioni! Abbiamo creato e provato la nostra prima applicazione. Non è un’applicazionecomplessa o rivoluzionaria - ma spero sia utile per capire il workflow di sviluppo di Firefox OS. Chiha già visto e lavorato con il web ha di sicuro potuto notare che non è molto diverso dallo sviluppoweb classico.
Sottolineiamo che ogni volta che viene modificato il codice sorgente è necessario premere il pulsanteAggiorna per aggiornare il contenuto dell’applicazione presente nel simulatore.
La prima app 46
Riassunto
In questo capitolo abbiamo creato la nostra prima applicazione per Firefox OS e l’abbiamo lanciatanel simulatore. Nel prossimo capitolo vedremo uno strumento molto utile chiamato BoilerPlate,un insieme di esempi che rispondono ad esigenze basilari di un’applicazione, come selezionare uncontatto 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 aggiungereun contatto o far vibrare il telefono.
Firefox OS Boilerplate App
Il boilerplate⁶⁴ di cui abbiamo letto in precedenza è un’applicazione dimostrativa con molti esempibasilari. Contiene un esempio per la maggior parte delle Web Activity, la questione multilingua,installazione dell’applicazione, API HTML5 e l’interfaccia grafica di Gaia realizzata con GaiaBuilding Blocks.La parte interessante è che si trova su Github, quindi c’è anche una demo sempre aggiornata chepuoi trovare qui⁶⁵.
Puoi provare il boilerplate nel tuo browser preferito ma se usi Chrome vedrai che nella consoleapparirà “Open Web Apps not supported” che vuol dire che non supporta questo standard propostoda 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. Questoinsieme di caratteristiche ed il manifesto di Mozilla formano le Open Web Apps⁶⁷!Noi sviluppatori web speriamo che le OpenWeb Apps vengano supportate da altri browser e sistemioperativi 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 vediamol’apice delle loro potenzialità. Firefox sia per Android che desktop le supporta quindi collegandosial marketplace⁶⁸ si possono installare le applicazioni pensate per queste interfacce (se specificate nelmarketplace).
Il boilerplate è un esempio per le Open Web Apps (template⁶⁹) più il supporto proprietario (almomento!) per Firefox OS.
NB: Le API pensate ed integrate in Firefox OS sono proposte al W3C per una loro standardizzazione(come l’API per la batteria o la vibrazione che sono uno standard). Questo a ricordare che Mozillalavora 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 l’applicazione• Multilingua• Grafica di Gaia
Alcune di queste cose le abbiamo viste o le vedremo in questa fantastica guida. Quindi passiamoagli 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 sfruttandol’oggetto window.navigator.connection che è descritto sulla pagina MDN⁷⁰ dedicata con i dettaglitecnici e il supporto crossbrowser.
Il codice è presente in due versioni:
• Uno dei tanti pulsanti che usa l’API diretta⁷¹ fornisce due informazioni: la banda disponibilein MB (0 se è offline, infinity se sconosciuta o solitamente la linea fissa) e se la connessione èa consumo.
• Con AppCache per sapere se si utilizza l’applicazione in modalità offline, nel boilerplate èutilizzato per mostrare il pallino verde se si è online.
Vediamo un attimo questi due codici:
1 var connection = window.navigator.mozConnection,
2 online = "<strong>Connected:</strong> " + (connection.bandwidth),
3 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 48
1 var appCache = window.applicationCache;
2 appCache.onerror = function() {
3 displayStatus.className = "offline";
4 displayStatus.title = "Offline";
5 };
Installare l’applicazione
Installazione applicazione vuol dire utilizzare le Open Web Apps. Vediamo come funziona il codicedi installazione e di verifica installazione. Prima di tutto verifichiamo se il sistema le supporta (connavigator.mozApps) dopo di che inseriamo dei test di successo o fallimento dell’installazione.
1 if (navigator.mozApps) {
2 var checkIfInstalled = navigator.mozApps.getSelf();
3 checkIfInstalled.onsuccess = function () {
4 if (checkIfInstalled.result) {
5 // Already installed
6 var installationInstructions = document.querySelector("#installation\
7 -instructions");
8 if (installationInstructions) {
9 installationInstructions.style.display = "none";
10 }
11 }
12 else {
13 var install = document.querySelector("#install"),
14 manifestURL = location.href.substring(0, location.href.lastIndex\
15 Of("/")) + "/manifest.webapp";
16 install.className = "show-install";
17 install.onclick = function () {
18 var installApp = navigator.mozApps.install(manifestURL);
19 installApp.onsuccess = function() {
20 install.style.display = "none";
21 };
22 installApp.onerror = function() {
23 alert("Install failed\\n\\n:" + installApp.error.name);
24 };
25 };
26 }
27 };
28 } else {
29 console.log("Open Web Apps not supported");
30 }
La prima app 49
Come si può vedere il codice è molto semplice, si dà l’indirizzo del file manifest e si verifica se èstato installato. Per installare il boilerplate fate click sul simbolo più in alto a destra.Questo codice eseguito su Firefox OS, Firefox for Android e Firefox desktop aprirà un mini pop upper chiedere se installare l’applicazione.
WebActivity
Finalmente parliamo di una delle grandi novità per gli sviluppatori web! Finalmente potremoaccedere 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 unatelefonata o scattare una foto. Queste WebActivity purtroppo sono solo per Firefox OS e quindi iltesting è solo con simulatore ma c’è chi sta lavorando ad una polyfill⁷² per supportare le web activityanche da browser (dove possibile).
Non vedremo il codice nel dettaglio delle varie WebActivity, quindi rimando al file webapp.js⁷³, maper 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 un’email (con l’applicazione di sistema)• Salvare un segnalibro• Aprire un video• Modificare le impostazioni del telefono
Praticamente vi stiamo dicendo di non pensare a come implementare tutte queste funzionalità dallavostra app. Se volete ve le diamo noi senza che voi dobbiate lavorarci.
Naturalmente l’importanza di questa idea non è limitata alle precedenti opzioni e basta, poteteregistrare la vostra WebActivity personalizzata nella vostra app per fare più o meno quello che vipare, dal selezionare foto di gattini a prendere i contatti da una rubrica segreta o rendere disponibileun 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 esempidi tecnologie HTML5 di recente standardizzazione. Tra questi abbiamo le notifiche di sistema, ilblocco della rotazione o dello spengimento dello schermo che sono solo per Firefox OS mentrevibrazione, verifica della connessione (ne abbiamo parlato prima), geolocalizzazione, quantità diluce ambientale, prossimità dell’utente allo schermo, accesso alla batteria sono invece API standarde 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 standardHTML5.
Tra gli esempi disponibili abbiamo: verificare se l’applicazione è in primo piano, accedere alleimmagini 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 XHRCrossDomain sono una peculiarità di Firefox OS.
Multilingua
Nel Boilerplate⁷⁵ appena visto è utilizzata una libreria JavaScript chiamata webL10n⁷⁶. Questalibreria è presente in Gaia ma si tratta di una versione modificata (questa è la versione presentenel boilerplate).
Grazie a webL10n il sito riconosce in automatico la lingua utilizzata dal dispositivo e carica letraduzioni appropriate.
Al caricamento del file JavaScript della libreria viene caricato il file locales.ini che contiene iriferimenti alle varie lingue disponibili dell’applicazione. Dopodiché se c’è la lingua utilizzata dalsistema provvede a sostituire i testi che gli abbiamo indicato alla creazione dell’app, se la lingua nonè presente viene lasciata la versione base (dobbiamo indicarla noi).
Diamo un’occhiata al codice prima di vedere come avviene la magia della localizzazione.
1 <link rel="resource" type="application/l10n" href="locales/locales.ini" />
2 <script type="application/javascript" src="js/l10n.js"></script>
Con questo codice il boilerplate carica i file della lingua… ma come sa dove agire per cambiare iltesto? La libreria si basa sugli attributi data-l10n-id che mettiamo agli elementi di cui vogliamo latraduzione 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 51
1 <html>
2 <head>
3 <script type="text/javascript" src="l10n.js"></script>
4 <link rel="prefetch" type="application/l10n" href="locales.ini" />
5 </head>
6 <body>
7 <button data-l10n-id="test" title="click me!">This is a test</button>
8 </body>
9 </html>
Il bottone ha una proprietà data-l10n-id con attributo test, questo vuol dire che se nel file locales.iniesiste una riga di testo simile a questa
1 [it]
2 test = Questo è un test
3 test.title = Cliccami!
Il testo all’interno del bottone verrà sostituito dal testo Questo è un test nel caso io chieda la linguaitaliana.
File della lingua
• locales.ini: un esempio⁷⁷ che contiene i percorsi dei vari file di lingua con il loro codice diriconoscimento.
• 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 ecaricato all’interno del tag contenente nell’attributo data-l10n-id.
Riassunto
Abbiamo visto molte funzionalità di Firefox OS e delle Open Web Apps tramite un semplice macompleto boilerplate. Ricordati che per poter utilizzare le WebActivity o alcune API hai bisognodei permessi degli utenti e quinidi devi chiedere i permessi relativi compilando il file manifestaccuratamente. Abbiamo visto anche la questione multilingua che è molto importante e di comesia 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 sviluppatoriIl browser Firefox mette a disposizione molti strumenti per consentire agli sviluppatori di eseguireil proprio lavoro al meglio. Molte persone continuano a usare l’estensione Firebug⁸⁰ senza averrealizzato 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à inmateria di sviluppo web saranno implementate nelle prossime versioni di Firefox, consultare lapagina developer tools⁸¹ su Mozilla Developer Network (ci conto, apri davvero questo link! Tiaspetto).
Introduzione alla Visualizzazione flessibile
Un’attività molto comune durante lo sviluppo web è quella di modificare il sorgente HTML di unapagina e poi ricaricarla per vedere le modifiche effettuate all’opera nel browser. A meno che non sistiano utilizzando strumenti comeGrunt oVolo non sarà necessario effettuare operazioni intermedie.
Anche se il Firefox OS Simulator consente di vedere la tua app attualmente non è in grado diutilizzare risoluzioni diverse da 480x320 pixel. Questo non è certo l’ideale per sviluppare un’appdestinata a funzionare su tablet, phablet, grandi schermi TV o qualunque altro dispositivo con unadiversa risoluzione.
Per controllare l’aspetto dell’app con qualunque tipo di risoluzione è possibile utilizzare lo strumentoVisualizzazione flessibile (Responsive View) (Ctrl+Shift+M) di Firefox che permette di cambiarelo schermo e il riquadro di visualizzazione. Può essere attivata dal menu Strumenti -> Sviluppoweb -> Visualizzazione flessibile come mostrato nell’immagine qui di seguito. All’attivazionedella modalità di visualizzazione flessibile, la finestra diventerà “ridimensionabile“ in modo dapermettere, appunto, di variarne le dimensioni, trascinando gli angoli o impostandone le dimensioninelle apposite caselle.
⁸⁰https://addons.mozilla.org/it/firefox/addon/firebug/⁸¹https://developer.mozilla.org/en-US/docs/Tools
Strumenti per sviluppatori 53
Attivazione della visualizzazione flessibile
L’utilizzo della Visualizzazione flessibile è particolarmente utile al fine di provare le mediaquery⁸², in quanto permette di ridimensionare lo schermo e visualizzare la reazione del layoutdel proprio sito immediatamente. Un’altra utile caratteristica della Visualizzazione flessibile è lapossibilità 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 voltaridimensionare la finestra di Firefox.
⁸²https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Strumenti per sviluppatori 54
Esempio di visualizzazione flessibile
Al momento della stesura di questo testo, la maggior parte degli smartphone Firefox OS incommercio 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 emaggiori densità dei punti (come gli schermi Retina di Apple).
Nell’eventualità di future verifiche delle proprie app, si segua questo consiglio: non basare maii propri CSS su una specifica risoluzione schermo o densità dei punti. Piuttosto, si dovrebberoutilizzare le media query e pensare ad un layout flessibile (responsive n.d.t) per permettere all’appdi adattarsi alle varie risoluzioni schermo. Per saperne di più sul layout flessibile consiglio la letturadi questi libri: Responsive Web Design⁸⁴ e Mobile First⁸⁵.
Riepilogando, la Visualizzazione flessibile ci permette di provare la nostra app a varie risoluzionidello schermo senza dover ridimensionare la finestra di Firefox. A mio modesto avviso, la Visua-lizzazione flessibile è uno degli strumenti di sviluppo più utili a disposizione - purtroppo ha un
⁸³L’acronimo dpi denota l’unità di misura della densità dei punti, in inglese dots per pixel, cioè punti per pollice (1 pollice corrisponde a 2,54 cm).Per ulteriori informazioni leggere l’articolo di Wikipedia sull’argomento.
⁸⁴http://www.abookapart.com/products/responsive-web-design⁸⁵http://www.abookapart.com/products/mobile-first
Strumenti per sviluppatori 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 l’estensione Firebug o inaltri browser di nuova generazione. Utilizzando questi strumenti è possibile eseguire ed effettuareil debug del codice JavaScript tramite la console⁸⁶ di Firefox e manipolare sia il DOM che i fogli distile 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 equindi selezionando la scheda Console.
⁸⁶https://developer.mozilla.org/en-US/docs/Web/API/console
Strumenti per sviluppatori 56
Console JavaScript
Oltre alla Console JavaScript sono disponibili altri strumenti come l’Editor stili⁸⁷, il Monitor di rete⁸⁸,il Profiler JavaScript⁸⁹, il Debugger JavaScript⁹⁰, lo strumento Analisi pagina⁹¹ e molti altri.
Nell’applicazione che abbiamo creato nel precedente capitolo, abbiamo utilizzato la Console web perverificare lo stato di avanzamento del nostro progetto. Questo è un modo elegante e molto efficace dieffettuare il debug delle nostre app, anche se alcuni sviluppatori continuano a utilizzare l’istruzionealert() all’interno di tutti i loro sorgenti JavaScript come “strumento di debugging”.
L’utilizzo dell’istruzione alert() è davvero un metodo barbaro e deprecabile, in quanto se ci sidimentica di rimuovere tutti gli alert() dal sorgente prima di rilasciare l’app, sarà l’utente a pagarnele conseguenze.L’utilizzo della Console permette di evitare questo tipo di problemi: la Console,infatti, consente di inserire questi messaggi, in maniera semplice e innocua, in una interfaccia alquale di solito un utente non accede, risultando così invisibile. L’utilizzo 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
Strumenti per sviluppatori 57
di dover rimuovere le istruzioni che generano i messaggi di log dal codice sorgente, a meno chenon lo si voglia davvero fare, ovviamente. Questo ci aiuterà nelle operazioni di manutenzione e didebugging del codice sorgente nel caso ci fossero dei bug imprevisti (come accade solitamente conqualunque codice sorgente).
Imparare a utilizzare in modo appropriato gli strumenti di sviluppo inclusi in Firefox (o in qualunquealtro browser in uso) è un importante passo nel processo di diventare uno sviluppatore migliore. Perquesto motivo consiglio a tutti di consultare i link riportati qui sopra e approfondire la propriaconoscenza degli strumenti di sviluppo inclusi in Firefox.
Uno speciale strumento che non è stato sin qui menzionato è ilDebugger remoto⁹². Questo strumentoconsente di connettersi a uno smartphone Android o Firefox OS e utilizzare gli altri strumenti disviluppo per effettuare il debug delle pagine web aperte su questi dispositivi. Non vi preoccupate, lovedremo 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 inFirefox. Questi strumenti renderanno il processo di sviluppo più semplice, specialmente se utilizzatiassieme al Firefox OS Simulator. Rappresentano una combinazione indispensabile per permettercidi sviluppare un’app. Nel prossimo capitolo andremo a conoscere più da vicino il simulatore eimpareremo 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 l’ambiente di lavoro e l’abbiamousato nel capitolo riguardo la prima applicazione. Ora è tempo di dare un’occhiata più approfonditaal WebIde e le sue funzionalità base.
Per saperne di più, date un’occhiata alla pagina dedicata al WebIde⁹³ su MDN.
Ricordati: se stai usando un dispositivo Firefox OS 1.1 o ancora più vecchio devi usare ilSimulatore 1.1 e non l’App Manager. Questo simulatore è spiegato nel prossimo capitolo.
Aggiungere Applicazioni
Dal WebIde puoi accedere sia alle applicazioni remote (hosted) che locali (packaged). Vediamo comefare.
Da il menù Progetti puoi scegliere tra queste opzioni:
⁹³https://developer.mozilla.org/it/docs/Tools/WebIDE
WebIde 59
• aprire un nuovo progetto• aprire un progetto packaged esistente ma non ancora aggiunto al WebIde• aprire un progetto hosted esistente ma non ancora aggiunto al WebIde
Queste azioni sono replicabili anche cliccando sul bottone Apri applicazione
Il bottone apri applicazione e il suo menu
I progetti che hai già aperto vengono elencati sotto l’etichetta I miei progetti
Creare un nuovo progetto
Cliccando sull’opzione Nuova Applicazione verrà aperta una finestra che ci propone i modellidisponibili.
WebIde 60
I modelli che possiamo usare
Il primo è il modello base, valido sia per packaged che hosted e genera un file sul vostro computerche potete poi usare come pensate meglio.
Il secondo è un modello per un’app di tipo privileged, quindi per forza una app packaged, con unastruttura minima da cui partire.
Il secondo è un modello per un’app 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 cartellache contiene i file che ci interessano.
Per poter essere considerata come una app packaged una cartella ha bisogno di contenere un filemanifest.webapp valido.
Se tutto va a buon fine la tua app verrà caricata nel WebIde e vedrai una schermata come la seguente.
WebIde 62
Memos è stata aggiunta al WebIde
Aggiungere Applicazioni hosted
Una volta premuto Apri App Hosted viene aperta una finestra in cui puoi inserire l’indirizzo weba cui troviamo la tua applicazione, ovvero anche in questo caso l’indirizzo web in cui è disponibileil file manifest.webapp.
WebIde 63
Per poter essere considerata come una app hoste un sito ha bisogno di un file manifest.webappvalido.
Problemi con le applicazioni hosted
Se stai realizzando un’applicazione hosted dovrai provarla con un server web. Ci sono degli erroriche sono caratteristici quando usiamo un server web, come servire il manifest con il MIME typesbagliato, problema che si conclude con l’impossibilità di installare l’app.
Nota che il simulatore non segnala errori riguardo il MIME type sbagliato, è importante controllarequeste cose prima di caricare l’applicazione nel Mozilla Marketplace.
Molte delle applicazioni hosted non sono applicazioni realizzate specificatamente per Firefox OS masi tratta di siti realizzati inmodo responsive che adattano il layout della pagina allo spazio disponibilesullo schermo del dispositivo. Queste applicazioni web hanno di solito un backend complesso cheserve all’applicazione per funzionare e per questo è necessario provarla in un vero web server.
Per testare sul campo che tutto sia a posto avvia il simulatore, naviga fino al tuo sito tramite ilbrowser del simulatore e controlla che il simulatore ti segnali che la pagina è una Open Web Appinstallabile.
Avviare il simulatore
Per avviare il simulatore dopo averlo installato basta sceglierlo dal menù che appare quando premiil pulsante Scegli runtime, le versioni installate vengono elencate sotto l’etichetta Simulatori
WebIde 64
Le versioni del simulatore installate
Avviare l’applicazione
Una volta che il WebIde mostra l’applicazione avvia il simulatore e premi il pulsante triangolare perinstallare l’applicazione ed avviarla sul simulatore.
I bottoni del WebIde
L’icona dell’applicazione apparirà nella schermata principale del Simulatore dopo la fine dell’instal-lazione. Fai clic sull’icona per lanciarla.
WebIde 65
Aggiornare l’applicazione
Ogni volta che si cambiano i file e si vuole provare nel simulatore le modifiche sarà necessariopremere il pulsante triangolare che reinstallerà l’applicazione nel simulatore.⁹⁴
Debug
Dopo che l’applicazione sarà installata nel simulatore potremo fare il debug it facendo clic sulpulsante Debug del WebIde, il pulsante è il cerchio con due righe verticali all’interno. Verrà apertala Console JavaScript relativa all’applicazione.
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
WebIde 66
Developer Tools connessi all’applicazione nel simulatore
COn gli strumenti connessi all’applicazione puoi provare il tuo codice JavaScript, fare il debug delDOM, modificare lo stile, ecc… esattamente come se usassi gli strumenti per sviluppatori di Firefox.
Una volta che l’applicazione è avviata sul simulatore è tempo di provarla su di un dispositivo reale.
Provare le applicazioni su un dispositivo reale
Niente può sostituire il testing su un dispositivo reale. Nel simulatore i test vengono effettuatifacendo 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. Un’esperienza utentee sviluppatore completamente diversa.
Per sottolineare l’importanza di effettuare dei test su un dispositivo reale, racconterò un fattopersonale. Alcuni anni fa Raphael Eckhardt (il designer della copertina di questo testo) e io stavamorealizzando un puzzle game simile a Bejeweled. Il nostro gioco consisteva nel trascinare e posizionaredei 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 gioconon erano ottimizzati per la piattaformamobile: quando posizionavamo la mano sullo schermo tuttoscompariva dietro la mano. Inoltre i componenti di gioco erano troppo piccoli per le dita, quindi gliutenti non potevano rendersi conto di quello che stavano facendo, in poche parole l’interfaccia nonera un granché. Il problema era che noi avevamo effettuato i nostri test utilizzando il mouse e ilpuntatore del mouse è molto piccolo. Quando abbiamo provato con le nostre dita “cicciotelle” cisiamo resi conto che dovevamo rielaborare l’interfaccia.
Per evitare di avere un’esperienza così frustrante è indispensabile verificare sempre l’app su undispositivo reale… O ancora meglio su qualunque dispositivo si abbia a disposizione. Effettuare deibuoni test su dei semplici prototipi è molto importante per non dover perdere tempo e denaro arimodificare tutto ogni volta.
Connettere un dispostivo Firefox OS
Adesso che sappiamo quanto sia importante testare il proprio lavoro prima di consegnarlo al mondovediamo come possiamo usare il WebIde in simbiosi con un dispositivo reale per provare il nostrolavoro.
• Installa i driver del tuo dispositivo⁹⁶• Installa adb• Installa ADB Helper• collega il dispositivo al computer tramite il cavo USB
Da adesso se hai installato l’addon per Firefox ADB Helper verrà segnalato al WebIde che esiste iltuo dispositivo e questo verrà aggiunto sotto l’etichetta Dispositivi USB.
Puoi decidere di usare il tuo dispositivo al posto del simulatore, andando quindi ad installare la tuaapp 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 ilcollegamento.
⁹⁶se lavori in ambiente Windows, altrimenti non ne hai bisogno
WebIde 68
Dispositivo connesso!
Una volta che la connessione è effettuata sarà possibile usare i pulsanti Aggiorna e Debug nelWebIde per aggiornare e fare il debug dell’applicazione sul dispositivo connesso come con ilsimulatore.
Riassunto
Per riassumere, il WebIde è fantastico. Molto meglio rispetto alla vecchia estensione del Firefox OS1.1 Simulator e anche meglio dell’App Manager.
Adesso abbiamo a disposisizione un ambiente di sviluppo completo con cui possiamo gestire tuttoil ciclo del nostro lavoro.
Arrivati a questo punto avrai la sensazione di aver capito come stanno andando le cose, quali sonogli strumenti che ti servono e come dovrebbe procedere il tuo lavoro quando vuoi realizzare una appper Firefox OS.
Nel prossimo capitolo parleremo della vecchia versione del Simulatore di Firefox OS 1.1. Questostudio è necessario se si devono connettere dispositivi con Firefox OS 1.1. Il capitolo è molto similea 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 conFirefox OS 1.1. Il metodo attuale per provare e fare il debug delle applicazioni è il’WebIdedi cui abbiamo parlto nel capitolo precedente. Il contenuto di questo capitolo è per quellepersone che devono provare le applicazioni sulla versione 1.1 di Firefox OS.
Il Simulatore Firefox OS 70
Attenzione: Se stai usando Firefox 29 o successive e dispositivi con Firefox OS 1.1 oprecedenti hai bisogno di un’altra versione del Simulatore Firefox OS 1.1 che non èdisponibile nell’add-ons marketplace. Questa versione è una BETA ma al momento nonci sono alternative. Puoi scaricarla per Mac OS X⁹⁷, Linux⁹⁸ o Windows⁹⁹. Scarica il file xpie caricalo in Firefox e segui le istruzioni. Se vuoi seguire la questione del supporto per ilsimulatore Firefox OS 1.1 su Firefox 29 dai un’occhiata alla bug request #1001590 it¹⁰⁰.
Abbiamo installato il Simulatore Firefox OS nel capitolo Ambiente di sviluppo per Firefox OS elo abbiamo utilizzato nel capitolo La prima app. È giunta l’ora di approfondire la conoscenza delsimulatore e imparare come effettuare le operazioni più comuni.
Per ulteriori informazioni fare riferimento alla documentazione di Firefox OS Simulator¹⁰¹ su MDN.
Aggiungere Applicazioni
È possibile aggiungere sia applicazioni hosted che packaged al simulatore. Vediamo come fare.
Aggiungere applicazioni packaged
È già stata trattata l’aggiunta di un’app packaged nel capitolo La prima app, ma vediamo dirichiamare 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
Il Simulatore Firefox OS 71
Aggiungere un’applicazione packaged al simulatore
Dopo aver fatto clic sul pulsante evidenziato nell’immagine,si aprirà una finestra di dialogo diselezione file. Per aggiungere l’app prescelta al simulatore, sarà sufficiente trovare la cartelladell’applicazione. Se non ci sono errori nel file manifesto e nel file che avvia l’app, essa verrà avviatanel simulatore. Se il file manifesto contiene degli errori verranno riportati nel Gestore App.
Esempio di un file manifesto non valido
Ogni volta che l’app verrà aggiornata sarà necessario fare clic sul pulsanteAggiorna per aggiornarel’applicazione nel simulatore in esecuzione (in alternativa è possibile utilizzare la scorciatoia datastiera CMD/CTRL+R dalla finestra del simulatore).
Aggiungere applicazioni hosted
Se si sta sviluppando un’applicazione hosted è necessario provarla utilizzando un server web. Nonutilizzare il metodo descritto in precedenza con le app hosted in quanto alcuni errori potrebberonon essere rilevati, ad esempio un MIME Type non valido del file manifesto. Si noti che il simulatorenon segnala errori, anche di una certa rilevanza come, appunto, un MIME Type non valido, ma èimportante verificare che tutto funzioni se si vuole pubblicare l’app 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ù
Il Simulatore Firefox OS 72
dispositivi e risoluzioni. Solitamente queste app web funzionano grazie a un complesso back endche deve essere in esecuzione per consentire un loro corretto funzionamento ed è proprio per questomotivo che si rende necessario verificarne il funzionamento con un vero server web per assicurarsiche tutto funzioni correttamente.
Per caricare un’app hosted nel simulatore, inserire nella casella di testo, nel box in basso a sinistra,l’URL completa del manifesto dell’app e fare clic sul pulsante +.
Aggiungere un’applicazione hosted al simulatore
Dopo aver fatto clic sul pulsante, il simulatore verificherà il file manifesto e, se non verranno rilevatierrori, l’app verrà eseguita all’interno del simulatore. Eventuali errori, analogamente a quantoavviene per le app packaged, verranno riportati nel Gestore (ad esempio, “app submission to theMarketplace needs at least an 128 icon”).
Come per le app packaged, ogni volta che l’app verrà aggiornata sarà necessario fare clic sul pulsanteAggiorna per aggiornare la versione in esecuzione nel simulatore (è anche possibile utilizzare lascorciatoia da tastiera CMD/CTRL+R dalla finestra del simulatore).
Debug
Una volta che l’app è stata aggiunta al simulatore, accedendo al Gestore sarà possibile effettuarne ildebug 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 (sepresente) e di installarne altri. Facendo clic su Debug accanto al pulsante Aggiorna verrà lanciatal’applicazione sul simulatore. A questo punto, si aprirà un’istanza dellaConsole JavaScript connessaall’app in esecuzione nel simulatore. In basso sarà possibile vedere il contenuto nel file manifesttramite visualizzazione ad albero.
Il Simulatore Firefox OS 73
Il pulsate da premere
Alla pressione del pulsante scelto verrà mostrata una schermata simile a quella di questa immagine:
Developer Tools connessi all’applicazione nel simulatore
Con gli strumenti di sviluppo connessi all’applicazione sarà possibile verificarne il funzionamentoJavascript, effettuare il debug del DOM, modificare lo stile ecc. Come amano dire i ragazzi dellestartup Provare finché non è pronta.
Quando l’app risulterà funzionante nel simulatore, sarà tempo di provarla su un vero dispositivo.
Il Simulatore Firefox OS 74
Provare l’applicazione su un dispositivo reale
Niente può sostituire il testing su un dispositivo reale. Nel simulatore i test vengono effettuatifacendo clic con un mouse su uno schermo di computer, mentre con un dispositivo reale i test sieffettuano toccando uno touchscreen e premendo con le dita dei pulsanti reali. Un’esperienza utentee sviluppatore completamente diversa.
Per sottolineare l’importanza di effettuare dei test su un dispositivo reale, racconterò un fattopersonale. Alcuni anni fa Raphael Eckhardt (il designer della copertina di questo testo) e io stavamorealizzando un puzzle game simile a Bejeweled. Il nostro gioco consisteva nel trascinare e posizionaredei 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 gioconon erano ottimizzati per la piattaformamobile: quando posizionavamo la mano sullo schermo tuttoscompariva dietro la mano. Inoltre i componenti di gioco erano troppo piccoli per le dita, quindi gliutenti non potevano rendersi conto di quello che stavano facendo, in poche parole l’interfaccia nonera un granché. Il problema era che noi avevamo effettuato i nostri test utilizzando il mouse e ilpuntatore del mouse è molto piccolo. Quando abbiamo provato con le nostre dita “cicciotelle” cisiamo resi conto che dovevamo rielaborare l’interfaccia.
Per evitare di avere un’esperienza così frustrante è indispensabile verificare sempre l’app su undispositivo reale… O ancora meglio su qualunque dispositivo si abbia a disposizione. Effettuare deibuoni test su dei semplici prototipi è molto importante per non dover perdere tempo e denaro arimodificare 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 l’utente finale. Un’altra soluzione è sostituireAndroid con Firefox OS su alcuni dispositivi (alcuni dispositivi lo supportano!) ma, a meno di nonessere esperti e disposti a perdere del tempo con l’hacking, non è una cosa chemi 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 clicnella barra laterale dove è scritto Dispositivo si passa al gestore del dispositivo (che può essereanche il simulatore stesso). Quando il simulatore riconosce che un dispositivo con Firefox OS phoneè collegato, verrà mostrato un messaggio Dispositivo Connesso.
Il Simulatore Firefox OS 75
Dispositivo connesso!
Se lo smartphone è connesso e riconosciuto, il simulatoremostrerà un nuovo pulsante chiamatoPushaccanto ai pulsanti Aggiorna e Connetti. Premendo questo pulsante, una finestra di richiesta peri permessi apparirà sul dispositivo chiedendo la conferma per poter procedere con l’installazionedell’applicazione.
Il pulsante da premere per fare il push delle app sul dispositivo
Nell’immagine sottostante è possibile vedere la finestra di richiesta permessi:
Il Simulatore Firefox OS 76
Non è la foto migliore del mondo ma mostra la finestra dei permessi (scusate per la faccia ma erano le 4:25 dimattina)
Con l’applicazione in esecuzione nel dispositivo è possibile usare il remote debugging per aprireun’istanza della Console JavaScript collegata con l’app in modo da effettuare il debug.
Nel Gestore App, facendo clic su Dispositivo si apre una schermata con le informazioni deldispositivo collegato o del simulatore.
Applicazioni del dispositivo!
Da questo dispositivo si possono debuggare le applicazioni installate tra cui anche quelle di sistema.
Il Simulatore Firefox OS 77
Tabella dei permessi!
In questa tabella c’è un riassunto dei permessi utilizzabili nel manifest a seconda del tipo diapplicazione che abbiamo visto qualche pagina fa.
Riassunto
Riassumendo, il simulatore FirefoxOS è spettacolare per creare applicazioni specifiche per FirefoxOS- ma ha alcuni limiti se si vuole sviluppare un’app che funzioni su una maggior gamma di dispositivi(ad esempio al momento non è possibile emulare il comportamento di Firefox OS su un tablet).
A questo punto del testo, oltre a una sensazione di incredibile forza, si dovrebbe, o così mi auguro,riuscire a comprendere il workflow necessario per sviluppare un’app Firefox OS. Nel prossimocapitolo vedremo come distribuire un’applicazione agli utenti.
Distribuire le appOra che la nostra applicazione è pronta, abbiamo bisogno di trovare unmodo per renderla disponibileai nostri utenti. Nel capitolo introduttivo avevo accennato che, diversamente da Apple, Mozillanon obbliga a utilizzare il proprio canale di distribuzione - lasciando ognuno libero di esprimerela propria creatività. In questo capitolo impareremo come distribuire la nostra app al di fuori delcanale ufficiale del Firefox Marketplace¹⁰².
A mio modesto avviso, non utilizzare il canale ufficiale Mozilla per distribuire un’app è convenientein questi due casi:
1. Si sta sviluppando un’app per uso interno aziendale o per una ristretta cerchia di utenti.Pubblicandola su FirefoxMarketplace, l’app sarà disponibile a chiunque e si renderà necessarioimplementare un sistema di autenticazione per consentire l’utilizzo solo agli utenti autorizzati.Ad esempio, nelle prime versioni dell’app Evernote era richiesta l’identificazione sui loroserver prima di poterla utilizzare.
2. Si dispone già di un grosso bacino d’utenza che è possibile sfruttare per distribuire l’app. Unesempio potrebbe essere un giornale, come il Financial Times, che può limitarsi a renderedisponibile l’app sul proprio sito per raggiungere la quasi totalità dei propri utenti. È benericordare che è possibile distribuire l’app sia su Firefox Marketplace, sia su un canale esterno,in questo modo sarà possibile sfruttare il canale di marketing preesistente e utilizzare FirefoxMarketplace per raggiungere nuovi utenti.
Il processo di distribuzione delle app packaged e delle app hosted è simile, anche se utilizzano dellefunzioni differenti. Ecco perché tratterò i due casi separatamente. Indipendentemente dal fatto chel’app sia pacchettizzata o ospitata, il procedimento è più o meno lo stesso: sarà necessario renderedisponibile un pulsante o un link nella pagina, denominato Fai clic per installare l’app, o utilizzareun particolare URL che quando aperto attiva l’esecuzione della routine di installazione. In entrambii casi, all’utente finale verrà presentata una finestra di dialogo in cui gli verrà chiesto di confermarel’installazione.
App hosted
Nel caso la vostra app sia disponibile sul web sotto forma di un sito come facciamo a chiedereall’utente di installare la nostra app?
Ecco che quì arriva in soccorso Firefox ed unaWebApi. Grazie a questo strumento possiamo chiedereall’utente 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 var installapp = navigator.mozApps.install(manifestURL);
2 installapp.onsuccess = function(data) {
3 // A App was installed.
4 };
5 installapp.onerror = function() {
6 // A App was not installed, more information at
7 // installapp.error.name
8 };
Nell’esempio riportato qui sopra manifestURL riporta l’indirizzo del filemanifest. All’esecuzione diquesto codice, il sistema chiederà all’utente se desidera installare l’app e, a seconda della risposta,richiamerà la callback appropriata: success in caso di risposta affermativa e error in caso contrario.
Per ulteriori informazioni su questa API consultare la pagina su MDN sull’installazione delle app¹⁰³.
App pacchettizzate
L’installazione di app pacchettizzate funziona in modo analogo, però in questo caso anzichéutilizzare la funzione mozApps.install() utilizzeremo mozApps.installPackage(), come mostratonel codice d’esempio riportato qui di seguito.
Code for packaged app installation
1 var packageURL = "http://myapp.example.com/myapp.zip"; // <-- absolute url to pa\
2 ckage
3 var installapp = navigator.mozApps.installPackage(packageURL);
Nota: ho il sospetto che l’installazione di app pacchettizzate da siti diversi da FirefoxMarketplace non sia consentita nella versione 1.0.1 di Firefox OS. Nonostante l’API siadocumentata, non ho mai provato di persona, quindi se qualche lettore ha l’opportunitàdi verificare questa mia supposizione, lo prego gentilmente di contattarmi affinché possaaggiornare 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 FirefoxMarketplace grazie all’utilizzo della API di Installazione e gestione delle Open Web Apps.Questa parte l’avevamo accennata nel capitolo sul boilerplate¹⁰⁴ ma in questo capitolo abbiamovisto le differenze ed alcuni esempi d’uso alternativi. Esistono molte altre routine disponibili, adesempio per controllare se l’applicazione è installata (in questo modo sarà possibile nascondere ilpulsante Fai clic qui per installare). Per ulteriori informazioni su queste API consultare la paginadi MDN dedicata all’installazione delle app¹⁰⁵ (sì, avete ragione, questo link non è nuovo, però cisono informazioni importanti che dovete assolutamente conoscere).
Nel prossimo capitolo impareremo come distribuire la nostra app attraverso ilMarketplace 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 applicazioniper Firefox OS, Firefox e Firefox per Android. Questo è il principale canale di distribuzione perle app Firefox OS, tuttavia non è l’unica alternativa possibile. Se sei interessato a distribuire appesternamente al Marketplace, leggi il capitolo precedente.
Per pubblicare un’app sul Marketplace è necessario effettuare l’identificazione tramite MozillaPersona¹⁰⁷. Sarà sufficiente fare clic sul pulsante Registrati e seguire le istruzioni. Una voltaeffettuato l’accesso al Marketplace sarà possibile pubblicare l’app.
¹⁰⁶http://marketplace.firefox.com¹⁰⁷https://login.persona.org/about
Firefox Marketplace 82
Passi che precedono l’ideazione di un’app
Tutte le applicazioni pubblicate sul Marketplace sono sottoposte a un processo di revisione e devonoessere approvate dai revisori del sito (non c’è bisogno di preoccuparsi, è meno pauroso di quantosembri). Il processo di controllo delle app ospitate e delle app pacchettizzate semplici è più snellorispetto a quello delle app con privilegi, in quanto le prime utilizzano API meno sensibili. Prima diinviare un’app su Firefox Marketplace leggere attentamente le linee guida per la revisione¹⁰⁸. A mioavviso le parti più importanti sono:
• I dispositivi Firefox OS, contrariamente ai dispositivi Android e ai browser desktop, non hannoun pulsante Indietro. Nel caso in cui l’app rimandi a una pagina dalla quale non è possibileritornare più indietro (in altre parole se l’utente nell’utilizzo dell’app arriva a un punto morto)l’app verrà rifiutata.
• L’app deve avere un’icona di 60x60 pixel e una descrizione chiara del suo funzionamento.• L’app deve funzionare esattamente come riportato nella sua descrizione. Se nella descrizionesi dichiarano delle caratteristiche e nell’utilizzo ne emergono delle altre, l’app verrà respinta.
• Se l’app richiede un’autorizzazione particolare si è obbligati a farne uso nel codice sorgente.Dichiarare che si tratta di un’app con privilegi e non fare uso di alcuna API fra quelle riservatealle app con privilegi, porterà al rifiuto dell’app da parte dei revisori che chiederanno allosviluppatore di ripubblicarla come app semplice.
• L’applicazione deve essere accompagnata da un’informativa sulla privacy.• I file manifesto dovrebbero essere distribuiti con il corretto MIME type e utilizzare lo stessodominio di origine in caso di app ospitate.
Alla pagina sopraindicata vengono discussi altri criteri di validità e altri potrebbero essere aggiuntiin futuro senza un’esplicita comunicazione. Sarà utile impiegare bene il proprio tempo e leggerecon attenzione quella pagina. Vedere la propria applicazione rifiutata per delle sciocchezze cherichiedono poco sforzo per essere risolte è una gran perdita di tempo. È sempre meglio iniziarea fare le cose per bene sin dall’inizio (i revisori sono ben lieti di approvare delle buone app).
Passi preliminari prima della pubblicazione
I passaggi richiesti per la pubblicazione di un’app sul Marketplace variano a seconda che si tratti diun’app hosted o di un’app pacchettizzata. Nel caso di app hosted, è sufficiente che sia raggiungibileonline e che il manifesto sia distribuito con il corretto MIME type. I file delle app packaged devonoessere raccolti in un archivio compresso utilizzando il formato zip e richiedono qualche maggioreattenzione.
¹⁰⁸https://developer.mozilla.org/it/Marketplace/criteri_revisione_marketplace
Firefox Marketplace 83
Un errore comune a molti sviluppatori è quello di selezionare la cartella che contiene i file dell’appe di comprimerla. Come risultato il file zip contiene una cartella che a sua volta contiene l’app verae propria. Questo non è il modo corretto per creare l’archivio zip di un’applicazione Firefox OS.
Il modo corretto di creare l’archivio zip consiste nel selezionare tutti i file e le cartelle dell’app inmodo che il file manifesto sia nel primo livello dell’archivio. Su sistemi operativi Mac e Linux èpossibile aprire il Terminale, navigare fino alla directory dell’app e eseguire il comando zip -r
myapp.zip * per ottenere il risultato desiderato, come mostrato nella schermata sottostante.
Modo corretto di comprimere i file da terminale
Questo file zip è quello che dovremo pubblicare sul Marketplace.
Pubblicazione dell’app sul Marketplace
Ora che l’applicazione è pronta - e con la consapevolezza che dovrà soddisfare i criteri delMarketplace per essere approvata dai revisori - è tempo di pubblicarla sul Marketplace. Per farlo,fare clic su Lemie app utilizzando il pulsante a forma di ingranaggio posizionato in alto nella paginadel Marketplace.
Firefox Marketplace 84
Le mie app
Arrivati nella pagina di gestione dei caricamenti, fare clic su Invia un’app dal menu superiore.
Invio di un’app
Come è possibile notare dallo schermata qui sotto, questo link aprirà il modulo per l’invio di nuoveapp.
Firefox Marketplace 85
Invio di nuove app
Da questa pagina si dovranno impostare le seguenti opzioni:
• Se si tratta di un’app hosted o di un’app packaged.• Se si tratta di un’app gratuita o di un’app a pagamento (o se utilizzano i pagamenti in-app).• Per quali dispositivi è disponibile (Firefox OS per smartphone e tablet, Firefox Desktop, FirefoxFor Android ecc…).
Dopo aver impostato queste preferenze si verrà rimandati a un’altra pagina. In questo testotratteremo esplicitamente il caso di un’app pacchettizzata, ma la procedura è analoga per un’appospitata.
Nel proseguo del capitolo faremo sempre riferimento a un’app pacchettizzata gratuita per FirefoxOS. In questo caso dobbiamo caricare il file zip della nostra app, di cui si è discusso nella sezioneprecedente.
Dopo aver effettuato l’upload del file, questo subirà un processo automatico di verifica e al termineverrà mostrato un resoconto con una serie di opzioni.
Firefox Marketplace 86
Dopo aver caricato il file zip
Dalla schermata mostrata qui sopra, è possibile notare che l’app da me caricata non presenta errori,ma riporta 6 avvisi. Ignorando la discussione degli avvisi per non complicare eccessivamente latrattazione, concentriamoci sul significato della voce Requisiti minimi della nostra app. In questospecifico caso, l’ultima opzione Smartphone-Sized Displays (qHD) dovrebbe essere deselezionata inquanto la nostra applicazione si adatta a schermi di qualunque dimensione.
Il passaggio successivo è denominato Passaggio #3: dettagli ed è quello in cui si dovranno inseriredelle informazioni dettagliate sull’app, come categoria, testo descrittivo, qualche screenshot, ecc…
Come ottenere degli screenshots per il Marketplace
Siccome non tutti abbiamo confidenza con i programmi di grafica ecco che il simulatore ci viene insoccorso e ci permette di fare gli screenshots senza tanta fatica.
Firefox Marketplace 87
Un click e via, ecco lo screenshot
Basta scegliere Runtime > Screenshot perché venga salvata nella cartella Immagini del vostrocomputer la schermata che vedete al momento sul simulatore. Ecco la schermata che abbiamosalvato.
Firefox Marketplace 88
Lo screenshot preso precedentemente
Firefox Marketplace 89
Le informazioni sulla nostra app
Inserimento di informazioni dettagliate
Dopo aver inserito in dettaglio le informazioni sull’app, il processo di caricamento è completo.Arriveremo a un passaggio dedicato alla certificazione guidata dell’applicazione, passaggio in cui civerrà chiesto di selezionare gli argomenti trattati se sono violenti, illeciti, se è un gioco ecc. In questomodo la nostra applicazione verrà certificata per la sua comparsa sui vari paesi a seconda proprio diquesto passaggio obbligatorio.Ora non ci resta che attendere l’approvazione da parte dei revisori del Marketplace. Complimenti,l’app ora è distribuita su Firefox Marketplace.
Dalla pagina di gestione delle app¹⁰⁹ sarà possibile verificare lo stato delle app caricate e, se lo sidesidera, modificare le informazioni dell’app.Dalla pagina di gestione dell’app potremo anche vedere le statistiche di installazione, visita, supportoecc.
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 testateda volontari di Mozilla. Questi volontari a loro volta sono sottoposti a dei test per verificare le loroconoscenze.
I criteri di accettazione dell’applicazione sono molteplici e passano dalla sicurezza, privacy, conte-nuto, funzionalità e usabilità.
Durante il processo di recensione verrà controllato il file manifest per la completezza delleinformazioni quindi è molto importante che sia completo e preciso perché è uno dei primi motivi percui l’app può essere bocciata. Per esempio specificando lingue disponibili che non lo sono, permessidocumentati male, schermata mancante o descrizione incompleta.
Un dettaglio da non dimenticare è che i recensori non sono un team di QA, fanno dei test d’usocome un utente normale e provano l’applicazione sui sistemi specificati nel marketplace.
Il recensore in caso di rifiuto dell’applicazione fornisce una spiegazione dei problemi riscontrati,spiegando i passaggi per riprodurre i problemi dando riferimenti alla documentazione per correggerele carenze. Non commenta la grafica dell’applicazione ma solo come l’applicazione funziona. Losviluppatore avrà sempre il beneficio del dubbio e potrà rinviare l’applicazione e chiedere maggioridettagli sulle motivazioni del rifiuto.
Sicurezza
Per maggiori informazioni, fate riferimento alla pagina dedicata su MDN¹¹¹.
Il manifest deve essere fornito dallo stesso origin dell’applicazione quindi lo stesso dominio, deveessere fornito con il mime-type application/x-web-app-manifest+json e l’applicazione non devecontenere iframe. Questo impedisce ad altre persone di fare applicazioni hosted il cui sito non è diloro gestione.
Privacy
Per l’approvazione deve essere presentata una privacy policy ma non ci sono requisiti specifici sulformato 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 conteneremateriale pornografico, codice maligno o promozione di materiale illegale/giocod’azzardo/servizi illegali. Potremmo dire: regole del buon senso!
Funzionalità
Il revisore deve provare le funzionalità principali dell’applicazione, se ci sono piccoli problemi tecnicio problemi grafici potrà essere approvata. Inoltre, come abbiamo già detto, non deve compromettereil sistema o la sua stabilità.
Usabilità
Lo sviluppatore deve cercare di ottimizzare l’applicazione sia a livello di layout che di piattaforma.Dettaglio da non trascurare che Firefox OS non ha pulsanti fisici quindi deve avere dei pulsanti dinavigazione. Cosa molto importante se qualcosa deve essere oggetto di click/tocco deve avere delledimensioni usabili.
Alcuni consigli
Se stai realizzando un gioco consiglio di presentare le istruzioni subito invece della partita già avviatae specificare se l’applicazione è per Firefox Desktop/Firefox for Android/Firefox OS mobile o FirefoxOS per tablet.
Inserisci dei bei screenshot dell’applicazione che sono una vetrina del tuo lavoro.
Riassunto
Complimenti! La propria nuova applicazione ora è su Firefox Marketplace e ci si sta apprestando aesplorare un nuovissimo tipo di mercato.
=======
Spero che la lettura di questa veloce guida sia stata piacevole. Ho in mente di aggiornare e ampliarespesso questa guida, quindi consiglio di tenere gli occhi aperti e iscriversi per ricevere le notizie sulsuo aggiornamento. Se si è scaricato questo testo dal sito Leanpub non ci sono problemi: si riceveràautomaticamente un’email che informerà di nuovi aggiornamenti. Se invece è stato scaricato daaltri 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 dispam, 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 iosia affezionato a questo progetto e quanto vorrei che avesse successo. È possibile inviare leproprie opinioni via Twitter al mio account @soapdog¹¹⁵ o al mio indirizzo di posta [email protected]¹¹⁶. 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 è quellodi unirsi al gruppo più esteso della comunità Mozilla, aiutandoci a mantenere il Web libero e creatodagli utenti per gli utenti.È possibile unirsi a noi visitando http://www.mozilla.org/contribute/¹¹⁸ e aiutare la crescita di FirefoxOS.
¹¹⁵http://twitter.com/soapdog¹¹⁶mailto:[email protected]¹¹⁷http://andregarzia.com¹¹⁸http://www.mozilla.org/en-US/contribute/
AltroIn questo capitolo vedremo in modo veloce alcune tecnologie che ci possono essere utili nellosviluppo per Firefox OS.
Gaia Building Blocks
Per chi è abituato ad utilizzare i framework CSS sarà molto semplice capire l’utilità di BuildingBlocks. Questo framework già citato è utilizzato nel boilerplate e in molte applicazioni presenti sulmarketplace.Si tratta di un framework CSS basato sulle release giornaliere di Gaia che permette di avere semprele 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
Altro 94
• Status¹³²• Switches¹³³• Tabs¹³⁴• Toolbars¹³⁵• Value Selector¹³⁶
Come si può vedere ci sono molte interfacce e opzioni possibili per avere la stessa grafica del sistemaun 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 filepsd¹³⁸ per un’approccio grafico al lavoro.
Web Components
I Web Components sono una tecnologia emergente che è attualmente nello stato diWorking Draft¹³⁹dal W3C ma viene già supportata da Chrome e Firefox.
La caratteristica principale di questa nuova tecnologia è la personalizzazione di HTML, possiamocreare dei nuovi tag, definendone il comportamento, e questi verranno aggiunti alla nostra surichiesta.
Questa idea permette di avere ad esempio un tag <map> per visualizzare una mappa tramite GoogleMaps o OpenStreetMap, un tag <calendar> per permettere all’utente di scegliere un giorno dalcalendario, <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 datatadi un browser e usare i Web Components basta usare una polyfill che vi viene data dal progettoPolymer di Google.
La libreria Polymer¹⁴⁰ è integrata nella raccolta di Web Components Brick 2.0¹⁴¹, sponsorizzata daMozilla. In questa guida li introdurremo semplicemente senza andare nei dettagli (un po’ comeabbiamo fatto con Gaia Building Blocks).
Attualmente sono disponibili in Brick i seguenti componenti, che potete già utilizzare.
• Barra dell’applicazione¹⁴² - una comoda barra per contenere titolo e pulsanti
¹³²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
Altro 95
• 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 dell’utente
Per mostrare l’uso di questi componenti, Daniele ha realizzato un boilerplate di nome Brickly¹⁵² chepotete studiare per prendere confidenza con i Web Components.
Non è nell’interesse della guida approfondire questa libreria ma solo pubblicizzare questo materialegià disponibile all’uso.
Hosting App su Github
Github offre sui suoi server un servizio di web hosting, questa sezione tratterà di come sfruttareGithub per distribuire la propria applicazione sulla rete.
Come prima cosa è necessario registrarsi su Github ed affettuare l’accesso. Nella schermata chetroverete davanti (dettaDashboard) alla destra della vostra immagine di profilo c’è un icona a formadi “più” che permette di creare una repository.
Una repository può essere descritta semplicemente come una cartella che contiene un progetto e lastoria dei suoi file da quando l’avete creata. Questo ci permette di tenere traccia delle modifiche aifile 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
Altro 96
aggiungi una repository
Verrete indirizzati alla schermata di creazione della repository; qui dovrete inserire il nome dellavostra applicazione e una breve descrizione della stessa, lasciando i restanti campi immodificatipremete create repository. La repository sarà quindi creata automaticamente e vi troverete nellapagina del progetto.
crea nuova repository
In questa nuova schermata è presente una barra sulla destra che permette di gestire il progetto, fate
Altro 97
click su Settings
e scorrete fino alla sezione che ha per titolo Github Pages dove troverete il pulsante AutomaticPage Generator, premetelo.
genera pagina automatica
La pagina che verrà creata servirà come base per l’applicazione, motivo per cui non dovremo perderetempo amodificare i contenuti o a scegliere il layout: la pagina generata verrà scartata in favore dellanostra applicazione.
Nella prima pagina New project site fate click su continue to layouts senza modificare nulla enella pagina di scelta del layout premete publish page.
Github creerà quindi un sito per il vostro progetto che sarà visitabile da chiunque all’indirizzo:http://miousername.github.io/nomedelprogetto. Potete trovare l’indirizzo completo nella pagi-na Settings della vostra repository. Seguendo i passaggi sopra elencati il sito sarà così realizzato(titolo e sottotitolo dipenderanno dal nome e dalla descrizione):
Altro 98
Una delle pagine disponibili
Per far si che l’app sia effettivamente installabile occorre modificare il file manifest.webapp. Inparticolare bisogna sostituire nel campo “launch_path” il nuovo indirizzo del vostro file index.html.
Se ricordate l’indirizzo che avrà il vostro progetto sarà circa: http://miousername.github.io/nomedelprogetto,il manifesto deve quindi essere così modificato.
1 "launch_path" : "/nomedelprogetto/index.html"
Per la corretta visualizzazione delle icone è necessario aggiornare anche il campo “icons”
1 "icons" : {
2 "128" : "/nomedelprogetto/cartellaIcone/icona128.png",
3 "60" : "/nomedelprogetto/cartellaIcone/icona60.png"
4 }
Infine per caricare l’applicazione è necessario installare sul computer un software distribuito daGithub.
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:
Altro 99
1 $ git clone https://github.com/miousername/nomedelprogetto.git
Ora bisogna sostituire il contenuto della cartella nomedelprogetto con i file che compongono lavostra 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 $ cd nomedelprogetto
2 $ git add -A
3 $ git commit -m "hosting app"
4 $ git push origin gh-pages
Inserite le vostre credenziali per avviare il caricamento dei file. Una volta finito il caricamentovisitando l’indirizzo del vostro progetto vedrete anzichè la pagina generata automaticamentel’Homepage della vostra applicazione.
NOTA: Può capitare che a volte la modifica della pagina impieghi anche 30 minuti, nel casopazientate.
Ultima tappa è la pubblicazione sul Firefox Marketplace. Accedete o registratevi al Firefox Market-place come sviluppatori, nella pagina “Carica un’app” selezionate “Hosted app” e inserite l’indirizzodel manifesto ossia: http://miousername.github.io/nomedelprogetto/manifest.webapp
Concierge
Tra gli strumenti a nostra disposizione se vogliamo pubblicare la nostra app come hosted c’èConcierge¹⁵³, una libreria che si occupa di:
• rilevare se la nostra app è installata• proporre l’installazione• creare un bottone di installazione semplice e di buon gusto
Potete vedere la demo su questa pagina¹⁵⁴.
Per usare Concierge basta includere il suo file JavaScript, il file CSS e aggiungere il seguente codicealla nostra pagina su cui troviamo l’applicazione.
¹⁵³https://github.com/alexgibson/concierge¹⁵⁴http://alxgbsn.co.uk/concierge/
Altro 100
1 var install = new Concierge({
2 onSuccess: successCallback,
3 onError: errorCallback
4 });
5
6 function successCallback () {
7 console.log('App installed!');
8 }
9
10 function errorCallback (error) {
11 console.error('Concierge() error: ' + error);
12 }
Questo è tutto, se vi doveste trovare in imbarazzo e non funzionasse controllate per bene di averseguito tutti i passaggi elencati sulla pagina del progetto¹⁵⁵.
Firefox Developer Edition
Per i 10 anni di Firefox, il browser indipendente che mette l’utente al centro, Mozilla ha fattoun enorme balzo in avanti verso la comunità degli sviluppatori web come noi (si, anche tu!). Laversione Firefox Developer Edition¹⁵⁶ include TUTTI gli strumenti su cui Mozilla lavora per aiutaregli sviluppatori web, compresi quelli ancora non inclusi nelle versioni generiche, ed è compatibilecon i più nuovi standard.
Se continuerai questo percorso da Web Developer non potrai fare a meno di sporcarti le mani equesti 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