ISSN 2316-2872

T.I.S. So Carlos, v. 3, n. 2, p. 171-179, mai-ago 2014

Tecnologias, Infraestrutura e Software

Desenvolvimento de Aplicaes Mveis com

Servios RESTful e HTML5
Lucas Rodrigues, Antonio Francisco do Prado
Resumo: Este artigo apresenta as tecnologias RESTFul e HTML5 no apoio ao desenvolvimento de aplicaes mveis. A combinao dessas

tecnologias proporciona componentes interoperveis e reusveis, que evitam retrabalhos, possibilitam adaptar contedos com interfaces com
layouts responsivos, e tornam mais gil o desenvolvimento de software na computao mvel. Uma aplicao do domnio de redes sociais foi
desenvolvida para ilustrar a abordagem proposta, com o suporte da linguagem HTML5, incluindo CSS3 e JavaScript, e o reuso de webservice
RESTful.

Palavras-Chave: RESTful, aplicaes mveis, componente interopervel, componente reusvel

Mobile Application Development using RESTful and HTML5
Abstract: This article presents RESTFul and HTML5 technologies to support the development of mobile applications. The combination of
these technologies provides interoperable and reusable components which avoid reworking, make it possible to adapt contents with layoutresponsive interfaces, and make the software development in mobile computing more agile. A social network application domain was
developed to illustrate the proposed approach, with HTML5 language support, including CSS3 and JavaScript, and RESTful web service
reuse.

Keywords: RESTful, mobile applications, interoperable component, reusable component

I. INTRODUO
Com a crescente evoluo das tecnologias da informao e
a progressiva miniaturizao dos componentes, surgiu um
novo paradigma de processamento e armazenamento de
informaes conhecido como Computao Mvel.
Atualmente, a diversidade de plataformas e tecnologias
utilizadas pelos dispositivos mveis tem demandado um
enorme esforo para que as suas aplicaes sejam
interoperveis. Aliado a isso, a mobilidade atinge a vrios
setores da sociedade, fazendo com que as solues que antes
eram voltadas a equipamentos como os PCs, sejam portadas
para os mais variados dispositivos mveis.
Esta exigncia impe um novo desafio, que o de permitir
que os sistemas interajam entre si e possam ser utilizados em
vrios tipos de equipamentos, com sistemas operacionais
muito diferentes, tais como o Android, IOS e Windows
Phone.
Diante desses desafios, dentre outros, temos dois
problemas: como permitir que sistemas conversem entre si?
E, como desenvolver ou portar o mesmo software para vrios
sistemas operacionais mveis contornando o problema de
terem linguagens de programao nativas diferentes?

Nesse contexto, a proposta deste artigo apresentar as

tecnologias RESTful e HTML5 como alternativas para
solucionar os problemas citados. A apresentao ilustrada
com o desenvolvimento de uma aplicao mvel que permite
a integrao com a rede social Twitter. Dessa forma,
possvel atravs do acesso aos servios por meio de uma API
REST da prpria rede social.
A seguir so apresentados os principais conceitos e
tecnologias que deram embasamento para a pesquisa relatada
neste trabalho. Na seo III so tratados os aspectos de
desenvolvimento de aplicaes mveis com RESTful e
HTML5 em um estudo de caso. Na seo IV so apresentados
os trabalhos relacionados e finalmente, na seo V, so
apresentados as concluses deste trabalho.
II. APOIO COMPUTACIONAL
Nesta seo so apresentados os principais conceitos, idias
e tecnologias que apoiam o desenvolvimento de aplicaes
mveis com servios RESTful e HTML5.
A) Arquitetura Orientada a Servios

Departamento de Computao - Universidade Federal de So Carlos (UFSCar)

Caixa Postal 676 13.565-905 So Carlos SP Brasil
Autor para correspondncia: : lucrod1@yahoo.com.br, prado@ufscar.br

Lucas Rodrigues, Antonio Francisco do Prado

At h pouco tempo, os setores de TI das empresas

estavam focados em se tornarem provedores de tecnologias,
maximizando o uso e a disponibilizao de recursos
computacionais. Esse direcionamento foi tomado muitas
vezes sem a devida preocupao e sem avaliar se esta
abordagem era a mais adequada empresa.
No entanto, uma nova forma de planejar, gerir e evoluir
surgiu com a orientao a servios. A orientao a servios
tem como base a concepo de que a TI uma provedora de
servios, e que pressupe que esteja atenta s demandas e
necessidades dos clientes (MAGALHES; PINHEIRO,
2007; MARZULLO, 2007). Assim, parte-se do princpio de
que a TI deve disponibilizar servios, e que estes so
essenciais para o cumprimento dos objetivos estratgicos da
organizao (MARZULLO, 2007).
Em um aspecto mais tcnico, a Arquitetura Orientada a
Servios (SOA) constitui-se de uma abrangente plataforma de
sistemas distribudos. Essa plataforma possui um vasto leque
de paradigmas, princpios, conceitos e tecnologias voltadas
sua implementao (ERL, 2009).
Marzullo (2007) explica que SOA representa uma
metodologia de desenvolvimento de sistemas corporativos
que, quando corretamente usada, capaz de diminuir a
distncia entre o negcio e a TI, tanto em nveis conceituais
como prticos.
A unidade mais bsica do SOA o servio, e, neste
contexto, disponibilizado atravs de aplicaes
independentes, porm comunicveis, de modo que atenda s
necessidades de automao dos processos de negcios a que
foram desenhados (ERL, 2009).
Por se tratar de aplicaes independentes, h a necessidade
de interao entre elas, possibilitando que os servios sejam
compostos para produzir servios cada vez mais poderosos.
Apesar de existirem vrias tecnologias para a construo
de servios, a mais comum atualmente atravs dos
webservices. Estes so servios que podem ser acessados e
executados em um servidor remoto atravs de uma rede,
como a internet, por exemplo (MARZULLO, 2007).
Uma vantagem de se utilizar webservice est na
possibilidade de interao entre sistemas distribudos sem que
haja a preocupao com a linguagem de programao usada.
Outro ponto favorvel a facilidade com que pode ser
implementada em um ambiente de redes, pois no exige
configuraes especiais em firewalls, devido utilizao, na
maioria das vezes, do protocolo HTTP na realizao de
transporte de dados entre o cliente e servidor.
Alm disso, permite o reuso de componentes de software,
uma vez que este pode ser disponibilizado como um servio
distinto, e utilizado em vrios outros sistemas distribudos
(FERREIRA; MATIUSSO JNIOR, 2010).
Diferentes tecnologias tm sido propostas para a
implementao de webservices, sendo que o protocolo SOAP
e a arquitetura RESTful so os mais utilizados.
O SOAP um protocolo baseado em XML e que permite a
transmisso de mensagens atravs do protocolo HTTP,
possibilitando a troca de informaes entre aplicaes e o
acesso webservices (W3SCHOOL, 2013c). um protocolo
T.I.S. 2014; 3 (2): 171-179

muito utilizado, embora complexo e com baixo desempenho

no tempo das resposta das solicitaes (W3C, 2013).
Neste trabalho, adotou-se a arquitetura RESTful, pois, no
contexto de desenvolvimento mvel, o que apresenta
melhores resultados em relao a performance e
complexidade de desenvolvimento.
B) Servios RESTful

RESTful foi um termo criado por Richardson e Ruby

(2007) para designar webservices que esto alinhados aos
princpios da arquitetura REST e que utilizam o protocolo
HTTP como meio de transporte das requisies.
O REST um estilo arquitetural para o desenvolvimento de
sistemas hipermdia distribudos, proposto, em sua dissertao
de Ph.D., por Roy Thomas Fielding, um dos especificadores
do protocolo HTTP 1.1 (FIELDING, 2000). Na realidade, no
se trata de uma especificao e nem um padro, mas de um
paradigma para a construo de sistemas distribudos
(NUNES; DAVID, 2005).
Fielding (2000) descreve alguns conceitos e princpios que
norteiam o REST, idealizando que os sistemas distribudos
hipermdia deveriam seguir a mesma arquitetura da web, de
modo a aproveitar melhor os seus recursos e tornando-se parte
dela.
Entre os conceitos, um dos principais o de recurso, que
uma abstrao de qualquer coisa que possa receber um nome,
desde um documento, uma foto, um servio de tempo, um
conjunto de outros recursos, bem como coisas reais, como
carros, pessoas, entre outros (RICHARDSON; RUBY, 2007).
Entretanto, Fielding (2000) especifica um pouco mais,
estabelecendo que, para algo ser considerado como um
recurso deve ser possvel a sua referncia atravs de um
hyperlink.
Para que se possa identificar e localizar um recurso, bem
como referenci-lo por meio de um hyperlink, deve-se
associ-lo a pelo menos um URI (Uniform Resource
Identifier), sendo esta uma condio obrigatria para que seja
considerado um recurso. Os URIs devem ser descritivos e
possuir um padro de notao, seguindo uma estrutura e
hierarquia previamente definidas.
Alm disso, as interaes entre cliente e servidor devem ser
stateless, ou seja, devem acontecer de modo que os resultados
das requisies no sejam armazenados no servidor. Neste
caso, torna-se necessrio que todos os elementos essenciais
sua execuo sejam fornecidos na prpria requisio
(FIELDING, 2000).
Mesmo o servidor sendo stateless, nada impede que haja o
armazenamento no cliente, realizado por meio de cache. Para
tanto, ao realizar a requisio, deve estar explicitado se
necessrio criar ou no o cache (FIELDING, 2000). No lado
cliente, isto pode ser implementado atravs de cookies,
campos hidden de formulrios, dentre outros (XAVIER,
2011).
Outro ponto importante a necessidade de haver uma
interface uniforme entre os componentes, possibilitando uma
simplificao da arquitetura e uma maior visibilidade das
interaes possveis. Isto tambm prov um baixo
172

Desenvolvimento de Aplicaes Mveis com Servios RESTful e HTML5

acoplamento entre os servios e encoraja uma evoluo do

sistema de modo mais independente (FIELDING, 2000).
Embora no seja a nica forma, a mais comum a
padronizao da interface atravs dos mtodos bsicos do
protocolo HTTP.
O HTTP permite a transferncia de mensagens entre
clientes e servidores, atravs da World Wide Web (WWW),
especificando o que pode ser enviado e as respostas a serem
recebidas. A vantagem de sua utilizao consiste no fato de
que o protocolo mais utilizado na web para a transferncia
de dados, o que faz com que seja muito comum encontrar
empresas com servidores e clientes capazes de trabalhar com
ele.
Apesar de ter sido construdo para a requisio de pginas
na web, permite tambm que vrias operaes sejam
realizadas atravs de seus mtodos disponveis, estendendo a
sua utilizao pelos webservices (TANENBAUM, 2003).
Tais mtodos podem realizar operaes de incluso,
consulta, atualizao e excluso de dados ou recursos,
semelhana de operaes bsicas de comandos SQL. Uma
lista dos principais mtodos e suas funes encontra-se na
Tabela 1.
Tabela 1. Principais mtodos internos de solicitaes
HTTP (FERREIRA; MATIUSSO JNIOR, 2010)

Vale dizer que estes mtodos no manipulam diretamente

os recursos, mas sim uma representao de seus estados. Isto
, quando um cliente requisita um site qualquer, o que
retornado no o site em si, mas um arquivo (HTML, XML
ou JSON, por exemplo) que representa o estado atual daquele
recurso. Esta interao afeta tambm o estado do cliente, que
ter um novo contedo. Ressalta-se, ainda, que a
representao de um recurso pode ser dinmica ou esttica,
ou seja, pode mudar ou no conforme o tempo (RAY;
KULCHENKO, 2003).
A seguir esto listados alguns exemplos bem simples de
uso dos mtodos HTTP. Conforme mostra o Quadro 1, esto
sendo requisitadas informaes de um recurso do tipo
cadeira, cujo ID de identificao 1056. Para tanto, uma
solicitao GET enviada ao URI HTTP://
empresa.patrimonial.com.br/moveis/cadeira/1056, formado
pelo contedo das linhas 1 e 2 constantes do Quadro 1. O
mtodo GET obtm uma representao do recurso e,
independentemente da quantidade de vezes que se executa
este mtodo, a resposta ser sempre a mesma.
Pode-se observar ainda que a resposta inicia-se com o
cdigo 200 OK, na linha 3 do Quadro 1. Este um cdigo
HTTP de resposta para indicar sucesso na requisio
permitindo identificar se foi ou no bem atendida. Em
seguida, entre as linhas 5 e 10, tm-se os dados obtidos
estruturados em formato XML, linguagem especificada na

linha 5 do cdigo.
Quadro 1: Mtodo GET Solicitao dos detalhes do
recurso 1056

No Quadro 2, h um exemplo de uso do mtodo DELETE,

que tem uma sintaxe semelhante ao GET, pois aps o nome
do mtodo foram informados os dados que comporo o URI
do recurso que se deseja apaga (linhas 1 e 2). Da mesma
forma como no exemplo anterior, o cdigo de resposta HTTP
foi exibido, como consta na linha 3.
Quadro 2: Mtodo DELETE

O terceiro mtodo, o PUT, pode ser utilizado tanto para

criar quanto para alterar um recurso, necessitando que se tenha
no corpo da sua requisio todos os dados necessrios para a
operao. Estes dados, no Quadro 3, esto estruturados sob as
tags <DetalheMoveis> </DetalheMoveis>, entre as linhas 5 e
10.
Na linha 3, atravs do parmetro content-Type,
especificada a estrutura do contedo da requisio e o
conjunto de caracteres que o compe: XML e UTF-8,
respectivamente.
J na resposta, a partir da linha 11, h a informao
indicando que o recurso foi criado, atravs do cdigo de
resposta 200 Created e na linha 12, em Location, est o URI
completo do recurso recm-criado.
Quadro 3: Mtodo PUT

Vale ressaltar que a mesma tarefa pode ser feita com o

mtodo POST, mas h algumas diferenas. O POST tambm
cria um recurso, mas s dever ser usado quando a
responsabilidade por definir o URI for do servidor, atravs de
regras pr-definidas.
No exemplo do Quadro 4, o mtodo POST usado na
criao de um recurso cadeira, que pertence ao tipo moveis
(linha 1). J entre as linhas 4 e 9, foram passados os dados, em
estrutura XML, necessrios para a criao do novo recurso.
Aps o processamento, percebe-se que o recurso recebeu um
173

T.I.S. 2014; 3 (2): 171-179

Lucas Rodrigues, Antonio Francisco do Prado

identificador 1058, conforme o URI retornado pelo servidor,

na linha 10. Neste caso, no foi necessrio informar qual era
o identificador, pois isto faz parte de funcionalidade
previamente definida.
Quadro 4: Mtodo POST

Vale destacar que nos exemplos dos quadros acima a

representao dos dados foi feita atravs de XML, mas
poderia ter sido feito com outros formatos, como o JSON, por
exemplo.
H, tambm, outros mtodos HTTP, como os HEAD,
OPTIONS e TRACE, mas menos utilizados. O mtodo
HEAD tem a funo de obter somente a representao dos
metadados1 dos recursos, semelhante ao GET, porm sem
que o corpo da representao seja retornado. til para ter a
certeza de que um recurso existe, bem como para recuperar
informaes sobre ele. Porm, caso seja necessrio descobrir
quais mtodos esto disponibilizados atravs do URI do
recurso, pode-se utilizar o mtodo OPTIONS. J o TRACE
serve para realizar debug em proxies.
O desenvolvimento de webservices RESTful mais
simples de ser implementado do que com o SOAP, que requer
artefatos adicionais para definio de uma interface. O
RESTful, j tendo uma interface unificada, possibilita uma
maior integrao estimulando o reuso dos servios, maiores
interoperabilidade e escalabilidade, tudo com baixo
acoplamento.
Outra vantagem quanto ao desempenho, pois h maior
objetividade na troca de dados, trafegando-se somente os
dados que so necessrios (no h nenhum documento
adicional para a definio da interface, por exemplo), e cujas
requisies e respostas so menores.
Isto favorece principalmente no desenvolvimento de
aplicaes mveis, que, devido s restries que os
equipamentos e os sistemas impem, a recomendao que a
tecnologia seja a mais simples e prtica possvel,
principalmente no que se refere troca de dados.
Por fim, os dados recebidos, normalmente em XML ou
JSON, so mais fceis de serem tratados atravs de rotinas
em JavaScript, do que o seu principal concorrente, o SOAP.
C) HTML5, CSS e JavaScript

O HTML uma linguagem multiplataforma criada com a

finalidade de ser utilizada em grande escala para a
disponibilizao de contedo. Esta linguagem
____________________________
1 Os metadados so informaes que servem para descrever e
classificar outros dados, dando um significado informao e
ao contexto em que ela se situa.
T.I.S. 2014; 3 (2): 171-179

multiplataforma, pois as informaes que ela publica no

dependem da arquitetura ou de alguma caracterstica
especfica do dispositivo que ir visualiz-la, tal como o
tamanho da tela, resoluo, variao de cor, etc. (W3C
Escritrio Brasil, 2013).
O HTML permite trabalhar com hipertexto, que qualquer
contedo contido em um documento web, com a possibilidade
de este poder se ligar a outros hipertextos atravs de links.
Com os hipertextos a navegabilidade de uma pgina web no
linear, mas interativa (SILVA, 2011).
Desde 1989, quando foi criado, o HTML teve vrias
verses e atualmente a verso 4.01 a mais utilizada. Apesar
disto, recentemente a especificao das funcionalidades da
verso 5 foi publicada, mas os navegadores ainda no tm
total compatibilidade (SILVA, 2011).
O HTML, assim como outras linguagens de marcao,
trabalha com tags, que so elementos que contm instrues
utilizadas pelo navegador para renderizar alguma publicao.
Nele, as tags so pr-definidas com uma especificao das
suas funes e sintaxes.
O HTML5, alm de incluir novas tags e alterar outras j
existentes, especificou-as de modo mais detalhado, permitindo
que os navegadores se comportem de maneira uniforme ao
interpret-las.
Embora tenha remodelado a estrutura do HTML utilizada
at ento, o seu desenvolvimento teve como premissa a
retrocompatibilidade. Isto significa, na prtica, que as tags da
verso anterior que estavam para ser extintas ainda podero
ser utilizadas, apesar de no recomendarem o seu uso. Por
outro lado, os navegadores devero manter a compatibilidade
com estas tags at que no sejam mais usadas.
Dentre as inovaes desta nova verso do HTML, podem
ser citadas o suporte nativo para a reproduo de udio e
vdeo, sem a necessidade de plugins auxiliarem e o elemento
canvas, que delimita uma rea para a criao dinmica de
imagens, grficos estticos e dinmicos, e jogos atravs de
linguagem de programao, como o JavaScript (Silva, 2011).
O armazenamento local de dados, que no era simples de se
programar, foi reformulado e simplificado, podendo ser feito
atravs da API Storage e at mesmo por meio de um banco de
dados SQL, manipulado via JavaScript. Aliado a isso,
possvel que a aplicao esteja disponvel para uso offline,
atravs das funcionalidades especificadas na Offline Web
Application. Estes so recursos teis para o uso em aplicaes
mveis, dada as limitaes da arquitetura.
Outra nova caracterstica includa a recuperao de
referncias de localizao do usurio atravs de GPS (Global
Positioning System) e sinais de redes, como o IP, redes sem
fio, RFID, bluetooth, identificadores GSM/CDMA/3G, ou at
mesmo de coordenadas informadas manualmente pelo
usurio. Com isso, podem-se associar tais dados API do
Google Maps, por exemplo, permitindo que mapas estticos
ou dinmicos sejam gerados, ou ainda usar recursos da rede
social Twitter para realizar buscas de usurios prximos
localizao informada (Silva, 2011).
Apesar de ser a linguagem base para a visualizao de
pginas na internet, o HTML sozinho no tem condies de
174

Desenvolvimento de Aplicaes Mveis com Servios RESTful e HTML5

dar suporte s funcionalidades que so necessrias em

aplicaes web. Para tanto, utilizada uma combinao de
tecnologias que permitem que sejam construdas aplicaes
web ricas e com layout responsivo, ou seja, que se adaptam a
diferentes tamanhos e resolues de tela. O uso mais comum
o do HTML junto com o CSS e JavaScript. A Figura 1
mostra o papel que cada tecnologia tem em uma aplicao
web.
Neste conjunto, o HTML5 usado na estruturao de
contedo, conforme j mencionado. Com o CSS (Cascading
Style Sheet) trabalha-se com a formatao da informao e o
JavaScript quem d vida s funes que a pgina ir
executar.

Figura 1: Comparao das funes do HTML, CSS e

JavaScript (SERRA, 2011)
Esta diviso de papis atende a uma boa prtica definida
pela W3C, que prega ser necessria uma separao da
estrutura do cdigo com a formatao. Ou seja, h uma
diviso em trs camadas do desenvolvimento: informao,
formatao e comportamento.
O JavaScript, que muito d suporte ao HTML, uma
linguagem de programao orientada a objetos para a web
muito utilizada na manipulao dos elementos de uma pgina.
Com ela, podem ser adicionadas muitas funcionalidades,
como validao de formulrios, tratamento de eventos,
comunicao com webservices, etc. (W3SCHOOL, 2013a).
Para o JavaScript, h uma biblioteca de cdigo aberto, a
JQuery, que possui scripts e funes para a manipulao de
elementos HTML, CSS, de eventos, efeitos e animaes, bem
como possibilita a implementao de pginas com AJAX
(Asynchronous JavaScript and XML). Este ltimo recurso
trata-se na verdade de uma tcnica de carregamento de
contedo parcial em uma pgina, e no nela inteira. Esta
biblioteca proporciona, entre outras coisas, reuso de cdigo,
implicando em reduo de linhas de programao e agilidade
no desenvolvimento (W3SCHOOL, 2013a).
O JQuery, por sua vez, serviu de base para o
desenvolvimento do framework JQuery Mobile. Este
framework possui recursos para a construo de interfaces de
aplicaes mveis, atravs de HTML5 e CSS3, funcionando
em uma grande variedade de sistemas operacionais mveis
(W3SCHOOL, 2013b).
O JQuery Mobile tem um suporte muito amplo no
desenvolvimento de interfaces responsivas, com todos os
widgets adaptveis tela, incluindo grids, tabelas, e painis
(THE JQUERY FOUNDATION, 2013).
Como ser demonstrado na seo 3, a combinao
HTML5, CSS3 e JQuery Mobile muito rica e permite a
construo de aplicativos web totalmente adaptveis e

poderosos.
D) Computao Mvel

Dada a grande popularidade dos dispositivos mveis, o

modo como se consome informaes e as disponibiliza est
sofrendo alteraes.
Essas mudanas trazem vrias implicaes para o ambiente
de TI, principalmente no desenvolvimento de aplicaes
mveis. Atualmente, h dois tipos de aplicaes para
dispositivos mveis: os aplicativos nativos e os web,
construdos com HTML5.
No desenvolvimento de aplicaes nativas, os aplicativos
so compilados para uma plataforma especfica e
normalmente so desenvolvidos utilizando-se a linguagem de
programao definida para a arquitetura. No caso do sistema
operacional android, usa-se a linguagem Java, no IOS, o
objective-C e no Windows Phone, a linguagem o C#.
Alguns domnios de aplicaes podem utilizar totalmente
os recursos do equipamento, oferecendo uma melhor
experincia de uso e um desempenho aprimorado. O acesso a
recursos e dados locais proporcionado por meio de APIs
prontas para esta finalidade.
Alm disso, aplicaes deste tipo podem usufruir do
benefcio de serem distribudas pelos canais oficiais de cada
sistema, como o GooglePlay, no android e o AppStore no
IOS.
Quanto s desvantagens, h o problema de compatibilidade,
que ocorre devido s vrias verses do mesmo sistema
operacional ou de sistemas operacionais diferentes.
Portanto, caso seja necessrio disponibilizar o software a
outros ambientes, uma nova programao ter de ser feita,
implicando, muitas vezes, em treinamentos, contrataes e
aquisio de ferramentas (MARTINS et al., 2013).
J as aplicaes mveis web possuem uma capacidade
adaptativa que lhes permitem o funcionamento adequado em
vrios dispositivos mveis. Normalmente so desenvolvidas
em HTML5, CSS3 e JavaScript (atravs de bibliotecas como
JQuery Mobile) e acessadas por meio de um navegador. Estas
linguagens permitem o desenvolvimento de layouts
responsivos, possibilitando o funcionamento da aplicao em
vrios modelos de equipamentos e sistemas operacionais
diversos.
Entretanto, pesa contra este tipo de aplicao a
desempenho, que, se comparada s aplicaes nativas,
costuma ser inferior. Isto se deve ao fato de que dependem do
download da aplicao de um servidor web e da interpretao
do programa recebido. Outro ponto que no acessam de
modo to eficiente os recursos de hardware e software dos
equipamentos quanto os aplicativos nativos (Martins et al.,
2013).
Martins et al. (2013) incluem ainda a necessidade de
conexo para funcionarem como uma das desvantagens.
Porm, este problema pode ser contornado, conforme j dito,
com o HTML5, que possui o armazenamento em cache de
toda ou parte da aplicao, otimizando um pouco o
desempenho e funcionando de modo off-line.
175

T.I.S. 2014; 3 (2): 171-179

Lucas Rodrigues, Antonio Francisco do Prado

III. DESENVOLVIMENTO DE APLICAES MVEIS COM

RESTFUL E HTML5
Para apresentar o uso combinado de Servios RESTful e
HTML5, ser utilizado um estudo de caso. Esse estudo de
caso consiste em uma aplicao no domnio de rede social
com foco na busca de informaes (tweets) no Twitter. Esta
aplicao foi construda atravs do servio gratuito da
plataforma de desenvolvimento mvel em nuvem appery.io,
que permite criar aplicaes mveis usando HTLM5, CSS3,
jQuery Mobile, integrando-as com servios RESTful, alm de
outros recursos.
A) Interface em HTML5

elementos, foi inserida tambm uma imagem que ir mostrar a

foto do autor.
Um ponto importante a presena da meta tag viewport no
head do cdigo HTML, que possibilita ao navegador
interpretar que a aplicao no foi desenvolvida para PCs,
mas sim para um dispositivo mvel. Caso esta meta tag no
esteja presente, a apresentao da pgina ser feita com uma
resoluo maior, o que far com que a pgina seja exibida em
tamanho reduzido, exigindo que o usurio precise dar zoom
para que possa melhor visualiz-la. A propriedade content
desta meta tag, cujo atributo definido neste caso foi initialscale=1, define a escala da aplicao em 1:1, tambm
ajustando a proporo da tela.

A pgina de pesquisa foi estruturada com os elementos

header, content e footer, do framework Jquery Mobile,
que so utilizados, respectivamente, para trabalhar com o
cabealho, o contedo e o rodap da pgina. Todos estes
elementos esto contidos em um container pai chamado
page, que a pgina propriamente dita. No Quadro 5
apresenta-se a codificao mnima para a construo de uma
pgina com recursos do framework.
Quadro 5: Template de uma estrutura simples JQuery
Mobile e HTML5

Figura 2: Exemplos de telas desenvolvidas sem e com o

uso de CSS3 e JQuery Mobile

Como pode ser observado nas linhas 23 e 24 foi inserido o

ttulo da aplicao como o cabealho. J o elemento content,
da linha 27, serviu para agrupar os principais elementos da
tela, tais como:

input text: campo responsvel por receber o

parmetro da pesquisa;

button: boto usado para executar a tarefa de

pesquisa de tweets;

grid: local onde o contedo do resultado da pesquisa

ser exibido. Neste grid h labels responsveis pelas
exibies do autor do tweet, da data e hora de postagem da
mensagem e pelo tweet propriamente dito. Alm destes
T.I.S. 2014; 3 (2): 171-179

As telas apresentadas na Figura 2 ilustram um layout

construdo somente com cdigo HTML5, sem programao
qualquer recurso extra. A prxima tela possui uma formatao
aprimorada com CSS3 e JQuery Mobile.
A estrutura CSS desta aplicao est separada em arquivos
conforme o tipo de elemento que se deseja formatar. H,
portanto,
trs
arquivos
CSS:
jqm.css,
jquery.mobile.structure.css e o startScreen.css. O arquivo
jquery.mobile.structure-1.3.0.css usado na definio da
estrutura da pgina, abrangendo elementos como o header,
footer, content e o prprio page. J o arquivo jqm.css tem o
objetivo de formatar os demais elementos, tais como inputs,
buttons, labels, grids, etc. E por fim o startScreen.css cuida da
personalizao dos elementos de uma pgina especfica, para
casos em que a formatao definida no jqm.css no atende
adequadamente. Vale lembrar que os dois primeiros arquivos
fazem parte do framework JQuery Mobile.
B) Reuso de Servios RESTful

Uma vez definida a interface, torna-se necessrio

implementar a comunicao com o servio RESTful. No caso
desse exemplo, para acessar o servio preciso antes realizar
uma autenticao no Twitter.
176

Desenvolvimento de Aplicaes Mveis com Servios RESTful e HTML5

Normalmente, para autenticao, o usurio insere o seu

nome de usurio e senha para iniciar o processo. Entretanto,
no so as informaes digitadas que so usadas na
autenticao, mas sim tokens2 geradas pelo provedor de
servio (neste caso o Twitter) que permitiro o acesso. O
Twitter usa o protocolo de autenticao OAuth, que habilita
um token a um determinado sistema a obter acesso.
Basicamente, a autenticao OAuth tem a seguinte
sequncia de funcionamento: com uma chave e um segredo
de consumidor, previamente obtidas pelo desenvolvedor da
aplicao junto ao provedor de servio, o aplicativo faz uma
solicitao de um token de requisio. O servio atende a
solicitao, criando o token. Aps, o servio solicita ao
usurio que se autentique, com o nome de usurio e senha.
Aps esta autenticao, o usurio opina se deseja ou no
conceder o acesso. Em caso positivo, o provedor de servio
habilita o token de requisio que at ento estava criado mas
no era vlido. Com o token de requisio, a aplicao faz
uma nova solicitao ao provedor de servio, requisitando um
token de acesso, sendo este o responsvel pelo acesso aos
contedos restritos. Ou seja, o token de requisio utilizado
na aceitao do usurio para a concesso de autorizao ao
aplicativo e o token de acesso necessrio no acesso
propriamente dito aos recursos protegidos do servio.
Este trabalho no ir explorar o processo de autenticao
descrito acima, optando-se por gerar o token de requisio
diretamente na pgina de gerenciamento do desenvolvedor do
Twitter e armazen-lo em uma constante.
No desenvolvimento da comunicao com o webservice foi
utilizada a classe Appery na instanciao dos objetos
OAuth2DS e SearchDS. Por meio destes objetos a aplicao
realiza, respectivamente, a autenticao e a pesquisa
propriamente dita.
A classe Appery tem mtodos que fazem a preparao e o
relacionamento dos dados com elementos da tela, alm da
prpria transmisso e foi disponibilizada pelo IDE appery.io.
Quadro 6: Mapeamento da requisio

O Quadro 6 apresenta o cdigo utilizado para enviar os

parmetros ao servio, sendo os principais: Authorization, que
envia o token de acesso (linha 7); q, que o valor que se
deseja pesquisar (linha 18). Para este campo, h o atributo ID
e o valor searchInput (linhas 19 e 20, respectivamente), que
vincula o valor digitado no referido input informao
pesquisada. E, por fim, o parmetro appery-proxy-url (linha
23), que contm a URI do servio de pesquisa do Twitter.
Alm destes, o objeto TwitterSearch_OAuth2Service tambm
foi passado como parmetro (linha 3), sendo que nele h
propriedades que especificam o mtodo HTTP utilizado (GET,
neste caso) e tambm como o arquivo est estruturado
(JSON).
Para a resposta do servio h tambm um mapeamento
seguindo a mesma lgica do parmetro q da requisio. O
Quadro 7 exibe o cdigo de mapeamento dos dados
recebidos.
Quadro 7: Associao dos dados retornados aos
componentes da tela

Por padro, o servio retorna vrios campos, mas destes

foram utilizados os seguintes:

statuses/created at (linha 12): exibe a data e hora de

quando foram criados, e est vinculado ao label tweetTime;

statuses/user/profile_image_url (linha 27): exibe a

imagem do usurio que publicou o tweet, exibida no elemento
src tweetPicture;

statuses/user/user_name (linha 22): exibe o nome do

usurio responsvel pelo tweet, associado ao label tweetFrom ;

statuses/text (linha 17): o tweet propriamente dito,

mostrado no label tweetText.
C) Resultados da Integrao HTML5 e RESTful

A figura 3 mostra uma das telas da aplicao implementada

com as tecnologias propostas. Na camada de interface tem-se
o HTML5 responsvel pela renderizao das telas cujos
_______________________________
2 Um token , geralmente, uma cadeia de aleatria de
caracteres pareada com um segredo de modo a proteg-lo.
177

T.I.S. 2014; 3 (2): 171-179

Lucas Rodrigues, Antonio Francisco do Prado

layouts so responsivos e adaptam os contedos conforme as

caractersticas dos dispositivos que acessam a aplicao. Na
camada de negcio, que precisa acessar informaes do
banco de dados, tm-se os servios implementados com

RESTFul. Portanto, verifica-se que vivel desenvolver para

dispositivos mveis com HTML5 e acessando servios
RESTful.

Figura 3: Resultado de uma pesquisa

IV. TRABALHOS RELACIONADOS
Os trabalhos realizados por Nunes e David (2005) e
Ferreira e Matiusso Jnior (2010) contriburam por terem
abordado sobre webservices SOAP e RESTful, descrevendo
sobre o modo de funcionamento e realizando uma
comparao entre as duas tecnologias.
J em Fielding (2000) e Richardson e Ruby (2007) foram
apresentados conceitos aprofundados da tecnologia RESTful,
principalmente pelo motivo de o primeiro ter sido o criador
do REST e os outros dois pela melhoria nos conceitos da
tecnologia e especificao para um uso mais prtico.
A dissertao de Xavier (2011) foi um pouco alm, pois
apresenta os conceitos e comparaes referentes a
webservices RESTful e SOAP e sugere a implementao de
webservices semnticos atravs da linguagem HTML atravs
de um estudo de caso no domnio de redes sociais.
Porm, em Serra (2011) abordam-se as trs tecnologias
presentes neste artigo, ou seja, o uso de HTML5, CSS3 e
JavaScript no desenvolvimento de aplicaes mveis com
acesso a webservices, propondo o desenvolvimento de uma
aplicao do domnio multimdia e televisivo.
V. CONCLUSO
Este trabalho apresentou uma abordagem para
desenvolvimento de aplicaes mveis com interfaces
implementadas em HTML5 e reuso de webservices RESTful.
A abordagem baseou-se nos estudos sobre essas tecnologias
no apoio ao desenvolvimento de aplicaes mveis.
Os estudos possibilitaram compreender que webservices
podem proporcionar interoperabilidade e reuso de softwares
atravs da internet, estendendo as funcionalidades dos
sistemas. No desenvolvimento da aplicao, verificou-se que
possvel acessar servios web RESTful atravs de
dispositivos mveis, como celulares e tablets.
T.I.S. 2014; 3 (2): 171-179

Ainda, os estudos tambm possibilitaram concluir que a

linguagem HTML5, com CSS3 e JavaScript, pode ser
integrada na abordagem para produzir interfaces com layouts
responsivos facilitando as adaptaes de contedos.
Finalmente, pde-se concluir que possvel e vivel a
combinao proposta, de HTML5 e servios RESTFul para
apoiar o desenvolvimento de aplicaes mveis.
Como trabalho futuro pretende-se testar a abordagem
proposta em outros domnios de aplicaes mveis, visando
refin-la e melhor-la para sua transferncia para a
comunidade que desenvolve software para dispositivos
mveis.
REFERNCIAS
ERL, T. SOA: Princpios de design de servios. So Paulo:
Pearson Prentice Hall, 2009.
FERREIRA, E. P.; MATIUSSO JNIOR, M. Aplicaes
RESTful. Universidade Federal do ABC, So Bernardo do
Campo,
2010.
Disponvel
em:
<http://matiusso.scienceontheweb.net/Arquivos/Aplicacoe
s%20RESTful.pdf>. Acesso em: 15 mar. 2013.
FIELDING, R. Architectural Styles and the Design of
Network-based Software Architectures. Dissertao (Ph.D.
in Information and Computer Science). Irvine, University
of California, 2000.
LEE, V.; SCHNEIDER, H.; SCHELL, R. Aplicaes mveis:
Arquitetura, projeto e desenvolvimento. Traduo:
Amaury Bentes e Deborah Rudiger. So Paulo. Pearson
Education do Brasil. 2005.
MAGALHES, I. L.; PINHEIRO, W. B. Gerenciamento de
Servios de TI na Prtica: Uma abordagem com base na
ITIL. So Paulo: Novatec, 2007.
MARZULLO, F. P. SOA na prtica: Inovando seu negcio por
meio de solues orientadas a servios. So Paulo:
Novatec, 2009.
178

Desenvolvimento de Aplicaes Mveis com Servios RESTful e HTML5

NUNES, S.; DAVID, G. Uma Arquitectura Web para Servios

Web. Universidade do Porto, Porto, 2005. Disponvel em
<http://repositorioaberto.up.pt/bitstream/10216/281/2/12085.pdf>. Acesso
em: 19 ago. 2013.
RAY, R. J.; KULCHENKO, P. Programming Web Services
with Perl: Practical Solutions for Rapid Web Services
Development. Sebastopol: O'Reilly, 2003.
RICHARDSON, L.; RUBY, S. RESTful Web Services: Web
Services for the Real World. Sebastopol: O'Reilly, 2007.
SERRA, R. J. M. Interfaces tcteis baseadas em
HTML5/CSS3/JavaScript. Dissertao (Mestrado em
Engenharia Informtica e Computao) Faculdade de
Engenharia, Universidade do Porto, Porto, 2011.
Disponvel
em:
<http://repositorioaberto.up.pt/handle/10216/63293>. Acesso em: 08 jun.
2013.
SILVA, M. S. HTML5: A linguagem de marcao que
revolucionou a web. So Paulo: Novatec, 2011.
TANENBAUM, A. S. Redes de Computadores: 4.ed.
Traduo: Vandenberg D. de Souza. Rio de Janeiro:
Elsevier, 2003.
THE JQUERY FOUNDATION. JQuery Mobile: Introduction.
Disponvel
em:
<http://view.jquerymobile.com/1.3.2/dist/demos/intro/>.

Acesso em: 30 set. 2013.

W3C Escritrio Brasil, Curso de HTML5. Disponvel em:
<http://www.w3c.br/pub/Cursos/CursoHTML5/html5web.pdf>. Acesso em: 20. jun. 2013.
W3C. SOAP Version 1.2 Part 0: Primer (Second Edition).
Disponvel em: <http://www.w3.org/TR/2007/RECsoap12-part0-20070427/>. Acesso em: 01. ago. 2013.
W3SCHOOL. JavaScript Tutorial. Disponvel em:
<http://www.w3schools.com/js/>. Acesso em: 30 set.
2013a.
W3SCHOOL. JQuery Introduction. Disponvel em:
<http://www.w3schools.com/jquery/jquery_intro.asp>.
Acesso em: 30 set. 2013b.
W3SCHOOL. SOAP Introduction. Disponvel em:
<http://www.w3schools.com/soap/soap_intro.asp>. Acesso
em: 01 ago. 2013c.
XAVIER, O. C. Servios Web Semnticos Baseados em
RESTful: Um estudo de casos em redes sociais online.
Dissertao (Mestrado em Cincia da Computao) Instituto de Informtica, Universidade Federal de Gois,
Goinia,
2011.
Disponvel
em:
<http://www.inf.ufg.br/mestrado/sites/www.inf.ufg.br.mest
rado/files/uploads/Dissertacoes/OtavioCala%C3%A7a.pdf
>. Acesso em: 03 ago. 2013.

179

T.I.S. 2014; 3 (2): 171-179