Criando seu primeiro aplicativo HelloWorld com PhoneGap

  • Home
  • Criando seu primeiro aplicativo HelloWorld com PhoneGap

Este é um artigo bem simples para exemplificar a criação de um app Hello World utilizando o PhoneGap. Não iremos construir recursos de um aplicativo, apenas dar início ao processo de criação, deixar pronto para você se divertir criando sua própria app.

O primeiro passo é ter o PhoneGap instalado em seu computador. Isso foi demonstrado em um artigo anterior, clique aqui para visualizar.

Já com o PhoneGap instalado, abre o prompt de comando do seu computador:

Execute o comando abaixo, alterando para o local do arquivo onde quer gerar seu projeto:

phonegap  create  C:\helloworld  br.com.williamcleissondecarvalho.helloworld  HelloWorld

O comando tem a seguinte estrutura:

phonegap create [LOCAL DO APP] [NOME DO PACOTE] [NOME DO APP]

ScreenShot141

Se correr tudo bem será exibida a mensagem que o app foi criado no local indicado. Se abrirmos a pasta onde o app foi gerado termos uma estrutura de pastas gerada automaticamente, conforme exemplo abaixo:

ScreenShot142

Em versões anteriores do PhoneGap tínhamos que criar essa estrutura de diretórios manualmente e principalmente criar o arquivo de configuração do app config.xml na mão, o que dificultava o trabalho dos iniciantes. Agora o processo se tornou bem mais prático.

Desta estrutura de pastas, precisamos entender o seguinte:

  • platforms: serão gerados os arquivos finais das plataformas quando executarmos o build da aplicação, por exemplo, iOS, Android, etc.
  • plugins: serão armazenados os plugins que serão instalados no app para utilização, por exemplo, plugin de câmera, plugin de acesso aos contatos, etc.
  • www: pasta principal do aplicativo onde serão armazenados todos os arquivos web do app, HTML, Javascript e CSS.
  • config.xml: arquivo de configuração do app, onde são definidos as informações do app, nome, ícone, telas de splash de cada plataforma, e definições de plugins, etc.

Basicamente é isso, o app base já foi criado e você já pode iniciar o desenvolvimento do seu app.

Para testá-lo você pode abrir diretamente no navegador o arquivo index.html localizado na pasta WWW. Existem diversas ferramentas de emulação, ou pode ser executa e emulado através do eclipse, Android Studio ou Xcode.

Neste exemplo abaixo, utilizei um plugin do Google Chrome chamado Ripple Emulator que exibe páginas web em formato de smartphones e tablets para testes de layout e formato de comportamento de sites e apps híbridas, bastante útil. A única restrição é que ele somente emula páginas web publicadas, e não arquivos locais, portanto é necessário que esteja rodando um servidor apache em seu computador para conseguir executar o plugin, com WAMP ou XAMPP.

ScreenShot143

Irei tratar uma ferramenta de emulação do próprio PhoneGap em um próximo artigo, sobre PhoneGap Developer App. Fiquem ligados!

Até a próxima!