Introdução ao PhoneGap e Sencha Touch

421 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
421
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/

×