Sencha Touch – Parte I

Actualmente, como todos nós sabemos, o universo dos smartphones e das aplicações móveis vieram para ficar. O mercado das apps está em constante evolução e todos os dias aumenta o seu número nas diversas stores existentes. O problema existente é que cada fabricante obriga a uma linguagem de programação. Se queremos desenvolver uma aplicação para iOS, temos que programar em Objective-C, para Android, em Java, e Windows Phone somos obrigados a usar o C#, por exemplo. Ora, programar em todas estas linguagens é bastante complicado.

A solução para esta questão passa pela utilização de uma framework híbrida. Este tipo de frameworks permitem ao programador desenvolver uma aplicação em HTML5 e Javascript capaz de ser executada em qualquer sistema operativo móvel com o look and feel de uma aplicação nativa.

Exemplo deste tipo de frameworks é o Sencha Touch. Com esta framework é tão simples desenvolver uma aplicação com um design atrativo e cross-plataform. É importante referir que esta framework é totalmente gratuita e open-source.

Nesta introdução será demonstrado como preparar o ambiente de desenvolvimento, assim como um pequeno exemplo das capacidades desta poderosa framework.

Após o pequeno exemplo estar completo, será ainda explicado como iremos encapsular a app HTML5/Javascript numa aplicação nativa, utilizando o Apache Cordova.

Para criar o ambiente de desenvolvimento será necessário realizar o download da framework do seu site oficial: http://www.sencha.com/products/touch/download/.

Será necessário terem instalado um servidor web Apache, como por exemplo o WAMP ou XAMPP.

Finalmente, é preciso efectuar o download do Sencha Touch CMD, para criar a aplicação via linha de comandos (http://developer.sencha.com/pathway/sencha-cmd-3).

Terminados todos os downloads, é tempo de criar o ambiente.

  1. Unzip da framework dentro do servidor web.
  2. Executar o seguinte comando para criar a aplicação Sencha Touch:
    1. Navegar para a pasta onde extraíram o SDK e executar o comando:
      sencha generate app [nome aplicacao] [caminho]

Depois de criada a aplicação, basta aceder pelo browser ao local onde criar a app. Por exemplo:

sencha generate app pop ..//pop

No browser basta aceder ao endereço do webserver: http://localhost/pop/.

Sencha Tools: Exemplo App inicial
Figura 1: Exemplo App inicial

A aplicação criada por defeito, trás já algumas funcionalidades que podemos aproveitar para o nosso desenvolvimento.

Em seguida, será apresentada a arquitectura da framework, de forma a perceber melhor como está funciona.

O Sencha Touch está organizado segundo a arquitectura MVC (Model-View-Controller) onde os componentes visuais estão separados do modelo de negócio. Além desta componente, possui uma estrutura de pastas que ajuda ao programador a organizar o seu código.

Sencha Tools: Estrutura de Pastas
Figura 2: Estrutura Sencha Tools

Tal como é possível verificar na Figura 2, a estrutura de pastas de um projecto Sencha Touch está muito bem organizada, o que facilita o desenvolvimento. A pasta mais importante de referir neste momento, é a pasta app. Dentro da app está o modelo MVC da nossa aplicação e ainda as pastas form, store e profile.

Antes de começar a desenvolver, é necessário entender todos estes pequenos conceitos da framework de forma a tirar todo o partido desta.

A pasta da store é muito importante no desenvolvimento desta framework. Tal como o nome indica, a store será onde iremos armazenar dados da aplicação. Contudo, é apenas um auxiliar ao armazenamento dos dados, uma vez que o que será guardado nas stores serão dados voláteis, isto é, apenas serão guardados enquanto a aplicação estiver a ser executada.

Podem-se encarar as stores como um auxiliar ao armazenamento dos dados, uma vez que toda a informação é armazenada numa base de dados SQLlite. As stores são bastante úteis para carregar os dados provenientes da base de dados, e para efectuar operações sobre eles, como ordenações, filtros, etc.

O Sencha Touch é bastante simples de utilizar depois de entendido estes conceitos. Vários objectos visuais do Sencha Touch estão já preparados para consumirem stores. Exemplos destes objectos visuais são as listas por exemplo.