Skip to content

Manual Aplicação SPA Completa

Jump to bottom
Erick Souza edited this page Nov 30, 2016 · 2 revisions

Manual: criando uma aplicação completa

O objetivo deste manual é descrever os passos para a criação de uma aplicação SPA completa que será utilizada nas disciplinas ministradas pelo professor Erick Souza. A aplicação será construída conforme arquitetura da figura abaixo:

Configurações Iniciais

  1. Execute o manual para a criação do ambiente de desenvolvimento

  2. Execute o manual para criação de um EJB

  3. Execute o manual para a realização de persistência com JPA

  4. Execute o manual para a criação de um serviço REST

4.1) Associe o projeto Rest ao EAR criado no passo 2

4.2) Transfira a interface remota br.unifor.bean.MeuBeanRemote do cliente EJB para o módulo EJB

4.3) Transfira a entidade br.unifor.entity.Empregado do cliente EJB para o módulo EJB

4.4) Remova o cliente EJB, pois este não será mais necessário

4.5) Adicione o módulo EJB ao Build Path do projeto Rest

Integrando Rest+EJB+JPA

  1. No projeto Rest:

1.1) Crie a classe EmpregadoResource e implemente o código abaixo:

package br.unifor.restful.resources;

import javax.ejb.EJB;
import javax.ejb.Stateless;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;

import br.unifor.bean.MeuBeanRemote;
import br.unifor.entity.Empregado;

@Stateless
@Path("/empregado")
public class EmpregadoResource {

    @EJB
    private MeuBeanRemote meuBean;
   
    @Path("{id}")
    @GET
    @Produces("application/json")
    public Empregado buscar(@PathParam("id") Long id) {
        Empregado emp = meuBean.buscarEmpregado(id);

        Empregado empregado = new Empregado();
        empregado.setId(emp.getId());
        empregado.setNome(emp.getNome());

        return empregado;
    }
}
  1. No módulo EJB:

2.1) Implemente o método buscarEmpregado em MeuBean

@Override
public Empregado buscarEmpregado(Long id) {                    
    return empregadoDAO.buscar(id);
}

2.2) Implemente o método buscar no EmpregadoDAO

public Empregado buscar(Long id) {
    return manager.find(Empregado.class, id);        
}
  1. Teste o serviço acessando o endereço:

http://localhost:8080/ExemploRest/rest/empregado/1

O resultado deve ser um objeto JSON que representa os dados do empregado com id=1

{"id":"1","nome":"Pedro"}

Criando um cliente com AngularJS para consumir o serviço

  1. Execute o manual para a criação de uma aplicação AngularJS, criando os arquivos dentro da pasta WebContent do projeto Rest

  2. Crie o arquivo main.js na pasta js e insira o código abaixo para instanciar um módulo

var app = angular.module('EmpregadoApp', []);
  1. Crie o arquivo EmpregadoController.js na pasta js e insira o código abaixo para a criar um controlador e atualizar o modelo a partir de uma função
app.controller('EmpregadoController', function($scope, $http) {    
$scope.empregado = {};    
$scope.buscarEmpregado = function() {                
    $http.get('http://localhost:8080/ExemploRest/rest/empregado/'+$scope.id).success(
            function(dados) {                                       
                 $scope.empregado = dados;                
            }
        ).error(function(data,status,headers,config) {            
            console.log("Erro ao buscar recurso");        
        });
};    
});
  1. Crie o arquivo empregado.html na pasta WebContent com o seguinte conteúdo
<!doctype html>
<html lang="pt" ng-app="EmpregadoApp">
<head>
    <meta charset="UTF-8">
    <title>Empregado</title>        
</head>
<body ng-controller="EmpregadoController">
    <form class="form-inline" name="formEmpregado">
        ID Empregado: <input type="text" ng-model="id">
        <button ng-click="buscarEmpregado()">Buscar</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Nome</th>                                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{empregado.id}}</td>
                <td>{{empregado.nome}}</td>
            </tr>
        </tbody>
    </table>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/EmpregadoController.js"></script>    
</body>
</html>
  1. Abra o arquivo empregado.html em um navegador e teste o seu funcionamento

http://localhost:8080/ExemploRest/empregado.html

Adicionando layout ao cliente com Bootstrap

  1. Altere o código do arquivo empregado.html para
<!doctype html>
<html lang="pt" ng-app="EmpregadoApp">
<head>
<meta charset="UTF-8">
<title>Empregado</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body ng-controller="EmpregadoController">
	<div class="jumbotron">
		<div class="container">
			<h3>Tela de empregado</h3>
		</div>
	</div>

	<form name="formEmpregado">
		<div class="col-md-1">
			<fieldset>
				<div class="form-group">
					<label>ID</label>
				</div>
				<div class="form-group">
					<input type="text" ng-model="id" class="form-control">
				</div>
				<button class="btn btn-primary" ng-click="buscarEmpregado()">Buscar</button>
			</fieldset>
		</div>
		<div class="col-md-1">
			<fieldset>
				<div class="form-group">
					<label>Nome</label>
				</div>
				<div class="form-group">{{empregado.nome}}</div>
			</fieldset>
		</div>
	</form>

	<script
		src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/EmpregadoController.js"></script>
</body>
</html>
  1. Abra o arquivo empregado.html em um navegador e teste o seu funcionamento

http://localhost:8080/ExemploRest/empregado.html

Clone this wiki locally