domingo, 28 de setembro de 2014

Série Componentes - Bootstrap Confirm

Bootstrap Confirm

O Bootstrap Confirm é um componente para interface que permite gerar pop-ups de confirmação de forma simples, rápida e elegante. Ele transforma um link em um botão de confirmação apresentando botões de confirmação e cancelamento. O botão de cancelamento, cancela a requisição e fecha a janela, o botão de confirmação redireciona o usuário para o endereço do link.

O autor é o EThaiZone e o componente pode ser baixado no link abaixo:
http://ethaizone.github.io/Bootstrap-Confirmation/

Esse componente possui toda a documentação e exemplos no site, porém ele só funciona no Bootstrap 2, foi feito um fork do projeto pelo Tavicu para funcionar no Bootstrap 3. O procedimento é o mesmo, só o script do bootstrap confirmation deve ser baixado do link abaixo:
https://github.com/Tavicu/bootstrap-confirmation/

Veja na imagem abaixo como são apresentadas as mensagens de confirmação:
Podemos ver a pop-up de confirmação sendo exibida de diversas formas

Seu uso é bastante simples e precisamos somente incluir a referência do script "bootstrap-confirmation.js" depois dos scripts do Jquery e Bootstrap. Depois disso, basta decorar os links onde quisermos incluir a confirmação e chamar um javascript para carregar as janelas.

Exemplo:

Vamos ver de exemplo o botão excluir de uma tela de projetos, veja os elementos:

Botão

<a href="/Projeto/Delete/1" class="btn btn-outline btn-danger" title="Deseja realmente excluir o projeto?" data-toggle="confirmation" data-singleton="true" data-popout="true"><i class="fa fa-trash-o fa-fw" title="Excluir o projeto"></i></a>

Os campos em negrito são as configurações para o componente. Esse botão será exibido somente como um ícone e quando clicado vai exibir a janela de confirmação.

Botões na tela

Tela de confirmação

Atenção: O title do link será usado para o texto da confirmação, caso queira continuar a exibir um hint no botão antes dele ser clicado como aparece na imagem é necessário usar o title de algum elemento dentro do botão, no exemplo acima incluímos o title dentro da imagem do ícone.

Script

$('[data-toggle="confirmation"]').confirmation({ btnOkLabel: "&nbsp;Sim", btnCancelLabel: "&nbsp;Não" });

Atenção: O texto dos botões por padrão é "Yes" e "No", só por script funciona a alteração do texto dos botões. Isso é importante pois se alterarmos direto o script teremos dificuldade em aplicar globalização nos controles, com isso podemos trocar a linguagem dos botões sem preocupações.

Mãos a obra

Veja no fiddle como fica na vera esse componente e teste as opções do componente.

Conclusão

Esse é um componente bastante legal e fácil de ser usado. Esse é visualmente agradável e bastante intuitivo. Também se ajusta a qualquer template do bootstrap que esteja usando. Vale a pena ver e conhecer.

Agradeço a atenção e espero que tenham se divertido.

Atenciosamente,
Erick Ferreira Marques da Silva

domingo, 21 de setembro de 2014

Integrando indicadores do Sonar com o Total Quality

Total Quality

O Total Quality é um componente para o Sonar que gera um indicador de qualidade para o sistema, como comentei em nossa página de Qualidade de Software, ele gera uma nota única que representa a média de diversos indicadores para o sistema. Essa nota é configurável por uma formula que leva em conta 4 indicadores de qualidade:

  • Architecture: esse indicador de arquitetura não sei se é usado para aplicações .NET, pois nunca vi descer de 100%, em aplicações Java ele considera níveis de acoplamento e complexidade ciclomática acumulada.
  • Design: também não varia muito, dificilmente está em 100%, mas sei que ele leva em consideração algumas violações de código que são classificadas como de Design.
  • Test: diretamente ligado a cobertura de código com testes unitários e automatizados.
  • Code: diretamente ligado a violações, duplicidade e comentários.

Através dele podemos rankear os sistemas com base nesse indicador de qualidade e através de ferramentas como o Sonar Snitch podemos monitorar constantemente as alterações no indicador.

Para instalar o plugin acesse o link abaixo e faça o download da versão mais atual.

http://docs.codehaus.org/display/SONAR/Total+Quality+Plugin

Depois de fazer o download do arquivo sonar-total-quality-plugin-1.1.jar vamos copiar ele para a pasta extensions/plugins do sonar conforme imagem abaixo:
Total Quality na pasta de plugins do Sonar

Pronto, o Total Quality já está configurado no Sonar, agora basta iniciar o servidor e a cada nova inspeção realizada esse indicador será calculado e armazenado. Importante, caso seu servidor já esteja ativo, será necessário reiniciar o Sonar para que esse plugin seja iniciado.
Iniciando o Servidor do Sonar

Importantes observações

O Sonar só vai calcular os indicadores para o Total Quality nas próximas inspeções de código, ele não vai gerar dados retroativos.

Tela de detalhes do projeto antes da configuração

É preciso configurar o painel do Sonar para exibir o indicador de Total Quality, para isso basta se logar como administrador no sonar, caso ainda não tenha mudado, login e senha são "admin", acesse a tela de detalhes do projeto, como vimos no post de configuração do Sonar e clique no botão "Configure Widgets".

Tela de detalhes do projeto durante configuração

No campo Search digite Total e no componente Total Quality que aparece na tela basta clicar no botão "Add Widget", com isso será exibido um novo painel com o indicador Total Quality mais os 4 indicadores de qualidade que comentei no início do post. Todos os blocos podem ser movidos (arrastando e soltando), configurados (link"Edit") ou excluídos (link "Delete") nessa tela. 

Detalhes do projeto após a configuração.

Atenção, só administradores tem acesso a ela e depois de configurada, todos os sistema serão exibidos da mesma forma.

Por último, o Sonar Snitch já está configurado para esse plugin.tanto na visão resumida quanto na visão detalhada.
Sonar Snitch - Visão Resumida

Sonar Snitch - Visão Detalhada - Parte 1

Sonar Snitch - Visão Detalhada - Parte 2


Desde já agradeço a atenção de todos e espero que tenham se divertido configurando o Sonar. Aguardem por novidades em breve. Um grande abraço a todos.

Atenciosamente,
Erick Ferreira Marques da Silva

sábado, 20 de setembro de 2014

Meus primeiros passos com o Sonar

Configurando o Sonar e inspecionando um sistema

Nesse post vamos aprender a configurar o Sonar na sua máquina e disparar a inspeção para uma aplicação .NET de exemplo. Escrevi esse tutorial em 5 passos para permitir que o Sonar funcione como um serviço que não precisa de nenhuma permissão administrativa. Significa que todo esse procedimento poderá ser executado mesmo no seu local de trabalho. Agradeço a atenção e espero que se divirtam muito, nos próximos postos vou mostrar como incluir novos componentes no Sonar, como disparar e registrar os testes automatizados, e mais sobre o Sonar Snitch.

Um grande abraço a todos, e boa leitura.

1º Passo – Fazer os downloads iniciais

Baixar o Sonar - Versão 3.7
Baixar o Sonar Runner 2.4
Ambos no endereço abaixo:

Baixar alguma versão do Java, 6 ou superior.

Recomento utilizar uma estrutura de diretórios que unifique todos os downloads, isso vai ajudar na implantação da sua configuração em outras máquinas.

Por exemplo:
\\NOTE\Users\Erick\Desktop\Sonar
\\NOTE\Users\Erick\Desktop\Sonar\jre7
\\NOTE\Users\Erick\Desktop\Sonar\sonar-3.7.4
\\NOTE\Users\Erick\Desktop\Sonar\sonar-runner-2.4

Baixar o Plugin C# e copiar o arquivo .jar para a pasta de plugins do sonar.
.\sonar-3.7.4\extensions\plugins\sonar-csharp-plugin-3.2.1.jar

Baixar nossa aplicação de exemplo Sonar Snitch

O Sonar Snitch é uma aplicação que fiz que permite consultar as diferenças nos indicadores do Sonar em um intervalo de tempo qualquer. Vou comentar em outros posts sobre ela e como tirar melhor proveito dela para acompanhamento periódico.

No link acima clique em download para baixar todo o código fonte do projeto em um arquivo zip. Já estão versionados todos os arquivos de configuração para que a aplicação seja inspecionada no Sonar.

2º Passo – Configuração do Sonar (servidor)

O arquivo .\sonar-3.7.4\conf\sonar.properties

O arquivo sonar.properties contém as configurações somente desta instância do servidor do Sonar. É importante lembrar disso pois quando configurarmos o Sonar Runner vamos repetir algumas das configurações.

A principal configuração que temos que fazer aqui é o banco. Basta apontar para uma estrutura e o Sonar vai fazer o restante, vai criar toda a estrutura se for um banco novo, vai atualizar a estrutura, se necessário, caso seja uma atualização de versão.

É importante que na primeira utilização o banco esteja configurado com um usuário que tenha acesso para DDL, caso uma organização queira após sua configuração inicial, pode ser alterado para um usuário com acesso DML somente para evitar atualizações não esperadas.

Bom, vamos começar a configurar nosso servidor. Para isso vamos precisar decidir onde o banco será criado. O Sonar oferece suporte a uma bela gama de servidores, como Oracle, SQL Server, My SQL, PostgreSQL e o menos recomendado e que vem embutido nele para apresentações H2. Vamos seguir com o H2 nessa apresentação, pois já vem embutido e pode ser duplicado em qualquer lugar. Mas se pensa em usar o Sonar em qualquer lugar além de sua própria máquina esse banco não vai servir, porque não permite acesso remoto. Consulte nossa seção de configuração de bancos (em construção).

Procure no arquivo a configuração de credenciais e configure o usuário e senha. O exemplo está 
configurado para a configuração básica do H2.

#----- Credentials
# The schema must be created first.
sonar.jdbc.username: sonar
sonar.jdbc.password: sonar

Depois procure no arquivo a configuração para o banco H2 e descomente sua configuração padrão.
#----- Embedded database H2
# Comment the following line to deactivate the default embedded database.
sonar.jdbc.url: jdbc:h2:tcp://localhost:9092/sonar

Parabéns. Você configurou seu primeiro servidor Sonar pronto para ser executado em sua máquina. 

Vamos testar?
Abra a pasta .\sonar-3.7.4\bin\windows-x86-32 e execute o arquivo StartSonar.bat

Será iniciado um arquivo aplicativo Console que vai levantar o Sonar na porta 9000.
Console do Sonar monitorando a porta 9000

Com isso podemos usar qualquer navegador para acessar.
Dashboard web do Sonar

3º Passo – Configuração do Sonar Runner

O Sonar Runner é o aplicativo que vai executar todos os processos de qualidade que você configurar e vai guardar o resultado no banco, apesar dele ter uma integração com o servidor web, ele não reaproveita suas configurações. 

Com isso vamos precisar configurar novamente o banco de dados, além de novas configurações como:
  • Local onde está o servidor do Sonar, mesmo que seja localhost
  • Todas as ferramentas externas necessárias para executar processos como:
    • FxCop
    • Gallio
  • Configurações padrões para os arquivos de projetos, tudo que for comum pode ficar aqui para não precisar ser replicado a cada sistema.

O arquivo .\sonar-runner-2.4\conf\sonar-runner.properties

Configurando o caminho do servidor do Sonar.
#----- Default SonarQube server
sonar.host.url=http://localhost:9000

Configurando o banco de dados, caso o H2 não esteja comentado, copie o texto abaixo.
#----- H2
sonar.jdbc.url=jdbc:h2:tcp://localhost:9092/sonar

Configurando o login e senha para o banco de dados.
#----- Global database settings
sonar.jdbc.username=sonar
sonar.jdbc.password=sonar

Opcional: já deixe configurado o encoding para UTF-8 aqui, para não precisar configurar esse item a cada projeto. Esse item é importante para evitar erros de caracteres especiais no código fonte registrado pelo sonar durante a inspeção no código.
#----- Default source code encoding
sonar.sourceEncoding=UTF-8 

4º Passo Configurando um disparador do sonar em arquivo .bat

É necessário executar o sonar-runner.bat para iniciar todo o processo de inspeção de um projeto. Porém esse arquivo precisa de algumas configurações em variáveis de ambiente definidas antes de ser executado.

Vamos então criar um arquivo bat que vai configurar nosso ambiente. E o melhor podemos configurar boa parte dos recursos direto em pastas de rede, isso é uma grande vantagem, pois depois que está configurado o ambiente ele vai funcionar de qualquer máquina ou processo, que tenha acesso à pasta de rede selecionada. Podendo até ser disparado em ambientes de integração contínua como o Microsoft TFS ou Hudson.

Vamos chamar esse arquivo de sonar.bat e definir as algumas variáveis de ambiente apontando para as pastas que configuramos. Veja o exemplo do arquivo abaixo:

SET JAVA_HOME=\\NOTE\Users\Erick\Desktop\Sonar\jre7
SET SONAR_RUNNER_HOME=\\NOTE\Users\Erick\Desktop\Sonar\sonar-runner-2.4
SET SONAR_RUNNER_OPTS=-Xmx512m -XX:MaxPermSize=128m
set path=%path%;\\NOTE\Users\Erick\Desktop\Sonar\sonar-runner-2.4\bin
sonar-runner.bat -X

5º e último passo, Configurando o cliente que será inspecionado

Vamos criar um arquivo de projeto que será inspecionado chamado “sonar-project.properties”. Esse nome é obrigatório e não deve ser alterado. Ele contém as informações do seu projeto que será cadastrado ou alterado no Sonar.

Criar um arquivo de texto novo com nome “sonar-project.properties” no mesmo diretório do arquivo solução da aplicação. No exemplo abaixo vamos ver a aplicação Sonar Snitch, que é uma ferramenta que consulta indicadores do Sonar, vamos conhecer a fundo essa ferramenta posterioremente, Veja os dados do arquivo abaixo:

# Required metadata
sonar.projectKey=my:SonarSnitch
sonar.projectName=Sonar Snitch
sonar.projectVersion=1.0

 # Path to the parent source code directory.
sonar.sources=.
sonar.language=cs

Depois de criar seu arquivo sonar-project.properties, vamos copiar o arquivo sonar.bat também para o diretório do arquivo solução.

A estrutura de arquivos para sua aplicação ficará semelhante a imagem abaixo:

Arquivos de inspeção junto do arquivo solução

Agora basta executar o arquivo sonar.bat e deixar a magia acontecer...

Iniciando a execução do console

Fim da execução do console

Ao final do processo a janela será encerrada e seu projeto será incluído automaticamente no Sonar.
Sistema registrado no Dashboard do Sonar

Visão geral de métricas do Sistema no Sonar

Por questões de direitos autorias e tamanhos de arquivos, não vou colocar todos os downloads juntos, Mas também para facilitar nossa configuração deixei todos os arquivos de configuração dentro de um arquivo zip. Clique aqui para fazer o download. Espero que isso facilite seu aprendizado.

Obrigado pela atenção,
Erick Ferreira Maruqes da Silva

segunda-feira, 15 de setembro de 2014

Sejam bem vindos ao Blog do Silva

Mensagem de boas vindas e boas intenções

Esta minha mensagem de boas vindas a todos os interessados em aprender ou trocar uma ideia sobre desenvolvimento de software. Pretendo utilizar esse blog para apresentar minhas experiências e opiniões sobre Qualidade de Software e Desenvolvimento Ágil.

Já trabalhei com desenvolvimento web desde 1999, desenvolvimento ágil desde 2004, com .NET, onde passei tanto por XP (Extreme Programming) e MSF (Microsoft Solution Framework, alguém se lembra desse ?). Depois entrei na Petrobras em 2006, como Programador, e acabou desenvolvimento ágil para mim, realmente senti falta disso, pelo menos consegui continuar programando e com .NET, não precisei me converter para o lado Java negro da força.

Mas os tempos mudam e desde 2011 temos trabalhado com Desenvolvimento Ágil novamente, dessa vez com Scrum e Kanbam. Estou feliz com isso e daqui para a frente vamos conversar um pouco sobre Desenvolvimento Ágil e Qualidade de Software, com textos narrativos fictícios. Que é onde queremos chegar.

Como acontece em qualquer empresa, desenvolvimento ágil é uma maravilha, basta implantar e automaticamente temos: entregas constantes e planejadas, o cliente por perto e participativo, um bom planejamento de curto e médio prazo, um time eficiente, eficaz e autossuficiente, e o mais importante, um código elegante, eficiente, otimizado e testado.... NOT.

Basta estabelecer um processo, escrever um procedimento e publicar em algum portal da empresa, pronto, basta agora colocar alguns fiscais por aqui e ali e começar a cobrar ou punir quem não seguir as ordens orientações... NOT.

Essa é a teoria, e todo mundo sabe. Na teoria a teoria é igual a prática, mas na prática... veja bem, não é bem assim...

Perdoe me o autor da frase, mas eu a adoro e não me canso de repetir: Cultura come processos no café da manhã.

Prazos curtos, ou emergências do cliente, não respeitam os prazos das sprints. Cliente? mal aparece nas reuniões, não conhece seu próprio negócio, e gasta todo o tempo do projeto querendo mudar cores de listagens. O time é composto quase sempre de juniores, pessoas que estão estudando programação a pouco tempo e acham que sabem fazer qualquer coisa... e o pior é que muitas vezes fazem mesmo.

A mentalidade é "Entregar a qualquer custo, mesmo que não funcione". A frase é "Eu testei sim, e funcionou na minha máquina".

Falar em Qualidade de Software é um assunto vital para a sobrevivência do desenvolvimento ágil. O custo de manutenção de um software é quase sempre maior que o custo de construção do mesmo, e quando o assunto é dinheiro, as empresas sempre olham com bons olhos. Investir em código com qualidade melhora significativamente as manutenções realizadas no software, da um ânimo para o time que fica encorajado a mudar e refatorar.

O que pretendo apresentar nos próximos artigos é como integrar processos de Qualidade de Software a cultura de um time ágil para gerar código com qualidade, que possa ser medido e acompanhado ao longo de todo o tempo de vida da aplicação.

Primeiro vamos precisar de infra-estrutura, e para isso vamos conhecer o Sonar, que é um servidor gratuito de inspeção contínua, ele pode realizar diversas análises de código fonte, testes unitários, duplicação de código, comentários nos métodos, é extensível por diversos plugins, tem apis para construção dos seus próprios controles e oferece suporte a diversas linguagens de programação.

Depois vamos ver como integrar nossas aplicações nele e através de procedimentos e uso de técnicas como gamification, podemos incentivar a melhoria constante do código nos sistemas. Com tempo, incentivo e feedback constantes podemos transformar procedimentos da organização na cultura do time. E com isso sim, ganhamos nosso dia, algum dia.

Desde já agradeço a atenção e paciência, e aguardem novidades.

Atenciosamente,
Erick Ferreira Marques da Silva