Desenvolvimento de aplica��es m�veis h�bridas com Sencha Touch 2

Nos �ltimos anos, com o advento dos dispositivos port�teis a n�vel mundial, houve um crescimento gigantesco principalmente no meio coorporativo, na utilizaç�o de soluç�es m�veis. Devido a tamanha evoluç�o, novas plataformas de desenvolvimento e sistemas operacionais foram criados, aumentando a complexidade e muitas vezes a curva de aprendizado. Um dos maiores problemas com a disparidade entre plataformas � a manutenç�o da aplicaç�o, controle de atualizaç�es e custeamento de equipes de desenvolvimento com conhecimentos espec�ficos, como: Android, iOS, BlackBerry, Windows Phone, etc.

Com o intuito de suprir tais �dificuldades� anteriormente citadas, surgiram diversas alternativas para se desenvolver aplicaç�es m�veis. Este novos meios/plataformas permitem que escrevamos o c�digo uma vez, e o mesmo execute em diversos tipos de dispositivos e sistemas operacionais.

Isso � poss�vel devido as seguintes tecnologias web: HTML5, CSS3 e a linguagem JavaScript. Existem diversos frameworks atualmente no mercado, cada um com suas caracter�sticas e prop�sitos. Estas novas tecnologias ocasionaram a divis�o das plataformas de desenvolvimentos m�vel em tr�s categorias, s�o elas: WebApp, Nativa e H�brida.

As WebApps, s�o aplicaç�es projetadas para serem executadas em browsers de dispositivos m�veis. Ou seja, a sua interface gr�fica � adaptada para dispositivos com telas menores, utilizando conceitos como o responsive (s�o websites com excelente visualizaç�o e experi�ncia em plataformas e resoluç�es diferentes). Estas aplicaç�es s�o hospedadas em servidores web, utilizando tecnologias espec�ficas para serem carregadas, em m�quinas de �baixo� processamento e normalmente com baixa velocidade de banda da rede.

Uma das vantagens para essa abordagem no desenvolvimento de aplicativos m�veis, � que a atualizaç�o/manutenç�o da aplicaç�o � feita no servidor, consequentemente, todos os dispositivos recebem a nova vers�o automaticamente, bastando atualizar a p�gina no browser. E l�gico, independente de plataforma. Citando agora um problema, um dos mais relevantes � a persist�ncia de dados no pr�prio dispositivo (local store). Por�m, existem mecanismos para manter informaç�es em cache, simulando o armazenamento de dados.

As aplicaç�es que se enquadram na categoria de Nativas, s�o as desenvolvidas diretamente para uma plataforma, em uma linguagem espec�fica, como: para Android (utilizando Java), ou para iOS(com ObjectiveC), etc. As grandes vantagens dessas aplicaç�es, s�o:

total acesso aos recursos dos dispositivos e hardwares;
armazenamento local de dados;
maior desempenho;
componentes projetados para a plataforma, entre outras.

Bom, como j� citado, hoje � poss�vel escrevermos o c�digo uma vez e rodarmos em v�rios locais. Al�m disso, podemos export�-las de forma nativa para diversas plataformas. Um exemplo claro, � o framework Sencha Touch, produzido e mantido pela Sencha, Inc. O Sencha Touch nos possibilita desenvolvimento �gil e implementa o padr�o arquitetural MVC (Model, View e Controller). Aplicaç�es desenvolvidas com esse framework s�o consideradas H�bridas pelo seguinte motivo: o c�digo � desenvolvido em linguagem de script, utilizando normalmente a �velha� linguagem dos browsers, JavaScript.

A portabilidade das apps (termo utilizados para referir-se a aplicaç�es m�veis) pode ser para: AndroidOS, iOS, BlackBerry, etc.

Sencha Touch 2

Bom, para que o leitor pudesse entender melhor o objetivo do framework Sencha Touch 2 (ST2), fora dada uma r�pida explanaç�o sobre os paradigmas m�veis atuais. O Sencha Touch, � uma aposta da empresa Sencha, para que os desenvolvedores que j� eram acostumados a trabalhar com o ExtJS (biblioteca da Sencha, para criar aplicaç�es com interface rica), pudessem tamb�m desenvolver para dispositivos m�veis, baseando-se em HTML5, sem grandes dificuldades. At� mesmo para portar aplicaç�es webs escritas em ExtJS, para plataformas m�veis.

Da Licença

O Sencha Touch � um framework open-source, totalmente desenvolvido em JavaScript e encontra-se na vers�o 2.0.1. De acordo com as cl�usulas expostas no contrato, o mesmo pode ser utilizado para fins comerciais sem nenhum �nus para o desenvolvedor e sem limites de aplicaç�es. Outra opç�o de licença, � obter o conv�nio OEM, onde o SDK do framework pode ser manipulado e distribu�dos por terceiros.

Um pouco mais...

A sua grande vantagem, assim como de outras plataformas h�bridas, � a possibilidade de execuç�o em browser, ou ser exportada para uma plataforma espec�fica.

O pr�prio Sencha Touch, como citado anteriormente fornece recursos para exportar de forma nativa, para as plataformas: Android, iOS e BlackBerry. Por�m, se atrelado a ferramenta PhoneGap (n�o abordada nesse artigo), pode atingir uma gama maior de dispositivos, como: WindowsPhone, WebOS e bada. Em alguns casos, � poss�vel acessar recursos nativos do dispositivos (c�meras, gps, etc). Vale ressaltar, que o desempenho de uma aplicaç�o h�brida, n�o � o mesmo que uma aplicaç�o desenvolvida para uma plataforma alvo (nativa).

O Sencha Touch, est� cada vez mais sendo adotado por entusiastas, desenvolvedores e empresas do setor m�vel, um dos maiores motivos, � ter como mantenedora a Sencha. Outro ponto, � devido ao Sencha Touch ser o primeiro framework JavaScript para aplicaç�es m�veis e permitir que desenvolva-se aplicaç�es com apar�ncia de apps nativas.

Possuidor de uma vasta documentaç�o e f�cil de ser entendida, o Sencha Touch, � muito intuitivo. Entretanto, para quem nunca teve contato com a linguagem JavaScript, inicialmente sua sintaxe parece complicada. Um dos fatores para certo grau de complexidade � o fato da Sencha, ter criado namespaces para referenciar a API do Sencha Touch.

Iniciando com Sencha Touch 2

Para esse r�pido exemplo, tenha o seguinte:

SDK do Sencha Touch 2.0.1.1;
http://www.sencha.com/products/touch/download/2.0.1.1/
Servidor/Container Web (Apache/PHP, Apache Tomcat, etc);
Quem preferir pode utilizar Xampp, Mamp e semelhantes.
Um browser(Chrome ou Safari);
Requisito: implementar o motor WebKit;
IDE como o Eclipse, Aptana ou qualquer editor de texto

Objetivo

Neste artigo ser� criada uma aplicaç�o sem o Sencha SDK Tools, ferramenta que auxilia na criaç�o e configuraç�o do ambiente de desenvolvimento. Logo, vamos configurar nosso ambiente manualmente.

Criando o Projeto

Ap�s ter baixado o SDK do Sencha Touch 2 e configurado o servidor web, vamos criar a estrutura do nosso projeto.

1 - Crie uma pasta (igualmente a uma aplicaç�o web) dentro do servidor escolhido chamada helloworld-touch2. Essa ser� a raiz do nosso projeto mobile.

2 � Crie 3 pastas dentro de helloworld-touch2 com os nomes: app, resources e sdk.

3 � Em seguida, ainda dentro do diret�rio helloworld-touch2, um arquivo chamado, app.js (JavaScript) e um chamado index.html.

At� agora temos a seguinte estrutura:

Figura 1: Estrutura inicial da aplicaç�o

4 � Descompacte o SDK do ST2 e copie o conte�do para o diret�rio sdk. Ficar� ent�o com a seguinte composiç�o:

Figura 2: Exibiç�o dos arquivos contidos no SDK

Alguns dos arquivos existentes no SDK, n�o ser�o necess�rios para o processo de deploy. Contudo, n�o ser� feito a retirada destes no presente artigo.

5 � Seguindo as pr�ticas/t�cnicas atuais da Engenharia de Software, o ST2, por ser um framework que implementa o padr�o arquitetural MVC, faz-se necess�rio a concepç�o da estrutura inerente a este (model-view-controller). J� conhecido por muitos desenvolvedores, pois o mesmo � utilizado em outros frameworks e em nossas aplicaç�es. O intuito desse padr�o, � separar o sistema em camadas, consequentemente separar o modelo (model) da camada de vis�o (view). Bom, para isso, dentro da pasta app, criaremos os seguintes diret�rios: model, view, controller, store, profile.

Figura 3: Criaç�o do esqueleto da aplicaç�o em camadas

Perceba que criamos duas pastas que n�o foram comentadas anteriormente. Mais uma vez, com objetivo de tornar a estrutura da aplicaç�o coesa, e camadas com responsabilidades espec�ficas, o Sencha Touch 2 mant�m a pasta store e profile.

Store

A funç�o dessa camada � manter todos os Stores da aplicaç�o m�vel. Entende-se como Store, as classes que encapsulam o armazenamento e acesso a dados no cliente (aplicaç�o m�vel). Assemelha-se a um DAO (Data Access Object), por�m podendo acessar dados de diversos tipos de reposit�rios, como: remotos (web service) ou locais (no dispositivo).

Profile

Como qualquer cen�rio de desenvolvimento de aplicativos para dispositivos m�veis, podemos nos deparar ap�s a liberaç�o de uma app, com telas de diversos tamanhos e resoluç�es.

Para solucionar esse problema, o ST2 disponibiliza um mecanismo de categorizaç�o de dispositivos. Fornecendo recursos suficientes para verificar em que tipo/modelo de aparelho a aplicaç�o est� sendo executada, por exemplo: Smartphone ou Tablet. Logo, nessa camada cria-se as peculiaridades para cada tela.

Continuando o desenvolvimento...

6 � Na pasta resources do projeto (n�o do sdk), crie as seguintes pastas: css, images, sass, themes.

Esses diret�rios servir�o para armazenar o css, as imagens e os temas personalizados criados pelos pr�prios desenvolvedores.

Figura 4: Criaç�o de diret�rios para manter recursos visuais

A Figura 4, representa a estrutura b�sica para a criaç�o de uma aplicaç�o com o Sencha Touch 2. Veja que n�o tem nada al�m do comum, apenas pastas e arquivos fontes, JavaScript e Html. Por isso, podemos desenvolver aplicaç�es inteiras apenas com um simples editor de textos.

7 - Abra o arquivo index.html e deixe-o assim como a Listagem 1.

Listagem 1: Configuraç�o do arquivo index.html





	
	
	ST2 - Hello World!

Observe que � um simples arquivo HTML, onde inicialmente na linha 6 temos a definiç�o do titulo(<title>) para nossa aplicaç�o. Em seguida na linha 8, importamos o CSS do ST2. Na linha 9, indicamos onde est� localizado o JavaScript principal do SDK do Sencha Touch 2, utilizado em tempo de projeto. Por fim, na linha10 apontamos para o arquivo JavaScript principal da aplicaç�o.

Vamos agora para o arquivo app.js e em seguida rodar nossa aplicaç�o no browser. Lembre-se: a mesma aplicaç�o que ser� executada no browser no seu computador, tamb�m rodar� no browser do dispositivo, podendo ainda, ser exportada como um aplicaç�o nativa para ser instalada no dispositivo. � certo que, nesse artigo n�o ser� abordado a exportaç�o da aplicaç�o.

8 - Abra o arquivo app.js e faça-o como a Listagem 2.

Listagem 2: Arquivo principal da aplicaç�o comentado


//configuraç�o inicial da aplicaç�o
Ext.application({
	// Nome da MobileApp
	name: 'HelloWorld',
	// Chamada inicial da aplicaç�o, onde passamos uma funç�o
	launch : function() {
		Ext.Viewport.add(new Ext.create('Ext.Panel', {
			fullscreen : true,
			styleHtmlContent : true,
			html : 'Ol� Sencha Touch 2!Aplicaç�o Ok!'
		}));
	}
});

Na listagem 2, foi chamado atrav�s do namespace Ext, o container Viewport e como par�metro para o m�todo add passamos a declaraç�o de um objeto do tipo Ext.Panel. A chamada new Ext.create, tem como finalidade instanciar um objeto e ao mesmo tempo configur�-lo. Neste caso criamos uma inst�ncia de Panel e o configuramos com modo de exibiç�o, tela cheia (fullscreen: true). Indicamos logo abaixo do comando anterior, na linha 9, que o panel aceitar� inclus�o de componentes html(<h2>), no texto. Por �ltimo, na linha 10, adicionamos a mensagem exibida. Note, os componentes s�o separados por virgulas e as instruç�es opcionalmente podem ser finalizadas com um ponto e virgula. Para mais informaç�es, leia as regras e conceitos da linguagem JavaScript.

Para executar a aplicaç�o, acesse-a no servidor pelo browser. O resultado ser� como na imagem abaixo.

Figura 5: Projeto em execuç�o

Conclus�o

Neste artigo fora conceituado os paradigmas de desenvolvimento de soluç�es m�veis: webapps, h�bridas e nativas. Visto as vantagens, explanou-se o framework Sencha Touch em sua vers�o 2.0. Por �ltimo, constituiu-se um r�pido exemplo de criaç�o de aplicaç�o com o ST2.

Em pr�ximos artigos, ser� abordado a utilizaç�o de outros componentes e recursos do framework.

Bibliografia Utilizada

Documentaç�o oficial, http://docs.sencha.com/touch/2-0/#!/api
KUMAR, Ajit. Sencha Touch Cookbook. Birmingham: Packt, 2011.