Phonegap Workflow

Venho utilizando Phonegap a algum tempo fazendo alguns projetos pessoais e alguns protótipos comerciais e gostaria de dividir uma maneira bem prática para se trabalhar com essa tecnologia.

Node.js

Antes de tudo a instalação do node junto do npm é algo essencial. O npm, que  significa Node Package Manager, uma espécie de apt-get para pacotes node foi a  ferramenta escolhida para ser usada atualmente como instalador do phonegap.

Site oficial Node.js e NPM.

Após instalar node e npm instale o phonegap/cordova. Para isso em um terminal faça:

npm install -g phonegap cordova

A partir daí para criar um projeto phonegap basta executar algo como:

phonegap create --name AppName --id com.yourcompany.app-name app-name
cd app-name

Obs.:

Caso tenha instalado o node como root adicione um sudo antes do comando.

Obs. 2:

Para garantir que a instalação de alguns pacotes ocorra com sucesso não esqueça de instalar o pacote build-essential no linux. Para isso execute o comando:

sudo apt-get install build-essential

Grunt.js

Uma ferramenta bastante utilizada internamente pela maioria das ferramentas que serão apresentadas a seguir utiliza o Grunt.js. No site o grunt é definido em uma palavra: automação. Ou seja, minificação dos arquivos, compilação, teste unitário, linting. Enfim, qualquer tarefa que possa ser colocada em forma de script.

A instalação é feita através do comando:

npm install -g grunt

Yeoman

Yeoman te ajuda a iniciar novos projeto, receitando boas práticas e ferramentas para te ajudar a se manter produtivo. Criada por muitos dos melhores nomes do mundo Javascript como Addy Osmani, Sindre Sorhus, Paul Irish, Eric Bidelman, dentre outros, vai ser uma ferramenta essencial para automatizar a criação dos componentes, no nosso caso, do Angular.js.

npm install -g yo

Angular.js

Como o Phonegap não provê MVC ou similar, é necessário alguma ferramenta para trabalhar mais organizadamente com Javascript. Para isso eu uso Angular.js.
A equipe do yeoman criou um pacote npm (generator-angular) para fazer o scaffold (esqueleto) de um projeto Angular.js, além de criar Controllers, Routes, Services, etc. Para usar basta instalar através do comando:

npm install -g generator-angular

Em seguida execute o comando dentro do diretório do seu projeto:

yo angular [app-name]

Esse comando irá criar o diretório app que irá conter os arquivos do seu aplicativo, separado do diretório www, o qual é originalmente usado pelo phonegap.

Para usar o live preview, onde sua página é recarregada sempre que houverem alterações no código-fonte, execute o comando:

grunt serve

Para compilarmos o conteúdo de app para www e depois gerar por exemplo um arquivo apk para usar no Android precisamos instalar o grunt-angular-phonegap. Para isso basta executar:

npm install grunt-angular-phonegap --save-dev

Para adicionar a plataforma de desenvolvimento utilize o comando:

cordova platform add [platform]

Onde plataforma pode ser android, ios, wp7 or wp8.

A lista completa de comandos pode ser encontrada em grunt-angular-phonegap.

Bower

Com a mesma ideia do npm, mas para pacotes da web, como Twitter Bootstrap, jQuery, FontAwesome, Backbone, enfim quase todos os pacotes de ferramentas da web já podem ser encontradas nas repositórios do Bower. A instalação é feita através do comando:

npm install -g bower

Ionic

Uma boa opção quando se quer uma bonita e eficiente interface gráfica, unindo forças com Angular.js de forma integrada. Isso é o Ionic, uma ferramenta livre para o desenvolvimento de aplicativos híbridos em HTML5.
Para instalar o ionic no nosso projeto faça:

bower install ionic

Ripple

Para um desenvolvimento mais otimisado uso um emulador chamado Ripple, desenvolvido nos laboratórios da Apache (a mesma que criou o Cordova), que cria um ambiente simulando um smartphone no browser. Você pode simular as várias telas para verificar a responsividade, simular rede 3G, 4G, Wi-Fi; simular geolocalização, uso de banco de dados Sqlite, entre outras coisas. Dito isso não perca tempo desenvolvendo em emuladores como do Android, que leva bastante tempo para subir as alterações, possui um console limitado para esse tipo de aplicação, entre outras dores de cabeça. Sendo assim utilize o emulador somente para testes mais definitivos.


A instalação é feita no Navegador Chrome através da url https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

HTML5 Mobile Apps: PhoneGap GeoLocation

https://www.youtube.com/watch?feature=player_embedded&v=V97j188X8Wg

Conclusão

É certo que é um número grande de ferramentas para construir um simples app, mas ao mesmo tempo se for um aplicativo muito grande e complexo vale a pena usar todas as ferramentas para tornar o desenvolvimento mais eficaz.

Caso você tenha sentido falta de exemplos devo dizer que seria bem complicado fazer um resumo de todos os exemplos, isso porque cada ferramenta descrita acima possui uma documentação extensiva e bem prática, onde são explorados vários cenários.

Dê ênfase no estudo do Phonegap, Angular.js e Ionic. Essas são as ferramentas que você necessariamente deve conhecer. As outras apenas auxiliam no desenvolvimento e são opcionais.