| | [Home](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [**Arquitetura**](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) | | ||
| | :----------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :----------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: | | ||
| # Arquitetura do Sistema | ||
| ## Descrição | ||
| Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, além dos dados relativos ao deploy. | ||
| # Arquitetura | ||
| ## Sumário | ||
| - [Arquitetura do Sistema](#arquitetura-do-sistema) | ||
| - [Descrição](#descrição) | ||
| - [Sumário](#sumário) | ||
| - [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação) | ||
| - [Deploy](#deploy) | ||
| - [Recipes API](#recipes-api) | ||
| - [Diagrama de Deploy](#diagrama-de-deploy) | ||
| - [Backend](#backend) | ||
| - [Definições de Tecnologias](#back-end-def-tec) | ||
| - [Módulos do Sistema](#back-end-mods-sis) | ||
| - [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação) | ||
| - [Parede de Tecnologias](#parede-de-tecnologias) | ||
| - [Frontend](#frontend) | ||
| - [Definições de Tecnologias](#definições-de-tecnologias) | ||
| - [Arquitetura do Frontend](#arquitetura-do-frontend) | ||
| - [Estrutura dos Componentes](#estrutura-dos-componentes) | ||
| - [Backend](#backend) | ||
| - [Definições de Tecnologias](#definições-de-tecnologias) | ||
| - [Arquitetura do Backend](#arquitetura-do-backend) | ||
| - [Diagrama de Fluxo](#diagrama-de-fluxo) | ||
| - [Frontend](#frontend) | ||
| - [Definições de Tecnologias](#front-end-def-tec) | ||
| - [Módulos do Sistema](#front-end-mods-sis) | ||
| - [Diagramas de Componentes](#diagramas-de-componentes) | ||
| - [Diagrama do Sistema](#diagrama-do-sistema) | ||
| - [Banco de Dados](#banco-de-dados) | ||
| # Arquitetura Geral da Aplicação | ||
| ## Arquitetura Geral da Aplicação | ||
| Sendo uma aplicação **Web**, resume-se em três principais módulos: | ||
| - Frontend | ||
| - Backend | ||
| - Banco de Dados | ||
| Os módulos foram construidos de forma desacoplada, os quais se conversam via protocolo HTTP. | ||
|  | ||
| ## Deploy | ||
| <h3>Backend</h3> | ||
| ## Parede de Tecnologias | ||
| - Railway: https://railway.app/ | ||
| - Usuário: [email protected] | ||
| - Senha: Rivi@2022/2 | ||
| - Documentação no Swagger: https://railway.app/api-docs | ||
|  | ||
| <h3>Frontend</h3> | ||
| - Vercel: https://rivi-frontend-js.vercel.app/ | ||
| - Usuário: [email protected] | ||
| - Senha: Rivi@2022/2 | ||
| # Frontend | ||
| ### Diagrama de Deploy | ||
| ### Definições de Tecnologias | ||
| TBD | ||
| - React | ||
| - Next.js | ||
| - Chakra UI | ||
| - TypeScript | ||
| ## Backend | ||
| <h3 id="back-end-def-tec">Definições de Tecnologias</h3> | ||
| ### Arquitetura do Frontend | ||
| - Node.js | ||
| - Express | ||
| No Frontend, aplicamos um padrão de projeto chamado **Atomic Design Pattern**. Desenvolvido por Brad Frost, este padrão adota uma estrutura semelhante a **Arquitetura em Camadas**, porém busca reunir os elementos visuais por granularidade, ou seja, organiza os elementos do mais simples e primitivo, ao mais estruturado e complexo. | ||
| <h3 id="back-end-mods-sis">Módulos do Sistema</h3> | ||
|  | ||
|  | ||
| - **Átomos (Atoms)**: Na química, os átomos são os blocos de construção básicos da matéria. Assim, os átomos das nossas interfaces servem como os blocos de construção fundamentais que compõem todas as nossas interfaces de usuário. Esses átomos incluem elementos básicos como labels, inputs, botões Et cetera. Sendo a parte mais genérica e reutilizável da interface do usuário, o átomo não contém regra de negócio. | ||
| ## Frontend | ||
| - **Molécula (Molecules)**: Na química, moléculas são grupos de átomos ligados entre si que assumem novas propriedades. Nas interfaces, as moléculas são grupos simples de elementos da interface do usuário funcionando como uma unidade. Por exemplo, um label de formulário, um input de pesquisa e um botão podem se unir para criar uma molécula de um formulário de pesquisa. É a parte responsável por agrupar componentes que serão utilizados em uma tela. Nesta, é possível conter alguma lógica ou regra de negócio. | ||
| <h3 id="front-end-def-tec">Definições de Tecnologias</h3> | ||
| - **Organismo (Organisms)**: Organismos são componentes de IU (Interface de Usuário) complexos, compostos por vários grupos de moléculas e/ou átomos. Esses organismos formam seções distintas de uma interface. Responsável por aglutinar diversas estruturas visuais e resguardar uma certa lógica associada. | ||
| - React | ||
| - Next.js | ||
| - **Modelos (Templates)**: São estruturas que agrupam os componentes em um layout, do qual demonstra a estrutura do design planejado. Os templates tem a função de agrupar todos os elementos visuais e ter uma rápida conexão com as páginas, ou seja, permitindo que os modelos sejam trocados com facilidade. | ||
| <h3 id="front-end-mods-sis">Módulos do Sistema</h3> | ||
| - **Páginas (Pages)**: É responsável por tornar os modelos em um conteúdo real, permitindo articular variações para demonstrar a interface final, a fim de testar a resiliência do sistema. | ||
| O sistema foi dividido em `camadas` e podemos ver as principais abaixo: | ||
| ### Estrutura dos Componentes | ||
|  | ||
| TBD | ||
| ## Backend | ||
| ### Definições de Tecnologias | ||
| - NodeJs | ||
| - Express | ||
| - Prisma | ||
| ### Arquitetura do Backend | ||
| No Backend, por ser uma aplicação **Server Side - API**, foi aplicado uma **Arquitetura em Camadas**, da qual se constitui por: | ||
| - Controllers: Estrutura que contém toda a lógica de cada requisição solicitada na aplicação. | ||
| - Routes: Segmento que ordena as chamadas dos endpoints da API. | ||
| - **Átomo**: Na química, os átomos são os blocos de construção básicos da matéria. Assim, os átomos das nossas interfaces servem como os blocos de construção fundamentais que compõem todas as nossas interfaces de usuário. Esses átomos incluem elementos básicos como labels, inputs, botões etc., sendo a parte mais genérica e reutilizável da interface do usuário. Não contém regra de negócio. | ||
| - Models: Responsável por preservar os modelos de dados da aplicação, com seus atributos "tipados" e com suas associações. | ||
| - **Molécula**: Na química, moléculas são grupos de átomos ligados entre si que assumem novas propriedades. Nas interfaces, as moléculas são grupos simples de elementos da interface do usuário funcionando como uma unidade. Por exemplo, um label de formulário, um input de pesquisa e um botão podem se unir para criar uma molécula de formulário de pesquisa. É a parte responsável por agrupar componentes que serão utilizados em uma tela. Contém regra de negócio/lógica. | ||
| # Banco de Dados | ||
| - **Organismo**: Organismos são componentes de IU complexos, compostos por grupos de moléculas e/ou átomos e/ou outros organismos. Esses organismos formam seções distintas de uma interface. Responsável pela a apresentação dos containers e interage com a navegação entre as telas. Possui pouca lógica/regra de negócio (menos do que o container). Onde são feitas as requisições pra API, geralmente. | ||
| Optamos por fazer uso de um banco de dados **MongoDB**. Para mais detalhes, acesse a categoria [BD (Banco de Dados)](banco_dados). | ||
| \ No newline at end of file |