jQuery Mobile - Desenvolvimento de aplicatos móveis para a web - Revista Mobile Magazine 40

Quem acompanha o mercado de tecnologia sabe: não há mais como escapar do tema “Mobilidade”. Empresas, usuários finais, praticamente todos têm se movido neste sentido. Tablets e smartphones são uma realidade. Seja para fins de marketing, entretenimento ou negócios, empresas nacionais e internacionais vêm incorporando soluções móveis em seus portfolios. Acesso de qualquer lugar, de qualquer dispositivo, a qualquer momento: nunca a liberdade de ação foi tão importante, tão essencial.

O desenvolvimento móvel, atualmente, nos permite agir em uma dentre três abordagens: nativa, web e híbrida. Cada qual possui suas vantagens e desvantagens, mas este é um assunto bastante amplo e que buscaremos resumir, buscando sua essência.

Aplicativos nativos são desenhados especificamente para uma plataforma. Por este motivo, dispõem de todos os recursos do hardware, ampliando o universo de possibilidades de integração com tudo aquilo que é oferecido pelo dispositivo (câmera, bluetooth, persistência, geolocalização, dentre outros). O desempenho, nestes casos, é o melhor que se pode ter.

Soluções web – frequentemente chamadas de web apps, por sua vez, são independentes de plataforma. Todo o seu conteúdo é desenvolvido a partir de tecnologias web como PHP, JavaScript, HTML, CSS, Java, C# (dentre outras), e sua execução ocorre dentro do contexto de navegadores como Safari ou Chrome. Embora tais tecnologias venham apresentando significativa evolução e já apresentem integração antes inimaginável com alguns recursos nativos das plataformas móveis mais populares do mercado, ainda não eliminam o alto nível de limitação imposto pelos navegadores web. É uma abordagem, portanto, aplicável somente em contextos que não dependam de integração significativa com recursos dos dispositivos nos quais o aplicativo será utilizado.

A solução híbrida, como o nome sugere, é intermediária e flutua entre uma realidade totalmente nativa de uma totalmente web. A ideia é simples, e concentra-se no desenvolvimento de aplicativos nativos que processam conteúdo web. Elaborando um pouco mais, a ideia é encapsular, em um aplicativo, uma instância de um container web que, por sua vez, processará conteúdo desenvolvido em tecnologias web (como HTML 5, JavaScript e CSS). Mais que isso, bibliotecas desenvolvidas, por exemplo, em JavaScript, acabam permitindo uma interação significativamente maior com os recursos oferecidos pelos dispositivos do que aquela permitida em soluções puramente web, e este é um dos pontos fundamentais que tornam essa abordagem bastante atraente.

Tanto na abordagem web quanto na híbrida, o ganho mais óbvio é a redução de esforço e custo de desenvolvimento. Uma vez desenvolvido o trabalho, não é necessário repeti-lo para cada plataforma-alvo. Utilizando-se algumas ferramentas como Phonegap ou Rhomobile (vide seção Referências), é possível ainda gerarmos o aplicativo final para uma gama significativa de plataformas de maneira ágil e bastante facilitada, obtendo-se a partir de uma solução web as soluções nativas para os dispositivos envolvidos no projeto em questão. Cada uma dessas ferramentas mencionadas possui uma API especificamente desenhada para aumentar o nível de comunicação entre os aplicativos e os recursos nativos dos dispositivos, o que, em última instância, acaba sendo convertido em chamadas nativas quando o aplicativo é gerado. Tudo de forma automatizada e bastante ágil.

Outra solução que vem sendo fortemente divulgada e que mostra a força da abordagem híbrida para aplicativos móveis, é a plataforma para soluções “descabeadas” da Sybase, empresa recém-adquirida pela SAP. Com o acrônimo de SUP, apresenta-se como um middleware que acelera o processo de mobilização do back-end corporativo, dando suporte a uma gama ampla de produtos (que vão desde serviços web a bancos de dados relacionais) e expõe o negócio das empresas tanto em um formato nativo quanto em um formato híbrido. Neste último caso, todo o processo de geração é automatizado, e o que temos por trás da solução final baseia-se inteiramente em JavaScript, HTML 5 e CSS 3. Para maiores informações sobre esta plataforma, verifique a seção Referências ao final deste artigo.

Existem inúmeros aspectos a serem debatidos, e esta temática tem sido alimento constante para incansáveis discussões em fóruns, debates virtuais e eventos técnicos de toda natureza. Resumidamente, a melhor abordagem é estritamente ligada ao contexto de negócio, sendo necessária uma análise ampla e desprendida de aspirações pessoais. Pontos como velocidade de processamento, nível de limitação imposto pelo ambiente, curvas de aprendizado das tecnologias relacionadas, esforço e custo de desenvolvimento e modelo de conectividade devem ser minuciosamente analisados antes de se tomar uma decisão por esta ou aquela abordagem, e as necessidades de negócio é que nos darão, sempre, as respostas necessárias.

Neste contexto, neste artigo abordaremos um framework que vem se destacando como uma opção bastante viável no desenvolvimento de aplicativos móveis para a web. Seu nome é jQuery Mobile, e nosso objetivo aqui é introduzi-lo, leitor, às suas principais características, alguns de seus principais componentes, encerrando com o desenvolvimento de uma solução que englobe parte do que será explorado ao longo do artigo.

Proferidas essas primeiras palavras, estamos prontos para iniciar nossa viagem pelo framework. Começaremos destacando alguns conceitos básicos para contextualizar a leitura e, então, passaremos a estudar seus recursos e suas particularidades.

O jQuery Mobile é um framework que objetiva facilitar o desenvolvimento de toda a interface com o usuário em soluções móveis para a web.

Tipicamente, como veremos ao longo de todo o texto, não é necessário muito mais que um conhecimento razoável em marcação HTML para desenvolver um trabalho interessante em jQuery Mobile. Todo o processo de transformação dos elementos das páginas é realizado nos bastidores, pelo próprio framework. Entretanto, é disponibilizada também uma API que permite a criação de efeitos e funcionalidades avançados, além da manipulação de evento e componentes do DOM, quando e onde for necessário.

Existe também um sistema de temas bastante denso, que permite definirmos uma aparência toda customizada para nossas soluções. Uma ferramenta bem útil para criação de novos temas é o Theme Roller, disponível no site do jQuery Mobile e bastante simples de utilizar. Esta ferramenta está disponível no site do framework, e o link para ele pode ser encontrado na seção Referências.

Baseada na biblioteca jQuery, de onde reaproveita técnicas de manipulação de eventos e requisições Ajax, dentre outras funcionalidades, o propósito do jQuery Mobile é exclusivamente o de ser uma biblioteca poderosa e de fácil utilização para a construção de interfaces web com o usuário. Interfaces essas totalmente complacentes com os princípios de usabilidade e acessibilidade para dispositivos móveis. jQuery Mobile não é, portanto, uma alternativa mobile ao jQuery. Ao contrário, pode ser classificada como uma alternativa à biblioteca jQuery UI.

Utilizando uma técnica denominada melhoria progressiva (veja maiores detalhes a partir da seção Referências), jQuery Mobile permite que tanto os navegadores mais básicos quanto os mais avançados – desde que sejam capazes de interpretar CSS e JavaScript – possam renderizar as páginas e conservar uma boa experiência de usuário, adaptando-se às limitações impostas por estes navegadores, aproveitando mais ou menos os recursos do framework dentro do suporte disponível.

Outro aspecto importante deste framework é o número de plataformas que ele abrange. A lista abaixo contém as principais plataformas, e a lista completa pode ser obtida na seção de Referências ao final deste artigo:

• Apple iOS (iPhone, iPad, iPod Touch);

• Android;

• Windows Phone 7;

• BlackBerry OS.

No momento da escrita deste artigo, a última versão disponível para download era a 1.0, e é aquela na qual focaremos nosso artigo. Entretanto, a velocidade com que este framework vem evoluindo é grande, exigindo acompanhamento constante das notícias a ele relacionadas.

Começaremos por uma análise da estrutura de projetos web envolvendo o jQuery Mobile, explorando alguns dos principais recursos oferecidos pelo framework. Então, partiremos para o exemplo prático, sedimentando o conhecimento.

O ambiente de trabalho

Para desenvolvermos os códigos que serão apresentados ao longo do artigo, utilizaremos a IDE Eclipse for PHP Developers e o MAMP para configuração e gerenciamento facilitados do ambiente MySQL, Apache e PHP. No projeto, entretanto, não trabalharemos com bancos de dados, focando apenas na interface com o usuário e o tratamento de formulários no lado servidor.

Para o projeto em si, não será necessário o download da biblioteca, pois trabalharemos com uma referência direta aos recursos via web. Entretanto, em casos em que se deseja trabalhar com aplicativos híbridos, será sempre necessário trabalhar com os recursos localmente, e neste cenário é obrigatório o download do material. O link direto para o download do framework pode ser encontrado na seção Referências.

Estrutura básica de uma página jQuery Mobile

Para começarmos a usufruir de todo o potencial do framework, é necessário que carreguemos uma referência para todos os seus recursos. Existem duas abordagens possíveis para isso."