Introdução ao phonegap

1. PhoneGap
Ambiente de desenvolvimento
Grupo: Aruã de Mello Sousa
Renata Guimarães D. de F. Costa

2. Introdução
•
• PhoneGap é um framework de desenvolvimento
móvel
• A principal vantagem do PhoneGap é ser cross-
platform: uma vez desenvolvido o aplicativo, o
mesmo código-fonte poderá ser utilizado para
qualquer outra plataforma sem a necessidade
de ser reescrito em Java, Objective-C ou
qualquer outra linguagem especifica
• Possibilita construir aplicativos para dispositivos
móveis utilizando javascript html5 e css3

3. Introdução
● Open-Source
● Capaz de gerar aplicativos
híbridos e até mesmo nativos
● PhoneGap-Build
○ Geração de aplicativos para
diversas plataformas
○ Build em nuvem
○ Elimina necessidade de
Sistemas Operacionais
específicos

4. PhoneGap
• As aplicações resultantes são híbridas:
- não são completamente nativas ao aparelho, pois todo o layout é
renderizado através de web views ao invés de um framework nativo
- nem são aplicativos web, pois são rodados nativamente e tem acesso as
APIs dos dispositivos.

5. Ambiente de desenvolvimento
• Permite a utilização de diferentes IDEs:
• Eclipse
• Sublime
• XCode (MacOS)
• Visual Studio (Windows)
• Existem diversos plugins, tanto da própria Adobe quanto de terceiros para auxiliar no
desenvolvimento

6. Eclipse

11. Configuração do Ambiente de
Desenvolvimento
É possível utilizar multiplas IDEs pois, tanto a
configuração quanto a compilação são
independentes da IDE

12. Cordova - Instalação em Unix
• Primeiramente faça download e instalação de node.js
(http://nodejs.org/) e após instale o cordova
$ sudo npm install -g cordova
• No diretório onde está o código fonte
$ cordova create hello com.example.hello "HelloWorld"
$ cd hello
$ cordova platform add
$ cordova build

13. Cordova - Instalação em MacOS
• Instalar Xcode
• Baixar e instalar
PhoneGap
(http://phonegap.c
om/install/)

14. Emulação
SDKs para plataformas móveis vem
empacotados com emuladores que
executam uma imagem de
dispositivos, para que seja
possivel ver a interação do
aplicativo com as funcionalidades
da plataforma.

15. Emulação
Rode este
comando para
reconfigurar o
aplicativo e vê-lo
no emulador da
plataforma
$ cordova emulate android

16. Dúvidas?

17. Referências
• http://www.adobe.com/devnet/html5/articles/getting-started-with-
phonegap-in-xcode-for-ios.html
• http://mark.burazin.net/phonegap-apache-cordova-osx-sublime-text-2/
• http://docs.phonegap.com/en/3.4.0/guide_platforms_index.md.html#Platfor
m%20Guides
• http://docs.phonegap.com/en/3.4.0/guide_cli_index.md.html#The%20Com
mand-Line%20Interface
• http://anindita9.wordpress.com/tag/phonegap-windows-phone-visual-
studio-2010-2012/