SlideShare uma empresa Scribd logo
PhoneGap
Alunos: 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.
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
Arquitetura
Conhecendo o PhoneGap
Conhecendo o PhoneGap
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.
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
Ferramentas
1. Eclipse
2. Android SDK
3. Node.js
4. PhoneGap
Android SDK
http://developer.android.com/sdk/index.html
Node.JS
http://nodejs.org/
PhoneGap com Node.js
http://phonegap.com/install/
1. Após instalar o Node.js
C:> npm install -g phonegap
PhoneGap com Node.js
2. 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 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
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
Usando o PhoneGap
9. Na linha onde contém setContentView()
substitua por
super.loadUrl(
“file:///android_asset/www/index.html”);
Usando o PhoneGap
Estrutura do projeto
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" />
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 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">
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
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
volumedownbutton
volumeupbutton
É executado quando pressiona os botões do volume
(+ / -)
Eventos
Obrigado!

Mais conteúdo relacionado

Mais procurados

Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Gustavo Costa
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Felipe Blini
 
Phonegap
PhonegapPhonegap
Phonegap
Lucas Aquiles
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
Fernando Henrique Bonfim Moreno del Rio
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
Rafael Sakurai
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Loiane Groner
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Leonardo Soares
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Thiago Colares
 
PhoneGap
PhoneGapPhoneGap
Firefox OS
Firefox OSFirefox OS
Firefox OS
Rafael Sakurai
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Wennder Santos
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Wennder Santos
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Cristian Dean
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
Felipe Renan Vieira
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Framework
juniorschroder
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
William Ribeiro da Silva
 
Introdução intel XDK
Introdução intel XDKIntrodução intel XDK
Introdução intel XDK
Vicente Salgueiro Filho
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
Waldyr Felix
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
Gustavo Costa
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
Stefan Horochovec
 

Mais procurados (20)

Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Phonegap
PhonegapPhonegap
Phonegap
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
PhoneGap
PhoneGapPhoneGap
PhoneGap
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Framework
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
Introdução intel XDK
Introdução intel XDKIntrodução intel XDK
Introdução intel XDK
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 

Semelhante a Conhecendo o PhoneGap

Aula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gapAula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gap
Roberson Alves
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
Ildyone Martins
 
Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
TrioBlack Trioblack
 
Adobe Phonegap
Adobe PhonegapAdobe Phonegap
Adobe Phonegap
wlsilva
 
Flex Mobile
Flex MobileFlex Mobile
Flex Mobile
Igor Costa
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
Diogo Souza Machado
 
Chega de lendas! JavaFX em Android
Chega de lendas! JavaFX em AndroidChega de lendas! JavaFX em Android
Chega de lendas! JavaFX em Android
Bruno Oliveira
 
Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.
Vinicius Rodrigues Lima
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegap
slides_teltools
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
Felipe Lastowizka
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
Joelmir Ribacki
 
Treinamento Android Nooclix
Treinamento Android NooclixTreinamento Android Nooclix
Treinamento Android Nooclix
Iury Teixeira
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Leonardo Melo Santos
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Diego Cavalca
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
Adriel Café
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
Diogo Soares Moreira
 
Phonegap ambiente de desenvolvimento
Phonegap ambiente de desenvolvimentoPhonegap ambiente de desenvolvimento
Phonegap ambiente de desenvolvimento
Aruã Sousa
 
Android FREETEC
Android FREETECAndroid FREETEC
Android FREETEC
Nelson Glauber Leal
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Criciúma Dev
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JF
Giordano Bruno Vieira
 

Semelhante a Conhecendo o PhoneGap (20)

Aula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gapAula Aula03 estrutura phone_gap
Aula Aula03 estrutura phone_gap
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 
Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01Phonegap 120118153629-phpapp01
Phonegap 120118153629-phpapp01
 
Adobe Phonegap
Adobe PhonegapAdobe Phonegap
Adobe Phonegap
 
Flex Mobile
Flex MobileFlex Mobile
Flex Mobile
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
Chega de lendas! JavaFX em Android
Chega de lendas! JavaFX em AndroidChega de lendas! JavaFX em Android
Chega de lendas! JavaFX em Android
 
Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegap
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Treinamento Android Nooclix
Treinamento Android NooclixTreinamento Android Nooclix
Treinamento Android Nooclix
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
 
Phonegap ambiente de desenvolvimento
Phonegap ambiente de desenvolvimentoPhonegap ambiente de desenvolvimento
Phonegap ambiente de desenvolvimento
 
Android FREETEC
Android FREETECAndroid FREETEC
Android FREETEC
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JF
 

Último

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 

Último (6)

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 

Conhecendo o PhoneGap

  • 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
  • 23. Ferramentas 1. Eclipse 2. Android SDK 3. Node.js 4. PhoneGap
  • 26. PhoneGap com Node.js http://phonegap.com/install/ 1. Após instalar o Node.js C:> npm install -g phonegap
  • 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" />
  • 34. 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" />
  • 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 }
  • 38. 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>
  • 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