angularJS – Página: 2 – Blog do Camilo

Retrospectiva 2014

olá Pessoal,

Como todo ano faço sempre uma retro. Esse ano não será diferente. Vamos lá?

Retrospectiva 2014

Esse ano foi de fato desafiador. Desafios a cada dia foi o que não faltou. Paro e olho para os outros 11 meses tenho história para cada um deles seja superação pessoal como profissional. Particularmente a única coisa gosto no final do ano é vc ter esse tempo para fazer uma reflexão na sua vida e como foi esse “1 ano” que teve e que jamais vai voltar, pois o tempo é irreversível.

E as metas que fizemos no final de 2013?

É eu posso dizer que esse ano foi um dos pontos que pouco dei atenção aquelas famosas listas, tabelas que fazemos com o que queremos atingir.Simplesmente eu tinha um plano, mas havia outro e que não estava nada alinhado com o que estava ali no papel e tive que me adaptar, entender e seguir em frente. Aprendi que ter metas mais curtas que permitam trazer maior valor para sua vida é melhor que ter aquelas metas de médio e longo prazo que muitas vezes passam a ser incertas. E vc se perde no meio do caminho e quando menos espera perdeu o foco. Então tudo que escrevi para em 2013 para 2014 joguei fora e comecei uma nova historia com metas mais simples e atingiveis. O fato de ser simples não quer dizer que é fácil. Ser simples pra mim, é ser objetivo e saber exatamente o que quer no final. Certamente quando temos metas complexas é pq nosso objetivo com aquilo não está bem definido.

E o profissional?

Esse ano profissionalmente posso considerar como um dos melhores que já tive. Realmente muito aprendizado, dedicação e persistência. Há 1 ano e meio deixei o mundo corporativo nas multinacionais e me dediquei ao empreendorismo (pela terceira vez, após ter fracassado 2 vezes anos atras) e por uma naturalidade além do projeto inicial que é a ITSLabs, onde somos uma espécie de aceleradora para start-up, buscamos projetos que resolvem problemas de verdade para o mercado, sociedade e ajudamos investindo junto com o empreendedor permitindo que a ideia saia do papel e entre em operação de maneira sólida.Até desenharmos esse modelo quebramos muito a cabeça e cara também. Mas, trabalhamos bastante, tanto que não conseguimos ter o nosso site. E aprendi quando você não tem tempo para fazer o seu back-office significa que está bom, pelo menos acredita que o tempo usado foi para fazer novos negócios, pelo menos por aqui foi assim. Com todo esse envolvimento nasceu a Usecash que é um novo meio de pagamento através do troco, que antes se chamava itroco, mas após estudos de mercado e estrategia mudamos o nome. E isso tudo nos gerou dois negócios que não estava no plano, mas que nos proporcionou uma grande experiência, conheci executivos que jamais imaginei conhecer ou até almoçar.Colocamos no ar a ideia da Gabriela fundadora do DiveDoo, primeira cliente da ITSLabs (no novo modelo de negócio). E antes de terminar o ano fechamos mais 2 novos projetos para 2015. Ufa! A pergunta é quanto vale tudo isso? Não é possível detakgar o que tem nesse ciclo, aqui é tudo resumido, mas é um desafio diario, que tem inicialmente mais dias “ruins” que “bons”. Porém, os dias ruins te levam a novos caminhos e soluções.

Ter participado do TDC foi algo sensacional, curto o evento há muito tempo e ter contribuindo é algo que não consigo mensurar.

O pessoal?

Do lado pessoal, tirando a falta de tempo para ficar com minha familia, onde tem sido algo bem limitado e pontual.Afinal eu moro em SP e eles na Bahia. Acredito que meus desejos pessoais estão bem. Dizem por ai que devemos ter profissional x pessoal. Eu particularmente, não consigo separar essas diferenças de desejo. Eu entendo que estão interligados e servem como ponto de equilibrio. Se vc tem esses dois mundos separados acredito que há alguma coisa não bem definida no que vc faz. E como disse é preciso ter o equilibrio e unir os dois para que seja um só. Senão, gera infelicidade. E aprendi muito bem fazer esse equilibrio, apesar da agenda cheia, as oportunidades surgem e vc deve aproveitar. Se hoje surgiu um espaço para ir ficar com a familia ou sair com os amigos e nem que seja por um limite de 2-4 hrs, vá e faça. Se tem esse espaço, é pq é preciso ser feito para ter o equilibrio necessário entre os dois mundos pessoal & profissional.

E o blog?

Eu digo que não foi um ano como gostaria para o blog camilolopes.com.Com o aumento de trabalho e alteração das prioridades devido a prazos etc. E trabalhando media de 20hrs/dia foi dificil arrumar um espaço para escrever um post como gosto. Não adianta sair escrevendo, é preciso pensar, refletir, validar se faz sentido etc. E quando eu escrevo tem diversos fatores por tras tais como sentimento, motivação, empolgação etc. É preciso unir tudo isso para transmitir o que deseja de maneira simples que possa agregar na vida de quem for ler o post. Espero que em 2015 eu consiga melhorar um pouco a frequência de publicação, dificilmente será como antes, onde tinha uma média de 3 posts novos por semana. Isso sei que não é mais possível, mas pelo menos 1 post por semana é meu desejo.

E aqui vai um resumo:

1. AngularJS:Nossa aqui foi animal, venho aprendendo AngularJS desde meados de 2013. E resolvi compartilhar cada aprendizado que ia tendo com o framework no formato de série. Hoje com dois projetos em produção tenho bastante coisa que ainda não coloquei no ar, mas espero que em 2015 consiga.

2. Série Scrum:Vimos uma série de posts sobre Scrum, mas nada explicando o que é o framework, isso já tem na internet há 10 anos.Resolvi compartilhar a nossa experiência no dia a dia e problemas que tivemos e como resolvemos.

3. TDC 2014:Tive o prazer de participar da edição 2014 e espero participar no próximo ano. Foi excelente compartilhar a experiência da ITSLabs com projetos remoto usando Scrum. Rola ou não rola?

4. UseCash: Conheça o novo meio de pagamento que vai mudar a forma de você carregar o dinheiro. Não se trata apenas de uma nova bandeira como opção de pagamento, e sim um novo conceito de como gerenciar o dinheiro com segurança.

5. ITSLabs – Github:Temos o nosso repositorio no Github com projetos que achamos importante compartilhar com a comunidade. Inclusive criamos archetype maven para Java + AngularJS.

6. EasyJavaDropbox: Na ITSLabs criamos uma framework EasyJavaDropbox que nos permite usar mais facilmente o dropbox em projetos Java. Fiz alguns posts explicando o uso. Temos planos de evoluir API em 2015 .

Aproveitei o recesso do final do ano e já comecei a escrever alguns drafts. E no ano de 2015, pretendo ter alguns posts não técnicos, voltado para area de empreendorismo, compartilhando um pouco a minha experiência com vocês, muitos falam e ostentam, mas vamos ver o dia a dia como é? Muitos tem vontade de empreender, poucos tentam e dizem que é coragem. Mas, eu digo é coragem que precisamos mesmo? Eu aprendi que coragem apenas não é suficiente, há outros fatores importantes e que vc pode saber deles ainda quando está empregado e tem o empreendorismo como “vontade”. É disso que pretendo falar, trazer o dia a dia, nada de dicas tais como “como empreender?” ou “como abrir o negócio do zero e ganhar $$$”. Isso já está lotado na internet. Vou tentar trazer o que poucos falam.

Aprendizado e as lições

Não é possivel listar todas as lições de 2014, pq são mais de 365 lições. Porém, tem aquelas que marcam e se repetem muitas vezes durante o ano com intensidades diferentes. Mas, vou listar algumas:

1. Acreditar: Seja o que for, por mais dificil que seja a situação, acredite que tudo é passageiro, nada dura para sempre.Só acredite que vc terá a capacidade de resolver;

2. Você vai está sozinho: Os seus problemas é você que resolve. Não adianta, querer transferir para alguém. Ele volta pra vc. Pois, é o único com capacidade em achar a solução. E nisso tire um aprendizado.

3. Você não é melhor que ninguém: acredite não importa quanto tem na sua conta, que carro vc anda. Você não é melhor que ninguém nesse mundo. A sua vida pode mudar em questões de minuto e tudo que vc considera essencial e material, não terá nem 1/3 do valor que pagou. Então, aprenda a viver com as diferenças e olhe para o que as pessoas são e não o que elas tem.

4. Ajude as pessoas: parece piada isso ou campanha para ONG. Mas, não é.Ir para o trabalho, tirar o carro da garagem e ter um trocado para o chop na sexta-feira, parece algo normal, mas isso para você.Há pessoas nesse momento lutando pela vida a cada minuto, que não precisa de muito, mas que o pouco de cada um pode mudar a vida dessas pessoas. Eu confesso que nunca me interessei muito nesse mundo das ONGs. Mas, esse ano meu sentimento e pensamento mudaram. Não pq alguém que trabalha em uma ONG me fez mudar, pq conheci pessoas que dependem dessas ONGs para sobreviver e quando olhei para o meu lado e vi o que já havia conquistado e nunca devolvi aquilo para a sociedade, não me senti bem. Não tenho religião, apenas acredito que há um Deus, seja qual for ele. E acredito, que o mesmo tem mudado minha vida e me deu oportunidade de rever meus conceitos. Esse é um dos meus objetivos de vida com o empreendorismo, pois foi onde vi a oportunidade que posso ajudar e mudar as vidas das pessoas. Dinheiro é importante, porém é limitado e deve ser consequência na sua vida.

E para 2015?

Ainda não fiz planos, não escrevi no papel nada daquilo que vamos ver ai nos jornais nos próximos dias. Porém, em termo simples de ser, é evoluir o que foi consquistado em 2014, ter aprendido com os erros e saber quer novos estão a caminho. Porém, saber levantar é o que mais importa.E claro quero blogar de maneira aceitável aqui e não deixar que as aranhas tomem conta do blog :). Ah! Não posso esquecer de publicar meus dois livros que estão no forno. Um sobre AngularJS e outro mais voltado a quem deseja empreender e vou contar os bastidores.

Agora a minha pergunta e o seu 2014 como foi? E para 2015?

abraços e quero agradecer à todos vocês por acompanhar o blog, mandar emails. Se não fosse cada uma dos leitores e seguidores que tenho hoje, acredito que não teria chegado aos 7 anos de blog.

Série AngularJS: Validando Formulário

Olá Pessoal,

Hoje vamos ver como customizar mensagens de validação em um formulário com AngularJS. Será uma simples validação. Para algo mais específico precisamos criar diretivas. Por exemplo, validar se o username é unico. Tem que criar uma diretiva que faça essa validação para poder exibir uma mensagem no formulário. Não vamos entrar nesse cenário aqui, pois já seria um novo post.

Lets go…

Github

O exemplo vai estar no projeto receipeangularexample no meu github

https://github.com/camilolopes/workspaceAngularJs
Development

Vou assumir que você já tem a configuração básica do AngularJS. Para o exemplo usarei rotas/deep linking para acessar o conteúdo.

Step 1 – Configurando a rota

when("/validationform", {
templateUrl : "formvalidation.html",
controller : recipeController}).

//restante do code omitido

Step 2 – Criando uma função no Controller

Vamos criar uma função bem simples no controller

var recipeController = function($scope, UserService) {
//codo omitted

$scope.send = function($scope){
alert("send");

}

};

Step 3 – Criando o formulário

Agora vem o nosso formulário. Veja:

<form name="mainForm" ng-submit="send()">
<div>
<label>Nome</label>
<input type="text" ng-model="user.name" name="username" required/>
<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>
</div>
<div>
<label>email</label>
<input type="email" ng-model="user.email" name="useremail" required/>
<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>
<div>
<label>Idade</label>
<input type="number" ng-model="user.age" name="userage" required ng-maxlength=2 ng-minlength=1>
<span ng-class="error" ng-show="mainForm.userage.$error.maxlength">Não é permitido mais que 2 digitos</span>
</div>
<div>
<label>Blog/Site</label>
<input type="url" ng-model="user.site" name="usersite" ng-maxlength=30>
<!-- the message only show when the form is validated-->
<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">
<span ng-class="error" ng-show="mainForm.usersite.$error.url">Url inválida</span>
</div>
</div>
<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>
</form>

Entendendo o Código

Claro que precisamos entender o que o código faz. Focarei apenas no que é importante, ou seja, não preciso explicar o que um atributo required no campo input faz.

Primeiro ponto

Ter um nome para o formulário, sem um nome nada adianta entender o restante do código. É através dele que vamos acessar os campos.

<form name="mainForm" ng-submit="send()">

bloco nome

<div>
<label>Nome</label>
<input type="text" ng-model="user.name" name="username" required/>
<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>
</div>

No campo input temos que dar um name para o nosso campo e estamos dizendo que ele é required e qual mensagem deve ser exiba. Se não fizermos isso será a mensagem default HTML 5. Na linha span estamos dizendo: “exiba esta mensagem se o campo username for inválido”, ou seja, se não tiver nada digitado vai exibir essa mensagem por padrão, como vimos na imagem anterior.
bloco email

<div>
<label>email</label>
<input type="email" ng-model="user.email" name="useremail" required/>
<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>

Fizemos a mesma coisa do campo nome, a diferença é que aqui temos um campo do tipo email que valida o formato do e-mail, se este for inválido exibe a mensagem que colocamos na validação

<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>

O objeto $error que estamos usando contém todas as validações para um específico formulário, que no nosso caso chama-se mainForm.

Lembrando que a estrutura é nomeDoForm.nomePropriedade.$error.attributo ou nomeDoForm.expression.

Para o bloco idade nada de diferente, então nem preciso explicar.

Bloco Site

Aqui estamos validando a url e para isso temos o type url ja no HTML 5.Mas, observe a diferença que a mensagem somente é exiba quando o campo é modificado, ela não aparece quando a página é carregada, como fizemos nos outros campos, isso devido a essa linha aqui:

<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">

Ela está dizendo: “se o campo usersite for modificado e inválido, exiba o conteudo desse bloco” que no nosso caso temos a mensagem “Url inválida.

$dirty retorna true se o campo foi modificado

Bloco botão submit

<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>

E para garantir que o usuario nao vai submeter o form, vamos desabilitar o botão submit se o formulário é invalido, ou seja, se todos os requisitos não são atendidos esse botão fica disabled

Testando

Por hoje é isso, vou ficando por aqui e espero que tenham gostado do post.

abracos, see ya!!

Série AngularJS: Advanced Form

olá Pessoal,

No post de hoje vamos ver como brincar um pouco mais com AngularJS e formulário. Com AngularJS tudo é mais simples e tudo que já faziamos pré mundo AngularJS funciona com muita naturalidade. Os exemplos mostrados aqui estão no meu Github no repositório do workspaceAngularJS o arquivo com o exemplo é o advancedform.html

lets go…

Usando checkbox

Está precisando um checkbox para o seu formulário? É bem simples. Veja o código a seguir:

Opção 1

<div>
<label>Role</label>
<!-- the value for user.admin is set to true if checkbox is checked -->
<input type="checkbox" ng-model="user.admin">
{{user.admin}}
</div>

Opção 2

<div>
<label>User Role</label>
<!-- the value is admin for object user.role when the checkbox is checked"-->
<input type="checkbox" ng-model="user.role" ng-true-value="admin" ng-false-value="user">
{{user.role}}
</div>

Na opção 1 quando checked o valor do bind para o nosso objeto será um boolean. Já na opção dois queremos gravar uma string.

Criando um radio input

Para criar um radio, é bem simples também, nada de especial o próprio explica tudo:

<label>
<input type="radio" ng-model="user.sex" value="M"> Masculino
</label>
<label>
<input type="radio" ng-model="user.sex" value="F">Feminino
</label>

Quando clicado o valor que passamos para o objeto é M ou F.

Criando um Simples SelectOne

Vamos ver como fazer um selectone com String:

<!-- Select input with String -->
<label>Sexo:
<select ng-model="sex">
<option value="M" ng-selected="sex=='M'">Masculino</option>
<option value="F" ng-selected="sex=='F'">Feminino</option>
</select>
Escolhida foi:{{sex}}
</label>

Observe que estamos passando string para o value o ng-selected sendo tratado como String. O resultado é conforme a seguir :

Agora se queremos que não seja uma string e objetos ou melhor uma lista ? Dai temos que usar o ng-options ao invés do ng-selected, vamos ver:

<!-- select input with object -->
<label>Country
<select ng-model="countrySelected" ng-options="country.name for country in countries">
</select>
{{countrySelected}}
</label>

O ng-options é bem simples, informamos qual atributo queremos exibir de cada item do array. No controller criei um array assim:

$scope.countries = [
{name:'Brazil'},
{name:'Australia'},
{name:'Canadá'}
]

Observe que o select fica vazio quando carregado, vamos colocar uma mensagem, então dentro de <select /> coloque:

<option value="">--No Selection--</option>

Mostrando validações de erros no form

Vamos dizer que queremos validar um campo, quando o usuário digitar. Podemos fazer isso facilmente. Antes disso é preciso entender apenas um conceito importante que temos no Angular que é o ngModelController.

O ngModelControler é responsável por gerenciar o data binding entre o valor passado com o model (ng-model). E assim ele faz o track com a view se é valido ou não, e se o input tem sido modificado. No exemplo a seguir vamos validar um campo e-mail, veja o código:

<form name="userInfoForm">
<!-- call my function and field will be validated-->
<div class="control-group" ng-class="getCssClasses(userInfoForm.email)">
<label>E-mail</label>
<!-- we must inform name for field -->
<input type="email" ng-model="user.email" name="email" required>
<!-- will be show only if the format is invalid-->
<span ng-show="showError(userInfoForm.email, 'email')">
E-mail format is inválid. 
</span>
<span ng-show="showError(userInfoForm.email,'required')">
E-mail is required
</span>
</div>
</form>

Observe que no ng-show passamos o campo e o tipo de validação. Agora no controller vamos criar a função que faz o tratamento :

//check if field passed is valid or invalid 
$scope.getCssClasses = function(ngModelController){
return{
error:ngModelController.$invalid && ngModelController.$dirty,
success:ngModelController.$valid && ngModelController.$dirty
};
};
$scope.showError = function(ngModelController,error){
return ngModelController.$error[error];
};

O resultado será conforme a seguir:

Informando que o campo é requerido. Agora vamos ver quando o formato do e-mail for inválido:

E quando for válido:

E para finalizar vamos aprender a reusuar componentes de formulário em outro, ou seja, composite. É bem simples.

Primeiro Passo é criar o formulario que será reutilizado usando ng-template assim:

<!--creating composite reusable components-->
<script type="text/ng-template" id="password-form">
<label>Password</label>
<input ng-model="user.password" type="password" required>
</script>

Passo 2

É criar o formulario normal e adicionar o composite:

<!--using composite -->
<form name="form1" novalidate>
<legend>User</legend>
<label>username</label>
<input ng-model="user.username" required>
<ng-include src="'password-form'"></ng-include>
</form>

Observe que apenas damos um nome para o nosso composite e no ng-include, chamamos ele.
O resultado:

Exemplo Live

http://plnkr.co/edit/fW44yi
E por hoje é isso, eu espero que tenham gostado das dicas do post.
Vou ficando por aqui.

See ya!!

Usando Yoeman com AngularJS

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

Ao terminar

Step 3

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

npm install -g generator-angular

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.

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

Série AngularJS: Criando blackList com angular-ui validate

Olá Pessoal,

O objetivo do post de hoje é mostrar um pouquinho do que temos no angular-ui. E para isso vou mostrar um recurso de ui-validate que permite validar se o valor recebido está em um Blacklist ou não.

Lets go…

Starting…

O angular-ui é uma suíte baseado no angularJS com vários componentes UI implementados. Tem coisas bem bacanas e é um projeto que é tão novo quanto o angularJS. Ainda acho o angular-ui um pouco bagunçado e tem poucas informações de como getstarted por exemplo para pegar o .js, não está em um local simples, tem bastante coisa separado. O ideal era oferecerem .js de maneira mais simples e fácil de achar no site.

O código é bem simples, apenas um input e o nome do usuário. Se ele digita alguma palavra que esteja no blacklist, o botão de submit não é habilitado.

Metendo a mão na massa

Vou considerar que você já vem acompanhando a série do angularJS e tem as configurações básicas. Não seria legal repetir toda configuração a cada novo post. Vou colocar apenas o código relacionado ao objetivo do post.

Step 1

Adicione o angular-ui.js ao projeto

Step 2

Como estou usando rotas e o ng-view tudo fica na index.html, então vou colocar para carregar o novo arquivo angular-ui.js lá. Veja como fica:

<script src="js/lib/angular-ui.js"></script>

Step 3

Crie um controller

var blacklistController= function($scope){

       //criando meu black list, um array.

       $scope.blacklist= ['satanas', 'biba'];

       //verifica se a palavra digitada corresponde ao que temos no blacklist

       $scope.notBlackListed = function(value){

             return $scope.blacklist.indexOf(value)===-1;

       }; 

};

Step 4

Agora vamos criar o arquivo HTML, que não tem nada de especial. Chamei ele de angularui.html

<form name="form">

<label> first name</label>

<input name="firstname" type="text" ng-model="user.firstname" required

ui-validate="{blacklisted:'notBlackListed($value)'}"/>

 <button ng-disabled="form.$invalid" class="btn">Submit</button>

</form>

Step 5

Como estou usando o recurso de rotas do angularJS, preciso atualizar para quando eu chamar a url /angularui ele deve carregar o controller. Basta adicionar a linha abaixo:

when("/angularui",{templateUrl:"angularui.html",controller:blacklistController}).

Testando

Vamos testar agora:

Observe que o botão de submit não ficou ativo.

Agora sim. Simples, não?

Claro que ao clicar nada acontece. O objetivo aqui não era dar funcionalidade real, mas mostrar como o ui-validate do angular-ui facilita nossa vida. Óbvio que as palavras do nosso blacklist deveriam ser recuperadas de uma base de dados através de um serviço REST, por exemplo.

Bom, vou ficando por aqui. Espero que tenham curtido um pouco do angular-ui e é claro que há muito mais coisas, basta acessar http://angular-ui.github.io e se divertir.

Abraços. See ya!!