41
PhoneGap Alunos: Cristiano Gomes Leandro Oliveira

Conhecendo o PhoneGap

Embed Size (px)

DESCRIPTION

Apresentação para a aula de Tecnologias WEB no curso Tecnologia em Análise e Desenvolvimento de Sistemas (IFRN) mostrando noções básicas sobre o PhoneGap, e exemplo de codigo.

Citation preview

Page 1: Conhecendo o PhoneGap

PhoneGapAlunos: Cristiano Gomes Leandro Oliveira

Page 2: Conhecendo o PhoneGap

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.”

Page 3: Conhecendo o PhoneGap

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/

Page 4: Conhecendo o PhoneGap

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

Page 5: Conhecendo o PhoneGap

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

Page 6: Conhecendo o PhoneGap

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.

Page 7: Conhecendo o PhoneGap

Plataformas suportadas

Page 8: Conhecendo o PhoneGap

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.

Page 9: Conhecendo o PhoneGap

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

Page 10: Conhecendo o PhoneGap

Arquitetura

Page 11: Conhecendo o PhoneGap
Page 12: Conhecendo o PhoneGap
Page 13: Conhecendo o PhoneGap

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

Page 14: Conhecendo o PhoneGap

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.

Page 15: Conhecendo o PhoneGap

Adobe PhoneGap Build

Page 16: Conhecendo o PhoneGap

● 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

Page 17: Conhecendo o PhoneGap

Adobe PhoneGap Build

Page 18: Conhecendo o PhoneGap

Upload do projeto

Page 19: Conhecendo o PhoneGap

Informações do projeto

Page 20: Conhecendo o PhoneGap

Build do projeto

Page 21: Conhecendo o PhoneGap

Build do projeto

Page 22: Conhecendo o PhoneGap

PhoneGap + Android

Page 23: Conhecendo o PhoneGap

Ferramentas1. Eclipse

2. Android SDK

3. Node.js

4. PhoneGap

Page 24: Conhecendo o PhoneGap

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

Page 25: Conhecendo o PhoneGap

Node.JShttp://nodejs.org/

Page 26: Conhecendo o PhoneGap

PhoneGap com Node.jshttp://phonegap.com/install/1. Após instalar o Node.js

C:\> npm install -g phonegap

Page 27: Conhecendo o PhoneGap

PhoneGap com Node.js2. Apos instalar o PhoneGap

$ phonegap create my-app$ cd my-app$ phonegap run android

Page 28: Conhecendo o PhoneGap

Download do PhoneGap● Dessa forma não é necessário instalar o

Node.js● Download do arquivos no site. http:

//phonegap.com/install/

Page 29: Conhecendo o PhoneGap

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

Page 30: Conhecendo o PhoneGap

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

Page 31: Conhecendo o PhoneGap

Usando o PhoneGap9. Na linha onde contém setContentView() substitua por super.loadUrl(

“file:///android_asset/www/index.html”);

Page 32: Conhecendo o PhoneGap

Usando o PhoneGapEstrutura do projeto

Page 33: Conhecendo o PhoneGap

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" />

Page 34: Conhecendo o PhoneGap

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" />

Page 35: Conhecendo o PhoneGap

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">

Page 36: Conhecendo o PhoneGap

Eventos no PhoneGap● Um evento no PhoneGap é similar ao

eventos que existem no JavaScript● Detecta quando uma ação é realizada no

dispositivo.devicereadypauseresumeonlineofflinebackbuttonbatterycriticalbatterylow

batterystatusmenubuttonsearchbuttonstartcallbuttonendcallbuttonvolumedownbuttonvolumeupbutton

Page 37: Conhecendo o PhoneGap

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

}

Page 38: Conhecendo o PhoneGap

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>

Page 39: Conhecendo o PhoneGap

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

Page 40: Conhecendo o PhoneGap

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

Page 41: Conhecendo o PhoneGap

Obrigado!