Top Posts

Troubleshooting: Maven HSQLDB Exception Hibernate 4

Continue lendo

Entendendo Maven archetypes AngularJS para Java Developers

Posted by camilolopes | Posted in AngularJS, Series | Posted on 26-11-2013

4

+

Olá Pessoal,

O post de vou apresentar os archetypes maven que criei com angularJS. Espero que gostem e vejam a diferença de

cada um.

Lets go…

Entendendo os archetypes

Bom, além de responder ao leitor, resolvi fazer um post para explicar cada archetype que criei e a diferença entre eles. Cada um nasceu a partir da necessidade de projetos reais, quando tivemos que fazer só uma POC e não queríamos dar copy/paste em outro projeto, mas sim ter um esqueleto funcionando e com mínimo de trabalho possivel, pois há copy/paste que ter que fazer os ajustes é algo muito estressante. Vamos entender aqui cada um deles:

archetype-webApps-Module

Esse aqui nasceu com objetivo de deixar em aberto o que vai ser usado no front-end, mas o back-end, com o que é básico, já vem configurado. Por exemplo: Hibernate, Spring, Jersey (se for o caso), DBUnit, DAO Generic, Service Generic, etc, mas o front-end fica em aberto para você escolher. Esse archetype atende quando precisamos usar o recurso de módulos (module) do maven, e por default vem com webapps-core que é para back-end e webapps-web para front-end. O principal é conhecido como parent, e no pom.xml dele tem as libs em comum para os dois módulos.

Iai, vai criar um novo projeto e não sabe o que vai ser no front-end e quer usar a estrutura de modules?

Recomendo usar esse archetype.

https://github.com/camilolopes/archetype-webapps-module

archetype-webapps-module-angularjs

Esse aqui tem tudo o que tem no archetype anterior, a diferença é que vem com o angularJS configurado pelo Yeoman tools. Então, se vai começar um projeto com angularJS e separado por modules back/front-end, recomendo usar esse archetype. Claro, considerando que a estrutura do front-end vai seguir o que o Yeoman gera, e já vem com suporte ao twitter boostrap, mas você vai precisar que o bower baixe as dependências, portanto build seu projeto antes via grant.

https://github.com/camilolopes/archetype-webapps-module-angularjs

archetype-webapps-java-angularjs

https://github.com/camilolopes/archetype-webapps-java-angularjs

Esse aqui tem tudo o que os outros archetypes tem em termos de framework, exceto que esse não usam módulos do Maven. É um único projeto JEE, como estamos acostumados. Ele usa o angularjs 1.2.x. e segue uma estrutura simples de organização dos controllers, services e outros JS.

Quando usar?

Quando você precisa criar um projeto JEE com angularjs, mas que não precisa ser separado em módulos e não quer usar o Yeoman. Aqui é a estrutura é bem pura, ou seja, nada do front-end é gerado por ferramentas.

archetype-webapps-java-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-java-angularjs-yeoman

Tem tudo o que o archetype-webapps-java-angularjs tem, a diferença é que o front-end é gerado pelo yeoman com AngularJS 1.0

archetype-webapps-simple-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-simple-angularjs-yeoman

Esse aqui tem tudo que o anterior tem, exceto que não vem com os frameworks Java.

archetype-webapps-simple-angularjs

https://github.com/camilolopes/archetype-webapps-simple-angularjs

Esse aqui é o mais simples archetype. Ele não tem nada de framework java, apenas o AngularJS configurado e a estrutura dos packages para JS. Se você quer testar o angularJS da maneira mais simples, esse é o archetype ideal.

Pronto pessoal. Essa é a lista de archetypes que criei para facilitar a nossa vida com AngularJS. Espero que ajudem também no dia a dia de vocês.

Abracos. See ya!!

Série AngularJS: Maven archetype com AngularJS e Yeoman

Posted by camilolopes | Posted in Java, Series | Posted on 20-11-2013

3

 

Olá Pessoal,

Iai vai desenvolver sua aplicação com AngularJS e Java, mas vai no archetype do maven e não tem nada? Já era, agora tem rs. Acabei de criarum archetype Maven com AngularJS + Yeoman

Lets…

Overview 


O motivo de criar esse archetype é que tenho trabalhado bastante nos últimos 4 meses com AngularJS e back-end Java e tem surgido novos projetos, alguns pequenos, outros médio porte, e ter que fazer setup toda hora é meio chato, heim? Então, para unir o útil ao agradável, resolvi um problema aqui no projeto para todos os projetos que vão trabalhar usando módulos no maven e o back-end será Java com front-end AngularJS, para evitar aquele tempo gasto em setup (mesmo que seja uma hora, já compensa). Eu já fiz outros archetypes e estão no meu github.

O que tem de legal nesse archetype?

Bem, o que tem de legal é o seguinte:

  • Hibernate 4.x já vem configurado com o Spring;
  • Spring Core 3.x;
  • MySql 5.x
  • DBUnit (configurado e pronto pra sair usando);
  • DAO Generic e Service Generic;
  • Jersey 1.x
  • AngularJS 1.0.x
  • Yeoman Tools
  • Twitter Bootstrap
  • Flyway (para db migration – opcional a configuração)

Só isso que vem de legal, rs. No AngularJs eu optei pela versão estável ao invés da Release candidate.

Como usar?

Simples. Para não repetir aqui no blog o que já escrevi no readme.md do projeto, siga os passos da instalação do archetype no seu repositório maven local.

Instalado. E agora?

Vamos criar um projeto e fazer uns ajustes como com qualquer template que vem com informações default e precisam ser ajustadas para atender ao nosso projeto.

Passo 1

Crie um novo projeto maven e escolha a opção All Catalogs e em seguida digite br. para filtrar e aparecer o archetype que acabou de instalar.

archetypeangularjscatalog

Passo 2

Escolha o archetype e preencha com as informações do seu projeto.

Passo 3

Clique em finish.

Passo 4

Seu projeto vai estar quebrado, conforme a imagem a seguir

archetypeangularjsprojectfailure

Passo 5

Abra o pom.xml do projeto webapps-web e remova a dependência webapps-core que tem configurações default do archetype

archetypewebappscoreangularjsremoved

Passo 6

Adicione a dependência do seu projeto

archetypeangularjswebappscore

Passo 7

Seu projeto deve estar assim agora:

archetypeangularjsprojectresult

Dentro de webapps-web/webapps temos a pasta apps e toda a estrutura gerada pelo Yeoman.

Passo 8

Vá na raiz do projeto e execute:

mvn tomcat:run

Aplicação deve subir agora acesse: http://localhost:8080/webapps-web/

Pronto, agora é só usar.

Claro que você vai precisar especificar as informações de banco de dados, estrutura do seu packages, etc. Vou assumir que você já conhece os frameworks(spring, hibernate, jersey etc) que o archetype aborda e sabe alterar, afinal de contas você não vai criar um projeto com Spring se não sabe mexer com o framework, concorda? Para facilitar, deixei comentários nos arquivos .xml, onde você deve alterar.

Download Archetype Maven AngularJS 

https://github.com/camilolopes/archetype-webapps-module-angularjs

Em breve stou subindo outros archetypes para projetos pequenos, aguardem mais alguns dias :D.  Se quiser ser avisado assim que publicar pode me acompanhar no github ou assinar o blog. 

Abracos. Vou ficando por aqui.