61
phonegap.com. Clique em
Get Started. Escolha o tipo de
cadastro (comece pelo gratuito,
que permite uma aplicação
privada, apenas para testar). Siga
as instruções e pronto: já está
cadastrado e pode baixar suas
aplicações no servidor
para download.
Fazer isso é simples. Basta
compactar sua aplicação, todos os
arquivos e diretórios necessários
(depois de compilados para uma
SODWDIRUPD HVSHF¯íFD H EDL[DU
no servidor Build.PhoneGap. Ele
vai compilar e criar um arquivo
“apk”, bem como o link para
disponibilizar para os usuários. Até
um QR Code ele cria.
Para Android
Agora já há um aplicativo
criado, básico, do tipo Hello World,
e uma conta no Builder. O próximo
passo é preparar a aplicação para
ser disponibilizada como um arquivo
apk para download e instalação
pelos potenciais usuários. O que o
PhoneGap vai fazer é justamente
essa preparação. Para isso, precisa
ter em sua máquina os arquivos e
APIs necessários. Se já programa
para Android, deve ter o SDK
Android Tools instalado. Quem
desenvolve com ferramentas como
o Eclipse também deve ter esses
arquivos e APIs já instalados.
&HUWLíTXH VH GH TXH DV PDLV
recentes versões do SDK estão
atualizadas em seu sistema. Se não
estiverem, o PhoneGap não poderá
compilar seu aplicativo e retornará
mensagens de erro no processo.
Com o SDK Android
atualizado, abra uma janela de
FRPDQGR SURPSW H FHUWLíTXH
se de estar no diretório de seu
aplicativo. No exemplo, deverá
ver isto no prompt:
C:\my-app>
Digite o comando a seguir,
para compilar o aplicativo:
C:\my-app> Phonegap local
build android
Se estiver tudo certo, uma
lista de comandos e mensagens
VHU£ H[LELGD QD WHOD 1R íQDO K£
compilação do aplicativo para
a plataforma Android. Se tudo
estiver certo, ótimo. Se mensagens
de erro surgirem, pode ser preciso
YHULíFDU DOJXQV IDWRUHV FRPR
variáveis de ambiente, programas e
atualização do SDK Android.
Com o aplicativo compilado
corretamente, haverá um novo
conjunto deles no diretório
my-apps\plataforms\android. São
os arquivos necessários para gerar
a APK para download (na pasta
assets/www).
O próximo passo é compactar
esses arquivos e diretórios e
enviar para a conta no Builder,
que fará todo trabalho. O Builder
descompactará o arquivo e
transformará em APK. Ele fornece
um link para download para os
usuários. Acesse o Build PhoneGap
e faça seu login. Na próxima tela,
poderá enviar seu arquivo zipado,
com a aplicação.
Clique no botão “Upload a
]LS íOHÜ H LQIRUPH R QRPH GH
seu arquivo. Depois de preparar
seus arquivos, o Build PhoneGap
vai mostrar uma tela assim:
O símbolo do Android, ao lado
do iOS, é o link para o arquivo APK.
Pode-se usar o QR Code que o
Build gera para divulgar o app.
Teste em tablet
Para testar, abra o navegador
no tablet com Android e acesse o
link informado pelo Build. Baixe e
instale o arquivo. Ou baixe o arquivo
em qualquer diretório (no exemplo,
foi usado o Dropbox) a partir de seu
desktop. Acesse com o tablet.
Pronto: há um novo aplicativo
instalado no dispositivo Android. É
possível acessá-lo pelo ícone como
qualquer outro aplicativo. Ao clicar
nesse ícone, será apresentada a
tela com a imagem do símbolo do
PhoneGap e a frase inserida no
arquivo index.html.
Esse app é apenas um teste,
sem nenhuma função além de
demonstrar o sistema. A ideia é
melhorar o aplicativo, criando um
pequeno menu de sabores para
uma hipotética pizzaria. O nome
dela será Queijo Derretido.
Pizzaria
O importante nestes exemplos
é entender o objetivo do PhoneGap:
criar aplicativos com o que você
já sabe, linguagens e recursos
que já domina, como HTML,
CSS, Javascript. Claro que, se já
programa em um ambiente Java,
como Eclipse, talvez o PhoneGap
não seja tão útil. Mesmo assim, ele
tem recursos interessantes e pode
acelerar o desenvolvimento de um
novo projeto, facilitando interfaces
e o uso de recursos nativos dos
dispositivos Android.
0RGLíTXH R DUTXLYR LQGH[
html. A ideia é ver como usar um
CSS para controlar o design. Além
disso, mais uma página exibirá
os produtos da pizzaria Queijo
Derretido, sabores.html.
O primeiro passo é determinar
um logotipo para a pizzaria. Será
usada a imagem abaixo:
Agora crie um novo arquivo
chamado pizzaria.css e salve no
diretório my-app/www/css. Abra
o arquivo em um processador de
texto simples, como o Bloco de
Notas, e digite este código:
.logotipo{
position: absolute;
top:50%;
left:50%;
margin-top:-61px;
margin-left:-130px;
height: 122px;
width: 263px;
z-index: 100;
}
,VVR GHíQLU£ XPD FODVVH
chamada “logotipo”, que
controlará as propriedades da DIV
“logotipo” na página inicial. Note
que o código top, left, margin-left
e margin_top foram usados para
centralizar a imagem na tela do
aplicativo. Agora, abra o arquivo
index.html para inserir a DIV que
vai receber a imagem do logotipo:
<div id="logo"
class="logotipo">
<img src="img/logotipo.png"
width="263" border="0">
</div>
A imagem logotipo.jpg deve
estar salva no diretório my-app/
www/img para o arquivo funcionar
corretamente. Insira esta linha de
código no arquivo, para referenciar
o arquivo CSS que será usado para
formatar a página:
<link rel="STYLESHEET"
Em editor de texto, conteúdo do arquivo Index.html
[
SE MENSAGENS DE ERRO SURGIREM, VERIFIQUE AS VARIÁVEIS DE AMBIENTE
]
REVISTA LOCAWEB
