Come creare un app in HTML: salvataggio dati con database SQL lato-client – parte 1

maggio 10, 2014
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+9
Molti sviluppatori javascript forse non ne sono a conoscenza, ma esiste un metodo per poter salvare i dati in un Database lato-client. Ciò significa che è possibile utilizzare database situati nel dispositivo dell’utente.

Esso costituisce un grande vantaggio nella realizzazione di HTML Mobile App e single page application in generale, anche se i database SQL lato-client possono essere utilizzati per qualunque sito web, in quanto si tratta di una funzionalità HTML5.

In un articolo che ho scritto per YourInspirationWeb.com, avevo riportato le varie modalità con cui è possibile salvare i dati per una HTML Mobile App sviluppata in CSS3 e Javascript: HTML Mobile App: Tecniche per il salvataggio dei dati.

In questo post prenderemo in considerazione il terzo metodo per il salvataggio dati esposto nell’articolo di YourInspirationWeb.com: il Database HTML5.

come-creare-un-app-i-database

La maggior parte degli sviluppatori web è abituata a salvare i propri dati tramite metodi relazionali, utilizzando perlopiù database come mySql MsSql, e chi si occupa dello sviluppo di Mobile App in HTML5, CSS3 e Javascript solitamente è prima di tutto un web designer impegnato nella realizzazione di siti web (tramite appunto questo tipo di database, come nel caso di sviluppatori WordPress).

Pertanto molti saranno contenti del fatto che per la creare mobile app è disponibile un metodo di salvataggio che sfrutta database lato-client.

Se infatti lato-server è possibile usare qualsiasi sorta di database, anche l’HTML mette a disposizione un tipo di database lato-client, che lo sviluppatore può sfruttare per poter inserire, modificare, cancellare e leggere i dati del proprio progetto sul dispositivo, secondo una metodologia relazionale, tramite vere e proprie query SQL.

Ma cosa intendo per “database lato-client“?

Per database lato-client intendo un tipo di database che risiede nel browser utilizzato dall’utente, grazie al quale possiamo evitare di dover comunicare con il server, come per esempio per mezzo di chiamate ajax.

Come creare un app: due tipi di database lato-client

Come-creare-un-app-Web-SQL-ed-IndexedDB

Lo sviluppatore ha a disposizione due tipi diversi di database lato client in HTML5:

  • Web Sql (di tipo relazionale): mette a disposizione un modello di API che permettono di eseguire delle query tramite una variante di linguaggio SQL.
  • IndexedDB (di tipo coppia chiave-valore): definisce un modello API con le quali è possibile lavorare in un database di record con valori semplici ed oggetti gerarchici.

Come per il localStorage, anche nel caso dei Database Web Sql ed IndexedDB  generalmente abbiamo a disposizione una capacità di memoria predefinita di 5MB, che può variare a seconda della versione del browser del dispositivo e delle impostazioni scelte dall’utente.

Come creare un app: la compatibilità dei database lato-client

Purtroppo nel momento in cui scrivo ci troviamo ancora in una terra al quanto instabile, per quanto riguarda i database lato-client: 

se da un lato il WebSql non sarà più mantenuto in modo attivo dalle specifications dello staff W3C (ecco il link alla pagina ufficiale w3c), il che significa che in un futuro molto prossimo sarà abbandonato, dall’altro l’IndexedDB non è ancora supportato da Mobile Safari per iOS, che invece supporta ancora il Web SQL (per la tabella delle compatibilità di IndexedDB visita questo link). Puoi consultare la pagina ufficiale w3c dell’IndexedDB collegati a questo indirizzo.

Siccome stiamo parlando di Mobile App, e siccome il numero di dispositivi Apple rappresenta una grandissima fetta dell’utenza mondiale (quindi una grandissima portata al livello di audience e possibilità di mercato), è opportuno secondo me lavorare ancora con il database WebSql, per dirigersi poi verso l’IndexedDB mano a mano che esso sarà supportato da tutti i dispositivi.

come-creare-un-app-w3c-specification

Tra l’altro, anche le versioni desktop di Chrome, Safari ed Opera supportano il WebSql, il che ci dà la possibilità di testare eventualmente il salvataggio dati anche su browser desktop, evitando di effettuare ogni volta il deploy nel dispositivo mobile.

L’indexedDB inoltre non è un modello di database relazionale.

Per ora prenderemo quindi in considerazione solamente il database WebSql.

Come creare un app: Il database Web SQL

Abbiamo detto che il Database Web SQL permette di utilizzare l’SQL lato-client.

Quindi, se hai un background da programmatore back-end (come la maggior parte dei web designers) oppure sei un programmatore front-end con nozioni di back-end, non avrai problemi con l’SQL, altrimenti apprendere l’SQL sarà uno stimolo per poter imparare una nuova competenza.

La sintassi del Web Sql è basata sull’SQLite, ma è molto similare anche ad altri database relazionali com MySql, MSSql e via dicendo.

Come si usa

Vediamo le nozioni principali del Web SQL (ovviamente se vuoi approfondire l’argomento, dal nostro caro “amico Google” potrai trovare tutte le informazioni che ti interessano).

Per sfruttare le funzionalità del Web SQL e poter salvare i dati della nostra applicazione in un database lato-client, sono 3 i metodi da prendere principalmente in considerazione:

  • openDatabase
  • transaction
  • executeSql

Come creare un app: il database SQL lato client parte 1 – conclusioni

Nella seconda parte di questa guida analizzeremo come poter utilizzare le funzionalità principali del Web SQL tramite i 3 metodi appena elencati, che ci forniscono tutto ciò di cui abbiamo bisogno per poter creare nuovi database e stabilire una connessione con quelli già esistenti, oppure effettuare altre operazioni fondamentali come la creazione di tabelle, l’inserimento, la modifica o la cancellazione di records.

E tu? Hai mai utilizzato i database lato-client per i tuoi progetti?

Magari l’hai utilizzata per salvare qualche tipo di dato, oppure pensi che potrebbe essere una possibile soluzione per il tuo prossimo progetto. Scrivi pure tutte le tue considerazioni e/o perplessità al riguardo nei commenti, e sarò lieto di aiutarti a capire se il Web SQL potrebbe essere implementato nei tuoi lavori.

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando il sistema di salvataggio Web SQL insieme a molte altre tecniche, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

HTML-mobile-accelerato-ebook-cover

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • http://www.mirkorossetto.it Mirko Rossetto

    Ciao,

    premetto che non so niente dei database lato-client (HTML 5 praticamente sconosciuto) ma non capisco se web sql è un alternativa a localStorage oppure vengono utilizzati in ambiti diversi.

    Grazie

    • Giacomo Freddi

      Ciao Mirko, Grazie per il commento!

      localStorage e Web SQL sono entrambi metodi di salvtaggio lato client, solo che mentre il localStorage salva i dati in forma di dati in coppia chiave/valore, e quindi non è una soluzione di salvtaggio relazionale, il Web SQL fornisce la possibilità di salvare dati in via relazionale, che è quella più comunemente conosciuta dai web designers (fornendo quindi la possibilità di usare query 1 a 1, molti a molti, 1 a molti, transizioni ecc.. ).

      Solitamente il localStorage si usa per dati meno complessi da salvare e leggere più rapidamente, senza dover implementare l’uso di callback asincrone, le quali sono proprie del Web SQL (che ti mostrerò nella seconda parte di questo articolo).

      Pertanto il WebSQl il quale diventa utile invece soprattutto se si ha bisogno di gestire una struttura dati più complessa.

      Per salvare dati con il localStorage basta una riga di codice, ma non si ha la possibilità di stabilire una relazione fra dati salvati in variabili diverse.

      Detto questo, entrambi i metodi possono essere anche utilizzati nello stesso progetto senza problemi.

      Spero di essere stato chiaro,

      Giacomo

  • Pingback: Come creare un app in HTML: salvare dati con da...()

  • Pingback: Come creare un app: realizzare una view di login con il localStorage | upCreative()

  • Marco Castiello

    Ciao Giacomo, grazie del tutorial!

    Mi domandavo, visto che mi accingo a studiare per realizzare una web app che verrà utilizzata da smartphone android, ma Web SQL ha davvero una capacità di soli 5MB come localStorage? Cioè l’unica differenza è che uno è un database relazionale e l’altro salva i dati in forma coppia chiave/valore?

    L’app che dovrei realizzare in pratica dovrà salvare in locale (poiché sarà usata senza possibilità di connettersi ad internet per alcuni periodi) oltre ad informazioni testuali anche 30-40 foto almeno, prima della possibile prossima sincronizzazione con il server e quindi svuotare la memoria…

    Altra domanda, fondamentale, è…si possono salvare anche foto in locale vero? :)

    Grazie in anticipo per la risposta :)

    • http://www.internetbusinesscafe.it/ Giacomo Freddi

      Ciao Marco, si esatto purtroppo il database Web SQL è limitato.
      Quando si necessita di salvare più dati solitamente si crea un file .sql tramite phonegap (che ti servirà per complirare l’app ed eseguirla su android o ios) e con le API di Phonegap si utilizza il javascript per scrivere o leggere dal db con istruzioni SQL.

      In ogni caso, sia che tu utilizzi un file che il Web SQL, ti sconsiglio di salvare l’immagine direttamente nel DB, quanto piùttosto solo il riferimento. Mentre l’immagine fisica dovresti salvarla come file all’interno dello spazio che smartphone o tablet riservano ad ogni applicazione.

      Puoi fare tutto questo con Phonegap, sulla documentazione ufficiale trovi tutto quanto ;)

      Giacomo