Upload
cristiano-gomes
View
1.829
Download
0
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
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
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!