Blog NAno

PhoneGap tutorial – Iniciando um projeto (completo)

Início » Blog » PhoneGap tutorial – Iniciando um projeto (completo)

Neste tutorial de PhoneGap/cordova será apresentado o Framework PhoneGap com todas as instruções para a preparação de seu ambiente para o desenvolvimento utilizando as tecnologias HTML, CSS, e JavaScript. O objetivo é ensinar a configurar um ambiente para iniciar um projeto PhoneGap. E depois que você estiver dominando o Phonegap, indico que leia também o tutorial introdutório sobre Ionic que o Maurílio criou.

Este artigo se resume em:

  • O que é PhoneGap.
  • Como instalar Android SKD
  • Como instalar Ant Apache
  • Como instalar Node.js
  • Como instalar PhoneGap
  • Rodando um projeto Demo.

Para a execução deste tutorial de Phonegap você precisará de de algumas ferramentas:um editor de código, um Browser moderno (Chrome/Firefox/etc) e um bom conhecimento em HTML, CSS e Javascript.

O que é PhoneGap?

Já pensou o trabalho que seria ter que criar um aplicativo e disponibilizar para todas as plataformas, seja elas Android, IOS, Windows Phone, etc.?

Teríamos que aprender como cada plataforma trabalha, sem contar que teríamos que desenvolver o mesmo para cada plataforma, só de imaginar o trabalho que seria dá até um frio na barriga. E se existisse uma maneira de desenvolver um único aplicativo e que rodasse em todas as plataformas? Pois bem, esse é um dos motivos pelo qual o PhoneGap vem crescendo a cada dia.

O PhoneGap (também conhecido como Cordova) é um framework voltado para o desenvolvimento de aplicações para dispositivos móveis que permite desenvolver aplicações utilizando as tecnologias Javascript, HTML5, CSS3. Ele é multiplataforma e da suporte a alguns recursos bastante importante , tais como: Accelerometer, camera, compass, contacts, geolocation, notification (alert / sound / vibration, storage, media e network).

A tabela abaixo mostra a compatibilidade dos recursos para cada plataforma.

Uma das vantagens do Phonegap é que por se tratar de um web app, você poderá testar seu app diretamente no seu browser, sem precisar compilar o projeto e emular em uma AVD ou rodar diretamente no seu celular a cada alteração feita.

Aprenda a instalar o Ionic também

Para ampliar ainda mais seus estudos, nosso programador front-end Maurílio Novais criou um novo tutorial sobre Ionic.

Leia agora!

Leia o tutorial de Ionic

Instalando um ambiente para rodar o Phonegap (Android SKD)

Para que possamos dar inicio a um projeto, primeiro precisamos ter um ambiente para o desenvolvimento.

  • O primeiro passo é realizar o download do SDK do Android no site: http://developer.android.com/sdk/index.html.
  • Após fazer download, faça a instalação do mesmo.
  • Depois de realizar a instalação, procure pelo SDK Manager na pasta onde realizou a instalação do SDK Android e realize as atualizações necessárias.

Instalando Ant Apache

Para que possamos desenvolver para Android é preciso ter o Apache Ant instalado.

O Apache Ant é uma ferramenta utilizada para automatizar a construção de software. Ela é escrita na linguagem Java e foi desenvolvida inicialmente para ser utilizada em projetos desta linguagem.

A ferramenta Ant é um projeto da Apache Software Foundation. É um software livre, licenciado sob a licença Apache.

  • Primeiro baixe a distribuição binária do Apache Ant no site: http://ant.apache.org/bindownload.cgi
  • Depois descompacte o Apache Ant em qualquer lugar, no meu caso descompactei na raiz do disco D.

Está gostando deste artigo?

Coloque seu e-mail abaixo e fique atualizado com nossas novidades.

CADASTRE EM NOSSA LISTA DE PROGRAMADORES

[mailmunch-form id=”610647″]

Configurando Variáveis de Ambiente

Feita a instalação e a atualização do Android SDK e a instalação  do Apache Ant. É necessário  configurar as variáveis de ambiente.

 

  • Vá em Propriedades do Sistema -> Aba Avançado -> Váriáveis de Ambiente -> Em Váriáveis do Sistema

Ou

  • Tecle Tecla Windows + Pause Break > Configurações Avançadas do sistema > Variáveis de Ambiente

 

  • Crie uma variável chamada ANDROID_HOME e em seu valor informe a pasta no qual o SDK foi instalado.
  • Depois crie uma variável chamada ANT_HOME e em seu valor informe a pasta no qual o Apache Ant foi instalado.
  • Agora procure pela variável PATH e clique em editar
  • Em seu valor adicione a seguinte string:%ANT_HOME%bin;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools;

Até aqui já temos um ambiente pronto para desenvolver um app para android, agora iremos  instalar as ferramentas necessárias para utilizar o PhoneGap.

Instalando Node.js

Faça download do Node.js no site: http://nodejs.org/download/

Depois faça a instalação do mesmo.

Para verificar se a instalação foi feita corretamente abra Prompt de comando e digite :

node –v

Deverá aparece a versão do nodejs instalado em sua maquina conforme mostra a figura a seguir;

Criando um projeto PhoneGap

Agora estamos chegando na parte mais interessante do tutorial, logo abaixo iremos iniciar um projeto de PhoneGap!

Com o Node.js instalado corretamente em sua maquina, abra o Prompt de comando e digite o comando para instalar o Cordova CLI:

– npm install –g cordova

Vá para um diretório onde você irá armazenar seus projetos. Por  exemplo:

– cd ~/Projetos

Crie um projeto chamado “helloword”:

– cordova create helloword br.yourname.helloword Helloword

Entre na pasta do projeto criado:

– cd helloword

Adicione a plataforma que você queira desenvolver. No nosso caso  será para a plataforma Android.

– cordova platforms add android

Agora iremos adicionar alguns plugins básicos para o nosso projeto, ainda na pasta do projeto digite:

– cordova plugin add org.apache.cordova.device

– cordova plugin add org.apache.cordova.console

Verifique a estrutura do projeto criado, na pasta plugins devem conter duas pastas, uma para cada plugin instalado anteriormente e na pasta platforms a pasta android referente à plataforma instalada.

Rodando o projeto

Pronto agora nosso projeto de PhoneGap já pode ser rodado, para que possamos rodar esse projeto conecte um dispositivo Android em seu computador usando um cabo USB, entre na pasta platforms e digite:

– cordova run android

Mas caso você queira rodar seu app em um emulador Android, digite:

– cordova emulate android

E se você achar mais prático testar em seu próprio browser, vá na pasta www de seu projeto e abra o arquivo index.php no navegador de sua escolha.

Há alguns emuladores de dispositivos móveis que rodam em alguns browsers modernos que nos permite utilizar recursos como Accelerometer, compass, etc. Um deles é o Ripple Emulate do Chrome, ele ainda está na fase Beta mas oferece bastante recursos, facilitando assim a nossa vida.

Também desenvolvemos app mobile, caso esteja interessado entre em contato com nossa equipe.

Página oficial do PhoneGap: http://phonegap.com/

Compartilhe nas redes:
Facebook
Twitter
LinkedIn
WhatsApp

Conteúdos relacionados: