SmartMail| Entidade Promotora:

Parceiros:

21/04/2014

Desenvolvimento
mobile
multiplataforma
Um resumo sobre as ferramentas PhoneGap e Appcelerator Titanium

1/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

ndice
Introduo .......................................................................................................................................................... 1
PhoneGap ........................................................................................................................................................... 1
Appcelerator Titanium ....................................................................................................................................... 7
Referncias .......................................................................................................................................................18

Introduo
O custo de desenvolver aplicaes nativas para vrias plataformas tem sido sempre elevado, at mesmo
hoje em dia. Especialmente para pequenas organizaes, o custo de desenvolver nativamente para vrias
plataformas frequentemente demasiado elevado para ser uma escolha vivel. Com a divulgao do
conceito de aplicaes hbridas e com a ubiquidade crescente de dispositivos interativos, a procura de uma
forma acessvel de criar aplicaes multiplataforma de alta qualidade e com acesso a funcionalidades
nativas tem vindo a aumentar. As plataformas PhoneGap (PhoneGap Homepage) e Appcelerator Titanium
(Appcelerator Titanium) foram criadas para tentar satisfazer essa procura, prometendo ser capazes de dar a
developers a hiptese de criar aplicaes multiplataforma com custos muito reduzidos. Este documento vai
analisar as descobertas feitas e concluses aps testar ambas as plataformas. Na maioria dos testes foi
utilizado o mesmo grfico de barras, em ambas as plataformas, para mais facilmente descobrir as
diferenas de comportamento e eficincia entre as duas principais plataformas seleccionadas. No entanto,
esta escolha no representa de forma alguma a variedade de grficos disponvel.

PhoneGap
Atravs de um simples comando no terminal do Windows possvel criar uma aplicao bsica, semelhante
a um Hello World, que pode ser testada nos diferentes emuladores ou dispositivos correspondentes s
plataformas pretendidas. Esta aplicao pode ser testada de seguida com um outro comando simples para
se obter uma mensagem simples em cada emulador. Para testar as funcionalidades do PhoneGap
(PhoneGap Homepage) foi criada a aplicao base e posteriormente adicionado um grfico exemplificativo
grtis da Highcharts (Highcharts Homepage). O resultado est demonstrado nas figuras seguintes.
Enquanto que a Figura 1 mostra o grfico exemplificativo num emulador de Android verso 3.2, a Figura 2
mostra o mesmo grfico num emulador de Windows Phone 8. Ambos foram criados a partir do mesmo
cdigo e ambos beneficiam de nveis de qualidade semelhantes em termos de animaes e controlos. Ao
rodar o display dos emuladores, os grficos tambm rodam, e no caso do Android mudam as propores
para mostrar o grfico claramente, exemplificado na Figura 3. A Figura 4 mostra como o grfico no fica
bem adaptado ao ecr na posio vertical no emulador de Windows Phone 8. A variedade de grficos
elevadssima j que possvel utilizar qualquer biblioteca de grficos HTML. Por exemplo, a Figura 5
contem uma combinao de grficos de rea e de linha e a Figura 6 mostra um bubble chart. Nenhum
destes exemplos recebeu alteraes para alm da introduo dos dados do grfico, o que significa que so
2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

funcionalidades inerentes de qualquer aplicao PhoneGap. Foi possvel instalar a aplicao num
dispositivo Android facilmente onde ficou completamente funcional sem passos adicionais.

Figura 1 - PhoneGap Bar Chart Android Horizontal

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 2 - PhoneGap Bar Chart WP8 Horizontal

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 3 - PhoneGap Bar Chart Android Vertical

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 4 - PhoneGap Bar Chart WP8 Vertical

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 5 - Phonegap Android Combined Chart

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 6 - PhoneGap Android Bubble Chart

Appcelerator Titanium
A criao de projetos com Titanium feita principalmente atravs do IDE da Appcelerator, o Titanium
Studio. Atravs do Studio possvel gerir projetos, dispositivos e emuladores. Num ambiente Windows, as
nicas alternativas para emuladores diretamente disponveis so Android e Blackberry. O emulador de
Windows Phone pode tambm ser usado mas requer passos adicionais para que fique disponvel. Neste
documento vo ser analisados os resultados obtidos quando o prottipo foi executado em Android e
Windows Phone. Como apresentado nas duas figuras abaixo, foi feita uma aplicao muito simples com o
mesmo grfico usado com o PhoneGap. A Figura 7 mostra como, apesar de a aplicao no se redesenhar
automaticamente para melhor apresentar o grfico, possvel ampliar ou reduzir o seu tamanho e desloclo para destacar informao. A Figura 8 mostra uma viso mais global do grfico. Como este exemplo usa
webviews, grficos HTML de diferentes bibliotecas podem ser usados, como exemplificado na Figura 9. O
grfico apresentado a foi feito utilizando a biblioteca Google Charts (Google Charts) ao contrrio do outro
grfico que provem da Highcharts. As figuras Figura 10 e Figura 11 mostram o que foi obtido de executar a
aplicao no emulador de Windows Phone. A aplicao apresentada com o mesmo contedo,
automaticamente formatado para se adaptar ao dispositivo mas parece faltar alguma flexibilidade j que
esta no parece conseguir rodar quando simulada a rotao do dispositivo. O segundo grfico tambm
no apresentado no outro separador quando este selecionado, como apresentado na Figura 12. A figura
Figura 13 mostra um outro grfico a funcionar com dois grficos de rea. Este grfico e outros desta
biblioteca so interativos e, portanto, permitem pressionar em certos elementos para obter mais
2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

informao. As figuras Figura 14 e Figura 15 ilustram um velocmetro animado. As animaes so fludas,

movem-se com um desempenho semelhante num browser de Internet.
Nestes exemplos em particular, os grficos foram conseguidos com webviews, o que subverte o propsito
do Titanium (j que este permite executar aplicaes nativamente) mas que aparenta ser a nica soluo
vivel durante esta investigao. Existe um mdulo de desenho de grficos da Titanium mas este ainda s
est disponvel para iOS. No entanto, para tarefas como a insero de elementos comuns como botes e
caixas de texto, esta plataforma permite programar em Javascript puro. Para aceder s funcionalidades
nativas necessrio recorrer s bibliotecas Titanium, o que no requer o uso de qualquer outra linguagem,
mas para desenho de grficos, at o mdulo de grficos da Titanium ser disponibilizado para outras
plataformas, o Titanium necessita de bibliotecas externas que por sua vez necessitam de uma base HTML.

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 7 - Titanium Bar Chart Android Vertical

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 8 - Titanium Bar Chart Android Horizontal

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 9 - Titanium Pie Chart Android

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 10 - Titanium WP8 Bar Chart Vertical

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 11 - Titanium WP8 Bar Chart Horizontal

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 12 - Titanium WP8 Pie Chart Missing

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 13 - Titanium Android Area Chart

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 14 - Titanium WP8 Gauge 1

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Figura 15 - Titanium WP8 Gauge 2

2/2
Projeto em curso com o apoio de:

SmartMail| Entidade Promotora:

Parceiros:

Referncias
Appcelerator Titanium. (s.d.). Obtido de Appcelerator: http://www.appcelerator.com/titanium/
Google Charts. (s.d.). Obtido de Google Developers: https://developers.google.com/chart/
Highcharts Homepage. (s.d.). Obtido de Highcharts: http://www.highcharts.com/
PhoneGap Homepage. (s.d.). Obtido de PhoneGap: http://phonegap.com/

2/2
Projeto em curso com o apoio de: