#1

Curso
PhoneGap
Introdução
“

Acesso Nativo ao
Device usando apenas
JavaScript.
http://phonegap.com/
1

Pq Mobile?
Pq Multiplataforma?
Android

Java

BlackBerry

Java, C++, HTML 5

iOS

Objective-C

Palm OS

C, C++, Pascal

Symbian

C++

Windows Phone

C#
2

HTML 5
joApp
Wink Toolkit
joApp
Wink Toolkit
3

Entendendoo
Mundo Mobile
App Nativa

Lógica

de negó

Web Server
tp://
ht

Java/PHP/
Ruby/C#

App Nativa
Arquivos

Imagens/	

Documentos

UI e de
D...
Server Side Web

Execut
a UI e
Lógica
de negó
cio

Web Server
tp://
ht

Java/PHP/
Ruby/C#

Web Browser
Arquivos

Imagens/	...
Client Side Web
Web Browser
JavaScript

Arquivos

Imagens/	

Documentos

Lógica

de negó

Web Server
tp://
ht

Banco de
Da...
App Híbrida
App Nativa
Código Nativo

Lógica

de negó

Web Server
p://
htt

Interpretador

Java/PHP/
Ruby/C#

://
tp

ht

...
4

Web x
Nativo
Acesso
Device

Nativo

Sim

Web Apps

Parcial
Acesso
Device

Velocidade

Nativo

Sim

Sim

Web Apps

Parcial

?
Acesso
Device

Velocidade

Tempo
Desenvolvimento

Nativo

Sim

Sim

Caro

Web Apps

Parcial

?

Sussa
Acesso
Device

Nativo
Web Apps

Velocidade

Tempo
Desenvolvimento

App
Store

Sim

Sim

Caro

Sim

Parcial

?

Sussa

Não
Acesso
Device

Nativo
Web Apps

Velocidade

Tempo
Desenvolvimento

App
Store

Cross
Platform

Sim

Sim

Caro

Sim

Não

Pa...
App
Híbrida?
5

Web x
Nativo x
Híbrido
Acesso
Device

Nativo

Velocidade

Tempo
Desenvolvimento

App
Store

Cross
Platform

Sim

Sim

Caro

Sim

Não

Web Apps

P...
Acesso
Device

Nativo

Velocidade

Tempo
Desenvolvimento

App
Store

Cross
Platform

Sim

Sim

Caro

Sim

Não

Web Apps

P...
?
Our biggest mistake
was betting too much
on HTML5
In your face!
“So, when Mark Zuckerberg said
HTML5 wasn't ready, we took a little
offense to the comment.”!
6

PhoneGap
•2008: início
•2008:suporte a iPhone, Android e Blackberry 4
•2009: suporte a Symbian e webOS
•2011: suporte a Windows Pho...
A partir do Phonegap 1.5.0
Apache Cordova

•Cordova é o projeto Open Source
•PhoneGap é a implementação
•http://incubator.apache.org/cordova/
O que é Phonegap /
Cordova?

•Chromeless webkit

browser
•Plataforma mobile HTML 5
(wrapper)
•Acesso Nativo
Phonegap é
WORA?
Write Once, Run Anywhere?
Write Once
DEBUG Anywhere
Desenvolva

Desenvolva
Desenvolva

Desenvolva

Teste

Teste
Desenvolva

Desenvolva

Teste

Teste

Build

Build
Desenvolva

Desenvolva

Híbrido
Teste

Teste

Build

Build

{

Desenvolva

Build

Teste

Build
7

Trabalhando com
Phonegap
UIWebView
WebView

HTML 5
CSS 3
JS

Stores

APIs JS
8

API
Acceleration
function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + 'n' +
          'Accelerat...
Capturar Foto

function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinatio...
Capturar Foto com Edição

function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality:...
Busca Foto do Dispositivo

function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 5...
Compass/Bússula

function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
!
function onError(error) ...
Conexão
function checkConnection() {
var networkState = navigator.connection.type;
!
var states = {};
states[Connection.UN...
Propriedades do Dispositivo

function onDeviceReady() {
var element = document.getElementById('deviceProperties');
!
eleme...
In App Browser

var ref = window.open('http://loiane.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', fu...
Notification - Alert

navigator.notification.alert(
'Alerta!', // message
alertDismissed,
// callback
'Titulo',
// title
'...
Notification - Confirm

function showConfirm() {
navigator.notification.confirm(
'Confirmar?', // message
onConfirm,
// ca...
Notification - Beep

// Beepa 3 vezes
function playBeep() {
navigator.notification.beep(3);
}

Não funciona no iOS
Notification - Vibrar

// Vibra por 2 segundos
function vibrate() {
navigator.notification.vibrate(2000);
}
Demo
9

UI
Frameworks
jQT
Contatos
function onDeviceReady() {
// acha todos os contatos com 'Loiane' em qualquer campo nome
var options = new Contac...
Touch
Workflow de
Desenvolvimento
Store

Mock Up

Desenvolvimento

Testes

Dispositivo

Simulação
M
O
C
K
U
P
Resultado
Emuladores
R
I
P
P
L
E
Ferramentas de
Debug
iWebInspector
Weinre
10

Produção
XCode
Eclipse
build.phonegap.com
11

Plugins
Sussa*
SQLite nativo
BarCode Scanner
etc
https://github.com/phonegap/phonegap-plugins
https://github.com/brodyspark/PhoneGapSQLit...
Exemplos
de Apps
http://phonegap.com/app/
11

Quando não
usar?
Threads
#FAIL
<div id="jogador">
http://phonegap.com/app/fruit-salad/
12

Recomendações
Antes de Começar
$99 anuais
$25
$0

$19 - $99 anuais
http://loiane.com
facebook.com/loianegroner

@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!
http://loiane.com
[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
[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
[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
[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
[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
Upcoming SlideShare
Loading in …5
×

[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

30,654 views

Published on

Published in: Technology
3 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total views
30,654
On SlideShare
0
From Embeds
0
Number of Embeds
23,283
Actions
Shares
0
Downloads
579
Comments
3
Likes
36
Embeds 0
No embeds

No notes for slide

[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

  1. 1. #1 Curso PhoneGap Introdução
  2. 2. “ Acesso Nativo ao Device usando apenas JavaScript. http://phonegap.com/
  3. 3. 1 Pq Mobile? Pq Multiplataforma?
  4. 4. Android Java BlackBerry Java, C++, HTML 5 iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  5. 5. 2 HTML 5
  6. 6. joApp Wink Toolkit
  7. 7. joApp Wink Toolkit
  8. 8. 3 Entendendoo Mundo Mobile
  9. 9. App Nativa Lógica de negó Web Server tp:// ht Java/PHP/ Ruby/C# App Nativa Arquivos Imagens/ Documentos UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Banco de Dados Backend cio
  10. 10. Server Side Web Execut a UI e Lógica de negó cio Web Server tp:// ht Java/PHP/ Ruby/C# Web Browser Arquivos Imagens/ Documentos Dispositivo um nas dor Ape riza de ren Banco de Dados Backend
  11. 11. Client Side Web Web Browser JavaScript Arquivos Imagens/ Documentos Lógica de negó Web Server tp:// ht Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/PHP/ Ruby/C# Arquivos Imagens/ Documentos Banco de Dados Backend cio
  12. 12. App Híbrida App Nativa Código Nativo Lógica de negó Web Server p:// htt Interpretador Java/PHP/ Ruby/C# :// tp ht Ponte JavaScript UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Imagens/ Documentos Banco de Dados Backend cio
  13. 13. 4 Web x Nativo
  14. 14. Acesso Device Nativo Sim Web Apps Parcial
  15. 15. Acesso Device Velocidade Nativo Sim Sim Web Apps Parcial ?
  16. 16. Acesso Device Velocidade Tempo Desenvolvimento Nativo Sim Sim Caro Web Apps Parcial ? Sussa
  17. 17. Acesso Device Nativo Web Apps Velocidade Tempo Desenvolvimento App Store Sim Sim Caro Sim Parcial ? Sussa Não
  18. 18. Acesso Device Nativo Web Apps Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Parcial ? Sussa Não Sim
  19. 19. App Híbrida?
  20. 20. 5 Web x Nativo x Híbrido
  21. 21. Acesso Device Nativo Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Apps Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim
  22. 22. Acesso Device Nativo Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Apps Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* Já vamos discutir
  23. 23. ?
  24. 24. Our biggest mistake was betting too much on HTML5
  25. 25. In your face!
  26. 26. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”!
  27. 27. 6 PhoneGap
  28. 28. •2008: início •2008:suporte a iPhone, Android e Blackberry 4 •2009: suporte a Symbian e webOS •2011: suporte a Windows Phone 7 •2011: Projeto sob Apache - novo nome
  29. 29. A partir do Phonegap 1.5.0
  30. 30. Apache Cordova •Cordova é o projeto Open Source •PhoneGap é a implementação •http://incubator.apache.org/cordova/
  31. 31. O que é Phonegap / Cordova? •Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
  32. 32. Phonegap é WORA? Write Once, Run Anywhere?
  33. 33. Write Once DEBUG Anywhere
  34. 34. Desenvolva Desenvolva
  35. 35. Desenvolva Desenvolva Teste Teste
  36. 36. Desenvolva Desenvolva Teste Teste Build Build
  37. 37. Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build
  38. 38. 7 Trabalhando com Phonegap
  39. 39. UIWebView WebView HTML 5 CSS 3 JS Stores APIs JS
  40. 40. 8 API
  41. 41. Acceleration function onSuccess(acceleration) {     alert('Acceleration X: ' + acceleration.x + 'n' +           'Acceleration Y: ' + acceleration.y + 'n' +           'Acceleration Z: ' + acceleration.z + 'n' +           'Timestamp: '      + acceleration.timestamp + 'n'); }; ! function onError() {     alert('onError!'); }; ! navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
  42. 42. Capturar Foto function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }
  43. 43. Capturar Foto com Edição function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }
  44. 44. Busca Foto do Dispositivo function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button>
  45. 45. Compass/Bússula function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; ! function onError(error) { alert('CompassError: ' + error.code); }; ! navigator.compass.getCurrentHeading(onSuccess, onError);
  46. 46. Conexão function checkConnection() { var networkState = navigator.connection.type; ! var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; ! alert('Connection type: ' + states[networkState]); } ! checkConnection();
  47. 47. Propriedades do Dispositivo function onDeviceReady() { var element = document.getElementById('deviceProperties'); ! element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Version: ' + device.version + '<br />'; }
  48. 48. In App Browser var ref = window.open('http://loiane.com', '_blank', 'location=yes'); ref.addEventListener('loadstart', function() { alert('start: ' + event.url); }); ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); }); ref.addEventListener('exit', function() { alert(event.type); });
  49. 49. Notification - Alert navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName );
  50. 50. Notification - Confirm function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); }
  51. 51. Notification - Beep // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Não funciona no iOS
  52. 52. Notification - Vibrar // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); }
  53. 53. Demo
  54. 54. 9 UI Frameworks
  55. 55. jQT
  56. 56. Contatos function onDeviceReady() { // acha todos os contatos com 'Loiane' em qualquer campo nome var options = new ContactFindOptions(); options.filter="Loiane"; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); } ! // onSuccess: loga o contato que foi achado function onSuccess(contacts) { for (var i=0; i<contacts.length; i++) { console.log("Display Name = " + contacts[i].displayName); } } ! // onError: Failed to get the contacts function onError(contactError) { alert('onError!'); }
  57. 57. Touch
  58. 58. Workflow de Desenvolvimento
  59. 59. Store Mock Up Desenvolvimento Testes Dispositivo Simulação
  60. 60. M O C K U P
  61. 61. Resultado
  62. 62. Emuladores
  63. 63. R I P P L E
  64. 64. Ferramentas de Debug
  65. 65. iWebInspector
  66. 66. Weinre
  67. 67. 10 Produção
  68. 68. XCode Eclipse build.phonegap.com
  69. 69. 11 Plugins
  70. 70. Sussa*
  71. 71. SQLite nativo BarCode Scanner etc https://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGapSQLitePlugin-iOS
  72. 72. Exemplos de Apps http://phonegap.com/app/
  73. 73. 11 Quando não usar?
  74. 74. Threads
  75. 75. #FAIL
  76. 76. <div id="jogador">
  77. 77. http://phonegap.com/app/fruit-salad/
  78. 78. 12 Recomendações Antes de Começar
  79. 79. $99 anuais $25 $0 $19 - $99 anuais
  80. 80. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  81. 81. Obrigada! http://loiane.com

×