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

1. Sencha Touch:
Javascript para
Mobile WebApps
Flávio Gomes da Silva Lisboa

2. Cenário
http://www.cetic.br/usuarios/tic/2012/apresentacao-tic-domicilios-2012.pdf

3. Cenário

4. Cenário

5. Cenário

6. Cenário

7. Cenário

8. Cenário

9. Cenário

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. 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. 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. 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. Opções
Existem três categorias de aplicações para dispositivos
móveis:
●WebApp
●Nativa
●Híbrida

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. 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. 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. 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. 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. 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. Componentes
Formulário

22. Componentes
Painel

23. Componentes
Navegação

24. Componentes
Navegação

25. Componentes
Lista

26. Componentes
Lista

27. Componentes
Lista expandida

28. Componentes
DataView

29. Componentes
DataView

30. Componentes
Carrossel

31. Componentes
Carrossel

32. Componentes
Gráfico

33. Componentes
Gráfico

34. Componentes
Gráfico

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. Layouts
HBox

37. Layouts
VBox

38. Layouts
VBox

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. 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. 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. Exemplos de interface com Sencha Touch

43. Exemplos de interface com Sencha Touch

44. Exemplos de interface com Sencha Touch

45. Restrições

46. WebKit

47. Suporte a dispositivos

48. Suporte a dispositivos

49. Demonstração
http://vimeo.com/sencha/touchsinkphone

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. 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. Criando a primeira aplicação
● Sencha Touch SDK

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. Criando a primeira aplicação
http://docs.sencha.com/touch/2.2.1/#!/guide

55. Dica
http://www.loiane.com/tag/sencha-touch/

56. Contato
Flávio Gomes da Silva Lisboa
flavio.lisboa@serpro.gov.br
Coordenação Estratégica de
Tecnologia (CETEC)