sistema na cloud para criaÇÃo e processamento de...

Rio de Janeiro

Março/2014

SISTEMA NA CLOUD PARA CRIAÇÃO E PROCESSAMENTO DE FORMULÁRIOS

ELETRÔNICOS COM OPÇÃO DE USO EM MOBILE ONLINE E OFFLINE

Bruno Barbosa Ramos

Diego Berg Brum

Projeto de Graduação apresentado ao Curso de

Engenharia Eletrônica e de Computação da

Escola Politécnica, Universidade Federal do Rio

de Janeiro, como parte dos requisitos necessários

à obtenção do título de Engenheiro.

Orientador: Sérgio Barbosa Villas-Boas

RIO DE JANEIRO, RJ - BRASIL

MARÇO DE 2014



Bruno Barbosa Ramos

Diego Berg Brum

PROJETO DE GRADUAÇÃO SUBMETIDO AO CORPO DOCENTE DO CURSO DE

ENGENHARIA ELETRÔNICA E DE COMPUTAÇÃO DA ESCOLA POLITÉCNICA DA

UNIVERSIDADE FEDERAL DO RIO DE JANEIRO COMO PARTE DOS REQUISITOS

NECESSÁRIOS PARA A OBTENÇÃO DO GRAU DE ENGENHEIRO ELETRÔNICO E

DE COMPUTAÇÃO.

Examinada por:

Prof. Sérgio Barbosa Villas-Boas, Ph.D.

Prof. Aloysio de Castro Pinto Pedroza, Dr.

Prof. Jorge Lopes de Souza Leão, Dr.Ing.

iii

Ramos, Bruno Barbosa

Brum, Diego Berg

Sistema na Cloud para Criação e Processamento de

Formulários Eletrônicos com Opção de Uso em Mobile Online

e Offline/Bruno Barbosa Ramos, Diego Berg Brum. - Rio de

Janeiro: UFRJ/Escola Politécnica, 2014.

XII, 55 p.: il.; 27,9 cm.


Projeto de Graduação - UFRJ/Escola Politécnica/Curso de

Engenharia Eletrônica e de Computação, 2014.

Referências Bibliográficas: p. 51-52.

1. Formulários Eletrônicos. 2. Sistema na Cloud. 3.

Webservices. 4. Android. I. Villas-Boas, Sérgio Barbosa. II.

Universidade Federal do Rio de Janeiro, Escola Politécnica,

Curso de Engenharia Eletrônica e de Computação. III. Título.

iv

Dedicatória

Dedicamos este trabalho às nossas famílias e em especial aos nossos pais que

sempre nos ajudaram e batalharam para que tivéssemos uma ótima formação. Graças

a eles nos tornamos pessoas educadas e conscientes de nossos deveres.

v

Agradecimentos

Agradecemos aos professores que dedicaram seu tempo para nos passar os

conhecimentos e experiências tão importantes para nossa formação, aos nossos

amigos que compartilharam de nossas horas de estudos e aos nossos familiares que

estavam sempre nos apoiando e estimulando para seguirmos em frente no curso.

Também agradecemos ao povo brasileiro que paga seus impostos, contribuindo

para manter esta Universidade e possibilitando nossa formação.

vi

Resumo do Projeto de Graduação apresentado à Escola Politécnica/UFRJ como parte

dos requisitos necessários para a obtenção do grau de Engenheiro Eletrônico e de

Computação.



Bruno Barbosa Ramos

Diego Berg Brum

Março/2014


Curso: Engenharia Eletrônica e de Computação

Este trabalho descreve o desenvolvimento de um sistema para criação e gerenciamento

de formulários eletrônicos com objetivo de reduzir e simplificar o processo de pesquisa.

Assim, observou-se a necessidade de criar um sistema que pudesse alcançar uma

grande quantidade de pessoas e de rápido acesso. Para atingir os objetivos traçados,

foi desenvolvido um sistema voltado para uso através da internet, com um servidor que

centraliza e processa informações e aplicações que possibilitam a interação dos

usuários com o sistema. Dois aplicativos são disponibilizados aos usuários, um

aplicativo web e um aplicativo Android, sistema operacional para dispositivos móveis.

Para o servidor, criou-se os modelos de dados necessários para manipular formulários

e respostas, além de especificar a comunicação para o fornecimento dos recursos

disponíveis. O projeto dos aplicativos foi voltado para tornar tanto a criação de

formulários quanto a coleta de informações intuitivas e rápidas para os usuários. O

aplicativo Android foi projetado principalmente para a coleta de dados, mas também é

suportada a criação de formulários. A aplicação web possui, além destas

funcionalidades, a exportação dos dados coletados, armazenados no servidor, e a

visualização gráfica de relatórios gerados acerca destes dados. O resultado, ao final da

implementação, é uma ferramenta para realização de pesquisas eficiente e que pode

atender a diversas necessidades.

Palavras-chave: Formulários Eletrônicos, Sistema na Cloud, Webservices, Android

vii

Abstract of Undergraduate Project presented to POLI/UFRJ as a partial fulfillment of the

requirements for the degree of Engineer.

SYSTEM IN THE CLOUD FOR CREATION AND PROCESSING ELECTRONIC

FORMS WITH ALTERNATIVE USE IN MOBILE ONLINE AND OFFLINE

Bruno Barbosa Ramos

Diego Berg Brum

March/2014

Advisor: Sérgio Barbosa Villas-Boas

Course: Electronic and Computer Engineering

This work describes the development of a system for creation and management of

electronic forms in order to reduce and simplify the survey process. Thus, there was a

need to create a system that could reach a lot of people and with quick access. To

achieve the objectives, a geared system was developed for use over the internet, with a

server that centralizes and processes information and applications that allow users

interaction with the system. Two applications are available to users, a web application

and an application for Android, operating system for mobile devices. For the server, was

created the data models needed to handle forms and responses, and specified the

communication for the supply of available resources. The design of applications was

geared to make both the creation of forms and the data collection intuitive and rapid for

users. The Android application was designed to a data collection, but is also supported

the creation of forms. In addition to these features, the web application has the export of

the data collected, stored on the server, and a graphic display of generated reports about

these data. The result, at the end of the implementation, is a tool for performing efficient

surveys and that can handle various needs.

Keywords: Electronic Forms, Cloud System, Webservices, Android

viii

Sumário

1. INTRODUÇÃO ......................................................................................................... 1

1.1. MOTIVAÇÃO ......................................................................................................... 1

1.2. DELIMITAÇÃO ....................................................................................................... 2

1.3. OBJETIVO ............................................................................................................ 2

1.4. DESCRIÇÃO ......................................................................................................... 3

2. FERRAMENTAS E TECNOLOGIAS UTILIZADAS .................................................. 4

2.1. REST .................................................................................................................. 4

2.2. BACKEND ............................................................................................................. 5

2.2.1. Apache Tomcat ............................................................................................ 5

2.2.2. MySQL ......................................................................................................... 5

2.2.3. Hibernate ..................................................................................................... 6

2.3. FRONTEND ........................................................................................................... 6

2.3.1. jQuery e jQuery UI ....................................................................................... 6

2.3.2. Backbone ..................................................................................................... 7

2.3.3. Underscore .................................................................................................. 7

2.3.4. RequireJS .................................................................................................... 7

2.3.5. Highcharts .................................................................................................... 7

2.3.6. Android ........................................................................................................ 8

2.4. DESENVOLVIMENTO ............................................................................................ 11

2.4.1. IDE Eclipse ................................................................................................ 11

2.4.2. StarUML .................................................................................................... 11

2.4.3. MySQL Workbench .................................................................................... 11

2.5. DESENVOLVIMENTO COLABORATIVO .................................................................... 12

2.5.1. Mercurial .................................................................................................... 12

2.5.2. Google Code e Project Hosting .................................................................. 13

3. SERVIDOR ............................................................................................................. 14

3.1. ARQUITETURA .................................................................................................... 14

3.2. MODELOS DE DADOS .......................................................................................... 14

3.3. BANCO DE DADOS .............................................................................................. 16

3.4. RECURSOS ........................................................................................................ 17

4. APLICATIVOS ........................................................................................................ 20

4.1. APLICATIVO ANDROID ......................................................................................... 20

4.1.1. Persistência de dados ................................................................................ 22

4.1.2. Realizando uma coleta............................................................................... 23

4.1.3. Criando um formulário................................................................................ 25

4.2. APLICATIVO WEB ................................................................................................ 27

4.2.1. Interagindo com um formulário ................................................................... 28

4.2.2. Criando um formulário................................................................................ 29

5. ANÁLISE ................................................................................................................ 31

5.1. CASOS DE USO .................................................................................................. 31

5.1.1. Aplicativo Android ...................................................................................... 31

ix

Criar Formulário ............................................................................................................... 31 Adicionar Item .................................................................................................................. 32 Adicionar Opção .............................................................................................................. 32 Excluir Opção .................................................................................................................. 33 Excluir Item ...................................................................................................................... 33 Salvar Formulário ............................................................................................................ 34 Baixar Formulário ............................................................................................................ 34 Realizar Coleta ................................................................................................................ 35 Enviar Coleta ................................................................................................................... 35 Remover Formulário Local .............................................................................................. 36

5.1.2. Aplicativo Web ........................................................................................... 36 Buscar Formulário ........................................................................................................... 37 Realizar Coleta ................................................................................................................ 37 Obter Relatório ................................................................................................................ 38 Exportar Dados ................................................................................................................ 38 Criar Formulário ............................................................................................................... 38 Adicionar Item .................................................................................................................. 39 Adicionar Opção .............................................................................................................. 39 Excluir Opção .................................................................................................................. 40 Excluir Item ...................................................................................................................... 40 Salvar Formulário ............................................................................................................ 40

5.2. TESTES E RESULTADOS ...................................................................................... 41

5.2.1. Criação de formulários ............................................................................... 41

5.2.2. Coleta de dados ......................................................................................... 44

5.2.3. Relatório e Exportação............................................................................... 46

6. CONCLUSÃO ......................................................................................................... 49

6.1. TRABALHOS FUTUROS ........................................................................................ 49

BIBLIOGRAFIA .......................................................................................................... 51

APÊNDICE A.............................................................................................................. 53

EXEMPLO DE DESCRIÇÃO DE UM FORMULÁRIO ............................................................ 53

Representação XML ............................................................................................ 53

Representação JSON .......................................................................................... 54

EXEMPLO DE DESCRIÇÃO DE UMA COLETA .................................................................. 54

Representação XML ............................................................................................ 54

Representação JSON .......................................................................................... 55

x

Lista de Figuras

FIGURA 2.1 - ARQUITETURA ANDROID .............................................................................. 9

FIGURA 2.2 - CICLO DE VIDA DA ACTIVITY ...................................................................... 10

FIGURA 3.1 - ARQUITETURA CLIENTE-SERVIDOR ............................................................ 14

FIGURA 3.2 - MODELO ENTIDADE-RELACIONAMENTO (MER) ........................................... 17

FIGURA 4.1 - ACTIVITY DE CONFIGURAÇÕES DO APLICATIVO ANDROID.............................. 21

FIGURA 4.2 - ACTIVITY PRINCIPAL DO APLICATIVO ANDROID ............................................. 22

FIGURA 4.3 - MODELO ENTIDADE-RELACIONAMENTO DA BASE DE DADOS NO ANDROID ..... 23

FIGURA 4.4 - ACTIVITY COM LISTAGEM DE ITENS DE UM FORMULÁRIO ............................... 24

FIGURA 4.5 - ACTIVITY PARA VISUALIZAÇÃO DE UM ITEM DO FORMULÁRIO ......................... 24

FIGURA 4.6 - ACTIVITY DE INSERÇÃO DE INFORMAÇÕES DO FORMULÁRIO ......................... 25

FIGURA 4.7 - ACTIVITY DE INSERÇÃO DE UM ITEM NO FORMULÁRIO .................................. 26

FIGURA 4.8 - PÁGINA INICIAL DO APLICATIVO WEB ........................................................... 27

FIGURA 4.9 - VISUALIZAÇÃO DE UM FORMULÁRIO NO APLICATIVO WEB .............................. 28

FIGURA 4.10 - ÁREA DE CRIAÇÃO DE FORMULÁRIO NO APLICATIVO WEB ........................... 29

FIGURA 5.1 - DIAGRAMA DE CASOS DE USO NO APLICATIVO ANDROID ............................... 31

FIGURA 5.2 - DIAGRAMA DE CASOS DE USO NO APLICATIVO WEB ...................................... 36

FIGURA 5.3 - VALIDAÇÃO DE INFORMAÇÕES DO FORMULÁRIO NO APLICATIVO WEB ............ 41

FIGURA 5.4 - VALIDAÇÃO DE ITENS DO FORMULÁRIO ....................................................... 42

FIGURA 5.5 - SUCESSO NA CRIAÇÃO DO FORMULÁRIO ..................................................... 42

FIGURA 5.6 - VALIDAÇÃO DE USUÁRIO IDENTIFICADO ....................................................... 43

FIGURA 5.7 - VALIDAÇÃO DE INFORMAÇÕES DO FORMULÁRIO NO APLICATIVO ANDROID ..... 43

FIGURA 5.8 - VALIDAÇÃO DE COLETA NO APLICATIVO WEB ............................................... 44

FIGURA 5.9 - VALIDAÇÃO DE COLETA NO APLICATIVO ANDROID ........................................ 45

FIGURA 5.10 - ENVIO DE COLETAS REALIZADO NO APLICATIVO ANDROID .......................... 46

FIGURA 5.11 - RELATÓRIO DE NÚMERO DE COLETAS POR COLETOR ................................. 47

FIGURA 5.12 - RELATÓRIO PERCENTUAL DE RESPOSTAS ................................................. 47

FIGURA 5.13 - VISUALIZAÇÃO DOS DADOS EXPORTADOS ................................................. 48

xi

Lista de Tabelas

TABELA 3.1 - REQUISIÇÕES HTTP PARA MANIPULAÇÃO DE RECURSOS. ........................... 19

xii

Lista de símbolos ou nomenclatura

ABNT - Associação Brasileira de Normas Técnicas

AJAX - Asynchronous JavaScript and XML

API - Application Programming Interface

AWS - Amazon Web Services

CPU - Central Processing Unit

DOM - Document Object Model

HTML - HyperText Markup Text

HTTP - Hypertext Transfer Protocol

IDE - Integrated Development Environment

Java EE - Java Plataform, Enterprise Edition

JDT - Java Development Tools

JSON - JavaScript Object Notation

JVM - Java Virtual Machine

MDA - Model Driven Architecture

ORM - Object/Relational Mapping

P2P - Peer-to-peer

REST - Representational Stateless Transfer

RPC - Remote Procedure Call

SDK - Software Development Kit

SGBDR - Sistema de Gerenciamento de Banco de Dados Relacional

SOAP - Simple Object Access Protocol

SQL - Structured Query Language

TSV - Tab-Separated Values

UI - User Interface

UML - Unified Modeling Language

URI - Uniform Resource Identifier

URL - Uniform Resource Locator

VM - Virtual Machine

WSDL - Web Services Description Language

XML - eXtensible Markup Language

1

1. Introdução

Este trabalho descreve o desenvolvimento e uso de um sistema para criação e

gerenciamento de formulários eletrônicos, com um processamento estatístico das

informações coletadas. Se pretende viabilizar e agilizar a criação de formulários e o

processo de coleta e tratamento de dados em pesquisas de opinião, ou qualquer outra

aplicação de formulários. Com isso, busca-se reduzir e simplificar o trabalho daqueles

que se utilizam de tais ferramentas.

Na cloud [1], o sistema centralizará o acesso às informações através de um

servidor, disponibilizando aos usuários formulários para preenchimento, reunindo os

dados coletados e produzindo relatórios simples acerca desses dados. Os usuários do

sistema poderão utilizar-se de aplicativos desenvolvidos que simplificam a criação de

formulários e a coleta dos dados, enviando ao servidor as informações necessárias para

realização dos serviços oferecidos. Destaca-se a opção de uso do sistema por

dispositivos mobile, tanto smartphones quanto tablets, com um aplicativo nativo. Isso

tornará possível a coleta offline de informações, as quais serão enviadas para a cloud

em momento posterior a coleta dos dados.

1.1. Motivação

A coleta de informações, tentando antecipar tendências, desejos e opinião das

pessoas sempre foi crucial para o sucesso das organizações. Poucas áreas cresceram

tanto e tão rápido quanto a da informação. O desenvolvimento de técnicas e tecnologia

voltada para este fim é alvo de grande investimento. É com ela que se conhece e se

define os problemas, opiniões e tendências, dando uma visão ampla e específica das

atividades executadas. Avaliando isto, planeja-se o próximo passo a ser dado rumo ao

sucesso de uma organização.

A partir das informações coletadas em pesquisas de opinião, com o uso de um

instrumento eficaz, mas acessível e de baixo custo, para gerenciamento de dados, as

organizações podem otimizar suas necessidades e estratégias de desenvolvimento.

Ainda, transformando o processo de pesquisa totalmente eletrônico, pode-se agilizar a

obtenção de resultados, excluindo etapas desnecessárias e custosas como a impressão

e retorno das informações coletadas para o computador. Isso indica também um

compromisso com a sustentabilidade ambiental, uma vez que permite a redução de uso

e desperdício de papel.

2

1.2. Delimitação

O sistema descrito neste trabalho destina-se às pessoas, tanto físicas quanto

jurídicas, que necessitam coletar informações por meio de consulta pública. A aplicação

deverá ser a mais genérica possível, com o intuito de possibilitar sua utilização com

inúmeros objetivos. Do lado do cliente, um aplicativo para dispositivos móveis surge

como forte opção para atingir o objetivo de coletar informações públicas, visto que tais

equipamentos eletrônicos, têm sua utilização cada vez mais ampla na sociedade e se

encaixam bem na função de coletar dados do público. Smartphones, tablets e

dispositivos semelhantes têm a capacidade de atingir diversas localidades. Integrado a

esses equipamentos, o sistema não será limitado à utilização apenas em ambientes

fechados e com acesso restrito a computadores. Ainda, a realização da coleta das

informações nos formulários poderá ser realizada offline, armazenando os dados

coletados localmente em seu equipamento, e dispensando estar sempre conectado à

internet. A necessidade da conexão com a internet se dá apenas para criação e/ou

procura de um formulário e envio das informações locais para o servidor. Contudo, uma

simples aplicação web torna possível utilizar os serviços oferecidos pelo servidor a partir

de um computador pessoal. Desta forma não se restringe o uso do sistema apenas

àqueles que possuem smartphones e ainda permite ao usuário escolher o meio pelo

qual mais se adequa ou prefere para criar um formulário ou realizar uma coleta. A

diversificação nas formas de uso permite atingir um grande e abrangente número de

usuários, alcançando até lugares de difícil acesso à tecnologia.

1.3. Objetivo

Tem-se como objetivo geral deste projeto desenvolver um sistema capaz de

melhorar e agilizar a realização de pesquisas através de formulários.

De forma mais específica, os objetivos são:

● Desenvolver um servidor, com intuito de armazenar formulários, dados coletados

e produzir relatórios simples acerca destes dados;

● Desenvolver aplicativos, um para web e outro para dispositivos móveis, para que

os usuários possam interagir com o sistema, se comunicando com o servidor e

utilizando suas funcionalidades.

3

1.4. Descrição

No capítulo 2, serão descritas as ferramentas e tecnologias utilizadas na criação

do sistema, tanto no desenvolvimento do sistema do lado do servidor quanto no

desenvolvimento dos aplicativos.

O capítulo 3 apresenta um detalhamento do funcionamento do sistema quanto ao

lado do servidor. São descritos os serviços disponibilizados, a forma de armazenamento

de dados e o tratamento das informações recebidas.

O lado do cliente é detalhado no capítulo 4, onde são abordados os aplicativos

desenvolvidos. Tanto o aplicativo voltado para os navegadores quanto o aplicativo para

dispositivos móveis são apresentados e tem seu funcionamento explicado neste

capítulo.

O capítulo 5 é reservado para a avaliação das funcionalidades do sistema. Os

casos de uso são descritos, assim como apresentados os testes realizados e seus

resultados.

As considerações finais são apresentadas no capítulo 6. São incluídas as

conclusões do trabalho, assim como expostos melhorias e pontos que podem ser

estudados futuramente.

4

2. Ferramentas e Tecnologias Utilizadas

Por se tratar de um projeto acadêmico, as soluções buscadas para implementar o

sistema tem caráter gratuito e/ou open source, visando o menor custo de

desenvolvimento possível.

O sistema pode ser dividido em dois grandes blocos: backend e frontend. O

frontend é a interface de interação com o usuário, onde são realizadas as entradas de

dados, o lado cliente do modelo cliente-servidor. Esses dados são devidamente

processados no backend, o lado servidor. Cada um desses grupos tiveram ferramentas

específicas, utilizadas visando não somente qualidade no desenvolvimento mas

também agilidade e eficiência.

A comunicação entre esses dois blocos ocorre através do Hipertext Transfer

Protocol (HTTP), na forma de requisições e respostas. Na tentativa de tirar melhor

proveito deste protocolo e não ter a necessidade do uso de outras tecnologias como

Remote Procedure Call (RPC), Simple Object Access Protocol (SOAP) e Web Services

Description Language (WSDL), o sistema foi desenvolvido baseado em princípios do

Representational Stateless Transfer (REST).

2.1. REST

O termo REST foi definido por Roy Fielding [2] para descrever um estilo

arquitetural de sistemas hipermídia distribuídos. De acordo com Fielding, “REST é um

estilo híbrido derivado de vários estilos arquiteturais baseados em rede e combinados

com restrições adicionais que definem uma interface de conexão uniforme” (2000, pg.

76).

REST [3] é um estilo de arquitetura para comunicação baseada na web, com

intuito de permitir que clientes possam conversar com servidores de maneira única.

Espera-se que as requisições realizadas contenham todas as informações necessárias

para definir o processamento no servidor, não sendo necessário nenhum tipo de

armazenamento de estados (stateless). Os recursos, elementos de informação,

localizam-se no centro de sistemas RESTful, termo esse utilizado para designar

sistemas que seguem o princípio REST. Neste estilo de arquitetura cada recurso dentro

de um dado servidor é representado unicamente por um identificador uniforme de

recursos (URI) e podem possuir diferentes representações, geralmente em forma de

dados autodescritivos. De forma mais clara, estes recursos podem representar objetos

de dados usando uma variedade de tipos, como Hipertext Markup Language (HTML),

5

eXtensible Markup Language (XML) ou JavaScript Object Notation (JSON). Os recursos

podem ser manipulados por meio de um Uniform Resource Locator (URL) utilizando

operações HTTP padrão, como por exemplo GET, POST, DELETE e PUT.

Usar HTTP como transporte facilita o desenvolvimento de sistemas RESTful, já

que elas usam um protocolo de base bem conhecido e estável. Além de estar

amplamente disponível e dispensar nova configuração para seu uso. Inclui serviços de

Internet como gateways, proxies, entidades de aplicação de segurança e serviços de

armazenamento em cache HTTP.

2.2. Backend

Na parte central do sistema, o servidor Apache Tomcat foi utilizado e é o

responsável por receber requisições, processá-las e enviar uma resposta. As

informações são persistidas no servidor através de um banco de dados, com uso do

MySQL. Caso seja necessário, é este servidor quem consulta as informações

armazenadas ou insere novas informações no banco de dados.

2.2.1. Apache Tomcat

Apache Tomcat [4] é um servidor web HTTP de código aberto, puramente em

Java, desenvolvido pela Apache Software Foundation. Como um container de servlets

o software apenas implementa algumas das especificações do Java Plataform,

Enterprise Edition (Java EE): Java Servlet e Java Server Pages (JSP), duas

especificações essenciais quando se trata de desenvolvimento para web. Por cobrir

importantes tecnologias da web esse servidor é uma opção muito utilizada e uma

solução leve, a qual não demanda muita memória e mantém uma performance boa

mesmo em servidores menores.

2.2.2. MySQL

O sistema de gerenciamento de banco de dados relacional (SGBDR) MySQL [5]

é um dos mais utilizados em banco de dados para aplicações web, dado que exige

pouco processamento. Compatível com diversas linguagens, como PHP, Java,

Python, C#, Ruby e C/C++, está disponível em muitos sistemas operacionais

(diversos sistemas baseados em Unix, Windows e Mac OS). Apesar de possuir uma

versão com licença comercial, a utilizada, MySQL Community Server, é gratuita. Esta

versão tem bom suporte e documentação encontrados na internet. Ainda, é

disponibilizado o MySQL Workbench, um ambiente gráfico que possibilita de forma mais

dinâmica e interativa a criação da base de dados, assim como sua manutenção.

6

2.2.3. Hibernate

Hibernate [6,7] é um software livre de código aberto, em linguagem Java, que

funciona como um framework para mapeamento objeto-relacional (ORM). Com uso de

anotações diretamente no código, facilita a interação de objetos com tabelas e colunas

de uma base de dados relacional, no caso, o banco de dados MySQL, possibilitando

melhor gerenciamento de dados, seja por consultas ou com atualizações dos dados.

Apesar do uso de um banco de dados especifico, por escolha própria, ao utilizar

o framework não limitamos o uso do sistema a esse banco de dados. Isso, pois o

Hibernate permite maior portabilidade a partir do momento em que gera as chamadas

de linguagem de consulta estruturada (SQL) e libera o desenvolvedor de tratar

manualmente os resultados e conversão dos objetos, com um pequeno overhead no

desempenho.

2.3. Frontend

As ferramentas básicas utilizadas para o desenvolvimento do aplicativo web

foram HTML, Cascading Style Sheets (CSS) e JavaScript. Para melhorar e simplificar o

desenvolvimento da interface entre o usuário e o servidor outras bibliotecas, trabalhadas

em cima desta ferramentas básicas, foram incorporadas. O uso de bibliotecas como

jQuery, Backbone, Underscore e RequireJS permitiram estruturar e manipular melhor

os códigos HTML e JavaScript. Ainda, aspectos visuais do aplicativo puderam ser

melhor explorados com o uso de bibliotecas específicas para tais funcionalidades. O

jQueryUI permitiu tornar o uso da aplicação mais interativa e com o Highcharts gráficos

puderam ser inseridos de forma simples.

Para atingir o objetivo de possibilitar o uso do sistema em dispositivos móveis,

um aplicativo voltado para ambiente Android se tornou a melhor opção. Além de possuir

ferramentas de desenvolvimento gratuitas e sem muitas restrições, é uma plataforma

que abrange grande parte do mercado e atinge um público consumidor bastante

diversificado.

2.3.1. jQuery e jQuery UI

jQuery [8] é uma biblioteca JavaScript rápida, pequena e que disponibiliza vários

recursos. Esta interface de programação de aplicações (API) torna processos como

manipular e percorrer documento HTML, tratamento de eventos, animação e

Asynchronous JavaScript and XML (AJAX) mais simples. Funciona com os principais

navegadores.

7

O jQuery UI [9] que é um conjunto de interações de interface de usuário, efeitos,

widgets e temas, produzida em cima da biblioteca jQuery. Auxilia na construção de

aplicações web altamente interativas. Construído para designers e desenvolvedores, é

flexível podendo evoluir com as necessidades de projeto e resolve diversos casos de

uso.

2.3.2. Backbone

O Backbone [10] é um framework JavaScript que oferece elementos, Model, View

e Collection, para melhorar a estrutura de aplicações web, além de meios nativos de

interagir com backends RESTful e JSON.

Utilizando este framework é possível representar dados do servidor como Models

no código JavaScript, dando suporte à validação, exclusão, e gravação no servidor,

apresentar ao usuário o Model através de uma View, que manipula e define callbacks

para eventos do Model em questão e organizar um conjunto ordenado de Model’s com

uma Collection, trazendo diversos métodos úteis para trabalhar com grupo de dados.

A principal vantagem de sua aplicação é ter um código que não inspeciona, nem

depende de todo o Document Object Model (DOM) da aplicação. Também não utiliza

os seletores jQuery ou identificadores (ID’s) dos elementos, para atualizar manualmente

o HTML, já que, aplicando o Backbone, as View’s se manterão atualizadas conforme as

mudanças dos Model’s. Ainda, permite uma boa separação de cada parte do código

JavaScript tornando o código mais modulado, o que facilita sua manutenção.

2.3.3. Underscore

Underscore [11] é uma biblioteca de códigos utilitários voltados, principalmente,

para a manipulação de estrutura de dados. Disponibiliza funcionalidades como map,

select e invoke, além de uma engine de templating que é muito útil. Os scripts ainda

procuram sempre utilizar recursos nativos do navegador e a biblioteca utiliza as

implementações das funções já existentes nos navegadores modernos.

2.3.4. RequireJS

RequireJS [12] é um arquivo JavaScript que possibilita o desenvolvedor modular

e estruturar seus scripts. Seu uso permite otimizar o carregamento de arquivos,

definindo dependências e ordenando a inclusão de cada um deles. Com isso é possível

melhorar a velocidade e a qualidade do código escrito.

2.3.5. Highcharts

Highcharts [13] é uma biblioteca gráfica compatível com a maioria e mais

utilizados browsers atualmente, como Google Chrome, Internet Explorer (a partir da

8

versão 6), Firefox, Safari. Escrito puramente em JavaScript, não necessita de qualquer

plugin extra do lado do cliente ou instalação do lado do servidor. Com a biblioteca,

diversos tipos de gráficos podem ser gerados, por exemplo, linhas, colunas, barras,

pizza. Ainda, disponibiliza opções como zoom e exportação para arquivo de imagem ou

impressão, tudo de forma simples e dinâmica. Para projetos não comerciais, como é

utilizado nesta ocasião, seu uso é gratuito e sob qualquer licença tem código aberto,

permitindo modificações pessoais.

Dados todas suas opções e facilidades se tornou uma ótima escolha de uso na

geração dos gráficos do relatório das coletas de um formulário, feature prevista no

sistema através do aplicativo web.

2.3.6. Android

Android [14] é um sistema operacional baseado no kernel do Linux, desenvolvido

principalmente para uso em dispositivos móveis, como smartphones e tablets. No

entanto, devido sua característica aberta e customizável, não está limitado a esses

dispositivos, podendo ser embarcado em outros eletrônicos. Hoje, amplamente

disseminado, é encontrado em milhões de dispositivos dos mais diversos fabricantes de

hardware, em mais de 190 países [15]. A plataforma foi revelada no final de 2007 pela

Open Handset Alliance [16] como uma plataforma para telefonia móvel com licença open

source. O consórcio, liderado pela Google, inclui fabricantes de dispositivos móveis,

desenvolvedores de aplicativos, operadoras de telefonia móvel e fabricantes de chips.

Sobre o kernel Linux a arquitetura da plataforma Android inclui camadas de

Middleware, API’s escritas em C e aplicações executadas em um framework de

aplicações, que inclui bibliotecas compatíveis com Java. A figura 2.1 ilustra a arquitetura

do Android. Apesar do desenvolvimento com a linguagem Java, os aplicativos não são

compilados em Java bytecode e interpretados em uma máquina virtual Java (JVM). Foi

desenvolvida uma máquina virtual (VM) específica para o Android, a qual é otimizada

para conseguir trabalhar com baixa energia e com memória e unidades de

processamento central (CPU) limitadas, a Dalvik VM. Ao invés do tradicional bytecode

gerado em arquivos de classes .class, um único arquivo .dex (Dalvik Executable),

traduzido dos .class, é executado em uma instância da máquina virtual. O arquivo .dex

é compilado junto a todo o conteúdo necessário para o aplicativo ser executado no

dispositivo em um .apk, o qual será utilizado para instalar o aplicativo nos dispositivos

com a plataforma Android.

9

Figura 2.1 - Arquitetura Android Fonte: Tutorialspoint

O aplicativo desenvolvido neste projeto é baseado apenas em Activities, um

dentre os tipos de componentes possíveis de um aplicativo Android (Activities, Services,

Content provider e Broadcast receivers) [17].

Uma Activity [18] é um componente que provê uma interface com o usuário,

ocupando total ou parcial área da tela, para que o mesmo possa realizar alguma tarefa.

Uma aplicação consiste de uma ou várias activities conectadas, e quando iniciada sua

activity definida como principal é apresentada ao usuário. Toda interface com o usuário

de uma activity é um conjunto de Views, as quais gerenciam um espaço da janela e

podem responder à interação com o usuário.

Com a utilização de diversas activities, é de grande importância conhecer e saber

administrar o ciclo de vida de uma activity que pode ser afetado pela existência de outras

activities, seja do mesmo aplicativo ou de aplicativos instalados no dispositivo. A figura

2.2 ilustra o ciclo de vida e seus métodos associados, que controlam os estados de uma

aplicação. Cada método do ciclo de vida é descrito a seguir:

● onCreate(): O primeiro método executado quando uma activity é criada e

chamado uma única vez no ciclo de vida. É onde são carregados os layouts

estatícos, recursos definidos em XML, e feitas as inicializações necessárias;

● onStart(): Método executado logo antes da activity se tornar visível para o

usuário;

● onResume(): Método executado logo antes de ser iniciada a interação da activity

com o usuário, sempre quando a activity é trazida para o foco;

10

● onPause(): Quando o sistema está prestes a resumir outra activity este método

é chamado para a activity corrente. Aqui as mudanças não salvas em dados

persistentes, interrupções de animações e outras tarefas que demandem

consumo de CPU devem ser tratadas. A continuação da próxima activity só

poderá acontecer quando este método, da activity corrente, for terminado;

● onRestart(): Método chamado quando uma activity está sendo iniciada

novamente, após ter sido parada;

● onStop(): Método chamado assim que uma activity deixa de ser visível para o

usuário, seja devido a sua destruição iminente ou por outra activity estar sendo

retomada ao foco e a activity em questão estar sendo escondida;

● onDestroy(): Este é o método terminal de uma activity, que ocorre antes da

mesma ser destruída. A chamada pode ocorrer devido a activity ter sido

finalizada ou o sistema, para economizar espaço, destrói temporariamente a

instância da activity em questão.

Figura 2.2 - Ciclo de Vida da Activity Fonte: Android Developer

11

2.4. Desenvolvimento

Java é a principal linguagem de programação utilizada no desenvolvimento do

projeto. Com sua escolha foi possível unificar parte do desenvolvimento do frontend,

relacionada ao aplicativo para Android, com o desenvolvimento do backend em um

ambiente único, com uso de uma linguagem comum. Para integrar e agilizar todo o

processo de desenvolvimento do projeto foi utilizado o ambiente de desenvolvimento

integrado (IDE) Eclipse. Ainda, outras ferramentas auxiliaram no desenvolvimento: o

StarUML facilitou na especificação do sistema e seus casos de uso e o MySQL

Workbench permitiu mais interatividade com o banco de dados MySQL.

2.4.1. IDE Eclipse

IDE é um software constituído por um conjunto de funcionalidades que tornam

mais fácil e interativo o processo de construir e manipular softwares, visando maior

produtividade do desenvolvedor.

Um destes softwares é o Eclipse [19], plataforma de desenvolvimento de software

livre extensível, o qual inclui diversas ferramentas de desenvolvimento Java (JDT). O

uso de plugins disponibilizados gratuitamente ainda dá suporte às mais diversas

necessidades do desenvolvedor e tornou possível centralizar interação com servidores,

banco de dados e ferramentas de controle de versão. Para o desenvolvimento Android,

um kit de desenvolvimento (SDK), disponibilizado como plugin, fornece bibliotecas de

API e ferramentas de desenvolvimento necessárias para construir, testar e depurar

aplicativos para Android. Incluindo esses plugins o ambiente de desenvolvimento foi

bem integrado, sendo necessário apenas iniciar o Eclipse para que se pudesse

desenvolver e testar o sistema.

2.4.2. StarUML

StarUML [20] é um software de código aberto projetado para desenvolver

plataformas de Unified Modeling Language (UML) e de Model Driven Architecture

(MDA). O objetivo do projeto deste programa é desenvolver um software de ferramenta

para modelagem que seja um bom substituto para ferramentas UML comerciais.

2.4.3. MySQL Workbench

O MySQL Workbench [21] é uma ferramenta importante para o trabalho com

banco de dados, pois permite manusear uma base de forma mais interativa. É possível

criar diagramas entidade-relacionamento para bases de dados MySQL e ainda pode-se

utilizá-lo para desenhar layout da base de dados ou documentar uma que já exista. Esta

ferramenta simplifica o projeto de banco de dados e sua manutenção, além de permitir

12

visualizar os requisitos e resolver problemas de projeto antes que um grande

investimento de tempo e recursos seja feito.

O Workbench integra ferramentas de administração de banco de dados numa

simples utilização de interfaces gráficas. O console visual permite que os

administradores de banco de dados possam realizar facilmente operações como

configuração de servidores, administração de usuários, exportação e importação, e

visualização de logs. O Editor de SQL visual permite aos desenvolvedores construir,

editar e executar consultas, criar e editar dados, também visualizar e exportar

resultados. Sintaxe com destaque de cores, ajuda sensível ao contexto e auto-completar

ajudam na escrita e depuração de instruções SQL.

2.5. Desenvolvimento Colaborativo

Com o desenvolvimento do projeto sendo realizado em dupla, ferramentas que

possam auxiliar o desenvolvimento colaborativo são essenciais. Apesar das tarefas na

codificação serem bem definidas, quanto a responsabilidade de cada desenvolvedor

envolvido, se mostra de grande importância possibilitar que um possa ajudar no trabalho

do outro, sempre visando o bom andamento do projeto e a troca de conhecimento. Para

que isso fosse possível foi utilizado um sistema de controle de versão, Mercurial,

integrado em um ambiente de desenvolvimento colaborativo, disponibilizado através do

Project Hosting do Google Code.

2.5.1. Mercurial

O Mercurial [22], ou também conhecido por simplesmente Hg (símbolo químico do

mercúrio), é um sistema distribuído de controle de versão, com licença gratuita de uso.

Este segue uma arquitetura ponto-a-ponto (P2P), ou seja, vários repositórios autônomos

e independentes, um para cada desenvolvedor.

O controle de versões apoia o desenvolvimento nos seguintes aspectos:

● Histórico: Registra toda a evolução do projeto, cada alteração sobre cada

arquivo. É possível saber quem realizou as alterações, quando e em que parte

do código. Além disso, permite retornar para uma versão específica do arquivo

caso necessário.

● Colaboração: Possibilita vários desenvolvedores trabalharem em paralelo no

mesmo arquivo sem que um sobrescreva o código do outro.

● Variações no Projeto: Mantém linhas diferentes de evolução do mesmo projeto.

Por exemplo, mantendo uma versão 1.0 enquanto a equipe de desenvolvimento

prepara uma versão 2.0.

13

O Mercurial foi escolhido com o objetivo de gerenciar o código do projeto, evitando

que problemas ocorram por descuido, como perder alterações feitas, além de facilitar o

trabalho de desenvolvimento em equipe.

2.5.2. Google Code e Project Hosting

O Google Code [23] é uma área disponibilizada pela empresa Google direcionada

aos desenvolvedores. Um de seus serviços é a hospedagem de projetos, através do

Project Hosting, o qual fornece um ambiente de desenvolvimento colaborativo para

projetos de código aberto. De forma simples, rápida, confiável e escalável, cada projeto

possui seus próprios controles de membros, repositório com diferentes sistemas de

controle de versão cambiáveis (Subversion, Mercurial ou Git), ferramenta de controle de

tarefa (issue tracker) e páginas para documentação (wiki). O projeto hospedado pode

ser acessado em https://code.google.com/p/geform/.

https://code.google.com/p/geform/

14

3. Servidor

Os detalhes no desenvolvimento do servidor são apresentados neste capítulo.

Serão consideradas as etapas de projeto do banco de dados, forma que serão

guardados os dados enviados, e especificação da comunicação entre o servidor e as

aplicações web e Android.

3.1. Arquitetura

O sistema é baseado na arquitetura cliente-servidor. Esta arquitetura, distribui as

tarefas entre os fornecedores de um recurso ou serviço, servidores, e os usuários dos

serviços, clientes.

Os clientes serão representados pelas aplicações que utilizam os serviços para

criar os formulários, fazer entrada de dados obtidos e gerar os relatórios acerca destes

dados. Já o servidor executa requisições de serviços no banco de dados e retorna os

resultados destes ao cliente. A utilização dessa arquitetura para a implementação do

sistema atende bem aos requisitos que definimos para nosso projeto (figura 3.1).

Figura 3.1 - Arquitetura Cliente-Servidor Fonte: Wikipedia Commons

3.2. Modelos de dados

As duas principais entidades de todo o sistema são os formulários e as coletas

referentes a um determinado formulário. Cada uma possui uma modelagem particular,

mas interligadas, e estão descritas a seguir.

O formulário foi pensado com sua descrição em formato XML. Cada formulário

construído no sistema deve conter informações básicas obrigatórias para ser válido.

Todo formulário criado deve conter: um identificador único associado pelo servidor no

15

momento de criação, um criador, uma data de criação (também inserida pelo servidor

no momento da criação), um título e pelo menos um item, o qual será explicado em

seguida. Opcionalmente, é possível incluir uma descrição para o formulário de forma

que se explique do que se trata o formulário em questão. A modelagem de um formulário

deve ser algo como:

<form>

<id>$identificador</id>

<creator>$criador</creator>

<timestamp>$data_de_criação</timestamp>

<title>$título</title>

[<description>$descrição_opcional</description>]

<item>...</item>

… //quantos itens forem necessários

</form>

Um item, por sua vez, representa um componente de um formulário que deve

receber uma resposta, obrigatoriamente, quando realizada a coleta de dados. Assim

como o elemento formulário, cada item tem um identificador único ao qual é associado

no momento de sua criação no servidor e que o diferencia dos outros itens. Todo item

deve conter uma pergunta, questão ou algo que permita definir o que o usuário está

respondendo naquele item. Três tipos de itens são suportados pelo sistema: texto,

escolha única e múltipla escolha. O modelo do item segue o padrão:

<item type=$tipo>


<question>$pergunta</question>

<options> //caso o tipo admita opções

… //opções disponíveis

</options>

</item>

Caso o item seja de escolha, simples ou múltipla, pelo menos duas opções devem

ser inseridas. Cada opção contém um identificador e o valor da opção, valor esse que é

mostrado ao usuário:

<option>


<value>$valor</value>

</option>

Assim como para o formulário, foi pensado um modelo que representa os dados

adquiridos pelo preenchimento de um formulário, a coleta. Mais simples que o elemento

formulário, o elemento coleta deve conter as seguintes informações: o identificador do

formulário o qual faz referência, o nome de quem está realizando a coleta e a resposta

de cada item em sequência, de acordo com a disposição dos itens no formulário de

referência. O padrão do modelo de uma coleta é:

16

<collection>

<form>$identificador_do_formulário_de_referência</form>

<collector>$quem_está_coletando_os_dados</collector>

<item>...</item>

...

</collection>

No caso de uma coleta, o elemento item deve conter a resposta para o item

correspondente no formulário. Caso o item seja do tipo que possui opções, a resposta

inserida deve ser o valor da opção, podendo ter mais de uma resposta inserida caso

seja de múltipla escolha.

<item>

<answer>$resposta</answer>

[<answer>$outra_resposta</answer>] //caso seja múltipla

escolha

</item>

No Apêndice A é possível visualizar o exemplo de um modelo completo de

formulário, contendo itens dos três tipos, assim como um modelo de uma coleta para o

formulário exemplificado. Ainda, para cada modelo, tanto de formulário quanto de coleta,

também são exemplificadas suas representações alternativas, em JSON.

3.3. Banco de Dados

Utilizou-se o sistema de gerenciamento de banco de dados relacional MySQL, um

banco de dados que permite uma maior compatibilidade e fácil implementação.

O modelo de entidade-relacionamento (MER), ilustrado na figura 3.2, mostra a

estrutura do banco de dados, o qual suporta a persistência das classes definidas para

o sistema. Foram separadas as entidades ligadas a criação de um formulário das

relacionadas a resposta com objetivo de deixar mais clara esta distinção e entendimento

do modelo.

17

Figura 3.2 - Modelo Entidade-Relacionamento (MER)

O modelo do banco de dados foi bastante discutido, a fim de se obter a maior

flexibilidade e independência das entidades. A modelagem foi feita de forma a

possibilitar o reaproveitamento de partes de formulários anteriores, como itens ou até

opções, procurando poupar trabalho repetitivo. Analisando o MER pode-se notar que

um item pode estar em mais de um formulário, assim como uma opção pode estar em

mais de um item.

3.4. Recursos

O servidor, como um fornecedor de recursos, está ligado aos seguintes recursos:

Formulário: Este recurso representa o modelo de um formulário, conforme

descrito anteriormente.

18

Coleta: Este recurso representa o modelo de uma coleta, conforme

descrito anteriormente.

Relatório: Este recurso disponibiliza um levantamento quantitativo das

respostas obtidas para um dado formulário. No relatório estão contidas

informações de quantas coletas no total foram realizadas para aquele

formulário, quem realizou as coletas e por quantas cada um foi responsável

e para cada item que contém opções, quantas respostas foram dadas para

cada opção. Vale ressaltar que itens do tipo texto não geram entradas no

relatório, já que não podem ser quantificadas.

Exportação: Este recurso disponibiliza todas as coletas realizadas para um

formulário em um arquivo texto com os valores separados por tab (TSV).

Com esse arquivo é possível importar os dados coletados em programas

de gerenciamento de planilhas, como o Excel, e realizar um relatório

customizado, possivelmente mais completo que o disponibilizado pelo

sistema.

A interação com os recursos disponibilizados pode ser realizada através de

requisições HTTP, de acordo com a definição na tabela 3.1.

19

Tabela 3.1 - Requisições HTTP para manipulação de recursos.

URI Método

HTTP

Descrição

/rest/forms POST Criação de um formulário. As informações

enviadas, descrevendo o formulário, são

cadastradas no banco de dados. O id do novo

formulário é retornado como resposta para que

possa ser localizado posteriormente.

Media types: application/xml, application/json

/rest/forms/{id} GET Obtenção do formulário especificado.

(p. ex.: /rest/forms/1)


/rest/forms/{id} POST Adição de uma nova coleta para o formulário

especificado no banco de dados.

(p. ex. /rest/forms/1)


/rest/forms/{id}/report GET Geração do relatório básico acerca dos dados

coletados e armazenados na base para o

formulário especificado.

(p. ex. /rest/forms/1/report)

Media types: application/json

/rest/forms/{id}/export GET Exportação das coletas armazenadas na base,

referentes ao formulário especificado.

(p. ex. /rest/forms/1/export)

Media types: text/tab-separeted-values

20

4. Aplicativos

Do lado do cliente, dois aplicativos foram desenvolvidos para que o usuário possa

interagir com o sistema: um aplicativo que roda em ambiente Android e outro para ser

utilizado em computadores, através de um browser. Em ambos, estão disponíveis

funcionalidades como criação de um formulário e a realização de coletas de dados. No

entanto, apenas no aplicativo web é possível visualizar o relatório e obter todos os dados

coletados de um formulário. Planeja-se dessa forma ter o aplicativo web como principal

ferramenta de gerenciamento do formulário, com o aplicativo Android com principal

função, mas não limitado, a realização de coletas.

O aplicativo Android expande a área de utilização do sistema, visto que possibilita

seu uso, com possíveis limitações, em qualquer lugar. Não é necessário acesso à

internet para realizar a coleta de dados caso o formulário já tenha sido baixado

previamente e esteja armazenado no dispositivo. Isso mostra ser seu diferencial.

4.1. Aplicativo Android

O aplicativo GeForm para Android pode ser instalado em qualquer dispositivo

móvel que rode a plataforma Android com versão mínima suportada 2.3, Android

Gingerbread. A instalação apenas pede permissão para ter acesso à rede, o que

permitirá que o aplicativo se conecte com o servidor para troca de dados.

O aplicativo possui seis activities:

GeForm é a activity principal e por isso leva o nome do sistema. O

aplicativo é iniciado nessa activity;

Duas activities Fill, em uma são listados os itens de um formulário

específico e na outra é feita a visualização de um item desse formulário;

Edit Form é a activity inicial de criação de um formulário, onde são inseridos

os campos de título e descrição, e listados os itens inseridos naquele

formulário;

Edit Item é a activity de criação de um item para ser inserido no novo

formulário;

A activity Settings é utilizada para realizar a configuração do aplicativo;

Ao iniciar o aplicativo é verificado se nas configurações está definido o nome do

usuário. Caso ainda não tenha sido inserido, uma caixa de diálogo é aberta para indicar

essa necessidade. Duas opções são dadas ao usuário, entrar nas configurações (figura

4.1) onde poderá ser inserido o nome de quem está utilizando o aplicativo ou

21

simplesmente continuar o uso do aplicativo sem realizar as configurações necessárias,

porém restringindo as funcionalidades as quais terá acesso. Mesmo sem configuração

ainda é possível fazer o download de formulários e realizar coletas.

Figura 4.1 - Activity de configurações do aplicativo Android

Na activity principal do aplicativo, o usuário tem disponível as seguintes opções:

Baixar um formulário do servidor;

Enviar coletas pendentes para o servidor;

Criar um formulário;

Configurar o aplicativo;

Para se baixar um formulário, seu identificador único deve ser informado. Se a

ação for realizada com sucesso, o arquivo que descreve o formulário será baixado do

servidor, armazenado internamente no dispositivo e criada uma entrada no banco de

dados local. Este formulário ficará acessível na listagem de formulários. Todos os

formulários disponíveis no dispositivo móvel são listados na activity principal, com

informações do título e de quantas coletas foram realizadas no dispositivo, além de

quantas destas coletas ainda precisam ser enviadas para o servidor. A figura 4.2

apresenta a activity principal do aplicativo.

22

Figura 4.2 - Activity principal do aplicativo Android 1-Enviar coletas; 2-Baixar formulário

Através de um clique longo em um dos formulários são mostradas suas

informações, o que torna mais fácil a diferenciação e identificação de um formulário

específico caso existam muitos armazenados localmente e possivelmente existam dois

ou mais com o mesmo título. Nesta mesma visualização é disponibilizada a opção de

deletar o formulário do dispositivo, excluindo seu arquivo XML e removendo as entradas

no banco de dados referentes ao formulário e a todas as coletas feitas no dispositivo,

mesmo que ainda não tenham sido enviadas para o servidor.

4.1.1. Persistência de dados

Para tornar o aplicativo menos dependente da comunicação com o servidor, e

tornar possível seu uso offline, é necessário persistir as informações importantes

transmitidas quando realizada alguma interação com o servidor. Após baixar um

formulário, o arquivo descrevendo suas informações em formato XML é armazenado em

uma pasta interna do aplicativo e visível apenas para ele. Além disso, o banco de dados

com suporte nativo no Android, o SQLite, também é utilizado para persistir informações.

O SQLite é um banco auto-contido, compacto e de bom desempenho, consumindo

poucos recursos do sistema.

A base de dados criada no dispositivo é simplificada em relação ao existente no

servidor e possui apenas duas tabelas, Forms e Collections. A tabela Forms contém as

informações do identificador e do título de cada formulário armazenado no dispositivo.

Através do identificador é possível saber qual arquivo buscar na pasta com os

23

formulários baixados do servidor. A tabela Collections armazena as coletas realizadas

no dispositivo e possui as informações de: identificador do formulário (chave estrangeira

que está relacionada com a tabela Forms, garantindo que existam coletas apenas para

formulários existentes e cadastrados nesta tabela), número da coleta usado para

quantificar quantas foram realizadas para um dado formulário, número que identifica a

posição do item dentro de um dado formulário, resposta em si e indicação se a coleta já

foi enviada para o servidor. Para o campo resposta, caso o item seja restrito à opções,

o valor armazenado é o índice da opção dentro da lista de opções do item que está

sendo respondido. Na figura 4.3 são apresentadas as tabelas descritas do banco de

dados do dispositivo Android e seus relacionamentos.

Figura 4.3 - Modelo Entidade-Relacionamento da base de dados no Android

4.1.2. Realizando uma coleta

Um clique simples em um dos formulário o abre para realização de uma coleta.

Isso permite também, caso se queira, simplesmente visualizar seus itens. A activity

aberta lista todos os itens do formulário (figura 4.4).

24

Figura 4.4 - Activity com listagem de itens de um formulário 1-Finalizar coleta de dados

Deve-se clicar sobre uma das perguntas para abrir sua visualização e poder inserir

ou editar a resposta para aquele item. A figura 4.5 ilustra a activity para a visualização

de um item.

Figura 4.5 - Activity para visualização de um item do formulário 1-Voltar para listagem de itens

Dentro de um item específico é possível mudar para o próximo ou voltar para o

anterior através do movimento de swipe horizontal (pressionando a tela e a arrastando

25

horizontalmente). Outra forma de alterar a visualização de um item é voltar para a

listagem de itens através da opção disponibilizada e escolher o item que se deseja

visualizar/responder. O botão “voltar” do dispositivo, se utilizado no contexto de

visualização de um item, descarta a resposta inserida no item corrente e retorna para a

listagem de itens.

Com todos os itens respondidos, basta selecionar a opção de concluir uma coleta,

localizada na activity Fill com a listagem de itens. As respostas dadas para o formulário

serão salvas no banco de dados local e o usuário direcionado para a activity principal,

onde pode iniciar uma nova coleta ou enviar para o servidor as coletas pendentes

armazenadas no dispositivo. O envio somente poderá ser realizado caso o usuário tenha

se identificado, através das configurações do aplicativo.

4.1.3. Criando um formulário

Para criar um formulário é obrigatório ter configurado o nome do usuário do

aplicativo. Quando clicado na opção de criação, a activity EditForm é aberta tornando

possível a inserção do título do formulário e caso se deseje uma descrição (figura 4.6).

Ainda, são listados todos os itens inseridos no novo formulário. É possível selecionar

um dos itens para editá-lo ou, com um clique longo, removê-lo do formulário.

Figura 4.6 - Activity de inserção de informações do formulário 1-Finalizar criação; 2-Inserir novo item

Selecionando a opção de inserir um novo item, a activity EditItem é aberta para

realizar a tarefa (figura 4.7). Nessa activity, uma pergunta deve ser inserida e o tipo do

26

item deve ser escolhido. Os tipos disponibilizados são: texto, para itens que tem

respostas “livres”, escolha única, para itens que tem uma lista de opções predefinidas

das quais o usuário pode escolher apenas uma, ou múltipla escolha, semelhante ao tipo

escolha única mas possibilitando que o usuário possa escolher mais de uma opção

como resposta.

Figura 4.7 - Activity de inserção de um item no formulário 1-Concluir inclusão de novo item; 2-Inserir opção

Por padrão, o tipo do item é o de texto e caso seja alterado para escolha única ou

múltipla escolha as opções que poderão ser escolhidas deverão ser inseridas. As

opções criadas serão listadas na parte de baixo da activity e podem ser editadas se

selecionadas. Para remover uma opção basta realizar um clique longo sobre o item que

se deseja remover e confirmar a remoção.

A conclusão da criação de um formulário envia os dados inseridos para o servidor

para que o mesmo concretize a criação do formulário. É obrigatório inserir o título e pelo

menos um item para que se possa tentar concretizar a criação do formulário. Se criado

com sucesso, no servidor será definido um identificador único para o formulário, para

que o mesmo possa ser baixado posteriormente por outros usuários, e o formulário é

armazenado localmente, ficando disponível para realização de coletas.

27

4.2. Aplicativo Web

O aplicativo GeForm em sua versão web é desenvolvido para ser usado online.

Permite ao usuário criar formulários, coletar dados com o preenchimento de um

formulário, consultar relatórios básicos acerca dos dados coletados e baixar todos os

dados coletados de um determinado formulário. Qualquer pessoa conectada à internet

é um usuário em potencial do sistema, com acesso irrestrito a qualquer formulário e

informações relacionadas.

A página inicial do aplicativo, apresentada na figura 4.8, disponibiliza uma área

onde é possível buscar ou criar um formulário.

Figura 4.8 - Página inicial do aplicativo web 1-Campo de busca; 2-Botão de busca; 3-Botão de criação

A busca é realizada através do identificador do formulário, informação essa que o

diferencia de todos os outros formulários existentes. De posse desta informação, basta

inseri-la no campo de busca e clicar no botão de buscar, ou pressionar a tecla “Enter”,

para que o formulário desejado seja requisitado no servidor. Caso o formulário

requisitado exista, suas informações são mostradas ao usuário. O campo de busca

continua disponível para que uma nova consulta possa ser realizada, substituindo o

formulário visível pelo novo formulário desejado. Ainda, com o formulário definido e suas

informações em tela, ficam disponíveis as funções de coleta, geração de relatório e

exportação de dados (figura 4.9).

28

Figura 4.9 - Visualização de um formulário no aplicativo web 1-Gerar relatório; 2-Exportar dados

4.2.1. Interagindo com um formulário

Inicialmente, definido e encontrado o formulário de interesse, os itens do

formulário podem apenas ser visualizados, como em um modo read-only. Para que se

possa preenchê-lo é necessário ativar o modo coleta. Quando se está nesse modo, os

campos de preenchimento dos itens se tornam editáveis, tornando possível a tomada

de dados. Ainda, um campo para identificar quem está se responsabilizando pela coleta

dos dados é mostrado junto aos itens do formulário e deve ser preenchido antes do

envio das informações para o servidor. Todos os itens devem conter uma resposta para

que a coleta seja válida para envio ao servidor. Após terem sido enviadas com sucesso,

indicando que as informações coletadas foram armazenadas no servidor, as repostas

inseridas para cada item são apagadas do formulário, permitindo que uma nova coleta

seja realizada.

Selecionando a opção de relatório, é requisitado ao servidor a realização de uma

análise básica e quantitativa dos dados coletados de um formulário, armazenados no

servidor. Os resultados dessa análise são representados em diferentes gráficos. Em um

gráfico de barras verticais são apresentadas as quantidades de formulários preenchidos

por coletor participante na coleta de dados de um formulário. Excetuando itens do tipo

texto que não são representados no relatório gerado, para cada item um gráfico de

setores, ou mais conhecido como gráfico de pizza, é criado com a representação das

proporções de cada resposta.

A opção de exportação dos dados resulta, quando existem dados coletados para

o formulário, em um arquivo para download. Após salvo em um local no computador do

29

usuário, o arquivo pode ser importado em um programa de gerenciamento de planilhas

instalado no computador, dado que o arquivo está no formato TSV.

4.2.2. Criando um formulário

Ao clicar para criar um formulário, o usuário é direcionado para a área onde são

apresentados os componentes disponíveis e necessários para a criação de um

formulário.

Devem ser inseridos um título para o novo formulário e o usuário que o está

criando. Opcionalmente, uma breve descrição do que se trata o formulário pode ser

inserida. Deve existir pelo menos um item no formulário para que o mesmo possa ser

considerado válido para ser criado. A figura 4.10 apresenta a área de criação de

formulários.

Figura 4.10 - Área de criação de formulário no aplicativo web 1-Item válido; 2-Remover item; 3-Remover opção

O usuário pode inserir itens de qualquer um dos três tipo disponibilizados e

suportados pelo sistema: texto, escolha única e múltipla escolha. Ao selecionar um tipo

de item a ser adicionado, cria-se um componente na lista de perguntas. Este

componente representa um item, e com isso possui um campo onde deve ser inserido

a questão a qual deverá ser respondida. Caso seja do tipo escolha única ou escolha

múltipla, as opções também devem ser criadas. Mesmo após ter sido inserido, um item

específico pode ser excluído selecionando a opção de remoção existente no

componente. O mesmo pode ser feito para uma opção específica do item. Os itens

inseridos podem ser reordenados durante a criação do formulário. Para isso, basta

selecionar um item e reposicioná-lo com a ação de drag-and-drop (pressionar o mouse

sobre o item e arrastar até a posição de interesse). Caso o item esteja pronto, ou seja,

30

sua criação é válida, seu status será mostrado como ok. No entanto, caso não seja

válido e se tente salvar o formulário, o status do item será de erro, gerando uma

indicação em vermelho em seu componente, o que permite sua localização facilmente.

Com o formulário montado e devidamente validado, este pode ser enviado ao

servidor para concretizar sua criação. Se a criação for realizada com sucesso, o novo

formulário será mostrado ao usuário que o criou. O criador do formulário deve guardar

o identificador do novo formulário para futuras consultas ou divulgação para sua equipe

de coletores, para que possam localizar o formulário que devem utilizar para realizar a

coleta de dados.

31

5. Análise

Este capítulo é reservado para fazer a descrição e avaliação mais detalhada com

relação a utilização do sistema. Neste capitulo será feita a definição dos casos de uso

intrínsecos, apresentados os testes realizados e seus resultados.

5.1. Casos de Uso

Os casos de uso apresentam a utilização das funções do sistema, descreve de

forma ampla e simples estas funções detalhando o uso dos aplicativos para cada um

dos ambientes.

5.1.1. Aplicativo Android

A figura 5.1 ilustra o diagrama de casos de uso para o aplicativo Android. Os casos

de uso são detalhados em sequência.

Figura 5.1 - Diagrama de casos de uso no aplicativo Android

Criar Formulário

Atores:

Usuário

Pré-condição:

Usuário deve rodar o aplicativo em seu dispositivo e configurar.

Casos de Uso Associados:

Adicionar Item e Salvar Formulário.

32

Fluxo de Eventos:

1. O caso de uso inicia apertando o botão de menu e escolhendo a opção

“Create Form”.

2. Usuário preenche o título e opcionalmente a descrição.

3. Adiciona itens apertando o menu e escolhendo “Add Item”, deve haver

no mínimo 1 item.

4. Caso de uso encerrado após salvar formulário.

Pós-condição:

O formulário criado foi salvo no servidor e colocado na lista local do

dispositivo.

Adicionar Item

Atores:

Usuário

Pré-condição:

Usuário deve ter optado por criar um formulário.


Criar Formulário, Adicionar Opção, Excluir Item e Salvar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia apertando o botão menu e escolhendo “Add Item”.

2. Usuário preenche o texto da questão e escolhe o índice.

3. Escolhe um tipo para a pergunta.

4. Caso seja um item de escolha, aperte o menu e clique em “Add Option”.

5. Terminado o preenchimento, deve-se apertar o menu, em seguida, “OK”.

6. Caso de uso encerrado.

Pós-condição:

Listado um novo item na criação do formulário.

Adicionar Opção

Atores:

Usuário

Pré-condição:

Usuário deve ter optado por adicionar um item do tipo escolha.


Adicionar Item e Excluir Opção.

Fluxo de Eventos:

1. O caso de uso inicia apertando o botão menu e escolhendo “Add Option”.

2. Abre uma caixa de texto.

33

3. Usuário preenche o texto da opção, após isso, clica em “OK”. Deve ter 2

opções no mínimo.


Pós-condição:

Listada uma nova opção na criação do item.

Excluir Opção

Atores:

Usuário

Pré-condição:

Usuário deve ter adicionado uma opção.


Adicionar Opção.

Fluxo de Eventos:

1. O caso de uso inicia com um clique longo sobre a opção a ser excluída.

2. Visualiza-se uma caixa de escolha, após isso, escolher “OK”.

3. Opção correspondente ao clique longo é excluída.


Pós-condição:

Opção correspondente ao clique longo foi retirada da lista de opções do item.

Excluir Item

Atores:

Usuário

Pré-condição:

Usuário deve ter adicionado um item.


Adicionar Item.

Fluxo de Eventos:

1. O caso de uso inicia com um clique longo sobre o item a ser excluído.

2. Visualiza-se uma caixa de escolha, após isso, escolher “OK”.

3. Item correspondente ao clique longo é excluído.


Pós-condição:

Item correspondente ao clique longo foi retirado da lista de itens do

formulário.

34

Salvar Formulário

Atores:

Usuário

Pré-condição:



Criar Formulário, Adicionar Item, Realizar Coleta e Remover Formulário

Local.

Fluxo de Eventos:

1. O caso de uso inicia apertando o botão menu e escolhendo “OK”.

2. Verifica se os requisitos para criação de um formulário foram atendidos.

3. Caso positivo, as informações do formulário são enviadas ao servidor

4. Feito isso, o formulário é listado para uso no dispositivo.


Pós-condição:

As informações do formulário foram salvas no servidor e formulário

disponível para uso no dispositivo.

Baixar Formulário

Atores:

Usuário

Pré-condição:



Realizar Coleta e Remover Formulário Local.

Fluxo de Eventos:

1. O caso de uso inicia clicando no ícone localizado no canto superior direito

referente ao download do formulário.

2. Surge uma caixa de texto, onde precisa colocar o identificador de um

formulário existente no servidor.

3. Uma vez encontrados e obtidos os dados do formulário indicado, este é

colocado na lista de formulários para uso do dispositivo.


Pós-condição:

Formulário escolhido está na lista de formulários para uso do dispositivo.

35

Realizar Coleta

Atores:

Usuário

Pré-condição:

Usuário deve baixar um formulário com identificador existente ou ter criado

um formulário por seu dispositivo.


Baixar Formulário, Salvar Formulário e Enviar Coleta.

Fluxo de Eventos:

1. O caso de uso inicia com o clique no formulário que se pretende usar.

2. Usuário clica na pergunta a ser respondida e passa para outra

pressionando a tela e arrastando horizontalmente.

3. Usuário responde todas questões do formulário.

4. Terminado o preenchimento, deve-se apertar o menu, em seguida,

“Items List” e Apertar novamente o botão menu, em seguida, “Commit”.

5. Atualiza a informação sobre as coletas no formulário utilizado.


Pós-condição:

As respostas dadas às questões foram salvas no dispositivo e atualizada a

informação sobre as coletas no formulário utilizado.

Enviar Coleta

Atores:

Usuário

Pré-condição:



Realizar Coleta.

Fluxo de Eventos:

1. O caso de uso inicia clicando no ícone localizado no canto superior direito

referente ao envio das coletas.

2. Caso haja alguma coleta ainda não enviada, esta é enviada ao servidor.

3. Atualiza a informação “to commit” na lista de formulários.


Pós-condição:

As coletas de dados foram salvas no servidor e atualizada a informação “to

commit” na lista de formulários.

36

Remover Formulário Local

Atores:

Usuário

Pré-condição:

Usuário deve baixar um formulário com identificador existente ou ter criado

um formulário por seu dispositivo.


Baixar Formulário e Salvar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia com um clique longo sobre o formulário a ser

excluído.

2. Visualiza-se as informações do formulário.

3. Após isso, escolher “Delete”.

4. Todas informações no dispositivo ligadas ao formulário escolhido são

removido do mesmo. Caso haja coleta não enviada, esta será perdida.


Pós-condição:

Todas informações no dispositivo ligadas ao formulário escolhido foram

removidas do mesmo.

5.1.2. Aplicativo Web

A figura 5.2 ilustra o diagrama de casos de uso para o aplicativo web, e a descrição

de cada caso é apresentada em sequência.

Figura 5.2 - Diagrama de casos de uso no aplicativo web

37

Buscar Formulário

Atores:

Usuário

Pré-condição:

Usuário deve acessar o site do sistema, colocar o identificador do formulário

e clicar no botão para buscar formulário.


Realizar Coleta, Obter Relatório e Exportar Dados.

Fluxo de Eventos:

1. O caso de uso inicia preenchendo o campo para o identificador de

formulário e clicando no botão de buscar formulário.

2. Usuário visualiza os dados do formulário consultado.

3. Pode optar por realizar uma coleta, obter relatório ou solicitar a

exportação dos dados obtidos com as coletas.


Pós-condição:

Visualizadas as informações do formulário e possibilidade de realizar coleta,

obter relatório ou solicitar a exportação dos dados obtidos com as coletas.

Realizar Coleta

Atores:

Usuário

Pré-condição:

Usuário deve buscar um formulário com identificador existente.


Buscar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia com o clique no botão “Collect Mode”.

2. Usuário preenche o campo “Collector”.

3. Responde todas questões do formulário.

4. Clica no botão de enviar as respostas para o servidor.


Pós-condição:

As respostas dadas às questões foram salvas no servidor.

38

Obter Relatório

Atores:

Usuário

Pré-condição:



Buscar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia com o clique no ícone “View Report”.

2. Usuário visualiza os gráficos gerados pelo sistema.

3. Pode fazer algumas interações e salva-los.


Pós-condição:

Usuário tem a visualização inicial dos gráficos para as questões com opções.

Exportar Dados

Atores:

Usuário

Pré-condição:



Buscar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia com o clique no ícone “Export Collections”.

2. Usuário grava localmente o arquivo enviado pelo servidor.


Pós-condição:

Já tem acesso aos dados coletados para o formulário.

Criar Formulário

Atores:

Usuário

Pré-condição:

Usuário deve acessar o site do sistema e clicar no botão de criar formulário.


Adicionar Item e Salvar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia clicando no botão de criar formulário.

39

2. Usuário preenche o título, criador e opcionalmente a descrição.

3. Adiciona itens e possivelmente opções, deve haver no mínimo 1 item.

4. Pode reordenar itens os arrastando.

5. Caso de uso encerrado após salvar formulário.

Pós-condição:

O formulário criado foi salvo no servidor.

Adicionar Item

Atores:

Usuário

Pré-condição:



Criar Formulário, Adicionar Opção, Excluir Item e Salvar Formulário.

Fluxo de Eventos:

1. O caso de uso inicia clicando para adicionar um dos três tipos de item.

2. Usuário preenche o texto da questão.

3. Caso seja um item de escolha, clica para adicionar opções.


Pós-condição:


Adicionar Opção

Atores:

Usuário

Pré-condição:

Usuário deve ter optado por adicionar um item do tipo escolha.


Adicionar Item e Excluir Opção.

Fluxo de Eventos:

1. O caso de uso inicia clicando para adicionar opção.

2. Usuário preenche o texto da opção, deve ter 2 opções no mínimo.


Pós-condição:


40

Excluir Opção

Atores:

Usuário

Pré-condição:

Usuário deve ter adicionado uma opção.


Adicionar Opção.

Fluxo de Eventos:

1. O caso de uso inicia clicando no ícone com sinal de subtração.

2. Opção correspondente ao ícone clicado é excluída.


Pós-condição:

Opção correspondente ao ícone clicado foi retirada da visualização do item.

Excluir Item

Atores:

Usuário

Pré-condição:

Usuário deve ter adicionado um item.


Adicionar Item.

Fluxo de Eventos:

1. O caso de uso inicia clicando no ícone com a letra “X”.

2. Item correspondente ao ícone clicado é excluído.


Pós-condição:

Item correspondente ao ícone clicado foi retirado da lista de itens do

formulário.

Salvar Formulário

Atores:

Usuário

Pré-condição:



Criar Formulário e Adicionar Item.

Fluxo de Eventos:

1. O caso de uso inicia clicando no botão para salvar o formulário.

41

2. Verifica se os requisitos para criação de um formulário foram atendidos.

3. Caso positivo, as informações do formulário são enviadas ao servidor.


Pós-condição:

As informações do formulário foram salvas no servidor.

5.2. Testes e Resultados

Com todas as funções, inicialmente planejadas, finalizadas e o sistema totalmente

funcional, alguns testes foram realizados. O objetivo era verificar a integridade dos

aplicativos desenvolvidos e o servidor, assim como a interação entre eles, com uso do

sistema por completo.

5.2.1. Criação de formulários

Acessando o aplicativo web através de um browser em um computador, tentou-se

criar um formulário contendo todos os possíveis tipos de itens suportados pelo sistema.

Para garantir que a validação do formulário funciona corretamente, tentou-se finalizar a

criação sem ter inserido informações obrigatórias como título ou pelo menos um item

(figura 5.3).

Figura 5.3 - Validação de informações do formulário no aplicativo web

Mesmo com pelo menos um item inserido no formulário, é certificado que a

questão tenha sido inserida em cada um. Ainda, quando o item é do tipo que possui

opções, o aplicativo o valida corretamente obrigando que sejam inseridas pelo menos

duas opções. A figura 5.4 ilustra a validação dos itens de um formulário.

42

Figura 5.4 - Validação de itens do formulário

Somente com todos os campos obrigatórios inseridos, foi possível criá-lo e em

seguida verificá-lo no aplicativo web (figura 5.5).

Figura 5.5 - Sucesso na criação do formulário

De posse do identificador do formulário recém criado, em um dispositivo Android

também foi possível baixar e verificar o formulário, deixando-o disponível para

realização de coletas, mesmo se removido o acesso à internet.

Assim como foi testada criação de um formulário com o aplicativo web, testou-se

a criação com aplicativo Android. Antes mesmo de iniciar-se a criação, é verificado se o

usuário está devidamente identificado, ação obrigatória para essa função (figura 5.6).

43

Figura 5.6 - Validação de usuário identificado

Com essa informação configurada, o acesso a área de criação de formulários é

permitido e pode-se inserir as informações desejadas. Semelhante ao visualizado no

aplicativo web todas as informações do formulário são validadas (figura 5.7) antes do

envio para o servidor, onde se concretizará a criação. Criado com sucesso, o formulário

recém criado está disponível para realização de coletas, tanto no dispositivo quanto

através do aplicativo web.

Figura 5.7 - Validação de informações do formulário no aplicativo Android

44

Visando maior diversidade de entrada de dados para os formulários também foi

verificada e garantida a possibilidade de utilização de diversos caracteres especiais (#,

$, &, etc) e acentuação (~, ^, etc). Utilizando caracteres contidos e fisicamente

visualizados em um teclado seguindo o padrão da Associação Brasileira de Normas

Técnicas (ABNT), todos puderam ser utilizados em um formulário e corretamente

visualizados tanto no aplicativo web quanto no aplicativo Android.

Como o aplicativo web foi desenvolvido visando sua utilização em computadores

de mesa e dispositivos com teclado e mouse, não há total suporte do seu uso em

dispositivos touchscreen. Apesar de ainda ser possível utilizar todas as funcionalidades,

durante a criação de um formulário não se consegue reordenar os itens, que é realizada

por drag-and-drop. Isso limita principalmente o uso do sistema em dispositivos móveis

com iOS, como iPhone e iPad, que sem um aplicativo nativo como o desenvolvido para

a plataforma Android, tem como única opção o uso do aplicativo web através dos

browsers disponibilizados.

5.2.2. Coleta de dados

Para testar a coleta de dados, um formulário de teste foi escolhido e em cada

aplicativo foi realizada um coleta. Assim como para a criação, durante uma coleta era

esperado que as informações fossem validadas antes do envio para o servidor.

No aplicativo web, após requisitado o formulário desejado é necessário ativar o

modo coleta para então poder preencher os itens. Com todas as respostas e inserido o

nome do coletor, foi possível enviar as informações. O envio não foi realizado enquanto

o preenchimento não se tornou válido (figura 5.8).

Figura 5.8 - Validação de coleta no aplicativo web

45

No aplicativo Android existe uma etapa intermediaria à coleta de dados e o envio

para o servidor, o armazenamento local. Até que todos os itens estivessem sido

respondidos, não foi possível finalizar uma coleta (figura 5.9).

Figura 5.9 - Validação de coleta no aplicativo Android

Quando tudo foi respondido a coleta pode ser finalizada e então armazenada

localmente no dispositivo. Como esperado, o envio somente pode ser realizado com o

usuário do aplicativo devidamente identificado. Ao final do envio a quantidade de coletas

pendentes foi atualizada e o teste considerado finalizado com sucesso (figura 5.10).

46

Figura 5.10 - Envio de coletas realizado no aplicativo Android

5.2.3. Relatório e Exportação

O teste das funcionalidades de relatório e exportação são realizados somente pelo

aplicativo web, onde são disponibilizados para o usuário. Algumas coletas foram

realizadas, em ambos aplicativos, com cuidado de ter o controle de quantas e quais

respostas foram dadas. Isso permitiu certificar que o resultado obtido estava correto.

Analisando o relatório gerado acerca dos dados coletados foi possível verificar que

as coletas realizadas por cada coletor foram corretamente identificas (figura 5.11). Para

fins de teste foi diferenciado cada aplicativo como um coletor. As quantidades e

percentuais de respostas de cada item também ficaram de acordo com as respostas

dadas (figura 5.12).

47

Figura 5.11 - Relatório de número de coletas por coletor

Figura 5.12 - Relatório percentual de respostas

48

Para a exportação, além da verificação dos dados exportados certificou-se que o

formato do arquivo gerado tem suporte em diferentes programas de gerenciamento de

planilhas. Foi testada a importação do arquivo com os dados exportados no Microsoft

Excel, no LibreOffice Calc e no Google Spreadsheet. Em todos, foi possível verificar

corretamente os dados coletados para o formulário de testes, que estavam

armazenados no sistema. A figura 5.13 apresenta a visualização dos dados no Calc.

Figura 5.13 - Visualização dos dados exportados

49

6. Conclusão

Este projeto final está relacionado a diversos conceitos aprendidos durante a

graduação, como programação orientada a objetos, sistemas em nuvem e

desenvolvimento de softwares para smartphone.

A realização deste trabalho foi muito útil para o enriquecimento de nossa

formação. Aperfeiçoamos nossas habilidades de programação, tivemos contato com

ferramentas para gestão de código e o aprimoramento do trabalho em equipe. Este

último de especial importância para o exercício de nossa profissão no mercado de

trabalho atual. Foi muito desafiador projetar e construir o sistema GeForm, já que

executamos todas as fases do projeto. A ideia foi bastante discutida, pesquisadas as

possíveis formas de implementação, criados os modelos de dados e desenvolvido o

sistema do “zero”, com implementação do servidor e dos aplicativos. Para tornar o

sistema acessível ao maior número de pessoas, tendência hoje da tecnologia, que o

aplicativo móvel foi incluído no desenvolvimento.

Os resultados alcançados nos deixam realizados, pois conseguimos pôr em

prática uma ideia que desenvolvemos. Apesar da complexidade na criação de sistemas

e do próprio projeto, sua realização permite a praticidade de ações em pesquisas, que

demonstram ser fundamentais em todos os campos da sociedade contemporânea.

Vivemos a era da tecnologia, onde a engenharia ocupa papel importante em diversas

áreas, como saúde, educação, negócios, etc. Podemos considerar que os objetivos

definidos no planejamento do projeto foram alcançados e como resultado foi criada uma

ferramenta prática e eficiente para realizar pesquisas e consultas de dados de uma

população.

6.1. Trabalhos futuros

Apesar de termos o sistema GeForm funcionando como esperávamos e suas

funções operacionais, ainda existem melhorias que podem ser colocadas em prática

visando aumentar a praticidade e a segurança em seu uso. De forma geral poderiam

ser implementados:

Suporte a outros tipos de itens, englobando um maior número de

aplicações e enriquecendo suas possibilidades de uso.

Definição, durante a criação de um formulário, se um item tem seu

preenchimento obrigatório ou não, o que permitiria deixá-lo em branco

durante a coleta de dados.

50

Consulta de um formulário utilizando outros campos de informação, como

o título, o autor ou a data.

Autenticação e cadastro de cada usuário, o que aumentaria a segurança

do sistema. Isso possibilitaria também criar limites de acesso aos

formulários, compartilhar o formulário entre os responsáveis por coletar

dados, além de outras alternativas.

De forma mais específica, assim como existe um aplicativo nativo para Android

poderia ser desenvolvido um aplicativo para sistemas iOS. A interface com o usuário na

aplicação web ainda pode ser melhorada, para que fique mais interativa, e aumentada

as informações, como manuais de utilização, mapa do site, entre outras. Além disso,

com a maturação dos aplicativos e do sistema em geral, há intenção de publicar o

sistema em um serviço na nuvem, como a Amazon Web Services (AWS), para que todos

possam acessá-lo, e colocar o aplicativo Android disponível para download direto no

aplicativo web ou em um link para a loja de aplicativos do Google, a Google Play, onde

seria publicado, divulgando o sistema e atingindo um público maior.

51

Bibliografia

[1] Taurion, Cezar. Cloud Computing: Computação em Nuvem, Transformando

o mundo da tecnologia da informação. Rio de Janeiro: Brasport, 2009.

[2] Fielding, Roy Thomas. Architectural Styles and the Design of Network-based

Software Architectures. Doctoral dissertation, University of California, Irvine,

2000. Disponível em:

http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf,

2013. Acesso em 26 Dez. 2013.

[3] REST, Disponível em:

http://en.wikipedia.org/wiki/Representational_state_transfer. Acesso em: 27

Dez. 2013.

[4] Apache Tomcat, Disponível em: http://tomcat.apache.org/. Acesso em: 20

Dez. 2013.

[5] MySQL, Disponível em: http://dev.mysql.com/. Acesso em: 20 Fev. 2014.

[6] Hibernate ORM, Disponível em: http://hibernate.org/orm/. Acesso em: 02

Jan. 2014.

[7] Hibernate (Java) - Wikipedia, the free encyclopedia, Disponível em:

http://en.wikipedia.org/wiki/Hibernate_(Java), 2013. Acesso em: 02 Jan.

2014.

[8] jQuery, Disponível em: http://jquery.com/. Acesso em: 20 Jan. 2014

[9] jQuery UI, Disponível em: https://jqueryui.com/. Acesso em: 20 Jan. 2014.

[10] Backbone, Disponível em: http://backbonejs.org/. Acesso em: 20 Jan. 2014.

[11] Undescore, Disponível em: http://underscorejs.org/. Acesso em: 20 Jan.

2014

[12] RequireJS, Disponível em: http://requirejs.org/. Acesso em: 08 Mar. 2014.

[13] Highcharts, Disponível em: http://www.highcharts.com/. Acesso em: 15 Jan.

2014.

[14] Android Architecture, Disponível em:

http://www.tutorialspoint.com/android/android_architecture.htm. Acesso em

23 Fev. 2014.

[15] Android, Disponível em: http://developer.android.com/about/. Acesso em: 24

Dez. 2013.

[16] Open Handset Alliance - Wikipedia, the free encyclopedia, Disponível em:

http://en.wikipedia.org/wiki/Open_Handset_Alliance, 2013. Acesso em: 24

Dez. 2013.

http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf

http://en.wikipedia.org/wiki/Representational_state_transfer

http://tomcat.apache.org/

http://dev.mysql.com/

http://hibernate.org/orm/

http://en.wikipedia.org/wiki/Hibernate_(Java)

http://jquery.com/

https://jqueryui.com/

http://backbonejs.org/

http://underscorejs.org/

http://requirejs.org/

http://www.highcharts.com/

http://www.tutorialspoint.com/android/android_architecture.htm

http://developer.android.com/about/

http://en.wikipedia.org/wiki/Open_Handset_Alliance

52

[17] App Fundamentals, Disponível em:

http://developer.android.com/guide/components/fundamentals.html. Acesso

em 23 Fev. 2014.

[18] Activities, Disponível em:

http://developer.android.com/guide/components/activities.html. Acesso em

23 Fev. 2014.

[19] Eclipse IDE, Disponível em: https://www.eclipse.org/. Acesso em: 15 Jan.

2014

[20] StarUML, Disponível em: http://staruml.sourceforge.net/en/. Acesso em: 27

Fev. 2014.

[21] MySQL Workbench, Disponível em:

http://www.mysql.com/products/workbench/. Acesso em: 20 Fev. 2014

[22] Mercurial Hg, Disponível em: http://mercurial.selenic.com/. Acesso em: 05

Jan. 2014.

[23] Google Code, Disponível em:

https://code.google.com/p/support/wiki/GettingStarted. Acesso em: 05 Jan.

2014.

http://developer.android.com/guide/components/fundamentals.html

http://developer.android.com/guide/components/activities.html

https://www.eclipse.org/

http://staruml.sourceforge.net/en/

http://www.mysql.com/products/workbench/

http://mercurial.selenic.com/

https://code.google.com/p/support/wiki/GettingStarted

53

Apêndice A

Exemplo de descrição de um formulário

Representação XML

<form>

<id>1</id>

<timestamp>2014-02-23 19:44:04</timestamp>

<creator>JAX-RS</creator>

<title>Form sample</title>

<description>Sample from server.</description>

<item type="text">

<id>1</id>

<question>Text Item</question>

</item>

<item type="single">

<id>2</id>

<question>Single Choice Item</question>

<options>

<option>

<id>1</id>

<value>Yes</value>

</option>

<option>

<id>2</id>

<value>No</value>

</option>

</options>

</item>

<item type="multiple">

<id>3</id>

<question>Multiple Choice Item</question>

<options>

<option>

<id>3</id>

<value>Option 1</value>

</option>

<option>

<id>4</id>


</option>

<option>

<id>5</id>


</option>

</options>

</item>

</form>

54

Representação JSON

{"id":1,

"timestamp":"2014-02-23 19:44:04",

"creator":"JAX-RS",

"title":"Form sample",

"description":"Sample from server.",

"item":[{"id":1,

"question":"Text Item",

"type":"TEXT"

},

{"id":2,

"question":"Single Choice Item",

"options":[ {"id":1,"value":"Yes"},

{"id":2,"value":"No"} ],

"type":"SINGLE_CHOICE"

},

{"id":3,

"question":"Multiple Choice Item",

"options":[ {"id":3,"value":"Option 1"},

{"id":4,"value":"Option 2"},

{"id":5,"value":"Option 3"}

],

"type":"MULTIPLE_CHOICE"

}]

}

Exemplo de descrição de uma coleta

Representação XML

<collection>

<form>1</form>

<collector>Chrome</collector>

<item>

<answer>Test</answer>

</item>

<item>

<answer>Yes</answer>

</item>

<item>

<answer>Option 1</answer>

<answer>Option 2</answer>

</item>

</collection>

55

Representação JSON

{"form":1,

"collector":"Chrome",

"item":[{"answer":["Test"]},

{"answer":["Yes"]},

{"answer":["Option 1","Option 2"]}

]

}

sistema na cloud para criaÇÃo e processamento de...

Documents