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