Proposta de um sistema de recomendação baseado em preferências do usuário

(1)

Raí Carvalho Gondim

Proposta de um Sistema de Recomendação

baseado em Preferências do Usuário

Natal – RN

Junho de 2019

(2)

Raí Carvalho Gondim

Proposta de um Sistema de Recomendação baseado

em Preferências do Usuário

Trabalho de Conclusão de Curso de Engenha-ria de Computação da Universidade Federal do Rio Grande do Norte, apresentado como requisito parcial para a obtenção do grau de Bacharel em Engenharia de Computação Orientador: Carlos Manuel Dias Viegas

Universidade Federal do Rio Grande do Norte – UFRN Departamento de Engenharia de Computação e Automação – DCA

Curso de Engenharia de Computação

Natal – RN

Junho de 2019

(3)

Raí Carvalho Gondim

Proposta de um Sistema de Recomendação baseado

em Preferências do Usuário

Trabalho de Conclusão de Curso de Engenha-ria de Computação da Universidade Federal do Rio Grande do Norte, apresentado como requisito parcial para a obtenção do grau de Bacharel em Engenharia de Computação Orientador: Carlos Manuel Dias Viegas

Trabalho aprovado. Natal – RN, 17 de junho de 2019:

Prof. Carlos Manuel Dias Viegas - Orientador

UFRN

Prof. Diogo Pinheiro Fernandes Pedrosa - Convidado

UFRN

Prof. Sérgio Natan Silva - Convidado

UFRN

Natal – RN

Junho de 2019

(4)

Dedico este trabalho ao meu pai, José Humberto Gondim Filho, e minha mãe, Valdilene Carvalho Gondim, por todo o apoio recebido.

(5)

AGRADECIMENTOS

Agradeço primeiramente a Deus pelo dom da vida e por ter me proporcionado chegar até aqui, à minha família por sua dedicação e companheirismo por todos esses anos.

Agradeço aos professores que sempre estiveram dispostos a ajudar e contribuir para um melhor aprendizado na universidade. Agradeço também à minha instituição por ter me dado a chance e todas as ferramentas que permitiram chegar hoje ao final desse ciclo.

(6)

“Feliz o homem que encontrou a sabedoria e alcançou o entendimento, porque a sabedoria vale mais do que a prata, e dá mais lucro que o ouro." (Bíblia Sagrada, Provérbios 3, 13-14)

(7)

RESUMO

O avanço da internet e da tecnologia permitiu que facilmente fosse possível começar um negócio online, o que possibilitou que muitas empresas surgissem rapidamente e assim causassem uma sobrecarga de opções de serviços e produtos aos usuários. Diante disso a utilização um sistema de recomendação passou a ser uma estratégia frequentemente encontrada nas grandes empresas que oferecem serviços na internet, pois permite que informações ou produtos sejam filtrados para um cliente de acordo com suas preferências, possibilitando uma melhor experiência ao usuário e assim garantindo bons resultados ao negócio. O sistema proposto foi desenvolvido utilizando o framework Ruby on Rails e é um sistema de recomendação genérico de filtro colaborativo, ou seja, ele foi desenvolvido para atender inúmeros casos de negócio.

Palavras-chaves: Sistema de recomendação, filtro colaborativo, Ruby on Rails.

(8)

ABSTRACT

The advancement of the Internet and technology made it easy to start an online business, which allowed many companies to emerge quickly and thus causing an overload of options of services and products. Therefore, the use of a recommendation system has become a strategy frequently found in large companies that offers their services on the Internet, since it allows information or products to be filtered to a client according to their preferences, allowing a better user experience and thus ensuring good results to the business. The proposed system was developed using the framework Ruby on Rails and is a generic recommendation system with collaborative filter, that is, it was developed to handle numerous business cases.

Keywords: Recommendation system, collaborative filter, Ruby on Rails.

(9)

LISTA DE ILUSTRAÇÕES

Figura 1 – Interesse, em score, das pessoas sobre sistema de recomendação ao longo

do tempo, medido através de pesquisas no google. . . 1

Figura 2 – Interesse, em score, do Postgresql ao longo dos anos, medido através de pesquisas no google. . . 5

Figura 3 – Rank de popularidade (score) dos sistemas de banco de dados. . . . 5

Figura 4 – Interesse, em score, da linguagem de programação Python, medido através de pesquisas no google. . . 6

Figura 5 – Interesse, em score, de Progressive Web App ao longo dos anos, medido através de pesquisas no google. . . 7

Figura 6 – Banco de dados mínimo do modelo genérico. . . 8

Figura 7 – Diagrama de fluxo do sistema de autenticação. . . 9

Figura 8 – Diagrama de fluxo da lógica do algoritmo de recomendação. . . 10

Figura 9 – Diagrama de fluxo do usuário fazendo avaliações. . . 11

Figura 10 – Diagrama de fluxo do funcionamento do web crawler. . . . 14

Figura 11 – Banco de dados do modelo de prova. . . 15

Figura 12 – Tela de login do sistema de recomendação. . . . 16

Figura 13 – Tela de cadastro do sistema de recomendação. . . 16

Figura 14 – Página responsável por deletar as avaliações antigas do usuário. . . 17

Figura 15 – Página para visualizar os itens para avaliação quando o usuário não possui o número mínimo de avaliações. . . 17

Figura 16 – Página para visualizar os itens para avaliação após realizado uma busca, quando o usuário não possui o número mínimo de avaliações. . . 18

Figura 17 – Página para visualizar os itens para avaliação quando o usuário possui o número mínimo de avaliações. . . 19

Figura 18 – Página para ver todos os dados de um item específico e realizar a avaliação. 20 Figura 19 – Página para ver todos os dados de um item específico após realizar sua avaliação. . . 20

Figura 20 – Página onde é exibido as recomendações originadas do algoritmo. . . . 21

Figura 21 – Tela inicial do sistema. . . 22

Figura 22 – Página de instruções. . . 22

Figura 23 – Página que exibe alguns dados do sistema de recomendação. . . 23

(10)

Figura 24 – Tela inicial do sistema acessado via dispositivo móvel. . . 23 Figura 25 – Tela de login do sistema acessado via dispositivo móvel. . . . 23 Figura 26 – Tela para selecionar os itens para avaliar acessado via dispositivo móvel. 24 Figura 27 – Tela que exibe as recomendações acessado via dispositivo móvel. . . 24

(11)

LISTA DE ABREVIATURAS E SIGLAS

SQL Structured Query Language

PWA Progressive Web App

MVC Model View Controller

IMDb Internet Movie Database

API Application Programming Interface

CSS Cascading Style Sheets

HTML HyperText Markup Language

(12)

SUMÁRIO

1 INTRODUÇÃO . . . . 1 1.1 Motivação e objetivos . . . . 2 1.2 Metodologia . . . . 2 1.3 Estrutura do Trabalho . . . . 3 2 FUNDAMENTAÇÃO TEÓRICA . . . . 4

2.1 Ruby e Ruby on Rails . . . 4

2.2 Banco de dados relacional e PostgreSQL . . . . 4

2.3 Web crawler, Python e Scrapy . . . . 6

2.4 Progressive Web App . . . . 6

2.5 Cascading Style Sheets e Bulma . . . . 7

3 DESENVOLVIMENTO . . . . 8 3.1 Banco de dados . . . . 8 3.2 Sistema de autenticação . . . . 9 3.3 Algoritmo de recomendação . . . 9 3.4 Geração de avaliações . . . 10 3.5 Páginas adicionais . . . 12 3.6 Responsividade . . . 12

3.7 Transformação em Progressive Web App . . . 13

3.8 Protótipo do sistema para séries de televisão . . . 13

4 RESULTADOS . . . 16

5 CONSIDERAÇÕES FINAIS . . . 25

5.1 Trabalhos futuros . . . 25

(13)

1

1 INTRODUÇÃO

Um sistema de recomendação tem como função ajudar o usuário na sua tomada de decisões, ajudando-o a lidar com a sobrecarga de informações, pois ao invés de dispor todas ou algumas informações aleatórias, ele irá dispor as informações que são do interesse do usuário, de acordo com uma análise dos dados dele.

Hoje em dia o uso de um sistema de recomendação é uma estratégia comumente utilizada por grandes empresas para o alavancamento da venda de seus produtos ou utilização dos seus serviços.

Como demonstrado na Figura 1, o interesse do uso dessa estratégia está se tornando cada vez maior no mercado global. Devido a esta grande e crescente demanda foi idealizado um sistema de recomendação genérico para empresas que pode ser aplicado em diversos casos de negócio.

Figura 1 – Interesse, em score, das pessoas sobre sistema de recomendação ao longo do tempo, medido através de pesquisas no google.

Fonte – Extraída do site https://trends.google.com.br.

O seu funcionamento baseia-se em realizar uma filtragem em uma quantidade de itens no intuito de prever a preferência de um usuário, para que seja exibido itens do seu interesse e assim garantir uma melhor experiência a ele.

Diante disso, empresas que possuem serviços digitais como Walmart, Amazon,

Alibaba, B2W, Netflix e Spotify são alguns exemplos que adotaram o uso de um sistema

de recomendação para oferecer os seus produtos aos usuários e assim obter melhores resultados.

Sistemas de recomendação podem ter diferentes abordagens para realizar a filtragem, elas podem ser realizadas através de uma filtragem colaborativa, filtragem baseada em conteúdo e filtragem híbrida. A filtragem colaborativa baseia-se em utilizar os dados

(14)

Capítulo 1. Introdução 2

do usuário para relacioná-lo com outros usuários do sistema e a partir deles retirar as recomendações. A filtragem baseada em conteúdo consiste em utilizar os dados de um item para relacioná-lo a outros, então é possível retirar as recomendações a partir dos itens que já são preferência do usuário. Já a filtragem híbrida é uma mistura das 2 filtragens anteriores, onde ele utiliza tanto os dados dos itens como os dados de todos os usuários para prever as recomendações ao usuário em questão.

A solução apresentada neste trabalho utiliza a abordagem de filtragem colaborativa, ou seja, o algoritmo desenvolvido coleta e analisa dados gerados por todos os usuários, relaciona-os e extrai as recomendações através das preferências dos usuários que sejam mais parecidos entre si. Esta escolha foi realizada pelo fato de o sistema de recomendação proposto ser um sistema genérico, portanto é esperado que os itens que são inseridos mudarão, assim como seus dados, então a utilização de um filtro baseado em conteúdo necessitaria uma configuração extra que afetaria diretamente o algoritmo de recomendação.

1.1 Motivação e objetivos

Com o passar dos anos a quantidade de usuários na internet cresceu de forma acelerada, usuários de diferentes países e culturas, portanto com diferentes preferências, ao mesmo tempo as empresas buscam por soluções para alavancar suas vendas e melhorar a experiência do usuário.

O sistema de recomendação foi criado para solucionar esses problemas e, com o passar dos anos, esta estrategia acabou se difundindo, tornando-se comum no mercado e sendo adotado por várias empresas de todo o planeta.

Por tornar-se uma estratégia bastante utilizada no mercado, surgiu a necessidade de existir um sistema de recomendação genérico, de código fonte aberto, que possa ser aplicado em variados tipos de negócio.

Neste trabalho é apresentado um sistema de recomendação genérico que analisa dados de todos os usuários cadastrados no sistema para prever boas recomendações para um usuário específico e, para provar o seu funcionamento, foram utilizados séries de televisão para serem os itens do sistema.

1.2 Metodologia

A primeira etapa do projeto foi desenvolver o banco de dados, utilizando Postgresql, para armazenar os dados que serão utilizados no sistema. A segunda etapa foi implementar um sistema de autenticação do usuário e realizar a sua configuração. Já a terceira etapa foi desenvolver o algoritmo de recomendação e as páginas necessárias para que o usuário

(15)

Capítulo 1. Introdução 3

possa gerar novas avaliações.

Após o desenvolvimento do algoritmo e suas páginas, foi criado um webcrawler para que este pudesse extrair dados da internet e estes serem armazenados no banco de dados. Depois foi modificado algumas páginas do sistema para que estas se tornassem responsivas e utilizassem os dados que estão armazenados no banco de dados. Para finalizar, todo o sistema foi transformado em um Progressive Web App (PWA).

1.3 Estrutura do Trabalho

Este trabalho apresenta uma introdução sobre o tema. Em sequência, o Capítulo 2 aborda o referêncial teórico. O Capítulo 3, por sua vez, explica o desenvolvimento do projeto, enquanto o Capítulo 4 apresenta os resultados obtidos. Por fim, o Capítulo 5 traz a conclusão e os trabalhos futuros.

(16)

4

2 FUNDAMENTAÇÃO TEÓRICA

Este capítulo apresenta os conceitos necessários para o entendimento deste trabalho.

2.1 Ruby e Ruby on Rails

Ruby é uma linguagem de programação dinâmica desenvolvida em 1995 com foco

em simplicidade e produtividade (SOUZA, 2014). Ruby, similar em muitos aspectos com

Python (MALDONADO, 2019), suporta programação funcional, orientada a objetos,

imperativa e reflexiva.

Ruby On Rails é um framework de código aberto, desenvolvido em Ruby, projetado

para facilitar o desenvolvimento de sistemas web (FUENTES, 2014). Focado em velocidade e facilidade, Ruby on Rails é um framework idealizado para o aumento de produtividade de seus programadores (FELITTI, 2007), pois sua filosofia consiste em não repetir e convenção sobre configuração, ou seja, há padrões para se desenvolver algumas coisas (SANTOS, 2009), portanto o desenvolvedor reduz bastante o tempo de trabalho se utilizá-los.

Este framework possui uma arquitetura Model View Controller (MVC), isso significa que um projeto desenvolvido no Ruby on Rails possui models, views e controllers. Model é um modelo dos dados que normalmente é armazenado em um banco de dados, é onde fica as regras de negócio e as relações entre os dados. View é a página que será exibida e é através dela que é definido como será exibido os dados e suas possiveis interações. Já o

controller interpreta eventos de uma view e manipula os dados dos models.

Empresas como Github, Airbnb, Groupon, Kickstarter, Ask.fm e Bloomberg são alguns exemplos que possuem seus websites desenvolvidos com a utilização deste framework (SMITH, 2015).

2.2 Banco de dados relacional e PostgreSQL

Um banco de dados relacional é uma coleção de dados com relacionamentos prede-finidos entre si (CLAUDIO, 2011). Esses itens são organizados em tabelas em que cada linha contém um identificador único e as tabelas podem se relacionar entre si utilizando esses identificadores como chaves estrangeiras.

PostgreSQL é um poderoso sistema de gerenciamento de banco de dados relacional,

desenvolvido com código fonte aberto, suas origens datam de 1986 como parte do pro-jeto POSTGRES da Universidade da Califórnia em Berkeley e hoje é coordenado pelo

(17)

Capítulo 2. Fundamentação Teórica 5

PostgreSQL Global Development Group (SOUZA; AMARAL; LIZARDO, 2011).

Como este sistema de banco de dados tem seu código fonte aberto e possui constantes atualizações, sua popularidade tem crescido nos últimos anos e tornou-se um dos sistemas mais populares do mundo, como pode ser observado nas Figuras 2 e 3, então até empresas como a Apple, Skype, Internet Movie Database (IMDb) e Cisco utilizam esse sistema em seus serviços (BUI, 2018).

Figura 2 – Interesse, em score, do Postgresql ao longo dos anos, medido através de pesquisas no google.

Fonte – Retirada do site https://db-engines.com.

Figura 3 – Rank de popularidade (score) dos sistemas de banco de dados.

(18)

2.3 Web crawler, Python e Scrapy

Web crawler é um programa de computador criado para acessar e extrair dados

de páginas da internet automaticamente. Comumente utilizado por sites de busca, como

Google, Bing e Yahoo, o seu uso nos últimos anos tem se difundindo para muitas áreas além

de indexadores de sites de busca, como marketing e geração de banco de dados (MORAES, 2019).

Python é uma linguagem de programação que teve sua primeira versão pública divulgada em 1991 (LEONE, 2017). É uma linguagem de código fonte aberto que, por sua robustez, é utilizada para diversos fins e foi projetada para ser ágil, fácil e objetiva, por isso sua popularidade tem crescido rapidamente nos últimos anos (COMPUTERWORLD, 2018) e isso pode ser observado na Figura 4.

Figura 4 – Interesse, em score, da linguagem de programação Python, medido através de pesquisas no google.

Fonte – Extraída do site https://trends.google.com.br.

Scrapy é um framework gratuito e de código aberto, desenvolvido em 2008 na

linguagem Python. Criado para facilitar o desenvolvimento de web crawlers, hoje é mantido e coordenado pelo grupo Scrapinghub (SCRAPINGHUB, 2019). Este framework também possui como funcionalidade o desenvolvimento de consumidores de Application

Program-ming Interface (API) e, por ser escrito em Python, nos permite utilizar qualquer biblioteca

da linguagem e ser utilizado em diversos sistemas operacionais (ORTEGA; SARKER, 2019).

2.4 Progressive Web App

Progressive Web App é um termo para descrever um conjunto de técnicas para

desenvolver aplicações web (AGRIÃO, 2019). Em um PWA é adicionado progressivamente funcionalidades que antes só eram possíveis em aplicativos nativos e este também é reconhecido nativamente pelo navegador ao acessá-lo. Trata-se portanto de uma evolução híbrida entre uma página web e um aplicativo para dispositivo móvel, pois funciona offline,

(19)

envia notificações e oferece uma experiêcia similar de um aplicativo nativo (MATHEUS, 2018).

Como pode ser observado na Figura 5, esta nova tecnologia está se tornando cada vez mais popular e já está sendo adotada por grandes empresas como a Alibaba, Uber,

Instagram, Twitter, Trivago, OLX e várias outras (YATSKEVICH, 2019). Um exemplo de

muito sucesso é o da empresa BookMyShow’s, maior empresa vendedora de ingressos da India, pois seu PWA pesa 54 vezes menos que sua antiga versão para o sistema Android e 180 vezes menos que sua antiga versão para o sistema iOS, possui também tempos de carregamento bem menores e obteve, junto aos outros benefícios do PWA, um aumento de 80% no número de pedidos realizados no seu site (GOOGLE, 2017).

Figura 5 – Interesse, em score, de Progressive Web App ao longo dos anos, medido através de pesquisas no google.

Fonte – Extraída do site https://trends.google.com.

2.5 Cascading Style Sheets e Bulma

O Cascading Style Sheets (CSS) foi desenvolvido em 1996 pelo World Wide Web

Consortium para realizar a estilização de páginas web (EIS, 2006).

O CSS é uma ferramenta muito potente que utiliza uma sintaxe simples e baseada no inglês, possibilita a criação de animações complexas e permite realizar as estilizações mesmo separando o seu código em diversos arquivos (GONÇALVES, 2019).

Bulma é um framework CSS totalmente gratuito e de código fonte aberto. Este

framework, que é similar ao famoso Bootstrap e é baseado no Flexbox, é totalmente responsivo, modular e projetado para ser fácil de aprender, garantindo o mínimo de código

HyperText Markup Language (HTML) e tornando o seu código mais fácil de ler e escrever

(THOMAS et al., 2018). Ele também é customizável e possui todas as suas funções somente com a utilização de CSS e isso facilita realizar a sua integração com qualquer aplicação.

(20)

8

3 DESENVOLVIMENTO

O sistema de recomendação é um sistema web que foi desenvolvido utilizando o

framework Ruby on Rails. Ele possui um banco de dados relacional feito no Postgresql,

que posteriormente foi preenchido com dados extraídos por um web crawler. Por final foi adicionado responsividade em todas as páginas do sistema e este foi transformado em um PWA.

Este capítulo apresenta como foi desenvolvido o sistema de recomendação.

3.1 Banco de dados

O banco de dados relacional foi criado por meio do framework Ruby on Rails e apresenta uma estrutura conforme a Figura 6.

Figura 6 – Banco de dados mínimo do modelo genérico.

Fonte – Elaborada pelo autor em https://dbdesigner.net.

O modelo acima possui uma tabela chamada User que possui dados como email, que está no banco de dados como username, senha e nome dos usuários. Possui também outra tabela chamada Item que armazenará os dados dos itens que serão avaliados e recomendados no sistema. Por último possui uma tabela chamada Rating que armazena os dados das avaliações dos usuários.

(21)

Capítulo 3. Desenvolvimento 9

3.2 Sistema de autenticação

Para o sistema de autenticação foi utilizado uma biblioteca do framework Ruby on

Rails chamada Devise.

Com o Devise incluído no projeto foi necessário adicionar o campo nome para o usuário e então o sistema de autenticação foi configurado para que siga o fluxograma de funcionamento como demonstrado na Figura 7.

Figura 7 – Diagrama de fluxo do sistema de autenticação.

Fonte – Elaborada pelo autor.

Ao observar o fluxograma da Figura 7 é possível observar que o usuário pode fazer o login digitando um email e senha corretos e pode fazer um cadastro digitando um nome, um email que não seja utilizado por nenhum usuário e digitando igualmente uma senha e sua confirmação.

3.3 Algoritmo de recomendação

O algoritmo de recomendação foi desenvolvido em um controlador próprio. No controlador chamado recommendation controller encontra-se a função recommendations e ela recebe uma variável do tipo inteiro chamado HowMany, essa variável é responsável por controlar o número de recomendações que serão geradas para o usuário.

A lógica do algoritmo de recomendação que é realizado com um usuário é buscar por outros usuários que possuam o maior número de avaliações positivas parecidas e através de uma lista desses usuários, ordenada pelo número de avaliações iguais, é extraído os itens

(22)

mais relevantes que sejam avaliações positivas e que não estejam na lista de avaliações, positiva ou negativa, do usuário em questão. Sua ló´gica pode ser visualizada através do diagrama de fluxo na Figura 8.

Figura 8 – Diagrama de fluxo da lógica do algoritmo de recomendação.

Essa função é utilizada em 2 telas. A primeira é na tela de realizar avaliações, onde essa função é chamada com a variável HowMany igual a 6. Ela será usada para gerar 6 sugestões ao usuário, que possuir pelo menos 5 avaliações, para que ele tenha acesso fácil a itens mais parecidos com seu perfil e continue a realizar novas avaliações. A Segunda é na tela de ver recomendações, onde essa função é chamada com a variável HowMany igual a 10 e o usuário pode ver os 10 itens que terão maior relevância para ele.

3.4 Geração de avaliações

Foi estabelecido que a geração de avaliações deveria obedecer o fluxograma da Figura 9 e para isso foi necessário a criar algumas páginas e suas funções controladoras no sistema.

(23)

Figura 9 – Diagrama de fluxo do usuário fazendo avaliações.

Ao observar o fluxograma da Figura 9 é possível ver que o sistema disponibilizará ao usuário a opção de deletar as suas avaliações, caso existam, e após isso ele poderá realizar a busca pelos seus itens favoritos que aparecerão em uma lista. Ao clicar em um item o usuário poderá observar todos os dados dele e realizar sua avaliação. Quando o usuário realizar 5 avaliações será retornado uma página com os campos de busca, um campo com sugestões que exibe os itens selecionados através do algoritmo de recomendação e um campo com a lista de todos os itens existentes dividido em páginas. Por fim o usuário possui a opção de continuar suas avaliações para tornar o algoritmo mais preciso ou a opção de ver as recomendações geradas pelo sistema.

Foram criadas 2 visualizações para a avaliação. A primeira é a destroyAll que através dela é possível apagar as avaliações já existentes do usuário. A outra é a create que teve seu código escrito na linguagem Javascript e é responsável pela ação que é realizada logo após uma avaliação ser criada, é ela que irá desabilitar o botão que o usuário apertou para realizar a avaliação.

(24)

ou seja, páginas que são reutilizadas por outras. As páginas parciais criadas são a search que é responsável por realizar a busca de itens e a página item que é responsável pela representação de um item no sistema. Há a visualização chamada index que exibe as 2 páginas parciais. Existe também uma visualização chamada result que exibe, utilizando a página parcial item, o resultado do algoritmo de recomendação, os dados do usuário que foram utilizados no algoritmo e os últimos itens adicionados ao sistema. Por último a página chamada show que é responsável por exibir os dados detalhados de um item específico, o seu acesso é realizado somente com a utilização da página parcial item e é através dela que é realizado uma avaliação, portanto ela é que executa a visualização create de uma avaliação.

3.5 Páginas adicionais

Também foram criadas 4 páginas extras para melhorar a experiência do usuário no sistema. A primeira é uma página inicial para quando o usuário não fez o login no sistema, esta avisa ao usuário que ele deve está cadastrado para utilizá-lo e fornece botões para as páginas de login e cadastro. A segunda também é uma páginal inicial, porém para quando o usuário está logado e não possui avaliações realizadas, esta página trará instruções para o usuário sobre como utilizar o sistema. A terceira se chama about e foi criada somente para descrever algumas informações úteis sobre o projeto. A última é uma página parcial chamada navbar e é nela que foi implementado o menu superior do site, ela é exibida em todas as páginas e trará os links necessários para o uso do sistema.

3.6 Responsividade

A necessidade de tornar o sistema responsivo deve-se ao fato da larga quantidade de usuários que acessam a internet utilizando dispositivos móveis (OHDE, 2018). Pensando nisso, o sistema foi adaptado utilizando o framework Bulma para dar responsividade às páginas, ou seja, possibilitar que os elementos das páginas possuam diferentes tamanhos para determinados dispositivos. Isso garante uma melhor experiência ao usuário quando este pode realizar o acesso ao sistema em diferentes dispositivos.

Para tornar o sistema responsivo foi necessário modificar todas as páginas do sistema. Foi realizado a alteração de elementos como textos, botões e colunas para serem exibidos em dois diferentes tamanhos, um para quando este é acessado por um dispositivo móvel e outro para dispositivo não móvel.

(25)

3.7 Transformação em Progressive Web App

Pelo fato do sistema já estar totalmente preparado para ser acessado via dispositivo móvel, ele foi transformado em um Progressive Web App, fazendo-o ser reconhecido como um aplicativo nativamente pelo próprio navegador dos dispositivos.

Para transformá-lo foi utilizado uma biblioteca do Ruby on Rails chamada

serviceworker-rails que, ao ser instalado, fornece todos os requisitos para a transformação do sistema.

Por final foi criado um ícone para o aplicativo e foi inserido no arquivo chamado manifest informações do sistema e informações para que este utilize o ícone criado.

3.8 Protótipo do sistema para séries de televisão

Já com o sistema de recomendação genérico pronto, foi escolhido o local onde deveria ser extraido os dados das séries de televisão. Para este caso foi escolhido o site IMDb(Internet Movie Database) que pertence à Amazon e é conhecido por ser um site que serve como banco de dados mundial para séries de televisão, filmes e até músicas.

Após a escolha do local foram escolhidos quais dados deveriam ser extraídos. Para este caso foram escolhidos título, gênero, link de uma imagem, empresas produtoras, ano da última temporada e sua colocação no site em uma lista ordenada por popularidade.

Depois foi utilizado o framework Scrapy para a criação do web crawler. A lógica do funcionamento do web crawler consiste em acessar o site escolhido, extrair a colocação da série que está em ordem de popularidade, extrair o texto e o link do título da série. Após isso é realizado o acesso a esse link e de lá é extraído uma imagem, o ano da última temporada e o gênero da série de televisão. Seu funcionamento pode ser visualizado através da Figura 10.

(26)

Figura 10 – Diagrama de fluxo do funcionamento do web crawler.

Após a extração de todas as séries de televisão do site foi realizado uma modificação no banco de dados para que este ficasse conforme a Figura 11 e então foi realizado a inserção dos dados extraídos.

(27)

Figura 11 – Banco de dados do modelo de prova.

Fonte – Elaborada pelo autor em https://dbdesigner.net.

Como pode-se constatar na Figura 11 foi adicionado na tabela item os campos título, gênero, empresa, imagem e ano da última temporada. Estes campos não são obrigatórios para a utilização do sistema genérico, porém a adição de informações sobre os itens melhoram a experiência do usuário ao serem utilizados no sistema.

Depois foi realizado a adaptação de algumas páginas. A página parcial item passou a exibir o título e a imagem do item. A página parcial search passou a exibir os campos de busca por título, empresa e gênero. Por último a show que passou a exibir todos os dados extraídos de uma série.

(28)

16

4 RESULTADOS

O sistema de autenticação possui as páginas de login e cadastro de usuários como ilustrados nas Figuras 12 e 13.

Figura 12 – Tela de login do sistema de recomendação.

Figura 13 – Tela de cadastro do sistema de recomendação.

(29)

Capítulo 4. Resultados 17

Já as páginas que foram criadas para que o usuário faça as suas avaliações são conforme mostradas nas Figuras 14, 15, 16, 17 e 18, que após realizar uma avaliação ficará como a Figura 19, que limita o usuário a não fazer a mesma avaliação, podendo somente modificá-la.

Figura 14 – Página responsável por deletar as avaliações antigas do usuário.

Figura 15 – Página para visualizar os itens para avaliação quando o usuário não possui o número mínimo de avaliações.

(30)

Figura 16 – Página para visualizar os itens para avaliação após realizado uma busca, quando o usuário não possui o número mínimo de avaliações.

(31)

Figura 17 – Página para visualizar os itens para avaliação quando o usuário possui o número mínimo de avaliações.

(32)

Figura 18 – Página para ver todos os dados de um item específico e realizar a avaliação.

Figura 19 – Página para ver todos os dados de um item específico após realizar sua avaliação.

(33)

É possível observar na Figura 17 o funcionamento do algoritmo de recomendação, pois é lá que são exibidos os itens como sugestão ao usuário. Mas a principal página para observar o funcionamento do algoritmo é a página que exibe as recomendações, que pode ser visualizada na Figura 20.

Figura 20 – Página onde é exibido as recomendações originadas do algoritmo.

(34)

Também é possível observar as páginas adicionais através das figuras a seguir. Primeiro há a página da Figura 21, que somente é exibido ao usuário que ainda não fez a autenticação. Depois há a página da Figura 22 que é exibido somente se o usuário fez a autenticação e ainda não possui avaliações cadastradas no sistema. Por último há a página da Figura 23 que exibe algumas informações sobre o sistema.

Figura 21 – Tela inicial do sistema.

Figura 22 – Página de instruções.

(35)

Figura 23 – Página que exibe alguns dados do sistema de recomendação.

A Figura 24 mostra o acesso ao sistema via dispositivo móvel. Pode-se constatar através da figura a responsividade da página inicial e que o navegador reconhece o sistema como um PWA. Também é possível ver a responsividade em outras páginas através das Figuras 25, 26 e 27.

Figura 24 – Tela inicial do sistema acessado via dispositivo móvel.

Figura 25 – Tela de login do sistema acessado via dispositivo móvel.

(36)

Figura 26 – Tela para selecionar os itens para avaliar acessado via dispositivo móvel.

Figura 27 – Tela que exibe as recomendações acessado via dispositivo móvel.

(37)

25

5 CONSIDERAÇÕES FINAIS

As novas tendências tecnológicas têm fomentado diversos segmentos do mercado atual, sendo a ciência de dados um deles. A perspectiva para esta área só tende a crescer, à medida que novas soluções são criadas e que cada vez mais tem impacto em nossa sociedade.

Este trabalho apresentou um sistema de recomendação genérico que utiliza as mais novas práticas e tecnologias disponíveis no mercado global. Foi utilizado o framework Ruby

on Rails para criação do sistema web, o framework Bulma para torná-lo responsivo, o Postgresql para a criação do banco de dados e, inclusive, foi realizado a transformação do

sistema em um PWA. Com os resultados atrelados neste documento, atrelado também a todas as pesquisas realizadas, é possível concluir que o objetivo principal do projeto foi atingido.

O código fonte da solução apresentada neste documento encontra-se disponível na página github.com/raicg. O sistema utiliza como licença a GNU General Public License v3.0, então é permitido usar, distribuir e até modificar o seu código, inclusive para propósitos comerciais.

5.1 Trabalhos futuros

Este trabalho será usado como base, em conjunto com uma pesquisa de mercado, no intuito de identificar possíveis melhorias no sistema, para que estas sejam implementadas e que o sistema alcance um nível competitivo no mercado global.

Uma possível mudança é acrescentar a possibilidade do sistema ser integrado a outro tipo de sistema já existente. O projeto proposto atualmente é totalmente independente, ou seja, diferentemente da Amazon, Netflix e várias outras empresas que utilizam um sistema de recomendação integrado às suas páginas, o seu funcionamento depende exclusivamente dele mesmo. Essa mudança permite uma melhor experiência ao usuário, pois possibilita, de umna maneira mais eficiente, que um número maior de usuários participe do processo e que, consequentemente, tornará o sistema mais preciso.

(38)

26

REFERÊNCIAS

AGRIÃO, L. PWA (Progressive Web Apps). 2019. https://administradores.com.br/ artigos/pwa-progressive-web-apps. Acessado em 05-05-2019. 6

BUI, A. PostgreSQL Vs. MySQL: Differences In Performance, Syntax, And Features. 2018. https://blog.panoply.io/postgresql-vs.-mysql. Acessado em 27-04-2019. 5 CLAUDIO, A. Bancos de Dados Relacionais. 2011. https://www.devmedia.com.br/ bancos-de-dados-relacionais/20401. Acessado em 27-04-2019. 4

COMPUTERWORLD. Por que Python é a melhor linguagem de

programa-ção para iniciantes. 2018. https://computerworld.com.br/2018/10/05/ por-que-python-e-a-melhor-linguagem-de-programacao-para-iniciantes/. Acessado em 12-05-2019. 6

EIS, D. Uma breve história do CSS. 2006. https://tableless.com.br/ uma-breve-historia-do-css/. Acessado em 12-05-2019. 7

FELITTI, G. Ruby on Rails ganha adeptos entre os desenvolvedores da Web 2.0. 2007. https://pcworld.com.br/idgnoticia2007-03-128573269779/. Acessado em 24-04-2019. 4

FUENTES, V. B. Ruby on Rails: coloque sua aplicação web nos trilhos. 2014.

https://books.google.com.br/books?id=oW6CCwAAQBAJ. Acessado em 24-04-2019. 4 GONÇALVES, A. O que é CSS? Guia Básico para Iniciantes. 2019. https:

//www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/. Acessado em 12-05-2019. 7

GOOGLE. BookMyShow’s new Progressive Web App drives an 80% increase in

conversions. 2017. https://developers.google.com/web/showcase/2017/bookmyshow. Acessado em 07-05-2019. 7

LEONE, L. de. Por que aprender Python pode te levar mais longe na carreira! 2017.

https://becode.com.br/porque-aprender-python/. Acessado em 12-05-2019. 6 MALDONADO, K. Comparison: Ruby vs Python. 2019. https://stackify.com/ ruby-vs-python/. Acessado em 24-04-2019. 4

MATHEUS. O que é PWA (Progressive Web Apps)? 2018. https://www.opus-software. com.br/o-que-e-pwa/. Acessado em 05-05-2019. 7

MORAES, D. Web crawler: saiba o que é e qual a sua relação com o Marketing Digital. 2019. https://rockcontent.com/blog/web-crawler/. Acessado em 01-05-2019. 6 OHDE, M. Celular é principal dispositivo de acesso à internet no Brasil. 2018. https:// paranaportal.uol.com.br/economia/537-celular-dispositivo-acesso-internet/. Acessado em 07-05-2019. 12

(39)

Referências 27

ORTEGA, M. J.; SARKER, F. Learning Python Networking: A complete guide to

build and deploy strong networking capabilities using Python 3.7 and Ansible. 2019.

https://books.google.com.br/books?id=tc6PDwAAQBAJ. Acessado em 01-05-2019. 6 SANTOS, U. Filosofia RAILS. 2009. https://usantos.wordpress.com/2009/09/19/ filosofia-rails/. Acessado em 24-04-2019. 4

SCRAPINGHUB. Scrapy 1.6.0 documentation. 2019. https://docs.scrapy.org/en/1. 6/. Acessado em 01-05-2019. 6

SMITH, K. 37 Sites You LOVE Built With Ruby On Rails. 2015. https: //skillcrush.com/2015/02/02/37-rails-sites/. Acessado em 24-04-2019. 4

SOUZA, A. C.; AMARAL, H. R.; LIZARDO, L. E. O. PostgreSQL: uma alternativa

para sistemas gerenciadores de banco de dados de código aberto. 2011. http://www. periodicos.letras.ufmg.br/index.php/ueadsl/article/download/2896/2855. Acessado em 27-04-2019. 5

SOUZA, L. Ruby: Aprenda a programar na linguagem mais divertida. 2014.

https://books.google.com.br/books?id=qGSCCwAAQBAJ. Acessado em 24-04-2019. 4 THOMAS, J. et al. Creating interfaces with Bulma. 2018.https://bleedingedgepress. com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf.

Acessado em 07-05-2019. 7

YATSKEVICH, O. What are Progressive Web Apps and How to Develop Once. 2019.

https://codetiburon.com/progressive-web-apps-develop-once/. Acessado em 07-05-2019. 7