Quasar Framework: Usando plugin cordova sqlite storage no Quasar v.1

Vamos aprender como utilizar o plugin cordova-sqlite-storage no Quasar Framework v.1.0.0-beta22.

Vou considerar que você já sabe criar um projeto com Quasar e tem um pouco de conhecimento de como ele funciona.

Se você não sabe como criar um projeto clique aqui. Porém, se ainda não conhece o Quasar ou não tem familiaridade com ele, assista às vídeo aulas do Patrick Monteiro, no curso sobre Quasar Framework framework. Para saber como usar o plugin e como instalá-lo basta clicar aqui.

Dito essas coisa vamos aos códigos. Depois de gerar o projeto vamos criar um módulo com VUEX na pasta ‘store’ renomeie o projeto: module-example para product e faça a seguinte alteração em store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
// Antes era import products from './module-example'
import products from './products' // Agora vai ficar assim

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
 const Store = new Vuex.Store({
   modules: {
     // Antes era module-example
     products // Agora vai ser product
   },
   strict: process.env.DEV
 })

 return Store
}

Agora vamos criar o CRUD em store/products/actions.js:

const openConection = () => {
 return window.sqlitePlugin.openDatabase({ // conexão sqlite-plugin
   name: 'myShopping.db',
   location: 'default'
 })
}

const createDB = () => {
 let sql = 'CREATE TABLE IF NOT EXISTS products(id INTEGER PRIMARY KEY ASC, name VARCHAR(100) UNIQUE, price REAL(10,2) DEFAULT 0.0, image VARCHAR(255) UNIQUE )'
 // let sql = 'DROP TABLE IF EXISTS products'
 // let sql = 'DROP DATABASE myShopping'
 let db = openConection()
 db.transaction(function (tx) {
   tx.executeSql(sql)
 }, function (error) {
   // alert(`Transaction ERROR: ${error.message}`)
   return 'Transaction ERROR: ' + error.message
 }, function () {
   // alert('Banco Criado com sucesso!')
   return 'Banco Criado com sucesso!'
 })
}

const read = ({ commit }) => {
 let data = []
 data['sql'] = 'SELECT * FROM products'
 data['array'] = []
 return new Promise((resolve, reject) => {
   var db = openConection()
   db.transaction(function (tx) {
     tx.executeSql(data['sql'], data['array'], function (tx, results) { // Successo
       // alert('read: ' + JSON.stringify(results.rows))
       resolve(results)
     }, function (tx, error) { // Erros
       reject(error)
     })
   }, function (error) {
     alert('error : ' + error.message)
   })
 })
}

const readOne = ({ commit }, params) => {
 let data = []
 data['sql'] = 'SELECT * FROM products WHERE id = ?'
 data['array'] = [params.id]
 // alert('params: ' + JSON.stringify(params))
 return new Promise((resolve, reject) => {
   var db = openConection()
   // alert(db)
   db.transaction(function (tx) {
     tx.executeSql(data['sql'], data['array'], function (tx, results) { // Successo
       resolve(results.rows)
     }, function (tx, error) { // Erros
       reject(error)
     })
   })
 })
}

const create = ({ commit }, params) => {
 let data = []
 data['sql'] = `INSERT INTO products (name, price) VALUES (?,?)`
 data['array'] = [params.name, params.price]
 return new Promise((resolve, reject) => {
   var db = openConection()
   db.transaction(function (tx) {
     tx.executeSql(data['sql'], data['array'], function (tx, results) { // Successo
       console.log('add: ', JSON.stringify(results))
       resolve(results.rows)
     }, function (tx, error) { // Erros
       reject(error)
     })
   })
 })
}

const update = ({ commit }, params) => {
 console.log('params1', params)
 let data = []
 data['sql'] = `UPDATE products SET name = ?, price = ? WHERE id = ?`
 data['array'] = [params.name, params.price, params.id]
 console.log('params', data['array'])
 var db = openConection()
 return new Promise((resolve, reject) => {
   db.transaction(function (tx) {
      tx.executeSql(data['sql'], data['array'], function (tx, results) { // Successo
        resolve(results.rows)
      }, function (tx, error) { // Erros
        reject(error)
      })
    })
  })
}

const destroy = ({ commit }, params) => {
 let data = []
 data['sql'] = `DELETE FROM products WHERE id = ?`
 data['array'] = [params.id]
 var db = openConection()
 return new Promise((resolve, reject) => {
   db.transaction(function (tx) {
     tx.executeSql(data['sql'], data['array'], function (tx, results) { // Successo
       resolve(results)
     }, function (tx, error) { // Erros
       reject(error)
     })
   })
 })
}

export {
 openConection,
 createDB,
 create,
 read,
 readOne,
 update,
 destroy
}

Feito isso é só testar, acesse a pasta do projeto no Quasar Framework e use o comando (Esse código só funciona no celular, para testes na web usar Web sql):

quasar dev -m cordova -T android

Fontes: Cordova Sqlite Storage Sql Result Set Row List Phonegap e Cordova: Aula 27: Phonegap + Ionic: Plugin SQLite