Iniciando no desenvolvimento Android com PhoneGap

23/07/2012 Hugo Maia Vieira Comentários

Neste post vou mostar como começar a desenvolver apps para Android utilizando seu editor de texto preferido e o PhoneGap, um framework que te dá liberdade de criar apps mobile usando as tecnologias da web que você conhece e adora: HTML, CSS e Javascript.

Aqui na Algorich nós utilizamo o PhoneGap para desenvolver aplicações mobile. Como diz no site, desenvolver com PhoneGap te dá a liberdade de criar aplicações mobile para 7 plataformas diferentes (com suporte completo à Android, iOS e Windows Phone) usando as tecnologias da web que você conhece e adora: HTML, CSS e Javascript.

PhoneGap

Os apps criados com o PhoneGap não são nativos, porém, se comportam como tal. Eles são instalados no dispositivo e rodam em uma instância do browser padrão do sistema, ocupando 100% da tela. Além disso, o PhoneGap fornece uma API que te possibilita acessar funcionalidades nativas do sistema operacional (como a câmera, acelerômetro e etc) usando JavaScript. Os apps são criados utilizando o modelo single-page, onde a lógica do app fica em uma única página HTML que nunca é eliminada da memória, e todas as transições e apresentação dos dados são feitas através de atualizações no HTML DOM. Um exemplo de app criado com o PhoneGap é o app do Wikipedia.

Neste post irei mostrar como começar a desenvolver apps para Android utilizando o PhoneGap. O getting started do PhoneGap indica a utilização do Eclipse para montar o ambiente de desenvolvimento. Contudo, como não gosto de IDEs complexas e pesadas como o Eclipse (quando não estou usando Java), vou mostrar aqui como fazer o setup sem o uso dele, utilizando a linha de comando e seu editor preferido (no meu caso, o Sublime Text). Além disso, eu utilizo o sistema operacional Ubuntu Linux (versão 12.04 64bits), então algumas coisas que mostrarei aqui podem não ser válidas para outros sistemas.

Instalando o Android SDK

Primeiro, você deve ter o java instalado. Caso não tenha, instale assim:

sudo apt-get install openjdk-7-jdk

Após instalar o java, baixe o Android SDK no site de desenvolvedores do android. Para instalar descompacte o tar.gz em algum diretório de sua escolha. No meu caso, eu utilizo o diretório ~/install/. Em seguida, adicione a seguinte linha no seu arquivo ~/.bashrc:

PATH=$PATH:~/install/android-sdk-linux/tools:~/install/android-sdk-linux/platform-tools

Isso irá adicionar os diretórios onde estão as ferramentas do SDK (tools e plataform-tools) ao path de executáveis. Desta forma, será possível invocar as ferramentas sem necessidade de colocar todo o caminho onde elas estão, como comandos padrão do shell.

Vejamos algumas ferramentas essenciais do Android SDK:

android Cria e atualiza projetos Android, atualiza seu SDK, além de criar, mover e deletar AVDs (Android Virtual Devices). Mais informações na documentação.
emulador (Android Emulator) Executa suas aplicações em uma plataforma Android emulada. Mais informações na documentação.
adb (Android Debug Bridge) Faz a interface com seu emulador ou dispositivo conectado. Entre outas coisas, é responsável por installar apps. Mais informações na documentação.

Instalando pacotes Android

Você deve baixar pacotes (packages) com imagens de sistemas Android, também chamadas de plataformas. Para abrir o SDK Manager use o comando android com a opção sdk.

android sdk

O SDK Manager irá abrir. Você deve escolher uma (ou mais) versão do Android para instalar. Você só precisa instalar o pacote SDK Platform, sendo o restante opcional. Como é apresentado na figura 1, no meu caso, escolhi instalar apenas a versão 2.3.3 que é a versão que roda no meu celular.

Figura 1: Instalando pacotes Android com o SDK Manager

Depois de instalar os pacotes, pode fechar o SDK Manager.

Manipulando AVDs

Um AVD (Android Virtual Device) é um emulador de configurações que te permite criar um modelo virtual de dispositivo, definindo o hardware e o software que serão emulados pelo Android Emulator. Desta forma, você pode emular diferentes configurações de dispositivos que rodam Android. Você pode criar quantos AVDs você precisar, de acordo com as configurações dos dispositivos os quais seu app é compatível (por exemplo, com diferentes tamanhos de tela e versões do Android), para testar seu app em cada uma delas. Você pode criar um AVD pela linha de comando, contudo, existe o AVD Manager que facilita um pouco. Para abrir o AVD Manager use o comando android com a opção avd:

android avd

Em seguida crie um novo AVD como apresentado na figura 2.

Figura 2: Criando um novo AVD com o AVD Manager

Obs: Caso você esteja rodando o Ubuntu 64 bits pode ser que você tenha o problema apresentado na figura 3 ao criar o AVD.

Figura 3: Problema ao criar um AVD

Caso isso ocorra, é porque você não tem o pacote ia32-libs instalado. Para instalá-lo:

sudo apt-get install ia32-libs

Depois de criado o AVD corretamente, pode frechar o AVD Manager.

Criando um projeto Android

O Android SDK espera que seu projeto siga uma estrutura específica de arquivos e diretório para que ele possa compilar e empacotar sua aplicação corretamente. A ferramenta android criar um novo projeto com toda a estrutura definida. Recomendo que você veja a documentação para conhecer a estrutura de um projeto, entendendo para que serve cada diretório e arquivo do seu projeto.

Para criar um projeto Android, rode o seguinte comando:

android create project \
        --target <target_ID> \
        --name <nome_do_seu_projeto> \
        --path caminho/para/seu/projeto \
        --activity <nome_da_sua_activity> \
        --package <namespace_do_seu_package>

Onde:

target é a plataforma Aldroid alvo para a construção da sua aplicação. Para ver a lista de targets disponíveis e seus IDs correspondentes, use o comando android list targets.
name é o nome do seu aplicativo.
path é a localização do diretório do seu projeto. Se o diretório não existir, ele será criado para você.
activity é o nome para a classe padrão Activity.
package é o namespace do package do seu projeto, seguindo as mesmas regras para os packages em Java.

Para este artigo, vou criar um app HelloWorld:

android create project \
        --target 1 \
        --name HelloWorld \
        --path ~/projetos/hello_world \
        --activity HelloWorldActivity \
        --package br.com.algorich.hello_world

Com isso, será criada a estrutura do projeto Android, como apresentada na figura 4.

Figura 4: Estrutura de arquivos e diretórios do projeto Android

Se você utilizar um sistema de controle de versão (se não utiliza, deveria) como o git, faça com que o arquivo local.properties e os diretórios bin e gen sejam ignorados pelo controle de versão.

Adicionando o PhoneGap

Com a estrutura do projeto criada, é hora de adicionar o PhoneGap. Para isso, faça o download do PhoneGap e descompacte o .zip em algum diretório de sua escolha. No meu caso, eu utilizo o diretório ~/install/. Em seguida, no terminal, entre no diretório da sua aplicação e execute os seguintes comandos:

# cria o diretório assets e dentro dele o diretório www
mkdir -p assets/www
cp ~/install/phonegap/lib/android/cordova-2.0.0.js assets/www/
cp ~/install/phonegap/lib/android/cordova-2.0.0.jar libs/
cp -r ~/install/phonegap/lib/android/xml/ res/

Abra o arquivo da classe Activity (arquivo java contido no último subdiretório do diretório src), que no exemplo é o arquivo HelloWorldActivity.java, e edite o seguinte:

A classe herda de Activity, mude para herdar de DroidGap
Troque a linha setContentView(R.layout.main); por super.loadUrl("file:///android_asset/www/index.html");
Adicione o import import org.apache.cordova.*;
Remova o import import android.app.Activity;

Adicione o trexo de código seguinte ao arquivo AndroidManifest.xml, abaixo da linha que contém android:versionName:

<supports-screens
  android:largeScreens="true"
  android:normalScreens="true"
  android:smallScreens="true"
  android:resizeable="true"
  android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Adicione android:configChanges="orientation|keyboardHidden" a tag activity no AndroidManifest.xml

Crie o arquivo assets/www/index.html e adicione o seguinte conteúdo:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Android + PhoneGap</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
  </head>

  <body>
    <h1>Hello World! =)</h1>
  </body>
</html>

Obs: A única permissão realmente necessária para iniciar um hello world com o PhoneGap é a seguinte:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

O restante pode ser adicionado quando/se houver necessidade.

Você pode mudar o nome de apresentação do seu app alterando a tag <string> com o atributo name="app_name" no arquivo res/values/strings.xml.

Construindo o app

Existem duas formas de construir o seu app: release e debug. Neste post vou mostrar apenas como construir em modo debug, ficando o modo release para um outro post. Para construir o app, é utilizado o Ant. Para instalar o Ant faça o seguinte:

sudo apt-get install ant

Com o Ant instalado, basta usá-lo para construir seu app:

ant debug

Isto irá criar seu arquivo .apk de debug no diretório bin, chamado nome_do_app-debug.apk. Este arquivo será utilizado para instalar o app no emulador ou no dispositivo real, como veremos a seguir. Recomendo a leitura da documentação para entender os passos que o Ant executa internamente para a construção do app.

Usando o Emulador

O Emulador te permite prototipar, desenvolver e testar dois apps sem a necessidade de utilizar um dispositivo real, através da simulação das configurações dos AVDs existentes. Assim, para iniciar o Emulador, você deve especificar qual AVD deseja carregar. Cada AVD funciona como um dispositivo independente, com seu banco de dados privado de informações de usuário, cartão SD e etc. Quando você inicia o Emulador com um AVD, ele automaticamente carrega todas as informações do diretório do AVD, onde estas informações são salvas por padrão. Para iniciar uma instância do Emulador, basta usar o comando emulator definindo qual AVD será utilizado:

emulator -avd nome_do_avd
# ou, de forma simplificada:
emulator @nome_do_avd

Uma janela com o Emulador será aberta como mostrado na figura 5. É normal o emulador demorar alguns segundos até terminar de carregar.

Figura 5: Emulador Android

Para encerrar o Emulador, basta fechar a janela. O Emulador é uma ferramenta muito completa. Você pode interconectar diferentes instâncias do Emulador, manipular o cartão SD, simular envio de sms, entre outras diversas coisas. Veja na documentação todas as funcionalidades do Emulador.

Executando o app no Emulador

Para executar o app no Emulador, você deve primeiro estar com uma instância do Emulador rodando, como mostrado acima, e ter construído seu app com o Ant. Em seguida, basta usar a ferramenta adb para instalar o app no Emulador:

adb install bin/nome_do_app-debug.apk

Após estar instalado, para atualizar (reinstalar), deve-se utilizar o parâmetro -r:

adb install -r bin/nome_do_app-debug.apk

Para (re)compilar e (re)instalar ao mesmo tempo usando você poderia concatenar os comandos:

ant debug; adb install -r bin/nome_do_app-debug.apk

Contudo, você pode fazer isso diretamente com o Ant da seguinte maneira:

ant debug install

Após ter sido instalado, o app pode ser encontrado no menu de apps do dispositivo emulado. Na figura 6 podemos ver o Hello World sendo executado no Emulador.

Figura 6: HelloWorld sendo executado no Emulador

Usando dispositivos reais

Você também pode utilizar dispositivos reais para desenvolver e testar seu app, especialmente nos casos em que o emulador não oferece suporte. Para isso, você deve seguir alguns passos:

Declarar o app “debuggable” no Android Manifest

No arquivo AndroidManifest.xml adicione android:debuggable="true" ao elemento <application>.

Obs: Lembre-se de remover isso quando for lançar a release do seu app.
Ativar a “Depuração USB” no seu dispositivo

No seu dispositivo, vá em Configurações > Aplicativos > Desenvolvimento e ative a Depuração USB (em dispositivos com Android 4.0, esta configuração está localizada em Configurações > Opções de desenvolvimento).

Dica: Ative também a opção Permanecer ativo para quando o dispositivo estiver carregando (ou seja, ligado ao computador pelo cabo USB) a tela não apague.
Configurar o sistema para reconhecer seu dispositivo (se não usa o Ubuntu, veja a documentação)

Você precisa adicionar um arquivo de regras udev que deve conter as configurações USB para cada dispositivo que deseja usar para desenvolvimento. No arquivo de regras, cada fabricante de dispositivos é identificado por um id único. Você deve ver na lista de fabricantes qual é o id do fabricante do seu dispositivo. Para configurar a detecção do dispositivo, faça o seguinte:
1. Faça login como root e crie este arquivo: /etc/udev/rules.d/51-android.rules.
  
  Use este formato para adicionar cada fabricante ao arquivo:
  SUBSYSTEM=="usb", ATTR{idVendor}=="0fce", MODE="0666", GROUP="plugdev"
  
  O atributo ATTR{idVendor} indica o id do fabricante, que neste exemplo é Sony Ericsson. O atributo MODE especifica as permissões de leitura/escrita e o GROUP define a que grupo do sistema o dispositivo pertence.
2. Agora execute o comando: chmod a+r /etc/udev/rules.d/51-android.rules

Após ter seguido estes passos e estar com o dispositivo ligado à porta USB, você pode usar o comando adb devices para listas os dispositivos.

Executando o app em dispositivos reais

Para executar o app em dispositivos reais você usar o mesmos comandos apresentados para o Emulador, sendo que ao usar o adb deve ser adicionado o parâmetro -d. Já ao usar o Ant, não precisa modificar nada no comando, uma vez que o Ant tenta instalar em uma instância do Emulador e, caso não encontre uma instância rodando, tenta instalar em algum dispositivo conectado.

Assim como no Emulador, após ter sido instalado, o app pode ser encontrado no menu de apps do dispositivo. Na figura 7 podemos ver o Hello World sendo executado no meu telefone.

Figura 7: Hello World sendo executado no dispositivo

PhoneGap Command Line Tooling

Na versão 2.0 do PhoneGap, lançada no dia 20 deste mês, foi adicionado o Command Line Tooling, que é um conjunto de scripts para realizar tarefas repetitivas e comuns à todas as plataformas como criar, construir e emular apps.

Todos os passos realizados anteriormente para criar um projeto Android e adicionar o PhoneGap são resumidos à um único comando.

Contudo, para executar no Ubuntu devemos fazer uma alteração no script, pois ele utiliza o interpretador padrão do sistema (que pode ser acessado pelo /bin/sh) que no Ubuntu é o dash. Porém, devido aos erros que encontrei ao rodar o script, acredito que ele foi feito para ser interpretado pelo bash. Assim, basta mudar a primeira primeira linha para: #! /bin/bash.

Para criar o projeto basta rodar o script create encontrado no diretório do PhoneGap:

/install/phonegap/lib/android/bin/create caminho_para_o_projeto \
                                          namespace_do_seu_package \
                                          nome_do_seu_projeto

No caso do nosso exemplo seria o seguinte:

./install/phonegap/lib/android/bin/create ~/projetos/hello_world \
                                          br.com.algorich.hello_workd \
                                          HelloWorld

Com isso, será criada a estrutura do projeto Android, como apresentada na figura 8.

Estrutura do projeto Android criado pelo PhoneGap

Figura 8: Estrutura de arquivos e diretórios do projeto Android criado pelo PhoneGap

Repare que é criado um diretório cordova com alguns scripts. Para saber o que cada um desses scripts faz, veja a documentação, mas vamos ver dois que fazem tarefas que mostrei anteriormente.

Para iniciar o Emulador:

./cordova/emulate

Para construir o app:

./cordova/debug

Na figura 9 podemos ver o Hello World criado pelo create do PhoneGap sendo executado no Emulador.

Figura 9: Hello World criado pelo PhoneGap sendo executado no Emulador

O legal desse app padrão criado é que ele tem vários exemplos de utilização da API do PhoneGap que você pode ver, modificar e testar.

Finalizando

Neste post mostrei como criar um Hello World do zero usando o PhoneGap e as ferramentas de linha de comando do Android SDK, sem a necessidade da utilização do Eclipse. A partir desse ponto, você tem condições de brincar tranquilamente com a API do PhoneGap =)

Até a próxima!