Como fazer uma aplicação com Sencha Touch e Phonegap - Mobile Conf 2014

•

3 likes•2,285 views

HTML5 ou nativo? Nessa palestra responderemos com uma dupla dinâmica: Sencha Touch e Phonegap, capazes de prover o melhor do HTML5 com funcionalidades nativas. A palestra será hands-on e em 50 minutos faremos uma aplicação que rodará diretamente nos devices: iOS, Android, WP8 e BB10. Veremos o processo de build, as facilidades do desenvolvimento híbrido e os contras da tecnologia.

Como fazer uma
aplicação com
Sencha Touch e
Phonegap em 50
minutos
ZAEDY SAYÃO @zaedysayao

WEB

X

WEB

MOBILE
X

MOBILE

MOBILE

2007

2008

APPS

2010

WEB

MOBILE

MOBILE

WEB

MOBILE

2009

PHONEGAP

PHONEGAP

PHONEGAP

PHONEGAP

PHONEGAP

NO

FRAMEWORK

PHONEGAP

PHONEGAP

2010

SENCHA
1

Zaedy Dantas Sayão
@zaedysayao!
@javamanrj!
@javamanrj
!
@WORKS
!
!
http://about.me/zaedy

JQM

2010

FRONTEND
BACKEND
WEB

FRONTEND
BACKEND
WEB
CSS + JS + HTML + RESOURCES
PHP | JAVA | RUBY | PYTHON
| .NET

FRONTEND
BACKEND
WEB
SERVER
BROWSER (CLIENT)

BROWSER

FRONTEND
BACKEND
WEB

BROWSER (CLIENT)
SERVER

SOFTWARE
HARDWARE
APPS

VIEW

VIEW
HARDWARE
APPS

CÂMERA
BOTÃO

VIEW
HARDWARE
APPS

SENCHA TOUCH
PHONEGAP

PHONEGAP
FREE

PHONEGAP
NÃO TEM
COMPONENTE
VISUAL

PHONEGAP
NÃO
CONVERTE EM
CÓDIGO
NATIVO

PHONEGAP
NÃO SE
INTEGRA COM
SERVER

PHONEGAP

PHONEGAP
GERA APLICAÇÃO
NATIVA QUE
PODE ACESSAR O
HARDWARE

PHONEGAP
PHONEGAP NÃO
PARECE NATIVO
X

PHONEGAP

PHONEGAP

PHONEGAP

PHONEGAP
TODAS
WEBAPPS

PHONEGAP
FACEBOOK

DIREITA NATIVA

ESQUERDA WEBAPP

PHONEGAP
phonegap.com/apps

PHONEGAP

PHONEGAP
IMAGINE UM
APP…

PHONEGAP
ELE É
POSSÍVEL!

PHONEGAP
PLUGINS

PHONEGAP
PLUGMAN

PHONEGAP

PHONEGAP
IDE?

QUALQUER
UMA

PHONEGAP
DEBUG??

PHONEGAP
WEINRE

PHONEGAP
RIPPLE

PHONEGAP
IWEBINSPECTOR

PHONEGAP
PONYDEBUGGER

PHONEGAP
debug.phonegap.com

PHONEGAP
PHONEGAP

DEVELOPER

APP

PHONEGAP
PHONEGAP
BUILD

SENCHA
TOUCH

SENCHA TOUCH
EVENTOS DE TOUCH

GRÁFICOS

LISTAS 
BOTÕES

CONTAINERS

DATAVIEWS 
MEDIA

CAROUSEL

ANIMAÇÕES

DATA - AJAX,YQL e
JSONP

TEMAS

ÍCONES

FORMS

MENU

BARRAS

MAPS

SENCHA TOUCH
MVC

FREE

APPROACH OO

COMO
DISTRIBUIR?

DESENVOLVE

EMPACOTA

SUBMETE

APROVA

PHONEGAP

SENCHA TOUCH

SENCHA CMD
PRE-REQs

RUBY

SASS

COMPASS

ANDROID SDK

XCODE

PHONEGAP IOS SIM
PRE-REQs
NODEJS

JAVA

ANT

PATHS CONFIGURADOS

docs.phonegap.com

docs.sencha.com
PRE-REQs

PRE-REQs

DÚVIDAS?

OBRIGADO!
@zaedysayao
http://about.me/zaedy
github.com/javamanrj

More Related Content

Similar to Como fazer uma aplicação com Sencha Touch e Phonegap - Mobile Conf 2014

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

Mobile Web Mega Trend 2010

Mobile Web Mega Trend 2010

Mobile Web Mega Trend 2010

DevChatt 2011 - PhoneGap: For Fun and Science

DevChatt 2011 - PhoneGap: For Fun and Science

DevChatt 2011 - PhoneGap: For Fun and Science

Cameron Kilgore

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Mobile Apps with PhoneGap and jQuery Mobile

Mobile Apps with PhoneGap and jQuery Mobile

Mobile Apps with PhoneGap and jQuery Mobile

Are Web Apps the future for Mobile?

Are Web Apps the future for Mobile?

Are Web Apps the future for Mobile?

Progressive Enhancement & Mobile [Funka 2012]

Progressive Enhancement & Mobile [Funka 2012]

Progressive Enhancement & Mobile [Funka 2012]

Aaron Gustafson

Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ Modular front-end applications that can grow and evolve over time. Many front-end JS toolkits are optimized for building the first version of the app quickly. But for an app that powers a business, you have to think past initial launch. Your app will likely outlive the attention span of those who first wrote it. So, how do we pick tools and architectures that can be modified, maintained, and upgraded over time by a team of people?

Optimizing for Change (Henrik Joreteg)

Optimizing for Change (Henrik Joreteg)

Optimizing for Change (Henrik Joreteg)

Future Insights

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

Sixnology HP33分享

Sixnology HP33分享

Sixnology HP33分享

Johnson CV

Startup Technology: Cheatsheet for Non-Techies

Startup Technology: Cheatsheet for Non-Techies

Startup Technology: Cheatsheet for Non-Techies

From mobile browser to mobile app

From mobile browser to mobile app

From mobile browser to mobile app

Startup Saturday: Mobilliance 2013 Telerik presentation

Startup Saturday: Mobilliance 2013 Telerik presentation

Startup Saturday: Mobilliance 2013 Telerik presentation

Blazor Full-Stack

Blazor Full-Stack

Blazor Full-Stack

I gave my first webinar for Codemotion about Progressive Web Apps (PWAs), the future of web development.  Video (soon in my youtube): https://www.youtube.com/watch?v=de1xiqz-BTE  Twitter: https://twitter.com/JGFerreiro  Linkedin: https://www.linkedin.com/in/jgferreiro/ - - - I think Progressive Web Apps (PWAs) are the next revolution in web development. This practical workshop will explain the basics about PWAs as well as how to integrate it into your own application. What we will cover: • Caching requests and caching strategies. • Setting up your PWA (manifest and progressive metadata) • Payments Api, Local Web Notifications • Other PWA functionalities. - - - Subscribe: https://www.ferreiro.me/newsletter on https://www.twitter.com/jgferreiro on https://www.linkedin.com/in/jgferreiro/ on https://www.instagram.com/jgferreiro/

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Vaadin Introduction, 7.3 edition

Vaadin Introduction, 7.3 edition

Vaadin Introduction, 7.3 edition

Joonas Lehtinen

Saiba como desenvolver Apps para múltiplos sistemas operacionais e dispositivos móveis usando HTML5. Com uma única base de código em HTML5, você pode gerar apps nativos para iOS, Android, Windows 8 e Windows Phone, Tizen e diversos outros sistemas operacionais móveis. Usando o Intel XDK e outras ferramentas gratuitas da Intel, você consegue aprender rapidamente tudo o que precisa para iniciar o desenvolvimento de apps ainda hoje.

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Intel Software Brasil

Saiba como desenvolver Apps para múltiplos sistemas operacionais e dispositivos móveis usando HTML5. Com uma única base de código em HTML5, você pode gerar apps nativos para iOS, Android, Windows 8 e Windows Phone, Tizen e diversos outros sistemas operacionais móveis. Usando o Intel XDK e outras ferramentas gratuitas da Intel, você consegue aprender rapidamente tudo o que precisa para iniciar o desenvolvimento de apps ainda hoje.

Apps multiplataforma com HTML5

Apps multiplataforma com HTML5

Apps multiplataforma com HTML5

Fixing the mobile web - Internet World Romania

Fixing the mobile web - Internet World Romania

Fixing the mobile web - Internet World Romania

Christian Heilmann

Similar to Como fazer uma aplicação com Sencha Touch e Phonegap - Mobile Conf 2014 (20)

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap

Mobile Web Mega Trend 2010

Mobile Web Mega Trend 2010

Mobile Web Mega Trend 2010

DevChatt 2011 - PhoneGap: For Fun and Science

DevChatt 2011 - PhoneGap: For Fun and Science

DevChatt 2011 - PhoneGap: For Fun and Science

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Rock Your Web Apps with Vaadin: Coding Serbia 2014

Mobile Apps with PhoneGap and jQuery Mobile

Mobile Apps with PhoneGap and jQuery Mobile

Mobile Apps with PhoneGap and jQuery Mobile

Are Web Apps the future for Mobile?

Are Web Apps the future for Mobile?

Are Web Apps the future for Mobile?

Progressive Enhancement & Mobile [Funka 2012]

Progressive Enhancement & Mobile [Funka 2012]

Progressive Enhancement & Mobile [Funka 2012]

Optimizing for Change (Henrik Joreteg)

Optimizing for Change (Henrik Joreteg)

Optimizing for Change (Henrik Joreteg)

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...

Sixnology HP33分享

Sixnology HP33分享

Sixnology HP33分享

Johnson CV

Startup Technology: Cheatsheet for Non-Techies

Startup Technology: Cheatsheet for Non-Techies

Startup Technology: Cheatsheet for Non-Techies

From mobile browser to mobile app

From mobile browser to mobile app

From mobile browser to mobile app

Startup Saturday: Mobilliance 2013 Telerik presentation

Startup Saturday: Mobilliance 2013 Telerik presentation

Startup Saturday: Mobilliance 2013 Telerik presentation

Blazor Full-Stack

Blazor Full-Stack

Blazor Full-Stack

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Vaadin Introduction, 7.3 edition

Vaadin Introduction, 7.3 edition

Vaadin Introduction, 7.3 edition

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Desenvolvimento de Apps multiplataforma para dispositivos móveis com HTML5

Apps multiplataforma com HTML5

Apps multiplataforma com HTML5

Apps multiplataforma com HTML5

Fixing the mobile web - Internet World Romania

Fixing the mobile web - Internet World Romania

Fixing the mobile web - Internet World Romania

More from javamanrj

Desenvolvendo Jogos com HTML5

Desenvolvendo Jogos com HTML5

Desenvolvendo Jogos com HTML5

Cada vez mais ferramentas, softwares e devices possuem soluções baseadas no WebKit. Contudo, poucas pessoas sabem o que ele é de verdade, como ele funciona internamente, seu potencial e o que ele oferece. Veremos seus core, discutiremos como é possível usar o WebKit para fazer o seu browser ou usá-lo dentro de sua aplicação e entenderemos seu funcionamento e suas ferramentas disponiveis. Ainda, veremos como funciona a interpretação e run do JavaScript dentro da engine V8

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Física em Games - The Developers Conference - TDC2013

Física em Games - The Developers Conference - TDC2013

Física em Games - The Developers Conference - TDC2013

É sabido que PHP, infelizmente, é mal visto por muitos, principalmente no mundo corporativo. Na palestra, veremos como a comunidade pode fazer para mudar esse cenário, mostrando os pontos fortes da linguagem e como contornar os pontos ruins. Ainda, discutiremos em que pontos a comunidade PHP a nível nacional vem errando e como fazer para que consigamos, juntos, vender melhor o PHP, para que isso se reflita em melhoras para todos, como no tão amado salário.

PHP Presta? Então prove! - The Developers Conference - TDC2013

PHP Presta? Então prove! - The Developers Conference - TDC2013

PHP Presta? Então prove! - The Developers Conference - TDC2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Phonegap - self RJ

Phonegap - self RJ

Phonegap - self RJ

Palestra Sencha Touch + Phonegap

Palestra Sencha Touch + Phonegap

Palestra Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Workshop ExtJS4

Workshop ExtJS4

Workshop ExtJS4

More from javamanrj (9)

Desenvolvendo Jogos com HTML5

Desenvolvendo Jogos com HTML5

Desenvolvendo Jogos com HTML5

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Nas entranhas do WebKit (e V8) - SampaJS 3.1 - 2013

Física em Games - The Developers Conference - TDC2013

Física em Games - The Developers Conference - TDC2013

Física em Games - The Developers Conference - TDC2013

PHP Presta? Então prove! - The Developers Conference - TDC2013

PHP Presta? Então prove! - The Developers Conference - TDC2013

PHP Presta? Então prove! - The Developers Conference - TDC2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

Phonegap - self RJ

Phonegap - self RJ

Phonegap - self RJ

Palestra Sencha Touch + Phonegap

Palestra Sencha Touch + Phonegap

Palestra Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Palestra sobre Sencha Touch + Phonegap

Workshop ExtJS4

Workshop ExtJS4

Workshop ExtJS4

Como fazer uma aplicação com Sencha Touch e Phonegap - Mobile Conf 2014

1. Como fazer uma aplicação com Sencha Touch e Phonegap em 50 minutos ZAEDY SAYÃO @zaedysayao

2.

6.

10.

11. =

14.

25. PHONEGAP NO FRAMEWORK

30.

31. Zaedy Dantas Sayão @zaedysayao! @javamanrj! @javamanrj ! @WORKS ! ! http://about.me/zaedy

33. FRONTEND BACKEND WEB

34. FRONTEND BACKEND WEB CSS + JS + HTML + RESOURCES PHP | JAVA | RUBY | PYTHON | .NET

35. FRONTEND BACKEND WEB SERVER BROWSER (CLIENT)

37. FRONTEND BACKEND WEB BROWSER (CLIENT) SERVER

38. SOFTWARE HARDWARE APPS VIEW

39. VIEW HARDWARE APPS CÂMERA BOTÃO

40. VIEW HARDWARE APPS SENCHA TOUCH PHONEGAP

41. PHONEGAP FREE

42. PHONEGAP NÃO TEM COMPONENTE VISUAL

43. PHONEGAP NÃO CONVERTE EM CÓDIGO NATIVO

44. PHONEGAP NÃO SE INTEGRA COM SERVER

46. PHONEGAP GERA APLICAÇÃO NATIVA QUE PODE ACESSAR O HARDWARE

47. PHONEGAP PHONEGAP NÃO PARECE NATIVO X

51. PHONEGAP TODAS WEBAPPS

52. PHONEGAP FACEBOOK DIREITA NATIVA ESQUERDA WEBAPP

53. PHONEGAP phonegap.com/apps

55. PHONEGAP IMAGINE UM APP…

56. PHONEGAP ELE É POSSÍVEL!

57. PHONEGAP PLUGINS

58. PHONEGAP PLUGMAN

60. PHONEGAP IDE? QUALQUER UMA

61. PHONEGAP DEBUG??

62. PHONEGAP WEINRE

63. PHONEGAP RIPPLE

64. PHONEGAP IWEBINSPECTOR

65. PHONEGAP PONYDEBUGGER

66. PHONEGAP debug.phonegap.com

67. PHONEGAP PHONEGAP DEVELOPER APP

68. PHONEGAP PHONEGAP BUILD

69. SENCHA TOUCH

70.

71. SENCHA TOUCH EVENTOS DE TOUCH GRÁFICOS LISTAS  BOTÕES CONTAINERS DATAVIEWS  MEDIA CAROUSEL ANIMAÇÕES DATA - AJAX,YQL e JSONP TEMAS ÍCONES FORMS MENU BARRAS MAPS

72. SENCHA TOUCH MVC FREE APPROACH OO

73. COMO DISTRIBUIR?

74.

75. DESENVOLVE EMPACOTA SUBMETE APROVA

76.

77.

78. PHONEGAP SENCHA TOUCH SENCHA CMD PRE-REQs

79. RUBY SASS COMPASS ANDROID SDK XCODE PHONEGAP IOS SIM PRE-REQs NODEJS JAVA ANT PATHS CONFIGURADOS

80. docs.phonegap.com docs.sencha.com PRE-REQs

82.

84. OBRIGADO! @zaedysayao http://about.me/zaedy github.com/javamanrj