Criando extensões para o Google Chrome

Extensões são pequenos programas que permitem a você adicionar funcionalidades para o navegador, no nosso caso, o Google Chrome, usando tecnologias WEB, tais como: JavaScript, HTML e CSS.

A partir de um arquivo de manifesto, você diz ao navegador quais recursos você vai utilizar, e através de um arquivo JavaScript, você executa as tarefas desejadas.

Um recurso super legal em extensões, é que você consegue otimizar muitas tarefas. Um exemplo: Eu uso o One Click Note para me ajudar no controle diário das minhas tarefas. Uso também uma extensão que eu desenvolvi que abri um popup com os meus aplicativos. Resumindo, ao abrir o navegador, a extensão carrega uma lista de todos os meus apps no chrome, sem precisar ir para a pagina dos apps. Também faço o mesmo com meus e-mails e notificações do Github. Enfim, elas são muito úteis.

Hoje nós vamos criar uma extensão para o Google Chrome que abre um popup com uma calculadora. Algo bem simples. A idéia deste artigo é explicar como criar uma extensão, depois você pode criar extensões mais funcionais.

####Preparações: Para organizar os arquivos da nossa extensão, vamos criar uma pasta chamada: calculadora, e copiar os arquivos que esta no github e faça download.

#####agora vou esplicar um arquivo muito importante…

O Manifesto: Qualquer extensão deve conter em seu diretório raiz um arquivo chamado manifest.json, que é responsável por declarar algumas informações referentes a extensão. Um manifesto declara: o nome da extensão, a versão, as permissões que ela precisa, dentre outras configurações. Um arquivo de manifesto nada mais é do que um arquivo no formato JSON com algumas propriedades pré-definidas. Você pode encontrar todas as propriedades aceitáveis pelo arquivo manifest.json, no site do Google Chrome Developer. Nosso arquivo manifest.json ficará assim:

{
  "name": "Calculadora",
  "description": "Calculadora exemplo para chrome",
  "version": "0.0.1",
  "permissions": ["management"],
  "browser_action": {
    "default_icon": "browser_action_icon.png",
    "default_title": "Calculadora",
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icon.png"
  },
  "manifest_version": 2
}

Explicando:

name: Define o nome da extensão. Esse nome será utilizado para apresentar a extensão.

description: Uma breve descrição sobre o que faz a extensão. Seja simples e direto, pois, uma descrição não pode conter mais que 128 caracteres.

version: Qual é a versão da sua extensão? Quando falamos em versonamento, devemos seguir uma convensão. Mas isso é assunto para um outro artigo.

manifest_version: Informa qual é a versão do manifesto que estamos usando. Nós usaremos a version 2 do manifesto, pois, a versão 1 está defazada.

####Testando nossa extensão: Para testar nossa extensão, acesse a URL: chrome://extensions/, marque a opção: modo desenvolvedor; clique em: Carregar extensão expandida e, selecione a pasta calculadora. Após fazer isso, você verá que a sua extensão foi carregada e instalada, sendo assim, você pode acessar o plugin que aparecera no lado da barra de url. Pronto Uma Calculadora aparecera em forma de popup

Phonegap Removendo delay de toque

Desenvolver apps Híbridas sem a ajuda de um framework que tenham, todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo do Guia dos mochileiro das galáxias, apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto depois usando o FastClick.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

 ```javascript
    <script type='application/javascript' src='/path/to/fastclick.js'></script>
 ```

E em seguida inclua essa linha abaixo:

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

O que é Test Driven Development?

TDD significa Test-Driven development ou seja, é o desenvolvimento guiado por testes. Basicamente isso significa escrever um caso de teste antes de programar a real implementação. Parece estranho mas é isso mesmo, criar primeiro o teste antes de começar o desenvolvimento.

É muito comum achar que novas ideias são viagens, ou então que são muito bonitas na teoria, porém difíceis de aplicar na prática, e coisas do gênero. Por isso, antes de falar qualquer coisa sobre TDD, pense primeiro nas vantagem pois sabemos que as desvantagem acabam pesando mais na hora de decidir se utilizamos ou não tal método.

TDD nos auxilia a entregar Software com menos defeitos, porém existem outras características importantes em relação à qualidade de código, tais como: acoplamento, coesão, escalabidade, entre outras.
Então vamos pensar que as vezes devemos criar todos os problemas que a aplicação poderá saber e depois com a programação ir contornando eles.
Não é genial!?

Para ser mais sucinto, nossa missão é entregar código robusto e com alta qualidade. Então, sem mais delongas, vamos ver a seguir o porquê do TDD pode ser bastante útil.

Uma coisa importante do TDD é nunca escrever um código de produção até que exista um caso de teste falhando para ele.
Isso significa que enquanto todos os testes estiverem passando, não se deve criar ou mexer em nada do sistema. Se alguma alteração no sistema for exigida por exemplo, primeiro devemos criar um teste para provar que essa alteração não está implementada ainda e rodar todos os testes para garantir que o sistema está perfeito até o momento. Com isso teremos um teste falhando e devemos utilizar o mínimo de esforço para fazer esse teste passar e em seguida refatoramos nosso código para remover redundâncias.

O ciclo de desenvolvimento do TDD:

1. Criar um teste e ver ele falhar;
2. Escrever código simples suficiente para o teste passar;
3. Refatorar para remover duplicidade;

Devemos repetir esse ciclo sempre que for escrever algum código de produção. Também é importante rodar todos os testes do sistema para garantir que o código que estamos escrevendo não impactou em nada, por isso a necessidade de testes unitários que rodem rápido para que não desmotive o desenvolvedor a trabalhar usando esse ciclo.

Também é importante manter os testes limpos e legíveis de forma que facilite a leitura quando outros desenvolvedores olharem.

Utilizando o TDD conseguimos manter um sistema simples e podemos fazer qualquer alteração com segurança porque temos certeza que se essa alteração impactar em algum lugar do sistema, os testes nos dirão.

Mas porque a maioria não utilizam esse método?

Dificuldade em começar

Apesar de uma extensa e clara documentação, iniciar o desenvolvimento orientado a testes pode ser um trabalho árduo para muitos pelo simples fato de que geralmente muitos iniciantes tentam praticá-lo em código já existente. Este definitivamente não é o caminho. A principal característica do desenvolvimento orientado a testes é que ele seja orientado a testes. Em outras palavras o código que realizará sua lógica deve ser criado somente após a criação do teste e isso torna-se algo de difícil aceitação pois ainda não se tem nada e já se faz necessário testar.

Curva de apendizado

Complementando o item anterior, este é outro motivo que faz programadores desistirem do desenvolvimento orientado a testes. Como qualquer nova tecnologia, para a pratica de TDD leva-se um bom tempo dependendo disponibilidade e principalmente da vontade do programador.

Pode ser difícil no início se adaptar a essa metodologia de trabalho, mas seguindo a regra de ouro conseguimos trabalhar de forma muito ágil e dinâmica, sempre prezando pela qualidade e simplicidade do código, então muitos utilizam ferramentas para auxiliar como por exemplo o PHPUnit mas isso é assunto para outro dia…