Série AngularJS:Enviando Notificação por E-mail AngularJS + JavaMail + Gmail
Posted by camilolopes | Posted in AngularJS | Posted on 26-01-2015
0
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
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:
E apague os packages em src/test/java
Passo 3
No arquivo pom.xml adicione a seguinte dependencia:
|
1 2 3 4 5 |
<dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4.5</version> </dependency> |
E remova a tag
|
1 |
<build></build> |
Passo 4
Abra o arquivo applicationContext.xml e apague todo o código relacionado a banco de dados, deixando o conteúdo assim:
|
1 2 3 4 5 |
... <context:component-scan base-package="*" /> <tx:annotation-driven /> </beans> |
Passo 5
No arquivo web.xml vamos informar o local onde ficará as classes dos serviços restful, no meu caso será:
|
1 2 |
<!-- package controller update of your --> <param-value>br.com.its.web.controller</param-value> |
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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
@Service public class EmailNotificationService { public void sendEmail(User user) throws Exception{ Properties props = new Properties(); configEmail(props); Session session = Session.getDefaultInstance(props, new javax.mail.Authenticator() { protected PasswordAuthentication getPasswordAuthentication() { //aqui os dados da sua conta do gmail String login = "seuUsuario"; //não precisa colocar @gmail.com String password = "suaSenha"; return new PasswordAuthentication(login,password); } }); try { email(user, session); } catch (MessagingException e) { throw new Exception(e); } } /** */ private void email(User user, Session session) throws MessagingException, AddressException { Message message = new MimeMessage(session); String fromEmail = "email";//aqui o email que vai enviar as informações exemplo: noreply@suaempresa.com String subject = "Testing Send Email ITS"; String bodyEmail = "olá," + "\n\n It is working \\o//"; String toEmail = user.getEmail(); //o email de destino que vem da tela; message.setFrom(new InternetAddress(fromEmail)); message.setRecipients(Message.RecipientType.TO,InternetAddress.parse(toEmail)); message.setSubject(subject); message.setText(bodyEmail); Transport.send(message); } //configurações do Gmail private void configEmail(Properties props) { props.put("mail.smtp.host", "smtp.gmail.com"); props.put("mail.smtp.socketFactory.port", "465"); props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory"); props.put("mail.smtp.auth", "true"); props.put("mail.smtp.port", "465"); } } |
Passo 7
Criaremos um objeto para representar os dados na tela User.java
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public class User { private String email; public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } } |
Passo 8
Agora vamos fazer o Controller e serviço restful:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@Controller @Path("/email") public class EmailNotificationController { @Autowired private EmailNotificationService emailNotificationService; @POST @Consumes(MediaType.APPLICATION_JSON) public Response send(User email){ Response response = Response.ok().build(); try { emailNotificationService.sendEmail(email); } catch (Exception e) { e.printStackTrace(); response = Response.status(Status.BAD_REQUEST).build(); } return response ; } public EmailNotificationService getEmailNotificationService() { return emailNotificationService; } public void setEmailNotificationService( EmailNotificationService emailNotificationService) { this.emailNotificationService = emailNotificationService; } } |
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:
|
1 |
bower install |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module('webappApp') .controller('MainCtrl',['$scope','EmailService', function ($scope,EmailService) { $scope.emailService = new EmailService(); $scope.emailService.email = ''; console.log($scope.emailService); $scope.send = function(){ $scope.emailService.$save(function(){ $scope.emailService = new EmailService(); }); }; }]); |
Criando EmailService.js
vamos gerar o arquivo para camada de serviço, para digite:
|
1 |
yo angular:factory EmailService.js |
E altere o arquivo emailservice.js deixando assim:
|
1 2 3 4 5 6 7 8 9 |
'use strict'; angular.module('webappApp') .factory('EmailService', function($resource) { return $resource('../rest/email',{ }, { } ); }); |
Alterando o arquivo app/index.html
Vamos arrumar o nome do arquivo EmailService.js para forma correta deixando assim, na linha 72:
|
1 |
<script src="scripts/services/emailservice.js"></script> |
Criando o views/home.html
Agora precisamos criar a tela que faz a recuperação de senha:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h4>Email Notification with AngularJS + JavaMail with Gmail</h4> <form name="emailform"> <label>E-mail:</label> <div> <input type="email" required ng-model="emailService.email"> </div> <div> <button type="submit" class="btn btn-success" ng-click="send()" ng-disabled="emailform.$invalid">Reset Password</button> </div> </form> |
Alterando a rota
Em app.js altere a rota deixando assim:
|
1 2 3 4 5 |
$routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'MainCtrl' }) |
Testando
Vamos testar aplicação.Primeiro passo é compilar toda aplicação:
|
1 |
mvn clean install |
Agora vamos subir:
|
1 |
mvn tomcat:run |
Agora vou informar um e-mail e em seguida verificar se receber o e-mail:
O email acabou de chegar:
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!!
