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!

Usando abas na linha de comando do Windows

Olá pessoal.

Uma dica bem prática para quem utiliza a linha de comando no Windows. Uma coisa que é bastante usual em Linux/Mac é a questão das abas na linha de comando. Isso agiliza o trabalho horrores!

Eu instalei o git no Windows da seguinte forma:

Com o git bash intalado em sua máquina, vamos agora fazer o download do programa Console2 (http://sourceforge.net/projects/console/) e inserí-lo na pasta que contém os outros arquivos de programas

Diretório do Console2 instalado na máquina

Diretório do Console2 instalado na máquina

Agora vamos executar o console2 e vamos em Edit > Settings para fazermos a nossa configuração inicial para unirmos o git bash ao console2.

Console2  configuração inicial

Console2 configuração inicial

Ao clicar na opção vai abrir um popup. No canto direito vamos clicar na opção “Tabs” e vamos inserir as informações:

Title: Git Bash
Icon: C:\Program Files (x86)\Git\etc\git.ico
Shell: “C:\Program Files (x86)\Git\bin\sh.exe” –login -i

Configurando o Git Bash no Console2

Configurando o Git Bash no Console2

Agora vamos clicar na opção “Hotkeys” no canto direito para modificarmos o atalho para a criação de uma nova aba. Clique na opção “New Tab 1” e abaixo insira as informações:

Command: New Tab 1
Hotkey: Ctrl + T (Clique nos Botões para inserir este valor no campo)

Modificando atalhos no Console2

Modificando atalhos no Console2

Clique no botão “Assign” para salvar o atalho para a criação de uma nova aba.

Vamos na opção “Behavior” para mudarmos o caracter de cópia de nova linha para Linux

Configurações do Console2

Configurações do Console2

Agora para modificarmos um pouco a sua aparência vamos na opção “Appearance” e vamos mudar os valores

Font
Name: Lucida Console (a fonte utilizada no Git Bash);
Size: 12

Modificando a fonte do Console2

Modificando a fonte do Console2

Clicamos em “Appearance > More…” para finalizarmos com as nossas modificações

Window transparency
Alpha: 20

Configurando transparência no Console2

Configurando transparência no Console2

Para finalizarmos vamos na opção “Console” e vamos direcionar o programa para que inicie na raíz da pasta do usuário

Startur dir: C:\Users\pasta-com-seu-usuario\ (no meu caso “willmendesneto”)

Configurando inicialização do Gitbash no Console2

Configurando inicialização do Gitbash no Console2

Com o programa configurado, cria um atalho no seu Desktop e modifique as propriedades do atalho clicando com o botão direito no atalho criado e escolhendo a opção “Propriedades”. Assim que o popup abrir clique na opção “Atalho > Alterar ícone > Procurar” e insira esta informação para que o Console2 fique com o ícone do Git Bash.

%ProgramFiles% (x86)\Git\etc\git.ico

 

Modificando ícone de atalho

Modificando ícone de atalho

O resultado final será seu programa funcionando com tudo que você tem direito (na medida do possível) em um ambiente Windows, lembrando que o Git bash instala algumas coisas bem legais como Vim, comandos “find” e outras coisas que ajudam bastante.

Finalizando integração Git Bash e Console2

Finalizando integração Git Bash e Console2

Obrigado e até mais!

Este post foi baseado em algumas dicas que achei no post “git bash & console2, finally! (http://johngilliland.wordpress.com/2012/12/22/git-bash-console2-finally/)” do blog de “John Gilliland” com algumas alterações.

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!

Open source: criação do tema “twitter bootstrap” no Grocery CRUD

Olá pessoal.

A quem utiliza o scaffolding Grocery CRUD (http://www.grocerycrud.com/) nos projetos com o Codeigniter fiz uma colaboração no projeto criando um novo tema para ele com base no Twitter bootstrap (http://twitter.github.com/bootstrap/) pelo fato da grande absorção dele em grandes projetos e de todas as suas facilidades para interações, UX e outros aspectos.

Github do projeto

Github do projeto

Para quem quiser testar e/ou utilizá-lo em suas aplicações para verificar o seu uso, o projeto mais atual com o tema pode ser encontrado no repositório do próprio projeto no Github (https://github.com/scoumbourdis/grocery-crud).

Fica aqui a minha satisfação de poder participar do projeto e poder contribuir ao projeto do John Skoumbourdis (https://github.com/scoumbourdis) . Agradeço também ao John por me inserir na listagem dos colaboradores do projeto na página do projeto no link http://www.grocerycrud.com/documentation/credits!

Créditos no projeto Grocery CRUD

Créditos no projeto Grocery CRUD

Espero que vocês gostem do resultado, ainda estou aprimorando-o, então toda sugestão e crítica é sempre bem-vinda e acima de tudo todos podem colaborar na melhora do projeto!

Pretendo participar do novo projeto do grocery CRUD 2.0 que deve focar alguns outros aspectos como interoperabilidade atendendo a alguns PSR’s como o PSR-0 e o PSR-1, testes unitários, melhoras de performance, dentre outros para que possa ser utilizado em qualquer projeto PHP!

Obrigado e até mais!