Novo Livro: AngularJS para desenvolvedores Java

capalivroangularjs-final

olá Pessoal,

Ando bem desaparecido do blog, o trabalho tem me consumido bastante tempo, dedicação e foco  desde  de julho do ano passado. Tenho trabalhado 2-3 projetos paralelamente das 07-24(e tem uma esticada ate 1 da manha). Uma das vantagens que posso adiantar que venho compilando bastante aprendizado, experiências e quero em breve começar a compartilhar aqui  com vocês. Tem desde do lado técnico até não técnico voltado para negócio, empreendorismo etc.  Hoje venho anunciar mais um novo trabalho que é meu livro de AngularJS que comecei a escrever em 2014, mas demorou tanto por minha causa com o problema de tempo e dedicação que gosto qdo estou em um projeto, não adianta  fazer algo “meia boca” e com esse tempo o AngularJS evoluiu bastante e tive que   remover e adicionar algumas coisas no livro, até pq na época que comecei o AngularJS, era algo do tipo high school, tive a sorte que estava em um projeto que ia para  produção  e aprendi bastante e  ao mesmo tempo sentir tanta dificuldade nos primeiros passos, principalmente como desenvolvedor Java e  foi assim que nasceu.

Um pouco sobre o livro 

O livro foi realmente escrito para programadores Java, mas digo aqueles que conhecem de verdade o mundo JEE, e não está começando. Falo isso claramente  nas primeiras paginas do livro, pois eu já fui frustado com tantos livros que comprei e no final não era o que eu imaginava e o autor não deixou claro quem poderia comprar. Então se vc é  iniciante em Java, conhece pouco ou quase nada. Nem  compra o livro agora, pois vou considerar no livro que você já sabe os frameworks basicos de uma app JEE.

O foco

Me dediquei em focar no livro em algo que não encontrei na época nos livros que ia lendo que era: “Como fazer esse negócio de angularjs funciona   com java para app jee e ter isso como default tirando o JSF do meio de campo?”  Sim, era exatamente assim que me perguntava, dai percebi que  não ia se fácil, pois havia muitos livros de AngularJS, mas essa integração lidando com os dois mundos e construindo as coisas mesmo que seja simples, não tinha. E tive que seguir sozinho, aprendendo o AngularJS isolando e ir montando o quebra cabeça.  Trouxe essa experiencia  armaga mais divertida para o livro. Se que desenvolver aplicações web/jee usando angularjs, sem se importar  nesse momento com a perfumaria e sim com a essencia, o livro vai guiando para isso. O importante é fazer as coisas direito, não importa o que seja.

Lançamento

Ainda não tem uma data especifica, mas até Março já teremos o livro disponivel em ebook e nas livrarias como Saraiva, fnac etc.

Desconto Especial  e Sorteio

Sim. Claro que vai rolar desconto para os leitores do  blog. Coloque seu nome na lista e enviarei um cupom exclusivo por email, assim que tiver tudo ok.

Conclusão 

Quero agradecer a cada um de vocês, de verdade sem conversinha. Realmente vocês leitores que acompanham o blog, me manda email com feedback, comentam nos posts, todo esse ciclo mantém a chama viva e me faz pensar qual o próximo em como ajudar alguém em algum lugar com algo que já passei e que um simples post pode resolver muita coisa. Sei que agora gerei uma dívida de ter sumido dos posts semanais, porém tenho a meta para esse ano regularizar e deixar positivo o meu saldo com vocês. Qualquer dúvida sobre o livro só mandar.

Atualização

Opa!! Acabou de ser lançado pessoal e tem versão E-book.

http://goo.gl/pE6udV

abraço, e até a próxima.

Série Ionic:Integrando Ionic com sua app AngularJS

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:

.controller('MainCtrl', function($scope, $http) {
$scope.teste='mobile'
$http.get('http://www.seuwebservice.com/saldo/conta/1').then(function(resp) {
console.log('Success', resp);
$scope.teste = resp;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})

 

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

<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>

O código completo ficando assim:

 

<ion-view view-title="Camilo App">
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}

</ion-item>
<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>
</ion-list>
</ion-content>
</ion-view>

Passo 4

Vamos testar, basta digitar:

ionic serve

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 Ionic: Um pouco sobre o Ionic + AngularJS

ionic-angular-opti

olá Pessoal,

Hoje vou falar rapidamente sobre esse cara aqui Ionic. Que tem ganhando bastante popularidade quando
se fala em desenvolvimento mobile hibrido. Mas, a pergunta o que esse cara faz de tão especial?

lets go…

Vamos entender…

Há ainda uma confusão sobre o que é o Ionic, ele é tão simples que não parece verdade. Vou explicar  nesse post de forma pratica com o que vivemos aqui na ITSLabs. Ter adotado o AngularJS no passado como nosso framework de front-end, hoje tivemos o ganho em desenvolver mobile com Ionic, pois não precisamos fazer quase nada para ter uma app mobile, claro só o trampo de desenhar a cara da app. Mas,  toda camada de serviço, já veio de graça da app web.

O Ionic…

Nada mais é que um framework front-end para mobile. Pense nele como um angular-ui, bootstrap. Ele é html e css e feito em cima angularjs, ou seja, se vc já desenvolve com angularjs, não nada que aprender, apenas usar o Ionic como vc usa o bootstrap ou angular-ui. Agora se vc nunca viu angularjs, terá que aprender o framework da Google para entender o que é um controller, services, factory etc. E dai saber como usar o Ionic, senão ficará perdido e achar tudo confuso. Mas, é muito mais simples que possa imaginar. Fizemos uma app aqui em menos 5 min, já integrando com o serviço no server.

Nosso cenário aqui

Para ficar mais claro, aqui na ITSLabs temos projeto com java no back-end + angularjs se comunicando via rest com jersey. E nada demais aqui. Quando pensamos em fazer app mobile, dai veio e agora? o que aproveitar? Com ionic aproveitamos tudo, desde os controllers e serviços que criamos no front-end, até o serviço rest que disponibilizamos, então só nos preocupamos em fazer o design, ver os componentes disponiveis no Ionic e ter mais de uma versão da app com diferente UX para validar qual seria mais apropriado para o perifl do usuário que estaria usando a versão. Fizemos tudo isso em minutos.

E como testar?

Ah, isso aqui parece uma piada. Tem uma app no Google Play chamado de Ionic View que permite testar sua app no celular, isso mesmo. Veja como funciona:

1. voce baixa o ionic view para o seu celular IOS ou Android

2. Cria a conta no Ionic View

3.Faz o upload da app do Ionic

4. Pronto. Agora é so usar clicando em view no IonicView

Ele irá simular a APP. Observe que não fizemos deploy pra iOS,mas conseguimos simular no Iphone por exemplo. O resultado no iOS não é diferente da app final. Porém, achei problemas no tablet Android 4.1 da Samsung na hora de simular pelo IonicView ele deixou zicado o front-end. Ainda não sei o motivo, mas ao fazer deploy no apk por exemplo está tudo certo.

Essa é a forma mais simples de testar se não quiser ter um simulador local na máquina.

Iai curtiu o Ionic view? Olha aqui nossa app:https://www.facebook.com/usecash

No meu Github.com/camilolopes tem um app de exemplo:

https://github.com/camilolopes/workspaceAngularJs

Conclusão

Eu confesso que estou gostando muito da experiência de desenvolvimento e preparei uma série que vou trazer nela o que estamos fazendo aqui na ITSLabs, pois tudo que estamos fazendo aqui vai para produção. Próximo posts da série vamos ver instalação,um pouco de mão na massa,e depois vamos chegar o grande momento de deploy e opções que temos de fazer isso pra colocar nosso app na store da vida.

abraço, see ya!!!

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

Archetype Maven AngularJS para Large Application

angularjslogoA

olá Pessoal,

Mais um archetype para projetos AngularJS com Java, que criamos aqui na ITS com base em uma necessidade de um novo projeto. A seguir explico a necessidade e quando você pode usá-lo em seus projetos.

lets go…
archetype-webapps-module-angularjs-webdev

No GitHub xxx do projeto veja como instalar e os frameworks que acompanham o archetype.

Por que e quando usar?

Aqui na ITSLabs surgiu um novo projeto bem diferente do que já tinhamos passado com AngularJS + Java. Precisamos ter:

– AngularJS com Java;
– Ter o yeoman;
O problema

Vamos começar pelo problema, tudo começa quando queremos usar o Yeoman em projetos JEE e queremos fazer o deploy do nosso front-end minificado e tirando o proveito de rodar um grunt build. Mas, nem tudo é tão simples assim, como sabemos o mundo JEE tem sua estrutura (webapps/) e o Yeoman gera uma uma estrutura onde tudo fica dentro de app/ .

Se vc tem webapp/app e quando fazer um grunt build o que acontece? Simplesmente seu arquivo para deploy do front vai ficar no mesmo lugar que está seu código fonte que será algo assim app/dist. Mas, para aplicação JEE pouco importa isso e sim o que está dentro de webapp apenas. Uma solução e como já mostrei exemplos aqui no blog com o Yeoman, é não fazer o grunt build e acaba não obtendo a vantagem dos recursos de minificação, mas consegue ter AngularJS + Java + Yeoman.Porém, em projeto bem pequenos isso pode ser um problema, mas se você está construindo uma aplicação grande, pode ser tornar um problema de produtividade, além de não desfrutar de todas as vantagens que temos hoje no mundo JS tais como grunt, bower etc.
Como resolver?

Pensamos em várias soluções, e a que nos atendeu foi a seguir:
Criamos o projeto em modulos:

– xx-parent: o modulo principal.

– xx-core: o modulo para o back-end. É aqui que vai entrar as APIs, framework para todo o código do back-end

– xx-web: o modulo do front-end. Aqui não teremos código AngularJS para desenvolvimento e sim o deploy e os Controllers.

– xx-webdev: esse sim, é o modulo que terá o código de desenvolvimento do front-end. É aqui que vamos ter os css, html, javascript, controllers do angular etc.
Mas, como funciona?

É bem simples, vc pode ter uma equipe de back-end trabalhando somente no modulo xx-core. E outra equipe trabalhando no xx-webdev. O modulo xx-web é usado para criação do Controller que no archetype vem com Sprint + Jersey (vc pode alterar).

Durante o desenvolvimento sua equipe xxx-webdev não precisa subir uma aplicação JEE para testar, basta apenas roda via console grunt server e automaticamente aplicação vai subir 127.0.0.1:9000 e com liveload hablitado. Ou seja, alterou um arquivo em webdev, o browser é reloaded automaticamente.

Para sua equipe de back-end, eles podem trabalhar tranquilamente nos modulos xxx-core e xxx-web e quando precisar subir aplicação pode ir no modulo parent e rodar:

mvn tomcat:run

E aplicação vai subir normalmente em:

http://localhost:8080/suapp

Na Prática

Vamos rodar os comandos Yeoman em webdev tais como :

yo angular:controller

yo angular:factory

 

Entre outros: https://github.com/yeoman/generator-angular
Fazendo Deploy

Para fazer um deploy é simples, quando o código do front-end estier pronto para ser deployed basta executar:

grunt build --force

E aqui vem toda a vantagem, o código será minificado e copiado para o projeto xxx-web/webapp. Precisamos usar o –force pq os arquivos estão sendo copiados para uma outra pasta.

Agora que o código foi copiado para xx-web, podemos subir aplicação. Se vc ainda não fez nenhum deploy vai precisar rodar assim:

mvn clean install

mvn tomcat:run

Agora temos todas as alterações do front-end desenvolvida em webdev na versão final da aplicação.

Observe que com isso não mudamos o mundo de quem trabalha com front-end.Para esses engenheiros tudo continua igual, executar o grunt, bowser, unit test etc. E quando eles terminarem o trabalho deles, apenas precisa fazer um grunt build mandando as mudanças que o time do back-end vai pegar automaticamente.

Vantagens

– mantivemos os beneficios que o Yeoman oferece;

– separamos em modulo e permitindo menos dependências no dia a dia, sendo que cada desenvolvedor pode trabalhar independente e a integração ao termino do trabalho não é impactante;

– Podemos desfrutar das técnicas de minificação, unit test etc;

– deploy especifico;
Outro ponto importante que criamos no archetype é o suporte a parte administrativa. Se você precisar ter suapp/admin sem usar as rotas do angularJS, o archetype já vem com essa configuração no arquivo indexadmin.html que usa um Servlet de redirecionamento. Assim quando o usuário digita suapp/admin vc pode redicionar para uma rota do angularJS.

Usando o archetype

Na página do archetype no github vc tem os passos para instalação. A seguir veja como criar um projeto usando o archetype:

1.Crie um novo projeto maven;

archetypewebdev

2. Agora vamos criar o projeto

archetypewebdevproject

3. E o resultado será

archetypewebdevprojectdone

4. Olhando o projeto principal podemos ver os filhos:

archetypewebdevparent

5. Agora precisamos importar o webdev, vá em File ==> Import e ecolha Maven Project e seguida vá onde está o projeto que acabamos de criar:

archetypewebdevimport

Pronto, temos o esqueleto do projeto para começar a programar.
Conclusão

Espero que tenham gostado do archetype.Se você passou por esse cenário e teve uma solução melhor, não deixe de comentar e compartilhar.

abracos, see ya !!