Usando plugin cordova sqlite storage no Quasar Framework

Usando plugin cordova sqlite storage no Quasar Framework

Postado em: 13 Dec. 2018. | Por: Everton Alves - 0 comentário(s) | Categorias: Javascript, Quasar, Mobile | Palavras-chave: sqlite, cordova sqlite storage, quasar v.1.0.0-beta22, quasar framework

Vamos aprender como utilizar o plugin cordova-sqlite-storage no Quasar 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 e se ainda não conhece o Quasar ou não tem familiaridade com ele, pode assistir às vídeo aulas do Patrick Monteiro, no curso sobre esse framework).

Para saber como usar o plugin e como instalá-lo basta clicar aqui.

Dito essas coisa vamos aos códigos, depois de criado o projeto vamos criar um módulo com VUEX na pasta ‘store’ renomeie o projeto: module-example para product e faça a segunte 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
}
Na pagina: pages/Index.vue digite o seguinte código:

Feito isso é só testar, acesse a pasta do projeto e use o comando (Esse código só funciona no celular, para testes na web usar Web sql): 
quasar dev -m cordova -T android

O código usado nesse post pode ser encontrado no meu repositório do gitHub
 
Fontes:

COMPARTILHAR

SOBRE O AUTOR

user photo Everton Alves Membro desde 23 Feb. 2018.

Formado em Licenciatura em Matemática/UEFS, funcionário público e desenvolvedor Web back-end, com conhecimentos em PHP, MySQL, CSS, JS e HTML5. Sempre preocupado em fazer o melhor da maneira mais simples possível!

COMENTÁRIOS

Mais comentários ...

Somente usuários cadastrados podem comentar, clique aqui para fazer login ou inscreva-se.

Busca


Categorias

    Mais categorias...

    Publicidade

    Comentários recentes

    Textos mais visitados

    Palavras-chaves

    Mais palavras-chave...

    Anuncio

    Desenvolvido por: Ell Alves

    Redes Sociais

    Publicidade