Introdução ao PhoneGap e Sencha Touch
37
PhoneGap #fridaydevlabs designed by Freepik.com
-
Upload
rafael-neri -
Category
Software
-
view
66 -
download
0
Transcript of Introdução ao PhoneGap e Sencha Touch
PhoneGap#fridaydevlabs
designed by Freepik.com
RAFAEL NERIAnalista 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-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
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 É SENCHA TOUCH?
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
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/
