Como fazer um CRUD com SQLite no Ionic

Nessa vídeo aula eu mostro como incluir, alterar, excluir e consultar dados no SQLite com Ionic.

 

O que é o SQLite

Segundo o próprio site do SQLite, O SQLite é um motor de banco de dados SQL autônomo, de alta confiabilidade, incorporado, completo e de domínio público. O SQLite é o mecanismo de banco de dados mais utilizado no mundo.

 

Criando uma aplicação de exemplo

No vídeo acima e mostro como criar um app para salvar produtos utilizando o SQLite.

O passo a passo abaixo é o mesmo mostrado no vídeo.

  • Passo 1: Criar o aplicativo.
  • Passo 2: Instalar o plugin do SQLite.
  • Passo 3: Adicionar a plataforma Android/iOS.
  • Passo 4: Configurar o aplicativo.
  • Passo 5: Criar o provider para criação do banco de dados.
  • Passo 6: Inicializar a criação do banco de dados quando o app startar.
  • Passo 7: Criar o provider para o CRUD de produtos.
  • Passo 8: Criar o provider para listar as categorias.
  • Passo 9: Alterar a pagina Home para listar, excluir e pesquisar produtos.
  • Passo 10: Criar a pagina de inclusão/alteração de produtos.

 

Passo 1: Criar o aplicativo

ionic start NOME_DO_APP blank

 

Passo 2: Instalar o plugin do SQLite

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic-native/sqlite

 

Passo 3: Adicionar a plataforma Android/iOS

ionic cordova platform add android
ionic cordova platform add ios

 

Passo 4: Configurar o aplicativo

Arquivo app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, LOCALE_ID } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SQLite } from '@ionic-native/sqlite'
import { DatabaseProvider } from '../providers/database/database';
import { ProductProvider } from '../providers/product/product';
import { CategoryProvider } from '../providers/category/category';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    // Grande sacada para formatar numeros e datas no formato brasileiro
    {provide: LOCALE_ID, useValue: 'pt-BR'},
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SQLite,
    DatabaseProvider,
    ProductProvider,
    CategoryProvider
  ]
})
export class AppModule {}

 

Passo 5: Criar o provider para criação do banco de dados

ionic g provider database

 

Arquivo database.ts

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Injectable()
export class DatabaseProvider {

  constructor(private sqlite: SQLite) { }

  /**
   * Cria um banco caso não exista ou pega um banco existente com o nome no parametro
   */
  public getDB() {
    return this.sqlite.create({
      name: 'products.db',
      location: 'default'
    });
  }

  /**
   * Cria a estrutura inicial do banco de dados
   */
  public createDatabase() {
    return this.getDB()
      .then((db: SQLiteObject) => {

        // Criando as tabelas
        this.createTables(db);

        // Inserindo dados padrão
        this.insertDefaultItems(db);

      })
      .catch(e => console.log(e));
  }

  /**
   * Criando as tabelas no banco de dados
   * @param db
   */
  private createTables(db: SQLiteObject) {
    // Criando as tabelas
    db.sqlBatch([
      ['CREATE TABLE IF NOT EXISTS categories (id integer primary key AUTOINCREMENT NOT NULL, name TEXT)'],
      ['CREATE TABLE IF NOT EXISTS products (id integer primary key AUTOINCREMENT NOT NULL, name TEXT, price REAL, duedate DATE, active integer, category_id integer, FOREIGN KEY(category_id) REFERENCES categories(id))']
    ])
      .then(() => console.log('Tabelas criadas'))
      .catch(e => console.error('Erro ao criar as tabelas', e));
  }

  /**
   * Incluindo os dados padrões
   * @param db
   */
  private insertDefaultItems(db: SQLiteObject) {
    db.executeSql('select COUNT(id) as qtd from categories', {})
    .then((data: any) => {
      //Se não existe nenhum registro
      if (data.rows.item(0).qtd == 0) {

        // Criando as tabelas
        db.sqlBatch([
          ['insert into categories (name) values (?)', ['Hambúrgueres']],
          ['insert into categories (name) values (?)', ['Bebidas']],
          ['insert into categories (name) values (?)', ['Sobremesas']]
        ])
          .then(() => console.log('Dados padrões incluídos'))
          .catch(e => console.error('Erro ao incluir dados padrões', e));

      }
    })
    .catch(e => console.error('Erro ao consultar a qtd de categorias', e));
  }
}

 

Passo 6: Inicializar a criação do banco de dados quando o app startar

Arquivo app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { DatabaseProvider } from '../providers/database/database'

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = null;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, dbProvider: DatabaseProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();

      //Criando o banco de dados
      dbProvider.createDatabase()
        .then(() => {
          // fechando a SplashScreen somente quando o banco for criado
          this.openHomePage(splashScreen);
        })
        .catch(() => {
          // ou se houver erro na criação do banco
          this.openHomePage(splashScreen);
        });
    });
  }

  private openHomePage(splashScreen: SplashScreen) {
    splashScreen.hide();
    this.rootPage = HomePage;
  }
}

 

Passo 7: Criar o provider para o CRUD de produtos

Arquivo product.ts

import { Injectable } from '@angular/core';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../database/database';

@Injectable()
export class ProductProvider {

  constructor(private dbProvider: DatabaseProvider) { }

  public insert(product: Product) {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'insert into products (name, price, duedate, active, category_id) values (?, ?, ?, ?, ?)';
        let data = [product.name, product.price, product.duedate, product.active ? 1 : 0, product.category_id];

        return db.executeSql(sql, data)
          .catch((e) => console.error(e));
      })
      .catch((e) => console.error(e));
  }

  public update(product: Product) {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'update products set name = ?, price = ?, duedate = ?, active = ?, category_id = ? where id = ?';
        let data = [product.name, product.price, product.duedate, product.active ? 1 : 0, product.category_id, product.id];

        return db.executeSql(sql, data)
          .catch((e) => console.error(e));
      })
      .catch((e) => console.error(e));
  }

  public remove(id: number) {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'delete from products where id = ?';
        let data = [id];

        return db.executeSql(sql, data)
          .catch((e) => console.error(e));
      })
      .catch((e) => console.error(e));
  }

  public get(id: number) {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'select * from products where id = ?';
        let data = [id];

        return db.executeSql(sql, data)
          .then((data: any) => {
            if (data.rows.length > 0) {
              let item = data.rows.item(0);
              let product = new Product();
              product.id = item.id;
              product.name = item.name;
              product.price = item.price;
              product.duedate = item.duedate;
              product.active = item.active;
              product.category_id = item.category_id;

              return product;
            }

            return null;
          })
          .catch((e) => console.error(e));
      })
      .catch((e) => console.error(e));
  }

  public getAll(active: boolean, name: string = null) {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'SELECT p.*, c.name as category_name FROM products p inner join categories c on p.category_id = c.id where p.active = ?';
        var data: any[] = [active ? 1 : 0];

        // filtrando pelo nome
        if (name) {
          sql += ' and p.name like ?'
          data.push('%' + name + '%');
        }

        return db.executeSql(sql, data)
          .then((data: any) => {
            if (data.rows.length > 0) {
              let products: any[] = [];
              for (var i = 0; i < data.rows.length; i++) {
                var product = data.rows.item(i);
                products.push(product);
              }
              return products;
            } else {
              return [];
            }
          })
          .catch((e) => console.error(e));
      })
      .catch((e) => console.error(e));
  }
}

export class Product {
  id: number;
  name: string;
  price: number;
  duedate: Date;
  active: boolean;
  category_id: number;
}

 

Passo 8: Criar o provider para listar as categorias

Arquivo category.ts

import { Injectable } from '@angular/core';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../database/database';

@Injectable()
export class CategoryProvider {

  constructor(private dbProvider: DatabaseProvider) { }

  public getAll() {
    return this.dbProvider.getDB()
    .then((db: SQLiteObject) => {

      return db.executeSql('select * from categories', [])
        .then((data: any) => {
          if (data.rows.length > 0) {
            let categories: any[] = [];
            for (var i = 0; i < data.rows.length; i++) {
              var category = data.rows.item(i);
              categories.push(category);
            }
            return categories;
          } else {
            return [];
          }
        })
        .catch((e) => console.error(e));
    })
    .catch((e) => console.error(e));
  }
}

 

Passo 9: Alterar a pagina Home para listar, excluir e pesquisar produtos

Arquivo home.ts

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { ProductProvider, Product } from '../../providers/product/product'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  products: any[] = [];
  onlyInactives: boolean = false;
  searchText: string = null;

  constructor(public navCtrl: NavController, private toast: ToastController, private productProvider: ProductProvider) { }

  ionViewDidEnter() {
    this.getAllProducts();
  }

  getAllProducts() {
    this.productProvider.getAll(!this.onlyInactives, this.searchText)
      .then((result: any[]) => {
        this.products = result;
      });
  }

  addProduct() {
    this.navCtrl.push('EditProductPage');
  }

  editProduct(id: number) {
    this.navCtrl.push('EditProductPage', { id: id });
  }

  removeProduct(product: Product) {
    this.productProvider.remove(product.id)
      .then(() => {
        // Removendo do array de produtos
        var index = this.products.indexOf(product);
        this.products.splice(index, 1);
        this.toast.create({ message: 'Produto removido.', duration: 3000, position: 'botton' }).present();
      })
  }

  filterProducts(ev: any) {
    this.getAllProducts();
  }

}

 

Arquivo home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic SQLite Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-searchbar (ionInput)="filterProducts($event)" [(ngModel)]="searchText"></ion-searchbar>
  <ion-list>
    <ion-item-sliding *ngFor="let product of products">

      <button ion-item (click)="editProduct(product.id)">
        <h1>{{ product.name }}</h1>
        <h2>{{ product.category_name }}</h2>
        <h2>{{ product.duedate | date:'dd/MM/yyyy' }}</h2>
        <h2 class="price">{{ product.price | currency:'BRL':true }}</h2>
      </button>

      <ion-item-options side="left">
        <button ion-button color="danger" (click)="removeProduct(product)">
          <ion-icon name="trash"></ion-icon>
          Excluir
        </button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

  <ion-fab right bottom>
    <button ion-fab color="light" (click)="addProduct()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Total: {{ products.length }}</p>
    <ion-list>
      <ion-item no-lines>
        <ion-label>Listar inativos</ion-label>
        <ion-toggle name="listarInativos" [(ngModel)]="onlyInactives" (ionChange)="getAllProducts()"></ion-toggle>
      </ion-item>
    </ion-list>
  </ion-toolbar>
</ion-footer>

 

Arquivo home.scss

.price {
  color: color($colors, secondary);
}

 

Passo 10: Criar a pagina de inclusão/alteração de produtos

ionic g page edit-product

 

Arquivo edit-product.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { ProductProvider, Product } from '../../providers/product/product'
import { CategoryProvider } from '../../providers/category/category'

@IonicPage()
@Component({
  selector: 'page-edit-product',
  templateUrl: 'edit-product.html',
})
export class EditProductPage {
  model: Product;
  categories: any[];

  constructor(
    public navCtrl: NavController, public navParams: NavParams,
    private toast: ToastController, private productProvider: ProductProvider,
    private categoryProvider: CategoryProvider) {

    this.model = new Product();

    if (this.navParams.data.id) {
      this.productProvider.get(this.navParams.data.id)
        .then((result: any) => {
          this.model = result;
        })
    }
  }

  /**
   * Runs when the page has loaded
   */
  ionViewDidLoad() {
    this.categoryProvider.getAll()
      .then((result: any[]) => {
        this.categories = result;
      })
      .catch(() => {
        this.toast.create({ message: 'Erro ao carregar as categorias.', duration: 3000, position: 'botton' }).present();
      });
  }

  save() {
    this.saveProduct()
      .then(() => {
        this.toast.create({ message: 'Produto salvo.', duration: 3000, position: 'botton' }).present();
        this.navCtrl.pop();
      })
      .catch(() => {
        this.toast.create({ message: 'Erro ao salvar o produto.', duration: 3000, position: 'botton' }).present();
      });
  }

  private saveProduct() {
    if (this.model.id) {
      return this.productProvider.update(this.model);
    } else {
      return this.productProvider.insert(this.model);
    }
  }

}

 

Arquivo edit-product.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic SQLite Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>

    <ion-item>
      <ion-label stacked>Nome</ion-label>
      <ion-input type="text" name="name" [(ngModel)]="model.name"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>Preço</ion-label>
      <ion-input type="number" name="price" [(ngModel)]="model.price"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>Vencimento</ion-label>
      <ion-datetime displayFormat="DD/MM/YYYY" name="duedate" min="2017" max="2020-12-31" [(ngModel)]="model.duedate"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label stacked>Categoria</ion-label>
      <ion-select name="category_id" [(ngModel)]="model.category_id">
        <ion-option *ngFor="let category of categories" value="{{ category.id }}">{{ category.name}}</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Ativo</ion-label>
      <ion-checkbox name="active" [(ngModel)]="model.active"></ion-checkbox>
    </ion-item>

  </ion-list>

  <button ion-button block (click)="save()">Salvar</button>

</ion-content>

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

 

[button style=”btn-primary btn-lg” type=”link” target=”true” title=”Código fonte gerado na aula” link=”https://github.com/fabricadecodigo/IonicSQLiteExample” linkrel=””]

 

Referências

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!

58 comentários em “Como fazer um CRUD com SQLite no Ionic”

  1. Flavio Cardoso

    Ocorreu este erro ao rodar:

    Runtime Error
    Cannot read property ‘length’ of undefined

    Stack
    TypeError: Cannot read property ‘length’ of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/HomePage.ngfactory.js:924:33)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:13203:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12508:14)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:12798:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12509:5)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
    at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:12824:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12504:5)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)

  2. Geanderson Kassio

    Ocorreu este erro ao rodar:

    Runtime Error
    Cannot read property ‘length’ of undefined

    Stack
    TypeError: Cannot read property ‘length’ of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/HomePage.ngfactory.js:924:33)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:13203:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12508:14)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:12798:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12509:5)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)
    at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:12824:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:12504:5)
    at callViewAction (http://localhost:8100/build/vendor.js:12866:21)

  3. Fala Geanderson,
    Os plugins do cordova só funcionam no emulador ou no celular.
    Se voce tentou rodar com “ionic serve” realmente não vai funcionar.

    Valeu!

  4. Meu código está apresentando erro ao realizar um select..
    O meu data.rows.lenght > 0 só retorna false.

  5. Fala Dyh, blz?
    Só com essa informação eu não consigo te ajudar?
    Consegue me passar mais detalhes ou até me enviar seu código?

    Valeu

  6. O meu sqlbatch estava assim
    db.sqlBatch([
    [‘insert into usuario(login, senha) values (?,?)’, [‘admin’], [‘123’]]
    quando na verdade é apenas um array
    [‘insert into usuario(login, senha) values (?,?)’, [‘admin’,’123′]]

    Tudo OK nessa parte, porém tem um problema…

    Eu tenho um método com a assinatura autenticar() e nele contém

    onAutenticar(): void {

    //Se estiver conectado na rede
    if (this.network.type != ‘none’) {

    ESTÁ EXECUTANDO AQUI ->>>>> this.getUsuario(this.LoginForm.value.login, this.LoginForm.value.senha);

    ESTÁ EXECUTANDO AQUI AO MESMO TEMPO
    ->>>>> console.log(this.usuario.login);

    E NESSE CASO O CONSOLE.LOG VAI SER NULO, PQ MEU OBJETO AINDA NÃO FOI PREENCHIDO NO MÉTODO CHAMADO ACIMA, NÃO ERA PRA SER EXECUTADO NA SEQUENCIA?

    if ((this.usuario.login == this.LoginForm.value.login) && (this.usuario.senha ==
    this.LoginForm.value.senha) && (this.usuario.perfil == this.perfil[0])) {

    this.navCtrl.push(UsuariosPage);

    }
    else if ((this.usuario.login == this.LoginForm.value.login) && (this.usuario.senha ==
    this.LoginForm.value.senha) && (this.usuario.perfil == this.perfil[1])) {

    this.navCtrl.setRoot(EficienciaPage, { “usuario”: this.LoginForm.value.login });
    }
    else {
    this.showAlertErroLogin();
    }

    });
    }
    else {
    this.showAlertDesconectado();
    }

    this.LoginForm.reset();
    }

    Repare que dentro do método autenticar eu chamo o método getUsuario()
    aqui está o corpo dele…

    private getUsuario(login: string, senha: string) {

    this.usuarioProdiver.selectUsuario(login, senha)
    .then((rs: any) => {

    this.usuario.id = rs.id;

    this.usuario.login = rs.login;

    this.usuario.senha = rs.senha;

    this.usuario.perfil = rs.perfil;

    });
    }

    Ele apenas verifica se existe o usuario no banco e se existir atribui os dados a um objeto..

    O problema é, lá encima no método autentica(), enquando ele ta executando o método getUsuario() ele tambem ta executando o código todo abaixo do getUsuario(), ou seja,
    dá erro nas validações do IF porque meu objeto ainda não foi preenchido com dados do banco, como resolver isso?

  7. Mauricio Gotlib Costa

    Olá Felipe,

    Parabens pelo site e iniciativa, estou vendo suas postagens e resolvi fazer esta sobre Sqlite com Ionic, ao rodar estao sendo apresentados os erros das imagens em anexo.

    Acrescento que estou executando com: ionic cordova platform add browser
    depois rodo o browser com Cordova: ionic cordova run browser

    https://uploads.disquscdn.com/images/7c56f532372baf31b4061860b0efdb61f4583332d8b8ff9f60b6c3d12ed6a67c.png https://uploads.disquscdn.com/images/244255eec58b656f5a197609e3ebbe5dcb6a575d02409487b020c909aeb37795.png

  8. Fala Mauricio, blz?
    Obrigado pelo feedback!

    Seguinte, qualquer plugin do cordova não funciona no browser.
    Você tem as seguintes opções para testar: Emulador, Celular ou no Ionic Dev App.

    Valeu!

  9. Sergio Moreira

    Olá Felipe, excelente tutorial, estou com um problema na hora de inicializar o app pelo Ionic Dev App. eu uso o comando ionic serve e logo após abro o aplicativo pelo ionic dev app no meu celular, porem a tela fica somente branca e não aparece nada.

  10. Sergio Moreira

    Instalei o APK e funcionou normalmente, porem pelo Ionic Dev App continua tudo branco, mas mesmo assim ta bom demais ja.
    Obrigado, Felipe. Excelente trabalho.

  11. Daniel Antoniassi

    Boa Tarde Felipe, a autenticação de facebook, google com SQLITE segue os mesmos passos do Firebase ou é muito diferente?

  12. Fala Daniel, o SQLite é só um banco de dados, já o Firebase é um backend completo.
    Para você implementar as autenticações sem o firebase você vai precisar fazer algumas coisas manualmente.
    Caso você não queria usar a parte do banco de dados do firebase, você pode usar apenas a autenticação.

    Valeu!

  13. Daniel Antoniassi

    Muito obrigado Felipe e meus parabéns pela iniciativa! Tenha uma excelente semana!

  14. Boa noite Felipe, o meu deu um erro de Runtime Erro “Cannot read property ‘lenght’ of undefined”

  15. Fala Itamar, blz?
    Muito provavelmente você tentou testar no browser.
    Os plugins do cordova não funcionam no browser.
    Você só vai conseguir testar no emulador, celular ou no Ionic Dev App.

    Valeu!

  16. Itamar Rocha

    Era mesmo, Felipe agora deu certo no Android e IOS

    Obrigado e Parabéns pela iniciativa parceiro

  17. Oi Felipe, fiz o seu projeto e no meu pc e rodei no android e funcionou perfeitamente, mas to testando com outro projeto e não funciona de jeito nenhum

  18. acho que era a root page no appcomponent. resolvi e foi bem, mas estou com um problema em carregar meus dados na tela agr

    ion-header>

    Meu caixa

    {{f.valor | currency:’BRL’:true }} | Desconto: {{f.desconto | currency:’BRL’:true }}
    {{f.data | date:’dd/MM/yyyy’}}

    os botões estão exibindo mas os dados não.

  19. isaias Costa e Silva

    StaticInjectorError[SQLite]:
    StaticInjectorError[SQLite]:
    NullInjectorError: No provider for SQLite! estou com este erro o que fazer para sanar ?

  20. Fala Isaias, blz?
    Faltou Adicionar o SQLite como provider no app.module.ts.
    Da uma olhada aqui no artigo como ta o arquivo app.module.ts

    Valeu!

  21. isaias Costa e Silva

    Opa, valeu, tudo funcionando, usei o tutorial para um projeto meu, ficou top.

  22. Mario do Rosario Praça Filho

    boa noite, fiz um projeto baseado no seu video e arquivo, muito bom, está indo tudo bem, quando rodo no browse eu consigo rodar, mas como o app não estva fazendo oque queria, coloquei um catch informando via toast o erro, ele está dando que não conseguiu abri o banco de dados. Então vi aqui e descobrir essa dúvida que deve ser o mesmo problema. Porém como sou novato no ionic, como faço para rodar o app num emulador ou no meu celular via cabo usb(fazendo o deploy)?

  23. Fala Mario, blz?
    Primeiro passo é adicionar a plataforma do android ou ios no seu app.
    Você pode usar o comando
    ionic cordova platform add android

    Se for com emulador você pode instalar a versão gratuita do genymotion: https://www.genymotion.com/fun-zone/

    No genymotion você roda esse comando
    ionic cordova run android

    Agora em outro emulador você roda esse comando
    ionic cordova emulate android

    Agora se for no celular, particularmente eu acho mais fácil e mais rápido, você precisa ativar a depuração USB nele.
    Depois é só rodar o comando abaixo:
    ionic cordova run android

    Valeu!

  24. Mario do Rosario Praça Filho

    Bom dia. Muito obrigado mesmo por responder. Seguinte eu já tinha feito isso tudo que vc falou, eu estava fazendo esse projeto no delphi, mas estava com problema com o leitor do código de barras(ele não retornava de forma alguma o conteúdo do aresult para o meu campo, mas isso é passado) aí decide fazer em ionic, estudei, estudei e comecei a partir do seu curso o meu, em termos de ionic estou tranquilo, tudo fluindo. Me parece que quando vai “startar” o android visual ele não consegue acionar o emulador, me parece, em análise para ver as versões no prompt de comando o gradle -v apresentou o mesmo erro:
    “Erro: Não foi possível localizar nem carregar a classe principal add”
    Em anexo uma imagem do erro geral no meu projeto, tem esse aí e mais dois que podem ser em consequência. De qualquer forma já sou muito grato por sua atenção!
    https://uploads.disquscdn.com/images/b4d24c6784bb639f02760b64a1069d4362c25cc9ec8de8271de26457e35252de.png do primeiro,

  25. Mario do Rosario Praça Filho

    instalei o emulador e o virtual box e o virtual box dá erro ao tentar startar o emulador:
    The virtual machine ‘Emulador Android 7.0’ has terminated unexpectedly during startup with exit code 1 (0x1). More details may be available in ‘C:UsersmsnmaAppDataLocalGenymobileGenymotiondeployedEmulador Android 7.0LogsVBoxHardening.log’.

    Código de Resultado:
    E_FAIL (0x80004005)
    Componente:
    MachineWrap
    Interface:
    IMachine {f30138d4-e5ea-4b3a-8858-a059de4c93fd}

  26. isaias Costa e Silva

    Fala Felipe, estou tentando acessar o sqlite com a ferramenta Sqlite Browser, no entanto não encontro a Base de dados, qual seria o diretório correto ?

  27. Mario do Rosario Praça Filho

    Caros companheiros, resolvi o problema! Seguinte, como desenvolvedor tenho diversas ide, frameworks e etc, e o ultimo a entrar nessa grand elista foi o ionic e seus “amigos de trabalho”, peguei um hd ide que tinha aqui e comecei uma formatação do zero com foco no ionic, logo de cara o java e o gradle que davam problemas já respondiam de boa… dei sequencia nas instalações e etc e está rodando!!!!Uhuuuu, rsrs, fiz o deploy diretamente no celular tudo certo!!! Maravilhosamente certo! Agora vou ajustar o projeto pois o retorno de uma query não me mostrou o dado e sim object_OBJECT… mas isso já é assunto novo! Abraços e obrigado

  28. Fala Isaias,
    Geralmente o banco fica na pasta databases do seu app.
    Você precisa procurar por uma pasta com o package name do seu app.
    Isso fica la no config.xml
    Ex: io.ionic.starter

    Valeu!

  29. isaias Costa e Silva

    Felipe, tudo certo consegui acesso ao banco, usando o root do aparelho

    Valeu!

    Em 29 de janeiro de 2018 07:52, Disqus escreveu:

  30. Thiago Nascimento

    Olá Felipe, Blz? parabéns pelo tutorial. Eu estou tentando executar a aplicação pelo VIsual Studio mas o banco não está sendo criado. Conseguiria dar uma luz?

  31. É por isso, o SQLite só funciona no emulador/celular.
    E não te aconselho a usar o visual studio.
    Use o visual studio code e rode o ionic por linha de comando no terminal do visual studio code.

    Valeu!

  32. isaias Costa e Silva

    Boa noite, Felipe, como faço para conectar o sqlite com uma API REST, qual parte do código devo usar ?

  33. Boa Noite, eu usei todos os códigos, eles não deram erro, porém não aparecem os itens das categorias e os produtos não são adicionados e nem aparecem depois.

  34. Heliton Bruning

    Boa tarde, esta dando a seguinte mensagem no console: Error: Could not open database.

  35. Ronaldo Goncalves

    obrigado ai pelo exemplo. funcionou certinho aqui no emulador do sdk android.
    abraco aguardo mais atualizações

Comentários encerrados.