Your SlideShare is downloading. ×
0
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...
História do PhoneGap
● Iniciado por Nitobi Software;
● Adobe adquire Nitobi em 2011;
● PhoneGap foi doado a Fundação Apach...
Apache Cordova x PhoneGap
● PhoneGap é uma distribuição do Apache
Cordova
● Apache Cordova é o motor que move o
PhoneGap
●...
Por quê utilizar o PhoneGap?
Bagunça no desenvolvimento mobile
Plataforma Linguagem
Android Java
iOS Objective-C
Windows P...
Por quê utilizar o PhoneGap?
Problema: muitas plataformas, aparelhos e
lojas de aplicativos.
Solução: utilizar o desenvolv...
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 nor...
Recursos
Android iPhone BlackBerry
Windows
Phone
Symbian WebOS Bada
Acelerômetro ✓ ✓ ✓ ✓ ✓ ✓ ✓
Câmera ✓ ✓ ✓ ✓ ✓ ✓ ✓
Contat...
Arquitetura
Aplicação nativa
Vantagens Desvantagens
Experiência do usuário mais específica Necessita de tempo para desenvolver
código ...
Aplicação web
Vantagens Desvantagens
A aplicação pode rodar em múltiplas
plataformas.
A experiência do usuário do aplicati...
Adobe PhoneGap Build
● O Phonegap Build é um ambiente feito pela
a Adobe para facilitar a compilação do
projeto.
● Permite compilar seu projeto...
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.co...
Usando o PhoneGap
1. Criar um novo projeto Android
2. Criar a pasta libs
3. Criar a pasta www dentro da pasta assets
4. Cr...
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 a...
Usando o PhoneGap
9. Na linha onde contém setContentView()
substitua por
super.loadUrl(
“file:///android_asset/www/index.h...
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
<...
Usando o PhoneGap
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
a...
Usando o PhoneGap
Ainda no AndroidManifest.xml, localize a
linha
<activity android:name="com.example.olamundo.MainActivity...
Eventos no PhoneGap
● Um evento no PhoneGap é similar ao
eventos que existem no JavaScript
● Detecta quando uma ação é rea...
deviceready
● O evento deviceready é chamado quando o
Cordova for completamente carregado e
pronto para o uso.
● Esse even...
deviceready
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" src="cordova....
Evento Descrição
deviceready É executado quando o Cordova é carregado
completamente
pause É executado quando uma aplicação...
Evento Descrição
batterylow É executado quando a bateria atinge um nivel baixo
de carga
batterystatus É executado quando o...
Obrigado!
Conhecendo o PhoneGap
Conhecendo o PhoneGap
Upcoming SlideShare
Loading in...5
×

Conhecendo o PhoneGap

2,633

Published on

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.

Published in: Technology

Transcript of "Conhecendo o PhoneGap"

  1. 1. PhoneGap Alunos: Cristiano Gomes Leandro Oliveira
  2. 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. 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. 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. 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. 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.
  7. 7. Plataformas suportadas
  8. 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. 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
  10. 10. Arquitetura
  11. 11. 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
  12. 12. 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.
  13. 13. Adobe PhoneGap Build
  14. 14. ● 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
  15. 15. Adobe PhoneGap Build
  16. 16. Upload do projeto
  17. 17. Informações do projeto
  18. 18. Build do projeto
  19. 19. Build do projeto
  20. 20. PhoneGap + Android
  21. 21. Ferramentas 1. Eclipse 2. Android SDK 3. Node.js 4. PhoneGap
  22. 22. Android SDK http://developer.android.com/sdk/index.html
  23. 23. Node.JS http://nodejs.org/
  24. 24. PhoneGap com Node.js http://phonegap.com/install/ 1. Após instalar o Node.js C:> npm install -g phonegap
  25. 25. PhoneGap com Node.js 2. Apos instalar o PhoneGap $ phonegap create my-app $ cd my-app $ phonegap run android
  26. 26. Download do PhoneGap ● Dessa forma não é necessário instalar o Node.js ● Download do arquivos no site. http: //phonegap.com/install/
  27. 27. 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
  28. 28. 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
  29. 29. Usando o PhoneGap 9. Na linha onde contém setContentView() substitua por super.loadUrl( “file:///android_asset/www/index.html”);
  30. 30. Usando o PhoneGap Estrutura do projeto
  31. 31. 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" />
  32. 32. 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" />
  33. 33. 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">
  34. 34. 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
  35. 35. 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 }
  36. 36. 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>
  37. 37. 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
  38. 38. 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
  39. 39. Obrigado!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×