No post de hoje vou contar como fiz um CRUD usando o framework Aurelia e a ferramenta Deployd. O conteúdo abaixo foi baseado no projeto Aurelia CRUD Example.

Antes de começar é importante saber que os seguintes itens são necessários:

• Node;
• MongoDB e PATH configurado caso você esteja no Windows;
• Aurelia CLI; e
• Deployd

Depois de tudo devidamente instalado e configurado, usando o terminal partimos para a criação do projeto em Aurelia e da api com o Deployd.

Passo 1 – au new

O primeiro passo é usar a ferramenta de linha de comando oficial do Aurelia, o Aurelia CLI. Com ele podemos iniciar projetos novos, iniciar projetos, testar, finalizar o projeto para uma release.

Usando seu terminal de preferência, navegue até a pasta desejada e execute o comando: au new. Você será questionado em quatro momentos como quer fazer seu projeto.

Primeira pergunta é qual nome você quer dar, neste caso aurelia-crud; após você será questionado sobre bundlers, compiladores e pré-processadores. Para esse projeto a opção escolhida é a número 2  Default TypeScript.

A segunda pergunta é sobre a estrutura do projeto. Aqui a opção selecionada foi 1. Agora, quanto a questão sobre instalar as dependências, apesar de ser mais prático ir pela opção 1, a escolhida foi a opção 2, em função de muitos travamentos e na não compilação do projeto tenho sempre optado por rodar a instalação de dependências manualmente.

Ao selecionar 2 para a última pergunta, a instalação termina sem a instalação das dependências. Para resolver isso devemos navegar até a pasta do projeto e rodar npm install.

Esse passo irá demorar. Então aproveite para pegar um café 🙂

Ao final, para termos certeza que tudo funcionou como esperado, rodamos o comando au run na pasta do projeto. Se tudo correr bem esse será o resultado:

E a estrutura do projeto será semelhante a essa:

Passo 2 – dpd create

O passo dois nos dará a API para conectar ao banco de dados de simulação. Ao usar o Deployd garantimos uma conexão de backend sem ter um backend de fato. Isso é especialmente útil se o seu interesse é somente no frontend, manipulando e exibindo conteúdo.

Rodar o deployd é extremamente simples desde que você tenha seguido os requisitos anteriores e já tenha MongoDB configurado e o Deployd instalado.

No terminal, um nível acima do seu projeto frontend execute os comandos abaixo:

λ dpd create aurelia-crud-api

λ cd aurelia-crud-api/

λ dpd

Isso criará a API e será possível abrir o dashboard através da url http://localhost:2403/dashboard/#

Passo 3 – Organizando os arquivos

Com esses dois passos prontos, podemos organizar os arquivos, baseado no projeto ‘Aurelia CRUD example’.

Dentro da pasta src adicionaremos config, contacts, home e services.

Apesar da estrutura de pastas, os arquivos estão bem semelhantes ao do projeto base. O que foi necessário mudar foi o método getContacts() que não funciona sem passar ‘’ como parâmetro:

getContacts() {
    let promise = new Promise((resolve, reject) => {
        this.http
            .get('')
            .then(data => {
                this.contacts = JSON.parse(data.response);
                resolve(this.contacts)
            }).catch(err => reject(err));
    });
    return promise;
 }

Outro arquivo que está diferente é o arquivo relacionado as rotas. Caso você deseja fazer como o meu exemplo, dividido em pastas, o arquivo app.ts precisa seguir esse modelo:

import { Aurelia, PLATFORM } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';

export class App {
    router: Router | undefined;

    configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Aurelia CRUD';
        config.map([{
            route: [ '', 'home' ],
            name: 'home',
            moduleId: PLATFORM.moduleName('./home/home'),
            title: 'Home'
        }, {
            route: 'contacts-list',
            name: 'contacts',
            moduleId: PLATFORM.moduleName('./contacts/contacts'),
            title: 'Contact List'
        }, {
            route: 'contacts-list/:id',
            name: 'ContactDetail',
            moduleId: PLATFORM.moduleName('./contacts/ContactDetail')
        }, {
          route: 'contacts-list/create',
          name: 'ContactCreate',
          moduleId: PLATFORM.moduleName('./contacts/ContactCreate')
        }]);

        this.router = router;
    }
}

O arquivo de estilo bem como alguns detalhes do html também estão diferentes, mas nada que altere o funcionamento dos métodos do projeto original, são apenas questões estéticas ou semânticas.

Caso você esteja com o package.json original, será necessário adicionar a seguinte linha: “aurelia-http-client”: “^1.3.0. Após rode novamente npm install.

Para remover o erro relacionado ao teste unitário, navegue até o arquivo api.ts contido na pasta aurelia-crud\test\unit e apague o conteúdo dentro do describe ou comente as linhas.

Com os arquivos adicionados, podemos ir para o passo seguinte: configurar a API para que nosso frontend possa pegar os dados corretamente.

Passo 4 – Rodando a api e configurando os dados

Para que os dados sejam exibidos precisamos criá-los no Deployd. Acesse o painel de controle e no seletor escolha collection:

Nomeie a coleção de ‘contacts’ e adicione as seguintes propriedades: firstName, lastName, email e phoneNumber.

A seguir adicione dados para essa propriedades na aba DATA:

Passo 5 – Testando a aplicação

Para conferir se os dados estão chegando corretamente, rode au run e navegue até a url da aplicação.

Acessando o link “Contact List” você deverá ver os dados adicionados no Deployd.

E isso conclui este projeto em Aurelia.

Caso tenha interesse, você pode clonar o projeto no repositório do GitHUb para rodar localmente.

Se quiser saber mais sobre Aurelia eu recomendo este artigo do William Zimmermann em português ou, se preferir, o tutorial no site oficial em inglês.

Até a próxima 🙂