Skip to content

Commit

Permalink
Trovati altri link nel testo, corretti. MozillaItalia#57
Browse files Browse the repository at this point in the history
  • Loading branch information
Aronne Brivio committed Apr 15, 2015
1 parent 1547c9a commit 0aafaf9
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 22 deletions.
45 changes: 24 additions & 21 deletions manuscript/firstapp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ Dalla parte inferiore dello schermo è possibile cancellare una nota prescelta s

![Memos, finestra di conferma della cancellazione](images/originals/memos-delete-screen.png)

Il codice sorgente di Memos è disponibile nel [Repository su Github](https://github.com/soapdog/memos-for-firefoxos) (è possibile anche scaricarlo come file [.zip](https://github.com/soapdog/memos-for-firefoxos/archive/master.zip)). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un'altra copia del codice sorgente è disponibile nella cartella **code** della [repository Github di questo libro](https://github.com/soapdog/memos-for-firefoxos).
Il codice sorgente di Memos è disponibile nel [Repository su Github][1] (è possibile anche scaricarlo come file [.zip][2]). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un'altra copia del codice sorgente è disponibile nella cartella **code** della [repository Github di questo libro][3]).

This comment has been minimized.

Sign in to view

Copy link
@edoput

edoput Apr 19, 2015

purtroppo questi dovrebbero rimanere come erano prima, abbiamo avuto dei problemi prima a farli riconoscere quando veniva generato il pdf MozillaItalia#59

Memos utilizza [IndexedDB](https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB) per salvare le note e il toolkit [*Gaia Building Blocks*](https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks) per creare le interfacce. In un futuro aggiornamento il testo conterrà molte informazioni su *Gaia Building Blocks*, ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull'argomento e per sapere quali interfacce vi sono integrate visitare i link appena segnalati.
Memos utilizza [IndexedDB][4] per salvare le note e il toolkit [*Gaia Building Blocks*][5] per creare le interfacce. In un futuro aggiornamento il testo conterrà molte informazioni su *Gaia Building Blocks*, ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull'argomento e per sapere quali interfacce vi sono integrate visitare i link appena segnalati.

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

## Creare il manifesto dell'app

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

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

<<[Memos manifest (*manifest.webapp*)](code/memos/manifest.webapp)

Expand All @@ -39,13 +39,13 @@ Analizziamo i campi di questo file manifesto:

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

[^storage-permission]: Per saperne di più su questa autorizzazione leggi [la pagina MDN sui permessi][8].
[^storage-permission]: Per saperne di più su questa autorizzazione leggi [la pagina MDN sui permessi][9].

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

## Scriviamo il codice HTML

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

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

Expand Down Expand Up @@ -177,7 +177,7 @@ Entrambi i file devono essere posizionati nella cartella **js** che troviamo acc

### model.js

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

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

Expand Down Expand Up @@ -299,7 +299,7 @@ function deleteMemo(inId, inCallback) {

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

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

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

Expand Down Expand Up @@ -359,7 +359,7 @@ All'inizio vengono dichiarate alcune variabili globali (bleah :-P!) per mantener

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

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

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

Expand Down Expand Up @@ -442,7 +442,7 @@ function refreshMemoList() {
}
~~~~~~~~

La funzione `refreshMemoList()` modifica il [DOM][11] della nostra applicazione aggiornando l'elenco delle note. Sarebbe più facile usare alcuni sistemi di _templating_ come [handlebars](http://handlebarsjs.com/) o [underscore](http://underscorejs.org/) ma quest'applicazione contiene solo *vanilla javascript* quindi faremo tutto a mano.
La funzione `refreshMemoList()` modifica il [DOM][12] della nostra applicazione aggiornando l'elenco delle note. Sarebbe più facile usare alcuni sistemi di _templating_ come [handlebars][14] o [underscore][15] ma quest'applicazione contiene solo *vanilla javascript* quindi faremo tutto a mano.

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

Expand Down Expand Up @@ -477,7 +477,7 @@ Prima di avviare l'applicazione nel simulatore è preferibile verificare che tut

![Lista dei file utilizzati da Memos](images/originals/memos-file-list.png)

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

Tutto a posto? Bene, cominciamo.

Expand Down Expand Up @@ -511,13 +511,16 @@ In questo capitolo abbiamo creato la nostra prima applicazione per Firefox OS e

[1]: https://github.com/soapdog/memos-for-firefoxos
[2]: https://github.com/soapdog/memos-for-firefoxos/archive/master.zip
[3]: https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
[4]: https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
[5]: http://json.org
[6]: https://marketplace.firefox.com/developers/validator
[7]: https://developer.mozilla.org/docs/Apps/Manifest
[8]: https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
[9]: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
[10]: https://hacks.mozilla.org/2013/01/introducing-web-activities/
[11]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[12]: https://github.com/soapdog/guia-rapido-firefox-os
[3]: https://github.com/MozillaItalia/firefoxos-quick-guide
[4]: https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
[5]: https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks
[6]: http://json.org
[7]: https://marketplace.firefox.com/developers/validator
[8]: https://developer.mozilla.org/docs/Apps/Manifest
[9]: https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
[10]: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
[11]: https://hacks.mozilla.org/2013/01/introducing-web-activities/
[12]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[13]: https://github.com/soapdog/guia-rapido-firefox-os
[14]: http://handlebarsjs.com/
[15]: http://underscorejs.org/
3 changes: 2 additions & 1 deletion manuscript/other.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Attualmente sono disponibili in Brick i seguenti componenti, che potete già uti
* [Menu][32] - vi serve un menu?
* [Storage-IndexdDB][33] - per conservare informazioni sul dispositivo dell'utente

Per mostrare l'uso di questi componenti, Daniele ha realizzato un boilerplate di nome [Brickly](http://mte90.github.io/Brickly) che potete studiare per prendere confidenza con i Web Components.
Per mostrare l'uso di questi componenti, Daniele ha realizzato un boilerplate di nome [Brickly][37] che potete studiare per prendere confidenza con i Web Components.

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

Expand Down Expand Up @@ -204,3 +204,4 @@ Se continuerai questo percorso da Web Developer non potrai fare a meno di sporca
[34]: https://github.com/alexgibson/concierge "Concierge"
[35]: http://alxgbsn.co.uk/concierge/ "Concierge Demo"
[36]: https://mozilla.org/it/firefox/developer/ "Firefox Developer Edition"
[37]: http://mte90.github.io/Brickly

0 comments on commit 0aafaf9

Please sign in to comment.