1. PhoneGap
#fridaydevlabs
designed by Freepik.com

2. RAFAEL NERI
Analista de Sistemas SENAI CIMATEC
#CiclistaAmador #Programador #AspiranteMaker

3. Qual o problema atual?
N Plataformas = N Apps

4. Como resolver o problema?
N = 1

5. APPS HIBRIDOS

6. PhoneGap é um framework open source para
construir rapidamente aplicativos móveis multi-
plataforma utilizando HTML5, Javascript e CSS.

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. 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. PHONEGAP BUILD

10. PHONEGAP DESKTOP

11. PHONEGAP DEVELOPER

12. NATIVO X HIBRIDO

13. Web Browser sem molduras.
WEBVIEW

14. ARQUITETURA

15. ARQUITETURA

16. PLUGINS

17. PLUGINS

18. FEATURES

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. 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. FICAMOS POR AQUI?

22. CLARO QUE NÃO!

23. VAMOS AO SENCHA TOUCH

24. O QUE É SENCHATOUCH?
Framework Javascript baseado no modelo MVC
Baseado em web standards
HTML5, CSS3, JS

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. COMPONENTES
List
Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms
Toolbars
Buttons
HTML
Audio,Video, Geolocation

27. KITCHEN SINK

28. DATA PACKAGE
Model, Store, Proxies
Associations
Validations
Local e server storage
Webservices
jsonp, ajax, yql

29. TEMAS
CSS3
SASS
Temas flexíveis
Otimizados

30. VAMOS COMEÇAR!?

31. ADICIONAR FOTO DO
PROJETO

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. 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. BAIXANDO O PROJETO
https://github.com/rafaneri/
senchaerbase

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. VAMOS CODIFICAR!

37. http://docs.phonegap.com
https://www.sencha.com/resources/