Uma onda de novas ferramentas, frameworks e arquiteturas vem surgindo no mundo do desenvolvimento web e a plataforma Java não poderia ficar de fora dessa. Hoje vou mostrar como iniciar rapidamente um projeto single page, orientado a REST com Spring Boot e AngularJS, um dos frameworks JS de maior destaque!
Um dos grandes problemas nas aplicações Java, sempre foi a quantidade de configurações xml necessárias para começar um projeto. Com o spring boot a gente consegue reduzir drasticamente essas configurações. Só pra vocês terem uma noção, não é necessário nem mesmo ter um web.xml. Porém, se você for utilizar maven, ai não da pra fugir do pom.xml! E é por ele que vamos começar.
Configurando o Maven e suas dependências
Para exemplificar, vamos criar uma app simples que cadastra e lista HQ’s (Histórias em Quadrinhos).
Crie uma aplicação Maven simples, pode ser utilizando comandline ou a sua IDE favorita.
Provavelmente ao terminar você terá um pom.xml parecido com esse.
4.0.0 com.bootcry.hqpower hqpower 1.0-SNAPSHOT
O primeiro passo é adicionar o spring-boot-starter-parent no pom
org.springframework.boot spring-boot-starter-parent 1.1.6.RELEASE
Depois vamos adicionar três dependências:
- o drive postgresql – pois iremos utilizar o postgreSQL nesse exemplo.
- o spring-boot-starter-web – com ele já teremos toda a camada web preparada para utilizar no nosso projeto.
- o spring-boot-starter-data-jpa – para a parte de orm e spring data.
Veja como deve ficar:
org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa org.postgresql postgresql 9.3-1102-jdbc41
Para finalizar vamos adicionar o plugin para rodar o projeto através do maven.
org.springframework.boot spring-boot-maven-plugin
Configurando o Banco de Dados
Por convenção, o spring-boot procura por um arquivo chamado application.properties ou application.yml dentro do classpath e é nele que configuramos coisas destintas como o DB do projeto, a porta do servidor, entre outras configurações.
No nosso exemplo vamos criar esse arquivo dentro de:src/main/resources/config/application.properties.
Agora basta colocar as configurações do nosso data source:
spring.jpa.database=POSTGRESQL spring.jpa.show-sql=false spring.jpa.hibernate.ddl-auto=update spring.datasource.driverClassName=org.postgresql.Driver spring.datasource.url=jdbc:postgresql://localhost/hqpower spring.datasource.username=hqpower spring.datasource.password=hqpower123
Configurando o Spring na nossa Aplicação
Como o springboot roda com servidor embedded, precisamos de um método main com as instruções iniciais e com as configurações necessárias para o spring conseguir fazer as injeções de dependência e gerenciar nossos componentes. Em uma configuração convencional do spring, informamos atravéz da tag component-scan qual o base-package que o spring irá utilizar para realizar essas tarefas. Logo, se em uma configuração convencional vc fizer: <context:component-scan base-package=”com.mycompany.app” scoped-proxy=”targetClass” /> , com o spring-boot basta criar uma classe com o nome Application.java dentro do seu base-package, no nosso exemplo:src/main/java/com/bootcry/hqpower/Application.java
Essa classe deve ter o seguinte conteúdo:
@Configuration @ComponentScan @EnableAutoConfiguration public class Application { public static void main(String[] args) { SpringApplication app = new SpringApplication(Application.class); app.setShowBanner(false); app.run(args); } }
Criando nosso primeiro serviço REST
Enfim temos nosso projeto configurado, agora é só começar a codar. Como POC (Prova de conceito), vamos criar um serviço que cadastre e liste HQ’s. Vamos começar pela entidade:
@Entity public class HQ implements Serializable { @Id @GeneratedValue(strategy = GenerationType.SEQUENCE) private Long id; private String titulo; private String autor; private Date dataPublicacao; //getters and setters }
Agora vamos criar nossa interface HQRepository.java para utilizar com o spring-data:
public interface HQRepository extends CrudRepository{ }
Em seguida, vamos criar o Controller.
@RestController @Transactional public class HQCtrl { @Autowired private HQRepository repository; @ResponseBody @RequestMapping(value = "/hq/", method = RequestMethod.GET) public Iterablelistar() { return repository.findAll(); } @ResponseBody @RequestMapping(value = "/hq/salvar", method = RequestMethod.POST) public HQ salvar(@RequestBody final HQ hq) { return repository.save(hq); } }
Para rodar nossa aplicação é só executar o comando do plugin do maven que adicionamos no projeto: mvn spring-boot:run e acessar nosso serviço na url localhost:8080/hq/
Utilizando o Angular para consumir o JSON
Agora que temos o serviço REST funcionando, vamos criar nosso web client com angular. Antes de tudo precisamos criar nosso index.html. Por convenção, o spring boot procura por um arquivo index.html dentro da pasta src/main/webapp/ ou src/main/webapp/public/ No nosso exemplo, vou criar na raiz do webapp/ mesmo.
HQ POWER HQ's
Título | Autor | Publicação |
---|---|---|
e por fim, mas não menos importante, vamos criar nosso app.js
angular.module('hqApp', []) .factory('hqService', ['$http', function($http) { function listar(callback) { $http({ method:'GET', url:'/hq/' }).success(function (data) { if (callback) callback(data) }); } function salvar(hq, callback) { $http({ method:'POST', url:'/hq/salvar', data:JSON.stringify(hq) }).success(function (data) { if (callback) callback(data) }); } return { listar:listar, salvar:salvar }; }]) .controller('hqCtrl', ['$scope', 'hqService',function($scope, hqService) { hqService.listar(function(hqs) { $scope.hqs = hqs; }); $scope.salvar = function(hq) { hqService.salvar(hq, function(hq) { $scope.hqs.push(hq); }); } }]);
Esse é um exemplo bem simples, mas a partir daqui você pode evoluir seu projeto como preferir.
O projeto final está no github: https://github.com/dvbeato/hq-power
Espero que tenham gostado. Críticas, dúvidas, sugestões são bem vindas!
THAT’s ALL FOLKS
Este post foi escrito primeiro em: diogobeato.com
1 Comentário
Poderia disponibilizar o projeto?