PhoneGapAlunos: Cristiano Gomes Leandro Oliveira

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.

Plataformas suportadas

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.

RecursosAndroid 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

Arquitetura

Aplicação nativaVantagens 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 webVantagens 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.

Adobe PhoneGap Build

● 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

Adobe PhoneGap Build

Upload do projeto

Informações do projeto

Build do projeto

Build do projeto

PhoneGap + Android

Ferramentas1. Eclipse

2. Android SDK

3. Node.js

4. PhoneGap

Android SDKhttp://developer.android.com/sdk/index.html

Node.JShttp://nodejs.org/

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 PhoneGapEstrutura do projeto

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

Obrigado!