Protótipo Multiplataforma

SmartMail| Entidade Promotora: Parceiros:

1/2 Projeto em curso com o apoio de:

21/04/2014

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



Índice Introdução .......................................................................................................................................................... 1

PhoneGap ........................................................................................................................................................... 1

Appcelerator Titanium ....................................................................................................................................... 7

Referências ....................................................................................................................................................... 18

Introdução O custo de desenvolver aplicações nativas para várias plataformas tem sido sempre elevado, até mesmo

hoje em dia. Especialmente para pequenas organizações, o custo de desenvolver nativamente para várias

plataformas é frequentemente demasiado elevado para ser uma escolha viável. Com a divulgação do

conceito de aplicações híbridas e com a ubiquidade crescente de dispositivos interativos, a procura de uma

forma acessível de criar aplicações 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 hipótese de criar aplicações multiplataforma com custos muito reduzidos. Este documento vai

analisar as descobertas feitas e conclusões após testar ambas as plataformas. Na maioria dos testes foi

utilizado o mesmo gráfico de barras, em ambas as plataformas, para mais facilmente descobrir as

diferenças de comportamento e eficiência entre as duas principais plataformas seleccionadas. No entanto,

esta escolha não representa de forma alguma a variedade de gráficos disponível.

PhoneGap Através de um simples comando no terminal do Windows é possível criar uma aplicação básica, semelhante

a um “Hello World”, que pode ser testada nos diferentes emuladores ou dispositivos correspondentes às

plataformas pretendidas. Esta aplicação 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 aplicação base e posteriormente adicionado um gráfico exemplificativo

grátis da Highcharts (Highcharts Homepage). O resultado está demonstrado nas figuras seguintes.

Enquanto que a Figura 1 mostra o gráfico exemplificativo num emulador de Android versão 3.2, a Figura 2

mostra o mesmo gráfico num emulador de Windows Phone 8. Ambos foram criados a partir do mesmo

código e ambos beneficiam de níveis de qualidade semelhantes em termos de animações e controlos. Ao

rodar o display dos emuladores, os gráficos também rodam, e no caso do Android mudam as proporções

para mostrar o gráfico claramente, exemplificado na Figura 3. A Figura 4 mostra como o gráfico não fica

bem adaptado ao ecrã na posição vertical no emulador de Windows Phone 8. A variedade de gráficos é

elevadíssima já que é possível utilizar qualquer biblioteca de gráficos HTML. Por exemplo, a Figura 5

contem uma combinação de gráficos de área e de linha e a Figura 6 mostra um bubble chart. Nenhum

destes exemplos recebeu alterações para além da introdução dos dados do gráfico, o que significa que são



funcionalidades inerentes de qualquer aplicação PhoneGap. Foi possível instalar a aplicação num

dispositivo Android facilmente onde ficou completamente funcional sem passos adicionais.

Figura 1 - PhoneGap Bar Chart Android Horizontal



Figura 2 - PhoneGap Bar Chart WP8 Horizontal



Figura 3 - PhoneGap Bar Chart Android Vertical



Figura 4 - PhoneGap Bar Chart WP8 Vertical



Figura 5 - Phonegap Android Combined Chart



Figura 6 - PhoneGap Android Bubble Chart

Appcelerator Titanium A criação de projetos com Titanium é feita principalmente através do IDE da Appcelerator, o Titanium

Studio. Através do Studio é possível gerir projetos, dispositivos e emuladores. Num ambiente Windows, as

únicas alternativas para emuladores diretamente disponíveis são Android e Blackberry. O emulador de

Windows Phone pode também ser usado mas requer passos adicionais para que fique disponível. Neste

documento vão ser analisados os resultados obtidos quando o protótipo foi executado em Android e

Windows Phone. Como apresentado nas duas figuras abaixo, foi feita uma aplicação muito simples com o

mesmo gráfico usado com o PhoneGap. A Figura 7 mostra como, apesar de a aplicação não se redesenhar

automaticamente para melhor apresentar o gráfico, é possível ampliar ou reduzir o seu tamanho e deslocá-

lo para destacar informação. A Figura 8 mostra uma visão mais global do gráfico. Como este exemplo usa

webviews, gráficos HTML de diferentes bibliotecas podem ser usados, como exemplificado na Figura 9. O

gráfico apresentado aí foi feito utilizando a biblioteca Google Charts (Google Charts) ao contrário do outro

gráfico que provem da Highcharts. As figuras Figura 10 e Figura 11 mostram o que foi obtido de executar a

aplicação no emulador de Windows Phone. A aplicação é apresentada com o mesmo conteúdo,

automaticamente formatado para se adaptar ao dispositivo mas parece faltar alguma flexibilidade já que

esta não parece conseguir rodar quando é simulada a rotação do dispositivo. O segundo gráfico também

não é apresentado no outro separador quando este é selecionado, como apresentado na Figura 12. A figura

Figura 13 mostra um outro gráfico a funcionar com dois gráficos de área. Este gráfico e outros desta

biblioteca são interativos e, portanto, permitem pressionar em certos elementos para obter mais



informação. As figuras Figura 14 e Figura 15 ilustram um velocímetro animado. As animações são fluídas,

movem-se com um desempenho semelhante num browser de Internet.

Nestes exemplos em particular, os gráficos foram conseguidos com webviews, o que subverte o propósito

do Titanium (já que este permite executar aplicações nativamente) mas que aparenta ser a única solução

viável durante esta investigação. Existe um módulo de desenho de gráficos da Titanium mas este ainda só

está disponível para iOS. No entanto, para tarefas como a inserção de elementos comuns como botões e

caixas de texto, esta plataforma permite programar em Javascript puro. Para aceder às funcionalidades

nativas é necessário recorrer às bibliotecas Titanium, o que não requer o uso de qualquer outra linguagem,

mas para desenho de gráficos, até o módulo de gráficos da Titanium ser disponibilizado para outras

plataformas, o Titanium necessita de bibliotecas externas que por sua vez necessitam de uma base HTML.



Figura 7 - Titanium Bar Chart Android Vertical



Figura 8 - Titanium Bar Chart Android Horizontal



Figura 9 - Titanium Pie Chart Android



Figura 10 - Titanium WP8 Bar Chart Vertical



Figura 11 - Titanium WP8 Bar Chart Horizontal



Figura 12 - Titanium WP8 Pie Chart Missing



Figura 13 - Titanium Android Area Chart



Figura 14 - Titanium WP8 Gauge 1



Figura 15 - Titanium WP8 Gauge 2



Referências 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/

Documents

Protótipo Multiplataforma