Introdução ao PhoneGap e Sencha Touch
-
Upload
rafael-neri -
Category
Software
-
view
64 -
download
0
Transcript of Introdução ao PhoneGap e Sencha Touch
![Page 1: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/1.jpg)
PhoneGap#fridaydevlabs
designed by Freepik.com
![Page 2: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/2.jpg)
RAFAEL NERIAnalista de Sistemas SENAI CIMATEC
#CiclistaAmador #Programador #AspiranteMaker
![Page 3: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/3.jpg)
Qual o problema atual?
N Plataformas = N Apps
![Page 4: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/4.jpg)
Como resolver o problema?
N = 1
![Page 5: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/5.jpg)
APPS HIBRIDOS
![Page 6: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/6.jpg)
PhoneGap é um framework open source para construir rapidamente aplicativos móveis multi-plataforma utilizando HTML5, Javascript e CSS.
![Page 7: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/7.jpg)
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.
![Page 8: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/8.jpg)
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?
![Page 9: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/9.jpg)
PHONEGAP BUILD
![Page 10: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/10.jpg)
PHONEGAP DESKTOP
![Page 11: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/11.jpg)
PHONEGAP DEVELOPER
![Page 12: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/12.jpg)
NATIVO X HIBRIDO
![Page 13: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/13.jpg)
Web Browser sem molduras.
WEBVIEW
![Page 14: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/14.jpg)
ARQUITETURA
![Page 15: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/15.jpg)
ARQUITETURA
![Page 16: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/16.jpg)
PLUGINS
![Page 17: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/17.jpg)
PLUGINS
![Page 18: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/18.jpg)
FEATURES
![Page 19: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/19.jpg)
REQUISITOS P/ WIN + ANDROID
• NodeJS
• JDK
• Configure a variável de ambiente PATH
• Android SDK
• Configure a variável de ambiente PATH
• C:\adt-windows\sdk\tools;C:\adt- windows\sdk\platform-tools
• Configure um device no emulador
• $ android avd
• Apache Ant
• Configure a variável de ambiente PATH
• C:\apache-ant-1.9.4\bin
• Por fim
• $ npm install -g phonegap
• Sublime para editar nosso código
![Page 20: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/20.jpg)
CRIANDO PROJETO PHONEGAP
$ phonegap create erbase br.org.ifba.erbase "ERBASE"
$ cd erbase
$ phonegap platform add android
$ phonegap build (auto)
$ phonegap emulate android (auto)
![Page 21: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/21.jpg)
FICAMOS POR AQUI?
![Page 22: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/22.jpg)
CLARO QUE NÃO!
![Page 23: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/23.jpg)
VAMOS AO SENCHA TOUCH
![Page 24: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/24.jpg)
O QUE É SENCHA TOUCH?
Framework Javascript baseado no modelo MVC
Baseado em web standards
HTML5, CSS3, JS
![Page 25: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/25.jpg)
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
![Page 26: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/26.jpg)
COMPONENTES
List
Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms
Toolbars
Buttons
HTML
Audio, Video, Geolocation
![Page 28: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/28.jpg)
DATA PACKAGE
Model, Store, Proxies
Associations
Validations
Local e server storage
Webservices
jsonp, ajax, yql
![Page 29: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/29.jpg)
TEMAS
CSS3
SASS
Temas flexíveis
Otimizados
![Page 30: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/30.jpg)
VAMOS COMEÇAR!?
![Page 31: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/31.jpg)
ADICIONAR FOTO DO PROJETO
![Page 32: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/32.jpg)
CRIANDO A APLICAÇÃO PHONEGAP
$ phonegap create apperbase br.org.ifba.apperbase “Sencha ERBASE 2015"
$ cd apperbase
$ phonegap platform add android
$ phonegap serve
![Page 33: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/33.jpg)
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
![Page 34: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/34.jpg)
BAIXANDO O PROJETO
https://github.com/rafaneri/senchaerbase
![Page 35: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/35.jpg)
CONFIGURANDO O PROJETO
Vamos substituir o conteúdo da pasta www pelo conteúdo da pasta src/sencha-app descarregada através do github.
![Page 36: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/36.jpg)
VAMOS CODIFICAR!
![Page 37: Introdução ao PhoneGap e Sencha Touch](https://reader034.fdocuments.in/reader034/viewer/2022051315/55cbcb60bb61eb65388b47d1/html5/thumbnails/37.jpg)
http://docs.phonegap.com
https://www.sencha.com/resources/