framework para construÇÃo de aplicaÇÕes com … · por ser livre e de código aberto, a...

15
1 FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM INTERFACES GRÁFICAS ADAPTÁVEIS PARA DISPOSITIVOS MÓVEIS 1 Ricardo Rauber Pereira 2 <[email protected]> Maurício da Silva Escobar 3 <[email protected]> – Orientador Universidade Luterana do Brasil (Ulbra) – Curso de Sistemas de Informação – Campus Canoas Av. Farroupilha, 8.001 – Bairro São José – CEP 92425-900 – Canoas - RS 25 de abril de 2011 RESUMO Este artigo descreve o desenvolvimento de um framework para a construção de aplicações a partir da linguagem de marcação XML, interpretação e disponibilização do conteúdo em dispositivos móveis, tais como smartphones e tablets. Palavras-chave: Interfaces Adaptáveis, Dispositivos Móveis, Linguagem de Marcação. ABSTRACT Title: “Framework for Building Applications with Adaptable Graphic Interfaces for Mobile Devices” This paper describes the development of a framework for building applications from the XML markup language, interpretation and delivery of content to mobile devices such as smartphones and tablets. Key-words: Adaptable Interfaces; Mobile Devices; Markup Language. 1 INTRODUÇÃO Os telefones celulares estão cada vez mais avançados e já fazem parte do dia-a-dia de milhões de brasileiros, tendo sido vendidos cerca de 207,5 milhões de aparelhos segundo pesquisa realizada pela Anatel (ANATEL, 2011). Existem inúmeros tipos e tamanhos de aparelhos construídos por diversos fabricantes, além de recursos exclusivos de acordo com cada modelo. Com essas características, esta se criando o interesse em uma área de atuação nova para muitos profissionais da tecnologia da informação: o desenvolvimento de aplicações para dispositivos móveis. Entrar nesse ramo é uma grande desafio para os profissionais de desenvolvimento, pois os materiais de instrução são escassos e a tecnologia para o desenvolvimento (frameworks, APIs, IDEs) depende de cada fabricante, e muitas vezes são tecnologias proprietárias, isto é, dependem de pagamento de licença para sua utilização. Entretanto, todos aqueles que optarem pela exploração dessa área terão um mundo novo para criar e desenvolver ideias antes impossíveis devido a falta de recursos computacionais dos dispositivos móveis. Este artigo descreve a construção de um protótipo referente ao framework proposto, que utiliza uma linguagem de marcação para a descrição de aplicações independentes de plataforma. Uma linguagem de marcação é “um conjunto de convenções utilizadas para a codificação de textos” (ALMEIDA, 2002, p. 6). Considerando a limitação de espaço para este artigo, somente alguns recursos de dispositivos móveis serão descritos e implementados, listados na Seção 3. A Seção 2 descreve o formato padrão da linguagem de marcação para a utilização dos recursos do framework e a tecnologia a ser utilizada para a sua interpretação e construção da aplicação. A Seção 3 lista os recursos dos dispositivos móveis que serão utilizados no protótipo. A Seção 4 demonstra o cronograma das atividades para a construção do protótipo e, por fim, serão apresentadas as conclusões. 1 Artigo elaborado como Trabalho de Conclusão de Curso I em Sistemas de Informação. 2 Profissional da área de Tecnologia da Informação. Certificado em Oracle PL/SQL Developer Associate. Pesquisador e empresário na área de dispositivos móveis. 3 Mestre em Ciência da Computação pela Pontifícia Universidade Católica do Rio Grande do Sul, PUCRS, Brasil. Professor dos cursos de Computação na Ulbra Canoas.

Upload: phungtuong

Post on 25-Nov-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

1

FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM INTERFACES GRÁFICAS ADAPTÁVEIS PARA

DISPOSITIVOS MÓVEIS1 Ricardo Rauber Pereira2 <[email protected]>

Maurício da Silva Escobar3 <[email protected]> – Orientador

Universidade Luterana do Brasil (Ulbra) – Curso de Sistemas de Informação – Campus Canoas Av. Farroupilha, 8.001 – Bairro São José – CEP 92425-900 – Canoas - RS

25 de abril de 2011

RESUMO Este artigo descreve o desenvolvimento de um framework para a construção de aplicações a partir da

linguagem de marcação XML, interpretação e disponibilização do conteúdo em dispositivos móveis, tais como smartphones e tablets.

Palavras-chave: Interfaces Adaptáveis, Dispositivos Móveis, Linguagem de Marcação.

ABSTRACT Title: “Framework for Building Applications with Adaptable Graphic Interfaces for Mobile Devices”

This paper describes the development of a framework for building applications from the XML markup language, interpretation and delivery of content to mobile devices such as smartphones and tablets.

Key-words: Adaptable Interfaces; Mobile Devices; Markup Language.

1 INTRODUÇÃO Os telefones celulares estão cada vez mais avançados e já fazem parte do dia-a-dia de milhões de

brasileiros, tendo sido vendidos cerca de 207,5 milhões de aparelhos segundo pesquisa realizada pela Anatel (ANATEL, 2011). Existem inúmeros tipos e tamanhos de aparelhos construídos por diversos fabricantes, além de recursos exclusivos de acordo com cada modelo. Com essas características, esta se criando o interesse em uma área de atuação nova para muitos profissionais da tecnologia da informação: o desenvolvimento de aplicações para dispositivos móveis.

Entrar nesse ramo é uma grande desafio para os profissionais de desenvolvimento, pois os materiais de instrução são escassos e a tecnologia para o desenvolvimento (frameworks, APIs, IDEs) depende de cada fabricante, e muitas vezes são tecnologias proprietárias, isto é, dependem de pagamento de licença para sua utilização. Entretanto, todos aqueles que optarem pela exploração dessa área terão um mundo novo para criar e desenvolver ideias antes impossíveis devido a falta de recursos computacionais dos dispositivos móveis.

Este artigo descreve a construção de um protótipo referente ao framework proposto, que utiliza uma linguagem de marcação para a descrição de aplicações independentes de plataforma. Uma linguagem de marcação é “um conjunto de convenções utilizadas para a codificação de textos” (ALMEIDA, 2002, p. 6). Considerando a limitação de espaço para este artigo, somente alguns recursos de dispositivos móveis serão descritos e implementados, listados na Seção 3.

A Seção 2 descreve o formato padrão da linguagem de marcação para a utilização dos recursos do framework e a tecnologia a ser utilizada para a sua interpretação e construção da aplicação. A Seção 3 lista os recursos dos dispositivos móveis que serão utilizados no protótipo. A Seção 4 demonstra o cronograma das atividades para a construção do protótipo e, por fim, serão apresentadas as conclusões.

1 Artigo elaborado como Trabalho de Conclusão de Curso I em Sistemas de Informação. 2 Profissional da área de Tecnologia da Informação. Certificado em Oracle PL/SQL Developer Associate. Pesquisador e empresário na área de

dispositivos móveis. 3 Mestre em Ciência da Computação pela Pontifícia Universidade Católica do Rio Grande do Sul, PUCRS, Brasil. Professor dos cursos de

Computação na Ulbra Canoas.

Page 2: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

2

2 FUNDAMENTAÇÃO TEÓRICA Para o desenvolvimento do framework proposto neste trabalho, é necessário o entendimento de

algumas tecnologias que serão utilizadas, tais como: a linguagem de marcação XML, a linguagem de programação Lua e o compilador Corona.

2.1 A Linguagem de Marcação XML Segundo Almeida (2002), após a popularização da internet e sua linguagem de marcação HTML –

HyperText Markup Language – verificou-se a necessidade de criar uma linguagem de marcação que se tornasse solução para a adição de recursos e para melhorar a integração de dados entre sistemas, assim então nasceu o XML – eXtensible Markup Language. O W3C – WWW Consortium - (W3C, 2011), mantenedor de diversos padrões Web, lançou em dezembro de 1997 a versão 1.0 da linguagem XML com a proposta de simplificar a linguagem de marcação SGML – Standard Generalized Markup Language – que também serviu de base para o HTML.

O XML possui três características importantes: (i) permite a criação de marcações (dialeto), (ii) não existe limite na profundidade de agrupamento das estruturas de dados, e, (iii) permite a descrição opcional da sua gramática (utilizando um documento denominado DTD – Document Type Definition). Por ser uma linguagem de marcação extensível, a utilização do XML se torna bastante viável para a estruturação de metadados, mesmo para os cenários mais específicos. Seu formato é em modo texto, possibilitando que qualquer editor realize a leitura dos dados e até mesmo pessoas possam compreendê-los. A Figura 1 ilustra um exemplo de transformação de dados não-estruturados em uma estrutura utilizando marcadores definidos através da sintaxe XML. A seguir serão descritos os componentes da linguagem XML.

Figura 1 – Exemplo de dados e seu correspondente em XML

ELEMENTOS Conforme demonstrado na Figura 1, a estrutura do XML se faz a partir de componentes básicos conhecidos como “elementos”. A construção dos elementos é feita a partir do nome do elemento - denominado “marcação” – circundado pelos símbolos “<” e “>”, conhecido também como tag. Essas tags precisam ser iniciadas e finalizadas para o correto funcionamento do elemento, por exemplo “<temperatura>25</temperatura>”, sendo que a tag de finalização necessita do símbolo “/” para ser identificada precisamente pelo programa que efetuará a leitura do XML. Quando a tag não possui conteúdo (esta vazia), ela pode ser representada de maneira simplificada, como por exemplo “<temperatura />”. A nomenclatura dos elementos (marcações) devem ser, necessariamente, escritas com caracteres alfanuméricos sem a utilização de acentos e devem iniciar com uma letra.

ATRIBUTOS Outra parte importante na construção dos elementos do XML é utilização de atributos, que são utilizados para expressar características ou propriedades de um elemento. A definição de atributos se dá a partir da combinação do nome e valor dos mesmos. Eles também podem ser construídos de acordo com as preferências do desenvolvedor assim como os elementos. A Figura 2 demonstra alguns exemplos de elementos e atributos sendo escritos em XML, onde é definido um elemento chamado “jogo” que possui “nome” como atributo. Também são definidos três elementos do tipo “bola” que possuem como atributos o “id”.

Figura 2 – Elementos e Atributos em XML

Page 3: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

3

2.2 Linguagem de Programação Lua A Lua é uma linguagem de programação livre, desenvolvida pela PUC-Rio (Nélio Cacho et al.,

2006). Ela possui como característica a declaração de variáveis dinamicamente tipadas, sua sintaxe é similar a linguagem Pascal (REF) e oferece recursos não-convencionais como: funções do tipo first-class que podem retornar diversos valores, e, tables para implementar vetores associativos que são objetos dinâmicos e podem ter seus valores acessados por qualquer tipo de índice, exceto valores nulos (nil).

A linguagem possui o paradigma de orientação a eventos, ou seja, ela possui listeners que detectam ações (como toque na tela ou contador de tempo) e executa rotinas definidas pelo desenvolvedor em resposta a esses eventos. Um programa em Lua inicia sempre pelo arquivo “main.lua” e pode utilizar arquivos externos - denominados módulos – que contenham outros recursos como funções e variáveis. Além disso, a linguagem possui coleta de lixo incremental para o gerenciamento automático de memória. A Figura 3 demonstra um pequeno trecho de um programa escrito em Lua, que carrega imagens de bolas de sinuca e as alinha em formação triangular.

Figura 3 – Exemplo de código escrito em Lua

Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais. Ela possui uma forte comunidade online em seu website (LUA, 2011) onde podem ser encontradas diversas informações e um sólido manual de referência, além de existirem diversos livros sobre a linguagem. Utilizada em diversas áreas da computação, incluindo aplicações industriais, Lua possui uma presença forte na área de jogos digitais, tendo como um dos maiores cases de sucesso o jogo World of Warcraft. No ano de 2007, a linguagem Lua foi apresentada na HOPL III, a 3ª Conferência da ACM sobre a História das linguagens de Programação (HOPLIII, 2011). Este feito é importante e histórico, pois foi a primeira – e única – linguagem de programação desenvolvida fora do primeiro mundo a ser apresentada na conferência.

Ao invés de fornecer diversos tipos de construções diretamente na linguagem, Lua possui um conceito fundamental que é o fornecimento de meta-mecanismos para a implementação dessas construções. Um exemplo disso é que Lua não é uma linguagem orientada a objetos mas, possui os meta-mecanismos para a construção de classes e herança. Dessa forma, a linguagem se mantém pequena mas, pode se expandir em diversas maneiras. A Figura 4 demonstra a construção de um objeto e sua utilização.

Figura 4 – Construção de Objetos em Lua

Page 4: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

4

2.3 Corona SDK Criado em 2008 por ex-funcionários de grandes empresas de tecnologia da informação, como a

Adobe e a Apple, o Corona SDK é um kit de desenvolvimento que utiliza a linguagem de programação Lua para o desenvolvimento de jogos e aplicativos para dispositivos móveis (CORONA, 2011). O Corona é constituído basicamente de um simulador de dispositivos e um servidor que gera os códigos e entrega o programa pronto para o seu desenvolvedor. Sendo um grande projeto da Ansca Mobile, uma pequena empresa de Palo Alto, na Califórnia, o Corona trabalha com assinaturas anuais que possibilitam a geração ilimitada de programas durante o período.

O simulador de dispositivos do Corona SDK apresenta, para a versão Mac, os dispositivos da Apple (iPhone, iPhone4 e iPad) e alguns dispositivos que utilizam o sistema operacional Android: Droid, NexusOne, myTouch e Galaxy Tab. Existe também a versão para o sistema operacional Windows, porém, essa versão dispõe apenas dos dispositivos relacionados ao sistema Android. A Figura 5 ilustra o Corona simulando o dispositivo iPad executando um jogo de sinuca cujo código demonstrado na Figura 3 pertence.

Figura 5 – Corona SDK simulando o dispositivo Apple iPad

O Corona SDK implementa praticamente todas as funcionalidades que a linguagem de programação Lua dispõe, eliminando – por razões de segurança não especificadas –funções relativas a execução dinâmica de códigos Lua, que são: dofile, load, loadfile, e, loadstring. Em contrapartida, a equipe de desenvolvimento da Ansca criou algumas bibliotecas novas para a utilização nos aplicativos para dispositivos móveis, que incluem: construção de imagens, desenhos vetoriais e textos; simulação de física utilizando gravidade e colisões; animações e transições; tratamento e execução de áudio com até 32 canais; mapas e localização; integração com redes sociais; acelerômetro (recurso que identifica a inclinação do aparelho). Além disso, o Corona possui um terminal de comando para debug e controle de erros, conforme mostra a Figura 6.

Figura 6 – Simulador e Terminal de Comando do Corona SDK

Page 5: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

5

2.4 Construção de Interfaces Gráficas A construção de um software não é restrita ao seu código-fonte, existe uma parte muito importante

que muitos desenvolvedores não levam muito em consideração, a interface gráfica. Segundo Ferreira e Leite (2003), os requisitos relacionados a exibição da informação na Web devem ser constituídos por: Consistência, Feedback, Níveis de habilidade, Comportamento humano, Percepção humana, Metáforas, Minimização de carga de memória, Classificação funcional dos comandos, e, Projeto independente da resolução do monitor. Esses requisitos podem ser utilizados também na computação móvel, uma vez que se tratam de dispositivos com diferentes configurações de software e hardware.

Segundo Monteiro (2000), a informação hipertextual utilizada pelos navegadores (browsers) esta disposta em forma de rede, e não estruturada hierárquica e linearmente como por exemplo, por meio da dobra de página impressa. Essa informação esta definida em uma estrutura lógica, construída utilizando linguagens de marcação. Os navegadores efetuam a leitura e a interpretação dessas informações hipertextuais e as demonstram em formato visual. Conforme descrito anteriormente, a W3C realiza a manutenção das linguagens de marcação e, consequentemente, a classificação funcional dos comandos. A Figura 7 demonstra um conjunto de informações hipertextuais e a Figura 8 demonstra essas informações interpretadas e exibida por um navegador.

Figura 7 – Exemplo de marcação hipertextual em HTML

Figura 8 – Interpretação de informações hipertextuais por um navegador

Page 6: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

6

3 O FRAMEWORK PROPOSTO Este trabalho consiste no desenvolvimento de um framework capaz de processar arquivos XML,

contendo marcações definidas através de um dialeto predefinido, e construir a respectiva interface gráfica. Nesta seção será apresentado o funcionamento geral do framework, seus principais recursos, como estes recursos serão utilizados e, por fim, o cronograma de atividades.

A Figura 9 representa o diagrama de atividades macro do protótipo. A primeira etapa a ser realizada consiste na leitura do arquivo XML, caso o arquivo não exista ou não possa ser aberto para leitura por algum motivo, então será informada a situação e finalizada a execução. Após a carga do arquivo na memória, será realizada a leitura dos dados contidos no arquivo, verificando a sua estrutura e consistência. A terceira etapa realiza o processamento das informações transformando os comandos escritos em XML em processos de execução em Lua. Por fim, o resultado da execução será demonstrada na tela de acordo com os recursos visuais utilizados.

Figura 9 – Fluxo de dados do protótipo

3.1 Recursos a serem utilizados no protótipo Os dispositivos móveis dispõem de diversos recursos dos mais variados tipos. A linguagem Lua e o

framework Corona SDK dispõem de diversos recursos visíveis em seus respectivos websites, para este protótipo foram selecionados alguns desses recursos, considerados como mais importantes, para serem implementados no protótipo. A Tabela 1 lista quais recursos que framework reconhecerá e que poderão ser utilizados para a descrição de interfaces gráficas independentes de plataforma. Para cada recurso, é mostrada a marcação XML correspondente – elemento - e os seus respectivos atributos.

Tabela 1: Recursos a serem implementados no protótipo Recurso   Elemento   Atributos  Variável   <var>   id,  value  Carregar  Variável   <load>   id  Salvar  Variável   <save>   id,  value  Decisão   <if>   value1,  comparison,  value2  Repetição   <for>   initial_value,  end_value  Temporizador   <timer>   id,  delay,  repeat  Imagem   <image>   id,  file,  alpha,  width,  height,  x,  y  Retângulo   <rect>   id,  color,  alpha,  width,  height,  x,  y  Círculo   <circle>   id,  color,  alpha,  radius,  x,  y  

Page 7: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

7

Linha   <line>   id,  color,  alpha,  x1,  y1,  x2,  y2  Texto   <text>   id,  value,  alpha,  size,  x,  y  Rotacionar   <rotate>   id,  angle  Interpolar   <interpolate>   id,  time,  delay,  attribute,  value  Tocar  Som   <playsound>   id,  file,  channel,  repeat  Pausar  Som   <pausesound>   delay  Tocar  Video   <video>   file  Remover   <remove>   id  

Os recursos listados foram implementados no compilador Corona utilizando a linguagem Lua. Para que possam ser utilizados pela linguagem XML, será realizado um trabalho de conversão de acordo com o recurso utilizado. O XML trabalha com inúmeros níveis de elementos, podendo ter elementos dentro de outros elementos. Por causa disso, serão implementados sub-elementos como ações do elemento ao ser tocado. Por exemplo, se existir uma chamada do recurso que executa um som dentro de um elemento de imagem, esse som será executado quando o usuário tocar na imagem. As informações abaixo contém a descrição dos atributos listados pela Tabela 1 e logo após, o Quadro 1 demonstra os recursos utilizando a linguagem Lua e o seu comando correspondente em XML (Obs: Os códigos em Lua no Quadro 1 são meramente ilustrativos, não correspondendo aos comandos reais, estes serão implementados no desenvolvimento do projeto).

• Variável: Com este recurso é possível criar atributos para a aplicação, não sendo necessário definir o tipo de dado.

o Id: Identificador da variável em formato caractere.

o Value: Valor da variável, sendo necessária a utilização de aspas para valores não-numéricos.

• Carregar Variável: Este recurso possibilita a carga de uma variável salva em outra sessão da aplicação.

o Id: Identificador da variável em formato caractere.

• Salvar Variável: Com este recurso é possível salvar dados para serem utilizados em outras sessões, mesmo após finalizar a aplicação.

o Id: Identificador da variável em formato caractere. o Value: Valor da variável, sendo necessária a utilização de aspas para valores não-

numéricos.

• Decisão: Comando de decisão lógica. o Value1: Primeiro valor a ser testado.

o Value2: Segundo valor a ser testado. o Comparison: Tipo de teste a ser realizado, podendo ser: “=” (igual), “<>”

(diferente), “>” (maior que), “<” (menor que), “>=” (maior ou igual a) ou “<=” (menor ou igual a).

• Repetição: Comando de repetição lógica progressiva. o Initial_value: Valor numérico para início da contagem. o End_value: Valor numérico para fim da contagem.

• Temporizador: Recurso de execução baseado em tempo. o Id: Identificador do temporizador em formato caractere. o Delay: Tempo em milisegundos para repetição da execução. o Repeat: Quantidade de execuções, sendo zero para infinito.

Page 8: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

8

• Imagem: Criação de imagens a partir de um arquivo físico. o Id: Identificador da imagem em formato caractere. o File: Nome do arquivo físico a ser utilizado. o Alpha: Transparência do objeto em valor numérico de 0 a 1. o Width: Largura da imagem. o Height: Altura da imagem. o X: Posicionamento da imagem no eixo X. o Y: Posicionamento da imagem no eixo Y.

• Retângulo: Criação de quadriláteros vetoriais. o Id: Identificador do retângulo em formato caractere. o Color: Cor de preenchimento do retângulo em formato hexadecimal. o Alpha: Transparência do objeto em valor numérico de 0 a 1. o Width: Largura do retângulo. o Height: Altura do retângulo. o X: Posicionamento do retângulo no eixo X. o Y: Posicionamento do retângulo no eixo Y.

• Círculo: Criação de círculos vetoriais. o Id: Identificador do círculo em formato caractere. o Color: Cor de preenchimento do círculo em formato hexadecimal. o Alpha: Transparência do objeto em valor numérico de 0 a 1. o Radius: Raio do círculo. o X: Posicionamento do círculo no eixo X. o Y: Posicionamento do círculo no eixo Y.

• Linha: Criação de linhas vetoriais. o Id: Identificador da linha em formato caractere. o Color: Cor de preenchimento da linha em formato hexadecimal. o Alpha: Transparência do objeto em valor numérico de 0 a 1. o X1: Posicionamento do primeiro ponto da linha no eixo X. o Y1: Posicionamento do primeiro ponto da linha no eixo Y. o X2: Posicionamento do segundo ponto da linha no eixo X. o Y2: Posicionamento do segundo ponto da linha no eixo Y.

• Texto: Criação de textos vetoriais. o Id: Identificador do texto em formato caractere. o Value: Conteúdo do texto. o Alpha: Transparência do objeto em valor numérico de 0 a 1. o Size: Tamanho numérico da fonte. o X: Posicionamento do texto no eixo X. o Y: Posicionamento do texto no eixo Y.

Page 9: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

9

• Rotacionar: Recurso de rotação de objetos. o Id: Identificador do objeto a ser rotacionado em formato caractere. o Angle: Ângulo em graus de 0 à 360 para rotação do objeto.

• Interpolar: Recurso de interpolação de atributos de objetos. o Id: Identificador do objeto a ter interpolação de atributos em formato caractere. o Time: Duração em milisegundos para a execução da interpolação. o Delay: Tempo de espera em milisegundos para iniciar a interpolação. o Attribute: Identificador do atributo a ser interpolado em formato caractere. Os

atributos possíveis são: X; Y; Rotation; Alpha;

• Tocar Som: Recurso de reprodução de arquivos de som em formato MP3. o Id: Identificador do som em formato caractere. o File: Nome do arquivo físico a ser utilizado. o Channel: Canal de som de 1 a 32 em formato numérico. o Repeat: Repetição do som em formato numérico sendo zero para infinito.

• Pausar Som: Recurso para pausar todos os sons que estão sendo executados. o Delay: Tempo de espera em milisegundos para pausar o som.

• Tocar Video: Recurso para reprodução de arquivos de vídeo em formato M4V. o File: Nome do arquivo físico a ser utilizado.

• Remover: Recurso para remover objetos visuais e variáveis. o Id: Identificador do objeto a ser removido em formato caractere.

Quadro 1 – Recursos em Lua e seus correspondentes em XML Recurso   Código  em  Lua   Marcação  XML  Variável   local  nome  =  “Rodrigo”   <var  

id=”nome”>Rodrigo</var>  Carregar  Variável   local  loadVar  =  function  

(varName)  ...  código  ...  end  <load  id=”nome”  />  

Salvar  Variável   local  saveVar  =  function  (varName,  varValue)  ...  código  ...  end  

<save  id=”nome”>  Roberto</save>  

Decisão   If  10  =  15  then  ...  código  ...  end  

<if  value1=”10”,  comparison=”=”,  value2=”15”>  ...  </if>  

Repetição   For  i=1,  10  do  ...  código  ...  end  

<for  initial_value=1,  end_value=10>  ...  </for>  

Temporizador   local  t1  =  timer.performWithDelay(  1000,  function  ()  ...  código  ...  end,  5)  

<timer  id=”t1”,  delay=1000,  repeat=5>  ...  </timer>  

Imagem   local  i1  =  display.newImageRect(  “quadro.png”,  200,  100)  i1.x  =  0  i1.y  =  150  

<image  id=”i1”,  file=”quadro.png”,  alpha=255,  width=200,  height=100,  x=0,  y=150>  </image>  

Page 10: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

10

Retângulo   local  r1  =  display.newRect(  0,  150,  200,  100  )  r1.alpha  =  100  r1:setFillColor(  255,  255,  255)  

<rect  id=”r1”,  color=”FFFFFF”,  alpha=100,  width=200,  height=100,  x=0,  y=150>  </rect>  

Círculo   local  c1  =  display.newCircle(  0,  200,  50)  c1.alpha  =  200  c1:setFillColor(  0,255,150  )  

<circle  id=”c1”,  color=”00FFAA”,  alpha=200,  radius=50,  x=0,  y=200>  </circle>  

Linha   local  l1  =  display.newLine(  0,  0,  100,  100  )  l1.alpha  =  255  l1:setColor(  0,  200,  120  )  

<line  id=”l1”,  color=”00BBEE”,  alpha=225,  x1=0,  y1=0,  x2=100,  y2=100>  </line>  

Texto   local  t1  =  display.newText(  “Meu  Texto”,  50,  300,  nil,  15)  t1.alpha  =  255  

<text  id=”t1”,  value=”Meu  Texto”,  alpha=255,  size=16,  x=50,  y=300>  </text>  

Rotacionar   R1:rotate(90)   <rotate  id=”t1”,  angle=90>  </rotate>  

Interpolar   transition.to  (  it1,  {time=2000,  delay=0,  x=200})  

<interpolate  id=”it1”,  time=2000,  delay=0,  attribute=”x,”  value=200>  </interpolate>  

Tocar  Som   local  s1  =  audio.loadSound(  “buzina.mp3”  )  audio.play(  s1,  {  channel=1,  repeat=1  })  

<playsound  id=”s1”,  file=”buzina.mp3”,  channel=1,  repeat=1>  </playsound>  

Pausar  Som   audio.pause()   <pausesound  delay=0>  </pausesound>  

Tocar  Video   media.playVideo(  “Intro.m4v”  )  

<video  file=”lntro.m4v”>  </video>  

Remover   c1:removeSelf()   <remove  id=”c1”>  </remove>  

3.2 Sistema de construção das interfaces Os recursos descritos na seção anterior serão utilizados nos arquivos XML desenvolvidos pelo

cliente e processados pelo sistema de construção de interfaces. Esse sistema é o núcleo do protótipo proposto neste artigo e será desenvolvido seguindo o cronograma da Seção 3.6. Para a construção das interfaces gráficas, será construída uma interface de leitura XML, uma estrutura de dados para o armazenamento e processamento das informações e um gerador de interfaces que irá transformar os dados em conteúdo visual. A Figura 10 demonstra o digrama de classes para o sistema de construção das interfaces, cuja classe main será o início da execução do programa, utilizando as demais como recursos do framework. A classe xmlReader possuirá a função de realizar a leitura e carga das informações dos arquivos XML a serem utilizados no framework. As demais utilizarão propriamente os recursos.

Page 11: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

11

Figura 10 – Diagrama de Classes do Sistema de Construção das Interfaces

Neste protótipo será trabalhado apenas a execução de um arquivo XML e este será denominado main.xml onde o código deverá ser escrito. Ao iniciar a aplicação, os recursos serão transformados em linguagem Lua e executados com seus atributos. A Figura 11 demonstra um exemplo de como o código poderá ser escrito e o resultado esperado no simulador.

Figura 11 – Comandos XML transformados em programa

Page 12: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

12

3.3 Testes de Software Para a realização dos testes de software, serão elaborados testes unitários para cada componente e

testes integrados com arquivos XML. Os testes unitários serão realizados de maneira automática com uma classe realizando a execução dos componentes informando parâmetros corretos e incorretos. Já os testes integrados serão realizados a partir de arquivos que utilizarão recursos aleatórios. Além disso, será realizada uma prova de conceito para testar as possibilidades do framework em uma utilização real. As Tabelas 2 e 3 demonstram alguns cenários de testes unitários e integrados, respectivamente.

Tabela 2 – Cenários de testes unitários

Componente Dados Resultado Esperado Resultado Obtido

xmlReader.fOpen Nome de arquivo válido

Abrir o arquivo

xmlReader.fOpen Nome de arquivo inválido

Exibir uma mensagem informando o erro

rVariables.fGetVar Variável Existente Retornar o valor da variável

Tabela 3 – Cenários de testes integrados

Componentes Dados Resultado Esperado Resultado Obtido

rDisplay.fImage; rDisplay.Remove

Arquivo de imagem Display vazio

rDisplay.fRect; rAnimation.fRotate

Altura, largura e ângulo para rotação

Retângulo rotacionado

rTimer.fCreate; rAudio.fLoad; rAudio.fPlay

Tempo em milissegundos, arquivo de audio

Tocar o som após o tempo informado

3.4 Prova de Conceito Ao final do desenvolvimento do protótipo será realizada uma prova de conceito com a construção de

uma aplicação em XML utilizando diversos recursos do framework. Esta aplicação terá como tema “Carros Esportivos” onde o propósito será utilizar os recursos do protótipo de acordo com o tema escolhido buscando a satisfação dos mesmos. A implementação da prova de conceito se dará conforme a lista abaixo:

• Vídeo de abertura.

• Imagem de fundo.

• Imagem rotacionada em quinze graus.

• Imagens diversas movendo-se aleatoriamente pela tela.

• Som de fundo repetindo infinitamente.

• Após cinco segundos uma mensagem de texto deverá aparecer na tela. Dois segundos depois, a mesma deverá sumir.

• Caso a resolução da tela seja menor que 768 por 1024 pixels, as imagens deverão ser trocadas por quadrados coloridos.

• Na parte inferior da tela deverá ser criado um menu com imagens funcionando como botões. Ao tocar nos botões, um som qualquer deverá ser executado.

• Botão no topo da tela que, ao ser tocado, deverá trocar a imagem de fundo.

• Botão que deverá pausar todos os sons do aplicativo ao ser tocado.

Page 13: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

13

3.5 Recursos necessários para a construção do protótipo O protótipo será construído para ser executado nas plataformas iOS (APPLE, 2011) e Android

(ANDROID, 2011). A plataforma Android não possui restrições de sistema operacional para desenvolvimento, já a plataforma iOS necessita de um computador da marca Apple. Por este motivo, para o desenvolvimento do protótipo será necessário um recurso computacional da Apple. A realização dos testes será dada pelo simulador do Corona SDK e em dispositivos móveis que utilizam os sistemas operacionais citados anteriormente. Portanto, os recursos a serem utilizados são:

• Computador laptop Apple Macbook o Processador Intel Core 2 Duo de 2,4GHz com 3MB de cache L2 compartilhado no

chip

o Barramento frontal de 1066MHz

o Memória física de 2GB DDR3 de 1066MHz o Armazenamento de 250GB em disco rígido

o Tela de 13 polegadas o Resolução de 800x1280 pixels

o Sistema Operacional MAC OS X Snow Leopard versão 10.6.7

• Computador tablet Apple iPad o Processador Apple A4 de 1GHz

o Memória física de 256MB o Armazenamento de 16GB em memória flash

o Tela de 9,7 polegadas multi-touch o Resolução de 768x1024 pixels

o Altura: 24,28 cm o Largura: 18,97 cm

o Sistema Operacional Apple iOS 4.3

• Telefone celular Apple iPhone 4 o Processador Apple A4 de 1GHz

o Memória física de 512MB o Armazenamento de 8GB em memória flash

o Tela de 3,5 polegadas multi-touch o Resolução de 640x960 pixels o Sistema Operacional Apple iOS 4.3

• Telefone celular Motorola Defy com a versão 2.2 do sistema Android o Processador ARMv7 de 800MHz o Memória física de 512MB

o Armazenamento de 8GB em memória flash o Tela de 3,7 polegadas multi-touch

o Resolução de 480x854 pixels o Sistema Operacional Google Android 2.2

Page 14: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

14

3.6 Cronograma de atividades Os prazos para a realização das atividades que compõem o projeto se darão de acordo com as

atividades apresentadas a seguir. Para facilitar a visualização o relacionamento entre as atividades, o cronograma é demonstrado também pelo Quadro 2, tendo como informações de linha as atividades a serem realizadas e informações de coluna as semanas de execução da tarefa. Os prazos foram estabelecidos de acordo com a data inicial, a ser definida no início do semestre.

• Atividade 1: Desenvolvimento do sistema de leitura de arquivos XML – 2 semanas após o início.

• Atividade 2: Desenvolvimento dos recursos de dados – 2 semanas após o prazo anterior.

• Atividade 3: Desenvolvimento dos recursos de imagem – 2 semanas após o prazo anterior.

• Atividade 4: Desenvolvimento dos recursos multimídia – 1 semana após o prazo anterior.

• Atividade 5: Realização dos testes unitários – 1 semana após o prazo anterior.

• Atividade 6: Planejamento dos testes integrados – 2 semanas após o prazo anterior.

• Atividade 7: Realização dos testes integrados – 2 semanas após o prazo anterior.

• Atividade 8: Realização da prova de conceito – 2 semanas após o prazo anterior.

• Atividade 9: Conclusão do artigo e finalização do projeto – 2 semanas após o prazo anterior. Quadro 2 – Cronograma de atividades

Atividade Agosto Setembro Outubro Novembro

S1 S2 S3 S4 S5 S6 S7 S8 S9 S10 S11 S12 S13 S14 S15 S16

A1 X X

A2 X X

A3 X X

A4 X

A5 X

A6 X X

A7 X X

A8 X X

A9 X X

REFERÊNCIAS ALMEIDA, Maurício Barcellos. Uma introdução ao XML, sua utilização na Internet e alguns conceitos complementares. Ci. Inf., Brasília, v. 31, n. 2 ago. 2002 . Disponível em <http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-19652002000200001&lng=en&nrm=iso>. Acesso em 14 abr. 2011. doi: 10.1590/S0100-19652002000200001.

ANATEL - Brasil fecha fevereiro com 207,5 milhões de acessos móveis. Disponível em: <http://www.anatel.gov.br/Portal/exibirPortalNoticias.do?acao=carregaNoticia&codigo=22356>. Acesso em: 14 de abril de 2011.

ANDROID – Android Developers. Disponível em: <http://developer.android.com/>. Acesso em: 24 de maio de 2011.

APPLE – iOS Dev Center. Disponível em: <http://developer.apple.com/>. Acesso em: 24 de maio de 2011.

CACHO, Nélio; BATISTA, Thaís; FERNANDES, Fabrício. A Lua-based AOP Infrastructure. J. Braz.

Page 15: FRAMEWORK PARA CONSTRUÇÃO DE APLICAÇÕES COM … · Por ser livre e de código aberto, a linguagem Lua pode ser usada e implementada de qualquer forma, mesmo para fins comerciais

15

Comp. Soc., Campinas, v. 11, n. 3, Abr. 2006 . Disponível em <http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0104-65002006000100002&lng=en&nrm=iso>. Acesso em 14 Abr. 2011. doi: 10.1590/S0104-65002006000100002.

CORONA - Development Tool. Disponível em: <http://www.anscamobile.com/corona/>. Acesso em: 20 de abril de 2011.

FERREIRA, Simone Bacellar Leal; LEITE, Julio Cesar Sampaio do Prado. Avaliação da usabilidade em sistemas de informação: o caso do Sistema Submarino. Rev. adm. contemp., Curitiba, v. 7, n. 2, Jun. 2003 . Disponível em <http://www.scielo.br/scielo.php?script=sci_arttext&pid=S1415-65552003000200007&lng=en&nrm=iso>. Acesso em 20 Abr. 2011. doi: 10.1590/S1415-65552003000200007.

HOPLIII – Conference on History of programming languages. Disponível em: < http://portal.acm.org/citation.cfm?id=1238844&picked=prox&CFID=25947869&CFTOKEN=40183944>. Acesso em: 10 de maio de 2011.

LUA - The Programming Language. Disponível em: <http://www.lua.org/>. Acesso em: 20 de abril de 2011.

MANZANO, José Augusto N. G; OLIVEIRA, Jayr Figueiredo de. Algoritmos – Lógica para Desenvolvimento de Programação de Computadores. São Paulo: Ed. Erica, 2009. 320 p.

MONTEIRO, Silvana Drumond. A forma eletrônica do hipertexto. Ci. Inf., Brasília, v. 29, n. 1, Apr. 2000 . Disponível em <http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-19652000000100003&lng=en&nrm=iso>. Acesso em 09 Maio 2011. doi: 10.1590/S0100-19652000000100003.

W3C - WWW Consortium. Disponível em: <http://www.w3.org/>. Acesso em: 20 de abril de 2011.

XML - eXtensible Markup Language. Disponível em: <http://www.w3.org/standards/xml/>. Acesso em: 20 de abril de 2011.