UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
CURSO DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
MATHEUS EDUARDO COBALCHINI
APLICATIVO MOBILE PARA LISTA DE COMPRAS DE SUPERMERCADO
TRABALHO DE CONCLUSÃO DE CURSO
PATO BRANCO 2018
MATHEUS EDUARDO COBALCHINI
APLICATIVO MOBILE PARA LISTA DE COMPRAS DE SUPERMERCADO
Trabalho de Conclusão de Curso de graduação, apresentado à disciplina de Trabalho de Conclusão de Curso 1, do Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas, da Universidade Tecnológica Federal do Paraná, Câmpus Pato Branco, como requisito parcial para obtenção do título de Tecnólogo.
Orientadora: Profa. Beatriz Terezinha Borsoi Coorientador: Prof. Vinicius Pegorini
PATO BRANCO 2018
RESUMO
COBALCHINI, Matheus Eduardo. Aplicativo mobile para lista de compras de supermercado. 2018. 108f. Monografia (Trabalho de Conclusão de Curso) - Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas, Universidade Tecnológica Federal do Paraná, Câmpus Pato Branco. Pato Branco, 2018.
A comparação de preços antes de adquirir um determinado produto ou serviços é um hábito bastante comum entre os consumidores. Esse hábito se destaca em locais ou ocasiões em que há diversidade de ofertas, preços diferentes para um mesmo produto ou serviço e quando os compradores estão precisando ou querendo economizar, entre outros. Supermercados é um segmento favorável à comparação de preços, talvez, não necessariamente pelo valor de cada compra individual, mas pela frequência com que as compras são realizadas, mensais, semanais e em determinados casos, diárias. O uso de recursos da tecnologia como os sistemas web e as aplicações para dispositivos móveis têm facilitado a localização de bens e serviços desejados e a comparação de preços. Existem diversos aplicativos disponíveis, inclusive gratuitamente, para ambiente web e mobile que são específicos para realização de comparação de preços. No presente trabalho, está sendo proposto o desenvolvimento de um aplicativo para dispositivos móveis Android, que visa possibilitar a composição de uma lista de compras e a realização de comparação de preços em supermercados. Os dados dos produtos e preços são fornecidos para consulta pelo aplicativo mobile é utilizada a padronização Global Trade Item Number (GTIN) para a identificação única de cada produto. O aplicativo possibilita que o usuário elabore uma lista de compras e a partir dos dados dessa lista, exiba, o valor de cada produto nos diferentes supermercados cadastrados e que disponibilizam o referido produto.
ABSTRACT
COBALCHINI, Matheus Eduardo. Mobile application for a market store list. 2018. 108f. Monografia (Trabalho de Conclusão de Curso) - Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas, Universidade Tecnológica Federal do Paraná, Câmpus Pato Branco. Pato Branco, 2018.
The comparison of prices, before buying products and services, is a very common human habit. This habit comes out in places or occasions with many offers and different prices for the same product or service, and when the buyers want or need to save money. Supermarkets are a favorable segment to does prices comparison, maybe, not necessarily buy the product value, but for the frequency that they are purchased: monthly, weekly and, in certain cases, daily. The use of technologic resources like web systems and mobile applications has been facilitated the localizations of wanted goods and services and the prices comparison. There are many mobile applications available, including free ones, for web and mobile environments which are specific for the realization of prices comparisons. As a way of learning technologies for development of Android mobile devices. In this paper is reported the development of an application that aims to enable the comparisons of prices in supermarkets. The product data and prices are provided by a web system. It is used the standardizing Global Trade Item Number (GTIN) for a single identifier of each product. The software will to allow the user to compose a shopping list and presents the values of each product made available by the supermarkets.
LISTA DE FIGURAS
Figura 1 – Arquitetura do sistema operacional Android... 15
Figura 2 – Ciclo de vida do projeto ... 20
Figura 3 – Diagrama de casos de uso... 23
Figura 4 – Diagrama de entidades e relacionamentos – aplicativo servidor... 28
Figura 5 – Diagrama de entidades e relacionamentos – aplicativo mobile... 29
Figura 6 – Tela splash ... 30
Figura 7 – Tela solicitação de permissões... 30
Figura 8 – Tela solicitação de permissões, ação negar ... 31
Figura 9 – Tela de apresentação do sistema – Primeira tela ... 32
Figura 10 – Tela de apresentação do sistema – Sincronização ... 33
Figura 11 – Tela de apresentação do sistema: promoção... 34
Figura 12 – Tela de apresentação do sistema: registros novos... 35
Figura 13 – Tela de apresentação do sistema – Múltipla seleção... 36
Figura 14 – Tela de apresentação do sistema – Produtos Inativos ... 37
Figura 15 – Tela de apresentação do sistema: pesquisa por código de barras ... 38
Figura 16 – Tela de estados e cidades, baixando do servidor ... 39
Figura 17 – Tela de erro de conexão... 40
Figura 18 – Tela de estados e cidades... 41
Figura 19 – Cidade sem mercados cadastrados... 42
Figura 20 – Cidade com mercados cadastrados ... 43
Figura 21 – Tela de estados e cidades: solicitação de nome do usuário... 44
Figura 22 – Tela inicial: apresentação da listagem de produtos... 45
Figura 23 – Tela inicial: ação de sincronização com o servidor web ... 46
Figura 24 – Tela inicial: sucesso na sincronização... 46
Figura 25 – Tela de acesso às funcionalidades do sistema ... 47
Figura 26 – Activity listagem geral dos produtos... 48
Figura 27 – Activity listagem geral dos produtos: filtragem por palavra-chave... 49
Figura 28 – Activity filtro por código de barras... 50
Figura 29 – Activity produto específico por código de barras ... 51
Figura 30 – Activity produto específico: informações do produto... 51
Figura 31 – Activity produto específico por código de barras com o produto inexistente... 52
Figura 32 – Activity produto específico: formulário de filtros ... 53
Figura 33 – Activity produto específicos: indicação de produto em promoção... 54
Figura 34 – Tela de Listas de compras vazia e botão para adição de lista... 55
Figura 35 – Tela de Listas de compras: formulário de inclusão... 56
Figura 36 – Tela de Listas de compras: formulário de inclusão... 57
Figura 37 – Tela de Listas de compras: multi-seleção... 58
Figura 38 – Tela de Listas de compras: formulário de edição ... 59
Figura 39 – Mensagem de confirmação de exclusão... 59
Figura 40 – Tela de Listas de compras: listagem após exclusão... 60
Figura 41 – Tela de produtos da lista de compras ... 61
Figura 42 – Tela de produtos da lista de compras com produtos na lista ... 62
Figura 43 – Tela para alterar quantidade do produto... 63
Figura 44 – Tela de Produtos da lista de compras: produto marcado como “comprado” ... 64
Figura 45 – Tela de Produtos da lista de compras: multi seleção... 65
Figura 47 – Listagem de Produtos da lista de compras: mensagem de exclusão... 66
Figura 48 – Dashboard: opções ... 67
Figura 49 – Dashboard: opções ... 67
Figura 50 – Relatório das listas de compras... 68
Figura 51 – Gráfico de gastos por categorias ... 69
Figura 52 – Gráfico de gastos por categorias: fatia selecionada ... 70
Figura 53 – Gráfico de gastos por categorias: fatia selecionada ... 71
Figura 54 – Configurações ... 72
Figura 55 – Envio de sugestão: Gmail... 73
Figura 56 – Envio de sugestão, com arquivo de log – Gmail ... 74
Figura 57 – Arquivo de log ... 75
Figura 58 – Sobre... 76
Figura 59 – Postman: envio de requisição de autenticação... 77
Figura 60 – Postman: inserção do token no cabeçalho da requisição... 77
Figura 61 – Postman: atualização de um registro - POST ... 78
Figura 62 – Postman: listagem dos mercados - PUT... 78
Figura 63 – Postman: listagem dos mercados - GET... 79
Figura 64 – Aplicação web: login... 80
Figura 65 – Aplicação web: falha de login ... 80
Figura 66 – Aplicação web: listagem de produtos... 81
Figura 67 – Aplicação web: inclusão de produto ... 81
Figura 68 – Aplicação web: inclusão de registro – Falha ... 82
Figura 69 – Aplicação web: inclusão de registro – sucesso ao salvar registro... 82
Figura 70 – Aplicação web: alteração de produto – falha... 83
Figura 71 – Aplicação web: dropdown cadastros... 83
Figura 72 – Aplicação web: listagem usuários... 84
Figura 73 – Aplicação web: formulário usuários ... 84
Figura 74 – Aplicação web: listagem mercados ... 85
Figura 75 – Aplicação web: formulário mercados... 85
Figura 76 – Aplicação web: formulário de alteração de senha... 86
Figura 77 – Aplicação web: formulário de alteração de senha, senha inválida... 86
Figura 78 – Aplicação web: formulário de alteração de senha - senhas não conferem ... 87
Figura 79 – Aplicação web: sucesso alterar senha... 87
Figura 80 – Aplicação web: login responsivo ... 88
Figura 81 – Aplicação web: listagem responsíva ... 89
Figura 82 – Aplicação web: listagem responsíva ... 90
LISTA DE QUADROS
Quadro 1 – Tecnologias e ferramentas utilizadas para o desenvolvimento do trabalho... 18
Quadro 2 – Requisitos funcionais... 22
Quadro 3 – Requisitos não funcionais ... 22
Quadro 4 – Caso de uso manter produtos ... 24
Quadro 5 – Caso de uso registrar preços... 24
Quadro 6 – Caso de uso visualizar preços ... 25
Quadro 7 – Caso de uso compor lista ... 25
Quadro 8 – Caso de uso visualizar melhor opção de compra ... 26
Quadro 9 – Caso de uso visualizar gerenciamento de custos... 26
Quadro 10 – Caso de uso realizar armazenamento offline... 27
Quadro 11 – Caso de uso realizar sincronização... 27
LISTAGENS DE CÓDIGO
Listagem 1 – Classe MercadoController... 92
Listagem 2 – MercadoController: método inserir()... 93
Listagem 3 – MercadoController: método editar()... 93
Listagem 4 – login.js: ação submit() do formulário de login ... 94
Listagem 5 – login.js: ação ready() da listagem dos produtos ... 95
Listagem 6 – list.jsp: corpo da página ... 95
Listagem 7 – ProdutoController ... 96
Listagem 8 – Classe Util: método Connect() ... 97
Listagem 9 – EstadoCidadeActivity ... 98
Listagem 10 – BarcodeScannerAcitivity ... 99
Listagem 11 – ListagemProdutosGeralActivity: método onAtivityResult()... 100
Listagem 12 – ProdutoDao: método getProdutos() ... 101
Listagem 13 – ListaComprasAdapter: método onClick dos itens ... 102
Listagem 14 – PDF: fragmento do método criarPdf... 103
LISTA DE SIGLAS
AJAX Asynchronous Javascript and XML
EAN/UCC European Article Number/Uniform Commercial Code GPS Global Positioning System
GSM Global System for Mobile Communications GTIN Global Trade Item Number
JSON JavaScript Object Notation MVC Model-View-Controller ORM Object-Relational Mapping SQL Structured Query Language REST Representational State Transfer RF Requisito Funcional
RNF Requisito Não Funcional URL Uniform Resource Locator
SUMÁRIO 1 INTRODUÇÃO... 11 1.1 CONSIDERAÇÕES INICIAIS ... 11 1.2 OBJETIVOS ... 12 1.2.1 Objetivo Geral... 12 1.2.2 Objetivos Específicos... 12 1.3 JUSTIFICATIVA ... 13 1.4 ESTRUTURA DO TRABALHO ... 13 2 REFERENCIAL TEÓRICO ... 14 2.1 ANDROID... 14 3 MATERIAIS E MÉTODO ... 17 3.1 MATERIAIS... 17 3.2 MÉTODO ... 19 4 RESULTADO ... 21 4.1 ESCOPO DO SISTEMA... 21 4.2 MODELAGEM DO SISTEMA... 21 4.3 APRESENTAÇÃO DO SISTEMA ... 29 4.3.1 Aplicativo Mobile ... 29 4.3.2 Aplicativo servidor ... 76 4.3.3 Aplicação Web... 79 4.4 IMPLEMENTAÇÃO DO SISTEMA ... 91 4.4.1 Implementação do servidor... 91
4.4.2 Implementação da aplicação web ... 93
4.4.3 Implementação do aplicativo mobile ... 97
5 CONSIDERAÇÕES FINAIS... 106
1 INTRODUÇÃO
Este capítulo apresenta as considerações iniciais que definem o contexto no qual se insere o aplicativo desenvolvido como resultado da realização deste trabalho. Neste capítulo também são apresentados os objetivos e a justificativa do trabalho. E por fim está a organização do texto por meio da apresentação dos seus capítulos subsequentes.
1.1 CONSIDERAÇÕES INICIAIS
A elaboração de listas de compras de supermercado é uma prática que pode ser considerada razoavelmente comum entre as pessoas. Essa prática se justifica porque muitas vezes são adquiridos itens de categorias distintas em uma mesma compra (alimentação, higiene, limpeza e outros) e é comum que itens se repitam em compras com a mesma periodicidade (mensal, semanal). Além disso, essas listas visam facilitar para que não haja esquecimento de comprar itens necessários.
Além de facilitar o processo de compra (agilizando a localização dos produtos no supermercado e evitando o esquecimento de itens necessários), as listas podem ser utilizadas para realizar pesquisa de preços, visando identificar o supermercado que apresenta o menor preço geral, por grupos de produtos ou por produtos específicos.
Um aplicativo para dispositivos móveis que permita a elaboração de uma lista de compras facilita que o usuário tenha acesso a essa lista quando está no supermercado, da maneira que o faria com uma lista em papel. Uma versão eletrônica de uma lista de compras facilita a inclusão e a exclusão de itens e a realização de análise comparativa de preços entre os estabelecimentos cadastrados. Funcionalidades como ordenar os produtos por preço, agrupar itens e realizar a soma para determinar o menor preço geral da lista, são de fácil implementação em um aplicativo computacional.
Existem diversas opções disponíveis de aplicativos para a finalidade de lista de compras. Daniele (2012) apresenta seis aplicativos para Android e iPhone para criar e organizar listas de supermercado: iList, TouchAnyList, Grocery, ListBoa, ListaBuscapé, MobileMeuCarrinhoQQFalta. Esses aplicativos possuem funcionalidades comuns e especificidades, mas, em geral, eles permitem elaborar e gerenciar uma lista de compras. No site do Google Play (2017) é possível encontrar várias opções de aplicativos para essa finalidade. A proposta deste trabalho não é ser inédita, mas visa apresentar uma solução para
dispositivos móveis que possa auxiliar as pessoas no momento de fazer compras em um supermercado, fornecendo funcionalidades como a possibilidade de comparação de preços entre estabelecimentos.
Considerando esse contexto, por meio da realização deste trabalho será implementado um aplicativo para dispositivos móveis para compor listas de compras de supermercados e auxiliar na análise de menor preço geral e por produtos.
1.2 OBJETIVOS
O objetivo geral apresenta o resultado principal obtido da realização deste trabalho e os objetivos específicos o complementam.
1.2.1 Objetivo Geral
Desenvolver um aplicativo Android para compor uma lista de compras de supermercado para realizar a análise comparativa de preços entre os supermercados cadastrados na aplicação servidor.
1.2.2 Objetivos Específicos
Os objetivos específicos do trabalho são:
● Possibilitar a comparação de preços entre supermercados diferentes.
● Auxiliar na decisão do usuário em qual supermercado poderá adquirir todos os produtos da sua lista de compras ou dividi-la em supermercados distintos, em decorrência do preço dos produtos.
● Auxiliar no controle de gastos do usuário, informando via relatórios com qual produto ou categoria de produtos ele gasta uma quantia maior de dinheiro. ● Implementar um servidor web para o cadastro dos produtos que é realizado
1.3 JUSTIFICATIVA
O desenvolvimento de um aplicativo para dispositivos móveis para elaboração de uma lista de compras, em princípio para o segmento de supermercado, se justifica pela facilidade de mobilidade que esse tipo de equipamento apresenta aos seus usuários.
A elaboração da lista de compras, com a possibilidade de comparação de preços entre supermercados, permitirá que o usuário possa optar pela aquisição dos produtos no supermercado que oferecer o menor preço da lista como um todo ou que possa escolher quais produtos comprar em quais estabelecimentos.
Para facilitar e agilizar o uso do aplicativo, considerando as dimensões reduzidas da tela, é necessário que o design da interface seja bem planejado e atendendo padrões de usabilidade. O atendimento a padronizações estabelecidas para esse tipo de aplicativo é indispensável.
1.4 ESTRUTURA DO TRABALHO
Este trabalho está organizado em capítulos. Este é o primeiro capítulo é apresenta as considerações iniciais com o contexto do sistema a ser desenvolvido, os seus objetivos e a justificativa. O Capítulo 2 apresenta o referencial teórico sobre Android. No Capítulo 3 estão as ferramentas e as tecnologias utilizadas na modelagem do sistema e que serão utilizadas na implementação subsequente do sistema. No Capítulo 4 é apresentado o resultado da realização do trabalho, ou seja, o desenvolvimento do sistema. Por fim estão as considerações finais seguidas pelas referências.
2 REFERENCIAL TEÓRICO
Este capítulo apresenta a fundamentação teórica do trabalho, cujo conteúdo explana sobre o Sistema Operacional Android por ser a plataforma de desenvolvimento do aplicativo que resultado deste trabalho.
2.1 ANDROID
Android é um Sistema Operacional para celulares baseado no núcleo Linux, desenvolvido pelo Google. É de código aberto, possibilitando customização pelos fabricantes de aparelhos e a criação de aplicativos pelos desenvolvedores (UOL, 2017).
O Android é projetado para ser utilizado, principalmente, em dispositivos móveis com tela sensível ao toque (para manipulação de objetos e uso de um teclado virtual) como smartphones e tablets; com interface específica para televisão (Android TV), veículos (Android Auto) e relógio de pulso (Android Wear). Embora seja mais diretamente associado ao uso de telas sensíveis ao toque, pode ser utilizado em consoles de videogames, câmeras digitais, computadores e outros dispositivos eletrônicos.
A plataforma Android é caracterizada como uma pilha (camadas) de software para dispositivos móveis composta de um Sistema Operacional, middleware e aplicações de base (ANDROID, 2017). Com um viés maior em termos de aplicabilidade, Guana et al. (2012) definem o sistema Android como um Sistema Operacional que é visto como um conjunto de serviços de software especialmente desenvolvidos para dispositivos móveis.
Em termos de aplicabilidade, Maji et al. (2010) citam diferentes características das áreas de desenvolvimento de aplicações, Internet, mídias e conectividade que caracterizam os aplicativos Android. Essas características incluem: framework de aplicação, a máquina virtual Dalvik, navegador integrado, gráficos otimizados, SQLite para armazenamento de dados estruturados, suporte a mídia para áudio, vídeo, formatos de imagens, telefonia, Global System for Mobile Communications (GSM), bluetooth, 3G, wifi, câmera, Global Positioning System (GPS) e ambiente de desenvolvimento rico.
A arquitetura da plataforma Android composta por cinco camadas com funcionalidades e comportamentos específicos é baseada no kernel do Linux, que funciona como uma camada de abstração entre o hardware e os aplicativos que executam na
plataforma (GUANA et al., 2012). Essas camadas são: aplicações, framework, bibliotecas, runtime e kernel Linux.
Na plataforma Android, as aplicações são escritas em Java e executadas em sua própria máquina virtual, a Dalvik, que por sua vez é executada em seu próprio processo no Linux, isolando-a de outras aplicações e facilitando o controle de recursos (ANDROID DEVELOPER, 2012).
A Figura 1 apresenta a organização da arquitetura do Android.
Figura 1 – Arquitetura do sistema operacional Android Fonte: Android Developer (2017 ).
De acordo com a representação da Figura 1 (GUANA et al., 2012, MAJI et al., 2010): a) Applications – camada composta por um conjunto de aplicações que estendem as
funcionalidades do sistema operacional, como clientes de emails, aplicativos de mensagens, calendário, navegador de mapa e navegadores. Essas aplicações são disponibilizadas com a distribuição do Android;
b) Application framework – camada que visa facilitar o reuso de componentes no Android. Com os elementos desse framework, tais como intents, content providers, views e managers, os desenvolvedores podem construir aplicações para executar no kernel Android e interoperar entre si e com outras aplicações;
c) Libraries – camada de bibliotecas composta por um conjunto de pacotes C/C++ usados pelo framework de aplicação para gerenciar a renderização da interface, segurança de dispositivos, persistência de aplicações e outros. Essa camada inclui bibliotecas C do sistema, gerenciadores de interface, engine gráfica 2D e 3D, codecs de mídia, a base de dados SQLite e a engine LibWebCore do navegador web;
d) Android Runtime – camada composta pela máquina virtual Dalvik e pelas bibliotecas básicas Android que especificam o ambiente de execução da aplicação dentro do sistema operacional. As bibliotecas básicas provem a maioria das funcionalidades disponíveis em Java. Dalvik opera como um tradutor entre a aplicação e o Sistema Operacional. Toda aplicação Android executa em seu próprio processo, com sua própria instância da máquina virtual Dalvik;
e) Linux kernel – é um kernel Linux customizado usado para prover as funcionalidades de baixo nível do Sistema Operacional tais como gerenciamento de memória e agendamento de processos.
3 MATERIAIS E MÉTODO
A seguir estão os materiais e o método utilizados para a modelagem e a implementação do sistema obtido resultado deste trabalho.
3.1 MATERIAIS
O Quadro 1 apresenta as tecnologias e as ferramentas utilizadas para o desenvolvimento do trabalho.
Ferramenta Versão Link Funcionalidade
Sistema mobile Android
Studio 2.3.0.8 https://dl.google.com/dl/android/studio/install/2.3.0.8/ android-studio-bundle-162.3764568-windows.exe
Integrated Development Environment (IDE) para desenvolvimento do aplicativo. Java https://www.java.com/pt_B R/ Linguagem de programação. Model-View-Controller
https://www.asp.net/mvc Padrão arquitetônico para estruturação do código em camadas.
SQLite http://www.sqlite.org/ Banco de dados para a aplicação Android SectionedRecy clerViewAdap ter 1.2.0 https://github.com/luizgrp/S ectionedRecyclerViewAda pter
Uma biblioteca para criar listas do tipo Recycler View com cabeçalho personalizado.
AppIntro 4.2.3 https://github.com/apl-devs/AppIntro
Uma biblioteca para criar uma introdução para o aplicativo.
ZXing 1.9.8 https://github.com/dm77/ba
rcodescanner Biblioteca para leitura de código de barras. iTextPDF 5.0.6 https://itextpdf.com Biblioteca para a geração de documentos
no formato PDF MPAndroidCh
art
3.0.3 https://github.com/PhilJay/ MPAndroidChart
Biblioteca para geração de relatórios animados
Sistema Web (frontend)
Intellij Trial 2018.1.5 https://www.jetbrains.co m/idea/download/
IDE para desenvolvimento da aplicação web.
Jquery 3.3.1 https://jquery.com/downloa
d Biblioteca JavaScript para manipulação dos dados provenientes do backend. Boostrap 4.1.1 https://getbootstrap.com/do
cs/4.1/getting-started/download/
Ferramenta CSS/HTML/JavaScript para estilização das páginas.
Spring Boot 1.5.14 https://spring.io/projects/spr ing-boot
Ferramenta para execução de um servidor embutido na aplicação.
Maven 3.3.9 https://maven.apache.org/ Controle de dependências da aplicação. Sistema servidor (backend)
Eclipse 8.0.2 https://netbeans.org/downlo ads/
IDE para desenvolvimento do servidor web.
Java https://www.java.com/pt_B
PostgreSQL 9.6 https://www.postgresql.org/ download/
Banco de dados para armazenar dados no servidor.
GTIN https://www.gs1br.org/codi
gos-e-padroes/chaves-de-identificacao/gtin#sthash.d QrI1EGp.dpuf
Padronização de identificação de produto.
Hibernate 5.1.7 https://sourceforge.net/proj ects/hibernate/files/hibernat e-validator/5.4.1.Final/hibern ate-validator-5.4.1.Final-dist.zip/download
Ferramenta para mapeamento objeto-relacional (Object-Relational Mapping - ORM)
Spring Framework
1.5.1 https://spring.io/projects/spr ing-framework
Framwork não intrusivo baseado em inversão de controle para injeção de dependências
JSON Web Token
0.6.0 https://github.com/jwtk/jjwt Ferramenta que provê tokens de acesso a partir de requisições em formato JavaScript Object Notation (JSON). Heroku 7.0.0 https://devcenter.heroku.co
m
Ferramenta para que o projeto fique em nuvem e possa ser acessado de qualquer lugar.
Maven 3.3.9 https://maven.apache.org/ Controle de dependências da aplicação. Desenvolvimento de diagramas Visual Paradigm Community Edition 13.1 https://www.visual-paradigm.com/download/co mmunity.jsp
Ferramenta para desenvolver os diagramas.
Quadro 1 – Tecnologias e ferramentas utilizadas para o desenvolvimento do trabalho
Global Trade Item Number (GTIN), que significa Número Global de Item Comercial, é um identificador para itens comerciais que foi desenvolvido e controlado pela GS1, a Associação Brasileira de Automação, antiga European Article Number/Uniform Commercial Code (EAN/UCC) (ASSOCIAÇÃO..., 2017a).
Os GTINs são atribuídos para qualquer item (produto ou serviço) que possa ser precificado, utilizado ou faturado em qualquer ponto da cadeia de suprimentos. O GTIN fornece informação pré-definida e abrange matérias-primas a produtos acabados (ASSOCIAÇÃO..., 2017b). O GTIN descreve toda a família de identificação das estruturas de dados GS1. Esses códigos podem ter o tamanho de 8, 12, 13 ou 14 dígitos e ser construídos utilizando qualquer uma das quatro estruturas de numeração dependendo da aplicação. Há quatros tipos de GTIN de estrutura dessa numeração (ASSOCIAÇÃO..., 2017b):
GTIN-14 – Estrutura Indicad
or GTIN de itens contidos (sem dígito verificador) Dígito Verificador N1 N2 N3 N4 N5 N6 N7 N8 N9 N1 0 N1 1 N1 2 N1 3 N14 GTIN-13 - Estrutura
Prefixo GS1 de Empresa / Referência do item Dígito Verificador N1 N2 N3 N4 N5 N6 N7 N8 N9 N10 N11 N12 N13
GTIN-12 – Estrutura
Prefixo GS1 de Empresa / Referência do
item Dígito Verificador
N 1 N 2 N 3 N 4 N 5 N 6 N 7 N 8 N 9 N10 N1 1 N12
GTIN-8 - Estrutura (atribuído um-a-um) Prefixo GS1-8 / Referência do item Dígito Verificador N1 N2 N3 N4 N5 N
6 N7 N8
Os números de identificação de um produto como os disponibilizados pelo GTIN podem ser representados por meio de símbolos do código de barras para possibilitar a leitura eletrônica (ótica) (ASSOCIAÇÃO…, 2017c).
3.2 MÉTODO
O método consiste nas atividades de levantamento de requisitos, modelagem e implementação de funcionalidades. No desenvolvimento deste trabalho, essas atividades foram baseadas em um ciclo de planejamento iterativo de análise, prototipação e implementação de requisitos. A Figura 2 apresenta as atividades desse ciclo e a indicação de iteração de atividades.
Figura 2 – Ciclo de vida do projeto
Os requisitos para o projeto foram levantados por meio de conversas com colegas de trabalho e pela análise de aplicativos com funcionalidades semelhantes, como os apresentados em Daniele (2012) e disponíveis na Google Play (2017).
Os requisitos identificados foram organizados em funcionais e não funcionais. Os requisitos funcionais foram organizados na forma de casos de uso, com atores vinculados a esses requisitos. Dos requisitos foram identificadas as unidades de persistência do sistema (as tabelas do banco de dados) e definido o diagrama de entidades e relacionamentos.
A análise dos requisitos permitiu definir o que seria realizado na aplicação mobile e os requisitos da aplicação servidor. Também foi definido que seria utilizado o GTIN para a identificação única de cada produto. Facilitando, assim, que um mesmo produto, proveniente de supermercados distintos, tivesse a mesma identificação.
A implementação foi realizada utilizando as tecnologias elencadas no Quadro 1. A implementação foi iniciada pela aplicação mobile, em seguida foi realizada a implementação do servidor. Ajustes no desenvolvimento mobile foram realizados após a implementação do servidor.
Os testes foram informais visando verificar o atendimento dos requisitos definidos para o sistema e a localização de erros de codificação.
4 RESULTADO
Este capítulo apresenta o resultado da realização deste trabalho que é a modelagem de um aplicativo mobile Android para realizar comparação de preços em supermercados.
4.1 ESCOPO DO SISTEMA
O aplicativo mobile auxiliará no processo de decisão de compra do usuário porque permite a elaboração de listas de compra e realizar a comparação de preços entre os supermercados. O contexto de uso do aplicativo é para supermercados, mas pode ser aplicado em qualquer processo de compra que pode beneficiar-se do auxílio de listas de compras e/ou comparação de preços. O aplicativo possui um servidor web por meio do qual os supermercados cadastrados poderão registrar seus produtos e os respectivos valores.
Os produtos são cadastrados no sistema e os supermercados atribuem valor (preço), o aplicativo permitirá a consulta desses produtos e os respectivos preços no aplicativo mobile. Nesse aplicativo, o usuário poderá comparar os valores apresentados e decidir pela aquisição do produto com preço mais favorável, por exemplo. Além da comparação de preços, o usuário poderá gerenciar gastos por meio de relatórios fornecidos pelo aplicativo.
4.2 MODELAGEM DO SISTEMA
O Quadro 2 apresenta a listagem dos Requisitos Funcionais (RF) identificados para o sistema.
Identificação Nome Descrição
RF01 Cadastrar lista O usuário poderá criar uma lista de compra, a partir dos produtos existentes no banco de dados.
RF02 Consulta de preços Consultar preço dos produtos, escolhendo um produto cadastrado.
RF03 Consulta de produtos Consulta de cadastro de produtos. RF04 Visualizar melhor
opção de compra
O usuário, no momento da criação da lista, verá os produtos correspondentes à pesquisa e terá acesso aos preços por estabelecimento, ordenados do menor para o maior.
RF05 Calcular valor total O aplicativo deve calcular o valor total da lista de compras.
RF06 Cadastro de produtos O servidor web deve permitir o cadastro de novos produtos.
RF07 Cadastro de preço O servidor web, deve permitir o cadastro do preço dos produtos: o preço normal e o preço promocional.
RF08 Atualização de valores Quando um produto estiver cadastrado, o sistema deve atualizar os valores do mesmo.
Quadro 2 – Requisitos funcionais
A listagem do Quadro 3 apresenta os Requisitos Não Funcionais (RNF) identificados para o sistema. Os requisitos não funcionais explicitam regras de negócio, restrições ao sistema de acesso, requisitos de qualidade, desempenho e segurança, entre outros.
Identificação Nome Descrição
RNF01 Registro de lista O sistema deve registrar no banco de dados local a lista de compras criada pelo usuário, gerando um código único para cada lista.
RNF02 Armazenamento offline Todos os registros do sistema, apesar de originados de um servidor web, serão gravados no banco local.
Disponibilizando assim, a visualização/criação de listas off-line, possibilitando visualizar os produtos e os preços sincronizados até o momento.
RNF03 Sincronização com servidor
Os preços dos produtos serão sincronizados com o aplicativo mobile, por meio de um servidor web conectado a ele.
RNF04 Calcular valor total O aplicativo faz a soma do valor de todos os produtos para apresentar o valor final.
RNF05 Gerenciamento de custos
Serão gravados todos os valores de compra realizados pelo usuário, para que seja realizado o controle de gastos. RNF06 Atualização de valores O sistema deve, pelo identificador único do produto,
verificar se o mesmo já possui cadastro no sistema, caso tenha, quando o usuário informar o código de barras, o sistema informa e em seguida solicita se o usuário deseja atualizar os valores do referido produto.
RNF08 Acesso aos registros Os usuários do supermercado não têm acesso aos preços dos outros supermercados, apenas o usuário mobile. RNF09 Valor promocional do
produto
O campo valor promocional do produto é preenchido quando esse deverá ser o valor apresentado. Se o campo estiver preenchido esse valor é apresentado. Existe uma data de inicio e fim da promoção, dentro desta data, o valor estabelecido será utilizado.
Quadro 3 – Requisitos não funcionais
O diagrama de casos de uso apresentado na Figura 3 contém as funcionalidades essenciais do sistema vinculadas os atores que são: responsável pelo mercado, usuário mobile, servidor e administador. O responsável pelo mercado é quem cadastra os produtos no sistema. O usuário mobile tem acesso apenas à consulta de cadastros realizados pelo responsável pelo mercado, além de cadastrar suas listas de compras e visualizar o resultado de buscas e o valor total de uma lista de compras. O servidor é responsável por sincronizar os cadastros vindos do sistema web com o Android. O armazenamento offline será realizado pelo aplicativo
mobile, mas não dependerá de ações do usuário, será realizado automaticamente. O administrador cadastra os usuários do tipo responsável pelo mercado.
Figura 3 – Diagrama de casos de uso
O caso de uso manter produtos e manter usuários é apresentado no Quadro 4. Casos de uso:
Manter produtos e usuários Descrição:
Esse caso de uso se refere às operações de inclusão, consulta e alteração dos produtos e de usuários responsáveis por supermercado.
Evento Iniciador:
Necessidade de incluir, consultar ou alterar produtos. Necessidade de incluir, consultar ou alterar novos usuários Atores:
Responsável pelo supermercado quando do cadastro de produtos e administrador quando do cadastro de usuários responsáveis por supermercados.
Pré-condição:
Se a operação é de inclusão, não há pré-condições cadastrais necessárias, além de o usuário ter permissão para isso. As listas de produtos estão nos dispositivos móveis do usuário e a aplicação mobile apenas consulta o servidor, não realiza alterações ou inclusão. Os usuários são os responsáveis por mercados e que podem incluir e manter produtos desses mercados.
Sequência de Eventos:
1. Ator seleciona o cadastro de produtos ou de usuários.
2. Sistema apresenta o formulário de cadastro dos produtos ou de usuários. 3. Ator realiza a operação desejada: excluir, consultar ou alterar.
4. Sistema verifica se os dados para a operação estão consistentes e realiza a operação desejada.
Pós-Condição:
Operação de inclusão, exclusão, consulta, alteração. Linha 4: Dados não são válidos. Descrição
4.1 No momento de salvar, o sistema faz a verificação e constata que há dados inválidos. É emitida mensagem e retornado para o formulário de cadastro em estado de edição. Retorna ao passo 3, na operação sendo realizada, e o caso de uso prossegue com a sequência normal.
Linha 4: Dados de campos obrigatórios não preenchidos.
4.1 Sistema verifica, no momento de salvar os dados do formulário, que há campos obrigatórios não preenchidos, retorna para a edição do formulário e campos de preenchimento obrigatório são destacados.
Quadro 4 – Caso de uso manter produtos
No Quadro 5 está a descrição do caso de uso registrar preços. O registro de preço se refere ao valor normal ou promocional do produto.
Caso de uso:
Registrar preços Descrição:
O cadastro de preços se faz necessário para o funcionamento básico do sistema. Evento Iniciador:
Inclusão por parte do Responsável pelo supermercado no servidor web. Atores:
Responsável pelo supermercado. Pré-condição:
O supermercado e seu responsável devem estar cadastrados no sistema. O responsável deve fazer o login para o cadastro.
O produto deve estar cadastrado. Sequência de Eventos:
1. Ator acessa o formulário de cadastro do produto.
2. O sistema apresenta um formulário de cadastro para os produtos para que o preço seja incluído ou alterado.
3. O ator preenche o formulário com os respectivos dados de valor do produto para o preço desejado, seja o preço normal ou promocional, e o prazo de validade do valor promocional.
4. O sistema armazena os dados e apresenta-os na tela de confirmação. 5. Ator confirma os dados e o sistema os insere no banco de dados. 6. Sistema apresenta a mensagem de que os dados foram gravados. Pós-Condição:
Dados dos produtos inseridos no banco de dados. Nome do fluxo alternativo (extensão) Descrição
Linha 5: Dados incorretos. 5.1 No momento de salvar, o usuário identifica um registro incorreto e escolhe cancelar.
5.2 Retorna para o passo 2. A sequência do caso de uso prossegue com o fluxo normal.
Quadro 5 – Caso de uso registrar preços
Caso de uso:
Visualizar preços Descrição:
Esse caso de uso se refere à operação de consulta de preços. Evento Iniciador:
Necessidade de consultar preços. Atores:
Responsável pelo supermercado ou Usuário mobile. Pré-condição:
Produto e preço cadastrados no sistema. Sequência de Eventos:
1. Ator seleciona o cadastro do produto. 2. Sistema apresenta o formulário dos produtos.
3. Ator realiza a consulta de preços do produto desejado. Pós-Condição:
Operação de consulta realizada com sucesso. Linha 3: Ator usuário mobile Descrição
4.1 Caso o ator for o usuário mobile, o sistema apresentará os preços registrados de vários supermercados cadastrados no sistema, e no caso de ser o responsável pelo supermercado, apresentará apenas os valores cadastrados por aquele estabelecimento.
Quadro 6 – Caso de uso visualizar preços
O caso de uso compor lista é apresentado no Quadro 7. Caso de uso:
Compor lista. Descrição:
O usuário montará a lista desejada selecionando os produtos disponíveis no sistema. Evento Iniciador:
Ator seleciona a opção de cadastro de lista. Atores:
Usuário mobile. Pré-condição:
Mercados, produtos e preços cadastrados. Sequência de Eventos:
1. Ator seleciona a opção de cadastrar lista. 2. Sistema apresenta formulário.
3. Ator digita o nome do produto.
4. Sistema apresenta produtos correspondentes ao nome digitado. 5. Ator seleciona itens e suas quantidades para compor a lista. Os itens 3 a 5 são repetidos até que o ator considere a lista completa. 6. Sistema insere a lista de compras no banco de dados do aplicativo mobile. Pós-Condição:
Modelo de avaliação cadastrado no sistema. Quadro 7 – Caso de uso compor lista
A descrição do caso de uso visualizar melhor opção de compra é apresentada no Quadro 8.
Caso de uso:
Visualizar melhor opção de compra Descrição:
No momento da criação da lista, o usuário terá acesso aos preços de vários estabelecimentos, podendo assim escolher o menor preço listado.
Evento Iniciador:
Criação da lista de compras. Atores:
Usuário mobile. Pré-condição:
Produtos e preços cadastrados no sistema. Sequência de Eventos:
1. Ator acessa a tela de criação de lista de compra. 2. Ator cria a lista.
3. Sistema apresenta inicialmente a lista vazia e permite a inclusão de produtos desejados na lista para isso ator seleciona os produtos que deseja incluir na lista.
4. Sistema apresenta as informações dos preços dos produtos naquela lista. Quadro 8 – Caso de uso visualizar melhor opção de compra
A descrição do caso de uso visualizar gerenciamento de custos é apresentada no Quadro 9.
Caso de uso:
Visualizar gerenciamento de gastos. Descrição:
O usuário tem acesso a um relatório com os valores gastos por categoria de produtos ou produtos.
Evento Iniciador:
Selecionar a opção do relatório. Atores:
Usuário mobile. Pré-condição:
Ter a lista de compra realizada. Sequência de Eventos:
1. Ator acessa a tela de seleção de listas feitas.
2. Sistema apresenta as listas cadastradas pelo usuário. 3. Ator seleciona a lista desejada para montar o relatório.
4. Sistema apresenta o relatório contendo as informações dos preços dos produtos naquela lista, apresentando o valor gasto por categoria e produto.
Pós-Condição:
Relatório exibido.
Quadro 9 – Caso de uso visualizar gerenciamento de custos
A descrição do caso de uso realizar armazenamento offline é apresentada no Quadro 10.
Caso de uso:
Realizar armazenamento offline Descrição:
Os cadastros feitos pelo aplicativo mobile serão armazenados em um banco de dados local no dispositivo móvel.
Realizar algum cadastro no aplicativo mobile. Atores:
Usuário mobile Pré-condição:
Algum cadastro no aplicativo mobile. Sequência de Eventos:
1. Ator realiza cadastro no aplicativo mobile. 2. Sistema salva o cadastro realizado no banco local. Pós-Condição:
Os dados serão gravados no banco de dados SQLite do aplicativo mobile. Quadro 10 – Caso de uso realizar armazenamento offline
A descrição do caso de uso realizar sincronização é apresentada no Quadro 11. Caso de uso:
Realizar sincronização. Descrição:
Além dos cadastros feitos no aplicativo mobile, os cadastros vindos da parte web também serão armazenados localmente.
Evento Iniciador:
Selecionar a opção de sincronizar cadastros no aplicativo mobile. Atores:
Usuário mobile e servidor. Pré-condição:
Algum cadastro no servidor web. Sequência de Eventos:
1. Ator seleciona a opção sincronizar dados no aplicativo mobile. 2. O sistema inicia o processo de download dos dados do servidor.
3. O servidor disponibiliza os dados cadastrados no banco de dados para o download. Pós-Condição:
Os dados vindos do servidor serão gravados no SQLite do aplicativo mobile Quadro 11 – Caso de uso realizar sincronização
O ator responsável pelo mercado pode alterar a sua senha. A expansão desse caso de uso é apresentada no Quadro 12.
Caso de uso:
Alterar senha. Descrição:
No cadastro do ator responsável pelo mercado uma senha é gerada pelo administrador. O usuário pode alterar a senha inicialmente definida pelo administrador ou alterar as senhas que ele posteriormente cadastrar.
Evento Iniciador:
Selecionar a opção para alterar senha no aplicativo mobile. Atores:
Usuário responsável pelo mercado. Pré-condição:
Usuário ter sido cadastrado pelo administrador Sequência de Eventos:
1. Ator seleciona a opção para alterar senha.
2. O aplicativo mobile apresenta a tela para alteração de senha. 3. O usuário altera a senha.
3. O servidor armazena a nova senha cadastrada. Pós-Condição:
Nova senha registrada no banco de dados. Quadro 12 – Caso de uso Alterar senha
A aplicação servidor é web na qual são realizados os cadastros de produtos e de supermercados. Os produtos são organizados em categorias que também são cadastradas. E o cadastro de supermercados utiliza dados das tabelas de cidades e estados. Há ainda um cadastro de usuário para permitir definir que operações são realizadas pelo responsável pelo supermercado e quais são realizadas pelo administrador do sistema. O diagrama de entidades e relacionamentos da aplicação servidor é apresentado no Figura 4.
Figura 4 – Diagrama de entidades e relacionamentos – aplicativo servidor
As entidades do banco de dados da aplicação mobile são apresentadas no Figura 5. As tabelas Estados, Cidades, Supermercado, Produtos e Categorias são exportadas do aplicativo web. No diagrama da Figura 5 existem algumas entidades a mais em relação ao diagrama da aplicação servidor, pois é no aplicativo mobile que ficam registradas as listas de compras do
usuário, as listas estão divididas em duas tabelas (mestre e detalhe) para obter um melhor desempenho e organização do banco de dados. A importação é feita com uma conexão ao servidor Representational State Transfer (REST).
Figura 5 – Diagrama de entidades e relacionamentos – aplicativo mobile
4.3 APRESENTAÇÃO DO SISTEMA
A apresentação do sistema é separada em duas seções, sendo a primeira delas para o aplicativo mobile e a segunda para a aplicação servidor.
4.3.1 Aplicativo Mobile
No acesso no aplicativo é apresentada uma activity de slash com uma logo enquanto aguarda o seu carregamento. A Figura 6 apresenta a parte central dessa tela.
Figura 6 – Tela splash
Na primeira vez que o aplicativo é acessado são solicitadas algumas permissões de acesso necessárias para o uso do sistema, conforme mostra a Figura 7.
Figura 7 – Tela solicitação de permissões
Caso o usuário selecione a opção “Negar” (apresentada na mensagem mostrada na Figura 7), o sistema irá apresentar a seguinte mensagem “ É necessária a permissão de armazenamento para continuar “, conforme exibida na Figura 8.
Figura 8 – Tela solicitação de permissões, ação negar
Se o usuário selecionar a opção “Permitir”, as permissões serão concedidas e o sistema seguirá para a tela de seleção dos estados e das cidades, como apresenta a Figura 9. O usuário pode desconsiderar essa apresentação selecionando a opção “Pular” (região destacada da Figura 9).
A apresentação consiste em uma espécie de tutorial simples sobre as funcionalidades e a forma de uso do aplicativo. A primeira tela da introdução ao sistema, apresentada na Figura 9, apenas dá boas vindas ao usuário e o informa sobre o que se trata o aplicativo.
Figura 9 – Tela de apresentação do sistema – Primeira tela
A segunda tela do tutorial, conforme mostra a Figura 10, informa ao usuário que, periodicamente, ele deve atualizar os dados do aplicativo mobile com o servidor. E que isso é realizado acessando o botão de sincronização conforme destaca o texto da Figura 10.
Figura 10 – Tela de apresentação do sistema – Sincronização
A Figura 11 apresenta a terceira tela da introdução. Essa tela mostra como os produtos em promoção serão apresentados pelo aplicativo.
Figura 11 – Tela de apresentação do sistema: promoção
A quarta tela do tutorial, apresentada na Figura 12, mostra a localização do botão de adição de registros no aplicativo.
Figura 12 – Tela de apresentação do sistema: registros novos
A próxima tela do tutorial mostra brevemente o funcionamento da múltipla seleção de registros dentro do sistema e como acessá-la. A Figura 13 apresenta essa tela.
Figura 13 – Tela de apresentação do sistema – Múltipla seleção
O tutorial mostra também como o sistema apresenta os produtos que estejam inativados no servidor. Um produto é inativado quando o mercado não mais o possui para venda. Esse produto é mantido por questões de histórico do próprio usuário do aplicativo. Contudo, uma vez inativado não mais poderá ser selecionado para compor listas de compras. A Figura 14 apresenta a tela
Figura 14 – Tela de apresentação do sistema – Produtos Inativos
A última tela do tutorial mostra o botão que usuário deve acessar para que seja possível a filtragem utilizando a câmera, para os códigos de barras, e habilita o botão pronto, que finaliza a introdução. Essa tela é apresentada na Figura 15.
Figura 15 – Tela de apresentação do sistema: pesquisa por código de barras
Ao finalizar a apresentação passando pelo passo a passo ou clicando sobre o botão pular, será então apresentada a tela de seleção de estados e cidades, conforme exibido na Figura 16.
Figura 16 – Tela de estados e cidades, baixando do servidor
Nesse momento, o aplicativo realizará a busca pelos estados e cidades cadastradas. Os registros ficarão no servidor a fim de garantir que os dados estejam sempre atualizados, uma vez que o código identificador de cada cidade é gerado sequencialmente de maneira automática.
Caso ocorra alguma exceção no momento da conexão com o servidor, o sistema apresentará uma activity de erro com a opção de retornar à tela anterior para que seja possível uma nova tentativa de conexão, conforme mostra a Figura 17.
Figura 17 – Tela de erro de conexão
Após o término do download dos registros, o aplicativo tornará disponível os spinners de cidade e estado para escolha do usuário, como apresentado na imagem da Figura 18.
Figura 18 – Tela de estados e cidades
No momento em que o usuário selecionar um estado, ficará disponível a opção para a escolha da cidade, tomando como base nas opções, o estado anteriormente selecionado.
Na hipótese de não haver nenhum supermercado (tratados também como mercados neste texto) cadastrado na cidade selecionada pelo usuário, o aplicativo mostrará uma mensagem informando sobre sua inexistência e, consequentemente, não permitirá o uso das funcionalidades do sistema, conforme mostra a Figura 19.
Figura 19 – Cidade sem mercados cadastrados
Na condição de existirem mercados cadastrados na cidade selecionada pelo usuário, o evento do clique do botão “Leve-me à tela inicial”, apresentado na Figura 20, será habilitado para que seja possível prosseguir com o uso do aplicativo.
Figura 20 – Cidade com mercados cadastrados
Após efetuar a ação de clique sobre o botão, será apresentada a caixa de diálogo ao usuário para que informe o nome pelo qual ele quer ser chamado durante a utilização do aplicativo, a fim de que este fique armazenado no banco de dados do sistema, conforme mostra a Figura 21.
Figura 21 – Tela de estados e cidades: solicitação de nome do usuário
Após o usuário informar seu nome e efetuar a ação de clique sobre o botão “OK”, será apresentada a tela inicial do sistema, conforme mostra a Figura 15. Caso o usuário selecione a opção “Espera”, o aplicativo fechará a caixa de diálogo e aguardará o usuário dar sequência na atividade que deseja realizar.
O leiaute do sistema é composto por duas áreas: a área superior, que contém o nome e alguns botões de ações de acordo com a activity atual, e a área central que contém o conteúdo da activity que está sendo navegada. A Figura 22 apresenta as duas áreas nas quais a página foi organizada.
Figura 22 – Tela inicial: apresentação da listagem de produtos
Na área central da página é visualizado o espaço de apresentação dos produtos em promoção e um card com dicas sobre o sistema. Ao acessar o botão localizado na área superior no canto direito, (região circulada na Figura 22), é apresentada a opção de sincronização, cuja função é realizar os downloads dos cadastros de produtos de cada mercado daquela região e das categorias do servidor web, conforme mostra a Figura 22.
Ao pressionar o botão de sincronização, o acesso às funcionalidades do aplicativo fica bloqueado até que a ação se torne completa, com ou sem sucesso, em seguida será apresentada a mensagem ao usuário, conforme apresentado na Figura 23.
Figura 23 – Tela inicial: ação de sincronização com o servidor web
Caso a sincronização seja bem sucedida será apresentada a mensagem no estilo snackbar, conforme a Figura 24.
Figura 24 – Tela inicial: sucesso na sincronização
Caso não haja sucesso na sincronização, o sistema apresentará a activity de exceção de conexão, com a opção para voltar. Uma terceira área torna-se visível ao pressionar o botão de
ações localizado na área superior, no canto esquerdo da activity, (região circulada na Figura 18). Nessa activity são mostradas as opções de acesso às funcionalidades do sistema, bem como o nome do usuário e a cidade na qual ele está cadastrado. A Figura 25 apresenta essa tela.
Figura 25 – Tela de acesso às funcionalidades do sistema
Ao selecionar a opção “Listar Produtos” o aplicativo redirecionará para a activity que contém a listagem geral dos produtos, conforme imagem da Figura 26.
Figura 26 – Activity listagem geral dos produtos
Acessando o campo de pesquisa, é possível digitar alguma palavra-chave para o nome do produto, momento em que o aplicativo filtrará os resultados conforme a Figura 27.
Figura 27 – Activity listagem geral dos produtos: filtragem por palavra-chave Para efetivar a consulta, é necessário acessar o botão representado pelo ícone de uma lupa, na área superior do aplicativo, ao lado do campo pesquisa.
Para retornar para a listagem aos filtros originais, exposta na Figura 26, basta acessar o botão de seta, na área superior do aplicativo no canto esquerdo.
Ao acessar o botão representado pelo ícone de uma câmera, na área superior do aplicativo, no canto direito, exibido na Figura 20, o usuário será redirecionado para a tela de filtro por código de barras pela câmera do celular. A Figura 22 apresenta uma imagem do uso do leitor de código de barras.
Figura 28 – Activity filtro por código de barras
Ao posicionar corretamente a área demarcada na activity com o código de barras, o aplicativo realizará busca no banco de dados a partir da numeração do código de barras lida pela câmera do aplicativo. Caso haja sucesso na busca, o usuário será redirecionado para a tela de listagem específica do produto encontrado, mostrando-o com valores cadastrados por diferentes mercados, possibilitando a comparação de preço entre eles, conforme apresentado na Figura 29.
A activity dos produtos é dividida em duas áreas, a área da categoria, que contém apenas sua descrição e a área dos itens, que compreende os produtos pertencentes à categoria em questão. O agrupamento da activity é feito por categoria.
Figura 29 – Activity produto específico por código de barras
Caso seja acessado o botão representado pelo ícone de informação, o aplicativo apresentará algumas referências sobre o produto selecionado, conforme apresenta a tela da Figura 30. Se o produto estiver em promoção, serão apresentadas as datas de início e fim da referida promoção.
Figura 30 – Activity produto específico: informações do produto
Caso o usuário pressione a tecla de voltar durante a leitura, o aplicativo vai cancelar a operação e retornar a activity de listagem geral de produtos. Caso o aplicativo não encontre
nenhum produto cadastrado no banco com o código de barras lido pela câmera, o usuário será redirecionado para a activity de listagem geral de produtos, informando o usuário que não há produto cadastrado no sistema com o referido código de barras. A imagem da Figura 31 apresenta a tela com essa mensagem e a listagem geral dos produtos.
Figura 31 – Activity produto específico por código de barras com o produto inexistente
Caso o usuário selecione o botão representado pelo ícone de uma engrenagem na área superior do aplicativo, no canto direito da tela, será disponibilizado um formulário para outras opções de filtro, conforme apresentado na Figura 32.
Figura 32 – Activity produto específico: formulário de filtros
Os filtros nessa activity são cumulativos, quanto mais específicos forem, mais precisos serão os resultados. Os spinners que estiverem com a opção “Não filtrar”, terão suas condições ignoradas pelo filtro, o mesmo acontece se o campo “nome” permanecer em branco e a checkbox não for marcada.
Ao acessar o botão “Pesquisar”, o aplicativo trará os produtos pesquisados pelo usuário, conforme apresentado na Figura 33. Quando o produto estiver em promoção é adicionada uma tag logo acima do seu valor para indicar essa condição.
Figura 33 – Activity produto específicos: indicação de produto em promoção
Quando o usuário efetuar a ação de clique na opção “Minhas Listas”, ele será redirecionado para a activity que contém as listas de compras cadastradas no sistema. Se ainda não houver nenhuma lista cadastrada, será apresentada apenas uma mensagem na tela “Sem dados para exibir”. Para cadastrar novas listas de compras, é necessário efetuar a ação de clique sobre o botão de adição em destaque, conforme mostra a Figura 34.
Figura 34 – Tela de Listas de compras vazia e botão para adição de lista Ao efetuar a ação do clique no botão de adição, será mostrado o pop-up de cadastro de cabeçalho da lista de compras, que contém informações como a data da lista, uma descrição não obrigatória e um nome para representá-la, conforme mostra a Figura 35.
Figura 35 – Tela de Listas de compras: formulário de inclusão
Ao salvar as informações selecionadas, o formulário é fechado e o usuário é automaticamente redirecionado para a listagem dos registros cadastrados, conforme mostra a Figura 36.
Figura 36 – Tela de Listas de compras: formulário de inclusão
As informações da listagem são compostas pelo valor total da lista de compras, o nome e a data. O campo “Total” é alimentado pela soma dos produtos que ainda não foram marcados como “comprado”. O campo “Gasto” é alimentado pela soma dos produtos que estão marcados como “comprado”. Ao realizar a ação de clique longo sobre alguma lista de compras, o aplicativo entrará no modo de multi-seleção.
Ao selecionar apenas um registro, ele poderá ser editado por meio de um toque no ícone representado por um lápis localizado na área superior da activity, como mostra a Figura 37 em destaque no canto superior direito. Se eventualmente o usuário selecionar mais de um registro fará com que o ícone em questão desapareça.
Figura 37 – Tela de Listas de compras: multi-seleção
Quando o valor gasto for igual ao total, a lista será marcada como “Completa”, que significa que o usuário já finalizou aquela lista de compras.
Selecionando um ou mais registros, há também, a opção de exclusão, que poderá ser acessada por meio do ícone representado por uma lixeira (área em destaque no canto superior direito da Figura 37).
Se todos os registros forem desselecionados ou ao executar a ação de clique sobre o ícone representado por uma seta, o modo de multi-seleção será cancelado, então a activity retornará ao seu estado normal conforme a Figura 26.
Acessando o ícone de edição, é apresentado o formulário de edição apresentado na Figura 38.
Figura 38 – Tela de Listas de compras: formulário de edição
Acessando o ícone de exclusão, será apresentada uma mensagem de confirmação, indagando se o usuário deseja realmente remover os registros, como apresenta a Figura 39.
Caso o usuário selecione a opção “Sim”, o aplicativo removerá do banco de dados os registros selecionados na tela e mostrará a mensagem em destaque na parte inferior na Figura 40.
Figura 40 – Tela de Listas de compras: listagem após exclusão
Ao executar a ação de clique sobre algum item da listagem, o aplicativo apresentará a activity com a listagem dos produtos da lista de compras. A Figura 41 apresenta a tela que é exibida quando não há listagens cadastradas, com a mensagem “Sem dados para exibir”.
Figura 41 – Tela de produtos da lista de compras
Para cadastrar produtos na lista, é necessário efetuar a ação de clique sobre o botão de adição em destaque, conforme mostra a Figura 41. Ao efetuar a ação de clique sobre o botão de seta indicando para a esquerda, o aplicativo irá redirecionar para a tela de listas de compras conforme apresentado na Figura 40. Ao efetuar a ação do clique no botão de adição, será mostrada a listagem geral de produtos, que contém suas informações agrupadas, como apresentado na Figura 26. Após selecionar o produto na listagem geral, será apresentada a listagem de produtos específica como mostrado na Figura 29.
Executando o evento de clique em qualquer registro de produto específico, ele será adicionado à lista de compras atual e então o usuário será novamente redirecionado para a tela de produtos da lista de compras, porém com as informações do produto selecionado. Essa tela é apresentada na Figura 42.
Figura 42 – Tela de produtos da lista de compras com produtos na lista A listagem apresentada é composta pelos campos nome do produto, quantidade, total e nome do mercado. Ao executar a ação de clique no ícone de edição representado pelo lápis, conforme destaque na Figura 42, será aberto um formulário de edição. Nesse formulário é possível alterar a quantidade do produto na lista por meio do componente Number Picker, como representado na Figura 43.
Figura 43 – Tela para alterar quantidade do produto
Após selecionar a quantidade desejada, caso o usuário opte por “Salvar”, o aplicativo atualizará o registro do produto da lista de compras. Em seguida o formulário será fechado redirecionando o usuário para a tela de listagem dos produtos da lista de compras novamente. Essa tela é apresentada na Figura 42.
Ao realizar a ação de clique sobre algum produto da lista de compras, o aplicativo marcará o produto como “comprado”, fazendo com que ele seja “riscado”, ou seja, apareça com um traço indicando que já não faz parte da lista de compra, e o seu valor não será apresentado na soma do total da lista de compras, como mostra a Figura 44. A ideia de “riscar” o nome do produto é semelhante à ação que as pessoas fazem ao ir com uma lista impressa de compras ao supermercado, por exemplo, riscando o produto que foi adquirido.
Figura 44 – Tela de Produtos da lista de compras: produto marcado como “comprado”
Ao realizar a ação de clique longo sobre algum produto da lista de compras, o aplicativo entrará no modo de multi-seleção.
Selecionando um ou mais registros, a opção de exclusão será habilitada. Essa opção poderá ser acessada por meio do ícone representado por uma lixeira, em destaque na Figura 45.
Figura 45 – Tela de Produtos da lista de compras: multi seleção
Acessando o ícone de exclusão, será apresentada uma mensagem de confirmação, indagando se o usuário deseja realmente remover os registros. Essa mensagem é apresentada na Figura 46.
Caso o usuário selecione a opção “Sim”, o aplicativo removerá do banco de dados os registros selecionados na tela e mostrará a mensagem em destaque na Figura 47.
Figura 47 – Listagem de Produtos da lista de compras: mensagem de exclusão Quando o usuário efetuar a ação de clique na opção “Dashboard”, ele será redirecionado para a activity que contém informações sobre as listas de compras cadastradas no sistema. Nesta activity existem opções para visualização de relatório ou gráfico, como mostra a Figura 48.
Figura 48 – Dashboard: opções
Ao selecionar qualquer uma das opções, será apresentado o Dialog para a filtragem de datas, conforme ilustra a imagem 49.
