palestra sencha touch + phonegap

99
Sencha Touch e Phonegap Um novo mundo mobile Zaedy Dantas Sayão segunda-feira, 24 de outubro de 11

Upload: javamanrj

Post on 12-Jan-2015

1.114 views

Category:

Technology


2 download

DESCRIPTION

Palestra de Sencha Touch + Phonegap por Zaedy Sayão

TRANSCRIPT

Page 1: Palestra Sencha Touch + Phonegap

Sencha Touch e Phonegap

Um novo mundo mobile

Zaedy Dantas Sayão

segunda-feira, 24 de outubro de 11

Page 2: Palestra Sencha Touch + Phonegap

Zaedy who?me = {

nome: ‘Zaedy Dantas Sayão’,usuarioExtDesde: ‘2006’,usuarioSenchaTouchDesde: ‘Sempre’,twitter: ‘@zaedysayao’,email: ‘[email protected]’,usuarioExtBrasil: ‘javaman’,github: ‘javamanrj’

}

segunda-feira, 24 de outubro de 11

Page 3: Palestra Sencha Touch + Phonegap

Write once

segunda-feira, 24 de outubro de 11

Page 4: Palestra Sencha Touch + Phonegap

Write once

Run everywhere

segunda-feira, 24 de outubro de 11

Page 5: Palestra Sencha Touch + Phonegap

Documentos

segunda-feira, 24 de outubro de 11

Page 6: Palestra Sencha Touch + Phonegap

Documentos

segunda-feira, 24 de outubro de 11

Page 7: Palestra Sencha Touch + Phonegap

Documentos

Aplicações

segunda-feira, 24 de outubro de 11

Page 8: Palestra Sencha Touch + Phonegap

Thin Clients

segunda-feira, 24 de outubro de 11

Page 9: Palestra Sencha Touch + Phonegap

Thin Clients

segunda-feira, 24 de outubro de 11

Page 10: Palestra Sencha Touch + Phonegap

Thin Clients

Thick Clients

segunda-feira, 24 de outubro de 11

Page 11: Palestra Sencha Touch + Phonegap

Um PC

segunda-feira, 24 de outubro de 11

Page 12: Palestra Sencha Touch + Phonegap

Um PC

segunda-feira, 24 de outubro de 11

Page 13: Palestra Sencha Touch + Phonegap

Um PC

Múltiplos Devices

segunda-feira, 24 de outubro de 11

Page 14: Palestra Sencha Touch + Phonegap

Fixo

segunda-feira, 24 de outubro de 11

Page 15: Palestra Sencha Touch + Phonegap

Fixo

segunda-feira, 24 de outubro de 11

Page 16: Palestra Sencha Touch + Phonegap

Fixo

Móvel

segunda-feira, 24 de outubro de 11

Page 17: Palestra Sencha Touch + Phonegap

Mundo Mobile

• Lançamento do Iphone - 2007

• Iphone com apps - 2008

• Ipad - 2010

segunda-feira, 24 de outubro de 11

Page 18: Palestra Sencha Touch + Phonegap

Apps

segunda-feira, 24 de outubro de 11

Page 19: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 20: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 21: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 22: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 23: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 24: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 25: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 26: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 27: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 28: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 29: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 30: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 31: Palestra Sencha Touch + Phonegap

?

segunda-feira, 24 de outubro de 11

Page 32: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

segunda-feira, 24 de outubro de 11

Page 33: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

Obj-C

segunda-feira, 24 de outubro de 11

Page 34: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

Obj-C

Java

segunda-feira, 24 de outubro de 11

Page 35: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

Obj-C

Java

Java

segunda-feira, 24 de outubro de 11

Page 36: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

Obj-C

Java

Java

C#

segunda-feira, 24 de outubro de 11

Page 37: Palestra Sencha Touch + Phonegap

2%6%

24%

41%

27%

AppleAndroidRIMMicrosoftSymbian

Top Smartphone Platforms3 Month Avg. Ending Jun. 2011 2011Total U.S. Smartphone Subscribers Ages 13+Source: comScore MobiLens

Qual você não vai atender?

Obj-C

Java

Java

C# Symbian C++

segunda-feira, 24 de outubro de 11

Page 38: Palestra Sencha Touch + Phonegap

Aprender várias linguagens?

segunda-feira, 24 de outubro de 11

Page 39: Palestra Sencha Touch + Phonegap

Aprender várias linguagens?

NÃO!

segunda-feira, 24 de outubro de 11

Page 40: Palestra Sencha Touch + Phonegap

Um retorno a web

segunda-feira, 24 de outubro de 11

Page 41: Palestra Sencha Touch + Phonegap

Um retorno a web

• Cross-plataform

• Descentralizado

• Fácil Atualização

• Ferramentas e skills familiares

• Tecnologia bem dominada

segunda-feira, 24 de outubro de 11

Page 42: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 43: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 44: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

segunda-feira, 24 de outubro de 11

Page 45: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

File SystemsDBs

App Cache

segunda-feira, 24 de outubro de 11

Page 46: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

File SystemsDBs

App Cache

WorkerParallel

Processing

segunda-feira, 24 de outubro de 11

Page 47: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

File SystemsDBs

App Cache

WorkerParallel

Processing

x-App Messaging

segunda-feira, 24 de outubro de 11

Page 48: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

File SystemsDBs

App Cache

WorkerParallel

Processing

x-App Messaging

Device Acess

Câmera

Geolocalização

Contatos

SMS

Orientação

Gyro

segunda-feira, 24 de outubro de 11

Page 49: Palestra Sencha Touch + Phonegap

Uma nova arquitetura mobile

Javascript

CSS e Layouts

HTML (Semântica)

File SystemsDBs

App Cache

WorkerParallel

Processing

x-App Messaging

Device Acess

Câmera

Geolocalização

Contatos

SMS

Orientação

Gyro

Server e Services

HTTP

AJAX

Events

Sockets

SSL

Mais...

segunda-feira, 24 de outubro de 11

Page 50: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 51: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 52: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 53: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 54: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 55: Palestra Sencha Touch + Phonegap

O que somos capazes?

segunda-feira, 24 de outubro de 11

Page 56: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 57: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 58: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 59: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 60: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 61: Palestra Sencha Touch + Phonegap

O que queremos fazer?

segunda-feira, 24 de outubro de 11

Page 62: Palestra Sencha Touch + Phonegap

Usuário quer?

segunda-feira, 24 de outubro de 11

Page 63: Palestra Sencha Touch + Phonegap

Usuário quer?

USAR

segunda-feira, 24 de outubro de 11

Page 64: Palestra Sencha Touch + Phonegap

A resposta

segunda-feira, 24 de outubro de 11

Page 65: Palestra Sencha Touch + Phonegap

A resposta

SENCHA TOUCH

segunda-feira, 24 de outubro de 11

Page 66: Palestra Sencha Touch + Phonegap

A empresa

segunda-feira, 24 de outubro de 11

Page 67: Palestra Sencha Touch + Phonegap

A empresa

• www.sencha.com

• ExtJS

• Ext GWT

• Sencha Touch

• Sencha Animator

• Sencha.io

segunda-feira, 24 de outubro de 11

Page 68: Palestra Sencha Touch + Phonegap

O que é?

segunda-feira, 24 de outubro de 11

Page 69: Palestra Sencha Touch + Phonegap

O que é?

• Framework Javascript

• Rich mobile apps

• Web standards

• HTML5, CSS3 e JS

segunda-feira, 24 de outubro de 11

Page 70: Palestra Sencha Touch + Phonegap

O que tem no Sencha Touch?

segunda-feira, 24 de outubro de 11

Page 71: Palestra Sencha Touch + Phonegap

O que tem no Sencha Touch?

• Layouts e componentes

• Temas e ícones

• Orientação e Animação

• Eventos de Touch e scroll

• Data package

• MVC

• Gráficos

segunda-feira, 24 de outubro de 11

Page 72: Palestra Sencha Touch + Phonegap

Componentes

segunda-feira, 24 de outubro de 11

Page 73: Palestra Sencha Touch + Phonegap

Componentes• List

• Nested, Grouped, Sortable

• Carousel

• Picker

• Overlay

• Slider

• Forms

• Toolbars

• Botões

• HTML

• Audio

• Vídeo

• Geolocalização

segunda-feira, 24 de outubro de 11

Page 74: Palestra Sencha Touch + Phonegap

List

segunda-feira, 24 de outubro de 11

Page 75: Palestra Sencha Touch + Phonegap

Carousel

segunda-feira, 24 de outubro de 11

Page 76: Palestra Sencha Touch + Phonegap

Sheets

segunda-feira, 24 de outubro de 11

Page 77: Palestra Sencha Touch + Phonegap

Eventos

• Feito baseado em eventos nativos

• Abstração

• Eventos adicionais:

• Tap

• Double tap

• Tap and Hold

• Swipe

• Rotate

• Drag and drop

segunda-feira, 24 de outubro de 11

Page 78: Palestra Sencha Touch + Phonegap

Data Package• Model, Stores e Proxies

• Associations

• Validations

• Local e server storage

• Webservices

• JSON/P

• Ajax

• YQL

segunda-feira, 24 de outubro de 11

Page 79: Palestra Sencha Touch + Phonegap

Temas

• CSS3

• SASS

• Temas flexíveis

• Otimizados

• Ex:

• $base-color: #ff6699

segunda-feira, 24 de outubro de 11

Page 80: Palestra Sencha Touch + Phonegap

Gráficos

segunda-feira, 24 de outubro de 11

Page 81: Palestra Sencha Touch + Phonegap

Write once, run everywhere?

segunda-feira, 24 de outubro de 11

Page 82: Palestra Sencha Touch + Phonegap

Write once, run everywhere?

Quase!

segunda-feira, 24 de outubro de 11

Page 83: Palestra Sencha Touch + Phonegap

Dispositivo mobile não é uma Web com 320px!

segunda-feira, 24 de outubro de 11

Page 84: Palestra Sencha Touch + Phonegap

segunda-feira, 24 de outubro de 11

Page 85: Palestra Sencha Touch + Phonegap

Quase mas você pode reaproveitar muito

código!

segunda-feira, 24 de outubro de 11

Page 86: Palestra Sencha Touch + Phonegap

Models

Controllers

Stores

Proxies

Server

Web Mobile

.

.

.

.

segunda-feira, 24 de outubro de 11

Page 87: Palestra Sencha Touch + Phonegap

Lembrando

Para dispositivos móveis,

adapte mas escreva apenas uma vez

sempre!segunda-feira, 24 de outubro de 11

Page 88: Palestra Sencha Touch + Phonegap

E como distribuir?E como acessar o

device?

segunda-feira, 24 de outubro de 11

Page 89: Palestra Sencha Touch + Phonegap

E como distribuir?E como acessar o

device?

Phonegap!

segunda-feira, 24 de outubro de 11

Page 90: Palestra Sencha Touch + Phonegap

O que é?

• “Empacotador”

• Deploy para várias plataformas

• Acesso nativo

segunda-feira, 24 de outubro de 11

Page 91: Palestra Sencha Touch + Phonegap

O que suporta• Acelerômetro

• Câmera

• Captura de sons, vídeos e imagens

• Bússula

• Conexão

• Contatos

• Device

• Eventos

• Arquivos

• Geolocalização

• Mídia

• Notificações

• Storage

segunda-feira, 24 de outubro de 11

Page 92: Palestra Sencha Touch + Phonegap

Quero algo que não é suportado

segunda-feira, 24 de outubro de 11

Page 93: Palestra Sencha Touch + Phonegap

Quero algo que não é suportado

Plugins

segunda-feira, 24 de outubro de 11

Page 94: Palestra Sencha Touch + Phonegap

O que é possível fazer

segunda-feira, 24 de outubro de 11

Page 95: Palestra Sencha Touch + Phonegap

O que é possível fazer

Com Sencha Touch + Phonegap?

segunda-feira, 24 de outubro de 11

Page 96: Palestra Sencha Touch + Phonegap

O que sua mente permitir

segunda-feira, 24 de outubro de 11

Page 97: Palestra Sencha Touch + Phonegap

O que sua mente permitir

E seu chefe deixar....

segunda-feira, 24 de outubro de 11

Page 98: Palestra Sencha Touch + Phonegap

Exemplos?

• www.sencha.com/apps

segunda-feira, 24 de outubro de 11

Page 99: Palestra Sencha Touch + Phonegap

Perguntas?

segunda-feira, 24 de outubro de 11