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

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:

<dependency>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
<version>1.4.5</version>
</dependency>

E remova a tag

 

<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:

...
<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á:

<!-- 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):

@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

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:

@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:

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:

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:

yo angular:factory EmailService.js

E altere o arquivo emailservice.js deixando assim:

'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:

<script src="scripts/services/emailservice.js"></script>

Criando o views/home.html

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

<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:

$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainCtrl'
})

 Testando

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

mvn clean install

Agora vamos subir:

mvn tomcat:run

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!!