Ir para o conteúdo

Versionamento

Data Versão Descrição Autor
27/04/2021 1.0 Criado a estrutura do documento Lucas Lopes
29/04/2021 2.0 Adição do topico 2.0 Lucas Lopes
29/04/2021 4.0 Adição do tópico 4.0 Lucas Lopes
29/04/2021 5.0 Adição do tópico 5.0, 6.1 e 10.0 Lucas Lopes
30/04/2021 6.0 Adição do tópico 1.1, 1.2, 3.1 e 3.2 Matheus Filipe
01/05/2021 6.1 Adição do tópico 7.0 Matheus Filipe
03/05/2021 7.0 Adição do tópico 8.0. Murilo Schiler
03/05/2021 7.0 Atualização do tópico 7.0. Murilo Schiler

1 - Introdução

1.1 - Finalidade

O documento a seguir, tem por objetivo fornecer uma explicação acerca de todo o sistema por meio de diversos documentos de visões arquiteturais para detalhar o comportamento e decisões de processos acerca de cada parte da arquitetura do projeto.

1.2 - Escopo

Com o intuito de compor o escopo deste documento, toda a estrutura do projeto será explanada assim como as tecnologias, suas integrações no sistema e os processos envolvidos no fluxo operacional de cada funcionalidade do produto. O projeto Meu Brechó consiste em uma solução de software para atender uma necessidade prática comercial de peças de roupas entre usuários que queiram comprar ou vender roupas novas ou semi-usadas. Para quem deseja vender roupas é possível criar uma loja virtual personalizada com os items desejados, o processo de compra é feito pelas formas de contato disponibilizadas pelo próprio vendedor das peças por meio de um acordo entre âmbas as partes.

2.0 - Representação Arquitetural

2.1 - Tecnologias

Frontend

React JS é uma biblioteca JavaScript para a criação de interfaces de usuário. Foi Criado em 2011 Facebook.O React é uma biblioteca front-end e tem como um de seus objetivos facilitar a conexão entre diferentes partes de uma página, portanto seu funcionamento acontece através do que é chamado de componentes. Foi escolhida essa tecnologia pois existem diversos conteúdos de fácil acesso. Por isso é, uma escolha segura e de fácil aprendizagem pela equipe.

Backend

O Node.js se caracteriza como um ambiente de execução JavaScript. Com ele, o usuário pode criar aplicações sem depender do browser para isso. Com alta capacidade de escalabilidade, boa flexibilidade, arquitetura e baixo custo. Por ser baseada no javascript o que confere uma integração positiva quando usamos juntamente com o React, que também é feito com Javascript.

Express.js é um Framework rápido e um dos mais utilizados em conjunto com o Node.js, facilitando no desenvolvimento de aplicações back-end e até, em conjunto com sistemas de templates, aplicações full-stack.

Banco de dados

O MongoDB é um banco de dados opensource, de alta performance e flexível, sendo considerado o principal banco de dados NoSQL. O MongoDB é orientado a documentos, ou seja, os dados são armazenados como documentos, ao contrário de bancos de dados de modelo relacional, onde trabalhamos com registros em linhas e colunas. Os documentos podem ser descritos como dados no formato de chave-valor, no caso, utilizando o formato JSON (JavaScript Object Notation). O Mongo foi utilizado pois permite executar consultas executando código JavaScript o que é útil ao utilizarmos com o backend em nodejs e frontend em React. Além disso, é de fácil integração e rápido aprendizado.

3.0 - Metas e Restrição da Arquitetura

3.1 - Metas

Praticidade - A aplicação deve fornecer uma solução rápida e prática para compra e venda de roupas.

Uso intuitivo - Com poucas ações o usuário deve ser capaz de realizar as operações desejadas.

Segurança - É de suma importância que os dados sigilosos de cada usuário seja preservado durante todo o período de utilização do software.

3.2 - Restrições

Cadastro - Para ter acesso ao sistema é obrigatório realizar login com credenciais registradas mediante cadastro de usuário.

Compatibilidade - A aplicação deve rodar apenas em navegadores.

Transações financeiras - O sistema não possui nenhum suporte para gerenciamento de transações financeiras de qualquer natureza envolvendo os produtos registrados.

4.0 - Padrão Arquitetural

Padrões arquiteturais expressam formas de organizar a estrutura fundamental do sistema, permitem a construção de uma arquitetura aderente a certas propriedades. Além disso, fornecem um conjunto de subsistemas pré definidos, especificando suas responsabilidades e incluindo regras e diretrizes para organizar as relações entre eles. O padrão MVC foi escolhido para o projeto.

MVC

O MVC é um padrão de arquitetura de software. O MVC sugere uma maneira para você pensar na divisão de responsabilidades, principalmente dentro de um software web.

O princípio básico do MVC é a divisão da aplicação em três camadas: a camada de interação do usuário (view), a camada de manipulação dos dados (model) e a camada de controle (controller).

Com o MVC, é possível separar o código relativo à interface do usuário das regras de negócio. Além disso, deixa o código mais manutenível, ou seja, mais fácil de fazer manutenção, já que temos as responsabilidades devidamente separadas. Isso também traz uma facilidade na compreensão do código, além da sua reutilização. Além disso, tem-se um código mais testável, pois ele é mais granular.

Model

É a camada que contem a estrutura de dado atrás de uma parte específica da aplicação,usualmente portada em JSON. Ela é:

  • Responsável pela leitura manipulação e validação de dados, e também de suas validações.
  • Responsável por tratar as regras de negócio.
  • Obtém os dados e os traduz em informações relevantes para serem exibidas pela View.
  • Notifica a view e controler associados quando há uma mudança em seu estado.

Exemplo de model aplicado no backend

carbon (8)

Link

View

View pode ser qualquer saída de representação dos dados, como uma tabela ou um diagrama.

  • É a camada que exibe uma representação dos dados.
  • É camada de interface com usuário (view).
  • Também conhecida como cliente-side.
  • Faz a exibição dos dados, utilizando-se de #HTML e/ou XML.
  • É responsável por usar as informações modeladas para produzir interfaces de apresentação conforme a necessidade.

Exemplo de View (frontend)

carbon (9)

Link

Controller

  • É a camada de controle.
  • Exerce o controle de qual model deverá ser aplicado e qual view será mostrado ao usuário.
  • Podemos dizer que esta camada faz uma gerência das outras duas camadas.
  • O controller manipula e roteia as requisições dos usuários.
  • Interpreta as requisições submetidas pelo usuário e traduz em comandos que são enviados para o (Model) e/ou para a View) .
  • Valida as requisições dos usuários de acordo com as regras de autenticação e autorização.

Exemplo de controller aplicado ao projeto

carbon (10)

Link

5.0 - Visão de Caso de uso

Esse diagrama documenta o que o sistema faz do ponto de vista do usuário. Em outras palavras, ele descreve as principais funcionalidades do sistema e a interação dessas funcionalidades com os usuários do mesmo sistema

Diagrama de casos de uso geral

Untitled Diagram(1)

Link

6.0 - Visão Lógica

A visão lógica mostra um subconjunto do modelo de design significativo em termos de arquitetura, ou seja, um subconjunto das classes, subsistemas, pacotes e realizações de caso de uso.

6.1 - Diagrama de contexto

O diagrama de contexto é um gráfico, composto por um fluxo de dados que mostra as interfaces entre o projeto e a sua relação com o ambiente em que vai ser desenvolvido.

Untitled Diagram-Page-2(1)

7.0 - Visão de processos

Os processos envonveldo as ações disponíveis no sistemas foram descritos pricipalmente por meio de diagramas de sequência que demonstram de forma minuciosa o ciclo de vida de todas as partes envolvidas durante a execução de cada funcionalidade do produto. Os diagramas são:

Realizar Login

Ação de realizar login no sistema por meio de um registro validado por autenticador de sessão, após o cadastro a entrada é validada com o email e senha do usuário novo.

Fazer Login

Cadastrar Produto

Fluxo detalhando o cadastro de um produto novo por um usuário.

CriarNovoProduto

Processo de visualização de um catálogo de produtos disponível ao usuário.

ConsultarTodosProdutos

Visualizar Detalhes do Produto

Visualizar todos os detalhes referente a um produto selecionado.

Ver detalhes do produto

Favoritar Produto

Processo de favoritar um produto disponível no catálogo.

Favoritar Produto

Remover Produto

Remover um produto do carrinho de compras.

Remover Produto

8.0 - Visão de implementação

8.1 - Diagrama de componentes

A visão de implementação descreve como o sistema será implementado, sendo visualizado especialmente através do diagrama de componentes,esse que refere-se a um módulo de classes que representa sistemas ou subsistemas independentes com capacidade de interagir com o restante do sistema.A visão de implementação permite compreender a distribuição física do sistema analisando o fluxo de trabalho sob o design.

Component Diagram0

9.0 - Visão de dados

Visão geral de dados persistentes, o qual mapeia dos objetos aos dados persistentes Aqui, há uma descrição do modelo de persistência de dados persistidos no MongoDB.

Modelo Usuário

  • _id
  • Tipo: Number

  • Obrigatoriedade: Sim

  • Nome

  • Tipo: String

  • Obrigatoriedade: Sim

  • Email

  • Tipo: String

  • Obrigatoriedade: Sim

  • Único: Sim

  • Senha

  • Tipo: String

  • Obrigatoriedade: Sim

  • Whatsapp

  • Tipo: Number
  • Obrigatoriedade: Sim
  • CPF
  • Tipo: Number
  • Obrigatoriedade: Sim

Exemplo

carbon (11)

Modelo Produto

  • _id
  • Tipo: Number

  • Obrigatoriedade: Sim

  • Nome

  • Tipo: String

  • Obrigatoriedade: Sim

  • imagem

  • Tipo: String

  • Obrigatoriedade: Sim

  • Descricao

  • Tipo: String

  • Obrigatoriedade: Sim

  • Preco

  • Tipo: Number

  • Obrigatoriedade: Sim

  • User_id

  • Tipo: Usuário (ref user)

  • Obrigatoriedade: Sim

  • User_favorite

  • Tipo: ArrayList Usuário (ref user)

  • Obrigatoriedade: Não

  • Tag

  • Tipo ArrayList Tag (ref tag)
  • Obrigatoriedade: Não

Exemplo

carbon (12)

Modelo TAG

  • _id
  • Tipo: Number

  • Obrigatoriedade: Sim

  • Tag

  • Tipo ArrayList String
  • Obrigatoriedade: Sim

Exemplo

carbon (13)

Referências

React: o que é, como funciona e porque usar e como aprender. Disponível em: https://kenzie.com.br/blog/react/. Último acesso em 29/04/2021.

O que é o express js. Disponível em: https://www.treinaweb.com.br/blog/o-que-e-o-express-js/. Último acesso em: 29/04/2021.

O que é MVC. Disponível em: https://www.treinaweb.com.br/blog/o-que-e-mvc/. Ùltimo acesso em: 29/04/2021.

Padrão MVC | Arquitetura Model-View-Controller. Disponível em: https://www.portalgsti.com.br/2017/08/padrao-mvc-arquitetura-model-view-controller.html. Último acesso em: 29/04/2021.

Conceito: Visão Lógica. Disponível em: https://www.cin.ufpe.br/~gta/rup-vc/core.base_rup/guidances/concepts/logical_view_C135365E.html. Último acesso em: 29/04/2021.

Quais os benefícios de criar um diagrama de contexto?. Disponível em: https://robsoncamargo.com.br/blog/Quais-os-beneficios-de-criar-um-diagrama-de-contexto. Último acesso em: 29/04/2021.