O documento descreve o PhoneGap, uma plataforma open source que permite o desenvolvimento de aplicativos móveis multiplataforma usando HTML, CSS e JavaScript. O PhoneGap foi iniciado pela Nitobi Software e depois adquirido pela Adobe. Atualmente é mantido pela Apache Foundation como Apache Cordova. O PhoneGap permite acessar recursos de dispositivos móveis como câmera e GPS através de APIs.

1. PhoneGap
Alunos: Cristiano Gomes
Leandro Oliveira

2. O que é PhoneGap?
“PhoneGap é uma soluções de código aberto
para a construção de aplicativos móveis multi-
plataformas com tecnologias web padrão como
HTML, JavaScript e CSS.”

3. História do PhoneGap
● Iniciado por Nitobi Software;
● Adobe adquire Nitobi em 2011;
● PhoneGap foi doado a Fundação Apache
Software;
● Inicialmente chamado Apache Callback;
● Depois renomeado para Apache Cordova;
● http://cordova.apache.org/

4. Apache Cordova x PhoneGap
● PhoneGap é uma distribuição do Apache
Cordova
● Apache Cordova é o motor que move o
PhoneGap
● PhoneGap poderá possuir outras
ferramentas da Adobe que não seriam
apropriadas ao Projeto Apache
○ PhoneGap Build

5. Por quê utilizar o PhoneGap?
Bagunça no desenvolvimento mobile
Plataforma Linguagem
Android Java
iOS Objective-C
Windows Phone .NET e/ou C#
BlackBerry Java
Symbian C++, Java, Flash Lite

6. Por quê utilizar o PhoneGap?
Problema: muitas plataformas, aparelhos e
lojas de aplicativos.
Solução: utilizar o desenvolvimento web
● Multi plataforma;
● Padrões abertos;
● Código aberto.

7. Plataformas suportadas

8. O que o PhoneGap faz?
Ele é uma ponte entre o browser e as APIs
disponíveis no aparelho. Permite acesso a
recursos que normalmente não são acessíveis
para o browser sozinho.

9. Recursos
Android iPhone BlackBerry
Windows
Phone
Symbian WebOS Bada
Acelerômetro ✓ ✓ ✓ ✓ ✓ ✓ ✓
Câmera ✓ ✓ ✓ ✓ ✓ ✓ ✓
Contatos ✓ ✓ ✓ ✓ ✓ X ✓
Bússola ✓ ✓ X ✓ X ✓ ✓
Arquivos ✓ ✓ ✓ ✓ ✓ X X
GPS ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internet ✓ ✓ ✓ ✓ ✓ ✓ ✓
Arquivos ✓ ✓ ✓ ✓ ✓ X X
Mídia ✓ ✓ X ✓ X X X

10. Arquitetura

13. Aplicação nativa
Vantagens Desvantagens
Experiência do usuário mais específica Necessita de tempo para desenvolver
código diferente para cada plataforma.
SDK pode facilitar o desenvolvimento e
teste dos aplicativos.
Mas caro para desenvolver
Melhor performace. Cada plataforma possui sua propria
linguagem de programação.
Acesso completo ao hardware e
recursos do dispositivo

14. Aplicação web
Vantagens Desvantagens
A aplicação pode rodar em múltiplas
plataformas.
A experiência do usuário do aplicativo
não terá o tom característico do
dispositivo.
HTML/CSS/JavaScript. Não possui acesso a todos os recursos
do dispositivo.

15. Adobe PhoneGap Build

16. ● O Phonegap Build é um ambiente feito pela
a Adobe para facilitar a compilação do
projeto.
● Permite compilar seu projeto para 6
plataformas diferentes ao mesmo tempo.
● Possui integração com o GitHub.
● O codigo do projeto pode ser lido direto do
GitHub ou de um arquivo .zip
Adobe PhoneGap Build

17. Adobe PhoneGap Build

18. Upload do projeto

19. Informações do projeto

20. Build do projeto

21. Build do projeto

22. PhoneGap + Android

23. Ferramentas
1. Eclipse
2. Android SDK
3. Node.js
4. PhoneGap

24. Android SDK
http://developer.android.com/sdk/index.html

25. Node.JS
http://nodejs.org/

26. PhoneGap com Node.js
http://phonegap.com/install/
1. Após instalar o Node.js
C:> npm install -g phonegap

27. PhoneGap com Node.js
2. Apos instalar o PhoneGap
$ phonegap create my-app
$ cd my-app
$ phonegap run android

28. Download do PhoneGap
● Dessa forma não é necessário instalar o
Node.js
● Download do arquivos no site. http:
//phonegap.com/install/

29. Usando o PhoneGap
1. Criar um novo projeto Android
2. Criar a pasta libs
3. Criar a pasta www dentro da pasta assets
4. Criar a pasta xml dentro da pasta res

30. Usando o PhoneGap
5. Colar o arquivo phonegap-2.9.0.jar em /libs
6. Colar o arquivo cordava.js em /assets/www
7. Criar o arquivo config.xml na pasta /res/xml
8. Na pasta src, alterar o extends da classe
MainActivity de Activity para DroidGap

31. Usando o PhoneGap
9. Na linha onde contém setContentView()
substitua por
super.loadUrl(
“file:///android_asset/www/index.html”);

32. Usando o PhoneGap
Estrutura do projeto

33. Usando o PhoneGap
Abrir o arquivo AndroidManifest.xml no editor
e localize a seguinte linha:
E inserir o código a seguir
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.olamundo"
android:versionCode="1"
android:versionName="1.0">
<-- aqui vai o código do phoneGap -->
<uses-sdk android:minSdkVersion="8" />

34. Usando o PhoneGap
<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" />

35. Usando o PhoneGap
Ainda no AndroidManifest.xml, localize a
linha
<activity android:name="com.example.olamundo.MainActivity"
android:label="@string/app_name">
e modifique para:
<activity android:name="com.example.olamundo.MainActivity"
android:configChanges="orientation|keyboardHidden"
android:label="@string/app_name">

36. Eventos no PhoneGap
● Um evento no PhoneGap é similar ao
eventos que existem no JavaScript
● Detecta quando uma ação é realizada no
dispositivo.
deviceready
pause
resume
online
offline
backbutton
batterycritical
batterylow
batterystatus
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton

37. deviceready
● O evento deviceready é chamado quando o
Cordova for completamente carregado e
pronto para o uso.
● Esse evento é essencial para qualquer
aplicação.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady,
false);
}
function onDeviceReady() {
// Now safe to use device APIs
}

38. deviceready
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("Ok!");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

39. Evento Descrição
deviceready É executado quando o Cordova é carregado
completamente
pause É executado quando uma aplicação é colocaga em
segundo plano
resume É executado quando a aplicação volta para o
primeiro plano
online É executado quando o dispositivo se conectado a
internet
offline É executado quando a aplicação se desconecta e o
dispositivo não esta conectado a internet.
backbutton É executado quando pressiona o botão voltar
batterycritical É executado quando a bateria atinge um nivel critico
de carga.
Eventos

40. Evento Descrição
batterylow É executado quando a bateria atinge um nivel baixo
de carga
batterystatus É executado quando ocorre uma mudança no
estado da bateria (leve, isPlugged)
menubutton É executado quando pressiona o botão menu
searchbutton É executado quando pressiona o botão de buscar
startcallbutton É executado quando pressiona o botão de iniciar
chamada
endcallbutton É executado quando pressiona o botão de finalizar
chamada
volumedownbutton
volumeupbutton
É executado quando pressiona os botões do volume
(+ / -)
Eventos

41. Obrigado!