NativeScript: ToDo App – Acesso ao banco de dados SQLite

Posted on by Alex Hiroshi

Continuando mais uma etapa do desenvolvimento do aplicativo de ToDo com Nativescript, vou mostrar como fazer consultas, insert, upadate e delete no banco SQLite local.

Só lembrando, se você ainda não leu os outros dois post, leia:

  1. NativeScript: ToDo App – Estrutura base
  2. NativeScript: ToDo App – Botões e ações

No primeiro post eu já deixei criado o arquivo db.ts em shared/services. Agora chegou a hora de escrever código nesse arquivo, de criar a classe que vai acessar o banco SQLite.

Antes de escrever alguma coisa, é preciso instalar o plugin NativeScript sqlite, que é bem simples como a instalação de qualquer outro plugin:

1
tns plugin add nativescript-sqlite

A class DB tem uma variável pública chamada database, que será usada para guardar a instância do banco. E com essa variável que será feito as consultas na classe de serviço. Além dessa variável, eu coloquei um construtor para criar a tabela, se necessário, e conectar com o banco.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export class DB {
    private databaseName: string = 'todo-app.db';
    public database: any;
 
    constructor() {
        let sqlCreateTable = 'CREATE TABLE IF NOT EXISTS Todo ' +
                            '(id INTEGER PRIMARY KEY AUTOINCREMENT,' +
                            'title VARCHAR(100) NOT NULL,' +
                            'description VARCHAR(255) NULL,'+
                            'isDone INTEGER NOT NULL DEFAULT 0)';
 
        new Sqlite(this.databaseName).then(db => {
            db.execSQL(sqlCreateTable).then(x => {
                this.database = db;
                db.resultType(Sqlite.RESULTSASOBJECT);
            }, error => {
                alert('Não foi possível criar a tabela');
            });
        }, error => {
            alert('Não foi possível conectar com o banco de dados');
        });
    }
}

Por padrão, o retorno de um select será no formato de array, o que eu acho um pouco ruim na hora de ler o código (ex.: row[0], row[1]…). Por isso, na linha 15, eu adicionei uma configuração para o tipo de retorno. Essa configuração deixa o retorno no formato de objetos, assim o código fica mais fácil de ler e entender (row.title, row.description…).

Agora no serviço TodoService, herdando a classe DB, eu tenho acesso a variável database. Ela tem alguns método:

  • .get() – retorna a primeira linha
  • .all() – retorna todas as linhas
  • .execSQL() – esse já foi usado na classe DB. Executa sql’s select, create, insert, update e delete

O uso desses métodos ficam assim:

1
2
3
4
5
6
7
8
9
10
11
getAll(): any {
    return this.database.all('SELECT * FROM Todo');
}
 
get(id: number): any {
    return this.database.get('SELECT * FROM Todo WHERE id = ?', [id]);
}
 
add(todo: Todo): any {
    return this.database.execSQL('INSERT INTO Todo (title, description, isDone) VALUES (?,?,0)', [todo.title, todo.description]);
}

Com os métodos do serviço pronto, eu fiz algumas alterações no componente TodoListComponent para tratar o retorno certo dos métodos. Feito isso, o aplicativo já cria novas tarefas, lista, atualiza o status e remove.

O aplicativo completo está no github.