Nella  prima parte di questa mini-guida ho introdotto i database lato-client come soluzione per il salvataggio di quel tipo di dati che non necessitano di essere salvati su qualche sistema di storage remoto, utile sia per tipi di progetto come normali siti web, ma soprattutto per lo sviluppo di mobile app in HTML5, CSS3 e Javascript.

Molti sviluppatori (troppi) non sono a conoscenza del fatto che è possibile salvare dei dati in maniera relazionale sul browser dell’utente (o del visitatore), utilizzando uno dei linguaggi maggiormente conosciuti nel mondo del web design: l’SQL.

Da qui nasce l’idea di questa mini-guida.

Nello scorso articolo ti ho mostrato quali sono i database lato-client disponibili, ed in particolare ho anticipato i tre metodi fondamentali per poter sfruttare tutte le potenzialità del database Web SQL:

• openDatabase
• transaction
• executeSql

Vediamo come utilizzarli più nel dettaglio.

---

Come creare una #mobileapp: i metodi del #database #SQL lato-client
Click To Tweet

---

Come creare un app: Creare ed aprire un database

Per salvare i nostri dati abbiamo bisogno come prima cosa di cerare un database. Se si tenta di aprire un Database che non esiste l’API del Web SQL lo creerà automaticamente per noi.

Per creare ed aprire un database, proseguiamo come segue:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024 , function(database){
      alert(“Database creato e aperto correttamente”);
});

Nell’esempio abbiamo creato e aperto un nuovo Database associando la sua istanza ad una variabile “db”, il tutto passando 5 parametri al metodo openDatabase:

1. Il nome del Database
2. Il numero della versione da utilizzare
3. Una descrizione di testo
4. Dimensioni stimate del Database
5. Callback di creazione

Se usiamo come primo parametro il nome di un database che è già stato creato in precedenza, non viene creato un nuovo database, ma viene aperto quello già presente.

---

Come creare una #mobileapp: creare e aprire un #database #SQL lato-client
Click To Tweet

---

Come creare un app: le transaction di Web SQL

Una volta aperto il Database, possiamo istanziare l’oggetto transaction, che ci servirà per eseguire le query di cui abbiamo bisogno.

Ma perché servirsi di un oggetto aggiuntivo come la transaction invece di scrivere semplicemente le nostre righe di SQL?

Le transaction ci permettono di usufruire di una funzionalità di rollback: ciò significa che, se una transaction contenente una o più query SQL per qualche ragione fallisce, gli aggiornamenti al database non vengono effettuati, come se la transazione non fosse mai avvenuta.

E’ una logica di funzionamento molto simile a quella delle transazioni dei database MSSql, e rappresenta un grande vantaggio, soprattutto quando abbiamo la necessità di eseguire più operazioni di modifica in coda.

Il metodo transaction dà  allo sviluppatore anche la possibilità di gestire eventuali errori nella transazione con delle apposite callback di errore e di successo.

Ma vediamo più nel dettaglio come si utilizza.

La transaction non è altro che una semplice funzione con una callback di ritorno:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);
db.transaction(function(tx){
     /* Effettuare le proprie query qui */
}, function(){
     //callback di successo
     alert(“Istruzioni SQL eseguite correttamente”);
});

L’oggetto “tx” restituito nella prima funzione di callback, rappresenta l’oggetto della transaction, che useremo per eseguire le query di cui abbiamo bisogno.

Oltre al metodo transaction, è possibile usare anche il metodo readTransaction, che funziona in modo del tutto analogo al primo, ma che non può essere impiegato per eseguire delle istruzioni SQL di modifica del database (come per es. la creazione o l’eliminazione di tabelle, oppure istruzioni come INSERT ed EDIT), in quanto è stato creato appositamente per velocizzare le query di lettura.

Tuttavia con i metodo transaction possiamo effettuare sia query di lettura che di modifica.

Una volta ottenuto il nostro oggetto transaction, procediamo con l’esecuzione delle query.

Come creare un app in HTML: il metodo executeSQL

Eccoci finalmente al punto in cui possiamo divertirci con le istruzioni SQL.

executeSQL può essere utilizzato sia per query di lettura che per query di modifica del database, include un controllo implicito per l’SQL Injection, e fornisce una callback di ritorno per poter processare i risultati delle query effettuate.

Come creare una tabella

Il metodo executeSql è un metodo dell’oggetto transaction (ovvero dell’oggetto fornito con il parametro di ritorno “tx”) e viene utilizzato in questa maniera:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);

db.transaction(function(tx){
	/* Effettuare le proprie query qui */
}, function(){
	//callback di successo
	tx.executeSql("CREATE TABLE Employees (id unique, name)", [] , 			
		function(sqlTransaction, sqlResultSet){
				alert("La tabella è stata creata.");
		}, 
		function(sqlTransaction, sqlError){			
			/* Gestione degli errori */
		}
	);
});

L’esempio che ti ho appena mostrato crea una tabella dal nome “Employees” all’interno del nostro Database “nomeDatabase”.

Ovviamente, se la tabella già esiste sarà restituito un errore, che possiamo gestire all’interno della funzione passata come terzo parametro, oppure possiamo evitare l’errore a priori con una query del tipo:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);
db.transaction(function(tx){
	/* Effettuare le proprie query qui */
}, function(){
	//callback di successo
	tx.executeSql("CREATE TABLE IF NOT EXISTS Employees (id unique, name)");
	tx.executeSql("INSERT INTO Employees (id, name) VALUES (1, ‘Giacomo')");
});

Ora la tabella “Employees” ha un record al suo interno.

---

Come creare una #mobileapp: effettuare query in un #database #SQL lato-client
Click To Tweet

---

Come inserire un nuovo record in una tabella

Ma se volessimo inserire una riga mediante dei valori dinamici?

Ciò è possibile utilizzando il secondo argomento da passare al metodo executeSQL:

tx.executeSql(“INSERT INTO Employees (id, name) VALUES (?, ?) ”, [variabile_id, variabile_name] );

In questo modo le variabili “variabile_id” e “variabile_name” saranno sostituite ai caratteri “?” all’interno della query in modo sequenziale.

Come leggere i record di una tabella e processarli con il javascript

Infine, per eseguire query di lettura nella nostra tabella, basterà utilizzare la callback di ritorno processando i risultati ottenuti:

tx.executeSql('SELECT id, name FROM Employees', [  ], function (tx, resultsData) {
	//i record restituiti sono all’interno della proprietà “rows” dell’oggetto resultsData
	//loop per scorrere tutti i risultati ottenuti
	for (var i = 0; resultsData.rows.length < len; i++) {
		var employee = resultsData.rows.item(i);
		console.log(employee .name);
	}
});

La callback riceve due parametri di ritorno:

• l’oggetto della transazione (lo stesso che abbiamo usato per effettuare la query)
• l’oggetto javascript dei risultati contenente un attributo “rows” strutturato come un array, anche se non lo si può definire un’array a tutti gli effetti: per accedere ai dati di un singolo record dobbiamo utilizzare la sintassi “rows.item(i)“, dove “i” rappresenta l’indice del record  all’interno della lista dei risultati, mentre in un normale array sarebbe bastato scrivere “rows[i]”).

Dall’istruzione “var employee = resultsData.rows.item(i);” otteniamo quindi l’oggetto di un singolo record, che avrà le stesse proprietà dei campi richiesti nella query (nel nostro caso avrà quindi due proprietà: “id” e “name” );

Come creare un app: conclusioni sui metodi del Web SQL

Queste sono a grandi linee tutte le nozioni di cui abbiamo bisogno per sfruttare la maggior parte delle funzionalità del Web SQL.

Come ho spiegato nella prima parte di questa mini-guida, il Web SQL è un metodo molto utile per salvare dati in forma relazionale all’interno di qualsiasi single page application, sia quelle destinate ad essere compilate con strumenti come Phonegap e distribuite su dispositivi mobile, sia quelle che saranno disponibili come web app ed accessibili direttamente da un indirizzo remoto.

Personalmente trovo questo metodo di salvataggio molto utile per salvare le impostazioni personali dell’utente, come nel caso di Tint (la mia app per il meteo), o per salvare i dati sul dispositivo per quelle applicazioni che non devono essere sincronizzate in cloud, come ho fatto per Dieta SI o NO?.

Tuttavia va ricordato il fatto che le specifications del W3C hanno abbandonato il supporto al Web SQL a favore del database non-relazionale IndexedDB e, in un futuro molto prossimo, il Web SQL non sarà più supportato dai browser, inclusi quelli mobile.

---

Come creare una #mobileapp: i metodi del #database #SQL lato-client
Click To Tweet

---

Ed Ora?

Se hai mai utilizzato sistemi di memorizzazione come i database lato-client mi piacerebbe avere un tuo riscontro per quanto riguarda le tue reali esperienze, i tuoi progetti e/o reali case-study.

Sentiti libero/a inoltre di esporre tutti i tuoi dubbi o perplessità al riguardo, sia inviandomi una mail all’indirizzo info@upcreative.net, o meglio ancora, commentando questo articolo.

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.

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 una #mobileapp: salvataggio dati con #database #SQL lato-client
Click To Tweet

---

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 una #mobileapp: salvataggio dati con #database #SQL lato-client
Click To Tweet

---

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.