Palestra sobre Sencha Touch + Phonegap

Sencha Touch e
Phonegap
Um novo mundo mobile

Zaedy Dantas Sayão

segunda-feira, 24 de outubro de 11

Zaedy who?
me = {
nome: ‘Zaedy Dantas Sayão’,
usuarioExtDesde: ‘2006’,
usuarioSenchaTouchDesde: ‘Sempre’,
ministraOnde: ‘iLearn’,
twitter: ‘@zaedysayao’,
email: ‘zaedyjava@gmail.com’,
usuarioExtBrasil: ‘javaman’,
github: ‘javamanrj’
}


Write once


Write once

Run everywhere


Documentos


Documentos

Aplicações


Thin Clients


Thin Clients

Thick Clients


Um PC


Um PC

Múltiplos Devices


Fixo


Fixo

Móvel


Mundo Mobile

• Lançamento do Iphone - 2007
• Iphone com apps - 2008
• Ipad - 2010


Apps


?


Qual você não vai atender?

Apple
6%2%
Android
27%
RIM
24% Microsoft
Symbian

41%

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



Apple
6%2%
Android
27%
RIM
24%
Obj-C Microsoft
Symbian

41%




Apple
6%2%
Android
27%
RIM
24%
Obj-C Microsoft
Symbian

Java 41%




Apple
6%2%
Android
Java 27%
RIM
24%
Obj-C Microsoft
Symbian

Java 41%




C#
Apple
6%2%
Android
Java 27%
RIM
24%
Obj-C Microsoft
Symbian

Java 41%



Symbian C++
C#
Apple
6%2%
Android
Java 27%
RIM
24%
Obj-C Microsoft
Symbian

Java 41%



Aprender várias
linguagens?


Aprender várias
linguagens?

NÃO!


Um retorno a web


Um retorno a web

• Cross-plataform
• Descentralizado
• Fácil Atualização
• Ferramentas e skills familiares
• Tecnologia bem dominada


Uma nova arquitetura
mobile
CSS e Layouts

Javascript

HTML (Semântica)


mobile
CSS e Layouts

Javascript

HTML (Semântica)

File Systems
DBs
App Cache


mobile
CSS e Layouts

Javascript

HTML (Semântica)

File Systems Worker
DBs Parallel
App Cache Processing


mobile
CSS e Layouts

Javascript

HTML (Semântica)

File Systems Worker
x-App
DBs Parallel
Messaging


mobile
Device Acess CSS e Layouts

Câmera
Javascript
Geolocalização

Contatos
HTML (Semântica)
SMS

Orientação
File Systems Worker
x-App
DBs Parallel
Gyro Messaging


mobile
Device Acess CSS e Layouts Server e Services

Câmera HTTP
Javascript
Geolocalização AJAX

Contatos Events
HTML (Semântica)
SMS Sockets

Orientação SSL
File Systems Worker
x-App
DBs Parallel
Gyro Messaging Mais...


O que somos capazes?


O que queremos fazer?


Usuário quer?


Usuário quer?

USAR


A resposta


A resposta

SENCHA TOUCH


A empresa


A empresa
• www.sencha.com
• ExtJS
• Ext GWT
• Sencha Touch
• Sencha Animator
• Sencha.io

O que é?


O que é?

• Framework Javascript
• Rich mobile apps
• Web standards
• HTML5, CSS3 e JS


O que tem no Sencha
Touch?


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áﬁcos

Componentes


Componentes
• List • Toolbars

• Nested, Grouped, • Botões
Sortable
• HTML
• Carousel
• Audio
• Picker
• Vídeo
• Overlay
• Geolocalização
• Slider

• Forms

List


Carousel


Sheets


Eventos
• Feito baseado em eventos nativos
• Abstração
• Eventos adicionais:
• Tap

• Double tap

• Tap and Hold

• Swipe

• Rotate

• Drag and drop

Data Package
• Model, Stores e Proxies

• Associations

• Validations

• Local e server storage

• Webservices

• JSON/P

• Ajax

• YQL


Temas
• CSS3
• SASS
• Temas ﬂexíveis
• Otimizados
• Ex:
• $base-color: #ff6699

Gráﬁcos


Write once, run
everywhere?


Write once, run
everywhere?

Quase!


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


Quase mas você pode
reaproveitar muito
código!


.
Web
. Mobile

.
.
Controllers

Models

Stores

Proxies

Server


Lembrando
Para dispositivos
móveis,
adapte mas escreva
apenas uma vez
sempre!

E como distribuir?
E como acessar o
device?


E como distribuir?
E como acessar o
device?

Phonegap!


O que é?
• “Empacotador”
• Deploy para várias plataformas
• Acesso nativo


O que suporta
• Acelerômetro • Device

• Câmera • Eventos

• Captura de sons, vídeos • Arquivos
e imagens
• Geolocalização
• Bússula
• Mídia
• Conexão
• Notiﬁcações
• Contatos
• Storage


Quero algo que não é
suportado


Quero algo que não é
suportado

Plugins


O que é possível fazer


O que é possível fazer

Com Sencha Touch +
Phonegap?


O que sua mente
permitir


O que sua mente
permitir

E seu chefe deixar....


Exemplos?

• www.sencha.com/apps


Perguntas?


Palestra sobre Sencha Touch + Phonegap

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Palestra sobre Sencha Touch + Phonegap