Usando Yoeman com AngularJS

yeoman

Olá Pessoal,

No post de hoje vamos ver como usar o Yeoman com AngularJS.  Eu falei sobre o Yeoman rapidamente nesse post.

Lets go…

Step 1

Para o ambiente Windows, você pode ter o Gitbash instalado com suporte a execução de comando linux/unix. Instale também o NodeJS.

 Step 2

Agora abra o Gitbash e digite o comando

npm install -g yo

 

yoemaninstall

Ao terminar

 yoemanfinishedinstall

Step 3

Para ter suporte à criação de projetos com o angular, precisamos instalar o generator para o framework.

npm install -g generator-angular

yoemaninstallangular

Crie uma pasta algo como yeomandemo. Entre nela e digite

 yo

 

Responda Y

E escolha a opção:

yo angular

 

E vá respondendo às perguntas.

 yoemanangularsetup

Pronto, seu projeto foi criado. Para entender a estrutura há um post completo: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

 No meu github coloquei um exemplo do projeto demo que fiz com yoeman gerando o projeto com angular https://github.com/camilolopes/workspaceAngularJs

 Abraços. See ya!!!

Experiência AngularJS + Java em Produção

divedoo

Olá Pessoal,

O post de hoje vou falar  um pouco sobre a experiência que tivemos aqui na ITSLabs com desenvolvimento de um produto usando AngularJS e hoje está em produção. O produto ainda é um MVP versão 1.0.0 e foi de desenvolvido em 45-50 dias.  Para quem acompanha o blog venho trabalhando com AngularJS no dia a dia a quase 1 ano e criei o grupo AngularJS-Brazil (https://groups.google.com/forum/#!forum/angularjs-brazil) no Google Groups e mais uma vez reforço para quem está chegando, quer aprender qualquer tecnologia? Saia do CRUD, só assim você vai poder aprender  de verdade.

Lets go…

 

ITSLabs

Antes de começar falando do projeto, deixa eu falar rapidamente da ITS. A ITS é uma start-up  voltada para criação de produtos web e mobile. Aqui buscamos resolver os problemas dos nossos clientes identificamos qual a tecnologia resolve melhor o problema. Portanto, a tecnologia nada mais é que apenas uma ferramenta para atingir o objetivo. Hoje temos projeto com AngularJS, NodeJS, Java etc.  Em breve assim que tiver um ok do cliente teremos mais um case que vou compartilhar aqui com vocês de um projeto NodeJS + AngularJS.  A ITSLabs não é consultoria, fabrica de software que tem o foco apenas em desenvolver software, vamos um pouco além, e precisamos entregar valor ao negócio do cliente e também trazer valor para nossa equipe técnica. Já rejeitamos projetos que financeiramente seria ótimo, mas valor entregue tecnicamente para nossa equipe seria quase zero. Nosso dia a dia é bem Agile, trabalhamos 95% remoto e pouco focado em horas trabalhadas ou que horas você entrou hoje e saiu ontem. Atender aos prazos com qualidade é o nosso maior ativo.

 

DiveDoo – www.divedoo.com

É uma plataforma que busca resolver o problema de quem  busca acessório, curso, equipamentos na área de mergulho, mas não sabe como e onde encontrar. Fazendo uma pesquisa no Google as informações estão espalhadas e alguns sites podem não ser confiáveis. Baseado nisso foi criado a plataforma pela mergulhadora Gabriela Galvão.

Nossa experiência com AngularJS          

Esse foi  o nosso terceiro projeto com AngularJS em produção, os dos primeiros eram projetos bem menores com relação ao DiveDoo.  Ter escolhido AngularJS foi  uma excelente escolha, por alguns motivos:

  • Manutenção do lado do cliente: ganhamos muito na organização de  js, css etc.  Isso foi fantástico e crucial  para o desenvolvimento;
  • Integração com back-end: ter o back-end e front 100% independente. É fantástico, podemos mudar para  qualquer outra tecnologia sem precisar tocar no código do cliente.
  • Ter programadores trabalhando em paralelo e separado sem bloqueios: isso ajudou bastante, alguns programadores back-end odeiam front-end (eu era um desses, mas deixei de ser graças ao AngularJS) e aqui podemos manter cada um trabalhando do seu lado e se comunicando apenas através de uma API REST.
  • IE: esse cara é uma dor de cabeça. Então se você pensa em querer dá suporte para versões antigas  como 8 ou inferior. Esquece de usar AngularJS, apesar que o pessoal da Google fala nas versões mais antigas do AngularJS que eles oferecem suporte e talz, algumas coisas não funcionam bem, e ainda depender do Windows com a versão do IE, pegamos incompatibilidade. É tenso o negócio, simplesmente consome um tempo enorme para tentar achar a solução e se encontrar.  Se você tem um projeto que vai dá suporte a esse camarada em versões antiga, pode ir buscando outro framework, pq o AngularJS não vai rolar. E o problema não é do AngularJS, na verdade ele nasceu sem vontade nenhuma em querer ajudar o browser da Microsoft :). A partir do IE9 as coisas já funcionam com uma compatibilidade melhor.

Tools

Usar Yeoman  & Grunt é um fator de produtividade. Criamos uma estrutura do lado do back-end onde o desenvolver front-end consegue testar aplicação com back-end localmente e podendo sempre pegar o ultimo código que foi comitado. Separamos isso em módulos :

  • Web: aqui  é a versão que vai para o servidor remoto
  • Core: todo back-end
  • Webdev: aqui é onde o programador front-end trabalha e segue toda a estrutura do Yeoman. Se for preciso debugar um código local basta subir aplicação a partir desse modulo  usando o comando: grunt Server  e pronto.O Server vai subir em porta e IP diferente da aplicação que possui o back-end.  Quando o trabalho de front-end está concluído e precisa ser integrado com o back-end basta executar um grunt build e todo código do front é minificado e colocado no modulo de web  para ser deployed. Para quem está trabalhando no front-end isso é transparente.

Montamos essa estrutura, pois em projetos passados sofremos bastante com isso, a estrutura tudo em um único projeto funciona bem, quando temos um projeto que não é grande, ou seja, poucas funcionalidades. 

Aprendizado

Aprendemos que sem Yeoman é querer sofrer. Realmente é uma ferramenta poderosa e querer fazer tudo na mão, é perda de tempo, exceto se você está querendo aprender criando seus projetos house made. Mas, projeto que vai para produção, não recomendo. UI-Router  esse é o cara. Muito bom, e facilita bem o uso de rotas dentro do AngularJS. Quando você usa o UI-router que percebe a limitação que temos com as rotas default com AngularJS. Em breve vou fazer um post sobre  ele. Aprenda a separar as coisas, controller, services etc. Ter tudo organizado e separado é importante. Crie padrões de nomeação de arquivos para facilitar na hora que for buscar. Se você usa o Yeoman, ele ajuda em manter tudo organizado.  Use e abuse da injection dependecy que temos no angularJS, é fantástico. Lembro que quando comecei a estudar AngularJS demorei um pouco para pegar o core de usar injeção de dependência , a dica é leve o tempo que puder estudando, mas aprenda.  Não tenha medo de perguntar e não ache que você sabe tudo, esse é o maior erro achar porque fez algum CRUD que já aprendeu, pelo contrario é nesse momento que a brincadeira começa, todo dia  você vai aprender alguma coisa nova.

Conclusão

Hoje usamos fortemente AngularJS em nossos projetos aqui na ITS, há outros valores na tecnologia da Google que se fosse entrar nos detalhes  o post viraria um livro. Por falara nisso, em breve estarei lançando meu próximo livro que será sobre AngularJS, que nada mais vai ser o que aprendi nesse  quase 1 ano em três projetos completamente diferente e os erros que cometi, e acertos que também tive.

Vou ficando por aqui…

See ya!!!Abraços,

Yeoman Workaround building is not supported on win32

yeoman
Olá pessoal!
 
O post de hoje é um workaround para quem usa o yeoman no windows e na hora de gerar o projeto com angular pode dar o seguinte erro:
 
building is not supported on win32
 
Você vai ver este erro no final, quando estiver gerando um projeto. Como resolver? 
 
npm install grunt-contrib-imagemin@0.2.0 --save-dev

 

npm install

 

Pronto. Certamente agora você tem tudo funcionando. O problema é na versão do imagemmin 
 
 
Abracos. See ya!

Série AngularJS Usando o $watch

Olá Pessoal,

No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou  JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo.  Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.

Lets go…

Starting…

Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.

Development

A implementação é bem simples, vejamos:

Alterando recipeController.js

var recipeController  = function ($scope){

       $scope.name=””;

       //é aqui que está mágica

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

Alterando o arquivo watch.html

<body>

<div>

<input type=“text” ng-model=“name”>

<p>{{greeting}}

</div>

</body>

Resultado:

angularjsrecipewatch

Simples, não?

Abracos, see ya!!

SérieAngularJS: Internacionalização com Angular-Translate

Olá Pessoal,

No post de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.

Lets go

O angularJS suporta internacionalização ?

Sim, mas com limitação, e muita até. Como, por exemplo, ele consegue suportar internacionalização para datas, números, mas não suporta internacionalização para o conteúdo da sua aplicação.

E o que faço?

Se você pesquisar na internet pode encontrar alguns frameworks  que ajudam na internacionalização. Eu pesquisei bastante e testei alguns, e o melhor foi esse aqui:

Angular-Translate

http://pascalprecht.github.io/angular-translate/#/guide

Github

https://github.com/PascalPrecht/angular-translate/wiki/Getting-Started#configuring-translateprovider

Pelo seguinte:

  • Fácil de usar;
  • Boa documentação;
  • Comunidade bem ativa;
  • Releases constantes;
  • Bug fixing curto;

O ponto negativo que adiciono é que o autor colocou o nome dele na declaração do uso da API. Acho isso ruim, ‘pascalprecht.translate’. Se a API vira e o Google adota, iai? Certamente eles vão tirar esse nome e deixar algo global. E a migração para o novo nome é fácil?

Outro ponto negativo é a forma de obter o arquivo .min.js É preciso instalar o bower e rodar

bower install angular-translate 

Por que não disponibilizar o .min.js on-line no próprio github?

Para quem usa JSF, por exemplo, está acostumado a ter um arquivo .properties que possui uma key:value  para tradução e o JSF se vira para saber o idioma do browser e faz o translate. Mas com AngularJS é um pouco diferente. Claro que não teremos um arquivo .properties, mas sim um arquivo .js que funciona da mesma forma key:value.

Na prática

Vou considerar que você já tem uma aplicação com Angular e agora quer apenas internacionalizar. Veja os steps:

Passo 1

O que achei ruim, apesar de ser rápido, é instalar o bower para obter o .min.js

Se você tiver o git bash, apenas digite

npm install -g bower 

Dúvida, veja aqui: https://github.com/bower/bower

Passo 2

Após ter instalado o bower vamos gerar o min.js do angular-translate  no git bash

bower install angular-translate

Aguarde terminar a instalação e veja onde está o .min.js Será algo assim:

Xxx\bower_components\angular-translate

Passo 3

Copie o arquivo angular-translate.min.js para o seu projeto. No meu caso eu tenho uma pasta lib somente para js, veja:

angularjsangulartranslatelib

Passo 4

Crie um arquivo que terá a internacionalização, ou seja, que terá o que você gostaria que fosse traduzido (eu chamei de inter.js). O conteúdo é bem simples, veja:

$app.config([‘$translateProvider’, function ($translateProvider) {

  $translateProvider.translations(‘en’, {

    ‘label.question.movie’: ‘What is your favorite movie?’,

    ‘label.title’: ‘Vote in Movie?’,   

  });

  $translateProvider.translations(‘pt’, {

    ‘label.question.movie’: ‘Qual filme você gosta mais?’,

    ‘label.title’: ‘Vote no Filme’   

  });

  $translateProvider.preferredLanguage(‘en’); //temos que dizer qual é a default.

}]);

Passo 5

Após ter criado o arquivo que contém as mensagens de tradução, precisamos dizer ao angular que vamos usar esse cara para isso. No arquivo js que você cria o module, vamos adicionar o translate (no meu caso é o arquivo application.js)

var $app = angular.module(‘app’,[‘ngResource’,’pascalprecht.translate’]);

Passo 6

No meu arquivo index.html preciso carregar o .js do angular-translate. Veja:

<body>

<script src=“js/lib/angular.js”></script>

<script src=“js/lib/angular-resource.js”></script>

<script src=“js/lib/jquery.js”></script>

<script src=“js/lib/angular-translate.min.js”></script>

Outros codigos omitidos aqui

</body>

 Passo 7

Agora vamos chamar as keys que criamos no inter.js  no nosso arquivo .html . Temos várias opções, veja:

Usando Diretivas

<H2 translate=“label.title”></H2>

Usando expression

{{movie.name}}

Passo 8

Salve as alterações, build o projeto e suba.

angularjsvotenomovieapp

Um ponto importante: a tradução não vai ocorrer com base no idioma definido no browser e sim o que você setou como preferido. Infelizmente ainda não tem essa feature. Daí, para que o usuário queira ver aplicação no idioma dele, você terá que colocar algo como a bandeira do país na aplicação, e ao clicar o valor do preferred é alterado.  Na documentação tem um exemplo.

GitHub

https://github.com/camilolopes/workspaceAngularJs

Vou ficando por aqui. Caso queiram ver aplicação movie-vote usando API basta ir ao meu github e fazer clone ou download e executar

Abraços, see ya!!