Sencha Touch: Javascript para Mobile WebApps

1.228 visualizações

Publicada em

Introdução ao Sencha Touch, framework Javascript para criação de aplicações para dispositivos móveis.

Publicada em: Tecnologia
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.228
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
0
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Sencha Touch: Javascript para Mobile WebApps

  1. 1. Sencha Touch: Javascript para Mobile WebApps Flávio Gomes da Silva Lisboa
  2. 2. Cenário http://www.cetic.br/usuarios/tic/2012/apresentacao-tic-domicilios-2012.pdf
  3. 3. Cenário
  4. 4. Cenário
  5. 5. Cenário
  6. 6. Cenário
  7. 7. Cenário
  8. 8. Cenário
  9. 9. Cenário
  10. 10. Cenário A ascensão do uso das tecnologias móveis pela população em geral indica que os dispositivos móveis tornam-se um meio preferencial de comunicação. Diante desse fato torna-se clara a necessidade de disponibilizar serviços que sejam acessíveis por dispositivos móveis.
  11. 11. Cenário Devemos observar que não estamos tratando do governo disponibilizar novos serviços, mas sim de oferecê-los por meio de um novo canal de comunicação. Canal de Corinto
  12. 12. Cenário No entanto, a oferta de serviços por meio de dispositivos móveis coloca a questão da adaptação de sistemas de informação para operarem nesse novo paradigma (quando forem acessíveis por navegadores dos dispositivos) ou criação de novas aplicações (quando for utilizado um cliente próprio para o dispositivo). A única certeza inicial é a de que qualquer opção terá um custo. A dúvida é como ter o custo mínimo.
  13. 13. Cenário Diante do exposto, vemos que a adaptação de aplicações para dispositivos móveis, além de ser um avanço tecnológico, é uma demanda de mercado e uma necessidade de negócio.
  14. 14. Opções Existem três categorias de aplicações para dispositivos móveis: ●WebApp ●Nativa ●Híbrida
  15. 15. WebApp Aplicação projetada para serem executadas em browsers de dispositivos móveis. ●Vantagens: atualização/manutenção da aplicação é feita no servidor; independente de plataforma. ●Problema: persistência de dados no próprio dispositivo.
  16. 16. Nativa Aplicação desenvolvida diretamente para uma plataforma, em uma linguagem específica. Exemplos: Android (Java) e iOS(ObjectiveC). ●Vantagens: total acesso aos recursos dos dispositivos e hardwares; armazenamento local de dados; maior desempenho; componentes projetados para a plataforma, entre outras. ●Problema: portabilidade.
  17. 17. Híbrida WebApp exportada como aplicação nativa para várias plataformas. ●Vantagens: desenvolvimento de uma única versão da aplicação com portabilidade para várias plataformas. ●Problema: como fazer isso?
  18. 18. História Jack Slocum criou uma extensão da biblioteca Javascript do Yahoo!, a Yahoo! User Interface Library (YUI), chamada YUI-Ext. Essa extensão ganhou vida própria em 2007 e se tornou o framework Javascript Ext JS. A partir do Ext JS foi criado um framework específico para construção de aplicativos para dispositivos móveis, o Sencha Touch. Jack Slocum
  19. 19. O que é Sencha Touch? Sencha Touch é um framework de alto desempenho de aplicativos móveis HTML5. Construído para permitir experiências de usuário de classe mundial, Sencha Touch é uma estrutura que permite aos desenvolvedores criar aplicativos poderosos que funcionam em iOS, Android, BlackBerry, Windows Phone, e muito mais.
  20. 20. Características Rolagem suave e animações Sencha Touch fornece ao usuário uma experiência inigualável em HTML5. Animações fluidas e rolagem suave fazem aplicações Sencha Touch apps parecerem vivas, rivalizando com tecnologia nativa. Listas, carrosséis e outros componentes de rolagem e naturalmente, com uma alta taxa de quadros em uma ampla gama de dispositivos. A estrutura usa automaticamente o melhor mecanismo de rolagem para cada dispositivo, resultando em uma grande experiência em todos os lugares.
  21. 21. Componentes Formulário
  22. 22. Componentes Painel
  23. 23. Componentes Navegação
  24. 24. Componentes Navegação
  25. 25. Componentes Lista
  26. 26. Componentes Lista
  27. 27. Componentes Lista expandida
  28. 28. Componentes DataView
  29. 29. Componentes DataView
  30. 30. Componentes Carrossel
  31. 31. Componentes Carrossel
  32. 32. Componentes Gráfico
  33. 33. Componentes Gráfico
  34. 34. Componentes Gráfico
  35. 35. Características Layouts adaptativos O mecanismo de layout do Sencha Touch utiliza HTML5 de forma poderosa para que os desenvolvedores construam aplicações complexas que respondem, carregam e apresentam em um piscar de olhos. A mudança de paisagem para retrato acontece quase que instantaneamente, e o carregamento de aplicativos em frações de segundo. O mecanismo de layout avançado de Sencha Touch garante perfeição em pixels.
  36. 36. Layouts HBox
  37. 37. Layouts VBox
  38. 38. Layouts VBox
  39. 39. Características Empacotamento Nativo Aplicações web funcionam em todos os lugares. Mas ainda existem algumas características exclusivamente disponíveis para aplicativos nativos - como o acesso à câmera e distribuição em lojas de aplicativos - que são essenciais para desenvolvedores. O Sencha SDK Tool provê o melhor dos dois mundos, oferecendo uma forma empacotar seu aplicativo web como uma aplicação nativa. Com apenas um comando você pode distribuir sua aplicação para a Apple App Store ou Google Play!.
  40. 40. Requisitos para empacotamento nativo JRE Sencha Cmd é escrito em Java e requer o Java Runtime Environment versão 1.6 ou 1.7 (melhor) Sencha Cmd Ruby 1.9.3 (ou anterior): Sencha Cmd não trabalha com Ruby 2.0. Ruby difere para cada sistema operacional. Empacotamento para iOS: Apple Xcode Empacotamento para Android: Android SDK Tools e Eclipse (opcional).
  41. 41. Características E muito mais! ● Suporte completo a AJAX, incluindo CORS e JSON-P. ● Suporte completo à manipulação DOM ● Detecta automaticamente a presença de recursos como o suporte de geolocalização, telas e orientação. ● Fornece um wrapper de geolocalização para dispositivos que a suportam. ● Inclui 300 ícones. ● Possui 8 aplicativos completos como exemplo. ● Fornece uma gama completa de eventos de toque e gestos como tap, swipe e pinch. CORS: Cross-origin resource sharing JSON-P: JSON with padding Comunicação do servidor com um domínio diferente
  42. 42. Exemplos de interface com Sencha Touch
  43. 43. Exemplos de interface com Sencha Touch
  44. 44. Exemplos de interface com Sencha Touch
  45. 45. Restrições
  46. 46. WebKit
  47. 47. Suporte a dispositivos
  48. 48. Suporte a dispositivos
  49. 49. Demonstração http://vimeo.com/sencha/touchsinkphone
  50. 50. Criando a primeira aplicação ● Sencha Touch SDK ● http://www.sencha.com/products/touch/download/ ● Sencha Cmd ● http://www.sencha.com/products/sencha-cmd/download
  51. 51. Criando a primeira aplicação ● Sencha Touch SDK ● http://www.sencha.com/products/touch/download/ ● Sencha Cmd ● http://www.sencha.com/products/sencha-cmd/download
  52. 52. Criando a primeira aplicação ● Sencha Touch SDK
  53. 53. Criando a primeira aplicação Sencha Command v2.0.0 Beta 3 Copyright (c) 2012 Sencha Inc. usage: sencha COMMAND [ARGS] The available commands are: build build a JSB project create bootstrapdata generate boostrap data create jsb generate a minimal JSB project for an app create locale generate a template locale file from source create manifest generate classes manifest package package your Touch web app into a native bundle slice theme slice a custom theme's images for IE See 'sencha help COMMAND' for more information on a specific command.
  54. 54. Criando a primeira aplicação http://docs.sencha.com/touch/2.2.1/#!/guide
  55. 55. Dica http://www.loiane.com/tag/sencha-touch/
  56. 56. Contato Flávio Gomes da Silva Lisboa flavio.lisboa@serpro.gov.br Coordenação Estratégica de Tecnologia (CETEC)

×