framework para construÇÃo de aplicaÇÕes com … · e desenvolver ideias antes impossíveis...

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

28 de novembro 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 foram 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 utilizada para a sua interpretação e construção da aplicação. A Seção 3 lista os recursos dos dispositivos móveis que foram utilizados no protótipo. A Seção 4 demonstra a validação da solução proposta. A seção 5 apresenta os trabalhos relacionados. Por fim, na Seção 6 são apresentadas as considerações finais e trabalhos futuros.

1 Artigo elaborado como Trabalho de Conclusão de Curso II 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.

2

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

algumas tecnologias que foram 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 – Exemplo de elementos e atributos em XML

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 (PASCAL, 2011) 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 um 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, a 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

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

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 exibidas por um navegador.

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

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

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 e como estes são utilizados.

A Figura 9 representa o fluxograma de funcionamento do framework. 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, será feita a carga do arquivo na memória, então será realizada a tradução dos comandos XML contidos no arquivo para a linguagem Lua, verificando a sua estrutura e consistência. Por fim, inicia-se a execução do programa realizando a leitura do próximo comando, verificando se é um comando suportado, executando o comando e passando para o próximo comando. Por fim, ao verificar que não existem mais comandos a serem executados, o resultado da execução será demonstrado na tela de acordo com os recursos visuais utilizados.

Figura 9 – Fluxograma do funcionamento geral do framework

3.1 Recursos a serem utilizados no framework 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, foram selecionados alguns desses recursos, considerados como mais importantes, para serem implementados. A Tabela 1 lista quais recursos o framework reconhece 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 framework Recurso Elemento Atributos Variável <var> id Copiar Variável <copy> id1, id2 Carregar Variável <load> id Salvar Variável <save> id Propriedade de Sistema <system> property, var Mensagem de Console <console> var

7

Adição <add> id1, id2, result Subtração <sub> id1, id2, result Multiplicação <mult> id1, id2, result Divisão <div> id1, id2, result Módulo <mod> id1, id2, result Valor Randômico <random> id1, id2, result Decisão <if> id1, comparison, id2 <else> Repetição <for> initial, end <while> id1, comparison, id2 Temporizador <timer> id, delay, loops Procedimento <procedure> name <execute> Evento <touch> id1 <began> <moved> <drag> x, y <ended> Imagem <image> id, file, width, height Retângulo <rect> id, width, height Círculo <circle> id, radius Linha <line> id, x1, y1, x2, y2, size Texto <text> id, size Grupo <group> id Carregar Propriedade de Objeto

<getproperty> id, property, var

Modificar Propriedade de Objeto

<setproperty> id, property

Cor <color> id, name, r, g, b Rotacionar <rotate> Id Interpolar <transition> id, name, time, delay, attribute,

complete Remover <remove> id Executar Som <playsound> id, file, channel, repeat Pausar Som <pausesound> channel Continuar Som <resumesound> channel Parar Som <stopsound> channel Executar Video <playvideo> controls

Os recursos listados foram implementados no compilador Corona utilizando a linguagem Lua. Para que possam ser utilizados pela linguagem XML, foi 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 dentro do elemento denominado “Evento”. Por exemplo, se existir um evento com uma chamada do recurso que executa um som associado a 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.

• 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.

8

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

• Copiar Variável: Este recurso possibilita criar uma cópia do conteúdo de uma variável e atribuir a uma nova variável.

o Id1: Identificador da variável com o valor a ser copiado.

o Id2: Identificador da variável que irá receber o valor copiado.

• 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 Valor informado no elemento: Valor da variável, sendo necessária a utilização de

aspas para valores não-numéricos.

• Propriedade de Sistema: Este recurso permite atribuir informações de sistema a variáveis. o Property: Informação a ser copiada, podendo ser:

§ width: Largura da tela em pixels. § height: Altura da tela em pixels.

§ platform: Nome do Sistema Operacional do dispositivo. § version: Versão do Sistema Operacional.

§ deviceid: Identificador do dispositivo. § name: Nome cadastrado no dispositivo.

§ model: Modelo do dispositivo. § country: País cadastrado no dispositivo.

§ language: Idioma cadastrado no dispositivo. o Var: Identificador da variável que irá receber o valor da propriedade escolhida.

• Mensagem de Console: Com este recurso é possível mostrar mensagens no console do simulador do Corona.

o Var: Identificador da variável que será demonstrada no console. o Valor informado no elemento: Informação textual a ser informada no console.

• Adição: Operação matemática de soma, quando utilizados números, ou operação de concatenação, quando utilizar algum caractere não numérico.

o Id1: Identificador de variável ou valor numérico ou valor textual. o Id2: Identificador de variável ou valor numérico ou valor textual.

o Result: Identificador da variável que receberá o resultado da operação.

• Subtração: Operação matemática de subtração. o Id1: Identificador de variável ou valor numérico ou valor textual.

o Id2: Identificador de variável ou valor numérico ou valor textual. o Result: Identificador da variável que receberá o resultado da operação.

• Multiplicação: Operação matemática de multiplicação.

9

o Id1: Identificador de variável ou valor numérico ou valor textual. o Id2: Identificador de variável ou valor numérico ou valor textual.


• Divisão: Operação matemática de divisão. o Id1: Identificador de variável ou valor numérico ou valor textual.


• Módulo: Sobra da operação matemática de divisão. o Id1: Identificador de variável ou valor numérico ou valor textual. o Id2: Identificador de variável ou valor numérico ou valor textual.


• Valor Randômico: Valor aleatório entre os limites informados.. o Id1: Identificador de variável ou valor numérico ou valor textual.


• Decisão: Comando de decisão lógica. o IF: Teste para decisão.

§ Id1: Identificador de variável ou valor a ser testado.

§ Id2: Identificador de variável ou valor a ser testado. § Comparison: Tipo de teste a ser realizado, podendo ser:

• equal: Verifica se os valores são iguais.

• different: Verifica se os valores são diferentes. less: Verifica se o primeiro valor é menor que o segundo.

• lessorequal: verifica se o primeiro valor é menor ou igual ao segundo.

• greater: Verifica se o primeiro valor é maior que o segundo.

• greaterorequal: Verifica se o primeiro valor é maior ou igual ao segundo.

o ELSE: Execução para resultado negativo.

• Repetição: Comando de repetição lógica progressiva. o FOR: Repetição com limite numérico definido.

§ Initial: Valor numérico para início da contagem. § End: Valor numérico para fim da contagem.

o WHILE: Repetição com teste para encerramento. § Id1: Identificador de variável ou valor a ser testado. § Id2: Identificador de variável ou valor a ser testado.

§ Comparison: Tipo de teste a ser realizado, podendo ser:

• equal: Verifica se os valores são iguais.

• different: Verifica se os valores são diferentes.

10

less: Verifica se o primeiro valor é menor que o segundo.

• lessorequal: verifica se o primeiro valor é menor ou igual ao segundo.

• greater: Verifica se o primeiro valor é maior que o segundo.

• greaterorequal: Verifica se o primeiro valor é maior ou igual ao segundo.

• 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.

• Procedimento: Grupo de comandos a serem executados por chamadas. o Name: Identificador do procedimento. o Valor informado no elemento: Grupo de comandos a serem executados.

• Execução: Executa um procedimento declarado anteriormente. o Valor informado no elemento: Identificador do procedimento a ser executado.

• Toque: Associa um evento de toque a um objeto. o Id1: Identificador do evento. o Valor informado no elemento: Identificador do procedimento a ser executado.

• Início de Toque: Grupo de comandos a serem executados quando é iniciado o toque no objeto.

o Valor informado no elemento: Grupo de comandos a serem executados.

• Movimento de Toque: Grupo de comandos a serem executados toda vez que existir um movimento do usuário.


• Fim de Toque: Grupo de comandos a serem executados quando é finalizado o toque no objeto.


• Carregar objeto: Define se o objeto pode ser carregado nos eixos X e Y. o X: Define se o objeto poderá ser carregado no eixo X. o Y: Define se o objeto poderá ser carregado no eixo Y.

• 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 Width: Largura da imagem. o Height: Altura da imagem.

• Retângulo: Criação de quadriláteros vetoriais. o Id: Identificador do retângulo em formato caractere. o Width: Largura do retângulo. o Height: Altura do retângulo.

11

• Círculo: Criação de círculos vetoriais. o Id: Identificador do círculo em formato caractere. o Radius: Raio do círculo.

• Linha: Criação de linhas vetoriais. o Id: Identificador da linha em formato caractere. 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. o Size: Tamanho do traçado.

• Texto: Criação de textos vetoriais. o Id: Identificador do texto em formato caractere. o Size: Tamanho numérico da fonte. o Valor informado no elemento: Identificador de variável ou valor em formato

caractere.

• Grupo: Agrupador de objetos. o Id: Identificador do grupo.

o Valor informado no elemento: Grupo de objetos a serem parte do grupo.

• Carregar Propriedade de Objeto: Atribuir o valor da propriedade de um objeto a uma variável.

o Id: Identificador do objeto.

o Property: Propriedade do objeto, podendo ser: § x: Valor da posição do objeto no eixo X. § y: Valor da posição do objeto no eixo Y.

§ xScale: Valor da escala do objeto no eixo X. § yScale: Valor da escala do objeto no eixo Y.

§ alpha: Valor da transparência do objeto de 0 a 1. § width: Valor da largura do objeto.

§ height: Valor da altura do objeto. § rotation: Valor em graus da rotação do objeto.

o Var: Identificador da variável que irá receber o valor da propriedade escolhida.

• Modificar Propriedade de Objeto: Alterar o valor da propriedade de um objeto. o Id: Identificador do objeto.

o Property: Propriedade do objeto, podendo ser: § x: Valor da posição do objeto no eixo X.

§ y: Valor da posição do objeto no eixo Y. § xScale: Valor da escala do objeto no eixo X.

§ yScale: Valor da escala do objeto no eixo Y. § alpha: Valor da transparência do objeto de 0 a 1.

12

§ width: Valor da largura do objeto. § height: Valor da altura do objeto.

§ rotation: Valor em graus da rotação do objeto. o Valor informado no elemento: Identificador de uma variável ou valor numérico.

• Cor: Altera a cor de um objeto. o Id: Identificador do objeto. o Name: Nome de uma cor, podendo ser:

§ red: Vermelho. § green: Verde.

§ blue: Azul. § yellow: Amarelo. § pink: Rosa.

§ white: Branco. § gray: Cinza.

§ black: Preto. o R: Identificador de variável ou valor numérico de 0 a 255 para adicionar o tom

vermelho, será ignorado se um nome de cor for informado.

o G: Identificador de variável ou valor numérico de 0 a 255 para adicionar o tom verde, será ignorado se um nome de cor for informado.

o B: Identificador de variável ou valor numérico de 0 a 255 para adicionar o tom azul, será ignorado se um nome de cor for informado.

• Rotacionar: Recurso de rotação de objetos. o Id: Identificador do objeto a ser rotacionado em formato caractere. o Valor informado no elemento: Â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, podendo ser:

§ x: Valor da posição do objeto no eixo X. § y: Valor da posição do objeto no eixo Y. § xScale: Valor da escala do objeto no eixo X.

§ yScale: Valor da escala do objeto no eixo Y. § alpha: Valor da transparência do objeto de 0 a 1.

§ rotation: Valor em graus da rotação do objeto. o Complete: Identificador de procedimento a ser executado após a conclusão da

interpolação.

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

• Executar Som: Recurso de reprodução de arquivos de som em formato MP3.

13

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 Channel: Canal de som de 1 a 32 em formato numérico.

• Continuar Som: Recurso para continuar a execução do som de um canal. o Channel: Canal de som de 1 a 32 em formato numérico.

• Parar Som: Recurso para parar e reiniciar todos os sons que estão sendo executados. o Channel: Canal de som de 1 a 32 em formato numérico.

• Executar Video: Recurso para reprodução de arquivos de vídeo em formato M4V pelo player padrão do dispositivo.

o Controls: Permite a demonstração dos comandos de controle de video. o Valor informado no elemento: Nome do arquivo físico a ser utilizado.

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 framework proposto neste artigo. Para a construção das interfaces gráficas, foi 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 é 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.

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

Para validação deste framework foi trabalhada apenas a execução de um arquivo XML e este foi denominado main.xml onde o código foi 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 pode ser escrito e o resultado esperado no simulador.

14

Figura 11 – Comandos XML transformados em programa

3.3 Configuração e Adaptação de Interfaces O framework proposto foi desenvolvido para atender a diversos tipos e tamanhos de telas de

dispositivos móveis. Como existem inúmeras combinações de tamanho físico e resolução de tela, foram elaboradas duas maneiras de adaptar as interfaces para todos os dispositivos. A primeira solução trata-se de uma configuração de projeto na qual o usuário poderá selecionar qual o tipo de escala de conteúdo a sua aplicação terá ao ser executada. A segunda solução trata-se da criação de objetos auto-adaptáveis que se transformam de acordo com a resolução do dispositivo. A Figura 12 demonstra a diferença entre 3 dispositivos.

Figura 12: Comparativo de telas de 3 dispositivos móveis.

O Corona SDK possui suporte a escalamento dinâmico de conteúdo, o que proporciona a alteraração da escala dos objetos a partir de um tipo definido para o projeto como um todo. Para isso, existe um arquivo denominado config.lua no qual o desenvolvedor pode informar dados como o tamanho do conteúdo em altura e largura na qual o projeto foi elaborado e o tipo de escala. Desta forma, a Figura 13 demonstra um arquivo config.lua, escrito na linguagem Lua, definindo uma aplicação preparada para uma tela com resolução “768x1024” utilizando a escala letterbox para escalamento dinâmico e a Figura 14 demonstra um comparativo entre tipos de escala diferentes.

Figura 13: Exemplo de conteúdo de um arquivo config.lua

15

Figura 14: Comparativo entre os 4 tipos de escalamento dinâmico de conteúdo

Conforme demonstrado na Figura 14, existem quatro tipos de escalamento dinâmico de conteúdo no Corona, o zoomEven, o zoomStretch, o letterbox e nenhum. O tipo de escala denominado zoomEven efetua a ampliação ou redução do conteúdo de igual forma a largura e altura mantendo a proporção original do conteúdo até que pelo menos um dos lados esteja totalmente visível na tela. A escala denominada letterbox efetua a ampliação ou redução do conteúdo da mesma forma que o zoomEven, porém, a escala é ajustada até que todos os lados do conteúdo estejam visíveis na tela. Já a escala denominada zoomStretch efetua a mudança da escala de forma a encaixar o tamanho total na tela podendo haver distorções no conteúdo. Por fim, existe a opção de não efetuar qualquer tipo de redimensionamento, mantendo o tamanho original do conteúdo independente de tela ou resolução.

Os recursos disponibilizados pelo framework proposto permitem a construção de objetos complexos que podem se adaptar dinamicamente de acordo com o dispositivo. Por exemplo, é possível construir um retângulo com largura igual ao tamanho da largura da tela, altura em 10% de acordo com a altura da tela e um texto centralizado, caracterizando assim uma barra de título. Podem ser criados também botões, barras de rolagem, menus, ícones e objetos com programação avançada. Como estes objetos não alteram a estrutura básica do framework e demandam um tempo maior que o disponível para a construção do protótipo, eles não foram desenvolvidos.

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

testes integrados com arquivos XML. Os testes unitários foram realizados de maneira automática com uma classe realizando a execução dos componentes informando parâmetros corretos e incorretos. Já os testes integrados foram realizados a partir de arquivos que utilizaram recursos aleatórios. Além disso, foi 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

16

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.5 Prova de Conceito Ao final do desenvolvimento do protótipo foi realizada uma prova de conceito que compreende a

construção de uma aplicação em XML utilizando diversos recursos do framework. Esta aplicação teve como tema “Carros de Luxo”, e seu propósito será utilizar os recursos do protótipo de acordo com o tema escolhido buscando a satisfação dos mesmos. A aplicação demonstra os seguintes recursos:

• reproduzir vídeo,

• exibir imagem de fundo,

• exibir imagem aleatória rotacionada em quinze graus,

• exibir imagem e texto com deslocamento vertical,

• reproduzir som de fundo repetindo infinitamente,

• exibir galeria de fotos com deslocamento horizontal,

• disponibilizar o conteúdo com sua escala alterada de acordo com a tela do dispositivo,

• exibir na parte inferior da tela um menu com imagens funcionando como botões,

• disponibilizar o protótipo em um iPad, um iPhone e um telefone com sistema Android.

4 VALIDAÇÃO A fim de validar o framework proposto, foi realizada a construção de um protótipo. O

desenvolvimento deste protótipo se deu de acordo com o fluxograma de funcionamento e as funcionalidades descritas na Seção 3, além de ter sido construída a prova de conceito descrita no final da mesma Seção. A Figura 15 demonstra o trecho do código do protótipo, escrito em XML, correspondente a execução de um vídeo após o botão ser tocado. Neste trecho é definido um procedimento que é adicionado ao evento de toque de um botão e que ao final do toque executa a reprodução do vídeo.

Figura 15: Exemplo de código utilizando o framework

O protótipo construído seguiu a lista de itens descrita na prova de conceito da Seção 3.5. Todos os recursos foram satisfeitos e os testes foram realizados com sucesso tendo os resultados esperados. A Figura 16 demonstra a execução do protótipo em simuladores das plataformas iOS e Android. Foi criada uma barra superior com título, uma barra inferior com os botões que efetuam a troca das telas e o conteúdo da primeira tela que é uma imagem com texto tendo deslocamento vertical. As resoluções dos dispositivos simulados são, respectivamente, “640x960”, “768x1024” e “454x800”.

17

Figura 16: Exemplo de execução de software construído com o framework

5 TRABALHOS RELACIONADOS O desenvolvimento de aplicações mobile não é algo novo, já existiam jogos e aplicativos para

celulares antes da chegada dos sistemas iOS e Android. O trabalho realizado por Guedes (2009) revela que na época o principal framework para desenvolvimento de aplicativos para dispositivos móveis era o Java ME, pois permitia a construção de aplicações para a grande maioria dos sistemas mais utilizados nos aparelhos de então. Foi elaborada uma solução que facilitasse a disseminação dos preços dos combustíveis para os clientes de postos por sistema móvel e web.

Os resultados se mostraram satisfatórios, porém, a construção da solução envolveu uma tecnologia complexa e sistemas hoje defasados. Alguns dos sistemas operacionais abordados no trabalho de Guedes não são suportados pelo Corona e, consequentemente, pelo framework proposto neste trabalho. Entretanto, como esses sistemas se tornaram ultrapassados, sendo alguns substituídos, o framework proposto acaba cobrindo grande parte do mesmo público com uma quantidade menor de sistemas suportados. Além disso, a utilização da linguagem de marcação como recurso para escrever os programas facilita na construção de novas aplicações. Portanto, pode-se dizer que atualmente o framework proposto neste trabalho se torna mais interessante para o desenvolvimento de software para dispositivos móveis pela facilidade de implementação e pelo suporte aos sistemas operacionais que estão em voga.

Jogos eletrônicos são uma excelente maneira de testar tecnologias, pois utilizam muitos recursos computacionais sempre buscando prover a diversão para o seu usuário. O trabalho realizado por Araújo (2010) utiliza a mesma plataforma descrita no trabalho anterior para a construção de um jogo para crianças com necessidades especiais. Foi elaborado um jogo voltado para crianças com Síndrome de Dawn onde elas poderiam escolher em um grupo de palavras uma palavra a ser aprendida, que teria sons e destaques visuais para ilustrar tal palavra e facilitar no aprendizado.

Em sua conclusão, Araújo relata a dificuldade no desenvolvimento de jogos em relação aos próprios dispositivos, onde diz “Durante esse trabalho, percebeu-se que o uso de dispositivos móveis é muito pertinente devido à sua mobilidade e portabilidade. Porém foi observado que o desenvolvimento para celulares é bastante restritivo devido às limitações do próprio hardware.”. A tecnologia disponibilizada pelo Corona permite a construção de jogos complexos com rotinas que facilitam a construção de inteligência artificial e simulação de física. Estes recursos podem ser implementados pelo framework proposto neste trabalho, porém, devido a limitação de tempo não seria viável. A utilização desses recursos facilitariam o desenvolvimento de jogos simples e complexos os quais poderiam ser construídos mais rapidamente a partir da linguagem de marcação proposta.

6 CONSIDERAÇÕES FINAIS O mundo hoje está mudando a maneira como se trabalha, estuda e diverte com a tecnologia. Com a

chegada dos smartphones, a Internet e centenas de outras facilidades começam a acompanhar o dia-a-dia de muitas pessoas, sejam elas amantes de tecnologia ou não. A pesquisa da Anatel (ANATEL, 2011) demonstra claramente a criação de um forte mercado impulsionado pelos dispositivos móveis, mais precisamente pelos smartphones. Além disso, os tablets estão aparecendo como uma ótima alternativa aos notebooks e netbooks,

18

por serem mais leves e fáceis de usar. O desenvolvimento de aplicativos para dispositivos móveis, com essa evolução, está se tornando uma área bastante promissora.

Atualmente, os telefones celulares deixaram de ser apenas telefones e se tornaram os “canivetes suíços” da tecnologia. Antigamente os dispositivos eram grandes e possuíam poucos botões, sendo eles o teclado numérico e mais um ou dois botões de configuração, navegação e chamada. As telas eram monocromáticas e os limites de dados eram pequenos, inclusive para agenda de contatos. Com o passar do tempo, esses dispositivos avançaram, diminuindo em tamanho e aumentando em poder de processamento. Eles ganharam sensores de reconhecimento de toque e diversos outros recursos como as conexões Wi-Fi, 3G e Bluetooth. É importante ressaltar que hoje é possível carregar no bolso um aparelho com uma configuração mais avançada e maior performance que os computadores pessoais que tínhamos em nossas casas no início desta década. Além disso, os celulares estão substituindo outros dispositivos como câmeras fotográficas e rádios analógicos.

Um dos grandes desafios para quem está pesquisando para adquirir um aparelho ou até mesmo para quem está pensando em iniciar a trabalhar com dispositivos móveis é a escolha do modelo e da tecnologia. Temos hoje uma grande disputa entre algumas marcas para definir o padrão de sistema para esses dispositivos, cada um com suas características próprias. Por causa disso, a simples aquisição de um aparelho acaba se tornando objeto de estudo aprofundado para entender o que os dispositivos possuem, quais as suas vantagens e desvantagens e qual seria o modelo adequado para as necessidades do usuário. Já para o desenvolvedor vêm a difícil tarefa de escolher a tecnologia a ser estuda para iniciar os estudos e trabalhos. Com isso, essa gama de modelos com sistemas diferentes acaba sendo o “calcanhar de Aquiles” para usuários e profissionais da área.

Em adição ao problema relatado anteriormente, surge um outro empecilho, a escassez de material didático. A criação dos kits de desenvolvimento para os sistemas operacionais que estão em voga é muito recente, por volta do ano de 2008. Por ser um tempo muito curto, são poucos os profissionais que já dominam as tecnologias por questões de oportunidade ou pela dificuldade de encontrar material didático. As empresas disponibilizam a documentação de seus kits, mas em geral são sucintos ou difíceis de entender. Alguns autores lançaram livros, mas da mesma forma como a tecnologia se estabeleceu rapidamente, ela evolui e estes livros se tornam ultrapassados. Para quem está trabalhando na área ou está disposto a iniciar, deve estar sempre preparado para mudanças, senão talvez não consiga acompanhar o andamento da tecnologia.

Pensando em todos os critérios comentados anteriormente, esse artigo descreveu o desenvolvimento de uma ferramenta que facilita o desenvolvimento de aplicações para dispositivos móveis. Por existirem diversos sistemas, um dos requisitos básicos desse trabalho foi a possibilidade de construir, em um só código, programas que possam ser utilizados em diversas plataformas. Para possibilitar a construção desses sistemas de forma rápida e prática, foi utilizada uma linguagem de marcação bastante conhecida, a XML. Praticamente todos os desenvolvedores com alguma experiência profissional já ouviram falar ou já trabalharam com XML, então a adaptação para essa linguagem se torna um processo muito simples. Além disso, existem diversos programas editores de texto que já estão preparados para trabalhar com essa linguagem, o que facilita ainda mais seu aprendizado.

O Corona SDK foi a ferramenta escolhida para a geração das interfaces gráficas. Esse kit de desenvolvimento é bastante completo dispondo de diversos recursos para desenvolvimento, mas devido ao tempo disponível para a criação deste trabalho, foram escolhidos uma pequena quantidade considerada indispensável para a construção de aplicações básicas. Por utilizar um kit de desenvolvimento, existem restrições de aquisição e limitações de recursos implementados pelo kit, porém, os recursos disponíveis cobrem grande fatia das necessidades. Com isso, ele acabou se tornando uma excelente alternativa.

Neste artigo, apresentou-se uma proposta de uma solução para a construção de aplicações multiplataforma utilizando um único código em uma linguagem de marcação de fácil assimilação pelos desenvolvedores. Os recursos implementados são de nível lógico e objetos básicos, permitindo a construção de sistemas com complexidade baixa ou moderada. No entanto, o framework proposto é dependente de um outro framework, sendo necessário um estudo aprofundado para torná-lo independente e facilitar a preparação do ambiente de desenvolvimento.

19

6.1 Trabalhos Futuros Como trabalhos futuros, propõem-se a construção de componentes complexos auto-adaptáveis de

acordo com a descrição feita na Seção 3.3. Além disso, por se tratar de uma linguagem que é interpretada em tempo de execução, é possível a realização de um estudo para a construção de um software de desenvolvimento nos próprios dispositivos móveis em uma interface gráfica amigável e possibilitando o teste imediato sem a necessidade de qualquer compilação e instalação. Outros trabalhos podem realizar o estudo para a construção de interfaces de comunicação entre plataformas diferentes utilizando mensagens construídas de acordo com o framework. Estes estudos procurarão facilitar o desenvolvimento de aplicações para profissionais de diferentes níveis e áreas de conhecimento, possibilitar a integração de sistemas operacionais diferentes, prover maior agilidade no processo de construção de software e permitir a elaboração de sistemas mais complexos. Por se tratar de uma linguagem nova, é válido elaborar uma validação com experimento controlado a fim de verificar ou medir o tempo de construção de uma aplicação com e sem a utilização do framework proposto. Por fim, pode ser realizado o estudo para a implementação de recursos voltados para jogos eletrônicos, facilitando a construção de video games multiplataforma.

6.2 Agradecimentos O autor gostaria de agradecer a contribuição para este trabalho do professor Maurício da Silva

Escobar, que fez diversas sugestões para melhorias no texto e na elaboração da solução; a sua companheira Emanuele Klein, que sempre acreditou e incentivou este trabalho; aos seus pais, Roberto de Oliveira Pereira e Ines Teresinha Rauber Pereira, e seus irmãos, Rodrigo Rauber Pereira e Roberto Rauber Pereira, que sempre apoiaram e estimularam o desenvolvimento deste projeto; a todos amigos e colegas que forneceram valiosas sugestões no decorrer deste trabalho e a instituição de ensino que possibilitou o aprendizado necessário para o autor concluir este artigo.

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.

ARAUJO, Elaine Cristina Juvino. UP - Um Jogo Educativo para Celulares Destinado a Crianças com Síndrome de Down. Inst. Ens. Esp. PA, João Pessoa, v. 1, n. 42, 2010. Disponível em <http://www.fatecjp.com.br/revista/tcc/ddm01.pdf>. Acesso em 21 Nov. 2011.

CACHO, Nélio; BATISTA, Thaís; FERNANDES, Fabrício. A Lua-based AOP Infrastructure. J. Braz. 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.

20

GUEDES, Rhavy Maia. M-Commerce e Geo-Localização para postos de combustíveis: Construção do sistema GAC – Gerenciamento de Abastecimento de Combustível. Inst. Ens. Esp. PA, João Pessoa, v. 1, n. 73, 2009. Disponível em <http://www.fatecjp.com.br/revista/tcc/ddm03.pdf>. Acesso em 21 Nov. 2011.

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.

PASCAL – Pascal Central. Disponível em: <http://pascal-central.com/>. Acesso em: 20 de abril de 2011.

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.

framework para construÇÃo de aplicaÇÕes com … · e desenvolver ideias antes impossíveis...

Documents