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

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.

La maggior parte degli sviluppatori web è abituata a salvare i propri dati tramite metodi relazionali, utilizzando perlopiù database come mySql o 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

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.

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.