[curso phonegap / cordova] aula 01: introdução ao phonegap

101
Introdução Curso PhoneGap #1

Upload: loiane-groner

Post on 18-Jan-2015

14.560 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

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

Introdução

Curso PhoneGap

#1

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

Acesso Nativo ao Device usando apenas

JavaScript.

“ http://phonegap.com/

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

Pq Mobile? Pq Multiplataforma?

1

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

Android Java

BlackBerry Java, C++, HTML 5

iOS Objective-C

Palm OS C, C++, Pascal

Symbian C++

Windows Phone C#

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

HTML 5

2

Page 6: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 7: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 8: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

joApp

Wink Toolkit

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

joApp

Wink Toolkit

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

Entendendoo Mundo Mobile

3

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

App Nativa

Dispositivo

App Nativa

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

executa UI e

(alguma) lógica de

negócio

Lógica de negócio

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

Web Browser

Dispositivo

Server Side Web

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

Apenas um

renderizador

Executa UI e Lógica de negócio

Page 13: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 14: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 15: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

Web Browser

Dispositivo

Client Side Web

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

executa UI e

(alguma) lógica de

negócio

Lógica de negócio

JavaScript

Arquivos Imagens/

Documentos

Banco de Dados caching

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

App Nativa

Dispositivo

App Híbrida

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

executa UI e

(alguma) lógica de

negócio

Lógica de negócio

Código Nativo

Interpretador

JavaScript

Ponte

http://

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

Web x Nativo

4

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

Nativo

Web Apps

Acesso Device

Sim

Parcial

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

Nativo

Web Apps

Acesso Device

Velocidade

Sim Sim

?Parcial

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

Nativo

Web Apps

Acesso Device

Velocidade Tempo Desenvolvimento

Sim Sim

?

Caro

Parcial Sussa

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

Nativo

Web Apps

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Sim Sim

?

Caro

Parcial Sussa

Sim

Não

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

Nativo

Web Apps

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Cross Platform

Sim Sim

?

Caro

Parcial Sussa

Sim

Não Sim

Não

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

App Híbrida?

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

Web x Nativo x Híbrido

5

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

Nativo

Web Apps

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Cross Platform

Sim Sim

?

Caro

Parcial Sussa

Sim

Não Sim

Não

Híbrido Sim ? Sussa* Sim Sim

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

Nativo

Web Apps

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Cross Platform

Sim Sim

?

Caro

Parcial Sussa

Sim

Não Sim

Não

Híbrido Sim ? Sussa* Sim Sim

?

Sussa*

Já vamos discutir

Já vamos discutir

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

?

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

Our biggest mistake was betting too much

on HTML5

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

In your face!

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

“So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”!

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

PhoneGap

6

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

•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

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

A partir do Phonegap 1.5.0

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

Apache Cordova

•Cordova é o projeto Open Source

•PhoneGap é a implementação

•http://incubator.apache.org/cordova/

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

O que é Phonegap / Cordova?

•Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo

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

Phonegap é WORA?

Write Once, Run Anywhere?

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

Write Once DEBUG Anywhere

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

Desenvolva Desenvolva

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

Desenvolva

Teste

Desenvolva

Teste

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

Desenvolva

Teste

Build

Desenvolva

Teste

Build

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

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build Build

{Híbrido

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

Trabalhando com Phonegap

7

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

HTML 5 CSS 3

JS

UIWebView WebView

APIs JS

Stores

Page 48: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 49: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 50: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

API

8

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

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);

Acceleration

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

function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }

Capturar Foto

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

function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }

Capturar Foto com Edição

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

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>

Busca Foto do Dispositivo

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

function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; !function onError(error) { alert('CompassError: ' + error.code); }; !navigator.compass.getCurrentHeading(onSuccess, onError);

Compass/Bússula

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

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();

Conexão

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

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); });

In App Browser

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

navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName );

Notification - Alert

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

function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); }

Notification - Confirm

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

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

Notification - Beep

Não funciona no iOS

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

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

Notification - Vibrar

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

Demo

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

UI Frameworks

9

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

jQT

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

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!'); }

Contatos

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

Touch

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

Workflow de Desenvolvimento

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

Mock Up

Desenvolvimento

Testes Simulação

Dispositivo

Store

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

M O C K U P

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

Resultado

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

Emuladores

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

R I P P L E

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

Ferramentas de Debug

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

iWebInspector

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

Weinre

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

Produção

10

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

XCode Eclipse

build.phonegap.com

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

Plugins

11

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

Sussa*

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

SQLite nativo BarCode Scanner

etc

https://github.com/phonegap/phonegap-plugins

https://github.com/brodyspark/PhoneGap-SQLitePlugin-iOS

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

Exemplos de Apps

http://phonegap.com/app/

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

Quando não usar?

11

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

Threads

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

#FAIL

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

<div id="jogador">

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

http://phonegap.com/app/fruit-salad/

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

Recomendações Antes de Começar

12

Page 94: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 95: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 96: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 97: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 98: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Page 99: [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

$99 anuais

$25

$0

$19 - $99 anuais

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

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

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

Obrigada!

http://loiane.com