faculdade farias brito ciÊncia da...
TRANSCRIPT
FACULDADE FARIAS BRITO
CIÊNCIA DA COMPUTAÇÃO
ADRIANO SOUSA DE BRITO
FERRAMENTAS PARA DESENVOLVIMENTO MULTIPLATAFORMA
DE APLICATIVOS MÓVEIS COM JAVASCRIPT E HTML5: UMA
ANÁLISE COMPARATIVA
Fortaleza, 2013
ADRIANO SOUSA DE BRITO
FERRAMENTAS PARA DESENVOLVIMENTO
MULTIPLATAFORMA DE APLICATIVOS MÓVEIS COM
JAVASCRIPT E HTML5: UMA ANÁLISE COMPARATIVA
Monografia apresentada para obtenção dos
créditos da disciplina Trabalho de Conclusão do
Curso da Faculdade Farias Brito, como parte das
exigências para graduação no Curso de Ciência
da Computação.
Orientador: Dr. Vitor Almeida dos Santos.
Fortaleza, 2013
R375c Brito, Adriano Sousa de Ferramenta para Desenvolvimento Multiplataforma de Aplicativos
Móveis com Javascipt e HTML5 / Adriano Sousa de Brito 68 f.:color. Monografia (Graduação) – Faculdade Farias Brito, Fortaleza, 2013
Orientador (a): Prof. Dr. Vitor Almeida dos Santos
1. Aplicativos. 2. Desenvolvimento. 3. Plataforma. 4. Móvel I. Santos, Vitor Almeida dos (orient.) II. Faculdade Farias Brito
Graduação em Computação. III. Título
CDD 005.3
FERRAMENTAS PARA DESENVOLVIMENTO
MULTIPLATAFORMA DE APLICATIVOS MÓVEIS COM
JAVASCRIPT E HTML5: UMA ANÁLISE COMPARATIVA
Adriano Sousa de Brito
PARECER __________________
NOTA: FINAL (0 – 10): _______
Data: ____/____/_________
BANCA EXAMINADORA:
___________________________________
Prof. Dr. Vitor Almeida dos Santos
Orientador
___________________________________
Prof. Me. Maikol Magalhães Rodrigues
Examinador
__________________________________
Prof. Me. Sérgio Araújo Yunes
Examinador
RESUMO
Os dispositivos móveis formam uma parcela relevante dos dispositivos com
capacidades computacionais existentes atualmente. Há uma grande variedade de
sistemas operacionais para tais dispositivos e aplicativos precisam ser desenvolvidos
para muitos deles no intuito de atingir um maior número de usuários. Este trabalho
estuda e analisa ferramentas que permitem o desenvolvimento de aplicativos móveis
baseadas em tecnologias Web, as quais permitem que um único código possa ser
executado em diversas plataformas. São estudados os aspectos gerais das ferramentas
e realizadas análises comparativas de critérios específicos. Por serem ferramentas
recentes e em evolução, o trabalho tem como objetivo auxiliar o desenvolvedor a
conhecer e decidir sobre a escolha da ferramenta adequada para seus projetos.
AGRADECIMENTOS
Ao Orientador Prof. Vitor Almeida dos Santos, pelo acompanhamento, ajuda e
empenho em reconhecer o potencial deste trabalho.
À minha namorada, Clara Bispo, que me acompanhou durante todo o processo
de escrita desse trabalho. Suas revisões e sua companhia foram essenciais para a
concretização do mesmo.
A minha mãe Maria Brito, que tanto insistiu para que eu não me deixasse
desmotivar.
E por fim, ao site google.com que sempre teve respostas para todas as dúvidas
surgidas ao longo da confecção deste trabalho.
SUMÁRIO
1. INTRODUÇÃO ........................................................................................................................................ 11
1.1 METODOLOGIA ........................................................................................................................... 14
2. REVISÃO BIBLIOGRÁFICA ................................................................................................................ 16
2.1 HTML5 ........................................................................................................................................... 16
2.1.1 Tags Semânticas ............................................................................................. 19
2.1.2 Multimídia ...................................................................................................... 20
2.1.3 Canvas ............................................................................................................ 21
2.1.4 Web Sockets ................................................................................................... 21
2.1.5 Geolocalização................................................................................................ 21
2.1.6 Storage ............................................................................................................ 22
2.1.7 Cache Offline .................................................................................................. 22
2.1.8 Conclusões sobre HTML5 .............................................................................. 23
2.2 JAVASCRIPT ................................................................................................................................. 24
2.3 PLATAFORMAS MÓVEIS ........................................................................................................... 26
2.3.1 Apple iOS ....................................................................................................... 27
2.3.2 Android ........................................................................................................... 27
2.3.3 Windows Phone .............................................................................................. 28
2.3.4 BlackBerry OS ................................................................................................ 29
2.4 FERRAMENTAS PARA DESENVOLVIMENTO WEB MULTIPLATAFORMA DE
APLICATIVOS MÓVEIS .............................................................................................................. 29
2.4.1 Phonegap ........................................................................................................ 30
2.4.2 Rhodes ............................................................................................................ 31
2.4.3 Titanium Appcelerator .................................................................................... 33
3. ASPECTOS DE DESENVOLVIMENTO COM AS FERRAMENTAS ............................................. 35
3.1 REQUISITOS ................................................................................................................................. 35
3.2 MODELAGEM .............................................................................................................................. 36
3.2.1 Diagramas de Caso de Uso ............................................................................. 36
3.2.2 Diagramas de Classe ....................................................................................... 37
3.3 INTERFACE DE USUÁRIO .......................................................................................................... 37
3.4 IMPLEMENTAÇÃO ...................................................................................................................... 39
3.4.1 Phonegap ........................................................................................................ 39
3.4.2 Rhodes ............................................................................................................ 43
3.4.3 Titanium Appcelerator .................................................................................... 48
4. ANÁLISE DAS FERRAMENTAS ......................................................................................................... 53
4.1. Compilação e geração de um aplicativo nativo .............................................. 53
4.2. Experiência de Desenvolvimento ................................................................... 55
4.4. Processamento e consumo de memoria .......................................................... 59
5. CONCLUSÃO .......................................................................................................................................... 62
6.1. TRABALHOS FUTUROS ..................................................................................................................... 63
REFERÊNCIAS .................................................................................................................................................. 64
LISTA DE TABELAS E LISTAGENS
TABELA 1 - PLATAFORMAS DE DISPOSITIVOS MÓVEIS. ........................................................................................... 11 TABELA 2 - TAGS SEMÂNTICAS (PILGRIM, 2010, P. 41). ....................................................................................... 20 TABELA 3 - TAGS MULTIMÍDIA (PILGRIM, 2010, P. 81, 85). ................................................................................. 20 TABELA 4- TABELA DE CONTABILIZAÇÃO DO PROCESSO DE GERAÇÃO DE UM APLICA APLICATIVO PELAS
FERRAMENTAS ESTUDADAS NO TRABALHO. .................................................................................................. 55 TABELA 5 - METODOLOGIAS DE PERSISTÊNCIA DAS FERRAMENTAS ANALISADAS NO TRABALHO........................... 59 TABELA 6 - COMPARAÇÃO DE PROCESSAMENTO E MEMÓRIA DO APLICATIVO GERENCIADOR DE TAREFAS GERADO
PELAS FERRAMENTAS ................................................................................................................................... 60 TABELA 7- RESUMO DA ANÁLISE COMPARATIVA ............................................... ERRO! INDICADOR NÃO DEFINIDO. LISTAGEM 1 – CÓDIGO HTML ............................................................................................................................... 17 LISTAGEM 2 - EXEMPLO DE CÓDIGO JAVASCRIPT. ................................................................................................... 25 LISTAGEM 3 - CÓDIGO DA INTERFACE GRÁFICA HTML DO APLICATIVO GERENCIADOR DE TAREFAS ................... 40 LISTAGEM 4 - CÓDIGO EXEMPLO JAVASCRIPT DO LOCAL STORAGE ......................................................................... 40 LISTAGEM 5 - CÓDIGO JAVASCRIPT COM UTILIZAÇÃO DO LOCAL STORAGE ............................................................. 41 LISTAGEM 6 - CLASSE RUBY CRIADA REPRESENTANDO O MODELO DO APLICATIVO GERENCIADOR DE TAREFAS NO
RHODES. ....................................................................................................................................................... 44 LISTAGEM 7 - MÉTODO "INDEX" DO TASKCONTROLLER. ......................................................................................... 45 LISTAGEM 8 - MÉTODO “CHECAR” DO TASKCONTROLLER. ...................................................................................... 45 LISTAGEM 9 - MÉTODO “LIMPAR” DO TASKCONTROLLER. ...................................................................................... 45 LISTAGEM 10 - CÓDIGO ERB DA SEÇÃO “CADASTRO” DA VIEW “INDEX.ERB” ....................................................... 46 LISTAGEM 11 - FUNÇÃO "CRIAR" EM CÓDIGO JAVASCRIPT ...................................................................................... 46 LISTAGEM 12 - CÓDIGO ERB SEÇÃO “LISTA DE TAREFAS” DA VIEW “INDEX.ERB” ................................................ 46 LISTAGEM 13 - CÓDIGO JAVASCRIPT PARA A FUNÇÃO “CHECAR”............................................................................ 47 LISTAGEM 14 - CÓDIGO DA SEÇÃO “BOTÃO PARA ELIMINAÇÃO DE TAREFAS”. ..................................................... 47 LISTAGEM 15 - CÓDIGO JAVASCRIPT PARA A FUNÇÃO “LIMPAR()”. ......................................................................... 47 LISTAGEM 16 - CÓDIGO JAVASCRIPT COM TITANIUM APPCELERATOR PARA CRIAÇÃO DA JANELA ........................... 49 LISTAGEM 17 - CÓDIGO JAVASCRIPT COM TITANIUM APPCELERATOR PARA CRIAÇÃO DA SEÇÃO “CADASTRO”. .... 49 LISTAGEM 18 - CÓDIGO JAVASCRIPT COM TITANIUM APPCELERATOR PARA CRIAÇÃO DA SEÇÃO “LISTA DE
TAREFAS”. .................................................................................................................................................... 50 LISTAGEM 19 - CÓDIGO JAVASCRIPT COM TITANIUM APPCELERATOR PARA CRIAÇÃO DA SEÇÃO “BOTÃO PARA
ELIMINAÇÃO DE TAREFAS” .......................................................................................................................... 50 LISTAGEM 20 - CÓDIGO JAVASCRIPT PARA EVENTO DE CLIQUE NO BOTÃO DA SEÇÃO “CADASTRO” COM TITANIUM
APPCELERATOR. ............................................................................................................................................ 51 LISTAGEM 21 - CÓDIGO JAVASCRIPT PARA EVENTO DE CLIQUE DO BOTÃO “LIMPAR TAREFAS”. ............................ 51 LISTAGEM 22 - CÓDIGO JAVASCRIPT PARA EVENTO DE MUDANÇA DE ESTADO ADICIONADO AOS ELEMENTOS
CHECKBOX CONTIDOS NA LISTVIEW .............................................................................................................. 51
LISTA DE FIGURAS
FIGURA 1– ARQUITETURA DE UM APLICATIVO NATIVO DESENVOLVIDO COM FERRAMENTAS DE DESENVOLVIMENTO
WEB MULTIPLATAFORMA. ............................................................................................................................ 13 FIGURA 2 - ARQUITURA DO PHONEGAP .................................................................................................................. 31 FIGURA 3 - ARQUITETURA DO RHODES ................................................................................................................... 33 FIGURA 4 - ARQUITETURA DO TITANIUM APPCELERATOR ........................................................................................ 34 FIGURA 5 - DIAGRAMA DE CASO DE USO DO APLICATIVO GERENCIADOR DE TAREFAS .......................................... 36 FIGURA 6 - DIAGRAMA DE CLASSE DO APLICATIVO GERENCIADOR DE TAREFAS ................................................... 37 FIGURA 7 - INTERFACE DE USUÁRIO DO APLICATIVO GERENCIADOR DE TAREFAS ................................................. 38 FIGURA 8 - ESTRUTURA DE PASTAS DO PROJETO ANDROID COM PHONEGAP .......................................................... 42 FIGURA 9 - APLICATIVO “GERENCIADOR DE TAREFAS” EXECUTANDO NO NAVEGADOR GOOGLE CHROME ............ 42 FIGURA 10 - APLICATIVO GERENCIADOR DE TAREFAS EXECUTANDO NO EMULADOR ANDROID, IMPLEMENTADO
COM A FERRAMENTA PHONEGAP ................................................................................................................... 43 FIGURA 11 - CRIANDO UM MODELO NO RHOSTUDIO .............................................................................................. 44 FIGURA 12 - APLICATIVO GERENCIADOR DE TAREFAS EXECUTANDO NO EMULADOR ANDROID, IMPLEMENTADO
COM A FERRAMENTA RHODES. ...................................................................................................................... 48 FIGURA 13 - APLICATIVO GERENCIADOR DE TAREFAS EXECUTANDO NO EMULADOR ANDROID, IMPLEMENTADO
COM A FERRAMENTA TITANIUM APPCELERATOR. ........................................................................................... 52
11
1. INTRODUÇÃO
A expansão do uso de telefones celulares e outros dispositivos móveis foi um fato
bastante notável nesta última década, possibilitando uma maior acessibilidade à comunicação
e à informação. Em 2010, existiam mais de cinco bilhões de celulares conectados no mundo
(GSM World, 2010) com serviços de conectividade em qualquer lugar e em qualquer
momento. Uma parcela destes dispositivos conectados é classificada como smartphones, que
além de possibilitar a comunicação entre usuários, possui funcionalidades extras que incluem
uma plataforma capaz de executar aplicativos (ALLEN, GRAUPERA e LUNDRIGAN;
2010). Atualmente, já existem cerca de 1 bilhão de smartphones no mundo (YANG; 2012). A
Tabela 1 relaciona os principais fabricantes de plataformas para smartphones e seus
respectivos sistemas operacionais.
Fabricante Plataforma
Apple iOS
Google Android
Microsoft Windows Phone
RIM (Research in Motion) BlackBerry
Nokia Symbian
Tabela 1 - Plataformas de dispositivos móveis.
Junto ao crescimento da utilização de smartphones, houve um crescimento
proporcional do número de plataformas e do uso dos aplicativos nestes dispositivos. Em
novembro de 2012 a Apple divulgou que possuía mais de um milhão de aplicativos na sua loja
App Store para os dispositivos da sua plataforma, o iOS (FIEGERMAN, 2012). Já o Google
Play, a loja de aplicativos móveis para dispositivos Android, registrou 600 mil aplicações com
20 bilhões de downloads em Junho de 2012 (FINGAS, 2012). Isso mostrou que o mercado
para aplicativos móveis estava muito atraente e promissor.
12
As vendas crescentes de dispositivos móveis são acompanhadas pelo número cada
vez maior de aplicativos móveis disponíveis. Aplicações comuns somente em computadores
pessoais estão cada vez mais presentes nos dispositivos móveis, tais como clientes de e-mail,
utilitários em geral e jogos. A Apple foi uma das principais responsáveis por esta
popularização de aplicações móveis com o iPhone, por ser a primeira a disponibilizar uma
interface intuitiva para instalação dos seus aplicativos alcançando uma base de usuários
notável. Novas plataformas começaram a surgir após a chegada do iPhone no mercado, e hoje
tem-se um número relevante de usuários em cada uma das plataformas existentes. Cada
fabricante passou a disponibilizar ferramentas para que qualquer desenvolvedor pudesse criar
aplicativos em suas plataformas. Os desenvolvedores implementam seus aplicativos para uma
plataforma específica e, quando precisam desenvolver o mesmo aplicativo para outra
plataforma, necessitam refazer todo o trabalho utilizando as ferramentas da outra plataforma
alvo.
Em paralelo à popularidade dos dispositivos móveis, as linguagens para
desenvolvimento Web, tais como HTML, JavaScript e CSS evoluem, contendo novas
funcionalidades em relação às sua versões anteriores, com foco no desenvolvimento de
aplicações web, e não somente na descrição e na estrutura das páginas. Com isso, cada uma
das plataformas existentes para dispositivos móveis começaram a incluir navegadores com
suporte às tecnologias mais modernas tais como HTML5, JavaScript e CSS3, a fim de obter
suas vantagens. Os desenvolvedores podiam criar aplicações Web capazes de serem
executadas nos navegadores existentes em vários dispositivos móveis de plataformas
diferentes. Entretanto, em cada plataforma existem certas funcionalidades nativas que o
navegador não possui permissão para uso e acesso como, por exemplo, câmera, acelerômetro,
contatos de usuário e arquivos multimídia do dispositivo. Portanto, não é possível desenvolver
um aplicativo que seja executado a partir de um navegador móvel e utilize alguma destas
funcionalidades nativas.
Diante da possibilidade de se empregar tecnologias Web modernas como solução
para desenvolvimento para muitas plataformas e das limitações dos navegadores nativos dos
sistemas operacionais móveis, surgem diversas ferramentas que tentam conciliar esses dois
desafios. Tais ferramentas admitem a construção de um único código capaz de ser executado
13
em diversas plataformas. Para tal, as aplicações geradas contam com navegadores embutidos,
como ilustra a Figura 1.
Figura 1– Arquitetura de um aplicativo nativo desenvolvido com ferramentas de desenvolvimento Web
multiplataforma.
Diante deste cenário, o propósito desse trabalho é apresentar e comparar três das
principais ferramentas de desenvolvimento capazes de gerar aplicativos para muitas
plataformas: Phonegap, Rhodes e Titanium Appcelerator. Uma vez que cada uma é capaz de
gerar aplicativos para três ou mais plataformas, um comparativo completo envolveria testes
com, pelo menos, uma dezena de aplicações distintas. O escopo do trabalho, entretanto, é
reduzido de tal forma a considerar somente as versões de aplicativos geradas para a
plataforma Android, a mais utilizada atualmente. O estudo comparativo desenvolvido inclui o
gerenciamento das estruturas de dados em cada um destas ferramentas, as medidas de tempo
de compilação dos aplicativos , uma abordagem da experiência de desenvolvimento e, por
fim, uma análise sucinta do desempenho dos aplicativos gerados. Este trabalho visa auxiliar o
desenvolvedor a decidir sobre o emprego de cada uma dessas ferramentas em seus projetos,
ajudando a conhecer cada uma delas a identificar qual a ferramenta mais adequada.
14
1.1 METODOLOGIA
Neste trabalho será realizada uma apresentação e análise comparativa entre
ferramentas de desenvolvimento de aplicações nativas com tecnologias WEB. As ferramentas
analisadas são Phonegap, Rhodes e Titanium Appcelerator, e foram selecionadas para análise
por possuírem uma documentação detalhada, gerarem aplicativos capazes de ser reconhecidos
em todas as lojas de aplicativos e por utilizarem plataformas de desenvolvimento baseada em
HTML e Javascript, muito familiar aos desenvolvedores de aplicações Web.
Para fins de apresentação, são discutidos os seguintes aspectos:
Modelagem de um aplicativo denominado Gerenciador de Tarefas
Implementação do aplicativo Gerenciador de Tarefas nas três ferramentas
abordadas pelo trabalho
Para fins de comparação, será desenvolvido um aplicativo Gerenciador de
Tarefas. O aplicativo foi desenvolvido em cada uma das ferramentas propostas para análise no
trabalho. O ambiente alvo para execução é a plataforma Android.
Os critérios de comparação entre as ferramentas analisadas estão descritos a
seguir.
Métricas de compilação e geração de um aplicativo nativo: Contabilização do
tempo e processamento que a ferramenta irá consumir para gerar um aplicativo
nativo em uma plataforma alvo. Cada ferramenta tem uma metodologia
diferente para geração do aplicativo que implicam em diferentes medidas de
tempo e processamento na geração do aplicativo.
Experiência de desenvolvimento: Abordagem de detalhes peculiares existente
durante o desenvolvimento de aplicativos utilizando as ferramentas analisadas
pelo trabalho. Tal critério tem caráter subjetivo e é baseado na experiência do
autor.
15
Métricas de processamento e consumo de memoria: Contabilização do tempo
para a inicialização do aplicativo na plataforma escolhida.
Metodologias de persistência: abordagem da operação executada para persistir
dados, ou um conjunto de dados, em cada uma das ferramentas estudadas pelo
trabalho.
16
2. REVISÃO BIBLIOGRÁFICA
Neste capitulo é apresentado o embasamento literário deste trabalho. Estão
listados temas de importância necessária para a compreensão do conteúdo e dos resultados do
trabalho. O capitulo foi dividido em quatro subseções que apresentam cada um dos temas
abordados. A primeira seção aborda o HTML5 e mostra alguns dos novos recursos,
características e diferenças dessa versão do HTML em relação a sua versão antecessora. Na
seção seguinte é apresentada sucintamente a linguagem Javascript através de uma abordagem.
Na terceira seção, há uma descrição de algumas das principais plataformas de dispositivos
móveis. Por fim, na última seção são descrita as ferramentas consideradas neste trabalho para
desenvolvimento Web multiplataforma de aplicativos móveis.
2.1 HTML5
A Web foi uma das aplicações de rede mais utilizadas na Internet desde a sua
concepção. Ela foi inicialmente projetada como ferramenta de comunicação acadêmica em
que os usuários colaboravam e compartilhavam ideias sobre projetos científicos (BERNERS-
LEE, 1994). Estes usuários disponibilizavam seus documentos em sistemas “servidores” que
podiam ser acessados a partir de outros sistemas através de programas clientes denominados
navegadores. Os navegadores utilizavam do conceito de hipertexto, um formato de texto onde
é possível ter conteúdos de várias espécies agregados ao conteúdo final, permitindo que o
usuário percorresse uma sequência de documentos a partir de links existentes nestes mesmos
documentos disponibilizados no servidor. Tais documentos eram descritos e estruturados
através de uma linguagem de marcação chamada HTML (HyperText Markup Language).
HTML é uma linguagem muito simples e bem estruturada através de elementos
denominados tags (POWELL, 2003). As tags descrevem os elementos que serão utilizados
para a apresentação dos documentos no browser bem como a estrutura do documento em si.
Elas são definidas entre os símbolos “<” e “>” com o nome da tag entre estes símbolos. Um
exemplo de código HTML é apresentado na Listagem 1.
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Um exemplo de HTML</title>
</head>
<body>
<h1>Isso é um cabeçalho</h1>
<hr>
<p>Isso é um paragrafo</p>
</body>
</html>
Listagem 1 – Código HTML
No exemplo acima, notou-se a presença de algumas tags como : <html>, <head>,
<title>, <body>, <h1>, <hr>, <p>. Cada uma destas tags possui alguma finalidade especifica
na exibição do documento pelo navegador. Tem-se por exemplos as tags <p>, que é utilizada
para delimitar parágrafos, e a tag <hr>, que insere uma linha horizontal no documento exibido
pelo navegador.
A linguagem HTML foi inicialmente uma linguagem de marcação estruturada e
definida como uma aplicação de outra linguagem, SGML (Standard Generalized Markup
Language) (POWELL, 2003), que era utilizada para definição de padrões para linguagens de
marcação. Essas definições de elementos, padrões e versões do HTML, eram definidos pelo
W3C (World Wide Web Consortiun), uma organização fundada por Tim Berners-Lee com o
intuito de padronizar todas as tecnologias envolvidas com a Web, como por exemplo, o
protocolo HTTP e a linguagem HTML. Em 1997, o W3C publicou o XML (eXtensible
Markup Language), um subtipo da SGML, e decidiu fazer logo após uma reimplementação do
HTML baseado em XML, surgindo, em 1999, o XHTML 1.0 (PILGRIM, 2010) . Com
XHTML (eXtensible HyperText Markup Language) havia uma rigidez muito maior na
descrição dos documentos e era permitido embutir e definir outras tags além das tags padrões
HTML já existentes, sendo isso possível devido a natureza extensível do XML.
Em junho de 2004, o W3C organizou um workshop onde foram convocados
alguns representantes do W3C, de vários navegadores, e também de várias grandes
corporações da internet. As partes mais interessadas, como a fundação Mozilla Coorporation
e a Opera Software, queriam apresentar uma visão do provável futuro da web com a
apresentação: “Uma evolução do HTML4 existente para incluir novas funcionalidades para os
desenvolvedores de aplicações web modernas” (PILGRIM, 2010). Ao fim do workshop, a
18
W3C se negou a programar as extensões sugeridas por Ian Hickson, representante da Opera
Software, para as tecnologias mantidas pela organização como HTML, DOM (Document
Object Model) e CSS (Cascade Style Sheet) através de uma votação resultante em 11 votos
contra oito votos a favor.
Visto este resultado, todos os envolvidos com a mudança das tecnologias
mantidas pelo W3C, continuaram os trabalhos em um grupo externo ao W3C chamado
WHATWG (Web Hypertext Application Technology Working Group). Uma preocupação do
WHATWG era manter uma retrocompatibilidade com o HTML4, ao contrário do XHTML
que requeria um novo tipo MIME e possuía um tratamento de erros muito mais rígido em
relação ao HTML (PILGRIM, 2010). Eles iriam trabalhar em especificações técnicas para a
implementação destas novas tecnologias em navegadores massivos, como Mozzila, Opera e
Safari. As novas especificações que foram inicialmente definidas pelo WHATWG foram:
Web Forms 2.0: Melhora nos forms do HTLM 4
Web Applications 1.0: Funcionalidades para desenvolvimento de
aplicações off-line com HTML.
Web Controls 1.0: Especificação com novos mecanismos para criação
de widgets.
Em Outubro de 2006 as especificações da WHATWG já havia alcançado um
estado de maturidade relevante, enquanto as especificações do XHTML 2.0 feitas pelo W3C
ainda estava em estado inicial de elaboração, e Tim Berners-Lee, fundador do W3C, anunciou
que iria trabalhar junto do WHATWG para uma melhora incremental do HTML e disso foi
gerada uma nova organização denominada W3C HTML Working Group. Uma das primeiras
decisões tomadas pelo novo grupo foi a renomeação da especificação Web Applications 1.0
para HTML5.
HTML5 é uma especificação que inclui novas marcações, tags e novas API's
Javascript, em relação ao antecessor HTML4. Todas essas novas funcionalidades foram
elaboradas para incrementar a facilidade do desenvolvimento e na interoperabilidade de
aplicações Web. Essas funcionalidades são descritas nas seções adiante.
19
2.1.1 Tags Semânticas
Nas versões passadas do HTML, é perceptível um uso excessivo da tag <div>
para definir áreas como cabeçalhos, rodapés, barras de navegação e outras áreas lógicas
comuns em muitos documentos da linguagem. No HTML5 foram introduzidas novas tags que
são capazes de descrever o conteúdo que estas contêm e são definidas como elementos
semânticos do documento (PILGRIM, 2010). A Tabela 2 contêm todas as marcações
adicionadas à versão:
Tag Descrição
<section> Uma representação genérica de uma seção
em um documento. Composta em geral por
um grupo de conteúdo e um cabeçalho.
<nav> Setor do documento que contém links para
outra página ou outras partes dentro da
página.
<article> Composição do documento, página,
aplicação ou site que pode ser distribuída de
forma independente.
<aside> Seção do documento que possui conteúdo
relacionado ao conteúdo externo a esta tag.
Geralmente são distribuídas lateralmente
junto do conteúdo.
<hrgroup> Representa o cabeçalho de uma seção. Esta
tag é utilizada para agrupar um conjunto de
tags h1-h6 quando o cabeçalho possui
múltiplos níveis.
<header> Contém o cabeçalho da seção. Geralmente
composto por tags h1-h6 ou hgroup.
20
<footer> Representa o rodapé da seção que este está
inserido. Ele não necessita aparecer no final
da seção.
<time> Representa o tempo atual com base num
relógio de 24 horas ou num calendário
Gregoriano.
<mark> Utilizado para indicar referências no
conteúdo.
Tabela 2 - Tags Semânticas (PILGRIM, 2010, p. 41).
2.1.2 Multimídia
O conteúdo multimídia tornou-se uma das formas principais de disseminação de
informação na Web, seja por streams de áudio ou vídeo. Em geral, todo conteúdo multimídia
distribuído na Web era executado a partir de um plug-in integrado nos navegadores. Adobe
Flash, Microsoft Silverlight e Apple Quicktime são exemplos desses plug-ins.
No HTML5 foram incluídas tags padrões para embutir áudio e vídeo como
funcionalidades nativas, numa forma em que você pode distribuir conteúdo sem depender de
plug-ins externos (HOGAN, 2010). A Tabela 3 demonstra a descrição das tags multimídia:
Tag Descrição
<audio> Tag utilizada para distribuir áudio num
documento HTML. Os formatos mais
comuns são: AAC, MP3 e OGG (Vorbis).
<video> Tag utilizada para distribuir vídeo num
documento HTML. Os formatos mais
comuns são: H.264, Theora e VP8.
Tabela 3 - Tags Multimídia (PILGRIM, 2010, p. 81, 85).
21
2.1.3 Canvas
Para desenhar imagens e animações através de programação na Web se utilizava
do plug-in Adobe Flash em conjunto com a linguagem Action Script que vinha embutida ao
plugin. Na nova versão do HTML, foi adicionada a tag <canvas> que permitiam que os
desenvolvedores criassem imagens e animações através da linguagem Javascript (HOGAN,
2010). Com isso não haveria a necessidade da existência de plug-ins externos para este tipo de
conteúdo, devido à natureza nativa em cada navegador da linguagem Javascript.
2.1.4 Web Sockets
A Web funciona sobre o protocolo HTTP, em que um navegador envia
requisições e recebe respostas. HTTP é um protocolo que não mantem o estado da sessão de
uma conexão (stateless) de modo em que ao receber a resposta tem-se o encerramento da
conexão. Em aplicações que enviam dados ao cliente periodicamente a partir de alguma
mudança de estado no servidor, ocorre um procedimento chamado push, em que uma
requisição HTTP é enviada e a conexão permanece aberta permanentemente até o envio da
resposta. Após receber a resposta, deve-se iniciar uma nova conexão para continuar recebendo
as alterações do estado do servidor.
Tal modelo é utilizado em várias aplicações do mundo real como o chat do e-mail
do Google, o Gmail (UBL e KITAMURA, 2010), mas em aplicações sensíveis à latência
como jogos multiplayer, por exemplo, podem existir problemas devido à natureza stateless do
protocolo HTTP. Visto isso, a especificação HTML5 definiu uma API Javascript chamada
WebSocket. Esta API possibilita a existência de uma conexão persistente entre um navegador
e um servidor em que ambos podem enviar dados a qualquer momento (UBL e KITAMURA,
2010). Ele é baseado nos protocolo ws e wss(secure ws) e existem servidores WebSockets
implementados em várias linguagens como Java, Ruby, C++ e Javascript.
2.1.5 Geolocalização
Geolocalização é um mecanismo que possibilita a obtenção da latitude e longitude
de um determinado lugar do planeta através do sistema de posicionamento global(GPS), e
22
opcionalmente, compartilhar tal informação com as pessoas em que você confia (PILGRIM,
2010). O HTML5 inclui uma API Javascript para geolocalização na sua especificação. Com a
devida permissão do usuário, o navegador pode ter acesso à sua latitude e longitude através de
um dos vários mecanismos disponíveis (KESSIN, 2011), podendo ser através dos dispositivos
GPS embutidos em algum smartphone ou a posição do roteador Wi-Fi no qual o usuário está
conectado.
2.1.6 Storage
Storage é um mecanismo semelhante aos cookies existentes nas aplicações Web
atuais, mas que permite que um documento, página ou aplicação armazenem um valor num
objeto Javascript. Sua diferença principal é que o storage não submete tais valores para o
servidor. Outra diferença se encontra na limitação do tamanho a ser armazenado. Geralmente
os cookies tem uma limitação de tamanho de quatro Kilobytes (KESSIN, 2011), enquanto o
tamanho do storage não tem um limite de tamanho definido na especificação HTML5. A
maioria dos navegadores têm limitado o tamanho a uma média de 5 Megabytes por domínio
(KESSIN, 2011). O storage armazena valores de forma indexada na forma chave/valor.
Existem dois tipos de storage listados a seguir:
Local Storage: os valores persistem entre a reinicialização do navegador (KESSIN,
2011).
Session Storage: os valores são perdidos durante o encerramento do processo do
navegador (KESSIN, 2011).
Existem outras maneiras de se utilizar o storage como WebSQL e IndexedDB que
inclusive já estão disponível em vários navegadores populares do mercado.
2.1.7 Cache Offline
Hoje, grande parte das aplicações Web possui uma infraestrutura, em grande
parte, orientada ao cliente, em que grande parte de uma aplicação em si é processada e
executada em um navegador WEB. Arquivos HTML, Javascript e CSS são baixados e
23
processados no cliente, necessitando sempre de uma conexão com a Internet para obtenção
destes arquivos. Foi então introduzido na especificação HTML5, o Cache Offline, que permite
que os arquivos necessários para a aplicação web no lado cliente sejam armazenados
localmente, permitindo a navegação pela aplicação em situações em que não há uma conexão
com a Internet (PLIGRIM, 2010).
O funcionamento do cache Offline depende de um arquivo denominado manifest,
que contém a lista de todos os recursos a serem transferidos do servidor para o hospedeiro
local. Tal arquivo manifest deve ser referenciado nas páginas da aplicação WEB. Sempre que
o navegador envia uma requisição para a aplicação através da Internet, o servidor compara a
versão local do arquivo manifest com a versão do mesmo arquivo no servidor Web,
verificando se existem novos arquivos ou se os arquivos já existentes foram submetidos a
alguma alteração para manter a aplicação atualizada (KESSIN, 2011).
Esta funcionalidade possibilita a criação de aplicações WEB standalone, está
disponível em todas as ultimas versões dos navegadores WEB Desktop e também nos
navegadores contidos nas plataformas dos dispositivos móveis modernos, como smartphones
e tablets.
2.1.8 Conclusões sobre HTML5
É visto que muitas das funcionalidades propostas pela especificação HTML5
elevaram as aplicações WEB a um nível mais alto de aplicabilidade da plataforma,
implicando num aumento do escopo de problemas que aplicações WEB poderiam solucionar.
Além disso, o ganho de facilidade para o desenvolvimento de aplicações WEB é outra
característica que demonstra um ganho significativo na implementação destas aplicações
utilizando HTML5.
Um fator importante para a atenção do HTML5 foi à adoção parcial da plataforma
em muitos navegadores de dispositivos móveis. Um destaque para o navegador Safari
existente nos dispositivos da Apple que utilizam o sistema operacional iOS e utilizam das tags
multimídia introduzidas no HTML5 para a exibição de conteúdo de vídeo e áudio, sem a
necessidade executar plugins externos como o Adobe Flash para a exibição de tal espécie de
24
conteúdo. Tal adoção não foi aplicada somente no sistema operacional iOS, mas em outras
plataformas detentoras de uma parcela relevante do mercado para dispositivos móveis como,
por exemplo, Android, BlackBerry e Windows Phone (ALLEN, GRAUPERA e
LUNDRIGAN; 2010).
Apesar da especificação HTML5 atual ter definido várias funcionalidades
adicionais, quando comparada com a versão anterior, ainda não existe uma especificação
final, implicando na possibilidade de mudanças das funcionalidades existentes e a adição de
novas funcionalidades na especificação. Ocorreu, como exemplo, na API Websocket, que foi
submetida a algumas alterações que implicaram na queda de várias conexões cliente-servidor
que utilizavam esta API. (HOGAN, 2010).
Algumas das ferramentas analisadas neste trabalho desfrutam de alguns recursos
da especificação HTML5 através de API‟s Javascript, como, por exemplo, o framework
Phonegap que possui uma API que transforma uma aplicação HTML5 para uma plataforma
alvo possível pela sua infraestrutura de compilação de aplicativos. Isso revela que a
especificação HTML5 está indo além dos navegadores de internet com uma abrangência cada
vez mais crescente.
Apesar de existir uma parcela relevante de requisições HTTP de navegadores com
um suporte baixo, ou nulo, para a especificação HTML5, há um grande esforço do W3C para
a retrocompatibilidade. Todas as versões atuais dos navegadores mais populares, oferecem um
suporte extenso para as API‟s e funcionalidades recentes propostas pela especificação
HTML5. Disso, pode-se concluir que mesmo sem a padronização da especificação HTML5, é
possível desenvolver aplicações utilizando-se de novas funcionalidades, pois há um forte
incentivo de entidades de grande influência no mercado da internet como a Apple, Adobe e
Google, por exemplo.
2.2 JAVASCRIPT
Javascript é uma linguagem de programação funcional interpretada capaz de
reproduzir os princípios da programação orientada a objetos (FLANAGAN; 2001). A
linguagem de programação Javascript surgiu em 1995, criada por Brendan Eich na Netscape,
25
empresa que criou o navegador homônimo. A linguagem de programação foi inicialmente
denominada Livescript, que por motivos de marketing, acabou sendo renomeada como
Javascript (SUEHRING; 2010). A escolha do nome Javascript veio como influência da
plataforma Java da Sun Microsystems, que estava obtendo um reconhecimento notável no
mercado em geral.
O navegador Netscape possuía a capacidade de manipular os elementos HTML
contidos numa página do navegador através de códigos Javascript. Era possível a criação de
páginas que interagiam com os usuários e modificavam dinamicamente o conteúdo
HTML(FLANAGAN; 2001). A versão inicial do Javascript foi disponibilizada na segunda
versão (2.0) do navegador Netscape (FLANAGAN; 2001) e posteriormente na terceira versão
(3.0) do Internet Explorer, em que a linguagem era chamada de JScript (SUEHRING; 2010).
O navegador executa código Javascript vindo internamente ou associado a uma
pagina HTML qualquer. Utiliza-se a tag <script> para delimitar o código ou importá-la junto
da página. É permitido inserir tal elemento em qualquer sessão de uma página HTML, mas
tem-se por padrão a região delimitada pela tag <head>. Segue adiante um exemplo de
utilização:
<html>
<head>
<script type="text/javascript">
var a = 12;
document.write(a);
...
</script>
</head>
...
</html>
Listagem 2 - Exemplo de código Javascript.
Javascript possui uma sintaxe semelhante a outras linguagens como C, C++ e
Java (FLANAGAN; 2001). A diferença principal, em relação a estas linguagens, é o fato
desta ser uma linguagem de programação que não possui uma definição forte nos tipos. As
estruturas sintáticas comuns em linguagens de programação imperativas são muito
semelhantes ás linguagens supracitadas, citando, por exemplo, as estruturas de repetição e
loop(for e while) , condicionais (if e switch), operadores(+, -, *, /, =, ==, !=, & e |) e outras
26
estruturas.
Javascript é também uma linguagem de programação funcional. As funções
podem ser tratadas como objetos da classe Function que faz parte do núcleo da linguagem.
Javascript também é uma linguagem de programação orientada a objetos que implementam
herança, polimorfismo, abstração e todos os conceitos orientados a objetos. (SUEHRING;
2010) A herança é realizada através do atributo prototype contido em todos os objetos da
linguagem Javascript. A linguagem também possui tipos dinâmicos na definição das
variáveis, na qual uma variável pode ter durante seu escopo de vida, vários tipos diferentes.
Desde 1997, a Microsoft e a Netscape aliaram-se a European Computer
Manufacturers Association (ECMA) para a definição de uma especificação chamada
ECMAScript (SUEHRING; 2010), inicialmente conhecido como ECMA-262. Desde então
todos os navegadores implementaram interpretadores baseados no padrão definido pela
especificação ECMAScript. A especificação está na quinta versão e outras linguagens de
programação o tomam por base como por exemplo, a linguagem Action Script utilizada no
Adobe Flash.
Atualmente Javascript não é usado somente na Web, tem-se várias
implementações de linguagens de programação que compilam pra Javascript como Coffe
Script, Objective-J e Quby. Tem-se também implementação do servidor de IO assíncrono
node.js para aplicações web de alta performance. A ferramenta Titanium Appcelerator, que é
um dos frameworks analisados do trabalho, é projetado completamente em Javascript, sendo
capaz de você desenvolver uma aplicação móvel completamente em Javascript (POULSEN,
WINNERY E LUKASAVAGE; 2012).
2.3 PLATAFORMAS MÓVEIS
Nesta Seção são apresentadas algumas das principais plataformas móveis
disponíveis atualmente, responsáveis, juntas, por uma fatia relevante do mercado atual (IDC,
2013).
27
2.3.1 Apple iOS
Em 2007, a Apple lançou o iPhone e seu sistema operacional para tal dispositivo.
O Sistema Operacional fornecido não permitia que os desenvolvedores criassem aplicativos
nativos, estes teriam que desenvolver aplicações Web com HTML, Javascript e CSS para
executar sobre o navegador Safari incluso no iPhone. Mas com poucos meses após o
lançamento do iPhone, a comunidade Open Source conseguiu através de engenharia reversa o
acesso completo ao dispositivo e ambicionavam construir uma suíte para desenvolvimento de
aplicativos nativos para o iPhone (ALLAN, 2012).
Visto os acontecimentos, em Março de 2008, a Apple decide disponibilizar um
SDK (Software Development Kit) para implementação de aplicativos nativos, e estabeleceu
junto disso um nome para seu sistema operacional móvel: iOS. Em Julho de 2008, a Apple
inaugurou a App Store, uma loja virtual onde os desenvolvedores iriam poder vender seus
aplicativos criados com o SDK disponibilizado.
O iOS é o sistema operacional dos dispositivos iPhone, iPad e iPod Touch e está
na versão 6.0. Possui suporte a serviços Multitarefa, notificações Push, geolocation e
execução de áudio e vídeo.
2.3.2 Android
Android é um sistema operacional fruto de um projeto chamado OHA (Open
Handset Alliance) fundado pelo Google, sendo uma associação de 65 empresas fabricantes de
hardware e software (ALLEN, GRAUPERA e LUNDRIGAN; 2010). Android se classifica
como um sistema operacional genérico para dispositivos móveis, como smartphones, tablets e
netbooks.
O primeiro smartphone Android foi o T-Mobile G1 lançado em Outubro de 2008,
seguido de mais doze outros smartphones lançados em 2009(ALLEN, GRAUPERA e
LUNDRIGAN; 2010). Hoje tem-se uma parcela relevante de dispositivos como smartphones
e tablets com o sistema operacional Android instalado. O sistema disponibiliza um SDK que
executa sobre a plataforma JAVA, mas recompila as suas classes para bytecodes Dalvik
28
(ALLEN, GRAUPERA e LUNDRIGAN; 2010). Dalvik é uma maquina virtual existente para
execução dos aplicativos. Essa maquina virtual consegue reduzir o consumo de bateria e
gerenciar a memória limitada existente nos dispositivos Android (ALLEN, GRAUPERA e
LUNDRIGAN; 2010).
O Android possui capacidade de execução multitarefa, exibe gráficos 3D, possui
suporte multimídia e um navegador web com o runtime Javascript V8, o mesmo utilizado no
navegador Google Chrome (ALLEN, GRAUPERA e LUNDRIGAN; 2010).
2.3.3 Windows Phone
Windows Phone é o sistema operacional da Microsoft projetado para smartphones.
Ele é baseado em outro sistema operacional da Microsoft, o Windows, utilizado em
computadores pessoais. O Windows Phone tem várias características semelhantes à outras
plataformas populares, como suporte multimídia, um navegador de internet e uma interface de
usuário muito intuitiva chamada Metro (LEE e CHUVYROV; 2010).
No inicio de 2011, houve uma parceria entre a Nokia e a Microsoft em que a
Nokia definiu que o Windows Phone seria a principal plataforma dos seus smartphones. Tal
parceria aumentou significantemente a participação do sistema operacional Windows Phone
no mercado. A plataforma criou uma loja de aplicativos chamada Marketplace, seguindo o
exemplo de outras plataformas como o iOS e Android.
Uma característica interessante do Windows Phone é o seu suporte para aplicações
da Microsoft, como o Microsoft Exchange, Microsoft Sharepoint e o Silverlight. O sistema
também vem com uma versão móvel do navegador Internet Explorer, otimizado para
smartphones e com suporte à HTML5. O sistema operacional necessita de alguns pré-
requisitos no hardware alvo, que irá executar como uma resolução de tamanho fixo de
800x480, tela com quatro pontos de multi-toque, aceleração de vídeo DirectX por hardware,
GPS, acelerômetro, memória RAM de 256MB e 8GB de flash storage para armazenamento
de dados e aplicativos(LEE e CHUVYROV; 2010).
29
2.3.4 BlackBerry OS
Blackberry OS é um sistema operacional para os dispositivos Blackberry da
empresa Research in Motion (ALLEN, GRAUPERA e LUNDRIGAN; 2010). O sistema
operacional existe desde o primeiro smartphone lançado pela Research In Motion em 2002,
com funcionalidades e aplicativos coorporativos. A plataforma conseguiu um grande mercado
desde então e dados mostram que a segunda maior parcela de smartphones nos Estados
Unidos é de dispositivos Blackberry (ALLEN, GRAUPERA e LUNDRIGAN; 2010).
A plataforma teve que se adaptar ao mercado ao longo da década passada, pois os
celulares Blackberry seguiam o padrão de interface com teclado QWERT e um trackball para
navegação no sistema operacional, e com o crescimento das vendas dos smartphones
touchscreen, os dispositivos e o sistema operacional Blackberry tiveram que mudar para
adaptar-se aos novos padrões de smartphones propostos pelo mercado.
O desenvolvimento de aplicativos Blackberry é executado com as APIs CLDC
1.1, MIDP 2.0 do J2ME, a plataforma Java para dispositivos móveis. Uma outra abordagem
para desenvolvimento de aplicativos Blackberry são os Widgets Blackberry, em que você
desenvolve aplicações Web Standalone utilizando HTML5, Javascript e CSS.
Atualmente o sistema operacional está na versão 7.0 e possui funcionalidades
comuns aos sistemas operacionais concorrentes, como capacidades multi-tarefa, multi-toque e
possui um navegador com Webkit e suporte a HTML5.
2.4 FERRAMENTAS PARA DESENVOLVIMENTO WEB MULTIPLATAFORMA
DE APLICATIVOS MÓVEIS
Nesta seção, são apresentadas as três ferramentas utilizadas como objetos de
estudo neste trabalho: Phonegap, Rhodes e Titanium Appcelerator. Estas ferramentas foram
escolhidas por apresentarem uma documentação detalhada, terem empresas renomadas no
portfolio de usuários e por utilizarem de plataformas de desenvolvimento baseada em HTML
e Javascript, comum a vários desenvolvedores de aplicativos.
30
2.4.1 Phonegap
Phonegap é um framework capaz de gerar aplicativos nativos para varias
plataformas diferentes através de tecnologias Web (MYER, 2012). Ele permite que um
desenvolvedor com conhecimentos de HTML, Javascript e CSS consiga criar um aplicativo
em plataformas móveis como: iOS, Android, Windows Phone, Blackberry, BADA e webOS.
Isso representa um ganho notável de produtividade por utilizar linguagens e interfaces de
programação familiares aos desenvolvedores de aplicações Web.
O Phonegap permite que as aplicações acessem funcionalidades comuns a vários
dispositivos móveis que não são acessíveis por aplicações Web convencionais como
acelerômetro, câmera, compasso, contatos, arquivos, geolocalização, notificações e storage
(ALLEN, GRAUPERA e LUNDRIGAN; 2010). Tais funcionalidades são acessíveis por
intermédio de API‟s Javascript contidas na ferramenta Phonegap. A ferramenta disponibiliza
tais funcionalidades como Web Services que são acessados e consumidos via
Javascript(MAHEMOFF; 2012).
O projeto da ferramenta Phonegap foi apresentado em agosto de 2008 na
iPhoneDevCamp, uma conferência de desenvolvedores de aplicativos iOS. Ele se mostrou
como uma alternativa aos desenvolvedores que não tinham conhecimento da linguagem
Objective-C, que é utilizada no ambiente de desenvolvimento na plataforma iOS. Em menos
de um ano após a apresentação do projeto, foi lançada uma versão do Phonegap para a
plataforma Android, e posteriormente, este se estendeu às outras plataformas (MYER, 2012).
A aplicação pelo Phonegap é, basicamente, uma aplicação web transformada
numa aplicação nativa. A transformação em aplicação nativa permite o uso de funcionalidades
restritas a uma aplicação web, de forma que o acesso a tais funcionalidades é feito com as
APIs disponibilizadas pelo Phonegap. A Figura 2 resume a arquitetura do aplicativo no
Phonegap.
31
Figura 2 - Arquitura do Phonegap
A camada de visualização é constituída pelo componente abstrato Web View, que
é uma instancia de um navegador web dentro do aplicativo (TRICE, 2012), e a API Javascript
do Phonegap. O navegador web pode ser interpretado como uma nova camada junto das
camadas já existentes na infraestrutura da plataforma alvo de um aplicativo qualquer. A API
Javascript do Phonegap possibilita o acesso a funcionalidades e dados restritos do dispositivo
acessíveis somente por um aplicativo nativo, em nível de aplicação.
Em Outubro de 2011, a Adobe adquiriu a Nitobi, empresa responsável pela
manutenção do projeto Phonegap (MYER; 2012), assumindo os direitos sobre a ferramenta.
Isso representou um ganho para a comunidade, pelo fato de uma empresa já consolidada no
mercado Web tomar a frente de projeto tão importante.
2.4.2 Rhodes
Rhodes é um framework contido na suíte de desenvolvimento de aplicativos
móveis Rhomobile (NALWAYA; 2011). Esta suíte contem outras ferramentas, em que cada
um destes possui uma funcionalidade específica. O Rhodes permite o desenvolvimento de
32
aplicativos para várias plataformas como: Android, iOS, Windows Mobile e Blackberry. Ele é
baseado no padrão Model View Controller (MVC) e utilizando de HTML, Javascript e a
linguagem de programação Ruby para desenvolvimento dos aplicativos (ALLEN,
GRAUPERA e LUNDRIGAN; 2010).
A ferramenta Rhodes possui muitas características contidas na ferramenta Ruby on
Rails, como a estrutura e implementação do padrão MVC e utilização de uma ferramenta
Object Relational Management (ORM) para persistência de dados chamada Rhom. O Rhom
tem muitas similaridades com o Active Record do Ruby on Rails. A ferramenta possui
recursos na sua API para acessar funcionalidades restritas nos dispositivos moveis como:
GPS, câmera, arquivos multimídia, aceleromêtro, detector de proximidade e outros controles
da interface de usuário.
O Rhodes, que é uma ferramenta baseada no padrão MVC, utiliza a linguagem de
programação Ruby e funciona com requisições da camada de visualização para a camada de
controle. As camadas de modelo e de controle são implementadas utilizando a linguagem
Ruby. Para interpretar o código Ruby, é incluído um interpretador Ruby no aplicativo na
geração do mesmo aplicativo pela ferramenta Rhodes. Junto do interpretador, existem
bibliotecas na linguagem Ruby como o Titanium(framework ORM), RhoApplication e os
outros frameworks que constituem a ferramenta.
Na camada de visualização tem-se uma instancia de um navegador, assim como
no Phonegap, que realiza requisições a um controller. O diagrama a seguir mostra, de forma
resumida, a arquitetura do framework Rhodes.
33
Figura 3 - Arquitetura do Rhodes
A suíte de ferramentas Rhomobile foi adquirida pela Motorola Solutions em
outubro de 2011, incluindo o framework Rhodes(RHOMOBILE; 2011).
2.4.3 Titanium Appcelerator
Titanium Appecelerator é uma ferramenta open-source que permite o
desenvolvimento de aplicativos para várias plataformas com a linguagem Javascript. Ele
permite a geração de aplicativos para plataformas como iOS, Android e Blackberry
(POULSEN, WINNERY E LUKASAVAGE; 2012). O código Javascript é compilado, em
parte, para o código nativo da plataforma alvo (ALLEN, GRAUPERA e LUNDRIGAN;
2010), resultando num aplicativo híbrido em que parte da sua constituição é feita de códigos e
componentes nativos da plataforma, e uma contraparte é código Javascript interpretado
(POULSEN, WINNERY E LUKASAVAGE; 2012).
Sua API Javascript possui métodos de acesso a várias funcionalidades comuns
34
em dispositivos móveis como geolocalização, acelerômetro, arquivos multimídia, câmera,
screenshot, gravação de vídeos e notificações push (POULSEN, WINNERY E
LUKASAVAGE; 2012).
O projeto foi iniciado em Dezembro de 2008 pela Appcelerator, Inc e
inicialmente a ferramenta só abordava as plataformas Android e iOS. Posteriormente, foi
disponibilizado um ambiente para desenvolvimento chamado Titanium Studio e a adição da
plataforma Blackberry no seu conjunto de plataformas alvo (ALLEN, GRAUPERA e
LUNDRIGAN; 2010).
O Titanium Appcelerator é uma ferramenta baseada na linguagem Javascript, que
disponibiliza uma API para desenvolver aplicativos pra várias plataformas com
implementações de interfaces para acesso a funcionalidades nativas do dispositivo móvel. O
aplicativo gerado com a ferramenta Titanium integra os componentes nativos com os
componentes da API Javascript no aplicativo final, sendo uma espécie de aplicativo híbrido.
O diagrama adiante resume a estrutura de um aplicativo gerado pelo Titanium.
Figura 4 - Arquitetura do Titanium Appcelerator
35
3. ASPECTOS DE DESENVOLVIMENTO COM AS FERRAMENTAS
Neste capítulo é apresentada a modelagem e implementação do aplicativo
proposto para fins de comparação entre as ferramentas. Os requisitos da aplicação são
descritos inicialmente. A modelagem é restrita a diagramas de caso de uso, de classe e de
sequencia com a linguagem UML (Unified Modeling Language). Por fim, são detalhados os
aspectos de implementação com cada ferramenta utilizada.
3.1 REQUISITOS
O aplicativo Gerenciador de Tarefas será utilizado para aplicar os procedimentos e
medidas de análise dos critérios de comparação nas três ferramentas abordados no trabalho:
Phonegap , Rhodes e Titanium Appcelerator. O aplicativo exibe uma lista pré-cadastradas de
tarefas com a finalidade de memorização. As tarefas podem ser marcadas, indicando que esta
já foi concluída. Tais tarefas concluídas podem ser opcionalmente removidas da lista com
uma funcionalidade específica.
Serão listados a seguir os requisitos funcionais que serão utilizados para a
modelagem do aplicativo:
Listar Tarefas: Lista as tarefas cadastradas previamente, exibindo o estado
atual de cada uma delas. Os estados possíveis são: “Concluída” e “Não
Concluída”.
Adicionar Tarefas: Permite que o usuário cadastre tarefas. Ao cadastrar uma
tarefa o estado inicial dela é: “Não-Concluída”.
Concluir Tarefas: Permite que o usuário mude o estado de uma tarefa de “Não-
Concluída” para “Concluída”.
Eliminar Tarefas: Permite que o usuário exclua da lista de tarefas cadastradas
todas as tarefas que estão no estado “Concluída”.
Persistir dados localmente no dispositivo móvel.
36
3.2 MODELAGEM
O aplicativo foi modelado através da linguagem UML e contém especificações em
diagramas de caso de uso, diagramas de classe e diagramas de sequência, que serão abordados
a seguir.
3.2.1 Diagramas de Caso de Uso
Foram levantados quatro casos de uso baseado nos requisitos do aplicativo e estes
podem ser ilustrados no diagrama abaixo:
Figura 5 - Diagrama de caso de uso do Aplicativo Gerenciador de Tarefas
Os casos de uso são basicamente os requisitos listados e descritos anteriormente.
37
3.2.2 Diagramas de Classe
O diagrama de classe do aplicativo exibe a entidade trabalhada na especificação
dos requisitos. O aplicativo possui somente uma única entidade: Tarefa. O diagrama de
classes é exibido a seguir.
Figura 6 - Diagrama de Classe do aplicativo Gerenciador de Tarefas
O diagrama possui dois atributos: descrição e checado. Descrição é a
representação do que deve ser feito ou memorizado pela tarefa. Checado é um atributo
booleano que representa o estado atual da tarefa, em que verdadeiro representa uma tarefa
concluída, e falsa uma tarefa não concluída.
3.3 INTERFACE DE USUÁRIO
O aplicativo é composto por uma única tela. A tela é divida em três sessões:
Cadastro, Lista de Tarefas e Botão para Eliminação de Tarefas Concluídas. Nesta tela é
possível realizar todos os casos de uso listados anteriormente. A seguir, tem-se uma imagem
com o esboço da tela.
38
„
Figura 7 - Interface de Usuário do aplicativo Gerenciador de Tarefas
Vai a seguir a descrição das três sessões da interface de usuário:
Cadastro: na sessão cadastro o usuário informa a descrição da tarefa no campo
de texto “O que você irá fazer?”, e ao apertar no botão “Adicionar Tarefa”,
uma nova tarefa é persistida com estado “Não Concluída”.
Lista de Tarefas: nesta sessão são listadas todas as tarefas cadastradas no
aplicativo. Cada tarefa pode ser concluída ao clicar no Checkbox existente ao
lado direito da descrição da tarefa. O Checkbox representa o estado da tarefa:
“Concluída” ou “Não-Concluída”. O Checkbox marcado representa que a tarefa
está concluída, e o Checkbox não marcado representa que a tarefa ainda não
39
está concluída.
Botão para Eliminação de Tarefas: Ao clicar neste botão todas as tarefas em
estado “Concluído” são eliminadas da lista persistida no aplicativo.
3.4 IMPLEMENTAÇÃO
Nesta seção é apresentada a implementação do aplicativo especificado
anteriormente nas três ferramentas analisadas pelo trabalho. O aplicativo será implementado
para executar na plataforma Android. Será abordado detalhadamente as principais
peculiaridades de cada uma das três ferramentas, sendo isso necessário para investigar os
critérios listados para análise.
3.4.1 Phonegap
A implementação do aplicativo Gerenciador de Tarefas com o framework
Phonegap, foi realizada com HTML, Javascript e CSS. Foi codificada uma página Web, que
realizava todas as funcionalidades do aplicativo. O código fonte desta página foi então
empacotado numa aplicação Android através da IDE (Integrated Development System)
Eclipse com os plug-ins ADT (Android Develolpment Tools) fornecidos pelo Google.
Uma vantagem no desenvolvimento do aplicativo com esta ferramenta é a
possibilidade de poder testar o mesmo num navegador web ao invés de testar em uma
ferramenta de emulação. As ferramentas de emulação de todas as plataformas tendem a
consumir uma quantia relevante de memória e processamento, que é muito menor quando se
utiliza um navegador para testar uma aplicação ou página Web.
A codificação do aplicativo se iniciou pela definição dos elementos da interface
gráfica numa página HTML. Para auxiliar esta etapa, foi utilizado um framework de
Javascript e CSS chamado jQuery Mobile, que facilita o desenvolvimento de páginas que
possuam um padrão visual comum em dispositivos móveis. A interface gráfica desenvolvida
contempla o modelo proposto para a aplicação. Para fins de exemplificação, a Listagem 3
exibe um trecho de código mais relevante na codificação da interface gráfica do aplicativo
40
Gerenciador de Tarefas.
<div data-role="content">
<input type="text" placeholder="O que você irá fazer?" id="task"/>
<button data-theme="e" data-icon="plus" data-iconpos="right”
id="saveButton">Adicionar
</button>
<ul data-role="listview" data-inset="true" id="tarefas">
<li>
<input type="checkbox" name="checkbox-1" id="checkbox-1"
class="custom" />
<label for="checkbox-1">I agree</label>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-icon="refresh" data-
iconpos="bottom" onclick="reload();">Eliminar
Tarefas Finalizadas
</a>
</li>
</ul>
</div>
</div>
Listagem 3 - Código da Interface gráfica HTML do aplicativo Gerenciador de Tarefas
Alguns dos atributos presentes na página não são familiares a quem codifica
HTML, tais como data-icon, data-theme, data-iconpos e data-role, os quais são necessários
para customização da página ao framework jQuery Mobile.
A codificação da lógica de alimentação dos dados na tela e da persistência é feita
utilizando Javascript. A persistência é feita com a funcionalidade Local Storage do HTML5,
que permite a persistência local de dados numa aplicação Web. O Local Storage se comporta
como um mapa chave-valor, armazenando o dado em um dos tipos primitivos da linguagem
Javascript como números inteiros, reais, caracteres e strings.
var storage = „tasks‟;
localStorage[storage] = “Dado armazenado”;
Listagem 4 - Código Exemplo Javascript do Local Storage
O Local Storage é acessado através de uma variável global denominada
“localStorage”. A variável está definida em todos os navegadores que possuem suporte à
funcionalidade. Ele consegue persistir os dados entre várias sessões do navegador.
41
Para facilitar o direcionamento dos dados do Local Storage para a página HTML,
é utilizado o framework jQuery. O código adiante demonstra como isso é feito.
var tarefas = JSON.parse(localStorage[“tarefas”]);
for(var i = 0; i < tarefas.length; i++){
var innerHtml = '<li>';
innerHtml += '<input type="checkbox" name="checkbox'+ i +'"
id="checkbox' + i + '" value="'+ i +'" onclick="marcar(this.value)"/>';
innerHtml += '<label for="checkbox' + i +'">' + tarefas[i].descricao
+ '</label>'
innerHtml += '</li>';
$('#tarefas').append(innerHtml);
if(tarefas[i].checado)
$('#checkbox' + i).attr('checked', true);
else
$('#checkbox' + i).attr('checked', false);
}
Listagem 5 - Código Javascript com utilização do Local Storage
O código percorre cada tarefa persistida no mapa “tarefas” e alimenta a interface
gráfica com a descrição de cada tarefa e a atribuição de valor ao checkbox, que representa o
estado da tarefa. O framework jQuery é acessado através do símbolo $ e neste exemplo de
código ele simplesmente utiliza duas funções da ferramenta: “attr” e “append”.
Tendo explanado as sessões mais importantes na codificação do aplicativo
Gerenciador de Tarefas, utilizando HTML5, e Javascript, será gerado arquivo apk (Android
Package) com o Phonegap para executar na plataforma Android. É necessário criar um
projeto Android, colar a biblioteca “cordova-2.0.0.jar” e todos os arquivos CSS, HTML e
Javascript dentro de pasta „www”, que fica dentro da pasta “assets” .
42
Figura 8 - Estrutura de Pastas do projeto Android com Phonegap
Com a aplicação já testada no navegador, pode-se então compilar o arquivo APK
e ter uma previa no emulador Android. Vão adiante imagens do aplicativo no navegador e no
emulador respectivamente.
Figura 9 - Aplicativo “Gerenciador de Tarefas” executando no navegador Google Chrome
43
Figura 10 - Aplicativo Gerenciador de Tarefas executando no emulador Android, implementado com a
ferramenta Phonegap
3.4.2 Rhodes
Usando o Rhodes, foi desenvolvido o aplicativo Gerenciador de Tarefas com o
padrão MVC(Model View Controller) junto de um framework ORM (Object Relational
Manager) do Rhodes chamado Rhom. A ferramenta utiliza a linguagem Ruby para a
codificação da lógica do aplicativo e usa HTML, Javascript, CSS e Ruby embutido na
implementação da interface de usuário e tem muitas semelhanças com outro framework web
chamado Ruby on Rails. O aplicativo foi codificado com a IDE RhoStudio, disponibilizada
pela Motorola, que possui recursos para auxiliar o desenvolvimento de aplicativos que
utilizam alguma das ferramentas da suíte Rhomobile, como por exemplo, o Rhodes. O
44
aplicativo foi gerado na plataforma Android.
Após a criação do projeto utilizando a ferramenta RhoStudio, a primeira etapa
feita nesta implementação foi a definição do modelo do padrão MVC. O modelo foi definido
de acordo com o diagrama de classe apresentado na seção 5.2.2. O modelo é criado utilizando
uma funcionalidade da IDE, como exibido a seguir.
Figura 11 - Criando um Modelo no Rhostudio
Ao criar o modelo, é criada uma pasta com o nome do modelo dentro da pasta
“app” no projeto e são gerados alguns códigos-fonte para o controller, view e o modelo em si.
O modelo é definido classe Ruby adiante:
class Task
include Rhom::PropertyBag
end
Listagem 6 - Classe Ruby criada representando o modelo do aplicativo Gerenciador de Tarefas no Rhodes.
A classe não define nenhum método ou propriedade, contendo somente o módulo
Rhom::PropertyBag. Assim como o framework Ruby on Rails, o Rhodes mapeia
automaticamente as propriedades do modelo em colunas de uma tabela, que é gerada na
criação deste modelo, num banco de dados SQLite. O módulo Rhom::PropertyBag, inserido
dentro da classe, adiciona vários métodos que auxilia nas consultas e em operações de
persistência.
Já a classe TaskController, gerada pelo Rhodes, tem uma quantidade de código
45
notável já implementada. Não será explorado cada método detalhadamente, somente os
métodos abordados pelo nosso aplicativo, listados adiante:
def index
@tasks = Task.find(:all)
[…]
End
Listagem 7 - Método "index" do TaskController.
O método “index” é chamado antes da exibição da view “index.erb” e permite a
atribuição de valor à algumas variáveis que poderão ser referenciadas na renderização desta
view. Como visto, a variável “@tasks” é declarada atribuindo uma referência para todas as
tarefas existentes no banco de dados local do framework. A variável “@tasks”, como será
visto, será utilizada para exibir as tarefas cadastradas na view.
def checar
@task = Task.find(@params['id'])
@task.update_attributes(@params['task']) if @task
redirect :action => :index
end
Listagem 8 - Método “checar” do TaskController.
O método “checar” é disparado quando o usuário muda o estado de uma tarefa.
Ao fazer a mudança de estado é realizada uma atualização do objeto que teve o estado
alterado, como ilustrado na segunda linha do método. Por fim, ele redireciona para a página
inicial, onde são listadas todas as tarefas cadastradas.
def limpar
@tasksDel = Task.find(:all)
@tasksDel.each do |task|
task.destroy if task.checado == 'true'
end
redirect :action => :index
end
Listagem 9 - Método “limpar” do TaskController.
O método “limpar” é executado quando o usuário aciona a funcionalidade que
elimina todas as tarefas cadastradas que se encontram no estado “Concluída”. Para fazer isso,
o método lista todas as tarefas e apaga somente as que satisfazem a condição “task.checado
== 'true'”, que representa as tarefas que estão com estado “Concluída”.
Tendo abordado os métodos do único controller do aplicativo Gerenciador de
46
Tarefas, será explanada a integração da view com este único controller. O aplicativo consiste
de uma view, que é representada pelo arquivo “index.erb”. Tem-se adiante a análise do
código de cada seção da interface de usuário definida na seção 5.3.
<div data-role="fieldcontain">
<input type="text" style="width: 85%" name="task[descricao]"
id="descricao"/>
<input type="button" value="Adicionar"
onclick="criar($('#descricao').val());"/>
</div>
Listagem 10 - Código ERB da Seção “Cadastro” da view “index.erb”
function criar(tarefa){
var params = {'task[descricao]' : tarefa, 'task[checado]' : false};
$.ajax({
type: 'POST',
url: '<%= url_for :action => :create %>',
data: params,
success: function () { window.location.reload(); }
});
}
Listagem 11 - Função "criar" em código Javascript
A seção “cadastro” é representada por uma div, como visto acima, com um campo
de texto e um botão. Ao clicar no botão, a tarefa é criada utilizando o texto como descrição,
sendo isso feito através do método “create” do controller “Task Controller”. A tarefa é criada
com estado “Não-Concluída” (“'task[checado]' : false”). É feita uma chamada
AJAX(Asyncron Javascript and XML) através do framework jQuery, como exposto
anteriormente na Listagem 11.
<ul data-role="listview" data-inset="true">
<% @tasks.each do |task| %>
<li> [...] </li>
<% end %>
</ul>
Listagem 12 - Código ERB Seção “Lista de Tarefas” da view “index.erb”
A seção “Lista de Tarefas” exibe todas as tarefas cadastradas, percorrendo os
valores da lista de tarefas contida na variável “@tasks”, que é alimentada no método index do
controller “TaskController”. A listagem 12 simplesmente percorre esta lista exibindo a
descrição e o estado de cada tarefa através de um checkbox, que quando marcado representa o
estado “Concluída” e não marcado representa o estado “Não-Concluída”.
function checar(id, objId){
47
var value = $('#' + id).val();
var checado = $('#' + id).attr('checked') ? true : false;
var params = {'id' : objId , 'task[checado]' : checado};
$.ajax({
type: 'POST',
url: '<%= url_for :action => :checar %>',
data: params,
success: function () { window.location.reload(); }
});
}
Listagem 13 - Código Javascript para a função “checar”.
Quando se clica em um checkbox de uma tarefa, você muda o estado desta. Neste
evento é disparada a função Javascript “checar” que chama o método “checar” do controller
“TaskController”. Assim como a Listagem 11, esta função realiza uma chamada AJAX ao
método “checar ”do controller com o framework jQuery.
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="refresh" data-iconpos="bottom"
onclick="limpar()">Eliminar Tarefas Finalizadas</a>
</li>
</ul>
</div>
</div>
Listagem 14 - Código da Seção “Botão para Eliminação de Tarefas”.
function limpar(){
$.ajax({
type: 'POST',
url: '<%= url_for :action => :limpar %>',
success: function () { window.location.reload(); }
});
}
Listagem 15 - Código Javascript para a função “limpar()”.
A ultima sessão da view “index.erb” é descrita por uma div HTML posicionada no
rodapé. Como visto na Listagem 14, a seção “Botão para Eliminação de Tarefas” contem um
botão que, ao ser clicado, elimina todas as tarefas que estão marcadas (estado “Concluída”) da
lista de tarefas através da função Javascript “limpar”. A função “limpar”, exposta na listagem
15 realiza uma chamada AJAX para o método “limpar” do controller “TaskController”
especificado na Listagem 9.
Para a geração do aplicativo para a plataforma Android, são necessárias algumas
configurações para a compilação. Tais configurações são a plataforma alvo, o tipo de
48
compilação e opções de debug, que não será abordada em detalhes. É exibida adiante uma
imagem do aplicativo em execução no emulador:
Figura 12 - Aplicativo Gerenciador de Tarefas executando no emulador Android, implementado com a
ferramenta Rhodes.
3.4.3 Titanium Appcelerator
A implementação do aplicativo Gerenciador de Tarefas com o ferramenta
Titanium Appcelerator foi feita com a IDE Titanium Studio, utilizando a linguagem
Javascript. O Titanium Appcelerator utiliza somente da linguagem Javascript para codificar
aplicativos para várias plataformas. Nosso aplicativo será gerado na plataforma Android,.
49
O projeto é criado utilizando Titanium Studio, que depois de sua criação gera
todos os arquivos necessários para a compilação de um aplicativo. Somente um arquivo será
abordado, o “app.js”, que é basicamente código-fonte Javascript da implementação do
aplicativo. Para a codificação do aplicativo com o ferramenta, é utilizada a API Titanium, que
é uma API Javascript com vários componentes de interface de usuário e interfaces abstratas
de acesso a funcionalidades. Será detalhado adiante todo o código-fonte essencial para a
implementação do aplicativo Gerenciador de Tarefas.
[…]
var win = Titanium.UI.createWindow({backgroundColor:'#fff',
title: 'Monografia'});
[…]
Listagem 16 - Código Javascript com Titanium Appcelerator para criação da Janela
O código da Listagem 16 cria a janela principal do aplicativo, pondo uma cor
branca como cor de fundo e o título da Janela como “Monografia”. Os elementos
posteriormente criados, como caixas de texto, listas e botões deverão ser adicionados a esta
janela. A referencia “Titanium.UI” antes da função “createTextField” representa o pacote da
API para definição de elementos gráficos no Titanium Appcelerator.
[…]
var input = Titanium.UI.createTextField({top: 10, left: 10,
width: 300});
var submitButton = Titanium.UI.createButton({
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
title: 'Adicionar',
width: 300,
left: 10,
top: 40 });
win.add(input);
win.add(submitButton);
[…]
Listagem 17 - Código Javascript com Titanium Appcelerator para criação da seção “Cadastro”.
Na Listagem 17, são definidos os objetos de interface de usuário correspondente a
seção “Cadastro” na interface de usuário definida em 5.4. A caixa de texto é criada definindo
a margem (atributos “top” e “left” do objeto JSON) e a largura. O objeto é referenciado pela
variável “input”. O botão é criado definindo as margens e o título “Adicionar”.
Posteriormente, ambos os objetos são adicionados à janela que representa a interface gráfica
do aplicativo Gerenciador de Tarefas.
[…]
50
var tableView = Titanium.UI.createTableView( { left: 10, top: 80 } );
win.add(tableView);
[…]
Listagem 18 - Código Javascript com Titanium Appcelerator para criação da seção “Lista de Tarefas”.
Tem-se a definição do objeto TableView na variável “tableView” na listagem 18.
Os elementos de interface de usuário contidos dentro da “tableView” correspondente às
tarefas persistidas e carregadas serão detalhados adiante. Neste objeto serão adicionadas
linhas que contém a descrição e o estado da tarefa através de um checkbox, como definido no
modelo de interface de usuário da seção 5.3.
[…]
var cleanButton = Titanium.UI.createButton({
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
title: 'Limpar Tarefas',
width: 300,
left: 10,
bottom: 20
});
win.add(cleanButton);
[…]
Listagem 19 - Código Javascript com Titanium Appcelerator para criação da seção “Botão para Eliminação de
Tarefas”
Para a seção “Botão para Eliminação de Tarefas”, foi criado um objeto botão
atribuído à variável “cleanButton”, como mostrado na Listagem 19. O botão foi criado com
parâmetros para que ficasse posicionado abaixo da “Lista de Tarefas”. O botão é adicionado à
janela, após sua criação.
Com os elementos da interface gráfica definidos, adicionar-se-á eventos a estes
elementos e aplicar-se-á a lógica de persistência com auxilio do Titanium Appcelerator. Os
eventos necessários para contemplar o modelo proposto na seção 5.3 serão especificados
adiante.
[…]
if(!tasks){
tasks = new Array();
Ti.App.Properties.setList('tasks', tasks);
}
[…]
submitButton.addEventListener('click', function(e){
var text = input.value;
var task = { descricao : text, checado : 'false' }
var tasks = Ti.App.Properties.getList('tasks');
tasks.push(task);
51
Ti.App.Properties.setList('tasks', tasks);
[…]
});
[…]
Listagem 20 - Código Javascript para evento de clique no botão da seção “Cadastro” com Titanium
Appcelerator.
O evento é adicionado ao botão “Adicionar” da seção “Cadastro” do aplicativo
Gerenciador de Tarefas. O evento cria um objeto, no formato JSON, que é adicionado a uma
lista denominada “tasks”. A lista pode ser acessada através da API do Titatanium
Appcelerator pela função “getList”, que está contida no pacote “Ti.App.Properties”, na
qual carrega um objeto persistido no aplicativo. Observe que antes da definição do evento foi
persistido um objeto Array com a chave “tasks”, tendo um Array que pode ser acessado pela
chave “tasks”. Após adicionar o objeto JSON na lista, a lista persistida é sobrescrita por outra
que difere somente pelo novo elemento adicionado.
cleanButton.addEventListener('click', function(e){
var tasks = Ti.App.Properties.getList('tasks');
var tasksAux = new Array();
for(var i=0; i < tasks.length; i++){
if(tasks[i].checado == 'false')
tasksAux.push(tasks[i]);
}
Ti.App.Properties.setList('tasks', tasksAux);
[…]
});
Listagem 21 - Código Javascript para evento de clique do botão “Limpar Tarefas”.
No botão da seção “Botão para Eliminação de Tarefas”, o evento adicionado
acessa a lista persistida através da função “getList” do framework, cria um novo objeto Array
e coloca nesta nova lista somente os objetos tarefa da lista persistida que estão com estado
“Não-Concluída” (tasks[i].checado == 'false'). Por fim a lista existente na chave “tasks” é
sobrescrita por essa nova lista sem tarefas com estado “Concluída”.
checkbox.addEventListener('click', function(e) {
var tasks = Ti.App.Properties.getList('tasks');
tasks[e.source.id].checado = new String(!e.source.value);
Ti.App.Properties.setList('tasks', tasks);
[…]
});
Listagem 22 - Código Javascript para evento de mudança de estado adicionado aos elementos checkbox contidos
na ListView
O evento do checkbox é disparado no momento em que há mudança de estado.
Este altera o estado do elemento da lista correspondente a ele. O elemento da lista é
referenciado pelo índice “e.source.id”, que representa a posição do elemento na lista
52
persistida. Após mudar o valor contido na variável checado do objeto acessado na lista, a lista
“tasks” será sobrescrita com a nova lista que possui todas as tarefas com seus estados
atualizados.
Após abordar toda a construção da interface de usuário e a lógica de persistência
existente na implementação do aplicativo, foi compilado e gerado um aplicativo na plataforma
Android, como especificado anteriormente. Vai adiante uma imagem do aplicativo em
execução.
Figura 13 - Aplicativo Gerenciador de Tarefas executando no emulador Android, implementado com a
ferramenta Titanium Appcelerator.
53
4. ANÁLISE DAS FERRAMENTAS
Neste capítulo serão analisados os critérios definidos para as três ferramentas
abordadas anteriormente no trabalho: Phonegap, Titanium Appcelerator e Rhodes. A análise
de cada um dos critérios utilizará o aplicativo Gerenciador de Tarefas, sobre a plataforma
Android.
4.1. Compilação e geração de um aplicativo nativo
A geração do aplicativo móvel é a etapa, no desenvolvimento de um aplicativo,
em que o código-fonte é transformado em um arquivo binário ou num arquivo de linguagem
intermediária. Quando são utilizadas ferramentas de desenvolvimento multiplataforma com
tecnologias web, adiciona-se mais uma etapa na camada de processos existente na geração do
aplicativo, que é a etapa da tradução da aplicação web para a linguagem de programação
utilizada pela plataforma alvo.
Cada ferramenta de desenvolvimento multiplataforma possui uma estratégia
diferente para geração de um aplicativo móvel. Isso pode resultar numa diferença de tempo e
recursos consumidos para cada uma destas ferramentas na geração do aplicativo. Nesta seção
serão analisados os processos e o tempo necessário para a geração do aplicativo móvel
Gerenciador de Tarefas, abordado anteriormente no trabalho, e nas três ferramentas estudadas:
Phonegap, Rhodes e Titanium Appcelerator.
4.1.1. Phonegap
A geração do aplicativo pelo Phonegap é feita pela ferramenta comum da
plataforma, dado que a aplicação web é colocada dentro da pasta de um projeto de uma
plataforma qualquer. No aplicativo Gerenciador de Tarefas o Ant (ferramenta de build) é
utilizado para gerar o aplicativo final pra ser testado no Android com o Phonegap. Na geração
do aplicativo, tem-se um empacotamento dos arquivos HTML, Javascript e CSS utilizados
pelo aplicativo e as bibliotecas Java necessárias para o funcionamento da ferramenta.
54
4.1.2. Rhodes
O Rhodes gera aplicativos para uma plataforma específica através da ferramenta
de build Rake, comum em aplicações baseadas em Ruby. O Rake, no Rhodes, já possui
rotinas de builds predefinidas para todas as plataformas suportadas pela ferramenta. Na rotina
geração do aplicativo, há três etapas: compilação do interpretador Ruby para a plataforma
alvo, geração dos arquivos de códigos para a plataforma alvo e o empacotamento dos arquivos
e das infraestruturas necessárias num só aplicativo. Ao fim dessas etapas é feita a compilação
para o aplicativo final.
4.1.3. Titanium Appcelerator
O Titanium Appcelerator utiliza o CLI (Command Line Interface) para gerar seus
aplicativos nativos. O CLI é um conjunto de comados para várias finalidades como
compilação, build e criação de projetos. Ele faz parte da suíte Titanium para desenvolvimento
multiplaforma de aplicativos de dispositivos móveis.
4.1.4. Resultados e Conclusões
Para contabilizar o tempo da geração do aplicativo de cada ferramenta, foram
medidos os tempos do processo de build de cada uma delas. Foi capturada uma amostra na
geração de cada uma das ferramentas. Para capturar os resultados, foi medido o tempo de cada
um dos comandos executados para gerar o aplicativo. O computador utilizado para executar
os comandos de geração e compilação possui a seguinte configuração:
Intel Core i3, 2.10 GHz nos dois núcleos.
4 GB de Memória.
Sistema Operacional Windows 7, 64 Bits.
Os resultados obtidos são expostos na Tabela 4.
55
Ferramenta Tempo
Phonegap 31,67 Segundos
Rhodes 48,67 Segundos
Titanium Appcelerator 36 Segundos
Tabela 4- Tabela de contabilização de tempo do processo de geração de um aplicativo pelas ferramentas
estudadas no trabalho.
Os resultados da tabela 4 sugerem algumas conclusões listadas a seguir:
O tempo de geração do Rhodes é maior pelo fato de serem executadas
mais etapas na geração do que nas outras ferramentas. Como especificado
na seção 2.5, existem três etapas diferentes que exigem uma quantidade de
tempo relevante para ser compiladas e empacotadas.
O tempo gasto para gerar um aplicativo no Phonegap e do Titanium
Appcelerator possui uma proximidade relevante. Os dois frameworks
possuem processos mais simples do que o Rhodes na geração dos
aplicativos. O Titanium Appcelerator traduz alguns dos códigos Javascript
para códigos na plataforma alvo e após isso, tem-se a compilação e
empacotamento final do aplicativo. O Phonegap instancia um componente
interno de um navegador de Internet e carrega a sua API.
4.2. Experiência de Desenvolvimento
Nesta seção, há uma descrição sucinta da experiência do processo de
desenvolvimento em cada ferramenta. A descrição explica detalhes perceptíveis durante o
desenvolvimento do aplicativo Gerenciador de Tarefas. É um seção de caráter subjetivo, que
demonstra a visão individual do desenvolvedor em relação às ferramentas estudadas. Vai
adiante uma abordagem demonstrando a experiência de desenvolvimento em cada uma das
ferramentas.
56
4.2.1. Phonegap
O desenvolvimento de aplicativos com Phonegap é extremamente simples para
quem possui experiência prévia no desenvolvimento de aplicações Web. Você codifica uma
página utilizando HTML, CSS e Javascript, testa no navegador e então o código é
empacotado para uma plataforma alvo.
No exemplo do aplicativo Gerenciador de Tarefas, utilizamos a plataforma
Android como plataforma alvo. Foi necessário criar um projeto Android, codificar uma
atividade principal no projeto, colocar o código da aplicação Web correspondente ao
aplicativo Gerenciador de Tarefas em uma pasta especifica no projeto e depois executar as
rotinas de build. Antes da realização deste processo, houve testes em um navegador Desktop.
Em comparação com as outras ferramentas, o Phonegap é a ferramenta mais fácil
e simples, pois as linguagens de programação são familiares a maioria dos desenvolvedores.
Há uma facilidade muito grande no teste das aplicações em que, muitas vezes, pode-se utilizar
um navegador para fazer tais testes. As únicas exceções, para quais não se aplica o uso de
navegador nos testes, se dão quando são utilizados recursos específicos de dispositivos
moveis, como a câmera e o acelerômetro por exemplo.
Foi utilizada a IDE Eclipse com os plug-ins ADT(Android Development Tools)
para criar o projeto, a atividade principal e gerar o build do aplicativo final.
4.2.2. Rhodes
O Rhodes é uma ferramenta MVC para desenvolver aplicativos móveis, baseados
em aplicações Web. Para o desenvolvimento são utilizadas as linguagens HTML, CSS,
Javascript e Ruby. As aplicações podem ser desenvolvidas no Rho Studio, uma IDE baseada
na IDE Eclipse que é extremamente útil para desenvolver aplicações mobile com Rhodes.
No desenvolvimento do aplicativo Gerenciador de Tarefas houve dificuldade para
a codificação das camadas de controle e de modelo, pelo fato destas camadas serem
codificadas em Ruby, que é uma linguagem que teve um recente crescimento na popularidade,
e por utilizar de padrões de projetos não tão familiares como o Active Record utilizado pelo
57
framework objeto-relacional Rhom na camada de Modelo. Uma vantagem observada na
ferramenta é facilidade de desenvolver um aplicativo de forma modular, com regras bem
definidas dando uma facilidade maior para codificar o aplicativo com o padrão arquitetural
MVC.
Para gerar o aplicativo Gerenciador de Tarefas para a plataforma, foi somente
necessário configurar a IDE apontando as referências para as pastas onde estão localizados os
arquivos do SDK da plataforma Android e executar as rotinas para gerar os arquivos APK.
4.2.3. Titanium Appcelerator
O Titanium Appcelerator é uma ferramenta para desenvolvimento de aplicativos
nativos utilizando a linguagem Javascript. O Titanium Appcelerator disponibiliza
uma API completa contendo todas as funcionalidades necessárias para o
desenvolvimento de aplicativos em várias plataformas. É utilizado a IDE Titanium
Studio para criar e desenvolver projetos na ferramenta Titanium Appcelerator. A
IDE Titanium Studio é baseada na IDE Eclipse.
No desenvolvimento do aplicativo Gerenciador de Tarefas, foi editado o arquivo
“app.js” onde foi definido todos os componentes gráficos do aplicativo e os
eventos de alguns componentes gráficos da tela. A definição dos componentes e
eventos foi feita utilizando funções Javascript da API Titanium. Saber as funções e
módulos da API Titanium é uma dificuldade existente, que para ser contornada
torna-se necessário realizar um estudo na documentação da mesma API. A
ferramenta se torna muito fácil, com a prática e o estudo da documentação.
Para gerar o aplicativo basta disparar a rotina existente na IDE Titanium Studio.
4.3. Metodologia de Persistencia
Nesta seção, são discutidos os métodos de persistência utilizados em cada uma das
implementações do aplicativo Gerenciador de Tarefas em cada uma das ferramentas
abordadas pelo trabalho.
58
4.3.1. Phonegap
A nossa implementação abordada na seção 3.4.1, utiliza o Local Storage para
persistir as tarefas cadastradas pelo aplicativo. O Local Storage é uma funcionalidade do
HTML5 que persistem dados entre várias sessões de navegação, como mostrado na seção
2.1.6. O Local Storage é acessado, numa aplicação Web, através da linguagem Javascript
com a variável global “localStorage”. A variável representa um Array onde podem ser
armazenados dados que ficaram persistidos. O aplicativo Gerenciador de Tarefas persiste os
objetos no framework com o índice “tasks”.
4.3.2. Rhodes
O Rhodes utiliza o framework Rhom para realizar a persistência dos dados, que
tem semelhanças com o Active Record. O modelo, codificado em Ruby, inclui na definição de
classe o módulo “Rhom::PropertyBag” que inclui vários métodos que permitem a consulta e
persistência de dados do modelo. O Rhodes possui uma instancia do SQLite internamente,
onde os dados são persistidos pelo Rhom através do método “create”, gerado pelo gerador de
modelos do Rhodes. Assim como o Phonegap, o Rhodes pode usar o “localStorage” para
armazenar os dados, pois o Rhodes possui também uma instancia do navegador. No aplicativo
“Gereciador de Tarefas”, o Rhom é utilizado para realizar a persistência das tarefas
cadastradas.
4.3.3. Titanium Appcelerator
A persistência no Titanium Appcelerator é feita através do módulo
“Ti.App.Properties” na linguagem Javascript, que disponibiliza funções para persistir vários
tipos de dados como: Número, Caracteres, Strings, Objetos JSON e Listas. No aplicativo
Gerenciador de Tarefas, o método “setList” é utilizado para persistir a lista com as tarefas
cadastradas no aplicativo. Para acessar a lista é utilizado o método “getList”.
59
4.3.4. Resumo da análise
Visto os detalhes das metodologias de persistência, são resumidas na Tabela 5 as
metodologias de persistência de dados das ferramentas analisadas no trabalho.
Ferramenta Metodologia de Persistência
Phonegap Utiliza a funcionalidade Local Storage do HTML5
Rhodes Utiliza o framework Titanium, do Rhodes para persistir os dados
Titanium Appcelerator Utiliza os métodos de persistência do Módulo Ti.App.Properties
Tabela 5 - Metodologias de persistência das ferramentas analisadas no trabalho.
4.4. Processamento e consumo de memoria
A implementação do aplicativo Gerenciador de Tarefas nas três ferramentas
analisadas pelo trabalho apresenta diferenças de desempenho, pois cada uma destas
ferramentas possui uma distinção na metodologia e arquitetura na sua composição como
ferramenta. Serão discutidos nesta seção aspectos de processamento e de consumo de
memória pelo aplicativo Gerenciador de Tarefas gerado nas três ferramentas.
É valido afirmar que a codificação do aplicativo tem influencia direta nos índices
de desempenho de um aplicativo, mas, devido à simplicidade existente no modelo do
aplicativo Gerenciador de Tarefas, será abstraída tal influência. A principal variante relevante
na interpretação dos resultados será a arquitetura de cada uma das ferramentas, especificada
com detalhes na seção 2.4.
Os resultados foram obtidos em um emulador da plataforma Android,
disponibilizado pelo kit de desenvolvimento do Android. O emulador Android é um programa
que virtualiza um contexto de execução Android, e permite a execução de aplicativos em um
computador através de um dispositivo virtual . O emulador utilizado no trabalho tem 256 MB
de Memória e utiliza um processador virtual ARM. Diferente de um dispositivo móvel, um
emulador virtual está sujeito a todas as limitações aplicadas pelo sistema operacional que
hospeda o processo virtual deste emulador, como alteração no espaço de memória virtual ou
no índice de processamento dedicado ao emulador.
Foi utilizado o aplicativo Android Assistent para capturar as medidas. O Android
60
Assistent é um aplicativo que possui várias funções para auxiliar no controle dos recursos de
hardware de um dispositivo móvel, incluindo monitor de memória e processamento, monitor
de cache, monitor de processo e outras funcionalidades uteis. O aplicativo foi desenvolvido
pela Aaron e está disponível para download na loja de aplicativos do Google, o Google Play.
Utilizamos o Android Assistent para calcular o consumo de memória e o índice em
porcentagem de processamento utilizado pelos aplicativos gerados.
A metodologia para captura dos tempos foi:
Inicialização do Aplicativo Gerenciador de Tarefas
Inicialização do aplicativo Android Assistent
Captura dos Resultados
O computador que executou o processo de emulação da plataforma Android,
apresenta a configuração especificada a seguir.
Intel Core i3, 2.10 GHz nos dois núcleos.
4 GB de Memória.
Sistema Operacional Windows 7, 64 Bits.
A metodologia foi utilizada nos aplicativos gerados em cada uma das ferramentas
analisadas no trabalho. O emulador foi projetado para ter 256 Megabytes de memória, e gerou
os resultados da tabela adiante.
Ferramenta Processamento Memória
Phonegap 29.5% 5.22 MB
Rhodes 49% 6.78 MB
Titanium Appcelerator 18% 8.41 MB
Tabela 6 - Comparação de processamento e memória do aplicativo Gerenciador de Tarefas gerado pelas
ferramentas
As quantidades da coluna Processamento é dada em porcentagem de
processamento utilizada pelo aplicativo no processador virtual do emulador, e a memória
corresponde a quantidade de MB consumida pelo aplicativo. A partir dos resultados é possível
61
ressaltar alguns pontos importantes:
O aplicativo gerado pelo Phonegap é o que utiliza menos memória em
comparação aos aplicativos analisados. Diferente dos outros aplicativos que
precisam de uma camada extra para interpretação de linguagens , o Phonegap,
no caso do aplicativo Gerenciador de Tarefas, necessita somente de uma
instancia do browser nativo inicializado.
O aplicativo gerado pelo Titanium Appcelerator é o que consome mais
memória. Como visto anteriormente na explanação da arquitetura do Titanium
Appcelerator, o aplicativo gerado por essa ferramenta tem uma camada onde
fica a API “Titanium”. Pode-se interpretar o maior consumo de memória do
aplicativo Gerenciador de Tarefas gerado pelo Titanium Appcelerator,
considerando a memória exigida pelos mecanismos internos da API
“Titanium”.
O aplicativo gerado pela ferramenta Rhodes é o que apresenta maior
processamento. O Rhodes, como especificado anteriormente, mantem um
espécie de servidor embarcado, que representa a camada de controle e o
modelo da arquitetura MVC, e atende requisições vindas da camada de
visualização. O processamento do aplicativo Gerenciador de Tarefas gerado
pelo Rhodes pode ser interpretado pela instancia desta estrutura “Cliente-
Servidor”.
O aplicativo gerado pela ferramenta Titanium Appcelerator é o que consome
menos processamento. Isso pode ser interpretado pelo fato da ferramenta
Titanium Appcelerator apresentar uma abordagem hibrida entre componentes
da API e componentes nativos, e a não existência da instancia de um
navegador no seu contexto de execução.
62
5. CONCLUSÃO
O crescente aumento da aquisição de smartphones e outros dispositivos móveis
tem aumentado a demanda por aplicativos móveis nas múltiplas plataformas existentes
atualmente. A necessidade de se desenvolver abrangendo o maior número de dispositivos é
um objetivo comum a uma parcela relevante de desenvolvedores de aplicativos móveis.
Entretanto, desenvolver aplicativos para várias plataformas é um processo desafiador, pois
cada plataforma oferece um conjunto diferente de ferramentas para desenvolvimento.
Portanto, ferramentas capazes de utilizar um único código fonte para gerar versões para
diversas plataformas configuram uma soluções ideal para esse desafio.
Ao passo em que são ferramentas recentes, a maioria dos desenvolvedores
desconhecem muitos das suas características. Assim, este trabalho estudou três das principais
ferramentas de desenvolvimento multiplataforma de dispositivos móveis baseadas em
tecnologias web e Javascript, apresentou uma implementação do aplicativo Gerenciador de
Tarefas utilizando estas ferramentas e realizou uma análise comparativa entre elas.
O desenvolvimento do aplicativo Gerenciador de Tarefas proporcionou uma visão
geral da metodologia de implementação em cada ferramenta de modo a tornar possível a
comparação de alguns aspectos específicos. Com base no estudo comparativo, o
desenvolvedor pode entender as diferenças existentes na estrutura interna de cada uma dessas
ferramentas e as peculiaridades das mesmas.
Dessa abordagem abstrata, podem ser desenvolvidos mais estudos e abordagens
especificas em estudos posteriores.
.
63
6.1. Trabalhos Futuros
Este trabalho apresenta uma visão superficial das capacidades existentes em cada
uma das ferramentas estudadas no mesmo. São listadas a seguir algumas sugestões que podem
ser objetos de estudos em outros trabalhos.
Implementação de aplicativo em outras plataformas: Neste trabalho, o estudo e as
análises restringiram-se somente à plataforma Android.
Avaliação de desempenho elaborada: analisar o desempenho dos aplicativos de forma
mais especifica coletando informações durante várias fases e fluxos do ciclo de vida
do aplicativo.
Uso dos recursos de hardware e recursos restritos: analisar o uso de funcionalidades
restritas e dos recursos de hardware nas ferramentas estudadas.
64
REFERÊNCIAS
ALLAN, Alasdair. Learning iOS Programming 2. Ed. O‟Reilly Media, 2012.
ALLEN, Sarah; GRAUPERA, Vidal; LUNDRIGAN, Lee. Pro Smartphone Cross-Platform
Development: iPhone, Blackberry, Windows Mobile and Android Development and
Distribution. 1. ed. Apress, 2010.
TRICE, Andrew. Phonegap Explained Visually. 02 de Maio de 2012. Disponivel em <
http://Phonegap.com/2012/05/02/Phonegap-explained-visually/>. Acesso em: 05/05/2013.
BERNERS-LEE, Tim; CAILLIAU, Robert; LUOTONEN, Ari; NIELSEN, Henrik Frystik;
SECRET, Arthur. The World-Wide Web. Communications of the ACM. Pag. 76-82.
ACM, 1994.
FIEGERMAN, Seth. Apple Has Approved 1 Million Apps for the App Store. 19 de
Novembro de 2012. Disponível em < http://mashable.com/2012/11/19/apple-app-store-1-
million-submissions/>. Acesso em : 23/11/2012
FINGAS, Jon. Google Play hits 600,000 apps, 20 billion total installs. 27 de Junho de 2012.
Disponível em < http://mashable.com/2012/11/19/apple-app-store-1-million-submissions/>.
Acesso em : 23/11/2012
FLANAGAN ,David. Javascript: The Definitive Guide. 4. Ed. O‟Reilly, 2001.
GSM World. GSMA Announces that Global Mobile Connections Surpass 5 Billion, 09 de
Julho de 2010. Disponível em < http://gsmworld.com/newsroom/press-
releases/2010/5265.htm >. Acesso em 15/10/2012
HAMMERSCHMIDT, Christoph. Smartphone market boom risky for PC vendors,
market researchers warn. 28 de Outubro de 2009. Disponível em
<http://www.eetimes.com/electronics-news/4085466/Smartphone-market-boom-risky-for-PC-
vendors-market-researchers-warn>. Acesso em : 19/09/2012
HOGAN, Brian P. HTLM5 & CSS3. Develop with tomorrow Standards Today. 1 ed.
Pragmatic Programmers, LLC, 2010.
FRAMINGHAM, Mass. Android and iOS for 91.1% if Worldwide Smartphone OS
Market in 4Q12 and 87.6% for the Year, According to IDC, 14 de Fevereiro de 2013.
Disponivel em < http://www.idc.com/getdoc.jsp?containerId=prUS23946013>. Acesso em
01/06/2013.
IONESCU, Daniel. Android Marker hits 20,000 apps milestone : Tech World, 17 de
Dezembro de 2009. Disponível em :
65
<http://www.techworld.com.au/article/330111/android_market_hits_20_000_apps_milestone
>. Acesso em : 19/09/2012
KESSIN, Zachary. Programming HTML5 Applications. 1. Ed. O‟Reilly Media, 2011.
LEE, Henry; CHUVYROV, Eugene. Beginning Windows Phone 7 Development 2. Ed.
Apress, 2010.
MAHEMOFF, Michael. HTML5 vs Native: The Mobile App Debate , 3 de Junho de 2011.
Disponível em: < http://www.html5rocks.com/en/mobile/nativedebate/>. Acesso em
29/09/2012.
MYER, Thomas. Beggining Phonegap, 1. Ed. Wiley, 2012.
NALWAYA, Abshek. Rhomobile Begginer’s Guide, 1. Ed. Packt Publishing, 2011.
OELHMAN, Damon; BLANCA, Sébastien. Pro Android Web Apps: Develop for Android
Using HTML5, CSS3 & JavaScript. 1. ed. Apress, 2011.
PILGRIM, Mark. HTML5: Up and Running. 1. ed. O‟Reilly Media, 2010.
POULSEN, Tim; WHINNERY, Kevin; LUKASAVAGE, Tony. Building Mobile Apps with
Titanium. 1. Ed. Appcelerator Inc. 2012.
POWELL, Thomas. HTML & XHTML: The Complete Reference. 4. ed. McGraw-Hill,
2003
RHOMOBILE. HTML5 vs Native: The Mobile App Debate , 19 de Outubro de 2011.
Disponível em: < http://www.rhomobile.com/blog/motorola-acquires-rhomobile-and-
rhoelements-version-1-launched/>. Acesso em 30/09/2012.
STARK, Jonatan. Building Android Apps with HTML, CSS, and JavaScript. 1. ed.
O‟Reilly Media, 2010.
SUEHRING, Steve. Javascript Step by Step. 2. Ed. O‟Reilly, 2010.
YANG, Jun. Smartphones in Use Surpass 1 Billion, Will Double by 2015, 17 de Outubro
de 2012. Disponível em: < http://www.bloomberg.com/news/2012-10-17/smartphones-in-use-
surpass-1-billion-will-double-by-2015.html />. Acesso em 27/05/2013
UBL, Malte; KITAMURA, Eiji. Introducing Websockets: Bringing Websockets to the
Web, 28 de Outubro de 2009. Disponível em:
<http://www.html5rocks.com/en/tutorials/websockets/basics/>. Acesso em 01/05/2012