FRANCISCO KENNEDI DE MACÊDO RODRIGUES

(1)

UNIVERSIDADE FEDERAL DO RIO GRANDE DO NORTE CENTRO DE TECNOLOGIA

DEPARTAMENTO DE ENGENHARIA DE COMPUTAÇÃO E AUTOMAÇÃO CURSO DE ENGENHARIA DE COMPUTAÇÃO

FRANCISCO KENNEDI DE MACÊDO RODRIGUES

CATALOGUE.ME: SISTEMA GERADOR DE CATALOGO VIRTUAL DE BAIXA COMPLEXIDADE

NATAL-RN 2021

(2)

FRANCISCO KENNEDI DE MACÊDO RODRIGUES

Trabalho de Conclusão de Curso na modalidade Monografia, submetido como parte dos requisitos necessários para conclusão do curso de Engenharia de Computação pela Universidade Federal do Rio Grande do Norte.

Orientador: Prof. Dr. Diogo Pinheiro Fernandes Pedrosa.

NATAL-RN 2021

(3)

Universidade Federal do Rio Grande do Norte - UFRN Sistema de Bibliotecas - SISBI

Catalogação de Publicação na Fonte. UFRN - Biblioteca Central Zila Mamede

Rodrigues, Francisco Kennedi de Macedo.

Catalogue.me: sistema gerador de catalogo virtual de baixa complexidade / Francisco Kennedi de Macedo Rodrigues. - 2021.

51f.: il.

Monografia (Graduação) - Universidade Federal do Rio Grande do Norte, Centro de Tecnologia, Engenharia de Computação, Natal, 2021.

Orientador: Dr. Diogo Pinheiro Fernandes Pedrosa.

1. Catálogo digital acessível - Monografia. 2. Catálogo de vendas grátis - Monografia. 3. Sistema de e-commerce -

Monografia. I. Pedrosa, Diogo Pinheiro Fernandes. II. Título.

RN/UF/BCZM CDU 004

Elaborado por RAIMUNDO MUNIZ DE OLIVEIRA - CRB-15/429

(4)

FRANCISCO KENNEDI DE MACÊDO RODRIGUES

Trabalho de Conclusão de Curso na modalidade Monografia, submetido como parte dos requisitos necessários para conclusão do curso de Engenharia de Computação pela Universidade Federal do Rio Grande do Norte.

Aprovado em 14 / 09 / 2021 .

BANCA EXAMINADORA

___________________________________________________________________

Prof. Dr. Diogo Pinheiro Fernandes Pedrosa – Orientador Universidade Federal do Rio Grande do Norte

___________________________________________________________________

Prof.ª Dr. Agostinho De Medeiros Brito Junior – Examinador interno Universidade Federal do Rio Grande do Norte

___________________________________________________________________

Prof.ª Dr. Anderson Luiz De Oliveira Cavalcanti – Examinador interno Universidade Federal do Rio Grande do Norte

(5)

Dedico este trabalho a Verônica Macedo Fernandes da Silva, Gilton Fernandes Rodrigues, Cleilton Kevilin de Macedo Rodrigues, Kariliane Keila de Macedo Rodrigues e a Amanda Karoliny Ribeiro.

(6)

AGRADECIMENTOS

A minha família, em especial a Verônica Macedo, Gilton Rodrigues, Cleilton Rodrigues e Kariliane Rodrigues por todo apoio durante a minha caminhada, sem vocês eu nem estaria aqui.

A minha namorada Amanda Karoliny, por estar ao meu lado nos momentos difíceis.

Aos amigos Ítalo Reis, Ivo Lopes, Viktor Pereira e Martina Felipe por sempre me apoiarem na minha caminhada.

As amigas Thaís Lopes e Adva Silva, por apoiarem a ideia e colaborarem com o seu desenvolvimento.

Ao Prof. Dr. Diogo Pinheiro Fernandes Pedrosa, pela excelente orientação.

Aos colegas da turma do curso, pelas reflexões, críticas e sugestões recebidas.

A UFRN, pela oportunidade de conseguir um conhecimento de qualidade.

(7)

RESUMO

Devido ao aumento da taxa de desemprego no Brasil após o início da pandemia da Covid-19, a população se observou diante da necessidade de empregar formas alternativas de sustento, ocasionando no aumento de atividades informais/autônomas. Diante desse cenário, a internet se tornou uma fonte responsável por oferecer suporte ao trabalhador, exercendo um papel fundamental na sociedade, auxiliando na vida financeira e consequentemente no sustento das pessoas, uma vez que atua no intermédio entre o profissional e seus clientes através da divulgação de seus trabalhos. Com base nessa problemática do aumento do desemprego, foi criado o sistema Catalogue.me, uma plataforma web desenvolvida em Angular, com intuito de proporcionar ao usuário a criação do seu catálogo pessoal de vendas digitais, de forma gratuita, propiciando a praticidade na comunicação entre vendedores e compradores através do envio de mensagens via whatsApp. Diante desse objetivo, o sistema tem em seu princípio ser simples o suficiente para alcançar os trabalhadores que precisam divulgar os seus produtos ou serviços, porém não possuem muita familiaridade com o uso das ferramentas web.

Palavras-chave: Catálogo digital acessível. Catálogo de vendas grátis. Loja online. Sistema de e-commerce. Acessibilidade. Inclusão.

(8)

ABSTRACT

Due to the increase in the unemployment rate in Brazil after the onset of the Covid-19 pandemic, the population faced the need to employ alternative forms of livelihood, leading to an increase in informal/autonomous activities. In this scenario, the internet has become a source responsible for providing support to the worker, playing a fundamental role in society, helping in the financial life and consequently in supporting people, as it acts as an intermediary between the professional and their clients through dissemination of their works. Based on this problem of increasing unemployment, the Catalog.me system was created, a web platform developed in Angular, with the aim of providing the user with the creation of their personal digital sales catalog, free of charge, providing practicality in communication between sellers and buyers by sending messages via whatsapp. Given this objective, the system has in its principle to be simple enough to reach workers who need to advertise their products or services, but are not very familiar with the use of web tools.

Keywords: Accessible digital catalog. Free sales catalogue. Online store. E-commerce system.

Accessibility. Inclusion.

(9)

LISTA DE ILUSTRAÇÕES

Figura 1 – Modelo Entidade Relacionamento ... 21

Figura 2 - Diagrama de Casos de Uso da Página Inicial ... 30

Figura 3 - Diagrama de Caso de Uso do Painel de Administrador ... 32

Figura 4 - Diagrama de Caso de Uso do Catálogo Virtual ... 36

Figura 5 - Tela inicial vista em um computador (esquerda) e vista em um dispositivo mobile (direita) ... 39

Figura 6 - Tela de cadastro vista em um computador (esquerda) e vista em um dispositivo mobile (direita) ... 40

Figura 7 - Tela de login vista de um computador (esquerda) e vista de um dispositivo mobile (direita) ... 41

Figura 8 - Dashboard sem produtos visto de um computador (acima) e visto de um dispositivo mobile (abaixo) ... 42

Figura 9 – Exemplo do cadastro de um produto na plataforma... 43

Figura 10 – Exemplo de uma loja após o cadastro de alguns produtos ... 44

Figura 11 – Tela de edição de produto ... 45

Figura 12 – Catálogo virtual com detalhamento de um produto, visto de um computador ... 46 Figura 13 – Catálogo virtual e detalhamento de um produto, visto de um dispositivo mobile 47

(10)

LISTA DE ABREVIATURAS E SIGLAS

MEI Microemprendedor Individual API application programming interface

REST representational state transfer architectural style IBGE Instituto Brasileiro de Geografia e Estatística NPM Node Package manager

S3 Simple Storage Service

SGBD Sistema de Gerenciamento de Banco de Dados ERD Entity-Relationship Model

URL Uniform Resource Locator CORS Cross-Origin Resource Sharing JSON JavaScript Object Notation PWA Progressive Web Application JWT Json Web Token

IU Interface de Usuário

(11)

SUMÁRIO

1 INTRODUÇÃO ... 13

1.1 OBJETIVOS E MOTIVAÇÕES ... 14

1.2 PROCEDIMENTOS METODOLÓGICOS ... 15

1.3 ESTRUTURA DO TRABALHO ... 16

2 FUNDAMENTAÇÃO TEÓRICA ... 17

2.1 JavaScript ... 17

2.2 Angular ... 17

2.3 REST API ... 18

2.4 Node.js ... 19

2.5 Amazon S3 ... 19

3 METODOLOGIA ... 21

3.1 MODELAGEM DO BANCO DE DADOS ... 21

3.1.1 Shops ... 22

3.1.2 Items ... 23

3.1.3 Hospedagem do banco de dados ... 23

3.2 SERVER SIDE ... 24

3.2.1 Configuração inicial do servidor ... 24

3.2.2 Configuração das rotas de acesso ... 25

3.2.3 Hospedagem da aplicação ... 29

3.3 CLIENT SIDE ... 29

3.3.1 Página Inicial ... 30

3.3.2 Painel de administrador ... 32

3.3.3 Catálogo virtual ... 35

3.3.4 Hospedagem e compatibilidade ... 37

4 RESULTADOS ... 38

(12)

4.1 PAGINA INICIAL, CADASTRO E LOGIN ... 38

4.2 PAINEL DE ADMINISTRADOR ... 41

4.3 CATÁLOGO VIRTUAL ... 45

5 CONSIDERAÇÕES FINAIS ... 48

REFERÊNCIAS ... 50

(13)

1 INTRODUÇÃO

Durante a pandemia da Covid-19, enfrentada pelo Brasil e por diversos outros países, diversas áreas da indústria tiveram suas economias afetadas, resultando na redução do quadro de funcionários. Tal evento ocorre principalmente devido à baixa circulação da população nas ruas, resultado de uma das medidas protetivas utilizadas pelos governos (e incentivada pelas organizações de saúde) para barrar a disseminação do vírus: o distanciamento social. A queda nas vagas formais de emprego e o aumento no número de desalentados podem ser confirmados através dos dados divulgados pelo Instituto Brasileiro de Geografia e Estatística (IBGE) que informa a existência de 12,8 milhões de brasileiros em situação de desemprego entre fevereiro e abril de 2020 (IBGE, 2021).

Diante desse contexto, cresceu a busca por alternativas que pudessem suprir as necessidades financeiras da população, sendo uma delas o trabalho informal. Segundo dados extraídos do Portal do Empreendedor, o número de contas de Microemprendedor Individual (MEI) abertas no mês de junho de 2021 eram de 12.446.675, avanço de mais de 37%

comparadas aos 8.551.177 MEI’s do mesmo mês no ano de 2019. Esse aumento de empreendedores iniciais mostra principalmente a realidade de pessoas que abrem um pequeno negócio por necessidade, devido à falta de oportunidade de emprego.

Paralelamente a isso, nas últimas décadas passamos pelo o que alguns estudiosos da tecnologia chamam de Quarta Revolução Industrial que, em suma, é um termo que define o uso de tecnologias de ponta na nossa sociedade, como Internet das Coisas, Computação em Nuvem, Inteligência Artificial, Robótica, etc. Segundo a BrazilLAB (2018), esse cenário da Quarta Revolução Industrial é marcado pela busca constante de melhoras na produtividade e eficiência dos processos industriais.

Conforme as grandes empresas tecnológicas avançam nesse novo paradigma industrial, modificações no estilo de vida das pessoas ficam cada vez mais notórias, e a mais marcante, uma delas é a forma como estamos nos conectando mundo afora através da internet. Segundo o relatório produzido pelo We Are Social e Hootsuite em janeiro de 2021, o número de usuários de dispositivos móveis é de 5,22 bilhões, enquanto o número de pessoas conectadas a rede da internet chega à marca de 4,66 bilhões, diante de pouco mais de 7,8 bilhões de pessoas que existem no mundo.

(14)

14

1.1 OBJETIVOS E MOTIVAÇÕES

Em um mundo onde mais da metade das pessoas estão conectadas em uma rede virtual, várias profissões estão utilizando essa ferramenta como forma de conseguir levar sua marca, seus produtos ou serviços até os seus clientes. Esse é um dos motivos de as lojas virtuais estarem se tornando cada vez mais populares atualmente, sendo uma das melhores alternativas para quem deseja alcançar seus clientes através da internet.

Entre as vantagens de criar uma loja online, podemos citar:

a) Abrangência: permite a venda de produtos para clientes em outras cidades, estados e até países, sem a necessidade de abrir uma filial naquele lugar, apenas utilizando algum serviço postal;

b) Disponibilidade: desde que esteja hospedado em um serviço de nuvem competente, uma loja online funciona 24 horas por dia, 7 dias por semana;

c) Economia: não há necessidade de um espaço físico para o funcionamento de uma loja virtual, assim como o número de funcionários também é reduzido;

d) Fácil acesso: o cliente não precisa mais se deslocar até uma loja física para efetuar uma comprar, ele poderá fazer isso de sua casa, usando seu celular.

As vantagens são tantas que atualmente é quase inviável para um profissional autônomo, não expor seu trabalho na internet de alguma forma, seja por lojas virtuais ou redes sociais.

Paralelamente a isso, passamos por uma realidade onde muitas pessoas se enquadram no que é conhecido como “Analfabetismo Tecnológico”. O Dicionário Interativo da Educação Brasileira - EducaBrasil (2001, p. 1) define o termo Analfabetismo Tecnológico da seguinte forma: “Refere-se a uma incapacidade em “ler” o mundo digital e mexer com a tecnologia moderna, principalmente com relação ao domínio dos conteúdos da informática como planilhas, internet, editor de texto, desenho de páginas web etc.”. A partir disso, podemos dizer que existem pessoas que não possuem a habilidade de executar algumas tarefas na internet, o que pode impedir um profissional de possuir a visibilidade online da qual falamos anteriormente de sua importância.

Diante desse cenário, foi desenvolvido o sistema web Catalogue.me, com a intenção de ser uma ferramenta capaz de gerar catálogos digitais para profissionais que não tenham familiaridade com o mundo digital e que, por esse motivo, sentiriam dificuldade em realizar

(15)

esse procedimento nas plataformas comuns que estão disponíveis no mercado. O catalogue.me foi desenvolvido tomando cuidado com a experiência do usuário, buscando tornar a interface simples, porém funcional, removendo dificultadores e adicionando componentes intuitivos em tela. Uma pessoa com pouco ou nenhum conhecimento de processos online, mas com capacidade de ler consegue se orientar e executar todos os passos necessários para criar um catálogo virtual completo, sem necessidade de ajuda de terceiros.

Uma vez que foi atingido o objetivo principal, que é o desenvolvimento do sistema Catalogue.me, existe uma série de etapas que ainda precisam ser concluídas para que o trabalho possa ter um resultado satisfatório. Esses objetivos secundários não serão abordados nesse trabalho, mas a título de conhecimento são eles: a divulgação em larga escala do que foi desenvolvido, o ganho de popularidade da ferramenta entre os pequenos empreendedores, o colhimento de opiniões dos usuários sobre a utilização da plataforma e o aperfeiçoamento constante do sistema baseado nas avaliações. Tais passos guiam o Catalogue.me para o objetivo final, que é a atuação como um transformador social, modificando a forma como os usuários exercem seus trabalhos diários.

Portanto, este trabalho tem por objetivo descrever o funcionamento e as técnicas envolvidas na idealização e desenvolvimento da plataforma online Catalogue.me, além de mostrar como tal sistema poderá impactar na vida de profissionais que estejam buscando transformar seus negócios em plataformas digitais, mesmo sem conhecimento prévio em tecnologias atuais.

1.2 PROCEDIMENTOS METODOLÓGICOS

A concepção do Catalogue.me foi realizada a partir da identificação de um problema que estava ocorrendo com um parente próximo e que, posteriormente, foi notado que também afeta vários pequenos empreendedores, que é a falta do conhecimento necessário para divulgar seus produtos na internet de forma organizada.

Após conversa com tal parente, foi realizado o levantamento de requisitos do que viria a ser uma plataforma de geração de catálogos virtuais, identificando quais os pontos que deveriam divergir das soluções existentes no mercado e quais poderiam ser incorporados no sistema.

Por fim, ainda durante o desenvolvimento, alguns amigos que possuem pequenos comércios colaboraram através da realização de testes e avaliações, até que a plataforma estivesse em um estágio avançado de progresso, apta para a apresentação.

(16)

16

1.3 ESTRUTURA DO TRABALHO

No próximo capítulo serão apresentadas as tecnologias, os frameworks, as linguagens e todos os demais conceitos que foram utilizados durante o desenvolvimento da aplicação.

No terceiro capítulo é descrita a metodologia de desenvolvimento da plataforma. Isto significa que serão mostradas todas as tabelas criadas no banco de dados utilizado; serão explicados todos os componentes presentes no servidor, como as suas configurações e cada uma das rotas mapeadas; e por fim serão detalhados todos os casos de uso presentes na aplicação do cliente, bem como suas respectivas regras de negócio. Também é apresentado o meio de hospedagem de cada um dos componentes citados.

O quarto capítulo é responsável por apresentar os resultados obtidos após a finalização do projeto, mostrando cada uma das interfaces criadas e discutindo os seus usos.

No capítulo final serão abordadas as considerações finais a cerca do sistema Catalogue.me, refletindo se os objetivos principais foram atingidos e quais os próximos passos que deverão ser tomados para dar prosseguimento ao projeto.

(17)

2 FUNDAMENTAÇÃO TEÓRICA

Durante o desenvolvimento do sistema, foram utilizadas diversas tecnologias, frameworks e linguagens de programação, que serão devidamente explicitados nesta seção do trabalho.

2.1 JavaScript

Segundo a documentação encontrada no site do Mozilla Developer Network (MDN), o JavaScript é uma linguagem de programação interpretada, multiparadigma e dinâmica (MDN WEB DOCS, 2021). Criada em 1995 por Brendan Eich, se tornou muito popular nos navegadores e, consequentemente, para a programação de aplicações no lado do cliente. É geralmente utilizada para coordenar o comportamento de uma página web a partir de eventos, sendo popularmente utilizada no cliente side utilizando os navegadores como motores de interpretação, mas podendo assumir responsabilidades no server side e fora de um browser, através da utilização de componentes extra.

Por ser uma linguagem muito popular, o JavaScript possui diversas bibliotecas e frameworks que facilitam a produtividade e incrementam a eficiência dos softwares desenvolvidos, na mesma medida que reduzem a quantidade de código escrito. Tais fatores, aliados a grande quantidade de material disponível na internet para consulta, foram fundamentais para que tal linguagem tenha sido escolhida para ser utilizada no desenvolvimento de toda a plataforma Catalogue.me, tanto no servidor quanto no cliente.

2.2 Angular

O Angular é um framework que permite a criação de interfaces para aplicações utilizando o JavaScript. De acordo com a documentação oficial do Angular, esse framework foi desenvolvido e é sustentado por integrantes do Google com a intenção de aumentar a produtividade e a qualidade na criação de single-page applications (SPA) (ANGULAR, 2021).

A construção de uma página utilizando o Angular utiliza uma metodologia de componentização, ou seja, uma página pode ser montada através da junção de vários elementos chamados de componentes, como um quebra-cabeças.

Um mesmo componente pode ser reaproveitado em várias telas diferentes, o que gera um grande reaproveitamento de código e, além disso, é possível renderizar os componentes na

(18)

18

tela de forma desacoplada, evitando que toda a tela seja recarregada quando apenas um elemento sofrer uma alteração, propiciando um aumento na performance da aplicação. Essas características foram fundamentais para que o Angular pudesse ganhar espaço dentro da comunidade, sendo um dos frameworks JavaScript para criação de interfaces mais utilizados atualmente.

A popularização do Angular como uma ferramenta para criação de interfaces se deu também porque atualmente existem vários repositórios que disponibilizam componentes prontos para utilização, dos mais diversos estilos, temas, funções, etc. Isso faz com que alguns desenvolvedores que são menos familiarizados com a criação de interfaces encontrem uma forma confortável de construir suas aplicações. Essa foi uma característica importante no momento em que o Angular foi escolhido como o framework de desenvolvimento das interfaces do Catalogue.me, juntamente com o PrimeNG, um dos repositórios de componentes citados anteriormente e que possui elementos fundamentais para a montagem das telas do sistema.

2.3 REST API

Uma application programming interface (API) é vista como um conjunto de estratégias que descrevem como devem funcionar a comunicação entre aplicações ou dispositivos. Em outras palavras, uma API é um mecanismo que permite a comunicação entre duas aplicações, de modo que um serviço consiga acessar recursos que existem em outro serviço. Dessa forma, define-se a aplicação que busca o acesso aos recursos como Cliente, sendo a aplicação que contem tal recurso chamada de Servidor.

Uma API pode ser chamada de REST API se estiver em conformidade com os princípios do representational state transfer architectural style (REST). O site IBM (2021) define a arquitetura REST como um modelo flexível para os desenvolvedores, sendo dividida em cinco princípios básicos. São eles:

a) Interface uniforme: toda requisição a API deve ser igual se estiver buscando acessar o mesmo recurso;

b) Desacoplamento Cliente-Servidor: a aplicação do cliente deve ser totalmente independente do servidor e vice-versa, de forma que o cliente apenas conheça o endereço do recurso a ser acessado no servidor;

c) Sem estado: REST API’s não guardam estado ou qualquer informação relacionada a sessão ou requisição do cliente, o que é chamado de stateless;

(19)

d) Cacheamento: quando se mostrar necessário, alguma informação poderá ser cacheada no Cliente;

e) Arquitetura de camadas: é necessário que as chamadas a API transitem entre diferentes camadas da aplicação do Servidor, de forma que as responsabilidades durante a preparação da resposta estejam distribuídas entre as camadas.

2.4 Node.js

Como dito anteriormente, o JavaScript é uma linguagem de programação muito versátil, podendo ser utilizada em diversos ambientes e em diversos contextos, porém, em alguns casos, é necessário um ambiente para que a aplicação consiga ser executada, uma vez que o JavaScript é em sua natureza uma linguagem de programação interpretada e foi criada para o uso dentro de navegadores. Para ser possível a criação de uma REST API em JavaScript, faz-se necessário um motor que conceda à linguagem a capacidade de executar uma aplicação em um servidor web, e para o trabalho em questão foi escolhido o Node.js.

Em suma, o Node.js é um ambiente de execução de JavaScript no server-side, ou seja, ele permite que aplicações em JavaScript sejam executadas como aplicações standalone, rodando em uma máquina (que pode ser um servidor web) sem a necessidade de um browser para a execução (NODE.JS, 2021).

A principal característica de um servidor que opera utilizando o Node.js é o fato de operar com thread única (single thread), ou seja, existe apenas uma thread responsável pela execução das requisições, diferentemente de outras tecnologias que criam uma thread para cada requisição. O problema dessa última abordagem é que, como os recursos dentro de um servidor são finitos, infinitas threads não podem ser criadas, resultando em bloqueio de requisição caso a capacidade do servidor seja atingida. Em contrapartida, dentro do Node.js as requisições não são bloqueantes, pois executam dentro de um laço de eventos (Event Loop) onde para cada nova requisição um novo evento (Event) é criado, tratando os eventos de maneira concorrente através da utilização de chamadas de Entrada/Saída não bloqueantes. Tal característica concede ao Node.js uma grande escalabilidade às aplicações em servidores que, associado a flexibilidade do ambiente propiciado pelo maior repositório de pacotes do mundo, o Node Package manager (NPM), fazem com que o Node.js seja muito querido pela comunidade de desenvolvedores.

2.5 Amazon S3

(20)

20

O Amazon Simple Storage Service (S3), como o nome diz, é o serviço de armazenamento de recursos disponibilizado pela Amazon. O serviço S3 possui uma interface bastante intuitiva e simples, de modo que possibilita aos desenvolvedores focar na produtividade ao armazenar ou recuperar dados na web. Ele possibilita que o desenvolvedor tenha, à disposição, o ambiente e infraestrutura da própria Amazon. Além disso, oferece as vantagens naturais do armazenamento de recursos na web.

(21)

3 METODOLOGIA

Este capítulo abordará os detalhes sobre o desenvolvimento do sistema Catalogue.me, como sua arquitetura, casos de uso, infraestrutura de servidores na web, entre outros. O sistema está dividido nas seguintes partes: uma interface que conversa com o usuário (client side) desenvolvida em Angular, uma REST API que serve os recursos necessários (server side) desenvolvida em Node.js e um banco de dados PostgreSQL, todos hospedados em servidores na internet através de serviços gratuitos. Todos os detalhes da implementação dessas partes, bem como suas devidas hospedagens na internet estão descritos ao longo deste capítulo.

3.1 MODELAGEM DO BANCO DE DADOS

O bando de dados da aplicação foi desenvolvido utilizando o Sistema de Gerenciamento de Banco de Dados (SGBD) PostgresSQL, de forma a preencher os requisitos de armazenamento do sistema. Para isso, a modelagem das entidades em tabelas no banco de dados foi feita como segue a Figura 1, uma representação do Modelo de Entidade Relacionamento, ou Entity-Relationship Model (ERD).

Fonte: Elaborado pelo autor (2021).

Figura 1 – Modelo Entidade Relacionamento

(22)

22

Apesar de aparentemente simples, o modelo escolhido para o projeto se mostra bastante funcional e atende todas as necessidades da aplicação. Nesse modelo temos duas tabelas que são utilizadas para armazenar valores: Shops e Items. A seguir veremos uma explicação detalhada sobre essas entidades.

3.1.1 Shops

Essa entidade é utilizada para mapear os catálogos que irão ser cadastrados no sistema.

Uma loja, para o Catalogue.me, é um espaço que agrupa todos os produtos de uma determinada loja do mundo real, de modo a organizar e delimitar o espaço de cada usuário no banco de dados. Para tal, essa entidade necessita dos seguintes atributos:

a) Id: o id funciona como o identificador único de uma loja no banco de dados, e é utilizado principalmente para fins de busca ou no cadastro de produtos, como será mostrado mais à frente. Este atributo é um valor inteiro, não pode ser nulo e é a chave primária desta tabela.

b) Name: essa coluna representa o nome da loja, uma informação bastante importante pois representa a identidade de uma loja para o cliente. Tal atributo será utilizado para gerar o endereço localizador de recursos, mais conhecido como Uniform Resource Locator (URL), que permite o acesso à loja em questão, além de ser apresentado na tela para o cliente. Esse atributo é uma string que não pode ser nula.

c) Whatsapp: será populado com o whatsapp da loja em questão. Essa informação tem a função de conectar um cliente com o proprietário de uma loja do sistema, pois o ato da compra de um produto se dá por meio do envio de mensagens através da API do Whatsapp. Para facilitar a autenticação do usuário, esse número também é responsável pelo login do usuário no sistema. Esse atributo é uma string que não pode ser nula.

d) Passwd: com o objetivo de facilitar a modelagem da autenticação do usuário no sistema, foi escolhido que a informação da senha de acesso também ficará na tabela da entidade loja. Esse atributo é uma string que não pode ser nula.

(23)

3.1.2 Items

Essa entidade é a representação de um produto, serviço, item e afins, que serão agrupados em uma loja do sistema e exibidos nos catálogos. Para tal, esta entidade necessita dos seguintes atributos:

a) Id: o id funciona como o identificador único de um item para o banco de dados, sendo necessário principalmente na execução de buscas às suas informações. Esse atributo é um valor inteiro, não nulo e é a chave primária desta tabela.

b) Name: representa o nome do item cadastrado, que será exibido para o cliente na sua apresentação no catálogo. Esse atributo é uma string não nula.

c) Price: representa o valor do item em questão que será mostrado no catálogo. Esse atributo é um valor numérico, que não pode ser nulo.

d) Info: representa as informações extra do produto, é um recurso opcional não aparece no catálogo inicial, é uma informação que só é vista na página de detalhes sobre o produto. Esse atributo é uma string que pode ser nula.

e) Ativo: representa o estado de estoque do produto na loja. É uma informação boleana e, caso verdadeiro, significa que o item está disponível no estoque, caso falso o item se encontra com estoque esgotado.

f) Avatar: armazena o endereço URL da imagem de capa do item. É uma string que pode ser nula.

g) Shop_id: é a chave id da loja correspondente ao item. Tal coluna é utilizada na representação do relacionamento entre as duas tabelas do esquema, fazendo o papel de chave estrangeira no relacionamento do tipo 1xN (um para muitos), ou seja, uma loja poderá ter muitos produtos a ela relacionados.

3.1.3 Hospedagem do banco de dados

O banco de dados deste projeto se encontra hospedado no serviço online Heroku¹, no plano gratuito da ferramenta. Nesse plano, o host do servidor aponta para um serviço na Amazon, sendo assim possível dizer também que o banco de dados está em um computador

1 Disponível em: https://www.heroku.com/

(24)

24

desta última. Esse serviço de armazenamento é um add-on no projeto REST API que também está hospedado no plano gratuito do Heroku, como será explicado mais à frente.

3.2 SERVER SIDE

O server side da aplicação foi implementado em forma de uma REST API em JavaScript, através do ambiente de execução de aplicação Node.js. A aplicação é utilizada pelo serviço do cliente como uma ponte para o banco de dados e, através do Express, é disponibilizado um conjunto de rotas pelas quais a aplicação do cliente poderá executar diferentes operações com os dados, como inserir, consultar ou alterar. Ao longo deste capítulo será explicado o passo a passo do desenvolvimento dessa REST API, além de explicitar o conjunto de rotas as quais o serviço atende e como podem ser utilizadas pelo cliente side.

3.2.1Configuração inicial do servidor

A configuração de um servidor web é o passo inicial de uma aplicação REST API, pois é nesse momento que o serviço começará a “ouvir” requisições vindas através da internet, mesmo que nada seja feito em seguida.

Atualmente, um dos principais frameworks para o desenvolvimento de API’s utilizando a linguagem de programação JavaScript é o Express. Através dele é possível definir parâmetros como a porta na qual o servidor estará ouvindo; o controle de acesso a API através de clientes externos, ou Cross-Origin Resource Sharing (CORS); o formato dos dados que serão utilizados nas comunicações; onde ficam pastas de acesso público (pastas com conteúdo estático); as rotas nas quais o cliente poderá executar operações na API, entre outros.

Para a API do Catalogue.me, em poucas linhas de código, todas essas configurações foram definidas. Como podemos ver no trecho de código da Figura 2, a aplicação está configurada utilizando o Express, e através do método use são passadas as informações. Através dessa sequência de linhas de código exibida logo abaixo, de cima para baixo, o serviço está sendo definido para:

a) dar acesso a todos as requisições externas;

b) realizar a comunicação entre cliente e servidor ocorre por meio do envio de objetos do tipo JavaScript Object Notation (JSON);

(25)

c) definir que as rotas de acesso à API estão em um arquivo à parte, e serão mostradas mais à frente;

d) definir que a pasta “./public” possui conteúdo estático a ser servido pela API;

e) e por último, a API foi configurada a ouvir requisições na porta 3333.

Código 1 – Configurações iniciais utilizando Express

1. const app = express();

2. app.options('*', cors());

3. app.use(function(req, res, next) {

4. res.header("Access-Control-Allow-Origin", "*");

5. res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

6. next();

7. });

8.

9. app.use(cors())

10. app.use(express.json());

11. app.use(routes);

12. app.use(express.static('./public'));

13.

14. app.listen(process.env.PORT || 3333);

3.2.2 Configuração das rotas de acesso

A configuração das rotas é realizada também através do Express, pois nele temos um recurso chamado Router, que é uma função que utilizaremos para criar nossas rotas. Através do Router, primeiro temos que definir o tipo de requisição HTTP da rota, podendo ser de sete tipos:

GET, POST, HEAD, OPTIONS, PUT, DELETE e TRACE. Cada tipo de requisição tem uma característica e uma semântica, ou seja, para cada uma delas existe uma situação na qual faz mais sentido utilizá-la diante das outras. Os dois tipos mais utilizados são o POST e o GET, e ambos são utilizados neste projeto.

Após escolher o tipo da requisição, é necessário definir o caminho que indicará cada método da API, e isso é feito de forma bem simples, como podemos ver no código abaixo. A descrição da utilização de cada uma das 12 rotas da aplicação está dividida em dois arquivos de controle, um para as requisições que envolvem as lojas e outro para os produtos. Abaixo serão explicadas cada uma delas na sequência de cima para baixo:

(26)

26

Código 2 – Rotas de acesso para aplicação

1. const routes = express.Router();

2. const shopsController = new ShopsController();

3. const itemsController = new ItemsController();

4.

5. routes.post('/shops', shopsController.create);

6. routes.post('/shops/edit', shopsController.edit);

7. routes.get('/shops', shopsController.index);

8. routes.get('/shop/:id', shopsController.findById);

9. routes.get('/shop/:tag', shopsController.findByTag);

10. routes.post('/login', shopsController.login);

11.

12. routes.post('/items', uploads.single('avatar'), itemsController.create);

13. routes.post('/avatar', uploads.single('avatar'), itemsController.addAvatar);

14. routes.post('/items/edit', itemsController.edit);

15. routes.post('/items/delete', itemsController.delete);

16. routes.post('/items/inative', itemsController.inativar);

17. routes.get('/items', itemsController.findByShop);

a) A primeira rota é do tipo POST e ouve o caminho /shops. Ao receber uma requisição nesta rota a API tem o dever de cadastrar uma nova loja no banco de dados, e isso ocorre da seguinte forma: o cliente envia uma requisição do tipo POST que possui obrigatoriamente os três atributos name, whatsapp e passwd;

após receber esses três valores, a senha passa por um processo de criptografia, para melhorar a segurança do usuário, utilizando uma biblioteca do JavaScript crypto; o próximo passo é a inserção dos valores no banco de dados (a senha a ser inserida no banco de dados é o resultado da criptografia), para esse fim utiliza-se a biblioteca knex, que ajuda a gerenciar todo o acesso e comunicação com o banco. O retorno desse método é uma resposta com status 201 Created.

b) Esta rota é do tipo POST e é acionada pelo caminho /shops/edit. Como o caminho sugere, nessa requisição a API irá editar algum valor de uma loja já cadastrada. Para esta rota, são passados os parâmetros id, name e whatsapp e apenas será realizada uma busca na tabela shops através do id informado e um comando update, atualizando os valores da loja encontrada pelos valores recebidos na requisição. O knex novamente cuida do acesso ao banco de dados nas duas situações necessárias.

c) A terceira rota é do tipo GET, acionada pelo caminho /shops. Essa rota tem um papel bastante simples, retornar todas as lojas cadastradas no banco de dados.

(27)

Nenhum parâmetro é necessário para essa busca, o knex consegue acessar e retornar essas lojas com facilidade.

d) Nessa rota do tipo GET, a API tem o dever de retornar uma loja a partir de um id informado. Para acionar essa rota utiliza-se o caminho /shop/:id, onde o termo

“:id” significa que na própria rota deve existir um parâmetro chamado id, contento um valor. Um exemplo de acesso a uma rota com parâmetros é

“/shop/25”, onde a API entenderá o valor 25 como o parâmetro de nome id. A partir disso o trabalho da API é somente utilizar o knex para consultar no banco de dados uma loja que possua o id igual ao que será passado pela URL.

e) Essa rota também é do tipo GET e também utiliza um parâmetro e, de forma semelhante à rota anterior, captura o valor do parâmetro passado através da URL e utiliza o knex para consultar o banco de dados, mas dessa vez o atributo que será usado na busca é a tag. A tag é a representação da URL da loja (parte que vem após a URL base do sistema Catalogue.me), que é igual ao nome da loja sem espaços entre as palavras. Dessa forma, é possível utilizar a tag numa consulta pelo nome das lojas através de um pequeno ajuste na query.

f) A última requisição referente às lojas é a /login, uma requisição do tipo POST que é utilizada para autenticar o usuário no sistema. Para tal fim, é necessário que sejam informados dois atributos, whatsapp e passwd. De posse desses dois valores, criptografamos a senha utilizando o mesmo método do cadastro de lojas, e então é buscado no banco de dados uma loja que possua a combinação de valores de whatsapp e senha criptografada, iguais as obtidas anteriormente. Uma vez que seja possível encontrar uma loja correspondente, é criado um Json Web Token (JWT), utilizando a biblioteca jsonwebtoken do JavaScript. Esse token possui as informações de sessão do usuário agora autenticado, e será utilizado pelo cliente para iniciar uma sessão no navegador após o login.

g) O primeiro caminho utilizado pelo controlador responsável pelos produtos é o /items, uma requisição do tipo POST que cadastra um produto no banco de dados. Para o cadastro do item, é necessário que sejam informados os atributos name, price, info e shop_id, sendo o info o único opcional. Antes de entrar no

(28)

28

método create, a requisição passa por um middleware, que é um recurso do express para encadear funções durante o tratamento de uma requisição. Em resumo, um middleware é uma função que é executada antes da função principal da rota, e nesse caso a função a ser utilizada como middleware é a single, presente na biblioteca multer. Essa biblioteca é utilizada amplamente pelos desenvolvedores JavaScript para realizar o upload de arquivos para o servidor e aqui, com o auxílio de outra biblioteca do mesmo grupo chamada multer-s3, o multer terá a capacidade de realizar o upload de um arquivo não para o próprio servidor, mas para um bucket localizado nos servidores da Amazon S3, que foi previamente configurado. O acesso ao bucket da Amazon S3 é feito através da biblioteca aws-sdk e, caso exista um arquivo na requisição, o multer fará o upload corretamente. Nessa requisição, o arquivo em questão é uma imagem de capa para o item, que pode ou não ser informado no momento do cadastro. Após o tratamento dessa imagem, seguimos para a criação do item em si utilizando os atributos que foram obtidos na própria requisição junto da URL do arquivo salvo na Amazon (caso exista).

h) Nessa requisição, utiliza-se o caminho /avatar para inserir uma imagem em um produto já existente. Essa requisição é do tipo POST e utiliza o mesmo middleware da requisição anterior para fazer upload da imagem para a Amazon S3 antes de continuar com o processamento. Após esse passo, é utilizado apenas o id do produto para, através do knex, alterar o valor do campo avatar pela URL da imagem cadastrada.

i) A rota /items/edit é utilizada para editar as informações textuais de um produto, pois a sua imagem é alterada a partir da rota anterior. É uma rota do tipo POST, que recebe as informações de name, price e info, além do id do produto, e utiliza o knex para realizar um update simples das informações.

j) Através dessa rota é possível excluir um produto cadastrado. Utilizando o caminho /items/delete numa requisição do tipo POST, e informando o id do produto, a operação poderá ser realizada corretamente através de uma chamada do método delete do knex.

(29)

k) A rota /items/inative, do tipo POST, modifica o status de estoque de um produto.

Através do id do item, um update é realizado no knex, verificando o valor atual de estoque do produto e alterando para o valor contrário.

l) Finalmente na última rota, um GET que é acionado pelo caminho /items, o cliente recebe um vetor com todos os produtos de uma loja, informando apenas o id da loja desejada. O knex consegue realizar essa tarefa com uma simples query ao banco de dados.

3.2.3 Hospedagem da aplicação

A aplicação da REST API se encontra hospedada no Heroku, através de um plano gratuito, apenas as imagens estão nos servidores da Amazon S3, em um bucket criado para esta plataforma. Todo o código se encontra na plataforma Github.

3.3 CLIENT SIDE

A implementação da aplicação do cliente no projeto Catalogue.me foi desenvolvida através do framework de programação front end chamado Angular. Com o auxilio do Angular, é possível desenvolver páginas web do tipo single page com bastante recurso e facilidade, principalmente quando conciliado com o superset do JavaScript, o TypeScript. O TypeScript permite que os desenvolvedores criem aplicações em JavaScript, porém com tipagem de variáveis, o que possibilita uma segurança muito maior ao codificar. Para este projeto, foram usadas algumas bibliotecas para auxiliar no desenvolvimento, como é o caso do PrimeNG, uma poderosa coletânea de componentes de Interface de Usuário (IU), de onde foram retirados a maioria dos componentes gráficos da aplicação.

A aplicação do cliente está dividida em três grandes áreas: a página inicial, o dashboard do lojista e o catálogo virtual para o cliente. Neste capítulo será mostrada a importância e a função de cada uma das áreas da aplicação, bem como seus casos de uso e regras de negócio.

(30)

30

3.3.1 Página Inicial

A página inicial é a porta de entrada da plataforma. Nela temos algumas informações acerca do sistema Catalogue.me, afim de atrair um usuário para aderir ao projeto. Algumas das informações presentes nesta tela são a possibilidade de integração com o whatsapp, a gratuidade do projeto, a facilidade com a qual o projeto possibilita a criação de uma loja virtual e a importância de um catalogo digital para um empreendedor. Além de informações, como podemos ver na Figura 2, essa parte da plataforma possui dois casos de uso, o cadastro e o login. Abaixo serão explicadas as regras de negócio de cada um desses casos de uso.

3.3.1.1 Cadastro de usuário

Este caso de uso é o primeiro passo para um usuário conseguir gerar um catálogo virtual para sua loja na plataforma Catalogue.me, pois no cadastro de usuário também é criada a loja digital, mas isso fica escondido do cliente. Para o lojista que estiver realizando o cadastro de

Figura 2 - Diagrama de Casos de Uso da Página Inicial

(31)

sua loja na aplicação, apenas é solicitado o nome da loja, um whatsapp e uma senha, facilitando o ingresso de pessoas que não possuem endereço de email.

As regras de negócio desse formulário são:

a) O lojista deve inserir um nome, não nulo. O nome poderá conter letras, números ou caracteres.

b) O lojista deverá inserir um número de celular válido, que esteja vinculado ao aplicativo whatsapp, seguindo o padrão (99) 99999-9999. Apenas números podem ser digitados neste campo.

c) O lojista deverá inserir uma senha, não possuindo limitação de tamanho e podendo conter letras, números ou caracteres especiais.

Como podemos notar, as regras de negócio são bastante brandas, de modo a flexibilizar o acesso à plataforma, com ênfase em o usuário conseguir efetuar o cadastro com sucesso sem precisar de muitas tentativas. Após o cadastro, o usuário é redirecionado ao próximo caso de uso, a Autenticação de usuário. Caso algum erro aconteça, uma mensagem de erro é disparada na tela do usuário

3.3.1.2 Autenticação de usuário

Neste caso de uso, o usuário poderá se autenticar para receber permissão de acessar o sistema como administrador de uma loja virtual. Se trata de uma tela de autenticação facilitada, pois resume todo o visual a apenas itens indispensáveis, whatsapp, senha e um botão de confirmação.

As regras de negócio desse formulário são:

a) O lojista deverá inserir um número de celular que possua cadastro no aplicativo whatsapp e que tenha sido previamente cadastrado na plataforma, diretamente relacionado com uma loja virtual existente no banco de dados.

b) O lojista deverá inserir uma senha que seja diretamente relacionada com a mesma loja em questão no item anterior.

Após esse passo, caso a autenticação seja realizada com sucesso, o usuário é direcionado para a próxima área do sistema, o Painel de administrador. Em caso de erro na autenticação, uma mensagem é disparada na tela do usuário.

(32)

32

3.3.2 Painel de administrador

O painel de administrador é a área reservada para um lojista configurar a sua loja, criando, editando e deletando informações. Essa área é a mais importante do sistema, e a que foi melhor trabalhada, visto que ela precisa ser intuitiva o bastante para que o usuário consiga operar sua loja sem dificuldade de encontrar as várias funções disponíveis para a customização de sua loja. Neste capítulo serão mostrados os casos de uso dessa tela, que estão ilustrados na Figura 3 através de um diagrama de casos de uso, bem como suas regras de negócio.

Esta parte da plataforma exige autenticação de usuário para ser acessada, o que significa que é mostrada logo após o caso de uso do login, que se encontra na tela inicial. No primeiro acesso, a loja vai se encontrar configurada com nome e whatsapp, porém com a seção de produtos vazia. Cabe ao usuário começar a informar os produtos que serão anunciados no catálogo a partir do caso de uso de Cadastro de produtos. Uma vez realizada a inserção dos itens no catálogo, o restante dos casos de uso aparece apenas para manutenção do estoque e compartilhamento do link da loja virtual.

Figura 3 - Diagrama de Caso de Uso do Painel de Administrador

(33)

3.3.2.1 Cadastro de produto

Este deverá ser o primeiro caso de uso acessado após a autenticação inicial do usuário na plataforma, sendo responsável por inserir no sistema os produtos que serão exibidos no catálogo virtual. Para a inserção do produto ser de fácil realização, foi pensado em solicitar ao usuário apenas informações extremamente necessárias, para encurtar o formulário que deve ser preenchido e agilizar o processo. A partir disso, podemos descrever as regras de negócio da seguinte forma:

a) O usuário deverá inserir o nome do produto, que poderá conter letras e números.

Esta é uma informação obrigatória.

b) O usuário poderá inserir a descrição do produto, que consiste em um pequeno texto explicativo. Esta informação é opcional.

c) O usuário deverá inserir o preço do produto, um valor numérico não negativo.

Esta informação também é obrigatória.

d) Por último, uma imagem poderá ser inserida pelo usuário. Essa é uma informação opcional e será utilizada a função nativa do dispositivo para a obtenção do arquivo, respeitando os formatos de arquivo que representam figuras, fotos e imagens.

Uma vez informado essas informações, o usuário deverá pressionar o botão “salvar”

para finalizar o procedimento, recebendo uma mensagem de confirmação em caso de sucesso, ou uma mensagem de erro em caso de algum problema com a requisição. O usuário deve atentar que o botão para concluir o cadastro apenas ficará disponível se todas as informações obrigatórias forem devidamente preenchidas.

3.3.2.2 Edição de produto

Uma das principais formas de manutenção do conteúdo do catálogo é o caso de uso de Edição de produto. Ele é responsável por alterar informações de um produto já cadastrado na plataforma, podendo inclusive adicionar informações opcionais que não foram incluídas no momento do cadastro. As regras de negócio desse caso de uso são:

a) O usuário poderá alterar o nome do produto, que obrigatoriamente já virá preenchido. O nome digitado será o novo nome do produto em questão, contanto que o campo não fique vazio após a alteração.

(34)

34

b) O usuário poderá alterar a descrição do produto ou, em caso de não existir uma descrição ainda, esta poderá ser adicionada neste momento.

c) O usuário poderá alterar o preço do produto, que obrigatoriamente virá preenchido. O preço não poderá ficar vazio após a modificação.

d) O usuário poderá alterar a imagem de destaque do produto ou, em caso de não existir uma imagem ainda, esta poderá ser adicionada a partir deste campo.

Após finalizadas as alterações necessárias, o usuário poderá concluir a ação no botão

“salvar” a qualquer momento, desde que nenhuma informação obrigatória tenha sido excluída.

Em caso de sucesso, uma mensagem de confirmação será exibida, assim como uma mensagem de erro surgirá caso algo de errado aconteça com a solicitação.

3.3.2.3 Alterar status de estoque

Este caso de uso é utilizado para informar se um produto ainda está disponível no estoque da loja, podendo ser modificado de maneira simples pelo usuário com apenas um clique. A regra de negócio desta função consiste em um produto receber a etiqueta “em estoque”

ao ser cadastrado no sistema e, ao clique do usuário, esta etiqueta é alternada com a opção

“esgotado”.

3.3.2.4 Deletar produto

Este caso de uso exclui o produto do sistema, de modo que as informações contidas nele não farão mais parte do banco de dados, não sendo passível de recuperação. Por ser uma função com caráter destrutivo, apresenta perigo para o usuário desatento e, por este motivo, uma mensagem de confirmação é invocada alertando o usuário do risco. Em caso de resposta afirmativa, o produto é devidamente deletado, em caso negativo o processo de exclusão é cancelado e o produto permanecerá no catálogo sem alterações.

3.3.2.5 Alterar informações da loja

Este caso de uso é responsável por modificar as informações que foram salvas no momento do cadastro da loja no sistema. Por motivo de facilidade, é possível alterar apenas as informações de nome e whatsapp. O usuário deverá atentar para os impactos que essas alterações causarão na loja pois, uma vez alterado o nome, o link de acesso à loja também será

(35)

modificado, impossibilitando que clientes com o caminho antigo consiga o acesso e, uma vez alterado o whatsapp, o modo como o usuário fará a autenticação no sistema mudará pois este depende diretamente desta informação. Uma vez ciente disto, o usuário poderá alterar essas informações apenas modificando os campos desejados, lembrando que não será possível concluir a operação caso alguma informação seja excluída.

3.3.2.6 Obter link da loja

A última função do painel de administrador é também a mais simples, porém uma das mais importantes, pois ela disponibiliza o caminho de acesso aos produtos cadastrados na loja, que deverá ser compartilhado com os clientes do usuário, em suas redes sociais, entre outros.

Com apenas um clique sobre o botão “copiar” o usuário terá o link da sua loja copiado para a área de transferência, pronto para ser compartilhado onde for desejado. O conteúdo visto pelo usuário que acessar o caminho obtido a partir deste caso de uso é chamado de Catálogo virtual e será explicado no próximo tópico.

3.3.3 Catálogo virtual

Esta seção da plataforma define a visão do cliente para as lojas virtuais cadastradas. É responsável por apresentar os produtos de uma loja virtual em formato de catálogo, de forma simples e organizada, permitindo que o cliente consiga visualizar os itens, efetuar buscas e realizar a compra de um ou mais produtos. As possibilidades de ações nesta parte do sistema estão expressas em forma de diagrama na Figura 6. Ao longo deste tópico serão explicadas cada uma dessas ações mostradas.

3.3.3.1 Busca por nome

O primeiro caso de uso desta página se trata de uma filtragem nos itens através do nome.

Esta filtragem emite um evento cada vez que uma tecla é digitada, não necessitando de um botão para efetuar a busca, tornando a tela mais dinâmica. Em caso do catálogo não possuir um produto tal qual o nome contenha o termo buscado, uma mensagem de aviso é exibida ao cliente.

(36)

36

3.3.3.2 Organização por preço

O segundo caso de uso é responsável por organizar a disposição dos produtos na lista por através do preço. Uma caixa de seleção disponibiliza duas opções de organização: crescente e decrescente, sendo exibidas como “menor para o maior” e “maior para menor”, respectivamente, por questões de facilidade na utilização. Essa organização é realizada ao selecionar uma das opções, também removendo a tarefa do usuário de precisar clicar em um botão para efetuar a ação.

3.3.3.3 Efetuar compra

O ultimo caso de uso da aplicação é também a porta de saída do sistema para o cliente.

Uma vez que um cliente clica no botão de efetuar a compra, ele é redirecionado para a aplicação do whatsapp, na conversa referente ao número cadastrado na loja em questão. Esse redirecionamento acontece de maneira automática e é predefinida uma mensagem explicando para o lojista de qual item se refere o contato daquele cliente, porém existe a possibilidade de alterar a mensagem caso o cliente ache necessário. Essa forma de finalizar uma compra é uma

Figura 4 - Diagrama de Caso de Uso do Catálogo Virtual

(37)

facilitação utilizada, pois assim o cliente não precisará possuir um cadastro no sistema para efetuar uma compra, como acontece na maioria das plataformas.

3.3.4 Hospedagem e compatibilidade

A aplicação do cliente encontra-se hospedada na plataforma Vercel² e pode ser acessada através dos caminhos https://www.catalogueme.store ou https://www.catalogueme.vercel.app.

Essa aplicação apresenta compatibilidade com diversos tamanhos de tela, podendo ser acessada utilizando desde dispositivos móveis até computadores em geral. Os caminhos citados acima foram indexados na ferramenta Google, permitindo ao usuário encontrar o Catalogue.me através de uma pesquisa no site de buscas.

Para melhorar a comodidade do utilizador, foi implementada ao final do projeto a tecnologia Progressive Web Application (PWA), que permite ao usuário realizar a instalação da aplicação no dispositivo (independente da origem do acesso), afim de funcionar como um aplicativo nativo. Para isto, ao acessar o sistema de um novo dispositivo o cliente é informado dessa possibilidade por meio de uma notificação flutuante, bastando apenas permitir que a instalação seja realizada.

2 Disponível em: https://vercel.com/

(38)

38

4 RESULTADOS

O resultado deste projeto é uma aplicação completa com back end e front end, pronta para utilização dos usuários. Neste capítulo serão mostrados todos os detalhes da interface final, por meio de um passo a passo de como uma loja fictícia chamada “Loja 10” poderia ser cadastrada, autenticada, preenchida com produtos fictícios, e compartilhada com seus clientes.

A partir deste exercício, poderemos transitar por todos os casos de uso descritos anteriormente e avaliá-los quanto a sua praticidade, facilidade e usabilidade. Lembrando que o público alvo deste projeto são pessoas sem familiaridade com sistema web, poderemos destacar nas telas que serão mostradas a seguir, o cuidado com a experiência do usuário e a encontrabilidade da informação.

4.1 PAGINA INICIAL, CADASTRO E LOGIN

Neste tópico serão mostrados os resultados obtidos para a página inicial do sistema, incluindo as telas de cadastro e login. Imagens da plataforma serão utilizadas para exibir como está a conclusão do projeto. Para cada tela obteremos duas figuras, representando a visualização em um computador e em um dispositivo mobile.

Para começar, na Figura 5 temos o resultado da tela inicial do sistema. Tal interface funciona como uma apresentação do Catalogue.me, além de fazer uma chamada para o cadastro e comentar sobre suas funções e qualidades. Se trata de uma interface limpa e simples, com figuras para aproximar o usuário do conteúdo na tela. A abordagem utilizada é focada em passar a informação para o lojista da forma mais natural possível, sem fazer uso de palavras que podem não ser conhecidas pelo público geral.

Na figura 6 temos a tela de cadastro de usuário, novamente utilizando de linguagem comum e imagens para atrair a atenção, é buscado que o processo de cadastro não seja cansativo e complexo, solicitando apenas informações muito necessárias, como dito anteriormente na descrição do caso de uso.

A figura 7 trata da tela de login, que é a porta de entrada para o painel de administrador de uma loja. Nela podemos ver como o cuidado com a experiência do usuário pode deixar o processo de autenticação simples. A tela busca ser agradável e convidativa.

(39)

Figura 5 - Tela inicial vista em um computador (esquerda) e vista em um dispositivo mobile (direita)

(40)

40

Figura 6 - Tela de cadastro vista em um computador (esquerda) e vista em um dispositivo mobile (direita)

(41)

4.2 PAINEL DE ADMINISTRADOR

Os resultados obtidos para o painel de administrador serão mostrados neste capítulo.

Toda a informação presente no dashboard está contida em apenas uma página, então é importante ressaltar os esforços empenhados em organizar a interface de maneira fluida, para que o usuário não se sinta perdido ao buscar por funcionalidades. A seguir veremos todas as especificidades desta interface, localizando cada um dos casos de uso descritos anteriormente e utilizando uma loja fictícia para exemplificar a utilização da plataforma.

Na figura 8 podemos identificar o primeiro acesso ao dashboard do usuário, onde através de uma interface bastante simples, podemos enxergar as funcionalidades possíveis dentro de uma loja virtual do Catalogue.me. Antes de qualquer coisa, apenas ao autenticar, já é

Figura 7 - Tela de login vista de um computador (esquerda) e vista de um dispositivo mobile (direita)

(42)

42

possível identificar os seguintes casos de uso: Cadastro de produto, alteração de informações da loja e obtenção do caminho web do catálogo.

Já a Figura 9 mostra o formulário que será necessário preencher para realizar a adição de um item no sistema. Esta interface não possui alterações significativas quando comparando

Figura 8 - Dashboard sem produtos visto de um computador (acima) e visto de um dispositivo mobile (abaixo)

(43)

às visualizações em computador e mobile, pois o design responsivo é capaz de adaptar a tela de maneira satisfatória, conservando o principal aspecto: a praticidade.

A Figura 10 representa a aparência do painel administrativo após a inserção de alguns produtos por parte do lojista. A partir disso, podemos perceber novas funcionalidades, tais como: Edição de produto, alteração de estoque e exclusão de produto. Também é possível notar que o lojista pode filtrar pelos próprios produtos que cadastrou, afim de encontrar algum específico que queira realizar alguma modificação. As opções de filtragem são o filtro por nome do item e a ordenação pelo preço.

A Figura 11 mostra como é a aparência da tela de alteração de informações sobre um produto e, como pode ser notado, é exatamente igual ao cadastro. Isso ocorre para que o usuário

Figura 9 – Exemplo do cadastro de um produto na plataforma

(44)

44

não precise memorizar o funcionamento de várias telas diferentes, quando poderia memorizar somente uma vez o processo e aplicar em mais de um lugar.

Figura 10 – Exemplo de uma loja após o cadastro de alguns produtos

(45)

4.3 CATÁLOGO VIRTUAL

Este espaço é o objetivo final da criação de uma loja na plataforma Catalogue.me, é essa interface que é apresentada para o cliente final, essa é a apresentação dos produtos do usuário ao seu próprio público. Como podemos ver na Figura 12, essa tela é uma listagem em forma de grade dos produtos cadastrados no painel administrativo, e inclue: opções de busca e filtragem, nome da loja que está sendo exibida, produtos da loja e botão de compra. A Figura 12 mostra também como é a apresentação de um produto detalhado, caso o cliente queira ver as informações de um produto específico ou sua descrição, que não está mostrada na listagem de grade. Para acessar os detalhes, o cliente deverá apenas clicar em algum lugar do item desejado.

Figura 11 – Tela de edição de produto

(46)

46

Figura 12 – Catálogo virtual com detalhamento de um produto, visto de um computador

A Figura 13 mostra a mesma informação contida na Figura 12, porém com a perspectiva de um dispositivo mobile. O comportamento é o mesmo, permitindo que o usuário seja livre para escolher de onde acessar, sem perder nenhuma possibilidade de utilização do software.

(47)

Figura 13 – Catálogo virtual e detalhamento de um produto, visto de um dispositivo mobile

(48)

48

5 CONSIDERAÇÕES FINAIS

A importância de uma forma de renda pela internet foi evidenciada nos últimos anos após crise financeira causada pela pandemia da Covid-19. A percepção de que atualmente a maior parte das pessoas do mundo estão conectadas através desta rede, mostrou uma oportunidade para as pessoas que estão buscando complementar suas receitas, através da venda de produtos online. Com isso, diversos serviços foram criados para satisfazer esse público crescente de lojistas que buscam um espaço digital, porém pode-se notar um problema em comum entre eles: a falta de acessibilidade para pessoas com baixo conhecimento no manuseio de ferramentas web.

Partindo dessa problemática foi criado o sistema Catalogue.me, um serviço que busca introduzir pequenos empreendedores no meio digital, sem a necessidade de conhecimentos específicos sobre a internet.

Esse trabalho apresenta uma solução criada para um cenário específico de um problema social mais complexo, que é o acesso à informação contida no meio digital para pessoas classificadas como “analfabetos tecnológicos”. A criação de lojas virtuais é um recorte do problema citado anteriormente, e foi escolhido como foco desse estudo por possuir um potencial de aliviar a situação financeira de pessoas fragilizadas pelos impactos da pandemia da Covid- 19, impactando não somente a comunidade acadêmica como também o meio social, que será o principal favorecido.

O resultado obtido nesse trabalho consiste em uma plataforma web para criação de catálogos digitais. A abordagem escolhida neste projeto foi de facilitar o uso do sistema, utilizando de técnicas de análise da experiência do usuário juntamente com testes práticos com pessoas que não possuíam acesso à internet até pouco tempo.

A primeira versão do sistema conta com um painel administrativo para uso do lojista e seu catálogo virtual que será divulgado para os clientes, ambos desenvolvidos em Angular e hospedados com o auxílio da plataforma Vercel. Possui também um servidor hospedado na plataforma Heroku, que disponibiliza os dados através de uma API REST desenvolvida em Node.js.

O objetivo principal do projeto é o desenvolvimento do sistema Catalogue.me, e este foi alcançado e está em sua primeira versão. Os objetivos secundários são responsáveis por alavancar a plataforma desenvolvida no mercado de pequenos empreendedores, melhorar continuamente o serviço a partir de comentários dos usuários e, por fim, enxergar a

(49)

transformação social causada pelo uso do sistema. Esses objetivos ainda não foram atingidos, e serão foco de uma etapa futura do desenvolvimento.

A principal dificuldade enfrentada durante o curso do projeto foi o número pequeno de usuários utilizando a plataforma. Isso ocorre principalmente por limitações financeiras, que impedem a divulgação em larga escala. Essa limitação acaba por dificultar o processo de evolução cíclica do sistema, pois com menos feedbacks sobre o que está sendo produzido, se torna mais difícil entender as melhorias que podem ser realizadas. A melhoria contínua é de suma importância para qualquer sistema web, o catalogue.me ainda está em sua primeira versão e existem aspectos que serão melhorados com o passar do tempo.

Por fim, mesmo diante das dificuldades encontradas até o momento, o catalogue.me é uma iniciativa importante, pois tem potencial para exercer um papel transformador no meio social. Sugere-se então a continuidade deste projeto e a divulgação em larga escala, afim de assegurar o aprimoramento do sistema utilizando de comentários de usuários.