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

maggio 16, 2014
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+6
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.

come-creare-un-app-i-database-parte-2

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

Come-creare-un-app-nuovo-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:

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 un app: le transaction di Web SQL

Come-creare-un-app-Web-SQL-transaction

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:

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

Come-creare-un-app-Web-SQL-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:

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:

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:

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:

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.

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.

  • Pingback: Come creare un app in HTML: database SQL lato-c...()

  • Andrea

    posso chiederti un consiglio?
    avrei intenzione di creare un app/sito web simile a quella del tuo articolo:
    per quanto riguarda la creazione di una login e quindi il collegamento ad un database online (dal quale poi copierò i dati che finiranno nel db locale dell’app), come mi consigli di fare, mi puoi dare un suggerimento, perchè ho cercato un pò in rete e non ho trovato niente senza php??

    grazie fin d’ora

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

      Ciao Andrea non ho capito bene quello che vuoi fare. In ogni caso per comunicare via server da un’app di questo tipo devi servirti di chiamate ajax, che richiamano appunto una pagina sul server (php, asp o qualunque altro linguaggio) la quale prende i dati dal DB e li restituisce nella risposta.

      Funziona esattamente come nel caso di una qualsiasi chiamata ajax su un normale sito web ;-)

      Giacomo

      • Andrea

        grazie Giacomo!!!!! sei stato molto chiaro… complimenti per il tuo lavoro