CAMPUS QUIXADÁ
CURSO DE GRADUAÇÃO EM ENGENHARIA DE SOFTWARE
LEO JAIMESSON SOUSA DA SILVA
SOLID WM: UMA APLICAÇÃO WEB PROGRESSIVA PARA A GESTÃO DOS RESÍDUOS SÓLIDOS DA UFC QUIXADÁ UTILIZANDO VISUALIZAÇÃO DE
DADOS
QUIXADÁ 2018
LEO JAIMESSON SOUSA DA SILVA
SOLID WM: UMA APLICAÇÃO WEB PROGRESSIVA PARA A GESTÃO DOS RESÍDUOS SÓLIDOS DA UFC QUIXADÁ UTILIZANDO VISUALIZAÇÃO DE DADOS
Trabalho de Conclusão de Curso apresentado ao Curso de Graduação em Engenharia de Software do Campus Quixadá da Universidade Federal do Ceará, como requisito parcial à obtenção do grau de bacharel em Engenharia de Software. Orientador: Prof. Me. Victor Aguiar Evangelista de Farias
QUIXADÁ 2018
Biblioteca Universitária
Gerada automaticamente pelo módulo Catalog, mediante os dados fornecidos pelo(a) autor(a)
S581s Silva, Leo Jaimesson Sousa da.
Solid WM: uma aplicação web progressiva para a gestão dos resíduos sólidos da UFC Quixadá utilizando visualização de dados / Leo Jaimesson Sousa da Silva. – 2017. 55 f. : il. color.
Trabalho de Conclusão de Curso (graduação) – Universidade Federal do Ceará, Campus de Quixadá, Curso de Engenharia de Software, Quixadá, 2017.
Orientação: Prof. Me. Victor Aguiar Evangelista de Farias.
1. Software-Desenvolvimento. 2. Resíduos sólidos-Administração. 3. Progressive Web App. 4. Visualização de dados. I. Título.
LEO JAIMESSON SOUSA DA SILVA
SOLID WM: UMA APLICAÇÃO WEB PROGRESSIVA PARA A GESTÃO DOS RESÍDUOS SÓLIDOS DA UFC QUIXADÁ UTILIZANDO VISUALIZAÇÃO DE DADOS
Trabalho de Conclusão de Curso apresentado ao Curso de Graduação em Engenharia de Software do Campus Quixadá da Universidade Federal do Ceará, como requisito parcial à obtenção do grau de bacharel em Engenharia de Software.
Aprovada em:____/_____/_______.
BANCA EXAMINADORA
Prof. Me. Victor Aguiar Evangelista de Farias (Orientador)
Universidade Federal do Ceará (UFC)
Prof. Me. Aníbal Cavalcante de Oliveira Universidade Federal do Ceará (UFC)
Prof. Dr. Paulo Victor Barbosa de Sousa Universidade Federal do Ceará (UFC)
AGRADECIMENTOS
Aos meus pais, irmãos, que nos momentos de minha ausência dedicados ao estudo superior, sempre fizeram entender que o futuro é feito a partir da constante dedicação no presente! A meu orientador Prof. Me. Victor Aguiar Evangelista de Farias, por toda a orientação, contribuição, apoio e conhecimentos compartilhados, aprendi muito.
Aos meus amigos e colegas de graduação, em especial ao Gleydson, Ernandes, Davi, Samuel, Brian e Rodrigo, sem vocês eu não teria chegado tão longe dadas todas as adversidades durantes esses 4 anos. Levo vocês pra vida.
Agradeço a todos os professores por me proporcionar o conhecimento não apenas racional, mas a manifestação do caráter e afetividade da educação no processo de formação profissional, por tanto que se dedicaram a mim, não somente por terem me ensinado, mas por terem me feito aprender.
do trabalho duro.”
RESUMO
Gerir a produção de resíduos sólidos em uma instituição não é uma tarefa fácil. É necessário muito esforço para registrar e principalmente analisar os resíduos produzidos. Pensando nisso, este trabalho apresenta uma proposta de uma aplicação web progressiva para auxiliar o processo de gestão e análise das coletas de resíduos sólidos. A aplicação é capaz de gerar relatórios e gráficos por meio de consultas realizadas em um servidor. As consultas são realizadas por meio de filtros de data e tipo de resíduo coletado. A aplicação proposta foi desenvolvida seguindo algumas métricas esperadas por uma aplicação web progressiva e em conformidade com os requisitos obtidos em uma entrevista realizada com o usuário da aplicação. Ao fim do desenvolvimento, a aplicação foi hospedada em um servidor remoto e liberada para o usuário testá-la e avalia-la.
Palavras-chave: Desenvolvimento de software. Gestão de resíduos sólidos. Aplicação web progressiva. Visualização de dados.
Managing the production of solid waste in an institution is not an easy task. Much effort is required to record and analyze the waste produced. Thinking about this, this paper presents a proposal for a progressive web application to assist the process of management and analysis of solid waste collections. The application is capable of generating reports and graphs through queries performed on a server. The queries are performed through date filters and type of waste collected. The proposed application was developed following some metrics expected by a progressive web application and in accordance with the requirements obtained in an interview with the application user. At the end of the development, the application was hosted on a remote server and released for the user to test and evaluate it.
Keywords: Software development. Solid waste management. Progressive web app. Data visualization.
LISTA DE FIGURAS
Figura 1 – Exemplo de App Shell . . . 22
Figura 2 – Relacionamento entre um service worker e aplicativos de serviço . . . 22
Figura 3 – Opções de exibição do manifesto . . . 26
Figura 4 – Tela de início . . . 32
Figura 5 – Tela de acesso . . . 32
Figura 6 – Tela de visão geral . . . 34
Figura 7 – Tela de tipos de resíduos sólidos, visão geral . . . 34
Figura 8 – Tela de tipos de resíduos sólidos, visão cadastro . . . 35
Figura 9 – Tela de coletas, visão geral . . . 35
Figura 10 – Tela de coletas, visão de cadastro . . . 36
Figura 11 – Tela de usuários, visão geral . . . 36
Figura 12 – Tela de usuários, visão de cadastro . . . 38
Figura 13 – Tela de análise . . . 38
Figura 14 – Tela de relatórios . . . 39
Figura 15 – Visão mobile . . . 39
LISTA DE ABREVIATURAS E SIGLAS
PWA Progressive Web App
U I User Interface
1 INTRODUÇÃO . . . 14
2 TRABALHOS RELACIONADOS . . . 17
2.1 Software para gestão de resíduos sólidos em cooperativas de recicladores 17 2.2 RECICLATI – Sistema para o gerenciamento de resíduos eletroeletrônicos 17 2.3 SE Waste Gestão de Resíduos . . . 18
3 FUNDAMENTAÇÃO TEÓRICA . . . 19
3.1 Aplicação Web Progressiva . . . 19
3.1.1 App Shell . . . 20
3.1.2 Service Workers . . . 20
3.1.3 Web App Manifest . . . 21
3.2 Visualização de dados . . . 21 3.3 Tecnologias Backend . . . 24 3.3.1 Node.js . . . 24 3.3.2 Express . . . 24 3.3.3 MongoDB . . . 25 3.3.4 WebService . . . 25 4 PROCEDIMENTOS METODOLÓGICOS . . . 27
4.1 Levantar requisitos para identificar dados e representações visuais rele-vantes . . . 27
4.2 Selecionar visualizações para aplicação . . . 27
4.3 Desenvolvimento do backend da aplicação . . . 28
4.4 Desenvolvimento da Interface de Usuário . . . 28
4.5 Configurar aplicação para ser uma PWA . . . 28
4.6 Teste durante desenvolvimento . . . 29
4.7 Implantação da aplicação . . . 29 4.8 Validação da aplicação . . . 29 5 A APLICAÇÃO SOLID WM . . . 30 5.1 Requisitos . . . 30 5.2 O desenvolvimento do Solid WS . . . 31 5.2.1 Tela de início . . . 31
5.2.2 Tela de acesso . . . 31
5.2.3 Tela de visão geral . . . 31
5.2.4 Tela tipos de resíduos sólidos . . . 33
5.2.5 Tela de coletas . . . 33 5.2.6 Tela de usuários . . . 33 5.2.7 Teda de análises . . . 33 5.2.8 Tela de relatórios . . . 37 5.2.9 Visão mobile . . . 37 6 AVALIAÇÃO . . . 40 7 RESULTADOS . . . 42
7.1 Interpretação dos resultados obtidos com o questionário . . . 42
7.2 Lighthouse . . . 43
8 CONCLUSÕES E TRABALHOS FUTUROS . . . 46
REFERÊNCIAS . . . 47
APÊNDICE A – TERMO DE CONSENTIMENTO LIVRE E ESCLA-RECIDO . . . 50
APÊNDICE B – TERMO DE CONSENTIMENTO PARTICIPAÇÃO DE TESTE . . . 51
APÊNDICE C – QUESTIONÁRIO DE AVALIAÇÃO DA APLICAÇÃO 52 APÊNDICE D – ROTEIRO DA ENTREVISTA . . . 55
1 INTRODUÇÃO
A revolução industrial acelerou a urbanização de forma global. Com a industrializa-ção sucedeu-se o êxodo rural, que consequentemente trouxe consigo o aumento da produindustrializa-ção de resíduos sólidos (SILVA et al., 2014; GARCIA et al., 2016). Resíduos sólidos são resíduos nos estados sólidos e semi-sólidos que não possuem mais utilidade, provenientes de atividades humanas (TÉCNICAS, 2004). O descarte e a destinação incorreta destes resíduos pode ocasionar danos graves á saúde pública e ao meio ambiente. A responsabilidade pela gestão dos resíduos é de todos os envolvidos no processo, pois sua produção é pertinente ao cotidiano da sociedade (RATHI, 2006).
Realizar uma boa gestão de resíduos sólidos em uma instituição não é uma tarefa tri-vial. O gestor pode deparar-se com uma enorme quantidade de dados, o que ocasiona dificuldade em seu controle e na extração de novas informações (STAIR; REYNOLDS, 2013). O aumento dos dados pode gerar problemas para análise e compreensão. Eles se tornam irrelevantes quando não geram informações. Visto que eles necessitam ter relação entre si e possuir sentido dentro de um contexto para que dessa forma o conhecimento seja gerado (HEY, 2004). Levando isso em consideração, o uso de visualizações de dados e de ferramentas digitais podem proporcionar um melhor esclarecimento para os dados.
Visualização de dados é um processo cognitivo que busca auxiliar o processo de análise e compreensão de um conjunto de dados. Seu uso gera simplificação no entendimento das informações, melhorando a compreensão humana, de forma que a tomada de decisão se torna mais simples, eficiente e, principalmente, mais assertiva (MUNZNER, 2014).
Já uma ferramenta digital é tudo o que foi desenvolvido no intuído de permitir realizar uma comunicação entre o homem e algum aparelho tecnológico (GIBBS; OWENS, 2012). Seu uso pode trazer inúmeros benefícios à instituição, como a melhoria no acesso das informações, propiciando relatórios mais precisos e rápidos com menor esforço, melhoria da produtividade, redução dos custos das operações e aumento do nível de motivação e de comprometimento das pessoas envolvidas (STAIR; REYNOLDS, 2013).
Com a finalidade de oferecer uma gestão eficiente, disponibilizar relatórios e índices que auxiliam no controle de processos administrativos e tomada de decisão, o trabalho de Rollwagen (2014) apresenta o processo de desenvolvimento e implantação de seu software para gestão de resíduos sólidos em cooperativas de recicladores. Outro software para gestão de resíduos é o SE Waste da SoftExpert que permite que as empresas gerenciem e reduzam seu
15
resíduos, garantam conformidade regulatória e aprimorem seu desempenho ambiental.
Estas soluções são exemplos de ferramentas digitais que podem proporcionar vários benefícios e auxiliar as organizações interessadas diante da problemática apresentada. Contudo, as mesmas possuem limitações de serem acessíveis apenas por meio de uma plataforma ou sistema operacional especifico, tal limitação ocorre devido ao grande nível de esforço necessário para a criação de várias aplicações destinadas a sistemas operacionais e plataformas distintas.
Diante deste cenário, surgem as Aplicações Web Progressivas, que possibilitam a criação de aplicações multi-plataformas de forma muito mais rápida e fácil usando tecnologias da web (XANTHOPOULOS; XINOGALOS, 2013). Uma Aplicação Web Progressiva é a combinação das melhores experiências e tecnologias disponíveis na web moderna. Basicamente, trata-se de uma página web regular que pode ser apresentada ao usuário como um aplicativo web tradicional ou um aplicativo móvel instalável (MISHRA, 2016).
Grandes empresas como o Twitter1, OLX2, AlieExpress3, Flipkart4e Konga5já estão se beneficiando com o uso das Aplicações Web Progressivas. Todas essas empresas obtiveram ganhos significativos em relação ao tempo de permanência do usuário, diminuição no tráfego de dados na rede, entre outros, com a adoção das novas tecnologias da web. O Twitter em especial conseguiu um aumento de 75% no total de tweets enviados, além de reduzir o consumo de dados em cerca 70% (DEVELOPERS, 2017).
O uso desta tecnologia neste trabalho possibilitará que o usuário possa acessar a aplicação em qualquer dispositivo desejado sem a necessidade de realizar uma instalação prévia por meio de uma loja de aplicativos para conseguir acessar o conteúdo disponível, desde que o mesmo possua um navegador atualizado. Além de que, ao acessar a aplicação em seu dispositivo móvel, o usuário será convidado a adicionar um atalho em seu dispositivo móvel ou desktop. A medida que a aplicação for evoluindo ele poderá adicionar recursos como notificações e suporte ao funcionamento em modo offline. Proporcionando-o uma experiência nativa em todos seus aspectos.
Com isso, o objetivo deste trabalho é implementar uma aplicação para que a prefei-tura da Universidade Federal do Ceará - Campus Quixadá possa realizar a gestão dos resíduos sólidos produzidos. Além de fazer todo o processo de elicitar quais dados são importantes para
1 https://developers.google.com/web/showcase/2017/twitter 2 https://developers.google.com/web/showcase/2017/olx 3 https://developers.google.com/web/showcase/2016/aliexpress 4 https://developers.google.com/web/showcase/2016/flipkart 5 https://developers.google.com/web/showcase/2016/konga
serem registrados e que informações devem ser extraídas através de visualizações, selecionar visualizações para os dados das coletas, implementar interface de usuário com visualizações, e desenvolver o serviço que irá registrar e disponibilizar os dados das coletas. A implementação aconteceu a partir de um projeto de interface já desenvolvido em outro projeto, o SolidBits (COSTA., 2018), que foi aproveitado neste trabalho para garantir uma futura integração em um novo trabalho. Essa aplicação é capaz de gerar dados úteis que atualmente ainda não são explora-dos pela instituição, o que alimenta algumas visualizações de daexplora-dos que são disponibilizadas na aplicação com o objetivo de auxiliar os usuários a lidarem melhor com a coleta e a gestão desses resíduos.
17
2 TRABALHOS RELACIONADOS
Nesta Seção será apresentado os trabalhos relacionados do presente trabalho.
2.1 Software para gestão de resíduos sólidos em cooperativas de recicladores
No trabalho de Rollwagen (2014) é apresentado um software de gestão de resíduos sólidos voltado para cooperativas de recicladores. O software tem o objetivo de proporcionar uma gestão eficiente, disponibilizar relatórios e índices que auxiliam no controle de processos administrativos e na tomada de decisão.
Em sua aplicação existe a divisão de papéis de usuários para que dessa forma, o acesso a determinados recursos do software só possa ser acessado pelo usuário que tem permissão. Onde um usuário com papel de operador possui a responsabilidade de cadastrar cooperativas, recicladores, materiais recicláveis, comprador de resíduos e despesas das cooperativas, também podendo consultar dados e listar relatórios sobre os dados cadastrais. E o usuário com papel de coordenador tem a responsabilidade de cadastrar os operadores do sistema, cooperativas e recicladores, além de consultar e gerar relatórios relacionados aos cadastros.
No presente trabalho também foi desenvolvido um módulo para emissão de relatórios. Diferente deste trabalho, o software proposto no trabalho de Rollwagen (2014) não conta com um módulo de visualização de dados para auxiliar seus usuários. O uso de visualizações em seu trabalho auxiliara as cooperativas a analizarem melhor seus dados.
2.2 RECICLATI – Sistema para o gerenciamento de resíduos eletroeletrônicos
No trabalho de Rocha (2014) é apresentado o RECICLATI, um aplicativo para gestão de resíduos eletroeletrônicos. O aplicativo tem o objetivo de auxiliar o gerenciamento desses resíduos em centros de reciclagem, tornar mais rápido e simples o descarte destes tipo de equipamentos para seus usuários e conscientizar a população a não descartarem esses equipamentos no lixo comum.
Em seu trabalho, Rocha (2014) proporciona ao usuário a possibilidade de realizar o acesso ao aplicativo em qualquer localidade, pois todo o serviço é gerenciado através do acesso à Internet. Os usuários conseguem realizar operações de cadastro, descarte ou reserva de equipamentos. Também é possível atualizar dados cadastrais, realizar lançamentos e acessar relatórios, tudo isso de acordo com o perfil do usuário e o nível de acesso que ele possui.
No presente trabalho, o usuário também pode acessa o aplicativo de qualquer local, e em qualquer dispositivo. Diferente deste trabalho, o RECICLATI não disponibiliza visualizações para os seus dados. O uso de visualizações ajudaria na análise mais efetiva dos dados, além de melhorar a tomada de decisões dos seus usuários.
2.3 SE Waste Gestão de Resíduos
O SE Waste é um software para gestão de resíduos sólidos pago desenvolvido pela SoftExpert (2018). Ele disponibiliza funcionalidades que permitem que empresas possam gerenciar e reduzir seus resíduos, além de garantir conformidade regulatória, aprimoramento de desempenho ambiental, e análise e monitoramento dos resíduos produzidos. O SE Waste também oferece mecanismos automáticos que permitem gerenciar todo o ciclo de vida dos resíduos.
Esse software dispõe de funcionalidades como monitoramento de quantidades e tipos de resíduos armazenados em cada área, notificações das movimentações e expiração de resíduos, visões gerenciais de todos os dados conhecidos, relatórios de todos os produtores de resíduos associados à um resíduo em particular, somatório dos contêineres movimentados, transportes agrupados por resíduo, dentre diversas outras funcionalidades. No presente trabalho também é realizado a análise e gestão dos resíduos.
19
3 FUNDAMENTAÇÃO TEÓRICA
Nesta Seção serão apresentados os principais conceitos utilizados para o desenvolvi-mento deste trabalho.
3.1 Aplicação Web Progressiva
Uma Aplicação Web Progressiva (PWA, do inglês Progressive Web App) é um conjunto de experiências e tecnologias que combinam o melhor da web moderna e o melhor dos aplicativos móveis nativos para melhorar a qualidade da experiência do usuário em aplicativos web (MISHRA, 2016; ATER, 2017).
Por definição, uma PWA deve funcionar em qualquer dispositivo independente da plataforma e do navegador utilizado pelo usuário. Ao realizar o acesso a uma PWA, o usuário não necessita realizar a instalação previa do aplicativo por meio de lojas de aplicativos como Play Store1e App Store2para conseguir acesso ao conteúdo (MISHRA, 2016; ATER, 2017).
De início a PWA é apresentada ao usuário como um simples website, mas à medida que o usuário utiliza e se envolve com a aplicação, ela vai ganhando novas funcionalidades que as transformam em algo muito similar a um aplicativo nativo tradicional (MISHRA, 2016; ATER, 2017). O presente trabalho propôs a implementação de uma PWA, que foi realizada com o objetivo de tornar a experiência da aplicação similar ao de um aplicativo nativo, quando utilizada em seu dispositivo móvel.
Alguns requisitos são esperados em uma PWA. Tais requisitos foram definidos pela Google. Para satisfazer esses requisitos as aplicações devem possuir as seguintes características (LEPAGE, 2018):
• Progressivo - Funciona para qualquer usuário, independentemente do navegador escolhido, pois é criado com aprimoramento progressivo como princípio fundamental.
• Responsivo - Se adequa a qualquer formato: desktop, celular, tablet ou o que for inventado a seguir.
• Independente de conectividade - Aprimorado com service workers para trabalhar off-line ou em redes de baixa qualidade.
• Semelhante a aplicativos - Fornecem uma aparência de aplicativos nativos para os usuá-rios, com interações e navegação característicos dessas aplicações, pois é compilado no
1 https://play.google.com/store
modelo de App Shell.
• Atual - Sempre atualizado graças ao processo de atualização do service worker.
• Seguro - Fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja adulterado.
• Descobrível - Pode ser identificado como aplicativo graças aos manifestos W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.
• Reenvolvente - Facilita o reengajamento com recursos como notificações push.
• Instalável - Permite que os usuários "guardem"os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos.
• Linkável - Compartilha facilmente por URL, não requer instalação complexa.
3.1.1 App Shell
App Shell é uma abordagem de projeto que possui como princípio básico, dividir a interface de usuário (UI, do inglês User Interface) estática do conteúdo que será carregado dinamicamente. Em outras palavras, o App Shell é um pacote de código composto pelo esqueleto básico da UI, similar ao código publicado na loja de um aplicativo nativo, consistindo em todos os componentes de interface necessários para o funcionamento do aplicativo. Conforme ilustrado na figura 1
O uso dessa abordagem em aplicativos web traz consigo algumas vantagens, como a melhoria na percepção do usuário em relação a desempenho, usabilidade e economia no uso de dados, visto que todos os arquivos estáticos da UI são baixados no primeiro acesso e armazenados na cache do navegador. Sempre que a aplicação é inicializada, uma UI mínima é carregada da cachedo navegador para que a inicialização ocorra da forma mais rápida possível, fornecendo assim uma experiência off-line semelhante à nativa para o usuário. (OSMANI, 2018; MISHRA, 2016)
3.1.2 Service Workers
Service workers são scripts que são executados nos bastidores do navegador, separado do restante dos scripts que suprem a aplicação em uso. Em geral, eles atuam como um servidor proxyque fica entre a aplicação web, o navegador e a rede. Seu uso, permite interceptar pedidos de rede para realizar a criação de experiências off-line avançadas, sincronizações periódicas em
21
segundo plano e notificações push (MISHRA, 2016; GAUNT, 2018a; W3C, 2017). Conforme ilustrado na figura 2.
A execução de um service worker ocorre em um processo desassociado, o que significa que ele não é encerrado quando a aba do navegador é fechada. Essa separação só é possível porque o service worker é executado em uma thread separada em segundo plano. Este recurso permite que o aplicativo mantenha-se sempre atualizado e receba notificações. (MISHRA, 2016; GAUNT, 2018a; W3C, 2017)
3.1.3 Web App Manifest
O Manifesto de Aplicação Web (Web App Manifest) faz parte de um acervo de tecnologias usadas para compor uma PWA. Ele é um arquivo JSON composto por metadados que fornecem informações sobre o aplicativo. Com o uso deste arquivo, é possível definir a orientação padrão da tela, a cor de tema, a url inicial, o display do aplicativo, vários ícones diferentes de acordo com o tamanho e a densidade da tela, dentre diversas outras informações essenciais sobre o aplicativo. Conforme ilustrado na figura 3
O objetivo do manifesto é permitir que uma aplicação web possa ser instalada na tela inicial de um dispositivo, mostrando um ícone para que os usuários possam distingui-la de outros sites normais, propiciando uma experiência de usuário enriquecida similar a um aplicativo nativo (GAUNT, 2018b; W3C, 2018).
3.2 Visualização de dados
Visualização de dados é uma área de pesquisa emergente, que visa auxiliar o processo de análise e compreensão cognitiva de um conjunto de dados. Isso ocorre através da aplicação de técnicas para a criação de representações visuais com o intuito de auxiliar as pessoas a realizarem suas tarefas de maneira mais eficaz. De forma que, relações entre os dados possam ser compreendidas da melhor forma possível ou que novas informações possam ser descobertas (MUNZNER, 2014; NASCIMENTO; FERREIRA, 2005). Visualizações de dados não se limitam a apenas a utilização de gráficos para apresentar informações. As mais diversas formas de visualizações podem ser encontradas no decorrer da história da humanidade, como por exemplo desenhos, pinturas, diagramas, mapas dentre diversas outras, que foram utilizadas pelo homem como ferramenta para expor informações visualmente. O uso de visualizações de dados foi
Figura 1 – Exemplo de App Shell
Fonte: Osmani (2018)
Figura 2 – Relacionamento entre um service worker e aplicativos de serviço
23
utilizado neste trabalho com o intuito de disponibilizar uma forma mais fácil de analisar os dados das coletas inseridos na aplicação.
Geralmente os dados não possuem representações claras, o que dificulta no processo de criação de representações visuais adequadas. Muitos aspectos do design visual são orientados pelo tipo de dados que você tem à sua disposição. Segundo Munzner (2014), para a criação de boas visualizações, primeiramente, é necessário que seja obtido conhecimento sobre duas informações transversais, que é a sua semântica e seus tipos. Onde a semântica dos dados é seu significado no mundo real e o tipo é sua interpretação estrutural ou matemática.
Em sua obra, Munzner (2014) apresenta uma maneira de pensar sobre os conjuntos de dados, e com isso apresenta cinco tipos básicos de dados úteis para o processo de escolha de design. Esses tipos básicos de dados são eles:
• Item - É uma entidade individual que é discreta, como uma linha em uma tabela simples ou um nó em uma rede.
• Attribute - É uma propriedade específica que pode ser medida, observada ou registrada. • Link - É um relacionamento entre itens, geralmente dentro de uma rede.
• Position - É uma posição de dados espaciais, fornece uma localização no espaço bidimen-sional (2D) ou tridimenbidimen-sional (3D).
• Grid - É um tipo estratégico voltado para amostragens de dados contínuos em termos de relações geométricas e topológicas entre suas células.
Antes de usar os dados para construir visualizações, é preciso ter um processo de análise de dados, ou seja, limpeza e organização dos mesmos para encontrar padrões e associações entre eles. Uma grande quantidade de dados e variação de tipos faz com que a tarefa de elaborar visualizações torne-se algo mais complexo. No entanto, quando as descrições de tarefas da linguagem específica do domínio são transformados em forma abstrata, conseguimos realizar raciocínios sobre semelhanças (LAM et al., 2018; MUNZNER, 2014). Além de ajudar a compreender se é necessário e como transformar os dados originais do usuário em formas diferentes, permitindo a derivação de novos dados. Neste trabalho, os dados foram agrupados de tal modo que diversos tipos de informações podem ser explorado, como por exemplo os dias que houveram mais ocorrências de coletas de resíduos sólidos, dentre diversas outras informações.
3.3 Tecnologias Backend
Nesta Subseção serão descritas todas as tecnologias necessárias para construir o serviço web utilizado por este trabalho.
3.3.1 Node.js
Node.js é uma plataforma open-source desenvolvida para construir aplicações server-sidee aplicações de rede escaláveis de alta performance utilizando Javascript como linguagem de programação. Diferencia-se dos demais servidores populares, por utilizar apenas uma única thread de execução para tratar requisições, ao invés de criar uma thread para cada conexão.
Sua arquitetura é orientada a eventos, capaz de realizar operações de I/O assíncronas totalmente non-blocking thread. Devido a isso, aplicações construídas em Node.js são livres de sofrerem problemas relacionados a dead-locks no sistema. Além de, apresentar uma boa performance em relação ao consumo de memória e utilizar ao máximo e com eficiência todo o poder de processamento disponível nos servidores (NODE.JS, 2018; YOUNG, 2017; PEREIRA, 2014). Nesse trabalho, o node foi utilizado devido a sua boa performance e simplicidade de desenvolvimento.
3.3.2 Express
O Express é um framework web, minimalista e flexível desenvolvido em Javascript para a plataforma Node.js. Este framework provê uma pequena camada de funcionalidades fundamentais para o desenvolvimento de aplicações Web, porém, sem sobrescrever as funcio-nalidades já disponíveis no Node.js. O Express possui um robusto conjunto de recursos para construção de aplicações web, sejam elas single page application (SPA), aplicações múltiplas páginas, ou aplicações híbridas. Ele ajuda na organização de aplicações web na arquitetura MVC com o uso de middlewares e roteamento. Além de adicionar vários utilitários HTTP ao Node.js (EXPRESS.JS, 2018; HAHN, 2016). Nesse trabalho o Express é utilizado por conta de sua abstração para criar middlewares tornarem o processo da criação do serviço web mais fácil e rápido.
25
3.3.3 MongoDB
O MongoDB é um banco de dados orientado à documentos, open-source e mul-tiplataforma, escrito em C++. Ele distingui-se dos demais bancos de dados tradicionais por ser classificado como NoSQL e não seguir o modelo relacional. As principais funcionalidades providas por este banco de dados são (MONGODB, 2018):
• Esquemas de dados dinâmicos, oferecendo simplicidade e robustez • Suporte à indexação em qualquer atributo
• Replicação e alta disponibilidade • Capacidade de escalar horizontalmente • Pesquisas baseadas em documentos
Para realizar o armazenamento interno de dados, o MongoDB usa documentos no formato Binary JSON (BSON), que é um formato com uma estrutura de dados contendo pares de chave e valor semelhante ao JSON, projetado para ter as características de leveza, transversalidade e eficiência. O uso de documentos para o armazenamento de dados traz algumas vantagens como a correspondência de tipos de dados nativas de diversas linguagens de programação, redução de joinscustosos e esquema dinâmico com suporte a polimorfismo fluente (MONGODB, 2018). O mongo é utilizado neste trabalho principalmente por conta do esquema de dados dinâmicos, por conta de tornar o processo de evolução da aplicação mais simples caso o esquema da dados sofra alterações com o tempo.
3.3.4 WebService
Um serviço web (WebService) pode ser definido como um conjunto de tecnologias que fornecem um meio padrão de prover interoperabilidade entre diferentes aplicativos de software. O uso desta tecnologia torna possível que aplicações diferentes possam interagir com outras que já existem através de trocas de mensagens padronizadas com uso de um formato intermediário como XML, JSON, CSV, dentre diversos outros presentes no mercado (W3C, 2004; KALIN, 2013). A escolha de um serviço web neste trabalho, foi justamente para que outros sistemas possam se comunicar e acessar os dados obtidos com este trabalho sem muito problema.
Figura 3 – Opções de exibição do manifesto
27
4 PROCEDIMENTOS METODOLÓGICOS
Nesta Seção serão apresentados os procedimentos realizados para a completude do presente trabalho.
4.1 Levantar requisitos para identificar dados e representações visuais relevantes
A primeira etapa deste trabalho consistiu em identificar quais dados são importantes para serem registrados na aplicação. Para isso, foi elaborado uma série de perguntas, que posteriormente foram aplicadas em uma entrevista com o responsável pela prefeitura do campus. Durante a entrevista foi detectado que não existe nenhuma forma de registro referente às coletas de resíduos sólidos, o que propiciou o desenvolvimento deste trabalho. Com a finalidade de registrar as respostas, toda a entrevista foi gravada para depois ser analisada e gerar os requisitos para o desenvolvimento da aplicação. Durante a entrevista, foi identificado que o dado primordial para a aplicação é a coleta seletiva em quilograma realizada em uma data e que a informação esperada é referente a coletas realizadas em um intervalo de datas. A entrevista mostrou-se muito proveitosa, pois foi possível identificar as necessidades que inicialmente poderiam ser feitas neste trabalho. Além de outras necessidades que poderiam ser implementadas em trabalhos futuros.
4.2 Selecionar visualizações para aplicação
Sabendo que as informações esperadas pelo usuário são as coletas realizadas em quilograma e percentual em um determinado período de tempo, foi selecionados quatro tipos de gráficos que poderiam ser utilizados para apresentar os dados das coletas para o usuário. Os gráficos selecionados foram o de barras, pizza, área e linha do tempo. O gráfico de barras e área são utilizados para apresentar os dados em quilogramas, o gráfico de pizza foi selecionado para apresentar os dados das coletas em percentual e o de linha do tempo para mostrar todas as coletas realizadas ao longo do ano. Após isso, foi pensando a forma como os dados seriam armazenados e devolvidos pelo serviço web, para em seguida apresenta-los visualmente ao usuário.
4.3 Desenvolvimento do backend da aplicação
Nesta etapa, foi desenvolvido um serviço web em Node.js que prover endpoints que podem ser acessados na forma de uma cadeia de caracteres de Uniform Resource Identifier (URI), retornando dados no formato JavaScript Object Notation (JSON). Com o uso do framework Express.js, foram implementados alguns endpoints responsáveis por realizar todas as operações básicas de criação, leitura, atualização e remoção de dados. Logo em seguida, foram criados mais endpoints que são responsáveis por disponibilizar todos os dados das coletas que alimentam as visualizações presentes na aplicação cliente selecionadas no procedimento 4.2.
4.4 Desenvolvimento da Interface de Usuário
Nesta etapa, foi desenvolvido uma UI com a biblioteca React.js1na forma de single page application (SPA), que se comunica com o serviço web através dos endpoints criados. Primeiramente, com o uso da biblioteca de componentes Ant Design 2, foram selecionados e customizados alguns componentes que compõem o esqueleto da UI, que posteriormente foram utilizados como App Shell. Logo em seguida, com o uso da biblioteca Nivo 3 foram implementados componentes de UI com as visualizações projetadas no procedimento 4.2.
4.5 Configurar aplicação para ser uma PWA
Nesta etapa, a UI desenvolvida no procedimento 4.4 foi configurada para ser aderente aos requisitos esperados em uma PWA de acordo com o Google e sua ferramenta Lighthouse(LIGHTHOUSE, 2017). De início, um arquivo manifest.json com informações rele-vantes sobre a aplicação foi adicionado para permitir que o navegador entenda que essa aplicação é algo instalável. Logo em seguida, um arquivo service-worker.js foi adicionado para realizar a manipulação das requisições que são feitas da aplicação até o serviço web. Com isso a PWA se beneficiou com a diminuição do consumo de banda de internet, após a aplicação ser acessada pelo usuário pela primeira vez.
1 https://reactjs.org/ 2 https://ant.design/ 3 http://nivo.rocks/
29
4.6 Teste durante desenvolvimento
Os testes foram realizados durante todo o desenvolvimento da aplicação. Sempre que uma funcionalidade nova era implementada, era realizado um teste de caixa preta, que basicamente se resumiu em ver se a aplicação estava fazendo o que se propõe a fazer, e se as funcionalidades estavam atendendo os requisitos. Todos os teste levaram em consideração dois critérios, a validação dos requisitos e a facilidade de utilização das funcionalidades da aplicação.
4.7 Implantação da aplicação
Para que fosse possível disponibilizar a aplicação funcionando para o usuário, o bac-kend da aplicação desenvolvida foi hospedado na plataforma heroku4. O banco mongo foi criado na plataforma mlab5. E por fim, a aplicação cliente em react foi hospedada na plataforma netlify6 e disponibilizada através do link https://solidwm.netlify.com/. Para rodar e testar a aplicação
local-mente basta acessar o código fonte disponibilizado no link https://drive.google.com/drive/folders/1GqSBa2UClpY5h8rSl72YxaADCGstK8gZ?usp=sharing.
4.8 Validação da aplicação
Para realizar a validação da qualidade da aplicação em geral, foi elaborado um questionário com algumas perguntas com a intenção de avaliar se as funcionalidade da aplicação estão de acordo com a esperada pelo usuário, e para analisar a sua perspectiva e experiência durante o uso. Essa validação ocorreu através da aplicação do questionário logo após o usuário realizar alguns testes na aplicação.
Já para avaliar a qualidade da PWA foi utilizado a ferramenta Lighthouse que foi escolhida principalmente por agregar métricas de características desejadas em uma PWA. Outro motivo, para a escolha desta ferramenta, foi que dentro do projeto Lighthouse existe um grande esforço que busca trazer melhorias para a web, ajudando a modernizar e otimizar as aplicações presentes, apontando possíveis falhas cometidas pelos desenvolvedores durante o desenvolvimento da aplicação.
4 https://www.heroku.com 5 https://mlab.com/ 6 https://www.netlify.com/
5 A APLICAÇÃO SOLID WM
O Solid WM, Solid Waste Management, é uma PWA de gestão voltada para realizar o acompanhamento das coletas de resíduos sólidos efetuadas em uma instituição. Ela dispõe de gráficos e relatórios com o objetivo de apresentar as coletas efetuadas ao longo do tempo de uma forma mais agradável e compreensível. Assim possibilitando ao gestor tomar melhores medidas e estratégias baseados na interpretação dos dados cadastrados.
Nesta Seção serão apresentados os requisitos da aplicação, a descrição das funciona-lidade, telas e sua arquitetura.
5.1 Requisitos
Para fazer o levantamento dos requisitos da aplicação, foi realizado uma entrevista com o gestor responsável por tratar dos assuntos referentes a coleta e destinação dos resíduos sólidos do campus. Realizado a entrevista, os requisitos elaborados para a aplicação foram:
• Requisitos funcionais
– Registrar os tipos de resíduos sólidos: O usuário pode cadastrar diversos tipos de resíduos sólidos os classificando por cores para facilitar sua representação dentro da aplicação.
– Registrar a coleta efetuada no dia em quilograma: O usuário pode cadastrar uma coleta para os tipos de resíduos sólidos existentes na aplicação, informando o peso em quilograma e o dia em que a coleta foi realizada.
– Gerar relatório para as coletas cadastradas dado um determinado intervalo temporal: O usuário pode selecionar um tipo de resíduo sólido cadastrado na aplicação e gerar seu relatório passando o intervalo de datas desejado.
– Exportar relatório para documento em formato pdf: Ao gerar o relatório na aplicação o usuário pode exportar este mesmo relatório em um documento em formato pdf. – Gerar gráficos para as coletas cadastradas dado um determinado intervalo temporal:
O usuário gerar gráficos para as coletas cadastradas na aplicação passando o intervalo de datas desejado. Os gráficos devem apresentar os dados da coleta em quilograma e percentual.
• Requisitos não funcionais
31
• Restrições
– O dispositivo requer um navegador atualizado com a ultimas versões disponíveis no mercado.
– O dispositivo requer conexão à internet para realizar as buscas, coletas e atualizações do web service.
5.2 O desenvolvimento do Solid WS
Nesta Subseção serão apresentados as telas desenvolvidas e a explicação do funcio-namento de cada uma.
5.2.1 Tela de início
A primeira tela a ser apresentada na aplicação é a de carregamento, ilustrada pela figura 4. Enquanto ela está ativa a aplicação busca os dados estático da UI localmente armaze-nados em cache, ou em um servidor remoto. Com isso evitamos que uma tela em branco sem conteúdo seja apresentada ao usuário provocando a sensação de que a aplicação está lenta ou apresentado algum problema.
5.2.2 Tela de acesso
Após a aplicação ser carregada é apresentada a tela de acesso, ilustrada pela 5. Nela é possível visualizar o nome da aplicação e os campos para inserir as credenciais de acesso da aplicação.
5.2.3 Tela de visão geral
Após o usuário ser autenticado a primeira tela a ser carregada é de visão geral, ilustrada pela figura 6. Nela é possível visualizar um formulário de busca composto por dois campos, ambos utilizados para representar um período informado pelo usuário.
Nesta tela, são apresentados três gráficos com informações sobre as coletas de resíduos cadastradas dentro do período informado pelo usuário. Um gráfico de barras é utilizado para apresentar a quantidade de resíduos coletados em quilograma. Cada barra representa um tipo de resíduo sólido com sua respectiva cor. Além disso cada barra possui um valor que é a sua quantidade em quilograma coletada no período especificado. Outro gráfico utilizado é o de torta
Figura 4 – Tela de início
Fonte: Elaborado pelo autor
Figura 5 – Tela de acesso
33
que apresenta os mesmos dados presente no gráfico de barras porem com valores em percentual. Por fim é apresentado um gráfico que apresenta a ocorrência das coletas distribuída no ano todo em uma linha do tempo.
5.2.4 Tela tipos de resíduos sólidos
A tela tipos de resíduos sólidos, ilustrada pelas figuras 7 e 8, contém uma tabela com todos os tipos de resíduos cadastrados pelo usuário. Na tela existe um botão que direciona o usuário para um modal com um formulário para cadastrar um novo tipo na aplicação. O usuário é obrigado a passar três informações para que o cadastro seja efetuado com sucesso, o nome, a descrição e cor representativa. Outros dois valores opcionais também estão presente no formulário, que são dois checkbox para informar se o tipo de resíduo em questão é reciclável ou reaproveitável.
5.2.5 Tela de coletas
A tela de coletas, ilustrada pelas figuras 9 e 10, possui uma tabela com todas as coletas cadastradas pelo usuário. Para facilitar o manuseio desses dados, a tabela contém algumas ações, como ordenação por data e total coletado, e filtro pelo tipo de resíduo sólido. Na tela existe um botão que direciona o usuário para um modal com um formulário para cadastrar uma nova coleta. o usuário é obrigado a passar três informações para que o cadastro seja efetuado com sucesso, o tipo de resíduo, quantidade em quilograma e data da coleta.
5.2.6 Tela de usuários
A tela de usuários, ilustrada pelas figuras 11 e 12, possui uma tabela com todos os usuários cadastrados, visualizado apenas pelo administrador da aplicação. Nessa tela existe um botão que direciona o usuário para um modal com um formulário para cadastrar um novo usuário. O usuário é obrigado a passar cinco informações para que o cadastro seja efetuado com sucesso, o primeiro nome, último nome, email, senha e a confirmação da senha.
5.2.7 Teda de análises
A tela de análises, ilustrada pela figura 13, possui um formulário de busca composto por cinco campos, o primeiro é um de seleção que permite que o usuário faça uma consulta
Figura 6 – Tela de visão geral
Fonte: Elaborado pelo autor
Figura 7 – Tela de tipos de resíduos sólidos, visão geral
35
Figura 8 – Tela de tipos de resíduos sólidos, visão cadastro
Fonte: Elaborado pelo autor
Figura 9 – Tela de coletas, visão geral
Figura 10 – Tela de coletas, visão de cadastro
Fonte: Elaborado pelo autor
Figura 11 – Tela de usuários, visão geral
37
filtrado para um tipo de resíduo sólido especifico ou para todos em geral. Os dois em seguida são para representar um período assim como o mostrado na tela da Subseção 5.2.3, e por fim, dois campos que esperam um intervalo de datas para realizar a consulta. A busca por intervalo de datas possuem uma precedência maior do que a por período. Quando a opção todos é selecionado no formulário da consulta, um gráfico de barras e um de torta são apresentados ao usuário com as mesmas características descritas na tela da Subseção 5.2.3. Porém quando um tipo de resíduo é selecionado, um gráfico de área é apresentado ao usuário para que ele possa visualizar as mudanças na quantidade produzida para aquele tipo de resíduo ao longo do tempo. Por fim, é apresentado um gráfico que mostra as ocorrência das coletas distribuídas na linha temporal especificada pelo usuário.
5.2.8 Tela de relatórios
A tela de relatórios, ilustrada pela figura 14, possui um formulário de busca composto por três campos. O primeiro é um de seleção que permite que o usuário faça uma consulta filtrada para um tipo de resíduo sólido especifico ou para todos em geral. Os outros dois solicitam um intervalo temporal de datas para realizar a consulta na base de dados.
Realizado a consulta, é apresentado ao usuário uma tabela com a data, total coletado e o tipo de resíduo coletado. Além disso na interface existe a informação do total coletado no intervalo informado, e um botão para exportar o relatório para um arquivo em formato pdf.
5.2.9 Visão mobile
Por se tratar de um PWA, é essencial que todos os componentes visuais sejam adap-táveis para diferentes proporções de telas. Pensando nisso, cada componente foi desenvolvido de tal modo que se adapta de acordo com o tamanho da tela do dispositivo onde ele está sendo renderizado. Conforme ilustrado pela figura 15.
Figura 12 – Tela de usuários, visão de cadastro
Fonte: Elaborado pelo autor
Figura 13 – Tela de análise
39
Figura 14 – Tela de relatórios
Fonte: Elaborado pelo autor
Figura 15 – Visão mobile
6 AVALIAÇÃO
Para realizar os testes da aplicação, o mesmo gestor entrevistado durante o processo do levantamento de requisitos foi convidado a testar o software implementado. Inicialmente, foi disponibilizado um link com a aplicação e instruções sobre sua utilização para o gestor. Após a apresentação inicial da aplicação e explicação da sua proposta, o gestor foi instruído a utilizar a aplicação. Para testar o fluxo principal da aplicação, foram sugeridas algumas tarefas para ele realizar. Todas elas com o objetivo de analisar se as funcionalidades disponíveis estão em conformidade com o esperado, intuitivas e fáceis de serem utilizadas. A seguir, as tarefas sugeridas.
• Cadastre um novo tipo de resíduo sólido na aplicação. • Cadastre algumas coletas em datas diferentes.
• Filtre a lista das coletas, com o tipo de resíduo sólido criado anteriormente.
• Vá até a página de análises e busque as coletas em geral, passando o intervalo desejado. • Vá até a página de análises e busque as coletas do resíduo criado anteriormente, passando
o intervalo que abrange as datas das coletas.
• Vá até a página de relatórios e busque as coletas do resíduo criado anteriormente, passando o intervalo que abrange as datas de coletas.
• Exporte um relatório para um documento em formato pdf.
Para realizar a validação da aplicação foi elaborado um questionário online com 15 (quinze) perguntas baseadas na escala likert, sendo 14 (catorze) delas de múltipla escolha e uma aberta para expor a opinião e sugestões de melhorias e novas funcionalidades. Após o período de uso do SolidWM, o usuário foi submetido ao questionário a fim de obter o seu feedback da experiência obtida pelo software. A seguir, as perguntas elaboradas no questionário.
• É possível cadastrar todos os tipos de resíduos sólidos desejado na aplicação? • É possível registrar a coleta de resíduo sólido na aplicação?
• O dados das coletas são apresentados corretamente nos gráficos presentes na aplicação? • É possível gerar os gráficos de acordo a faixa de tempo desejada?
• É possível realizar a geração de relatórios de acordo com a faixa de tempo desejado? • É possível realizar alguma análise nos dados cadastrados na aplicação?
• Quantos erros foram encontrados durante a execução das tarefas? • A aplicação possui padrões que facilitam seu uso?
41
aplicação?
• Quantas vezes não compreendeu ou teve problemas com o uso da interface da aplicação? • O design das telas usadas na aplicação. Atualmente encontra-se?
• A nomenclatura encontrada nas telas durante o uso da aplicação (Nomes de campos, botões, textos e etc.), atualmente encontra-se?
• De forma geral, você considera a proposta da aplicação relevante para a sociedade? • O nível de satisfação encontrado durante o uso da aplicação foi?
• O espaço abaixo é reservado para que você exponha sua opinião e sugerir melhorias e novas funcionalidades na aplicação (Opcional).
Para realizar a avaliação da aplicação e garantir conformidade com as características esperadas em uma PWA, foi usado o Lighthouse. Que é uma ferramenta do Google utilizada para avaliar a qualidade de aplicações da web em geral. Esta ferramenta submete a aplicação em uma bateria de testes e retorna uma pontuação que varia entre 0 e 100. Alguns testes atualmente necessitam ser realizados de forma manual. No entanto a ferramenta contém uma cobertura de boa parte das métricas esperadas em uma PWA. As métricas avaliadas neste trabalho foram as mesmas a qual o lighthouse dá suporte. A seguir a lista das métricas utilizadas pela ferramenta para avaliar a aplicação Solid WM (LIGHTHOUSE, 2017).
• O carregamento da página possui desempenho rápido o suficiente nas redes móveis? • A página atual responde com um 200 quando off-line?
• O start_url responde com um 200 quando off-line? • Aplicação usa HTTPS?
• A aplicação registra o service worker?
• Usuário pode ser solicitado a instalar a aplicação? • Redireciona o tráfego HTTP para HTTPS?
• Configurado para uma tela inicial personalizada? • Define uma cor de tema da barra de endereço?
• conteúdo é dimensionado corretamente para a viewport?
• Tem uma tag <meta name="viewport» com width ou initial-scale? • Contém algum conteúdo quando o JavaScript não está disponível?
7 RESULTADOS
7.1 Interpretação dos resultados obtidos com o questionário
Logo após o usuário realizar o teste da aplicação e responder o questionário, foi realizado uma análise em suas respostas com o objetivo de verificar a qualidade do software desenvolvido e a conformidade das funcionalidades com os requisitos.
Como já mencionando, o questionário contou com 15 (quinze) perguntas com o objetivo de validar o trabalho desenvolvido. Onde, as 7 primeiras foram voltadas para as funcionalidades disponíveis na aplicação. E as restantes voltadas para a percepção que o usuário teve durante o uso do software. A seguir na tabela 1, é apresentado as respostas obtidas nas perguntas de múltiplas escolhas.
Tabela 1 – Respostas obtidas das perguntas com múltiplas escolhas do questionário
Perguntas Respostas obtidas
1a- É possível cadastrar todos os tipos de resíduos sólidos desejado na aplicação? Concordo
2a- É possível registrar a coleta de resíduo sólido na aplicação? Concordo
3a- O dados das coletas são apresentados corretamente nos gráficos presentes na aplicação? Discordo
4a- É possível gerar os gráficos de acordo a faixa de tempo desejada? Concordo
5a- É possível realizar a geração de relatórios de acordo com a faixa de tempo desejado? Concordo
6a- É possível realizar alguma análise nos dados cadastrados na aplicação? Concordo
7a- Quantos erros foram encontrados durante a execução das tarefas? Até 3 erros
8a- A aplicação possui padrões que facilitam seu uso? Concordo
9a- Foi possível perceber a existência de uma classificação por cores nos dados cadastrados na aplicação? Concordo
10a- Quantas vezes não compreendeu ou teve problemas com o uso da interface da aplicação? Até 3 vezes
11a- O design das telas usadas na aplicação. Atualmente encontra-se? Normal
12a- A nomenclatura encontrada nas telas durante o uso da aplicação (Nomes de campos, botões, textos e etc.), atualmente encontra-se? Clara
13a- De forma geral, você considera a proposta da aplicação relevante para a sociedade? Concordo
14a- O nível de satisfação encontrado durante o uso da aplicação foi? Alto
Fonte: Elaborado pelo autor
As 7 primeiras perguntas foram projetadas para validar se as funcionalidades da aplicação encontravam-se corretas, nas perguntas 1a, 2a, 4a, 5o e 6a, conforme a tabela 1, o usuário concordou que o software apresentava um funcionamento correto e que atendia suas expectativas, validando assim os requisitos funcionais que foram solicitados. Na 3apergunta, que busca identificar se os dados estão sendo apresentados corretamente no gráficos, o usuário não concordou, isso mais a frente foi explicado na 15aresposta. Onde o usuário demostrou possuir dúvidas relacionadas ao gráfico que trata dos resíduos coletados durante o ano. Nesse gráfico ele não conseguia visualizar claramente os valores nos eixos (vertical e horizontal) e nem as nomenclaturas informativas. Outro ponto, foi o formato da data que apresentava divergente com o formato de sua região. E por fim na 7apergunta o usuário detectou cerca de três erros durante a execução das tarefas, os erros ocorreram em relação a datas mal formatadas em alguns pontos do software como foi relatado na 15aresposta, além de erros relacionados legibilidade dos dados
43
apresentados nos gráficos. A partir destas respostas, correções voltadas para as ressalvas do usuário puderam ser corrigidas.
Em seguida, a 8a, 9a, 10a, 11ae 12aperguntas foram elaboradas pensando em avaliar a qualidade da UI da aplicação de forma geral. Desenvolver uma UI com padrões que são utilizadas em diversas telas da aplicação, torna mais fácil o processo de aprendizagem. Pensando nisso a 8a (oitava) pergunta foi criada com o objetivo de identificar se o usuário teve essa percepção durante o teste da aplicação. Conforme sua resposta, o usuário concordou que existe esses padrões na aplicação.
Pensando em mapear visualmente uma coleta cadastrada a um tipo de resíduo sólido, um esquema que vincula uma cor a um tipo de resíduo sólido foi desenvolvido neste trabalho. Para verificar se o usuário notou essa existência de uma conexão das cores com os tipos de resíduos presentes no software a 9apergunta foi elaborada. Como resposta o usuário afirmou que realmente notou esse mapeamento que foi utilizado principalmente nas listagem dos relatórios e nas cores encontradas nos gráficos.
Conforme é mostrado na resposta da 10apergunta, alguns problemas relacionados ao entendimento da interface ocorreram. O que indicam que um maior esforço pensado na experiência de usuário ainda é necessário para este trabalho. Em relação a estética da aplicação e na nomenclatura encontradas nas telas, foi apresentada aceitável e clara conforme foi apontado na 11ae 12a pergunta.
Já a 15acomo já foi citado, apresentou a opinião e a experiência do usuário durante o teste da aplicação. Em geral foi pontuado a necessidade de alterar o formato das datas para o formato do nosso país, incluir unidade de medida nos algarismos dos gráficos, quando couber. Em resumo, tornar mais inteligível a leitura dos gráficos, principalmente, o gráfico que trata dos resíduos coletados durante o ano.
No geral o usuário demonstrou-se muito satisfeito com a aplicação, conforme foi apontado pelas respostas obtidas pelas perguntas 13 e 14. Os resultados foram satisfatórios, algumas respostas demonstraram que a aplicação necessita de melhorias, contudo a aplicação não deixou a desejar para o avaliador.
7.2 Lighthouse
Após a versão de teste da aplicação ser hospedada em um servidor remoto, foi utilizado o Lighthouse para testar as métricas apresentadas no Capitulo 6. Todas as métricas foram
satisfeitas com êxito, exceto a de desempenho, que apresentou lentidão durante o carregamento inicial da aplicação no cenário de redes moveis. O resultado do teste é mostrado na figura 16;
A lentidão, pode ser explicado devido o uso de bibliotecas e frameworks que trazem consigo uma carga a mais no momento em que o navegador faz o download pela primeira vez dos arquivos estáticos da aplicação e os renderiza. Por fazer o uso de gráficos a performance também é afetada, pois diversas operações são acionadas no DOM do navegador. Uma solução para contornar esse problema de lentidão, seria adotar uma abordagem mais purista, ou seja criar os próprios elementos de UI otimizados, no entanto a manutenção e evolução do software poderiam ser afetadas. A nota obtida foi 73, o que é uma nota aceitável para a primeira versão desta aplicação, levando em consideração que o foco do desenvolvimento levou em consideração a manutenção e possibilidade de evolução do software ao invés do desempenho.
45
Figura 16 – Resultado obtido com lighthouse.
8 CONCLUSÕES E TRABALHOS FUTUROS
Com a crescente produção de resíduos sólidos pela população em geral , surge a necessidade de lidar e gerenciar melhor sua produção tanto em locais públicos como privados. Com isso a quantidade de propostas de trabalhos voltadas para auxiliar a gestão destes resíduos, vem crescendo tanto no mercado, quanto no meio acadêmico, como podemos observar com os trabalhos apresentados no Capítulo 2.
Desse modo, o presente trabalho partiu do intuito de disponibilizar informações sobre coletas de resíduos sólidos efetuadas em uma instituição e com isso apresentá-las ao usuário de forma mais amigável e intuitiva com o uso de algumas visualizações para os dados sobre as coletas. Podendo ser usado como uma ferramenta para realizar análise sobre a produção de lixo na instituição, auxiliando-a na tomada de decisões.
O SolidWM, a aplicação voltada para gestão de resíduos sólidos, foi desenvolvida para as plataformas web e mobile utilizando a biblioteca React junto com tecnologias PWA. Toda a parte de implementação do software foi realizado com o uso da linguagem de programação javascript, desde sua UI até o web service desenvolvido. A aplicação abrangeu todos os requisitos funcionais e não funcionais apresentados na Seção 5.1.
Para atingir o objetivo final deste trabalho, foi preciso realizar algumas tarefas como o estudo de aplicações similares, aplicação de entrevista com o usuário alvo para realizar o levantamento de requisitos, a fase de projeto e elaboração da aplicação, implantação, elaboração do questionário, avaliação da aplicação e os resultados.
Como limitações, este trabalho apresenta algumas em relação a dependência de uma pessoa que fique responsável por realizar a separação e medição dos resíduos coletados. Para que desta forma os dados coletados sejam inseridos manualmente no software.
Para trabalhos futuros, seria muito interessante aplicar melhorias na aplicação, tanto nas suas funcionalidades quanto na experiência do usuário. Trabalhando melhor na arquitetura da informação do software para decidir como organizar sua UI de modo que ela se torne mais compreensível. Outro trabalho interessante, seria a de automatizar o cadastro das coletas de resíduos por meio de uma aplicação IOT(Internet of Things), possibilitando a exploração e disponibilização de novas informações neste software.
47
REFERÊNCIAS
ATER, T. Building progressive web apps: bringing the power of native to the browser. [S.l.]: "O’Reilly Media, Inc.", 2017.
BELMONT, J. Building Progressive Web Apps: Webinar and Tutorial. 2016. Disponível em: <https://vaadin.com/blog/building-progressive-web-apps-webinar-and-tutorial>. Acesso em: 25 jun. 2018.
COSTA., M. SolidBits - Design de sistema para monitoramento da produção e gestão da coleta de resíduos sólidos. 2018. 90 f. Monografia (Graduação em Design Digital) – Campus Quixadá, Universidade Federal do Ceará, Quixadá, 2018, Ainda não disponível.
DEVELOPERS, G. Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage. 2017. Disponível em: <https://developers.google.com/web/showcase/2017/twitter>. Acesso em: 28 jun. 2018.
EXPRESS.JS. Express.js. 2018. Disponível em: <http://expressjs.com/>. Acesso em: 22 jun. 2018.
GARCIA, M. B. dos S.; NETO, J. L.; MENDES, J. G.; XERFAN, F. M. de F.; VASCONCELLOS, C. A. B. de; FRIEDE, R. R. Resíduos sólidos: Responsabilidade compartilhada. Semioses, v. 9, n. 2, p. 77–91, 2016.
GAUNT, M. Service Workers: uma Introdução. 2018. Disponível em: <https:
//developers.google.com/web/fundamentals/primers/service-workers/>. Acesso em: 25 jun. 2018.
GAUNT, P. K. M. O manifesto do aplicativo web. 2018. Disponível em: <https:
//developers.google.com/web/fundamentals/web-app-manifest/?hl=en>. Acesso em: 26 jun. 2018.
GIBBS, F.; OWENS, T. Building better digital humanities tools. DH Quarterly, v. 6, n. 2, 2012. HAHN, E. Express in Action: Writing, building, and testing Node. js applications. [S.l.]: Manning Publications„ 2016.
HEY, J. The data, information, knowledge, wisdom chain: the metaphorical link. Intergovernmental Oceanographic Commission, v. 26, p. 1–18, 2004.
KALIN, M. Java Web Services: Up and Running: A Quick, Practical, and Thorough Introduction. [S.l.]: "O’Reilly Media, Inc.", 2013.
LAM, H.; TORY, M.; MUNZNER, T. Bridging from goals to tasks with design study analysis reports. IEEE transactions on visualization and computer graphics, IEEE, v. 24, n. 1, p. 435–445, 2018.
LEPAGE. Your First Progressive Web App. 2018. Disponível em: <https://codelabs. developers.google.com/codelabs/your-first-pwapp/#0>. Acesso em: 18 jun. 2018.
LIGHTHOUSE. Auditar apps da Web com o Lighthouse. 2017. Disponível em: <https://developers.google.com/web/tools/lighthouse/>. Acesso em: 05 nov. 2018.
MISHRA, R. S. Progressive webapp : Review. International Research Journal of Engineering and Technology (IRJET), v. 3, 6 2016.
MONGODB. MongoDB. 2018. Disponível em: <https://www.mongodb.com/>. Acesso em: 21 jun. 2018.
MUNZNER, T. Visualization analysis and design. [S.l.]: CRC press, 2014.
NASCIMENTO, H. A. D.; FERREIRA, C. B. Visualização de informações–uma abordagem prática. In: XXV Congresso da Sociedade Brasileira de Computação, XXIV JAI. UNISINOS, S. Leopoldo–RS. [S.l.: s.n.], 2005.
NODE.JS. About Node.js. 2018. Disponível em: <https://nodejs.org/en/about/>. Acesso em: 22 jun. 2018.
OSMANI, A. O modelo de shell dos aplicativos. 2018. Disponível em: <https:
//developers.google.com/web/fundamentals/architecture/app-shell?hl=pt-br>. Acesso em: 20 jun. 2018.
PEREIRA, C. R. Aplicações web real-time com Node. js. [S.l.]: Editora Casa do Código, 2014.
RATHI, S. Alternative approaches for better municipal solid waste management in mumbai, india. Waste Management, Elsevier, v. 26, n. 10, p. 1192–1200, 2006.
ROCHA, E. R. RECICLATI – Sistema para o Gerenciamento de Resíduos Eletroeletrôni-cos. Dissertação (B.S. thesis) — Universidade Camilo Castelo Branco Campus de Fernandópolis, 2014.
ROLLWAGEN, A. F. Software para gestão de resíduos sólidos em cooperativas de recicladores. Encontro internacional sobre gestão empresarial e meio ambiente (Engema), 2014.
SILVA, J. A. B.; BARROSO, R. d. C. A.; RODRIGUES, A. J.; COSTA, S. S.; FONTANA, R. L. M. Á urbanização no mundo contemporâneo e os problemas ambientais. Caderno de Graduação-Ciências Humanas e Sociais-UNIT, v. 2, n. 2, p. 197–207, 2014.
SOFTEXPERT. SE Waste Gestão de Resíduos. 2018. Disponível em: <https://www.softexpert. com.br/produto/gestao-residuos/>. Acesso em: 29 jun. 2018.
STAIR, R.; REYNOLDS, G. Principles of information systems. [S.l.]: Cengage Learning, 2013.
TÉCNICAS, A. B. de N. NBR 10004: resíduos sólidos: classificação. [S.l.]: ABNT, 2004. W3C. Web Services Architecture. 2004. Disponível em: <https://www.w3.org/TR/ws-arch/>. Acesso em: 28 jun. 2018.
W3C. Service Workers. 2017. Disponível em: <https://www.w3.org/TR/service-workers-1/>. Acesso em: 28 jun. 2018.
W3C. Web App Manifest. 2018. Disponível em: <https://www.w3.org/TR/appmanifest/>. Acesso em: 28 jun. 2018.
49
XANTHOPOULOS, S.; XINOGALOS, S. A comparative analysis of cross-platform development approaches for mobile applications. In: ACM. Proceedings of the 6th Balkan Conference in Informatics. [S.l.], 2013. p. 213–220.
YOUNG, M. C. B. M. A. Node.js in Action, Second Edition. [S.l.]: Manning Publications, 2017.
APÊNDICE A – TERMO DE CONSENTIMENTO LIVRE E ESCLARECIDO
UNIVERSIDADE FEDERAL DO CEARÁ CURSO DE ENGENHARIA DE SOFTWARE TERMO DE CONSENTIMENTO LIVRE E ESCLARECIDO
Convidamos você para participar da Pesquisa “Geração de resíduos sólidos na Universidade Federal do Ceará - Campus Quixadá”, sob a responsabilidade do pesquisador Leo Jaimesson Sousa da Silva e de seu orientador Victor Aguiar Evangelista de Farias, a qual pretende compreender melhor o processo de gerenciamento dos resíduos sólidos dentro da instituição mencionada. A participação se dará por meio de uma entrevista.
O pesquisador é estudante do oitavo semestre do curso de Engenharia de Software da Universidade Federal do Ceará, e objetiva criar uma aplicação web progressiva para a gestão de resíduos sólidos da UFC Quixadá utilizando visualização de dados que contribuirão no processo de gerenciamento dos resíduos sólidos na universidade. Não há riscos em participar da pesquisa.
Se depois de consentir na participação você mudar de ideia e desistir de continuar par-ticipando, tem o direito e a liberdade de retirar seu consentimento em qualquer fase da pesquisa, seja antes ou depois da coleta dos dados, independente do motivo e sem nenhum prejuízo a sua pessoa (porém, ultrapassada a fase da pesquisa e concluído o trabalho, não poderemos remover os dados). Você não terá nenhuma despesa e também não receberá nenhuma remuneração. Os resultados da pesquisa serão analisados e publicados. Para qualquer outra informação, você poderá entrar em contato com o pesquisador através do e-mail leo.jaimesson@gmail.com ou do telefone (85) 98639-5504.
Eu, __________________________________________________________, que exerço o cargo de __________________________________________________________, no(a) ___________________________________________, fui informado sobre o que o pesquisador quer fazer e porque precisa da minha colaboração, e entendi a explicação. Por isso, eu concordo em participar do projeto, sabendo que não vou ganhar nada e que posso sair quando quiser (desde que antes da conclusão do trabalho), e estou ciente da necessidade do uso de minha imagem e/ou depoimento como contribuição para a pesquisa executada.
Assinatura do participante: ___________________________________________________ Assinatura do Pesquisador responsável: ___________________________________________
51
APÊNDICE B – TERMO DE CONSENTIMENTO PARTICIPAÇÃO DE TESTE
Termo de consentimento
Este termo de consentimento é referente ao trabalho de conclusão de curso do aluno Leo Jaimesson Sousa da Silva, com o título: "Solid WM: Uma aplicação web progressiva para a gestão dos resíduos sólidos da UFC Quixadá utilizando visualização de dados". Os dados coletados durante o teste serão estritamente utilizados para análise e melhorias na aplicação.
Posteriormente, o resultado do teste será divulgado no trabalho de conclusão de curso do aluno citado anteriormente, onde o mesmo garante preservar o anonimato do participante.
• ( ) Aceito participar dos testes. • ( ) Não aceito participar dos testes.
_______________________________________ Assinatura do participante
_______________________________________ Assinatura do aplicador
APÊNDICE C – QUESTIONÁRIO DE AVALIAÇÃO DA APLICAÇÃO
Questionário
É possível cadastrar todos os tipos de resíduos sólidos desejado na aplicação? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
É possível registrar a coleta de resíduo sólido na aplicação? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
O dados das coletas são apresentados corretamente nos gráficos presentes na aplicação? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
É possível gerar os gráficos de acordo a faixa de tempo desejada? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
É possível realizar a geração de relatórios de acordo com a faixa de tempo desejado? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
53
( ) Discordo totalmente
É possível realizar alguma análise nos dados cadastrados na aplicação? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
Quantos erros foram encontrados durante a execução das tarefas? ( ) Nenhum
( ) Até 3 erros ( ) Até 5 erros ( ) Até 10 erros ( ) Mais de 10 erros
A aplicação possui padrões que facilitam seu uso? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
Foi possível perceber a existência de uma classificação por cores nos dados cadastrados na aplicação?
( ) Concordo totalmente ( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
Quantas vezes não compreendeu ou teve problemas com o uso da interface da aplicação? ( ) Nenhuma
( ) Até 3 vezes ( ) Até 5 vezes ( ) Até 10 vezes ( ) Mais de 10 vezes
O design das telas usadas na aplicação. Atualmente encontra-se? ( ) Muito bom ( ) Bom ( ) Normal ( ) Ruim ( ) Muito ruim
A nomenclatura encontrada nas telas durante o uso da aplicação (Nomes de campos, botões, textos e etc.), atualmente encontra-se?
( ) Muito clara ( ) Clara ( ) Normal ( ) Confusa ( ) Muito confusa
De forma geral, você considera a proposta da aplicação relevante para a sociedade? ( ) Concordo totalmente
( ) Concordo
( ) Não concordo, nem discordo ( ) Discordo
( ) Discordo totalmente
O nível de satisfação encontrado durante o uso da aplicação foi? ( ) Muito alto
( ) Alto ( ) Normal ( ) Baixo ( ) Muito baixo
O espaço abaixo é reservado para que você exponha sua opinião e sugerir melhorias e novas funcionalidades na aplicação (Opcional).
