Tutorial Aurelia JS: criando um Todo List, parte 2 de 3

Logotipo Aurelia, em rosa

Olá pessoas! Nessa segunda parte do tutorial, veremos como começar a criar as funcionalidades do nosso Todo List (lista de tarefas). Veremos também como o Aurelia praticamente não interfere em seu código de linguagem de programação. 

Índice desse tutorial

  1. Tutorial Aurelia JS: criando um Todo List, parte 1/3. Nesse tutorial você saberá um pouco mais sobre o Aurelia, bem como configurará seu ambiente para o desenvolvimento desse tutorial.
  2. Tutorial Aurelia JS: criando um Todo List, parte 2/3. Nessa segunda parte do tutorial você começará a criar as classes TypeScript do projeto e já veremos como o Aurelia trabalha em conjunto com a linguagem sem interferir no seu código fonte.
  3. Tutorial Aurelia JS: criando um Todo List, parte 3/3. Na terceira e última parte do nosso tutorial da Lista de Tarefas em Aurelia, veremos o código funcionando, bem como uma conclusão sobre o Aurelia.

Lembrando que, como explicado na parte 1 desse tutorial, esse artigo é uma tradução adaptada do artigo original disponível no site do Aurelia e que pode ser visto aqui (acesso em 05/11): https://aurelia.io/docs/tutorials/creating-a-todo-app#the-indexhtml-page

O código fonte do projeto terminado está disponível no meu GitHub: https://github.com/WilliamZimmermann/todo-aurelia

A classe Todo

Uma das coisas incríveis que você pode fazer com Aurelia e que você não pode fazer (até agora) com nenhuma outra biblioteca ou framework JS, é modelar sua inteira aplicação usando somente código TypeScript. Acredito que você entenderá melhor quando ver na prática.

Vamos começar criando nossa classe Todo. Já que estamos desenvolvendo um App de Lista de Tarefas, precisaremos de uma classe para modelar uma tarefa individual. Na pasta src do seu projeto, crie arquivo chamado todo.ts:

export class Todo {
   done = false;
   constructor(public description: string) { }
}

A classe acima modela seu item à fazer, declarando uma descrição para ele e um parâmetro booleano chamado done, indicando se a tarefa está completa ou não.

A classe APP

O que nosso sistema irá fazer? Nosso sistema de Lista de Tarefas contará uma lista de instâncias Todo (ou seja, uma lista de tarefas, que são criadas à partir do objeto Todo que acabamos de criar). Poderá adicionar ou remover tarefas. As tarefas são adicionadas por permitir que o usuário dê uma descrição para as mesmas. Uma vez que o usuário digite uma descrição e adicione uma tarefa, o campo de descrição deverá ser limpo, permitindo que o usuário crie outra tarefa. Vamos modelar essas ideias.

Se já não estiver criado, dentro de src, crie um arquivo chamado app.ts.

import {Todo} from './todo';

export class App{
    heading = "Todos";
    todos: Todo[] = [];
    todoDescription = "";

    addTodo(){
        if(this.todoDescription){
            this.todos.push(new Todo(this.todoDescription));
            this.todoDescription = "";
        }
    }

    removeTodo(todo){
        // Pega o índice desse item dentro da lista de todos
        let index = this.todos.indexOf(todo);
        if(index !== -1){
            // Remove, através do índice pego, o item da lista
            this.todos.splice(index, 1);
        }
    }
}

Novamente, é simples assim. Vejamos as ideias que modelamos:

  • Nossa aplicação tem um heading que possui uma string com o conteúdo “Todos”. Você pode colocar o que quiser ali… exemplo: “Lista de Tarefas”. Nós usaremos esse atributo para passar para a view propriamente dita o título da mesma;
  • A lista de tarefas é modelada como uma Array de instâncias Todo, a qual é representada aqui pela propriedade todo;
  • Instâncias todo podem ser adicionadas (addTodo) ou removidas (removeTodo);
  • Quando instâncias são adicionadas, elas recebem uma descrição (a qual é dada pelo usuário);
  • Depois que uma tarefa é adicionada (ou que um objeto Todo é adicionado), a descrição é limpa (note o método addTodo, linha 11) por receber uma string vazia. Isso permitirá receber uma nova tarefa;

Aqui é que está o legal do negócio. Esse é todo o código TypeScript da nossa aplicação. Mas aonde está o Aurelia? Bem, a resposta é que Aurelia tenta o máximo possível ficar afastada do seu código TypeScript. É por isso que não vemos o Aurelia no código acima. Ele simplesmente não é necessário. Aurelia tem a habilidade de renderizar objetos TypeScript.

Preparando para renderizar o código

Agora que modelamos nossa aplicação TypeScript, precisamos fazer o Aurelia renderizar ela. Não fui completamente honesta quando disse acima que eu mostrei todo o código TypeScript… Há ainda um pedacinho que preciso lhe mostrar.

Se você se lembrar, lá na primeira parte do tutorial, quando estávamos vendo o arquivo index.html, havia um atributo chamado aurelia-app no elemento <body>. Esse atributo fala para o aurelia-bootstrapper onde renderizar a aplicação e que arquivo principal usar para configurar a aplicação. O valor daquele atributo aponta para src/main. Então vamos criar esse arquivo dentro da nossa pasta src e ver o que ela faz.

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
      aurelia.use.basicConfiguration();
      aurelia.start().then(() => aurelia.setRoot());
}

É possível que, ao trabalhar com o TypeScript, nessa simples configuração, você veja alguns avisos de erro no seu editor de código, como o VSCode. Isso acontece porque essa configuração simples não foi feita de uma forma que o editor de códigos possa achar os arquivos de definição de tipo. Não é nada que você precise se preocupar e tudo funcionará corretamente. No tutorial em que se cria uma lista de Contatos, por exemplo, esse problema não acontecerá porque faremos a inicialização do projeto de uma forma diferente. Se você tiver experiência com isso, você poderá usar Typings para instalar as definições d.ts você mesmo.

Quando criamos um arquivo main, estamos aptos para dizer para o Aurelia a como configurar a si mesmo por simplesmente exportar um método de configuração. O framework proverá um instância do objeto Aurelia o qual você pode usar de várias maneiras diferentes. Há muitas opções, plugins e extensões de terceiros que você pode adicionar. Nesse caso, estamos configurando o Aurelia com as “configurações básicas” (linha 4). Após isso, estamos dizendo para o frameork iniciar (start, linha 5). Uma vez iniciado, dizemos para ele setar a raiz (set root).

Mas o que setar a raiz quer dizer? Se você pensar em sua UI (interface de usuário) como uma hierarquia de componentes, o que estamos fazendo é configurar a raiz (root) dessa hierarquia. Essa é a raiz da árvore de componentes UI que o Aurelia precisa para renderizar.

Mas você deve estar pensando agora: “mas você não disse qual componente renderizar!”. Ótimo ponto! Uma das maneiras que o Aurelia pode ficar fora do caminho do código propriamente dito é por ter algumas convenções básicas. A raiz (root), por padrão, é app.js, relativo ao arquivo main.js. Se você não gosta disso, assim como todas as convenções Aurelia, você pode sobrescrever a mesma com configurações explícitas. Nesse momento, vamos nos apegar às convenções.

A próxima etapa será rodar o App, dizendo ao Aurelia como ele deve renderizar o app.js. Veremos isso na terceira parte do nosso tutorial. Até lá!

CategoriasSem categoria

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.