CloudWare

TCC: Desenvolvimento de Cross-Platform Mobile Apps Utilizando o Titanium Mobile

Quinta, 20 Dezembro 2012

tcc

Artigo (PDF)

pdfadriel-tcc.pdf703.13 KB

Poster (PDF)

pdfadriel-poster-tcc.pdf377.21 KB

Desenvolvimento de Cross-Platform Mobile Apps Utilizando o Titanium Mobile

Adriel Almeida Café1

1Faculdade Zacarias de Góes (FAZAG)
Valença – BA – Brasil

O endereço de e-mail address está sendo protegido de spambots. Você precisa ativar o JavaScript enabled para vê-lo.

Abstract. This article aims to conceptualize the cross-platform mobile apps and present the Titanium Mobile, a JavaScript framework responsible for creating this type of application. Throughout this article will be exposed major mobile platforms, web technologies that enable the creation of cross-platform mobile apps and some of the tools available in the market, emphasizing the Titanium Mobile. There will be a case study to demonstrate the strengths and weaknesses of cross-platform applications. An existing native application for Android platform will be redone using the Titanium Mobile, it will support Android and iOS platforms.

Resumo. Este artigo tem como objetivo conceituar os cross-platform mobile apps e apresentar o Titanium Mobile, um framework JavaScript responsável por criar este tipo de aplicativo. No decorrer deste artigo serão expostas as principais plataformas móveis, as tecnologias web que possibilitam a criação de cross-platform mobile apps e algumas das ferramentas disponíveis no mercado, enfatizando o Titanium Mobile. Será feito um estudo de caso para demonstrar os pontos positivos e negativos dos aplicativos cross-platform. Um aplicativo nativo já existente para plataforma Android será refeito utilizando o Titanium Mobile, ele suportará as plataformas Android e iOS.

1. Introdução

A telefonia móvel, desde que foi criada em 1973 por Martin Cooper, trouxe diversos benefícios para todo o mundo. A possibilidade de levar um aparelho celular no bolso e fazer ligações em qualquer lugar, a qualquer momento, foi uma inovação muito bem aceita pelos consumidores. Sem dúvida, os aparelhos celulares hoje possuem um papel fundamental na vida de muitos.

Desde sua criação, os aparelhos celulares passaram por um processo de evolução constante. Diversos fabricantes do mundo todo investiram tempo e recursos financeiros para criar novos aparelhos, cada vez mais modernos e desejados pelos consumidores. Dentre os avanços obtidos destacam-se a miniaturização dos aparelhos, melhor qualidade dos sinais das operadoras (2G, 3G, 4G) e novas funcionalidades (câmera, acelerômetro, GPS, bluetooth). A redução do preço dos aparelhos celulares, tornando-os mais acessíveis, possibilitou a aquisição dos mesmos por parte da população menos favorecida financeiramente.

São diversos os fabricantes de aparelhos celulares, dentre eles destacam-se a Motorola, Nokia, LG, Samsung, Apple e BlackBerry. Os fabricantes costumam adotar um SO (Sistema Operacional) para seus aparelhos, em alguns casos eles desenvolvem seus próprios sistemas operacionais.

Os sistemas operacionais, também conhecidos como plataformas, mais utilizados são o Android, iOS, Windows Phone, BlackBerry OS e Symbian. Cada SO possui características únicas que as diferem das demais. Linguagens de programação e ferramentas de desenvolvimento são os principais fatores que diferem uma plataforma da outra.

Os aplicativos para plataformas móveis se tornaram cada vez mais comuns e requisitados pelos usuários. As plataformas possuem lojas virtuais onde vendem os aplicativos que são publicados por empresas especializadas e desenvolvedores de mundo todo. Pelo fato de cada plataforma possuir suas características únicas, a possibilidade de desenvolver um aplicativo multi-plataforma (que seja compatível com mais de uma plataforma) é, no mínimo, interessante.

Os aplicativos nativos, que rodam apenas na plataforma para qual foram desenvolvidos, ainda são a maioria. Aplicativos cross-platform, desenvolvidos utilizando tecnologias web (HTML5, CSS3 e JavaScript) estão se tornando cada vez mais populares e vêm ganhando cada vez mais espaço no mercado.

Este trabalho tem como objetivo apresentar o Titanium Mobile, um framework utilizado para criação de cross-platform mobile apps. Serão expostos os pontos positivos e negativos deste tipo de aplicativo e também será realizado um estudo de caso para demonstrar a eficiência deste framework.

2. Plataformas Mobile

Desde o início do século XXI, grandes avanços na tecnologia móvel estão sendo feitos. Segundo a pesquisa The Clash of Ecosystems da Vision Mobile (2011), durante a última década dezenas de plataformas mobile surgiram, mas não conseguiram manter-se no mercado por muito tempo. São poucas as plataformas que possuem uma parcela relevante no mercado mundial.

As plataformas mobile são um conjunto de tecnologias que envolvem sistemas operacionais, linguagens de programação e ferramentas de desenvolvimento. Os aparelhos celulares necessitam de uma plataforma para funcionarem. Estas plataformas são responsáveis por gerenciar os recursos dos aparelhos como o banco de dados, câmera, GPS e áudio. Também são responsáveis pela interação com o usuário, através de aplicativos e recursos multimídia.

Desde o surgimento da telefonia móvel diversos tipos de aparelhos foram criados. Basicamente eles podem ser divididos em três categorias: feature phones, smartphones e tablets.

Durante a última década acompanhamos o surgimento dos feature phones, aparelhos da geração passada que possuíam poucas funções (se comparados com os aparelhos modernos). Os sistemas operacionais mais comuns nos feature phones eram o J2ME, Symbian, BADA e WebOS.

Os smartphones são os sucessores dos feature phones. Possuem uma capacidade computacional incrivelmente maior que seus antecessores, dispõem de novas funcionalidades (como acelerômetro, reconhecimento facial, suporte a redes 4G e bluetooth 4.0,...) e aplicativos que os tornam mais atrativos e desejados pelos consumidores.

Os tablets são a última palavra em tecnologia móvel. Possuem praticamente a mesma função que os smartphones, porém são aparelhos maiores, no formato de prancheta e, geralmente, possuem maior capacidade computacional.

Segundo o IDC (International Data Corporation) as plataformas dominantes, ou seja, aquelas que possuem maior parcela no mercado mundial são o Android, iOS, BlackBerry, Windows Phone e Symbian. A Tabela 1 demonstra a parcela do mercado que cada plataforma possui no início do segundo semestre de 2012.

Tabela 1. Sistemas Operacionais e suas respectivas parcelas no mercado global.

Sistema Operacional

Parcela do Mercado (2º Sem. 2012)

Android

68,1 %

iOS

16,9 %

BlackBerry

4,8 %

Symbian

4,4 %

Windows Phone

2,5 %

Outros

2,4 %

Para Kevin Restivo, Analista Pesquisador Sênior do IDC, o mercado de sistemas operacionais móveis é agora, sem dúvida, uma corrida de “dois cavalos” devido ao domínio do Android e iOS. Ele afirma também que o mercado de feature phones ainda é grande e a batalha para o domínio do mercado de smartphones está longe de acabar. Novas plataformas como o BBX da BlackBerry e o Firefox OS, que atualmente encontram-se em fase de desenvolvimento, prometem trazer um equilíbrio maior para o mercado.

Cada plataforma possui características próprias que as tornam mais atrativas para os consumidores e desenvolvedores. Os consumidores geralmente procuram aparelhos fáceis de usar, com diversas funcionalidades e um ótimo custo-benefício. Já os desenvolvedores procuram plataformas com uma grande quantidade de dispositivos ativos no mercado, boa documentação e suporte técnico, de fácil aprendizado, baixo custo de desenvolvimento, ambiente de desenvolvimento familiar, entre outras coisas. A Figura 1 retrata o perfil dos desenvolvedores acerca de cada plataforma.

tcc-img-1

Figura 1. Perfil dos desenvolvedores acerca das plataformas móveis.

Observando a Figura 1 é possível concluir que cada plataforma possui um perfil de desenvolvedor diferente. Nas plataformas iOS e BlackBerry um dos principais fatores que atraem os desenvolvedores é o potencial de receita (revenue potential). Já na plataforma Android o baixo custo de desenvolvimento (low cost development) e o fato de ser open source são os fatores que mais atraem os desenvolvedores.

A relação entre o consumidor e desenvolvedor se resume ao aplicativo. As plataformas mobile possuem app stores, lojas virtuais que vendem aplicativos criados por diversas fontes. Segundo a pesquisa Developer Economics 2012 da Vision Mobile (2012), as app stores são os principais canais de vendas, sendo responsáveis por mais de 60% das vendas em plataformas como Android e iOS. Consequentemente, se torna mais vantajoso e lucrativo para o desenvolvedor publicar seus aplicativos na app store da plataforma para qual desenvolve, e não criar seu próprio website para vendê-los.

2.1. Android

Em 2005, a empresa Google comprou a start-up Android Inc. e em 2007 lançou o sistema operacional Android que hoje em dia é apontado pelas pesquisas como a plataforma mobile mais utilizada no mundo. Ele é encontrado em smartphones, tablets, relógios, televisões e em diversos outros tipos de dispositivos.

O Android é um sistema operacional open source segundo a licença Apache 2.0, também é um projeto da OHA (Open Handset Alliance) que foi criada pelo Google e possui dezenas de parceiros no mundo como, Samsung, LG, Telefônica, Dell, HTC, Motorola, Nvidia, Qualcomm e muitas outras empresas que se uniram para acelerar o processo de inovação da plataforma mobile, oferecendo para os consumidores uma alternativa mais acessível financeiramente, rica em recursos e inovadora em todos os aspectos. Segundo a OHA, o Android é a primeira plataforma mobile completa, aberta e gratuita.

Baseado no kernel do Linux, o Android se mostra bastante estável, versátil e completo. Possui diversos drivers, camadas de segurança, gerenciamento de processos e memória. O mercado possui diversos tipos de smartphones que rodam o Android, desde aparelhos low-end (mais simples e baratos), até aparelhos high-end (última geração). Por este e outros fatores o Android foi rapidamente adotado pelo mercado como plataforma para as massas (low-end) e para um público mais exigente (high-end).

Algumas das características do Android apontadas por Allen et al. (2010, p. 35) são: a capacidade de reproduzir gráficos 2D e 3D, através do OpenGL ES, ótimo suporte para arquivos de áudio, vídeo e imagem, multitarefa e engine JavaScript V8. Por utilizar as linguagens de programação Java e C/C++ para o desenvolvimento de aplicativos, o Android abriu novas possibilidades para os desenvolvedores destas linguagens, permitindo-os criar aplicativos facilmente utilizando avançadas API (Application Programming Interface, em português, Interface de Programação de Aplicativos) e uma IDE (Integrated Development Environment, em português, Ambiente Integrado de Desenvolvimento) familiar para muitos, o Eclipse.

2.2. BlackBerry

BlackBerry é uma plataforma mobile que pertence a RIM (Research in Motion), sendo introduzida no mercado em 1999. Seu sistema operacional é o BlackBerry OS. A BlackBerry foi uma das plataformas responsáveis pelo surgimento dos smartphones, estando muitas vezes um passo a frente e inovando em vários aspectos. Com o teclado QWERT característico, facilidade de uso e foco em serviços de email, mensagens de texto e internet, a BlackBerry conquistou principalmente o mercado corporativo, obtendo a fama de marca dos executivos.

A RIM desenvolve seus próprios aparelhos, sistema operacional e aplicativos que são pré-instalados. A plataforma atual vem perdendo espaço para seus concorrentes, por conta disso a RIM adquiriu o sistema operacional QNX e está desenvolvendo a nova geração, conhecida como BBX.

Os aplicativos para plataforma podem ser desenvolvidos utilizando diversas linguagens: Java, C/C++, HTML5 e Adobe AIR. Também é possível converter aplicativos Android para BlackBerry utilizando uma ferramenta criada pela própria RIM.

2.3. iOS

O sistema operacional iOS foi lançado em 2007 pela Apple e está presente na maioria dos dispositivos da empresa: iPod, iPhone e iPad. O iOS é baseado no Macintosh OS X, sistema operacional para plataforma desktop. Utiliza como linguagem de programação o Objective-C, sua IDE é o XCode e é uma plataforma proprietária.

A Apple, que inovou no conceito de app store e design, hoje possui o maior mercado de aplicativos. Sua simplicidade e elegância o tornaram objeto de desejo em todo mundo e referência para as demais empresas do ramo.

3. Tecnologias Web

A Internet pode ser acessada por uma gama de dispositivos, desde smartphones até painéis de carros e geladeiras. Para que isso ocorra, o sistema operacional em questão deve oferecer suporte a browsers (navegadores). Toda essa versatilidade é possível graças às tecnologias utilizadas pela Internet, que são compatíveis com praticamente todos os sistemas operacionais, seja para plataforma desktop, mobile, smart tvs, entre outros.

São diversas as tecnologias que compõem a web. Hardwares, protocolos de comunicação e linguagens de programação são responsáveis pelo funcionamento da rede mundial de computadores. A Internet pode ser descrita como uma camada que está entre o cliente e o servidor, sua função é fazer o intermédio entre os dois, permitindo que as informações possam trafegar pela rede de um lado para o outro. A Figura 2 ilustra como o processo de comunicação cliente-servidor ocorre:

tcc-img-2

Figura 2. Arquitetura Cliente-Servidor.

Na camada do cliente (client layer) se encontra o usuário final. Através de um browser é possível acessar websites e aplicações web fazendo requisições HTTP (HyperText Transfer Protocol). O servidor (server layer) recebe estas requisições, processa e retorna o resultado.

Também fazem parte da Internet diversas linguagens de programação. Estas se dividem basicamente em duas categorias: linguagens client-side e server-side. Linguagens client-side são executadas do lado do cliente, através do browser, geralmente são utilizadas para obter uma melhor experiência do usuário, fornecendo recursos que melhoram a usabilidade e navegação, validação de formulário e outras funcionalidades. JavaScript é a linguagem client-side mais utilizada para criação de conteúdos dinâmicos e ricos em recursos. Já as linguagens server-side são executadas no servidor e fornecem a lógica principal da aplicação, processando dados mais complexos e persistindo informações em banco de dados.

A UI (User Interface) é responsável pela comunicação direta com o usuário final, fornecendo ferramentas como formulários, tabelas e gráficos que permitem a interação e manipulação das informações por parte do usuário. Toda interface gráfica é criada pelo browser, ou seja, no lado do cliente. As páginas de Internet são feitas utilizando HTML, para estruturar e armazenar o conteúdo, e CSS, para estilização visual das páginas. Para Allen et al. (2010, p. 5), essas linguagens e seus padrões de implementações permitem a criação de frameworks e bibliotecas que aumentam significativamente a velocidade de desenvolvimento para web.

3.1. HTML5

O HTML (HyperText Markup Language) está presente em toda página de Internet, ele é a estrutura básica da mesma. Derivado do SGML (Standard Generalized Markup Language) o HTML foi criado no início da década de 1990 com o objetivo de tornar possível o acesso e troca de informações e pesquisas entre universidades.

Todo documento HTML possui tags (etiquetas), palavras entre parênteses angulares (< e >). Essas etiquetas são os comandos de formatação da linguagem. São diversas as tags disponíveis. Com elas é possível, por exemplo, criar parágrafos, cabeçalhos e blocos (divs) que contenham mais tags.

Até a presente data, a versão 4.1 do HTML vigora. Sua próxima versão, o HTML5, está com data prevista para lançamento em 2014. Mesmo estando em fase de desenvolvimento, o HTML5 já está presente em diversos websites e aplicações, sendo suportado parcialmente pela maioria dos browsers. Um dos principais objetivos do HTML5 é facilitar a manipulação dos elementos, permitindo que o desenvolvedor modifique, de forma mais consciente, as características dos objetos de forma não intrusiva e de maneira transparente para o usuário final. Segundo Kosmaczewski (2012, p. 27) o HTML5 é uma especificação avançada em termos de simplicidade, extensibilidade e foco na aplicação.

Em sua nova versão, o HTML fornece recursos que facilitam o uso do CSS e JavaScript, permitindo realizarem seu trabalho da melhor forma possível. Novas tags foram incluídas e algumas tiveram suas funções modificadas. Através de suas novas API (Application Programming Interface) é possível manipular as características destes elementos de forma que o website, ou a aplicação, continue leve e funcional. Canvas, local storage, geolocalização e WebGL são apenas algumas das novidades que o HTML5 traz consigo.

Uma das grandes novidades do HTML5 é a possibilidade de tornar o conteúdo das páginas mais semântico, permitindo aos motores de busca, de certa forma, compreenderem este conteúdo e o indexarem corretamente. As versões anteriores ao HTML5 não possuíam um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar e menu, também não havia um padrão de nomenclatura de IDs, classes ou tags. Com o uso das novas tags header, footer, section, aside, nav e article é possível tornar o código HTML mais semântico e "legível" aos mecanismos de busca, permitindo que a indexação seja feita de uma forma mais inteligente e efetiva.           

A estrutura básica de um documento HTML5 é a seguinte:

<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<title></title>
<meta charset=”UTF-8”>
</head>
<body>

</body>
</html>

3.2. CSS3

Foi dito que o HTML5 é responsável por expor o conteúdo, estruturá-lo e dar semântica ao mesmo. Segundo Stark (2010, p. 6), o CSS (Cascading Style Sheets) é uma linguagem de estilização responsável por definir a apresentação visual de um documento HTML, adicionando elementos como cores, sombras e animações.

O CSS possui seletores que estão associados às tags do HTML. Por meio dos seletores é possível referenciar trechos específicos do documento HTML, estilizando-os individualmente ou coletivamente. O CSS possui seletores pré-definidos como div, span, table e p, também é possível criar nossos próprios seletores, estes são conhecidos como id e class. Os seletores id devem ser utilizados por elementos HTML que não se repetem na página, ou seja, elementos únicos. Os seletores class podem ser atribuídos a mais de um elemento HTML.

div { } /* seletor pré-definido */
#rodape { } /* id */
.texto { } /* class */

O CSS possui propriedades que são pré-definidas e não podem ser adicionadas e/ou removidas. Cada propriedade espera um valor apropriado, algumas suportam diversos valores e formatos. O exemplo a seguir demonstra as variações de valores que a propriedade color suporta:

color: #FF0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(120, 65%, 75%);
color: hsla(120, 65%, 75%, 0.3);

O CSS3 é a especificação mais nova da linguagem. Se comparado a versão anterior, CSS 2.1, o CSS3 adicionou diversas propriedades que facilitam a estilização de websites, tornando o conteúdo muito mais rico em recursos visuais. O CSS3 implementou os perfis (profiles) para plataforma mobile, TVs e impressões, estes permitem definir estilos individuais para cada perfil. Novas propriedades também foram adicionadas, dentre elas destacam-se border-radius, box-shadow, opacity, transform, transition, resize, @font-face, dentre outras.

3.3. JavaScript

Criado em 1995, o JavaScript é, conforme afirma Stark (2010, p. 9), uma linguagem de programação que pode ser adicionado a uma página HTML para torná-la mais interativa e conveniente para o usuário. Ela é orientada a objetos, de tipagem fraca e dinâmica, com funções de primeira classe e uma das poucas linguagens client-side disponíveis.

Por quase 10 anos o JavaScript possuiu uma má reputação. Baixa performance, linguagem peculiar que acompanhava bugs misteriosos e as diversas dependências por causa do DOM (Document Object Model) eram um dos diversos motivos que impediam o crescimento desta linguagem. Com o surgimento do AJAX (Asynchronous Javascript and XML), o JavaScript passou a ser visto com outros olhos e a partir deste momento diversas ferramentas e API começaram a ser desenvolvidas para ele.

Algumas das API que elevaram o status do JavaScript tornando-o essencial no dias atuais são o AJAX, JQuery, ExtJS, Node.js, GWT, MooTools e RaphaëlJS. Ferramentas como o FireBug e JSLint também ajudaram em sua popularização.

4. Cross-Platform Mobile Apps

Na seção 2 foi apresentado as principais plataformas do mercado, foi dito que cada uma possui características únicas que as diferem das demais. Diferentes linguagens de programação, ferramentas de desenvolvimento e API impedem a interoperabilidade e o reuso do código entre as plataformas. Aplicativos para Android são feitos utilizando Java, no iOS é o Objective-C, no Windows Phone utilizasse a plataforma .NET (C# e VB.NET são as principais linguagens). Algumas plataformas, como iOS e Android, permitem o uso do C/C++ para o desenvolvimento de aplicativos, mas cada uma possui API distintas que impossibilitam o reuso de boa parte do código.

Para desenvolver uma aplicação nativa (utilizando as linguagens e ferramentas padrão de cada plataforma) que rode em diversas plataformas seria necessário criar uma aplicação para cada plataforma, isso exige mais investimento, tempo e uma equipe com bastante experiência nas plataformas para qual o aplicativo será desenvolvido.

Para resolver este tipo de problema surgiram os webapps. Conforme afirma Kessin (2008, p. 2), a web é cross-platform, é possível escrever páginas de internet que irão funcionar no Windows, Mac OS X, Linux, iPhone/iPad, Android e diversas outras plataformas. Toda plataforma mobile possui browsers que são capazes de interpretar scripts do JavaScript e reproduzir documentos HTML estilizados com CSS, alguns já suportam HTML5 e CSS3. Por este e outros motivos, os webapps passaram a chamar cada vez mais a atenção dos desenvolvedores, principalmente daqueles com experiência na plataforma web, pois estes podem reutilizar todo o conhecimento que já possuem para desenvolver em uma nova plataforma.

Segundo Stark (2010, p. 1), os webapps são basicamente websites otimizados para plataforma mobile. Stark (2010, p. 1) aponta como características principais dos webapps o fato de serem desenvolvidos utilizando tecnologias web e não com a linguagem nativa da plataforma, serem acessados pelo navegador (através de uma URL) e não serem instalados no dispositivo. Os webapps rodam em uma webview, componente visual que representa um browser no aplicativo. Botões, campos de texto, rótulos e tabelas são conhecidos como widgets, estes widgets fazem parte da interface do aplicativo, sendo responsáveis pela interação com o usuário. Nos webapps a aparência destes widgets é bem próxima, por exemplo, dos widgets do iOS ou Android, isso varia de acordo com o framework que está sendo utilizado.

Também existem os hybrid apps (aplicativos híbridos). Poulsen et al. (2012, p. 27) descreve os hybrid apps como uma aplicação onde toda a lógica de negócios e a UI são feitas utilizando HTML, CSS e JavaScript e que roda em um native wrapper como o Titanium Webview. Ele também afirma que os aplicativos híbridos possuem acesso limitado ao hardware e certas funcionalidades dos aparelhos, entretanto podem acessar mais funcionalidades do que os webapps. Outra característica dos aplicativos híbridos citada por Poulsen (2012, p. 27) é a possibilidade de publicá-los nas lojas de aplicativos oficiais e não requererem conexão ativa com a internet.

Em resumo, os cross-platform mobile apps são aplicativos desenvolvidos utilizando tecnologias web que suportam múltiplas plataformas móveis. Eles podem ser webapps ou hybrid apps.

4.1. Write Once, Run Anywhere

A ideia de se criar um único aplicativo que seja compatível com diversas plataformas simultaneamente permite que o desenvolvedor foque em uma única linguagem, uma única ferramenta de desenvolvimento e API, possibilitando o reuso do código, desenvolvimento mais rápido, diminuição da complexidade e recursos a serem utilizados. Segundo Allen et al. (2010, p. 5), estes novos frameworks são influenciados pelo RAD (Rapid Application Development), modelo de processo de desenvolvimento de software muito utilizada no desenvolvimento de aplicações web.

Um aplicativo com estas características é conhecido como um aplicativo cross-platform. Quando se desenvolve uma aplicação que seja compatível com múltiplas plataformas, o conceito WORA está sendo aplicado.

WORA (Write Once, Run Anywhere, em português, Escreva Uma Vez, Rode Em Qualquer Lugar) é um conceito que fortalece a reutilização do código, interoperabilidade entre diversas plataformas e o desenvolvimento de aplicativos cross-platform, seja nas plataformas desktop, web ou mobile. Shackles (2012, p. 3) explica que a ideia do WORA é escrever tudo de uma vez, do jeito que queremos, e imediatamente ter uma aplicação que suporte várias plataformas.

Shackles (2012, p. 3) cita a linguagem de programação Java como exemplo. Java é subdividido em três plataformas: J2SE (plataforma desktop), J2EE (plataforma web) e J2ME (plataforma mobile). Em todas estas plataformas a linguagem continua sendo a mesma, apenas algumas API bem específicas diferem de plataforma para plataforma.

Como foi dito, o desenvolvimento de um aplicativo cross-platform traz consigo diversos benefícios, mas para que isso seja alcançado com sucesso será necessário um esforço adicional e, talvez, fazer alguns sacrifícios. As plataformas possuem suas próprias configurações de hardware, tamanhos variados de telas e resoluções diferentes, botões (físicos e virtuais) e widgets específicos. Cada plataforma possui sua guideline que diz como os aplicativos devem se parecer e se comportar. Um aplicativo cross-platform deve seguir os padrões de cada plataforma, muitas vezes será necessário escrever trechos de códigos especifico para cada uma.

4.2. Frameworks JavaScript

A possibilidade de utilizar tecnologias web para desenvolver cross-platform mobile apps mostrou-se bastante eficaz. Por se tratar de uma nova alternativa, vários frameworks começaram a surgir com o intuito de facilitar o desenvolvimento de cross-platform mobile apps.

Frameworks são bibliotecas que possuem o objetivo de aumentar a velocidade de desenvolvimento e abstrair certa complexidade do código. Para Castledine et al. (2011, p. 100), um framework pode simplificar muito nossas tarefas tomando conta da inconsistência entre múltiplos dispositivos e browsers e oferecendo widgets pré-construídos.

Os frameworks javascript suportam o desenvolvimento de webapps, onde o aplicativo se comporta como um website customizado para rodar em plataformas mobile. Esta abordagem facilita a manipulação do código gerado pelo framework (HTML5, CSS3 e JavaScript), oferecendo maior controle ao desenvolvedor. A homogeneidade da UI da aplicação entre as diferentes plataformas também é uma característica dos webapps.

Como alternativa aos webapps, existem os frameworks javascript que, além de criar webapps, também criam hybrid apps. Aplicações nativas geralmente são desenvolvidas utilizando as linguagens e ferramentas padrões para cada plataforma, esta é a forma tradicional de desenvolvimento. Em uma aplicação nativa para o Android utilizasse o Java com a IDE Eclipse, já em uma aplicação nativa para iOS o Objective-C e a IDE XCode são utilizados. Alguns frameworks javascript são capazes de criar aplicativos híbridos convertendo e/ou emulando o código javascript em linguagem nativa utilizando técnicas de virtualização ou compilação JIT (Just-In-Time, em português, Em Tempo de Execução).

Aplicativos nativos, se comparados aos webapps, são mais rápidos e facilitam o acesso a recursos do aparelho, como câmera, banco de dados nativo, acelerômetro, agenda telefônica, entre outros. A Appcelerator (2012, p. 3) afirma que os aplicativos nativos proveem uma melhor UX (User Experience, em português, Experiência do Usuário) enquanto os aplicativos desenvolvidos com HTML5 diminuem os custos ao aplicar o conceito Write Once, Run Anywhere.

São diversos os frameworks javascript que permitem a criação de cross-platform mobile apps. O Gráfico 1, disponível na pesquisa Cross-Platform Developer Tools 2012 feito pela Vision Mobile (2012), apresenta os principais frameworks javascript cross-platform utilizados por programadores de todo o mundo.

 tcc-img-3

Gráfico 1. Principais Frameworks JavaScript.

Os cinco frameworks mais utilizados atualmente, segundo o Gráfico 1, são:

  • PhoneGap: Permite a criação de hybrid apps para as plataformas iOS, Android, Blackberry, Symbian, Bada e Windows Phone. Através do componente webview nativo de cada plataforma, o PhoneGap consegue executar a aplicação que foi desenvolvida utilizando tecnologias web. Ele oferece diversas API javascript que possibilitam o uso de recursos nativos dos dispositivos, como bússolas escrita e leitura de arquivos na unidade de armazenamento e geolocalização.
  • Sencha Touch: Baseado nas bibliotecas JavaScript ExtJS, jQTouch e Raphaël, o Sencha Touch é um dos frameworks mais utilizados. Permite a criação de webapps para as plataformas Android, iOS e Blackberry, possui sua própria IDE, o Sencha Architect, e a extensão Sencha Animator para criação de animações utilizando CSS3.
  • Mono: MonoTouch e Mono for Android são dois produtos da empresa Xamarim. Estas duas ferramentas possibilitam a criação de native apps para as plataformas iOS e Android utilizando a plataforma .NET, mais precisamente a linguagem C#.
  • Titanium Mobile: Criado pela Appcelerator e com sua própria IDE, o Titanium Studio, o Titanium Mobile possibilita a criação de webapps e hybrid apps para as plataformas iOS, Android e Blackberry (em desenvolvimento). Além de utilizar javascript como linguagem principal, também permite a utilização de PHP, Python e Ruby no desenvolvimento dos aplicativos. Também possui suas próprias API javascript que possibilitam o uso de recursos nativos que as plataformas oferecem.
  • Adobe Flex: Adobe AIR é a versão desktop do Adobe Flash Player, que passou a ser suportada pelas plataformas mobile iOS, Android e Blackberry. O Adobe Flex é um framework que permite a criação de aplicativos AIR utilizando Action Script e MXML.

5. Titanium Mobile

Em 2006, foi fundada a Appcelerator, empresa responsável pelo framework Titanium Mobile. Desde seu lançamento, o Titanium Mobile vem sendo constantemente melhorado, suportando novas plataformas e com ferramentas cada vez mais poderosas.

Titanium Mobile é um framework open source, segundo a Apache License versão 2.0, e possui sua própria IDE (Integrated Development Environment, em português, Ambiente Integrado de Desenvolvimento), o Titanium Studio. Suporta a criação de webapps e hybrid apps para as plataformas Android, iOS e Blackberry (em desenvolvimento). As aplicações feitas com o Titanium Mobile utilizam HTML5, CSS3 e JavaScript. O framework também suporta as linguagens server-side PHP, Ruby e Python.

Segundo Allen et al. (2010, p. 153), o Titanium Mobile possui API independentes para cada plataforma, estas API são responsáveis por acessar os componentes nativos como barras de navegação, menus e caixas de diálogos, também são responsáveis pelo acesso a funcionalidades nativas dos aparelhos como leitura e escrita no sistema de arquivos, banco de dados e acelerômetro. A interface das aplicações hibridas é construída com os widgets nativos de cada plataforma, isso torna as aplicações rápidas, padronizadas e compatíveis.

O Titanium Mobile possui sua própria loja virtual, a Appcelerator Marketplace, nela é possível encontrar diversos módulos que estendem as funcionalidades do framework. Esta é uma característica interessante do Titanium Mobile se comparado a seus concorrentes, pois os desenvolvedores tem a possibilidade de estender as funcionalidades do framework através de módulos e podem publicá-los em uma loja online oficial.

Segundo a Appcelerator cerca de 80% do código escrito pode ser reaproveitado entre as plataformas. Estes 20% restantes estão relacionados às especificidades de cada plataforma, como os widgets e elementos da user interface específicos de cada plataforma. O Titanium Mobile é um ótimo exemplo de como o conceito Write Once, Run Anywhere deve ser empregado.

Depois de compilada e empacotada, grande parte do código javascript do aplicativo é convertido em código nativo. São incluídos no aplicativo um interpretador JavaScript, várias API e uma engine webkit para renderização dos elementos gráficos. A Figura 3 ilustra como este processo de conversão ocorre.

tcc-img-4

Figura 3. Processo de compilação e conversão dos aplicativos feitos com o Titanium Mobile.

No topo encontra-se o aplicativo propriamente dito, construído com HTML5, CSS3 e JavaScript. Este pode ser desenvolvido utilizando diversas API e módulos que o Titanium oferece. O Titanium Mobile dispõe de uma API javascript (Titanium Bridge) responsável por realizar a conversão entre o javascript e as linguagens nativas de cada plataforma. Ao criar um botão, abrir uma janela ou acessar o banco de dados com o JavaScript será feito, em tempo de execução, a conversão destas chamadas em código nativo. Em outras palavras, quando se cria um botão utilizando o Titanium Mobile será criado um botão nativo, com todas as características de um botão feito com código nativo.

6. Estudo de Caso

O presente estudo de caso abordará na prática como o Titanium Mobile funciona. Será demonstrado como é possível criar um cross-platform mobile app através de tecnologias web e como reutilizar completamente o código. O estudo de caso consiste em desenvolver um novo aplicativo tendo como base um aplicativo nativo para plataforma Android já existente. Este novo aplicativo suportará as plataformas móveis Android e iOS.

O DicInfo é um aplicativo nativo para plataforma Android que foi desenvolvido utilizando a linguagem de programação Java e a IDE Eclipse. Ele é gratuito e encontra-se disponível para download no Google Play, loja online de aplicativos do Android. Este aplicativo é um dicionário de informática que contém mais de 1.800 termos específicos da área. O DicInfo possui duas telas: a primeira contém uma lista com todos os termos do dicionário organizados alfabeticamente e separados por seções; a segunda informa a descrição do termo selecionado.

tcc-img-5

Figura 4. DicInfo: Aplicativo nativo para Android.

Pelo fato do aplicativo em questão ser nativo para plataforma Android ele se torna automaticamente incompatível com outras plataformas. Isso ocorre porque as tecnologias envolvidas no desenvolvimento do aplicativo são específicas do Android e diferentes das tecnologias utilizadas em outras plataformas, como o iOS e Windows Phone.

Para suportar outras plataformas, a primeira opção seria desenvolver um novo aplicativo independente do aplicativo já existente, utilizando as linguagens e ferramentas padrões das novas plataformas a serem suportadas. Caso seja feito dessa maneira os desenvolvedores deveriam possuir um conhecimento sólido nas linguagens e ferramentas de desenvolvimento de cada plataforma, dessa forma a complexidade para concluir esta tarefa seria relativamente alta.

A segunda opção seria desenvolver um novo aplicativo que suportasse simultaneamente múltiplas plataformas, utilizando exatamente os mesmos algoritmos, linguagens e ferramentas de desenvolvimento. Essa abordagem substitui a necessidade de conhecer as tecnologias especificas de cada plataforma para apenas um conjunto especÍfico de tecnologias que são compatíveis com múltiplas plataformas.

A primeira opção se refere aos aplicativos nativos e a segunda opção aos aplicativos cross-platform. O DicInfo será refeito, em sua nova versão ele deixará de ser um aplicativo nativo e passará a ser multi-plataforma, suportando tanto o Android quanto o iOS.

O Titanium Mobile será utilizado para o desenvolvimento deste novo aplicativo. Ele foi escolhido devido a sua facilidade de uso, rica documentação e maturidade. Em sua atual versão, o suporte a plataforma BlackBerry encontra-se em fase de desenvolvimento, por este motivo o aplicativo a ser desenvolvido não contará com suporte imediato para esta plataforma.

O aplicativo desenvolvido com o Titanium Mobile possui a mesma base de dados que a aplicação nativa para Android. Ele utiliza recursos comuns entre as plataformas, como acesso ao banco de dados SQLite e o uso do ListView para apresentar o conteúdo. Sua UI (User Interface) não foi personalizada, foi preferível adotar o padrão de cada plataforma. Não foram utilizados recursos específicos de cada plataforma como o Notification Bar do Android ou a Tool Bar do iOS. O objetivo é demonstrar como o mesmo código pode ser completamente reutilizado em duas plataformas distintas.

A Figura 5 mostra a estrutura adotada para o desenvolvimento do aplicativo.

tcc-img-6

Figura 5. Estrutura do projeto.

A seguir serão descritos os principais arquivos do projeto. Na Tabela 2 encontra-se a entidade do Banco de Dados utilizada.

  • joli.js: micro ORM (Object-Relational Mapping) utilizada para comunicação com o banco de dados SQLite;
  • app.js: arquivo principal. Responsável pela criação da tela inicial e demais funcionalidades do aplicativo;
  • dbUtil.js: responsável por inserir e selecionar os registros do banco de dados. Implementa o micro ORM joli.js;
  • description.js: segunda tela da aplicação. Responsável por exibir a descrição do termo selecionado;
  • dictionary.js: contem todos os termos que serão cadastrados no banco de dados. Os termos estão separados por seções, cada seção representa uma letra do alfabeto;
  • tiapp.xml: arquivo de configuração do Titanium Mobile.

Tabela 2. Estrutura da tabela utilizada no Banco de Dados.

dictionary

id

int

Primary Key

title

text

 

detail

text

 

O funcionamento do aplicativo é simples. Ao iniciá-lo pela primeira vez, as informações encontradas em dictionary.js são cadastradas no banco de dados, o arquivo dbUtil.js é responsável por esta tarefa. O arquivo app.js contém a view principal e também é responsável por controlar boa parte da aplicação. Os termos cadastrados são inseridos em uma lista que está dividida em seções, cada seção representa uma letra do alfabeto. Ao tocar em um item da lista o evento click é disparado e uma nova view aparece contendo a descrição do termo selecionado, o arquivo description.js é responsável por exibir esta nova view.

Ao completar o desenvolvimento do aplicativo, foram gerados os arquivos de instalação do aplicativo para as plataformas Android e iOS. Como já foi dito, o suporte para plataforma BlackBerry, até a presente data, encontra-se em fase de desenvolvimento.

As Figuras 6 e 7 mostram o mesmo aplicativo funcionando nas plataformas iOS e Android respectivamente.

tcc-img-7

Figura 6. Aplicativo rodando no iOS.

tcc-img-8

Figura 7. Aplicativo rodando no Android.

O aplicativo cross-platform desenvolvido é híbrido e não um webapp, isto pode ser confirmado pela utilização do banco de dados e aparência do aplicativo. Webapps não possuem acesso ao banco de dados, já os aplicativos híbridos sim. Como foi dito anteriormente, aplicativos híbridos conseguem acessar diversas funcionalidades das plataformas, dentre elas encontra-se o acesso ao banco de dados SQLite. Outro fator que difere um aplicativo híbrido de um webapp é a UI. Um webapp geralmente possui uma aparência homogênea independente da plataforma, já os aplicativos híbridos utilizam os componentes nativos de cada plataforma, isso garante que o aplicativo irá se comportar e se parecer exatamente como um aplicativo nativo. As Figuras 7 e 8 mostram o DicInfo com aparência heterogênea nas plataformas Android e iOS.

Como é possível observar, uma aplicação desenvolvida com o Titanium Mobile suporta múltiplas plataformas e prioriza a interface nativa de cada uma. Com um mesmo código foi possível desenvolver um cross-platform mobile app, simples, completo, capaz de ser publicados nas lojas online das plataformas que suporta e com código totalmente reutilizado.

7. Considerações Finais

Devido aos constantes avanços na área da telefonia móvel, está cada vez mais difícil acompanhar esta evolução que não cessa. Como foi dito existem diversas plataformas móveis, cada uma possui suas próprias características que as diferem das demais. A cada dia são publicados milhares de aplicativos nas lojas online, divididos em diversas categorias, para todos os perfis de usuários.

As empresas desenvolvedoras de aplicativos estão passando por um desafio cada vez mais intenso. Com a concorrência acirrada elas se sentem cada vez mais pressionadas a lançar rapidamente novos aplicativos. E com novas plataformas surgindo no mercado, suportar o maior número de plataformas pode ser a chave para o sucesso. Aplicativos multi-plataforma deixaram de ser um mero capricho e passaram a ser a solução dos problemas destas empresas.

Diversas ferramentas que permitem o desenvolvimento de aplicativos cross-platform foram apresentadas, todas elas utilizam tecnologias web a seu favor. HTML, CSS e JavaScript possuem um papel fundamental nas plataformas móveis, sua utilidade e importância superaram as expectativas. Estas soluções apresentadas comprovam a importância e poder que essas três tecnologias (HTML, CSS e JavaScript) tem quando unidas. Diminuição do custo e complexidade, reutilização do código e rápido desenvolvimento são características marcantes dos aplicativos cross-platform, o aplicativo desenvolvido no estudo de caso é um ótimo exemplo disso.

Dentre as ferramentas citadas, o framework Titanium Mobile foi abordado com mais profundidade. A flexibilidade que esse framework proporciona permite a criação de aplicativos de todos os gêneros e para todas as necessidades. Cada vez mais difundido e aperfeiçoado, o Titanium Mobile está entre as ferramentas mais utilizadas pelos desenvolvedores de aplicativos.

Graças a ferramentas como o Titanium Mobile, o mercado está se adaptando a este novo cenário, as empresas desenvolvedoras de aplicativos estão usufruindo das possibilidades que essas ferramentas proporcionam. O Titanium Mobile e demais frameworks ainda precisam melhorar muito em alguns aspectos. Fatores como tempo de resposta do aplicativo e acesso total aos recursos dos aparelhos impendem à adoção dos frameworks cross-platform em algumas situações.

Ainda há muito a ser feito, muitos progressos estão por vir. Nos últimos cinco anos os frameworks cross-platform evoluíram exponencialmente e a tendência é continuar evoluindo até alcançar a qualidade dos aplicativos nativos. É necessário que as plataformas ofereçam maior suporte às tecnologias web, mais precisamente aos aplicativos cross-platform, fornecendo um ambiente mais compatível e facilitando o acesso aos recursos do aparelho.

8. Referências

ALLEN, S.; GRAUPERA, V.; LUNDRIGAN, L. Pro Smartphone Cross-Platform Development. New York: Apress, 2010.

APPCELERATOR. Native vs. HTML5 Mobile App Development: Which option is best?. New York, 2012.

FLING, B. Mobile Design and Development. Sebastopol: O’Reilly, 2009.

CASTLEDINE, E.; EFTOS, M.; WHEELER, M. Build mobile websites and apps for smart devices. Collingwood: SitePoint, 2011.

CHARLAND, A.; LEROUX, B. Mobile application Development: Web vs. Native. New York: ACM, v.54, 2012.

CHUAN, S. HTML5 Mobile Development Cookbook. Birmingham: Packt Publishing, 2012.

GARDNER, L. D.; GRIGSBY, J. Head First Mobile Web. Sebastopol: O’Reilly, 2012.

KESSIN, Z. Programming HTML5 Applications. Sebastopol: O’Reilly, 2008.

KOSMACZEWSKI, A. Mobile JavaScript Application Development. Sebastopol: O’Reilly, 2012.

MICROSOFT. Developing Modern Mobile Web Apps. MSDN Library, 2012.

POLLENTINE, B. Appcelerator Titanium Smartphone App Development Cookbook. Birmingham: Packt Publishing, 2011.

POULSEN, T.; WHINNERY, K.; LUKASAVAGE, T.; DOWSETT, P. Building Mobile Applications with Titanium. Mountain View: Appcelerator, 2012.

SHACKLES, G. Mobile Development with C#. Sebastopol: O’Reilly, 2012.

STARK, J. Building Android Apps with HTML, CSS, and JavaScript. Sebastopol: O’Reilly, 2010.

STARK, J. Building iPhone Apps with HTML, CSS, and JavaScript. Sebastopol: O’Reilly, 2010.

PRADHAN, D. Cross-platform Mobile and Tablet Application. Helsinki Metropolia University of Applied Sciences, 2011.

VISION MOBILE. Mobile Platforms: Clash of Ecosystems. London, 2011.

VISION MOBILE. Cross-Platform Developer Tools 2012. London, 2012.

VISION MOBILE. Developer Economics 2012. London, 2012.

WESTFALL, H.; AUGUSTO, R.; ALLEN, G. Beginning Android Web Apps Development. New York: Apress, 2012.

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin