Construindo um CRUD com Spring, REST e Mongo DB parte 3

Passo 3 – A persistência em memória

O pincipal objetivo desse passo não foi me atentar à persistência, mas sim a criação de serviços para criar um CRUD, a criação da interface com o usuário e ligar os serviços com o AngularJS.

Para armazenar os dados, criei uma interface e uma implementação para o meu DAO em memória para que fosse administrado pelo Spring. Desse modo, na classe AppConfig, somente adicionei um método para criar meu DAO. O que preciso fazer é criar um atributo em alguma classe chamado pessoaDAO do tipo PessoaDAO e anotar com @Autowired. Ipso facto magico! O Spring vai injetar essa dependência para você. Segue o código do Bean do spring na classe AppConfig na listagem abaixo:

@Bean

public PessoaDAO pessoaDAO() {

    return new PessoaDAOImpl();

}

A implementação do meu DAO nada mais é do que a utilização de uma lista parametrizada da classe Pessoa, com métodos de inserção, deleção, alteração e busca, ou seja um CRUD.

Não é o ideal, pois quando o servidor é desligado, todos os dados são descartados. Tudo estará registrado enquanto o servidor estiver no ar.

Após a criação do DAO, criei as telas de inclusão, pesquisa e alteração de pessoas. Poderia ter usado uma tela só para inclusão e alteração, mas queria ter algo mais didático.

A página de pesquisa possui um campo para pesquisa por nome ou parte de um nome. Ao acionar o botão de pesquisa, o script irá verificar se o campo foi preenchido para chamar serviços diferentes. Se o campo não for preenchido, a aplicação irá pesquisar por todos os registros, senão pesquisará aqueles registros que possuem aquela parte do nome.

A figura a seguir exibe a tela de resultados para uma parte do nome.

Os registros são exibidos nas linhas da tabela. Cada linha contém o nome com um link para alteração, o endereço, o telefone e a palavra excluir, que chama o serviço para exclusão de um registro, transmitindo seu id e ao retornar refaz a pesquisa. Caso haja algum problema, uma mensagem de erro aparece e os resultados permanecem inalterados.

A tela de cadastro é simples. Não existe mistério. A única coisa a se observar é no script quando é chamado o método POST do objeto $http do AngularJS. O método POST necessita de um parâmetro adicional, que são os dados do POST. A listagem abaixo mostra a construção dos parâmetros.

$scope.createPessoa = function () {

    console.log('Calling URL: ' + $scope.defaultUrl + 'create');

    var data = {'nome': $scope.nome, 'endereco': $scope.endereco, 'telefone': $scope.telefone};

    console.log('Data: ' + data);

    $http.post($scope.defaultUrl + 'create', data)

        .success(function (data) {

             console.log('[OK]');

             $scope.message = data;

        })

        .error(function (data, status) {

             console.log('[FAIL]');

             $scope.message = {'result' : data + status};

        });

};

Uma variável data é criada a partir das informações do formulário, que serão transmitidas em formato JSON.

Essa não é o único lugar que deve mudar. A interface agora está enviando dados em formato JSON e a aplicação também deve receber informações em formato JSON. Para o método create deve-se anotar conforme a listagem abaixo:

@RequestMapping(value = "/create", 
                method = RequestMethod.POST,
                consumes = {"application/json;charset=UTF-8"})

public @ResponseBody

SimpleResult create(@RequestBody Pessoa pessoa) {

    LOGGER.log(Level.INFO, "Serviço /create");

    service.create(pessoa);

    SimpleResult result = new SimpleResult();

    result.setResult("Pessoa cadastrada com sucesso!");

    return result;

}

Duas coisas são importantes de se ressaltar:

1. consumes = {"application/json;charset=UTF-8"}

Isso indica que agora nosso método aceita informações em formato JSON

2. @RequestBody Pessoa pessoa

Isso indica que o objeto deve ser compatível com os atributos da classe Pessoa. Existindo essa combinação, não é necessário fazer mais nada.

A imagem a seguir mostra a tela de cadastro:

Por fim, a tela de alteração. Toda vez que o usuário clicar no link onde está o nome, será encaminhado para a tela de alteração levando no parâmetro, o id da Pessoa. Ao iniciar, o id será pesquisado e populará todos os campos. O id é um campo hidden que eu deixa à vista para fins didáticos. No próximo passo vou mostrar que ele pode conter mais do que imaginamos.

Ao pressionar o botão de alteração, o mesmo mecanismo para a inserção de registros será executado, somente mudando o nome do serviço para alteração e não inclusão.

A imagem a seguir mostra a tela de alteração:

Basicamente o fluxo de trabalho desse passo é dado pelo diagrama de sequência abaixo. Ao fazer um submit na página, o controlador Javascript utiliza o recurso $http do AngularJS que chama um controlador em java, que por sua vez chama um serviço Java que, por sua vez chama a camada de persitência. A clássica arquitetura em três camadas.

Para o próximo passo, será utilizado o banco de dados MongoDB em vez de um banco de dados em memória.

Para acessar o código do projeto no branch do Passo 3, basta baixar o zip no endereço https://github.com/ortolanph/CRUDPeople/tree/passo03.