NativeScript: ToDo App – Estrutura base

Posted on by Alex Hiroshi

Voltando a estudar sobre NativeScript, resolvi fazer um aplicativo que usa algumas funcionalidades básicas que muitos aplicativos usam, como listview, campos de entrada, navegação e um banco de dados local.
A ideia é desenvolver um aplicativo de tarefas, o famoso ToDo.

Para criar o aplicativo é só executar o comando tns create [nome-aplicativo], como já escrevi em outros posts. A diferença, é que dessa vez será usado a flag ––ng, que criará um projeto com template de TypeScript e Angular.

1
2
3
tns create ToDoAngularTypeScript --ng
cd ToDoAngularTypeScript
tns platform add android

Esse template já vem com um componente criado e as rotas configuradas.

Para o projeto, não vou usar o componente padrão, então você pode remover a pasta “item“. Consequentemente, terá que remover os imports do componente item nos arquivos app.module.ts e app.routing.ts.

O passo seguinte é organizar a estrutura de pastas e criar os componentes necessários.
Dentro da pasta app, eu crio duas outras: components e shared. Dentro de component ficaram os components e em shared eu separo em outras duas pastas, uma para entities e outra para services.

Dentro de /shared/entites fica a classe que representa a lista de tarefas (todo.ts)

Todo (todo.ts)

JavaScript
1
2
3
4
5
6
export class Todo {
    id: number;
    title: string;
    description: string;
    isDone: boolean;
}

Na pasta /shared/services, tenho o serviço de ToDo e uma classe que eu chamei de db.ts, onde ficará a conexão com o banco de dados Sqlite local. A classe TodoService (todo.service.ts) terá os métodos getAll, get, add, update e remove.

Por enquanto, só para deixar a o aplicativo rodando com uma lista e navegação, os métodos retornarão dados fixos.

TodoService (todo.service.ts)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Injectable } from "@angular/core";
import { Todo } from "../entities/todo";
 
@Injectable()
export class TodoService {
    private todoList = new Array<Todo>(
        { id: 1, title: '1 pão', description: 'Comprar 1 pacote de pão integral', isDone: false },
        { id: 2, title: '1 Leite', description: 'Comprar 1 leite', isDone: false },
        { id: 3, title: 'Limpar quarto', description: 'Não esquecer de lavar roupa de cama', isDone: false },
        { id: 4, title: 'Lavar o carro', description: 'Lavar o carro perto do trabalho', isDone: false }
    );
 
    getAll(): Todo[] {
        return this.todoList;
    }
 
    get(id: number): any {        
        return this.todoList.filter(x => x.id === id)[0];
    }
 
    add(todo: Todo): void {
        // TODO: Salvar na base
    }
 
    udpate(todo: Todo): void {
        // TODO: atualizar na base
    }
 
    remove(id: number): void {
        // TODO: remover da base
    }
}

Com isso já podemos consumir os serviços para mostrar algumas coisas na tela.

Nesse ponto, dentro da pasta components, eu crio outra pasta chamada todo, onde vou deixar todos os componentes do todo em si: todo-add.component.ts, todo-detail.component.ts e todo-list.component.ts. Cada componente tem seus respectivos html’s todo-add.component.html, todo-detail.component.html e todo-list.component.html. O código para cada componente está no github.

Com os componentes e serviços criados, as rotas e os módulos já podem ser configurados corretamente. Todos os componentes e serviços que forem ficar disponíveis na aplicação, devem ser importadas no arquivo app.module.ts, no array declarations e providers do @NgModule.

As rotas podem ser criadas assim:

JavaScript
1
2
3
4
5
6
const routes: Routes = [
    { path: '', redirectTo: '/todoList', pathMatch: 'full' },
    { path: 'todoList', component: TodoListComponent },
    { path: 'todoAdd', component: TodoAddComponent },
    { path: 'detail/:id', component: TodoDetailComponent },
];

Veja que a primeira rota é só um redirecionamento para a rota de lista. A última é a rota de detalhes, onde é passado um parâmetro :id para o componente. Para isso funcionar, na listview eu adicionei um [nsRouterLink]=”[‘/detail’, item.id]”, que ao clicar, será enviado para essa rota passando o id do ToDo. No componente TodoDetailComponent, é usado a classe ActivatedRoute, que fica em @angular/router, para obter o parâmetro passado com this.route.snapshot.params[‘id‘].

Com os itens criados e configurados, o aplicativo já tem um formato:

O código desenvolvido até agora está no github. Para não deixar o post muito longo, vou deixar a outra parte do desenvolvimento em outro post.