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