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 usa o Apache Cordova para acessar recursos de hardware como câmera e GPS. Ele permite que aplicativos sejam compilados para várias plataformas como Android, iOS e Windows Phone.
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.
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
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.
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
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”);
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" />
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
}
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