Top Posts

Resolvendo LazyInitializationException em 5 minutos

Continue lendo

Série Ionic:Integrando Ionic com sua app AngularJS

Posted by camilolopes | Posted in AngularJS, Mobile | Posted on 16-06-2015

0

ionic-angular-opti

Olá Pessoal,

Vamos ver da forma mais simples como é fácil fazer uma integração com o back-end usando ionic + angularjs. Vou considerar que vc já sabe como criar uma app no ionic. Para o exemplo aqui vou usar o template sidemenu do ionic.

lets go…

Passo 1

Crie um projeto sidemenu do ionic

Passo 2
Vamos criar o controller e dizer pra ele chamar o serviço web, ou seja, nossa api. Lembre-se de ter o serviço rodando.
No arquivo controllers.js gerado pelo ionic que já vem no template adicione, após o controller já gerado:

 

Passo 3
Considerando que vc manteve os nomes que veio no template, no arquivo playlits adicione:

O código completo ficando assim:

 

Passo 4

Vamos testar, basta digitar:

Para testarmos no browser

Passo 5
Observe que me retornou o valor do saldo da conta de um serviço que possuo:

 

ionicappcamilo

Vale lembrar que o objetivo aqui é mostrar a integração e funcionamento. O ideal é que você tenha um Service do lado do angularJS usando um factory do ngResource. Manter os controllers separados dos services e cada um com suas responsabilidades é uma boa prática. Em breve faço um post usando o ngResouce.

O projeto está no meu github.com/camilolopes

https://github.com/camilolopes/workspaceAngularJs
Espero que tenham gostado, simples demais né?

abraço, see ya!!

Série AngularJS:Enviando Notificação por E-mail AngularJS + JavaMail + Gmail

Posted by camilolopes | Posted in AngularJS | Posted on 26-01-2015

0

angularjslogo

olá Pessoal,

O post de hoje vamos ver como enviar uma notificação por email, usando JavaMail com AngularJS e tendo o gmail como servidor de email. Aplicação é bem simples e vou usar um dos archetypes maven + angularjs que criei, assim vai poupar bastante tempo de configuração do projeto e podemos focar no que mais interessa para o post.

lets go…

Requisitos:

  • archetype-webapps-java-angularjs-yeoman;
  • JavaMail;
  • Ter uma conta Gmail;

Starting…

Para começar instale o archetype a seguir:

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

O archetype acima, já vem com o Spring, Restful via Jersey, Twitter Bootstrap, AngularJS 1.0, Yeoman etc. Se não tiver o archetype instalado, siga os passos no GitHub do projeto.

O Projeto
O projeto de exemplo,vai simular uma recuperação de senha onde o usuário informa o email cadastro e em seguida receberá um e-mail com as instruções para recuperação de senha. Para envio

Development

Vamos começar a meter mão na massa.Vou ser bem objetivo e considerar que você já conhece AngularJS + Java.

Passo 1

Criando o projeto

emailnotificationmavenarchetype

Escolha o archetype e preencha os campos com o nome do seu projeto.

Passo 2

Apague todos os packages em src/main/java deixando assim:

 

emailnotificationpackages

E apague os packages em src/test/java

Passo 3

No arquivo pom.xml adicione a seguinte dependencia:

E remova a tag

 

 

Passo 4
Abra o arquivo applicationContext.xml e apague todo o código relacionado a banco de dados, deixando o conteúdo assim:

Passo 5

No arquivo web.xml vamos informar o local onde ficará as classes dos serviços restful, no meu caso será:

 

Observe que o caminho para API Restful será /rest/*. Você pode chamar como quiser /api/*.

Passo 6

Vamos desenvolver uma classe que terá o serviço de enviar o e-mail e as configurações do gmail, chamei de EmailNotificationService, veja a seguir (classe e os métodos são auto-explicativos):

 

Passo 7

Criaremos um objeto para representar os dados na tela User.java

 

Passo 8

Agora vamos fazer o Controller e serviço restful:

Agora que temos o back-end pronto, vamos começar com o front-end. Primeiro passo, após a criação do projeto é instalar o bower para baixar as libs necessárias para isso via console vá até a raiz do projeto e depois até a pasta src/main/webapp e digite:

Aguarde a instalação terminar.

Como estamos usando o Yeoman + AngularJS ele já vem com uma estrutura minima funcionando, então vamos reaproveitar.

main.js

Vamos deixar o arquivo assim:

 

Criando EmailService.js

vamos gerar o arquivo para camada de serviço, para digite:

E altere o arquivo emailservice.js deixando assim:

Alterando o arquivo app/index.html
Vamos arrumar o nome do arquivo EmailService.js para forma correta deixando assim, na linha 72:

Criando o views/home.html

Agora precisamos criar a tela que faz a recuperação de senha:

 

Alterando a rota

Em app.js altere a rota deixando assim:

 Testando

Vamos testar aplicação.Primeiro passo é compilar toda aplicação:

Agora vamos subir:

emailnotificationrun

Agora vou informar um e-mail e em seguida verificar se receber o e-mail:

emailnotificationrundata

O email acabou de chegar:

emailnotificationreceived

emailnotificationbodysent

O projeto example está disponível no meu Github

https://github.com/camilolopes/emailNotification-angularjs

Simples não? A aplicação é bem simples, e claro que se fosse um código final tem muita coisa para melhorar. Uma delas é não ter as informações de envio do e-mail (from) hard-code. A autenticação também não deveria está hard-code :D.

Vou ficando por aqui…

See ya!!