Gabriel Feitosa Developer Marido, pai da cadelinha Bellinha, peladeiro e programador

Quebrando o build no Jenkins quando o SonarQube reclama

Fala galera, beleza?

No post de hoje mostrarei como integrar as ferramentas Jenkins e SonarQube para melhorarexigir qualidade no código que produzimos. Com a integração, podemos quebrar o build no Jenkins quando o Sonar recusar a qualidade do código analisado. Assim, evitamos códigos fora do padrão e garantimos que o mínimo está sendo feito para assegurar o padrão definido para o projeto.

Partirei do princípio que você conhece ambas as ferramentas. Neste post, estou usando as versão 6.5 do Sonar e 2.60.3 do Jenkins. Não vou mostrar como instalar, mas, no final do post, deixarei o conteúdo do arquivo docker-compose usado. Iniciarei as ferramentas com as configurações default.

Hangout migrando do JSF para AngularJS

Fala galera,

sabemos que migrações de aplicações são bem complicadas de serem realizadas, principalmente quando é necessário mudar o paradigma de desenvolvimento. Pensando nisto, no último dia 20 de junho participei de um hangout, com o DFJUG, onde abordamos como migrar de uma aplicação desenvolvida em JSF para AngularJS.

Para quem não conhece, o Java Server Faces é uma especificação Java baseada em componentes para a construção de aplicações web. Portanto, realizar uma migração de um sistema desenvolvido nesta tecnologia para AngularJS não é nem um pouco trivial. Há uma mudança de paradigma muito grande que você pode ver no hangout abaixo. 😉

Criando a imagem docker com o maven

No post anterior, Como rodar uma aplicação Java com o Docker, falei um pouco sobre o uso de containers para subir uma aplicação desenvolvida com o framework Spring Boot. Agora que sabemos como criar uma imagem por meio da linha de comando, veremos como fazer isso pelo processo de build do Maven. Para isso, vamos usar o plugin docker-maven-plugin desenvolvido pela galera do Spotify.

Como rodar uma aplicação java com o docker

Fala galera, beleza?

Depois de um longo tempo  me dedicando a outros projetos, estou me reorganizando com o intuito de voltar a escrever para o blog.

Começarei contando uma historinha… Sabe aquela velha frase “Na minha máquina esta aplicação roda”? Pois é, quem nunca passou por isso? Cansei das vezes em que precisei analisar o porquê de um sistema não subir em outro ambiente e, no final, o problema era uma simples configuração.

No post de hoje, vamos aprender a rodar uma aplicação Java em um container Docker. Para isso, vou utilizar a app desenvolvida no post sobre Integração contínua com Travis e Heroku.

Se você ainda não sabe o que é o Docker, dá uma espiada no post O que é o docker?.

AngularJS: Componentizando os componentes

Fala galera, beleza?

Você aí que às vezes sofre quando o usuário decide mudar o css de um componente no sistema, por exemplo o ícone do botão salvar, esse post é para você!

Cansei de contar as vezes que precisei entrar em VÁRIAS telas do sistema e mudar como a tag do html ia ser renderizada ou alterar o seu comportamento padrão.  Alguns devs tem uma velha desculpa: Ah Gabriel, mas tem a IDE para fazer isso por nós, o trabalho é mínimo!… Eu como um bom preguiçoso, não gosto é de ter trabalho algum.

Então, é aqui que entra  as diretivas do AngularJS (já bloguei um pouco sobre elas aqui). As diretivas poderão facilitar nossa vida (e muito!) quando se trata de padronizar o nosso sistema. Não seria legal mudar em um único lugar e ter a certeza que todo o sistema sofreu a alteração!?

Integração contínua com Travis e Heroku

Fala galera, beleza?

Você ainda roda, de forma manual, bons e velhos scripts para por sua aplicação em produção? É chato ter que alterar os arquivos de configuração toda vez que precisa modificar o ambiente? Que tal descomplicar e deixar tudo isso automatizado de verdade? Tá parecendo venda de produto pirata né? Hehehe… Mas é só um post sobre integração contínua!

Vamos falar um pouco sobre como fazer integração contínua por meio do Travis-CI e realizando o deploy no Heroku. Como exemplo, vamos utilizar um sisteminha de Tarefas feito com Spring Boot e a camada de visão com AngularJS. Em um futuro não muito distante, falarei um pouco sobre as maravilhas do Spring Boot, mas, hoje, vamos focar nessa danada de integração contínua.

AngularJS: Diretiva para controle de acesso

Fala galera!

Semana passada, recebi um e-mail perguntando se eu tinha algum exemplo, com AngularJS, para controlar as permissões de acesso do usuário aos botões da aplicação. Pensei: porquê não juntar a fome com a vontade de comer e blogar a respeito? Então vamos nessa!

localtunnel: Disponibilizando acesso a uma aplicação local

E aí galera, beleza?

Se você, assim como eu (sem gracinhas, viu?), já passou por perrengues para disponibilizar uma aplicação local na web, este post pode ser muito útil.

Antigamente, para acessar uma aplicação rodando na minha própria máquina, a primeira configuração que fazia era cutucar o roteador ou o modem da velox (vixxxxx!!!) e tentar liberar as portas para a máquina.

Naquele tempo, eu não sabia nem o que era configuração de portas, a sorte eram os buscadores do Yahoo, Altavista, Cadê? e depois o Google (tem gente que não vai nem saber o que é Altavista e Cadê?).

Também Já quebrei muito a cabeça com o no-ip para tentar acessar meus “códigos” da faculdade (não dá para chamar de aplicação, porque o desenvolvimento era orientado à gambiarra).

Pois bem, os seus e os meus problemas acabaram! Há alguns anos tenho utilizado com bastante facilidade módulos que me auxiliam nessa questão e hoje quero compartilhar com vocês o localtunnel.

O localtunnel é uma app bem simples de ser utilizada. Não é necessário configurar “nada” no seu firewall e nem no DNS. Acreditem, não é mágica! =)

AngularJS: Diferenças entre $apply, $timeout, $evalAsync e $digest

Fala galera, beleza?

Após alguns meses sem nenhuma novidade por aqui, estou tentando retornar a rotina de publicações… A ausência foi por um bom motivo: estive desenvolvendo, e ainda estou, um projeto social chamado Doe Caridade. Mas em breve eu volto a falar sobre ele, pois pretendo abrir o código fonte.

O post de hoje é sobre as diferenças entre o $apply, $timeout, $evalasync e $digest. Para entendermos um pouco mais como o AngularJS funciona é importante conhecê-las e saber como e quando usá-las.

AngularJS: Validação de formulário

Fala galera!

O post de hoje vai ser bem simples e direto: validar formulário com o AngularJS. Vamos ver passo a passo como é fácil e como esse framework é potente também na validação? Simbora…

O código abaixo será a base do formulário das validações. Como podemos ver, ele é apenas um simples formulário para validar um saque em um caixa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>Blog do Gabriel Feitosa</title>
  </head>
  <body>
    <h1>AngularJS: Validação de Formulário</h1>
    <div ng-controller="CaixaController as vm">
      <form name="form" novalidate ng-submit="vm.sacar()">
        <table>
          <tr>
            <td>Quanto vai sacar?</td>
            <td> <input type="number" name="valor" ng-model="vm.valor" required> </td>
          </tr>
          <tr>
            <td> Senha: </td>
            <td> <input type="password" name="senha" ng-model="vm.senha" required> </td>
          </tr>
        </table>
        <br>
        <button type="submit">Sacar</button>
      </form>
    </div>
    <footer>
      <hr/><a href="http://www.gabrielfeitosa.com"> Blog do Gabriel Feitosa</a>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Algumas considerações relevantes do nosso formulário:

Socket.io e AngularJS: Comunicação em tempo real

Fala galera, beleza?

No último post falei um pouco sobre refresh periódico com o AngularJS, quem ainda não leu ta perdendo, viu!? Corre e ler… =)

Após esse post, algumas pessoas falaram da questão do porquê não usei websocket!

“Pô Gabriel, websocket é muito melhor para um chat, não?”

Sim, concordo. Mas a intenção do post anterior era somente falar sobre refresh periódico. Assim, como vocês que mandam aqui mesmo, vamos falar um pouco sobre comunicação bidirecional? Oxe, e não é sobre websocket? Calma meu fi, leia o resto. =)

Já ouviu falar sobre o socket.io? É por causa dele que mencionei a comunicação bidirecional e não o websocket!

AngularJS: Aplicação em tempo real – Refresh periódico

Fala galera, beleza?

Depois de um mês atípico (muito trabalho e organizando casamento) e um começo de mês com ombro deslocado, estou de volta para delírio de vocês heheheh (menos né?!).

Hoje vou falar sobre aplicações em tempo real utilizando o padrão ajax de atualização periódica (periodic refresh) e como o AngularJS pode nos ajudar a implementá-lo. Deixa eu te fazer uma pergunta, você gostaria de ficar apertando F5 para verificar se há uma nova notificação no Facebook? Ou se chegou aquele e-mail que você tanto esperava no Gmail? Eu acho que não, né?

A fim de tornar a experiência do usuário a mais agradável possível, muitas aplicações utilizam dados em tempo real (ou quase) e até criam uma certa dependência dessa tecnologia, pois sem ela jamais teriam se popularizado.

Bower: Gerenciamento de pacotes no front-end

Fala galera, beleza?

Hoje vamos falar sobre gerenciamento de pacotes com o Bower. Uma das coisas que mais me irritou quando comecei a desenvolver front-end, usando somente módulos javascript, foi justamente o gerenciamento das dependências desses módulos. Como eu tenho raízes no Java, já estava acostumado a ter o Maven ou o Gradle gerenciando toda essa parafernália de libs para mim. Depois de muito trabalho manual, acessando sites e baixando os javascripts (ou pegando somente a referência) conheci finalmente o Bower.

Vale ressaltar que o Bower não é somente um gerenciador de módulos javascript, é também um gerenciador de dependências para front-end. Mas qual a diferença? A diferença é que para ele não interessa se tem javascript, css, html, imagem etc. dentro de um pacote, o que importa é que o código está encapsulado, normalmente acessível ao público e hospedado em um repositório git.

AngularJS: Filtros

Fala galera, beleza?

Já precisou formatar algum dado para exibir para o usuário? Pensou em fazer o tratamento lá no backend ou criar uma função javascript para fazer o parse e exibir? Então, neste post vamos ver como o AngularJS trata essa questão com os filters.

AngularJS: Rotas (ngRoute)

E aí galera, beleza?

Hoje falaremos um pouco sobre as rotas (ngRoute) do AngularJS. Nos posts anteriores falamos sobre controladores e serviços, se você ainda não está familiarizado com o framework recomendo a leitura.

AngularJS: Services

E aí pessoal, beleza?

No post anterior falamos sobre os controladores e boas práticas na sua utilização. Hoje vamos abordar um pouco sobre os services.

Services - O que são? Para que servem?

Service é o objeto usado para organizar e/ou compartilhar estados de objetos e as regras de negócio da aplicação. Ele é singleton, ou seja, há apenas uma instância disponível durante a vida útil da aplicação. Outra característica importante é a inicialização tardia (lazily instantiated), que só é efetuada quando o AngularJS identifica que tem algum componente dependente.

Opa, espera aí! O controller não é o lugar de controle da view? Logo, não é nele que eu tenho que ter as regras de negócio? Sim, o controller de fato controla a camada de visão, porém, não é ele que armazena as regras que são compartilhadas na aplicação. O controller gerencia apenas as regras referentes a view a qual está associado.  Vou enumerar porquê as regras devem ir para um service:

AngularJS: Controladores (Controllers)

Olá pessoal, beleza?

No post anterior, Introdução ao AngularJS, fizemos uma explanação sobre algumas características importantes do AngularJS. Hoje vamos falar sobre os controladores e as boas práticas que podem ser adotadas em sua utilização.

Entendendo os Controladores

Os Controladores (Controllers), como o próprio nome diz, são responsáveis pelo controle da aplicação. É neles que gerenciamos o fluxo de dados apresentados na view. Quando um controlador é anexado ao DOM, via ng-controller, um novo objeto do controlador será instanciado, de acordo com a especificação do construtor. Na sequência, um novo escopo ($scope) filho será criado e disponibilizado como um parâmetro injetável no construtor do controlador.

EJB: TransactionAttribute invocando métodos no mesmo EJB

E aí pessoal, beleza?

Muito se fala da utilidade de usarmos a anotação @TransactionAttribute, mas pouco se comenta sobre os problemas que podemos encontrar no seu uso e como resolvê-los. Há pouco tempo me deparei com um desses problemas, invocar um método anotado com TransactionAttribute através de outro do mesmo EJB.

[NOTA] Se você não está familizarizado com transações e @TransactionAttribute, recomendo a leitura deste tutorial oficial, ele auxilia no entendimento do conceito do que é e de como funcionam os diferentes tipos de transações. Tem outros artigos bacanas que podem ser vistos aqui, aqui e/ou aqui.

AngularJS: Introdução

E aí pessoal, beleza?

Vamos falar um pouco sobre AngularJS?

Para quem não conhece ele é um framework JavaScript, com base no modelo de arquitetura Model View Whatever (MVW). Nasceu dentro do Google em meados de 2009, mais precisamente pelas mãos de Misko Hevery, ta aí o twitter dele @mhevery.

Quando comecei a estudá-lo, uma das features que me chamou bastante a atenção foi o Two-way Data BindingMas o que é esse tal de Two-way Data Binding? Ele é quem faz boa parte da mágica, já que é o responsável pela sincronização dos dados entre os controladores (Model) e os componentes de visão (View).

Bem Vindos

Galera, bem vindos ao meu espaço!

Aqui pretendo trazer temas relacionados a assuntos que gosto, como boas práticas para um código limpo, arquitetura, padrões de projetos, novas tecnologias e outros assuntos relacionados a TI.

Sou novo no universo dos blogs, mas espero que consiga debater bons assuntos!

Abraços e até a próxima.