SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
PhoneGap
#fridaydevlabs
designed by Freepik.com
RAFAEL NERI
Analista de Sistemas SENAI CIMATEC
#CiclistaAmador #Programador #AspiranteMaker
Qual o problema atual?
N Plataformas = N Apps
Como resolver o problema?
N = 1
APPS HIBRIDOS
PhoneGap é um framework open source para
construir rapidamente aplicativos móveis multi-
plataforma utilizando HTML5, Javascript e CSS.
O PhoneGap foi originalmente criado pela empresa
Nitobi Software. Em 2011 ela foi adquirida pela
Adobe, que montou uma equipe exclusiva para o
projeto. O código foi doado para incubação à
Apache Software Foundation, sendo então batizado
de Apache CORDOVA.
Apache Cordova é o motor do PhoneGap.
PhoneGap é uma distribuição que pode conter
ferramentas adicionais e algumas delas ligadas a
serviços e aplicativos da Adobe.
Qual a diferença entre utilizar um ou o outro?
PHONEGAP BUILD
PHONEGAP DESKTOP
PHONEGAP DEVELOPER
NATIVO X HIBRIDO
Web Browser sem molduras.
WEBVIEW
ARQUITETURA
ARQUITETURA
PLUGINS
PLUGINS
FEATURES
REQUISITOS P/ WIN +
ANDROID
• NodeJS
• JDK
• Configure a variável de ambiente PATH
• Android SDK
• Configure a variável de ambiente PATH
• C:adt-windowssdktools;C:adt-
windowssdkplatform-tools
• Configure um device no emulador
• $ android avd
• Apache Ant
• Configure a variável de ambiente PATH
• C:apache-ant-1.9.4bin
• Por fim
• $ npm install -g phonegap
• Sublime para editar nosso código
CRIANDO PROJETO
PHONEGAP
$ phonegap create erbase br.org.ifba.erbase "ERBASE"
$ cd erbase
$ phonegap platform add android
$ phonegap build (auto)
$ phonegap emulate android (auto)
FICAMOS POR AQUI?
CLARO QUE NÃO!
VAMOS AO SENCHA TOUCH
O QUE É SENCHATOUCH?
Framework Javascript baseado no modelo MVC
Baseado em web standards
HTML5, CSS3, JS
O QUE OFERECE?
UI de alta performance e componentes similares aos nativos
Layouts adaptativos, animações e rolagem suave
Pacote robusto para acesso a dados
Integração com PhoneGap/Cordova para acesso a API’s nativas
COMPONENTES
List
Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms
Toolbars
Buttons
HTML
Audio,Video, Geolocation
KITCHEN SINK
DATA PACKAGE
Model, Store, Proxies
Associations
Validations
Local e server storage
Webservices
jsonp, ajax, yql
TEMAS
CSS3
SASS
Temas flexíveis
Otimizados
VAMOS COMEÇAR!?
ADICIONAR FOTO DO
PROJETO
CRIANDO A APLICAÇÃO
PHONEGAP
$ phonegap create apperbase br.org.ifba.apperbase “Sencha
ERBASE 2015"
$ cd apperbase
$ phonegap platform add android
$ phonegap serve
ESTRUTURA DE PASTAS
hooks: pode conter scripts para personalizar os comandos do
cordova
platforms: plataformas instaladas para o app
plugins: fonte dos plugins instalados no app
www: código fonte do app
BAIXANDO O PROJETO
https://github.com/rafaneri/
senchaerbase
CONFIGURANDO O PROJETO
Vamos substituir o conteúdo da pasta www pelo conteúdo da
pasta src/sencha-app descarregada através do github.
VAMOS CODIFICAR!
http://docs.phonegap.com
https://www.sencha.com/resources/

Mais conteúdo relacionado

Mais procurados

instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1Afonso Fernandes
 
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaGustavo Costa
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidRafael Sakurai
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao PhonegapLoiane Groner
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchLeonardo Soares
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapThiago Colares
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Wennder Santos
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoWilliam Ribeiro da Silva
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkCristian Dean
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Frameworkjuniorschroder
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicFelipe Renan Vieira
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionicJoelmir Ribacki
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework MobileIldyone Martins
 

Mais procurados (20)

instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1
 
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
 
Phonegap
PhonegapPhonegap
Phonegap
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
 
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGapAplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
Aplicações Híbridas para Dispositivos Móveis com AngularJS e PhoneGap
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic FrameworkMinicurso de Desenvolvimento Híbrido utilizando Ionic Framework
Minicurso de Desenvolvimento Híbrido utilizando Ionic Framework
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Framework
 
Introdução intel XDK
Introdução intel XDKIntrodução intel XDK
Introdução intel XDK
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 

Semelhante a PhoneGap Apps com Sencha Touch

Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid appsAdalto Junior
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapDiogo Souza Machado
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Leonardo Melo Santos
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryfelipebzr
 
Latinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jediLatinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jediAlessandro Binhara
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Tiago Braga
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesWilliam S. Rodriguez
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic FrameworkJunior Abranches
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Loiane Groner
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegapslides_teltools
 
Introdução ao PhoneGap
Introdução ao PhoneGapIntrodução ao PhoneGap
Introdução ao PhoneGapLucas Félix
 
Introdução ao PhoneGap
Introdução ao PhoneGapIntrodução ao PhoneGap
Introdução ao PhoneGapLucas Félix
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...William S. Rodriguez
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...iMasters
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Henrique Dezani
 

Semelhante a PhoneGap Apps com Sencha Touch (20)

Imersão hybrid apps
Imersão   hybrid appsImersão   hybrid apps
Imersão hybrid apps
 
Introdução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com PhonegapIntrodução ao desenvolvimento de apps com Phonegap
Introdução ao desenvolvimento de apps com Phonegap
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Latinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jediLatinoware 2019 - DEsenvolvimento mobile em Nivel jedi
Latinoware 2019 - DEsenvolvimento mobile em Nivel jedi
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.Apps Híbridos e novas promessas Mobile.
Apps Híbridos e novas promessas Mobile.
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
 
PDC - Engenharia - Phonegap
PDC - Engenharia - PhonegapPDC - Engenharia - Phonegap
PDC - Engenharia - Phonegap
 
Introdução ao PhoneGap
Introdução ao PhoneGapIntrodução ao PhoneGap
Introdução ao PhoneGap
 
Introdução ao PhoneGap
Introdução ao PhoneGapIntrodução ao PhoneGap
Introdução ao PhoneGap
 
Worklight exemplo
Worklight exemploWorklight exemplo
Worklight exemplo
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
 
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
 

PhoneGap Apps com Sencha Touch