Olá, pessoal!

No artigo de hoje vamos ver como enviar uma notificação por e-mail, usando JavaMail com AngularJS e tendo o Gmail como servidor. A 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 artigo.

Requisitos:

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

Para começar, instale o archetype, que 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 de exemplo vai simular uma recuperação de senha, onde o usuário informa o e-mail cadastro e em seguida receberá um e-mail com as instruções para recuperação de senha.

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

Passo 01

Criando o projeto:

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

Passo 02

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

E apague os packages em src/test/java.

Passo 03

No arquivo pom.xml adicione a seguinte dependência:

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

E remova a tag <build></build>

Passo 04

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 05

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 06

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 07

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 08

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. O primeiro passo, após a criação do projeto, é instalar o bower para baixar as libs necessárias 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-o 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. O primeiro passo é compilar toda aplicação: mvn clean install

Agora vamos subir: mvn tomcat:run

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

O email acabou de chegar:

O projeto example está disponível no meu Github.

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.

Vou ficando por aqui…