phonegap
TRANSCRIPT
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.”
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/
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
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
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.
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.
Recursos
Android iPhone BlackBerryWindows
PhoneSymbian 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
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
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.
● 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
PhoneGap com Node.jshttp://phonegap.com/install/1. Após instalar o Node.js
C:\> npm install -g phonegap
PhoneGap com Node.js2. Apos instalar o PhoneGap
$ phonegap create my-app$ cd my-app$ phonegap run android
Download do PhoneGap● Dessa forma não é necessário instalar o
Node.js● Download do arquivos no site.
http://phonegap.com/install/
Usando o PhoneGap1. 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
Usando o PhoneGap5. 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
Usando o PhoneGap9. Na linha onde contém setContentView()
substitua por super.loadUrl(
“file:///android_asset/www/index.html”);
Usando o PhoneGapAbrir 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" />
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" />
Usando o PhoneGapAinda 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">
Eventos no PhoneGap● Um evento no PhoneGap é similar ao
eventos que existem no JavaScript● Detecta quando uma ação é realizada no
dispositivo.devicereadypauseresumeonlineofflinebackbuttonbatterycriticalbatterylow
batterystatusmenubuttonsearchbuttonstartcallbuttonendcallbuttonvolumedownbuttonvolumeupbutton
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}
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>
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
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
volumedownbuttonvolumeupbutton
É executado quando pressiona os botões do volume (+ / -)
Eventos