UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript...

42
UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO SILVA DOS SANTOS SMART GROUPS Niterói 2016

Transcript of UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript...

Page 1: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

UNIVERSIDADE FEDERAL FLUMINENSE

JÔNATAS RICARDO SILVA DOS SANTOS

SMART GROUPS

Niterói

2016

Page 2: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

JÔNATAS RICARDO SILVA DOS SANTOS

SMART GROUPS

Trabalho de Conclusão de Curso

submetido ao Curso de Tecnologia em

Sistemas de Computação da

Universidade Federal Fluminense como

requisito parcial para obtenção do título

de Tecnólogo em Sistemas de

Computação.

Orientador:

Leandro Soares de Sousa

NITERÓI

2016

Page 3: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

JÔNATAS RICARDO SILVA DOS SANTOS

SMART GROUPS

Trabalho de Conclusão de Curso

submetido ao Curso de Tecnologia em

Sistemas de Computação da

Universidade Federal Fluminense como

requisito parcial para obtenção do título

de Tecnólogo em Sistemas de

Computação.

Niterói, 15 de dezembro de 2016.

Banca Examinadora:

_________________________________________

Prof. Leandro Soares de Sousa, D.Sc. – Orientador

UFF – Universidade Federal Fluminense

_________________________________________

Profa. Julliany Sales Brandão, DSc. – Avaliadora

CEFET-RJ – Centro Federal de Educação Tecnológica Celso Suckow da Fonseca

Page 4: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Ficha catalográfica

Ficha Catalográfica elaborada pela Biblioteca da Escola de Engenharia e Instituto de Computação da UFF

S237 Santos, Jônatas Ricardo Silva dos

Smart groups / Jônatas Ricardo Silva dos Santos. – Niterói, RJ :

[s.n.], 2016.

41 f.

Projeto Final (Tecnólogo em Sistemas de Computação) –

Universidade Federal Fluminense, 2016.

Orientador: Leandro Soares de Sousa.

1. Arquitetura de software. 2. Perfil do usuário. 3. Comércio

eletrônico. I. Título.

CDD 005.3

Page 5: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Dedico este trabalho aos meus pais,

minha querida esposa e a todos os meus

professores.

Page 6: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

AGRADECIMENTOS

Ao bom Deus que me criou e deu saúde

e orientação para alcançar todas as

minhas conquistas.

Aos meus pais por me criarem e

educarem com amor, princípios e com o

exemplo de cada um.

À minha esposa que me incentiva, motiva

e inspira em todas as áreas.

Aos professores que me contribuíram na

construção de minha carreira desde a

pré-escola.

A todos os profissionais com quem pude

trabalhar e aprender desde meu primeiro

emprego.

Page 7: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

“Entrega-se com vontade ao seu trabalho;

seus braços são fortes e vigorosos.”.

Salomão, Rei de Israel.

Page 8: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

RESUMO

Smart Groups é um sistema web de agrupamento inteligente e dinâmico de usuários de e-commerce baseado em suas informações cadastrais e em seu comportamento de navegação com objetivo de oferecer experiências personalizadas e aumentar a taxa de conversão.

Palavras-chaves: e-commerce, usuários e vendas.

Page 9: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

LISTA DE ILUSTRAÇÕES

Figura 1: Casos de Uso - Integrador 29

Figura 2: Casos de Uso – Gerente 30

Figura 3: Diagrama de atividades - Página de acesso 31

Figura 4: Diagrama de atividades - Cadastro de um novo grupo 32

Figura 5: Modelagem de banco de dados 33

Figura 6: Interface Google Firebase 34

Figura 7: Página de acesso 35

Figura 8: Página lista de grupos 36

Figura 9: Página de cadastro 37

Figura 10: Importação da Biblioteca Smart Groups 38

Figura 11: Estabelecimento de conexão com Smart Groups 38

Figura 12: Recebendo informações do Smart Groups 39

Figura 13: Enviando informações para o Smart Groups 40

Page 10: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

LISTA DE TABELAS

Tabela 1: Tabela de ferramentas e tecnologias utilizadas 19

Tabela 2: Tabela de atores 24

Page 11: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

LISTA DE ABREVIATURAS E SIGLAS

HTML - HyperText Markup Language

CSS - Cascading Style Sheets

JSON - Javascript Object Notation

W3C - World Wide Web Consortium

WHATWG - Web Hypertext Application Technology Working Group

RF – Requisito Funcional

RNF – Requisito Não Funcional

API - Application Programming Interface

SDK - Software Development Kit

RFC - Request for Comments

REST - Representational State Transfer

Page 12: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

SUMÁRIO

1 INTRODUÇÃO 15

1.1 O que é o trabalho 15

1.2 Motivação 15

1.3 Organização do trabalho 15

2 EXEMPLO DE UM CENÁRIO COMPLETO 17

3 FERRAMENTAS E TECNOLOGIAS UTILIZADAS 19

3.1 HTML 19

3.2 CSS 20

3.3 Javascript 21

3.4 JSON 22

3.5 Google Firebase 22

4 ARQUITETURA DE SOFTWARE 24

4.1 Análise de requisitos 24

4.1.1 Definição de Atores 24

4.1.2 Requisitos Funcionais 26

4.1.3 Requisitos Não Funcionais 28

4.1.4 Diagrama de Casos de Uso 29

4.1.5 Diagrama de Atividades 30

4.2 BANCO DE DADOS 32

5 SISTEMA SMART GROUPS 35

5.1 Ambiente administrativo 35

5.1.1 Página de acesso 35

5.1.2 Página lista de grupos 36

5.1.3 Página de cadastro 36

5.2 Ambiente de integração 37

5.2.1 Importação da Biblioteca Smart Groups 38

5.2.2 Estabelecimento de conexão com Smart Groups 38

5.2.3 Recebimento de informações 38

Page 13: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

5.2.4 Envio de informações 39

6 CONCLUSÃO 41 7 REFERÊNCIAS BIBLIOGRÁFICAS 42

Page 14: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

1 INTRODUÇÃO

1.1 O que é o trabalho

O Smart Groups é sistema web de agrupamento dinâmico e inteligente

de usuários, baseado nas suas informações de cadastro e nos comportamentos

percebidos durante a navegação.

Este sistema é uma ferramenta que ajuda lojas virtuais a segmentar

usuários e oferecer uma experiência única para cada grupo. E essa segmentação

possibilita trabalhar estratégias de nicho para maximizar as vendas.

1.2 Motivação

Ao analisar as ferramentas similares do mercado foi possível observar

que os recursos oferecidos, além de simples, se baseiam apenas em requisitos pré-

definidos e limitados, tais como produtos vistos e comprados. Além disso, toda a

estratégia de marketing e design são baseadas no “usuário médio”, onde são

consideradas as médias de informações como idade, gênero, localização, renda,

entre outros. Na maioria das vezes esse usuário médio não existe. Desta forma, o

presente trabalho pretende introduzir um conceito mais eficaz de definição de

público-alvo baseado no agrupamento de usuários com perfis semelhantes.

1.3 Organização do trabalho

No capítulo 2 é apresentado um exemplo completo do cenário descrito

nos parágrafos acima. O capítulo 3 descreve as ferramentas e tecnologias

utilizadas. No capítulo 4 é apresentada a Análise de Requisitos e a Modelagem do

Banco de Dados. No quinto capítulo está a construção do sistema. No capítulo 6

Page 15: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

foram incluídas as conclusões e indicações para futuros trabalhos. Finalmente, no

sétimo capítulo constam as Referências Bibliográficas.

Page 16: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

2 EXEMPLO DE UM CENÁRIO COMPLETO

Um cenário bastante comum é uma e-commerce de departamentos como

Americanas.com, FastShop e ShopFácil. Ao traçar um perfil de usuários encontra-

se, por exemplo, pessoas de dezesseis a cinquenta anos, que ganham de dois a

dez salários-mínimos, que em sua maioria têm como categorias com maior volume

de compra eletrônicos em primeiro lugar e eletrodomésticos em segundo.

Essas informações geram o perfil de usuário, que é baseado na média

aritmética das informações anteriores, que segue: pessoa de trinta e três anos, com

salário de seis salários-mínimos, e que compra principalmente eletrônicos.

A partir desses dados, toda interface é construída, as funcionalidades de

navegação são direcionadas para esse perfil, bem como o posicionamento das

informações.

Não há dúvidas de que esse modelo gera bons resultados, uma vez que

a cada ano o comércio eletrônico brasileiro cresce acima dos demais setores [1].

Mas, apesar dos números satisfatórios, tal modelo não se comunica de

maneira diferenciada com os diversos perfis de usuários que acessam um

determinado site. Não existe, por exemplo, uma interface especial para jovens de

dezoito anos, que ganham dois salários-mínimos e compram produtos de

informática. Tampouco uma interface diferenciada para senhores e senhoras de

cinquenta anos, que ganham dez salários-mínimos e que compram

eletrodomésticos.

Pensando explorar todo o potencial de uma base de usuários foi criado o

Smart Groups. O sistema permite que qualquer e-commerce trabalhe com nichos

cada vez mais específicos.

De acordo com o Sebrae, a escolha de nicho específico, é um fator que

pode definir o sucesso ou insucesso de uma loja virtual [2]. E quanto mais

específico for o nicho, mais chances de sucesso o negócio terá.

Page 17: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Utilizando o Smart Groups o empreendedor poderá ter lojas totalmente

personalizadas e direcionada para cada grupo.

Desta maneira, ele poderá focar nas particularidades de cada nicho,

direcionar a comunicação e disponibilizar as funcionalidades ideais para cada grupo

em vez trabalhar de forma generalista, sem foco e com poucas chances de se

comunicar de forma contundente com todos.

Page 18: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

3 FERRAMENTAS E TECNOLOGIAS UTILIZADAS

As ferramentas e tecnologias utilizadas no desenvolvimento do sistema

foram escolhidas por serem de fácil manutenção e as mais indicadas sistemas que

fazem integração entre sistemas distintos.

A Tabela 1 a seguir apresenta um resumo das tecnologias e ferramentas

utilizadas no sistema.

TABELA 1: TABELA DE FERRAMENTAS E TECNOLOGIAS UTILIZADAS

Ferramenta / Tecnologia

Tipo Versão Licença

HTML Linguagem de marcação

5 Freeeware

CSS Folha de Estilo 3 Freeeware

Javascript Linguagem de programação

2.0 Freeeware

JSON Subconjunto da notação de objeto de JavaScript

1 Freeeware

Google Firebase Ferramenta que disponibiliza banco de dado NoSql

3.6.0 Freeeware

Atom Editor de Código 1.0.11 Freeeware

A seguir, serão apresentadas algumas das principais ferramentas que

serão utilizadas no desenvolvimento do sistema que se pretende construir ao longo

deste trabalho.

3.1 HTML

O HyperText Markup Language (HTML) é a principal linguagem utilizadas

para codificação de páginas web. Praticamente todo conteúdo presente em páginas

Page 19: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

lidas por navegadores web, como o Google Chrome, Internet Explorer e Mozilla

Firefox, estão descritas, fundamentalmente, utilizando a linguagem HTML. De

maneira mais específica, a linguagem HTML descreve o conteúdo de um

documento web de maneira estruturada e semântica. Para tal, o HTML disponibiliza

uma série de tags para codificação de uma página web, como por exemplo <img>,

<title>, <p>, <div>, <body>, <aside>, entre outras.

As especificações deste padrão internacional para escrita de páginas

web (HTML) são mantidas pelo World Wide Web Consortium e o WHATWG.

O propósito original do HTML, em sua criação com Tim Berners-Lee,

limitava-se em um conjunto de ferramentas para divulgação de pesquisas e

comunicação, porém hoje a utilização do HTML contempla recursos de mídia bem

mais avançados e não apenas texto.

O fato de ser a principal linguagem para a codificação de sítios não

significa que a linguagem define estilos e formatação de conteúdo. O estilo e

formatação de uma página web são definidos e configurados por outra linguagem: o

CSS [3].

3.2 CSS

CSS (Cascading Style Sheets), folhas de estilo em cascata em tradução

livre, é uma linguagem de estilo utilizada mundialmente com objetivo de descrever a

apresentação visual de documentos codificados com HTML ou XML (incluindo

também várias linguagens em XML como o clássico XHTML e o moderno SVG). O

uso do CSS faz com que seja possível descrever a forma como elementos HTML ou

XML são exibidos na tela de navegadores, em impressões, ou em outras mídias [4].

Sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um

documento.

Com a evolução tecnológica das últimas três décadas os recursos de

programação de páginas de internet estavam lançando mão de cada vez mais

estilos e variações para deixá-las mais atrativas e bonitas para os usuários. Desta

maneira o puro e simples HTML, utilizado apenas para apresentar conteúdos,

passou a não atender a esta nova demanda [5].

Page 20: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

A partir destas complicações, em 1996 com recomendação oficial pelo

W3C nasceu o CSS Level 1 (CSS 1) [6]. Inicialmente, o CSS foi desenvolvido com

objetivo de habilitar a separação do conteúdo e formato de um documento HTML ou

XML de sua apresentação, incluindo elementos como cores, estilos de fontes e

layout. Através desta separação, proporcionou-se uma maior flexibilidade e controle

na configuração de exibição de características, permitiu também o

compartilhamento de estilos entre elementos e reduziu a repetição de código no

conteúdo estrutural de páginas de internet.

Uma outra funcionalidade de bastante utilidade principalmente no

contexto de multiplataformas é a possibilidade de que as mesmas marcações HTML

ou XML de uma página de internet sejam apresentadas em estilos distintos, de

acordo com o método de renderização utilizado (como em uma tela de computador,

impressão, smartphones, eletrodomésticos com acesso à internet, etc.). A maioria

dos menus de navegação com subitens, estilos de rodapé e cabeçalhos de páginas

da internet, por exemplo, são atualmente definidos por folhas de estilo CSS [5].

3.3 Javascript

Javascript (também conhecido por sua abreviação JS) tem entre seus

atrativos o baixo consumo de processamento [7]. Trata-se de uma linguagem script

baseada em protótipo, com suporte à orientação a objetos, de tipagem fraca e

dinâmica e funções de primeira classe. Também suporta programação funcional. E

apresenta recursos geralmente indisponíveis em linguagens populares como Java e

C++ como funções de alta ordem e fechamento.

Em seu início uma de suas principais especificações era de ser

interpretada em navegadores de internet. Porém hoje em dia, principalmente após a

criação do noje.js, a linguagem está sendo bastante utilizada do lado do servidor

(server-side) [8].

O padrão que define a linguagem Javascript é ECMAScript. Desde 2012,

todos os navegadores de internet modernos possuem total suporte à versão 5.1 do

ECMAScript. Contudo, nos navegadores mais antigos existe suporte pelo menos à

versão 3 do ECMAScript. Existe ainda uma 6ª versão deste padrão que está sendo

Page 21: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

desenvolvida no momento, porém já está sendo utilizada pela comunidade de

desenvolvedores Javascript [7].

3.4 JSON

JSON, Javascript Object Notation, ou “Notação de Objeto para

Javascript” em tradução livre, é um formato leve para transferência de dados

computacionais com sintaxe própria para objetos de serialização, números,

matrizes, strings, booleanos e null. Baseia-se em sintaxe Javascript, porém para

sua utilização não é necessário Javascript exclusivamente.

O responsável pela criação original do formato JSON foi o renomado

desenvolvedor Douglas Crockford. Descrito no RFC 4627 o formato JSON tem

application/json como media-type e sua extensão é .json.

Por conta de sua simplicidade, o uso do formato JSON é atualmente

amplamente difundido, principalmente como uma alternativa para o XML em

requisições AJAX. Dentre as vantagens reivindicadas de JSON em comparação ao

XML como um formato para intercâmbio de dados neste contexto, está o fato de ser

muito mais fácil e simples escrever um analisador JSON. No próprio Javascript, o

formato JSON pode ser analisado de forma trivial através da função eval(). Assim, a

presença de recursos Javascript em todos os navegadores um fator determinante

para aceitação de JSON por desenvolvedores da comunidade AJAX [9].

3.5 Google Firebase

Google Firebase é uma plataforma dedicada e SDK (Software

Developers Kit) para a construção de aplicativos móveis. É considerada uma

plataforma de aplicativos unificada e foi construída pela mesma equipe que é

responsável pelo Google Analytics [10].

Um dos recursos mais importantes é o banco de dados NoSql que

permite gravar dados na nuvem e consumi-los com através de uma API REST.

Recurso este que pode ser utilizado a partir de qualquer linguagem de programação

com suporte API’s REST. Sendo esse um dos principais fatores levados em

Page 22: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

consideração para a escolha do Google Firebase no desenvolvimento do sistema

Smart Groups.

Page 23: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

4 ARQUITETURA DE SOFTWARE

Neste capítulo serão apresentados alguns dos processos de Engenharia

de Software. Mais especificamente o processo de Análise de Requisitos e o

processo Modelagem do Banco de Dados.

4.1 Análise de requisitos

Para o desenvolvimento de um sistema coeso e funcional o mapeamento

de todo o processo e o levantamento detalhado de requisitos são itens

indispensáveis [11].

Por convenção, os requisitos são identificados seguindo o modelo [nome

do requisito.identificador do requisito], e são tratados dessa maneira e assim são

referenciados nos demais documentos que formam um projeto de desenvolvimento

de sistema.

4.1.1 Definição de Atores

De maneira geral, em Engenharia de Software, é chamado de ator

alguém (pessoas e/ou organizações) que possua alguma influência indireta ou

direta sobre os requisitos do sistema e será afetado pelo mesmo.

Para o sistema proposto no presente trabalho, no lado do cliente existem

os seguintes Atores: gerente e integrador.

Abaixo, na Tabela 2, é possível observar a distribuição de

responsabilidades:

Page 24: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

TABELA 2: TABELA DE ATORES

Nome Descrição Responsabilidades Gerente Responsável pela administração

e marketing da loja virtual ● Cadastrar grupos ● Consultar grupos ● Definir requisitos para grupos ● Acompanhar desempenho do

agrupamento Integrador Responsável pela instalação e

configuração da ferramenta

Smart Groups

● Configurar o envio de informações

da plataforma de e-commerce para

o Smart Groups ● Configurar a leitura de informações

do Smart Groups para a

plataforma de e-commerce.

4.1.2 Requisitos Funcionais

São classificados como requisitos funcionais aqueles que detalham as

operações que o sistema deve ser capaz de realizar. Sendo também descritos

nestes requisitos as entradas e saídas do sistema, e o relacionamento entre essas

entradas e saídas [12].

[RF01]: Login de Usuário na área de administração

Descrição: Qualquer usuário cadastrado e ativo poderá acessar o sistema.

Entrada: Nome de usuário, senha

Processo: A entrada será validada no banco e gerada uma nova sessão

Saída: Mensagem de confirmação caso a entrada seja válida, senão, mensagem de

erro.

[RF02]: Cadastro de Grupos

Descrição: O usuário poderá cadastrar grupos no sistema.

Entrada: Nome do grupo, requisitos de agrupamento, nível de prioridade.

Processo: Os dados de entrada serão incluídos no banco de dados.

Saída: Mensagem de confirmação caso a inclusão tenha sido realizada com

sucesso, senão, mensagem de erro.

Page 25: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

[RF03]: Consulta de Grupos na área de administração

Descrição: O usuário poderá consultar grupos no sistema.

Entrada: Nome do grupo.

Processo: Os dados de entrada serão consultados no banco de dados.

Saída: Listagem dos grupos, caso a consulta tenha sido realizada com sucesso,

senão, mensagem de erro.

[RF04]: Exclusão de Grupos na área de administração

Descrição: O usuário poderá excluir grupos no sistema.

Entrada: Nome do grupo.

Processo: Os dados de entrada serão consultados no banco de dados e o grupo

que satisfizer os requisitos da consulta será excluído do banco de dados.

Saída: Mensagem de confirmação caso a exclusão tenha sido realizada com

sucesso, senão, mensagem de erro.

[RF05]: Inclusão de dados para requisitos de agrupamento

Descrição: O integrador deverá configurar o envio de dados relativos à navegação

e/ou cadastro do usuário.

Entrada: Nome do requisito, tipo do requisito, valor da entrada, identificador do

usuário.

Processo: Os dados de entrada serão gravados em um cookie no navegador do

usuário.

Saída: Mensagem de confirmação caso a inclusão tenha sido realizada com

sucesso, senão, mensagem de erro.

[RF06]: Consulta de dados de agrupamento

Descrição: O integrador deverá configurar a consulta de dados relativos aos

usuários que acessam o e-commerce.

Entrada: Identificador do usuário.

Processo: Os dados de entrada serão consultados no banco de dados.

Saída: Identificador e nome do grupo ao qual o usuário pertence caso a consulta

tenha sido realizada com sucesso, senão, mensagem de erro.

Page 26: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

[RF07]: Agrupamento de usuários

Descrição: O sistema deverá consultar os dados de cada usuário que acessa a loja

virtual e incluí-lo no grupo em que os dados gravados no navegador satisfaçam os

requisitos definidos previamente.

Entrada: Identificador do usuário, JSON com informações de navegação e

cadastro.

Processo: Os dados de entrada serão comparados com os requisitos consultados

no banco de dados.

Saída: Identificador e nome do grupo no qual o usuário foi incluído.

[RF08]: Inclusão de dados de conversão

Descrição: O integrador deverá configurar o envio de dados relativos à conversão

de visita em compra.

Entrada: Identificador do usuário, identificador do grupo, valor do pedido, forma de

pagamento, quantidade de parcelas, frete, descontos.

Processo: Os dados de entrada serão incluídos no banco de dados.

Saída: Mensagem de confirmação caso a inclusão tenha sido realizada com

sucesso, senão, mensagem de erro.

4.1.3 Requisitos Não Funcionais

Os requisitos não funcionais complementam os requisitos funcionais, pois

eles não apresentam uma direta relação com as funcionalidades do sistema. Os

requisitos desta categoria estão ligados ao processo de desenvolvimento, à

restrições no sistema, abrangendo também restrições externas que o sistema

precisa atender.

[RNF01]: Integração

O sistema poderá ser integrado com qualquer plataforma de e-commerce que

suporte Javascript e protocolos REST.

Page 27: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

[RNF02]: Implementação

O sistema poderá ser implementado em plataformas de e-commerce de qualquer

linguagem de programação com execução no servidor ou na máquina do usuário.

[RNF03]: Interface administrativa

O usuário do tipo gerente terá acesso ao sistema através de qualquer navegador

web (web browser) com suporte ao HTML5.

[RNF04]: Linguagem de Programação

O sistema será desenvolvido em Javascript, que é uma linguagem de programação

bastante utilizada no ambiente web e de fácil manutenção.

[RNF05]: SGBD

O Sistema de Gerenciamento de Banco de Dados (SGBD) utilizado será o Google

Firebase que trabalha de maneira robusta, segura e consistente com NoSQL.

[RNF-6]: Versionamento

O versionamento dos arquivos do sistema será feito utilizando a tecnologia GIT que

é usada mundialmente pela maioria dos desenvolvedores e engenheiros de

software.

4.1.4 Diagrama de Casos de Uso

Para ilustrar de forma mais clara as funcionalidades do sistema, na

sequência são apresentadas duas figuras que oferecem uma visão geral em forma

de diagrama de casos de uso.

Page 28: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 1: Casos de Uso - Integrador

Figura 2: Casos de Uso – Gerente

Page 29: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

4.1.5 Diagrama de Atividades

Para representar o aspecto comportamental de um determinado

processo, em engenharia de software é utilizado o diagrama de atividades.

Representa o aspecto comportamental de um determinado processo. Esse modelo

de diagrama lança mão de um fluxo estruturado e sequencial de ações com início e

fim definidos para modelar uma determinada atividade. De maneira que nesse

diagrama, obrigatoriamente devem constar todos os eventos e decisões que

ocorrem dentro da atividade.

As figuras 3 e 4 apresentam os diagramas de atividades do usuário do

tipo gerente interagindo com a interface do ambiente administrativo do sistema

Smart Groups. Mais especificamente, tem-se na Figura 3 a representação do

processo de acesso ao ambiente administrativo, e na Figura 4 o processo de

criação de um novo grupo.

Page 30: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 3: Diagrama de atividades - Página de acesso

Page 31: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 4: Diagrama de atividades - Cadastro de um novo grupo

4.2 BANCO DE DADOS

Em relação ao banco de dados, foi escolhido o modelo NoSql por sua

leveza característica e por ser escrito em estrutura de JSON, sendo esta a melhor

maneira de se trabalhar com dados em Javascript.

São ao todo sete entidades de dados: Usuário, Grupo, Condição, Acesso,

FIltro, Pagina, Termo de Busca. As entidades se relacionam da forma descrita na

Figura 5.

Page 32: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 5: Modelagem de banco de dados

Como é possível observar na Figura 5, cada usuário pertence à um

grupo. Para fazer parte de um grupo é necessário que as condições que formam

esse grupo sejam satisfeitas. E essa verificação é feita através de cada acesso que

o usuário realiza na loja virtual.

Essa estrutura pode ser observada em formato NoSql na Figura 6 que

apresenta a interface do Google Firebase, sendo este o sistema de gerenciamento

de banco de dados (SGBD) escolhido para o projeto.

Page 33: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 6: Interface Google Firebase

Como pode ser observado da Figura 6 a ferramenta Google Firebase

explicita de forma clara a estrutura do banco de dados NoSql utilizado no projeto.

Esse recurso permite que a pesquisa de dados específicos no banco seja realizada

de maneira simples e intuitiva.

Page 34: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

5 SISTEMA SMART GROUPS

O sistema em si é formado por dois módulos distintos: o ambiente

administrativo onde os grupos são cadastrados e configurados e o ambiente de

integração onde é feita a comunicação entre a plataforma de e-commerce e o

sistema Smart Groups.

A seguir cada um dos módulos que compõem o sistema são detalhados

quanto aos seus respectivos usos e funções.

5.1 Ambiente administrativo

O ambiente administrativo é o local onde o usuário do tipo gerente

poderá cadastrar os grupos e configurar as condições necessárias para que um

usuário seja adicionado ao grupo.

A seguir são apresentadas cada uma das telas que compõem o módulo

Ambiente Administrativo.

5.1.1 Página de acesso

Na página de acesso, o gerente informa seu usuário e sua senha e caso

esteja cadastrado é direcionado para a página “lista de grupos”. Pode-se observar

na Figura 7 a interface de acesso ao ambiente administrativo.

Page 35: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 7: Página de acesso

5.1.2 Página lista de grupos

Na página lista de grupos, todos os grupos são exibidos em lista de forma

resumida. Os dados presentes no resumo são: nome do grupo, quantidade de

usuários e faturamento. O usuário do tipo gerente pode ainda criar um grupo ou sair

de sua conta. A estrutura da página lista de grupos pode ser observada na Figura 8.

Figura 8: Página lista de grupos

Page 36: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

5.1.3 Página de cadastro

Na página de cadastro o gerente cadastra um nome de sua escolha, as

condições que definem a entrada de usuários no grupo em questão, e a prioridade

que é o critério decisivo que no cenário onde o usuário satisfaça as condições de

entrada de mais de um grupo ele seja adicionado ao grupo com maior valor de

prioridade. Na Figura 9 podem ser observados os dados necessários para cadastrar

um novo grupo.

Figura 9: Página de cadastro

5.2 Ambiente de integração

O ambiente de integração é responsável por transmitir informações do e-

commerce, que utiliza o sistema Smart Groups para a base de dados do Smart

Groups.

Neste ambiente não existe interface para usuários comuns sendo

acessível exclusivamente por programadores no código fonte da plataforma de e-

commerce.

Page 37: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

O processo de integração consiste em 3 (três) etapas: importar a

biblioteca de integração Smart Groups, estabelecer conexão com o Smart Groups,

receber informações da base de dados do Smart Groups e/ou enviar informações

para a base de dados do sistema.

A seguir será apresentada uma exemplificação da utilização do ambiente

de integração em cada uma de suas etapas.

5.2.1 Importação da Biblioteca Smart Groups

A importação é feita mediante a inclusão do arquivo Javascript “smart-

groups-integration.min.js” em todas as páginas do e-commerce. A forma com que a

inclusão deve ser feita é demonstrada na Figura 10.

Figura 10: Importação da Biblioteca Smart Groups

5.2.2 Estabelecimento de conexão com Smart Groups

Para estabelecer a conexão com o Smart Groups é necessário que a

etapa de importação da biblioteca tenha sido concluída e que sejam inseridos os

seguintes dados: nome da loja, token, país e seguimento.

A Figura 11 exemplifica a passagem de informações descrita.

Figura 11: Estabelecimento de conexão com Smart Groups

Page 38: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

5.2.3 Recebimento de informações

Ao executar o método getUserGroup() o sistema Smart Groups retorna o

grupo ao qual o usuário que acessa a loja pertence. E com essa informação o

integrador tem a liberdade de personalizar o e-commerce da maneira que julgar

conveniente para esse grupo específico. O processo de recebimento de

informações é demonstrado na Figura 12.

Figura 12: Recebendo informações do Smart Groups

5.2.4 Envio de informações

Para que o sistema Smart Groups consiga inserir um usuário em um

grupo é necessário que as informações relativas ao cadastro e ao estilo de

navegação do usuário que visita o site sejam enviadas para a base de dados do

sistema. Esse envio é exemplificado a seguir na Figura 13.

Page 39: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

Figura 13: Enviando informações para o Smart Groups

Page 40: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

6 CONCLUSÃO

Dentre os objetivos deste trabalho estão: segmentar o público-alvo de um

e-commerce, oferecer uma experiência única e, consequentemente, mais lucrativa

para cada um dos grupos.

O algoritmo responsável pelo agrupamento de usuários é

constantemente aprimorado a partir das informações retornadas por lojistas que

utilizam o sistema.

A utilização do sistema Smart Groups que tem como alvo segmentar

usuários e aumentar a lucratividade de pequenos e grandes empreendedores do

comércio eletrônico. Este software oferece uma excelente alternativa para manter

negócios ativos em meio à crise na economia brasileira.

Page 41: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

7 REFERÊNCIAS BIBLIOGRÁFICAS

[1] E-commerce Brasil. Comércio eletrônico brasileiro deve crescer 8% em 2016,

segundo relatório WebShoppers.

<https://www.ecommercebrasil.com.br/noticias/comercio-eletronico-brasileiro-deve-

crescer-8-em-2016-segundo-relatorio-webshoppers/> acesso em 10 de dezembro

de 2016.

[2] Sebrae. Dicas iniciais para nicho no e-commerce.

<http://www.sebrae.com.br/sites/PortalSebrae/artigos/dicas-iniciais-para-nicho-no-e-

commerce,bb483a53c2cce410VgnVCM1000004c00210aRCRD> acesso em 10 de

dezembro de 2016.

[3] Mozilla Developer Network. HTML. <https://developer.mozilla.org/pt-

BR/docs/Web/HTML> acesso em 10 de dezembro de 2016.

[4] Mozilla Developer Network. CSS. <https://developer.mozilla.org/pt-

BR/docs/Web/CSS> acesso em 10 de dezembro de 2016.

[5] Tecmundo. O que é CSS. <https://www.tecmundo.com.br/programacao/2705-o-

que-e-css-.htm> acesso em 10 de dezembro de 2016.

Page 42: UNIVERSIDADE FEDERAL FLUMINENSE JÔNATAS RICARDO …”NATAS_RICARDO_… · JSON - Javascript Object Notation W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology

[6] Eis, Diego. Uma breve história do CSS. <https://tableless.com.br/uma-breve-

historia-do-css/> acesso em 10 de dezembro de 2016.

[7] Mozilla Developer Network. Javascript. <https://developer.mozilla.org/pt-

BR/docs/Web/JavaScript> acesso em 10 de dezembro de 2016.

[8] Wikipedia. Javascript. <https://pt.wikipedia.org/wiki/JavaScript> acesso em 10

de dezembro de 2016.

[9] Wikipedia. JSON. <https://pt.wikipedia.org/wiki/JSON> acesso em 10 de

dezembro de 2016.

[10] Tudo Celular. Firebase é a nova aposta da Google em uma plataforma

móvel unificada. <http://www.tudocelular.com/android/noticias/n72091/google-

lanca-nova-versao-do-firebase.html> acesso em 10 de dezembro de 2016.

[11] REZENDE, Denis Alcides ; Denis Alcides Rezende , Engenharia de software e

sistemas de informação. 3. Ed. rev. Ampl -- Rio de Janeiro: Brasport. 2005.

[12] Filho, Wilson de Pádua Paula; Silva Filho, Wilson de Pádua Paula Filho;

Engenharia de Software: fundamentos, métodos e padrões. 3. ed. Indaial: ASSELVI,

2004.