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, Java...
O PhoneGap foi originalmente criado pela empresa
Nitobi Software. Em 2011 ela foi adquirida pela
Adobe, que montou uma equ...
Apache Cordova é o motor do PhoneGap.
PhoneGap é uma distribuição que pode conter
ferramentas adicionais e algumas delas l...
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 a...
CRIANDO PROJETO
PHONEGAP
$ phonegap create erbase br.org.ifba.erbase "ERBASE"
$ cd erbase
$ phonegap platform add android
...
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
P...
COMPONENTES
List
Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms
Toolbars
Buttons
HTML
Audio,Video, Geoloca...
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
$ phone...
ESTRUTURA DE PASTAS
hooks: pode conter scripts para personalizar os comandos do
cordova
platforms: plataformas instaladas ...
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...
VAMOS CODIFICAR!
http://docs.phonegap.com
https://www.sencha.com/resources/
Próximos SlideShares
Carregando em…5
×

Introdução ao PhoneGap e Sencha Touch

440 visualizações

Publicada em

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
440
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao PhoneGap e Sencha Touch

  1. 1. PhoneGap #fridaydevlabs designed by Freepik.com
  2. 2. RAFAEL NERI Analista de Sistemas SENAI CIMATEC #CiclistaAmador #Programador #AspiranteMaker
  3. 3. Qual o problema atual? N Plataformas = N Apps
  4. 4. Como resolver o problema? N = 1
  5. 5. APPS HIBRIDOS
  6. 6. PhoneGap é um framework open source para construir rapidamente aplicativos móveis multi- plataforma utilizando HTML5, Javascript e CSS.
  7. 7. 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.
  8. 8. 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?
  9. 9. PHONEGAP BUILD
  10. 10. PHONEGAP DESKTOP
  11. 11. PHONEGAP DEVELOPER
  12. 12. NATIVO X HIBRIDO
  13. 13. Web Browser sem molduras. WEBVIEW
  14. 14. ARQUITETURA
  15. 15. ARQUITETURA
  16. 16. PLUGINS
  17. 17. PLUGINS
  18. 18. FEATURES
  19. 19. 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
  20. 20. CRIANDO PROJETO PHONEGAP $ phonegap create erbase br.org.ifba.erbase "ERBASE" $ cd erbase $ phonegap platform add android $ phonegap build (auto) $ phonegap emulate android (auto)
  21. 21. FICAMOS POR AQUI?
  22. 22. CLARO QUE NÃO!
  23. 23. VAMOS AO SENCHA TOUCH
  24. 24. O QUE É SENCHATOUCH? Framework Javascript baseado no modelo MVC Baseado em web standards HTML5, CSS3, JS
  25. 25. 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
  26. 26. COMPONENTES List Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms Toolbars Buttons HTML Audio,Video, Geolocation
  27. 27. KITCHEN SINK
  28. 28. DATA PACKAGE Model, Store, Proxies Associations Validations Local e server storage Webservices jsonp, ajax, yql
  29. 29. TEMAS CSS3 SASS Temas flexíveis Otimizados
  30. 30. VAMOS COMEÇAR!?
  31. 31. ADICIONAR FOTO DO PROJETO
  32. 32. CRIANDO A APLICAÇÃO PHONEGAP $ phonegap create apperbase br.org.ifba.apperbase “Sencha ERBASE 2015" $ cd apperbase $ phonegap platform add android $ phonegap serve
  33. 33. 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
  34. 34. BAIXANDO O PROJETO https://github.com/rafaneri/ senchaerbase
  35. 35. CONFIGURANDO O PROJETO Vamos substituir o conteúdo da pasta www pelo conteúdo da pasta src/sencha-app descarregada através do github.
  36. 36. VAMOS CODIFICAR!
  37. 37. http://docs.phonegap.com https://www.sencha.com/resources/

×