AngularJS: Primeira aplicação a gente nunca esquece

Olá pessoal,

O post de hoje é mais para compartilhar com você a minha primeira aplicação com angularJS.  Como dizem: “a primeira vez a gente nunca esquece”, e comigo não foi diferente. Apesar da aplicação não seguir boas práticas, eu não quis apagar da minha vida,pelo contrário.

Lets go..

Movie Vote

É uma aplicação que exibe aos usuários opções de filmes e no final mostra o mais votado.  A combinação nunca pode repetir o mesmo filme na pergunta, ou seja, não posso perguntar: “Qual seu filme favorito?”.

  1. Batman
  2. Batman

Desenvolver essa aplicação simples na época me ajudou a entender muitas coisas básicas do framework que não conhecia bem ou não entendia quando fazia de maneira isolada. Juntar as peças e comunicação entre controller, view etc, faz a diferença no aprendizado, e certamente vamos errar, ter exceções na tela, mas não vamos desmotivar e desistir. Quando criei essa aplicação o objetivo mesmo era praticar o básico do básico do framework, sem ainda estar preocupado com as boas práticas etc. Deixei isso para o segundo tempo do jogo.  Depois de ter desenvolvido, aprendi como internacionalizar apps com angularJS e coloquei em prática  testando no movie-vote.

Onde quero chegar?

Sem prática, não tem como aprender. Parece óbvio, mas é preciso exercitar, criar, dar trabalho para você mesmo, e não necessariamente criar algo complexo; pode ser simples. Esse simples, pode acreditar que vai dar um certo trabalho de fazer quando você está usando uma tecnologia nova. E o melhor de tudo: não se envergonhe daquilo que fez quando estava aprendendo, tenha orgulho, pois quando você olha para o passado e vê o presente saberá se evoluiu ou continua escrevendo e pesando da mesma forma que começou.

Vou ficando por aqui. Segue o link da aplicação movie-vote https://github.com/camilolopes/workspaceAngularJs

Abraços, see ya! 

Série AngularJS: Usando Yeoman 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 – Por onde começar? Qual o melhor livro?

Olá Pessoal,

Resolvi criar esse post para ajudar aqueles que estão querendo começar com o AngularJS, mas não sabem como dar os primeiros passos.

Lets go…

Por onde começar?

Essa é uma pergunta muito comum para quem quer ter o primeiro contato com o framework da Google. Eu também fiz essa pergunta quando me foi apresentado o AngularJS, apesar de que a documentação do framework é boa e está em atualização constante. Algumas coisas não são bem explicadas como deveriam, mas dá pra fazer pelo menos um “Hello world” e tirar dúvidas de como usar algumas funcionalidades do Angular, sem falar que a lista de discussão deles é bem ativa e os próprios desenvolvedores do framework estão lá participando.

Sabemos que se formos no Google.com e realizarmos uma pesquisa sobre AngularJS vai ter bastante post sobre assunto, e alguns de qualidade, mas será o suficiente para você de fato aprender o framework? Depende até onde você deseja ir. Para sair do 0 x 0 o material que está disponível na internet já é mais que o suficiente, mas se você deseja se aprofundar mais no framework e começar a tratar o mesmo para ambientes corporativos, dai terá que entender alguns assuntos mais específicos, pois achei as informações práticas limitadas na documentação. Sem falar que entender angularJS é apenas uma parte da história, o ideal é que você entenda como trabalhar com frameworks JS da mesma forma que você trabalha do lado do servidor, por exemplo unit test, build etc. Eu particularmente estou entrando aos poucos no mundo JS e o Angular está sendo meu ponto de entrada, uma vez que client-side nunca foi meu forte por questões de projetos e fora um trauma que tenho de JavaScript de 13 anos atras, mas hoje acho que ja superei.

Quando me perguntam por onde começar com o AngularJS sempre recomendo na seguinte ordem:

1. Internet: pesquise posts sobre o assunto na Internet, veja aqueles que tem qualidade e comece a ler, e se for prático ja saia metendo mão na massa. Leia a parte teórica que tem na documentação, participe de grupo de discussões como o AngularJS-Brazil  e  o AngularJS-Brasil no Faceboook. Aqui seu objetivo é descobrir o framework, de poder brincar com ele e saber se você curtiu o jeito de “trampar”. Acho que é a melhor forma e mais barata que se deve seguir quando ainda está experimentando se você deve investir tempo e dinheiro no angularJS. No grupo AngularJS-Brazil eu postei uma pilha de hotlinks sobre o framework, é só acessar o grupo e conferir.

2. Livros: Hoje há bastante livro  sobre o assunto comparado a 3 meses atras onde tinham apenas 2-3. Mas o negócio cresceu e temos mais opções.

3. Comunidade: Participe das comunidades ativas do AngularJS. A página no facebook é bem agitada e recentemente criei um grupo no Google Groups AngularJS-Brazil para centralizar posts, links e discussoes sobre o framework.

A seguir alguns livros que recomendo:

1. AngularJS na Prática

É um livro em português sobre o framework, mas ainda está em desenvolvimento. Acho que já passou da hora do autor publicar, pois esse foi o primeiro livro que vi do assunto em português, lá em meados de julho/13. Recomendo o livro para quem quer dar os primeiros passos com o framework. A escrita do autor é bem confortável e os exemplos funcionam. Um detalhe importante é que a parte de server-side é em PHP, mas não vejo isso como problema, é só pegar o conceito e aplicar na linguagem que você trabalha.

2. Recipes with Angular.js
É um livro bacana que recomendo para quem já está mexendo com AngularJS. Não precisa ser um expert, mas se você já aprendeu a base do framework já consegue fazer um pequeno projeto (nem que seja um crud) usando o AngularJS. Esse livro vai dar umas dicas legais, é bem pequeno e prático. Pena que o autor não mostra o resultado do código, apenas joga e o resto fica direcionado para pegar no github dele. Mas ele organizou bem os arquivos no github e você pega por capítulo. Recomendo. Foi o terceiro livro que li.

3. Instant AngularJS Starter

Esse livro aqui não é dos melhores. Em termos teóricos até ajuda, mas parece que o autor pegou o que tem na documentação, jogou no livro e tratou apenas deixando a escrita direcionada para o modelo de livro. Eu li e gostei como ele conceituou, já que no início tinham coisas que não eu sabia o porquê e a forma que ele explicou ficou melhor de entender. Muitos dos códigos que estão no livro estão quebrados, parece que o copy/paste não foi feito da melhor forma. Por um lado foi minha primeira oportunidade em abrir a fazer um fix em um código angularJS escrito por outra pessoa. Pelo preço do livro na versão kindle talvez vale a pena comprar só pra não aprender pelo caminho feliz.

4. ng-book (http://www.ng-book.com/)

É um livro que ainda não li, mas vi que quem leu gostou do livro. Está na minha lista. Aqui

5. Mastering Web Application Development with AngularJS

Esse é o que estou começando a ler. Os comentarios de quem já leu são animais. Parece ser um bom livro. Estou esperando chegar o meu exemplar, pois pela quantidade de página prefiro ler na versão impressa, além de poder usar o marcatexto, escrever no livro, etc. O preço é diferente, $40 doletas e ainda tem IOF + Frete. A versão Kindle tá mais em conta. Assim que terminar de ler posto um review aqui no blog.

Estou com um post em draft com review dos livros que já li. Vou postar em breve e com mais detalhes.

Bom, é isso pessoal. Vou ficando por aqui e espero que tenham gostado da série AngularJS, foi mais de um mês postando e compartilhando com vocês há muito mais coisas sobre o framework (claro) e quem sabe fica para uma outra série mais lá na frente?

Abracos, see ya!!!