Dev Mobile Multiplataforma e Open Source com

Sencha Touch e PhoneGap

Loiane Groner

Loiane GronerJava JUG LeaderSencha Community Leader

7+ XP Java4+ XP Sencha

Software Developer Manager @ Citibank

http://loiane.com@loiane

Autora Técnica Internacional

Sencha Touch

1

Primeiro framework Javascript para desenvolvimento de apps mobile ricas

usando padrões web

Tem Acesso Nativo?

Acesso Nativo

App in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush Notifications

Sencha Packager*PhoneGapEmulator

Sencha Touch não tem

AcelerômetroCompass

File

Phone Gap

2

Sencha Touch+ PhoneGap

3

HTML 5CSS 3

JS

UIWebViewWebView

APIs JS

Stores

Workflow deDesenvolvimento

Mock Up

Desenvolvimento

Testes Simulação

Dispositivo

Store

MOCKUP

Resultado

Mãos à Obra!

sencha generate app Contatos

../beagajs/Contatos

Testes Locais

Testes Automatizados

http://bryntum.com

Hora de Integrar!

app.json

"js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.5.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],

navigator.contacts.find(! fields,! function(deviceContacts) {! //loop over deviceContacts and create Contact model instances! var contacts = [];! for (var i = 0; i < deviceContacts.length; i++) {! var deviceContact = deviceContacts[ i ];

! ! ! ! ! console.log(deviceContact);

! ! ! ! ! var phone = deviceContact.phoneNumbers[0];! ! ! ! ! if (phone){! ! ! ! ! ! phone = phone.value;! ! ! ! ! } else{! ! ! ! ! ! phone = "";! ! ! ! ! }

! ! ! ! ! console.log("phone " + phone);

! var contact = Ext.create('MyContacts.model.Contact',{! id: deviceContact.id,! givenName: deviceContact.name.givenName,! familyName: deviceContact.name.familyName,! phoneNumber: phone,! birthday: new Date(deviceContact.birthday),! notes: deviceContact.note! });! contact.deviceContact = deviceContact;! contacts.push(contact);! }! //return model instances in a result set operation.setResultSet( ! Ext.create('Ext.data.ResultSet', { ! records: contacts, ! total : contacts.length }) );! //announce success! operation.setSuccessful();! operation.setCompleted(); console.log('operation complete');! //finish with callback! if (typeof callback == "function") {! callback.call(scope || thisProxy, operation);! }! },

MyContacts.proxy.ContactsProxy

./create ContatosIOS

com.loiane.beagajs../../../ContatosIOS

Emuladores

RIPPLE

Ferramentas de Debug

iWebInspector

Weinre

Build

XCodeEclipse

build.phonegap.com

Melhores Práticas

sencha app build

Storage

4

REST

JSON-P

CORShttp://enable-cors.org/

Local StorageWeb SQL (SQLite)

Multiplataforma

5

"css": [ { "path": "../../resources/css/base.css", "update": "delta" }, { "path": "resources/css/sencha-touch.css", "platform": ['chrome', 'safari', 'ios'], "update": "delta" }, { "path": "resources/css/android.css", "platform": ['android'], "update": "delta" }, { "path": "resources/css/bb.css", "platform": ['blackberry'], "update": "delta" }, { "path": "resources/css/wp.css", "platform": ['ie10'], "update": "delta" } ]

Nativo x Web

6

Nativo

Web

Acesso Device

Sim

Parcial

Nativo

Web

Acesso Device

Velocidade

Sim Sim

?Parcial

Nativo

Web

Acesso Device

Velocidade Tempo Desenvolvimento

Sim Sim

?

Caro

Parcial Sussa

Nativo

Web

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Sim Sim

?

Caro

Parcial Sussa

Sim

Não

Nativo

Web

Acesso Device

Velocidade Tempo Desenvolvimento

App Store

Cross Platform

Sim Sim

?

Caro

Parcial Sussa

Sim

Não Sim

Não

Nativo

Web

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

Nativo

Web

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

App Híbrida?

Desenvolva Desenvolva

Desenvolva

Teste

Desenvolva

Teste

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build Build

{Híbrido

?

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.”

Sussa*

Plugins

SQLite nativoBarCode Scanner

etc

Produção

7

IssuesApp Store

Parece uma App

Parece app iOS

diferente web

Aprenda a desenvolver para mobile,

não webApp únicaButtons,

iOS Human Interface Design Guidelines Eventos Touch,

não Web

Pinch,Zoom#fail

Agregador de links

App Intuitiva

Hyperlink

Exemplos de Apps

Obrigada!

http://loiane.com@loiane