Come creare un app in HTML: salvataggio dati con database SQL lato-client – parte 2
0
0
0
0Molti 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 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:
|
1 2 3 |
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:
- Il nome del Database
- Il numero della versione da utilizzare
- Una descrizione di testo
- Dimensioni stimate del Database
- 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 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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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:
|
1 2 3 4 5 6 7 8 |
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 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:
|
1 |
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:
|
1 2 3 4 5 6 7 8 |
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.
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.
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.
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.
Pingback: Come creare un app in HTML: database SQL lato-c...()