Instalação do ambiente para desenvolvimento com Phonegap no Windows

Instalação do ambiente para desenvolvimento com Phonegap no Windows

Instalação do ambiente para desenvolvimento com Phonegap no Windows

 

Uma dica rápida, após um período sem postar nada no blog.

Tive que utilizar o windows para criar um projeto com o phonegap e tive alguns problemas para a configuração inicial. Fica a fica de alguns links que ajudaram na configuração do ambiente no Windows.

 

Links para instalação do android no windows:

1 – Guia de instalação do Nodejs (No Windows ele tem um executável, então não possui guia, é baixar instalar e pronto)
http://nodejs.org/

2 – Guia de instalação da plataforma android no site do Phonegap
* Faça o download do Phonegap no site. Vai ser importante, pois inserimos ele na variável de ambiente PATH também
http://phonegap.com/install/

http://docs.phonegap.com/en/edge/guide_platforms_

android_index.md.html#Android%20Platform

%20Guide

3 – Instalação do Ant (obrigatório):
http://pt.wikinourau.org/bin/view/GrupoJava/

InstalandoAnt

4 – Download do eclipse e instale os plugins:
– ADT;
– Applaud (http://www.loiane.com/2012/06/comecando-com-phone-gap-cordova-com-applaud-plugin-hello-world-android/);

* O Eclipse que vem no Pacote adt-bundle serve somente para trabalhar com Android. Para maiores informações vejam estes links:
https://groups.google.com/forum/#!msg/eclipse-plugin-for-phonegap/ABdw6oL_Vg0/jQwjupZO9SYJ
https://code.google.com/a/eclipselabs.org/p/mobile-web-development-with-phonegap/issues/detail?id=97

 

Até mais!

Minificação de output de maneira simples com PHP

Olá pessoal.

Uma dica bem simples para quem está fazendo algum site em PHP (independente de Framework). A grande maioria dos frameworks possuem a feature de minificação da saída de HTML. Isso é muito útil pois melhora o tempo de carregamento do site/aplicação para os seus usuários.

Fiz este gist pra mostrar uma forma bem simples de como usar a minificação, caso não haja um suporte padrão.

https://gist.github.com/willmendesneto/7236329

Claro que esse Regex deve ser melhorado, mas a idéia seria basicamente esta. Existem também algumas configurações a serem feitas no seu servidor que já facilitam bastante, mas fica para um próximo post.

Até mais!

Adicionando Angularjs via CDN + fallback

Olá pessoal.

Inicialmente vou falar do assunto CDN ou Content Delivery Network (caso não saiba do que estou falando leia a definição do Wikipedia sobre CDN). As vantagens de inserir um arquivo em seu site via CDN são diversas como Cache de arquivos, diminui a latência da requisição e o arquivo pode ser carregado paralelamente com os demais conteúdos do site, o que melhora a performance.

Porém um dos pontos que podem impactar na utilização de arquivos via CDN são as dependências diretas de servidores externos. Caso os servidores por qualquer motivo pararem de disponibilizar o arquivo (podem estar off por “N” motivos) sua aplicação estaria comprometida. Para isso existem os chamados fallbacks, que nada mais é do que, neste caso, uma verificação de carregamento do arquivo, caso contrário insere o arquivo local . Utilizando o angularjs não seria diferente também. Existe uma maneira simples de verificarmos se o arquivo foi carregado corretamente, caso contrário inserimos o arquivo localmente e para o usuário final a utilização fica transparente. Duvida?

<!-- Angular JS off CDN, otherwise fallback. -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <script>
    window.angular || document.write('<script src="scripts/vendor/angular-1.0.7.min.js"><\/script>');
 </script>

Bastante simples, não acham? Da mesma forma você pode fazer um fallback para o jquery e outros arquivos, bibliotecas, etc.

Até mais!

Angularjs: Um framework para facilitar sua vida

Olá pessoal.

Semana passada houve uma evento inusitado: Uma reunião do Google Developer Group da Bahia na UNIRB em Salvador e Marlon, que foi um dos organizadores do evento, entrou em contato comigo para que eu palestrasse sobre Angularjs. Para mim foi uma surpresa muito boa participar deste evento e poder colaborar com o mesmo. Daí nasceu a palestra “Angularjs: Um framework para facilitar sua vida”.

Houveram várias outras palestras. O Marlon Carvalho (@marlonscarvalho) fez uma palestra excepcional mostrando como é simples o desenvolvimento de extensões para o navegador Google Chrome. O porquê criar, as facilidades encontradas e outros pontos.

Logo após veio a palestra do Felipe Matheus, que veio falar sobre mundo Java e todas as possibilidades que uma linguagem multiplataforma pode proporcionar aos desenvolvedores, abordando desde o histórico até a etapa atual e novas idéias referentes ao ecossistema Java.

Após Felipe, chegou a minha vez. A palestra seria inicialmente um overview sobre o Framework da google, mostrando seus pontos fortes, seu paradigma de programação descritiva e outros pontos que fazem do angularjs a escolha ideal em projetos diversos. Os slides estão disponíveis no meu slideshare.

Evento muito bom e que agregou conteúdo a toda a comunidade (parabéns ao evento por sinal Marlon)! Logo após, graças ao amigo Jonata Weber, ocorreu um hangout descontraído sobre o Angularjs com o pessoal do DEV FSA de Feira de Santana, Bahia. Segue o vídeo do Hangout:
Criei também um repositório no github com os exemplos que foram mostrados na palestra. Dentre eles estão:
  • Exemplos de utilização de recursos, consumindo a API de buscas do Twitter;
  • Exemplos de diretivas, mostrando como criar tags e trabalhar o html como se fosse um arquivo xml;
  • Exemplos de utilização de data-binding, criando um micro editor online, onde o usuário cria os seus snippets e pode testá-los em tempo real, vendo a modificação(exemplo: onde possuir a tag <lorem></lorem> será inserido um texto do site lorem ipsum e assim por diante);
Link do repositório do projeto no Github: https://github.com/willmendesneto/palestra-angularjs;
Obrigado e até mais!

Usando PHPUnit no Codeigniter via Hooks

Olá pessoal.

Já fiz um post sobre como fazer testes unitários utilizando o framework Codeigniter PHP com o CIUnit.

Uma grande pergunta que me fiz foi: “Porque utilizar componentes externos se posso simplificar esse fluxo?”

Pesquisando achei este link que fala da utilização de hooks para integração do PHPUnit e o Codeigniter de maneira mais simples (http://phpfour.com/blog/2012/01/phpunit-integration-with-codeigniter/), mas quando fui utilizá-lo via CLI tive alguns problemas, então tive que fazer algumas modificações.

Inicialmente vamos fazer o download do framework no repositório oficial da Ellislab. Feito o download descompactaremos ele no nosso servidor local. A partir daí faremos algumas modificações.

No arquivo ‘system/core/Exceptions.php’ iremos modificar os métodos “show_php_error()” e “show_error()” para que eles verifiquem se a chamada do arquivo foi feita via linha de comando. Caso positivo o erro deve ser otimizado para sua visualização via CLI. Insira este conteúdo no arquivo.

Gist: https://gist.github.com/willmendesneto/5025979

No arquivo ‘application/config/config.php’ modifique a linha 121 para que o array na posição ‘enable_hooks’ tenha agora o valor “TRUE”, assim a aplicação fica sabendo que vai utilizar algum hook

$config[‘enable_hooks’] = TRUE;

Após isso vá em ‘application/config/hooks.php e insira este conteúdo

$hook[‘display_override’] = array(
‘class’ => ‘DisplayHook’,
‘function’ => ‘captureOutput’,
‘filename’ => ‘DisplayHook.php’,
‘filepath’ => ‘hooks’
);

Gist: https://gist.github.com/willmendesneto/5025990

Vamos criar a classe que vai interagir com o evento encadeado via hook. Crie o arquivo ‘application/hooks.DisplayHook.php’ e insira o conteúdo deste gist.

Gist: https://gist.github.com/willmendesneto/5025995

Para maiores informações sobre os métodos que podem ser utilizados para os hooks, uma excelente dica é a documentação oficial do Codeigniter(http://ellislab.com/codeigniter/user-guide/general/hooks.html).

Agora iremos criar as configurações para utilizarmos os testes unitários. Crie o arquivo “phpunit.xml.dist” na raíz do projeto com este conteúdo (https://gist.github.com/willmendesneto/5026004). Logo após crie uma pasta ‘tests’ na raíz do projeto. Nesta pasta ficarão todos os arquivos de teste que utilizaremos neste exemplo. Para concluirmos a configuração do ambiente de testes, iremos criar um arquivo em ‘tests/bootstrap.php’ com este conteúdo (https://gist.github.com/willmendesneto/5026014), assim nos asseguramos que os componentes do Framework estarão inicializados e prontos para o utilização nos testes.

Estou utilizando o nome do banco dados ‘ci-phpunit’ para este exemplo. Neste banco criaremos a tabela ‘posts’ com este conteúdo:

CREATE TABLE IF NOT EXISTS `posts` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`title` varchar(100) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Agora sim criaremos o nosso arquivo de testes. Crie o arquivo em ‘tests/PostTest.php’ com este conteúdo.

Gist: https://gist.github.com/willmendesneto/5026017

Passando por estas etapas, abra a linha de comando e insira os comandos:

cd pasta-do-seu-projeto/


phpunit

ou

phpunit --testdox

Dica: Caso esteja usando o phpunit via composer, você pode utilizar os comandos:

cd pasta-do-seu-projeto/


php vendor/phpunit/phpunit/composer/bin/phpunit

ou

php vendor/phpunit/phpunit/composer/bin/phpunit --testdox

Inicialmente vai dar errado o teste e mostrará o html da mensagem que seria visualizado no seu navegador.

phpunit-teste-falhou

phpunit-teste-falhou

Não se espante, pois este evento já era esperado. Isto acontece porque o model Post ainda não existe. Vamos criá-lo? Inisira o model Post em ‘application/models/Post.php’ com este conteúdo(https://gist.github.com/willmendesneto/5026026) e vamos rodar o comando na linha de comando novamente.

phpunit-testes-ok

phpunit-testes-ok

Após o comando ser executado a mensagem que vai aparecer é esta acima, mostrando que está tudo ok! Seu teste está rodando no Codeigniter e o model Post foi testado corretamente somente com a utilização de um hook. Simples e prático.

Se você nãoo conhece muita coisa sobre Testes Unitários e TDD, aconselho a dar uma olhada neste link do tutsplus (http://net.tutsplus.com/sessions/test-driven-php/)  que aborda alguns conceitos e utilizações com exemplos utilizando a linguagem PHP.

Criei um repositório no meu Github mostrando todas as etapas deste projeto e um controller com a migration para gerar a tabela ‘posts’ no seu banco de dados. Segue o link(https://github.com/willmendesneto/Codeigniter-TDD-with-Hooks)

Curtiu? Utiliza de outra forma? Dê sua opinião!

Obrigado e até mais!

Testes no Codeigniter com CIUnit

Olá pessoal.

Para quem já tentou utilizar TDD (Test Development Driven) no Codeigniter percebeu que sofria horrores para conseguir. Para isso Tatsuya Fukata criou uma biblioteca, a CIUnit, e a deixou disponível no Github (https://github.com/fukata/CIUnit-for-CI2). Este post vai mostrar como é bem simples fazermos testes unitários utilizando este componente.

Seu acoplamento é bastante simples:

Github - Projeto CIUnit

Github – Projeto CIUnit

Faça o download do Codeigniter e descompacte-o no seu servidor local. Após isto faça o download do projeto CIUnit e insira os arquivos do projeto no diretório “application/third_party/” da sua aplicação;

Remova o conteúdo da pasta “tests” e crie o arquivo “phpunit.xml.dist” na raíz do projeto com este conteúdo (https://gist.github.com/willmendesneto/5005522).

Agora crie o arquivo  “VerificationTests.php” dentro da pasta tests e insira este conteúdo (https://gist.github.com/willmendesneto/5005595).

Passando por estas etapas, abra a linha de comando e insira os comandos:

cd pasta-do-seu-projeto/


phpunit --testdox

Dica: Caso esteja usando o phpunit via composer, você pode utilizar os comandos:

cd pasta-do-seu-projeto/


php vendor/phpunit/phpunit/composer/bin/phpunit --testdox

Pronto, se tudo deu certo você verá a mensagem de tudo ok na aplicação.

Obrigado e até mais

https://github.com/fukata/CIUnit-for-CI2

Codeigniter + Twig + Composer : Uma boa idéia

Olá a todos.

Em um projeto tive a necessidade de utilizar alguns recursos de um template engine e olhando alguns achei interessante trabalhar com o twig (http://twig.sensiolabs.org/).

Twig Template engine

Twig Template engine

Já existe uma biblioteca no Codeigniter para trabalhar com o Twig, o Codeigniter Twig (https://github.com/altrano/codeigniter-twig) que é de fácil acoplamento, basta fazer o download dos arquivos, inseri-los na aplicação e carregar no controller que vá usá-lo. Ele faz o processo de carregamento automático dos helpers inseridos no arquivo de autoload da aplicação.

application/libraries/Twig.php
Link do gist  : https://gist.github.com/4550897

application/config/twig.php
Link do gist : https://gist.github.com/4550897
Baixado os arquivos do projeto Codeigniter Twig no github e inseridos no projeto, vamos começar a integração Primeiro vamos inserir o composer na aplicação. Iremos criar a requisição do Twig no arquivos composer.json. Crie um arquivo composer.json na raíz do projeto com as informações:

composer.json
Link do gist : https://gist.github.com/4550979

Depois iremos inserir o código que vai chamar o arquivo de carregamento dos pacotes do composer no arquivo index.php na raíz do projeto.

No arquivo autoload.php (application/config/autoload.php) modifique o conteúdo do arquivo da linha 55 à 67 e insira a informação abaixo:

application/config/autoload.php
Link do gist : https://gist.github.com/4551017

O código do controller da aplicação:

application/controllers/welcome.php
Link do gist: https://gist.github.com/4550963

Agora os templates. O Twig tem algumas funções nativas que podem ser muito úteis. Criaremos 2 arquivos na pasta “application/views”:
  • template.html.twig – Template padrão da aplicação
  • index.html.twig – Arquivo com o conteúdo específico da página;
Como ficou o código das views:
template.html.twig
application/views/template.html.twig
index.html.twig

application/views/index.html.twig
Link do gist : https://gist.github.com/4551017

Agora uma observação:
Quando for utilizar algum helper que gere html (form_helper, por exemplo), utilize o método com o sufixo |raw
 Chamada da função form_open(); do helper
     {{ form_open("/login")|raw }}
ao invés de
     form_open("/login");
Link do Gist com o código dos arquivos utilizados no projeto:
Documentação do Twig:
Valeu e até mais!