Arquitetura do Sistema

Descrição

Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend.

Sumário

• Arquitetura do Sistema
  • Backend
    • Definições de Tecnologias
  • Frontend
    • Definições de Tecnologias

Backend

Definições de Tecnologias

• Linguagem: TypeScript
• Framework: NestJS
• ORM: TypeORM

É uma API REST construída utilizando NestJS que é uma estrutura para criar aplicativos NodeJS eficientes e escaláveis do lado do servidor. Ele usa JavaScript progressivo, é construído e suporta totalmente TypeScript, uma linguagem de programação de código aberto desenvolvido pela Microsoft, e combina elementos de OOP (Programação Orientada a Objetos), FP (Programação Funcional) e FRP (Programação Reativa Funcional).

Utilizamos TypeORM que é um ORM (Object Relational Mapper), é uma técnica de mapeamento objeto relacional que permite fazer uma relação dos objetos com os dados que os mesmo representam.

Modelo Model-View-Controller(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, o que sem dúvida traz muitas vantagens que veremos mais à frente.

Quando falamos sobre o MVC, cada uma das camadas apresenta geralmente as seguintes responsabilidades:

● Model: A responsabilidade dos models é representar o negócio. Também é responsável pelo acesso e manipulação dos dados na sua aplicação.

● View: A view é responsável pela interface que será apresentada, mostrando as informações do model para o usuário.

● Controller: É a camada de controle, responsável por ligar o model e a view, fazendo com que os models possam ser repassados para as views e vice-versa.

Autenticação(OAuth)

JWT (JSON Web Token) é um padrão aberto (RFC 7519) para transmitir informações confiáveis e seguras entre partes. Ele consiste em uma cadeia compacta e auto-assinada de informações codificadas em formato JSON, que podem ser usadas para autenticação e autorização. JWT é comumente usado para autenticação de usuários em aplicativos web e mobile, e também pode ser usado para comunicação entre sistemas.

O JWT é um padrão aberto que pode ser usado em qualquer aplicativo que precisa transmitir informações confiáveis e seguras entre as partes, independentemente da plataforma ou linguagem de programação.

Como funciona? O fluxo de trabalho do JWT é dividido em três etapas:

• Geração do Token:

A primeira etapa é a geração do token JWT. Nessa etapa, um servidor ou aplicativo gera um token JWT contendo as informações necessárias para autenticar o usuário. O token é geralmente gerado após o usuário fornecer suas credenciais (como nome de usuário e senha) e o servidor verificar essas credenciais. O token é assinado com uma chave secreta que só é conhecida pelo servidor ou aplicativo que gerou o token.

• Envio do Token:

A segunda etapa é o envio do token JWT. Nessa etapa, o servidor ou aplicativo envia o token JWT para o cliente, geralmente em um cabeçalho HTTP "Authorization". O cliente armazena o token para uso posterior, como em solicitações subsequentes para o servidor.

• Verificação do Token:

A terceira etapa é a verificação do token JWT. Nessa etapa, o servidor ou aplicativo verifica se o token JWT enviado pelo cliente é válido. O servidor verifica a assinatura do token usando a chave secreta que só é conhecida pelo servidor. Se a assinatura estiver correta, o servidor extrai as informações do token e verifica se o usuário tem permissão para acessar o recurso solicitado. Se o token for inválido ou expirado, o servidor nega o acesso ao recurso solicitado.

Frontend

Definições de Tecnologias

• Linguagem: TypeScript
• Biblioteca: React
• Estilização: Sass

Utilizamos o React que é uma biblioteca JavaScript para construção de interfaces de usuário, mas que consegue facilmente utilizar TypeScript, que é o caso desse projeto. Além de utilizarmos a estilização Sass, uma linguagem de extensão CSS.

Diagrama em alto nível da arquitetura do sistema

Módulos do Sistema

.
|-- assets
|   |-- icons
|   `-- images
|-- components
|   |-- Blur
|   |-- Button
|   |-- Card
|   |-- Carousel
|   |   `-- Slide
|   |-- CheckboxInput
|   |-- Confirmation
|   |-- DefaultModal
|   |-- DraggableItem
|   |-- DraggableSlider
|   |-- DragNDropFile
|   |-- EndModule
|   |-- Feedback
|   |-- Header
|   |-- Header-Modal
|   |-- IconButton
|   |-- ImageInput
|   |-- Input
|   |-- Loader
|   |-- Modal
|   |-- ProgressTracker
|   |   `-- Ball
|   |-- RadioInput
|   |-- SelectInput
|   `-- Table
|-- dtos
|-- pages
|   |-- Collaborator
|   |   |-- Activities
|   |   |-- Course
|   |   |-- Home
|   |   `-- Module
|   |-- Common
|   |   `-- Activities
|   |       `-- components
|   |           |-- ActivityList
|   |           |-- ActivityManager
|   |           |-- ActivityViewer
|   |           |-- card-activity
|   |           |-- EditableText
|   |           |-- external-content-modal
|   |           |-- Media
|   |           |-- Paper
|   |           |-- ProgressBar
|   |           |-- Question
|   |           `-- question-content
|   |-- Home
|   |-- Login
|   |   `-- components
|   |       `-- LoginInput
|   `-- Organization
|       |-- Activities
|       |   |-- List
|       |   |   `-- AddActivityModal.tsx
|       |   `-- manage
|       |-- Admin
|       |   `-- components
|       |       |-- CreateUserModal
|       |       `-- UpdateUserModal
|       |-- Area
|       |   `-- components
|       |       `-- AreaModal
|       |-- Course
|       |   `-- components
|       |       |-- CourseModal
|       |       `-- CourseModalExistent
|       |-- Home
|       |   |-- components
|       |   |   |-- ActivityModal
|       |   |   |   `-- activity-modal-content
|       |   |   `-- CardHome
|       |   `-- images
|       `-- Modules
|           `-- components
|               `-- ModuleModal
|-- providers
|   |-- Auth
|   |-- Blur
|   |-- Modal
|   `-- Navigation
|-- router
|-- sass
|-- services
|   |-- auth
|   |   `-- login
|   |-- core
|   |   |-- activity
|   |   |-- areas
|   |   |-- report
|   |   `-- users
|   `-- onboarding
|       `-- courses
`-- utils
    |-- contants
    `-- stores
        `-- auth

• Assets: Diretório contendo os conteúdos estáticos do sistema, como imagens e ícones.
• Components: Diretório contendo os componentes reutilizáveis do sistema. Em geral são componentes genéricos que são utilizados em diferentes páginas do sistema.
• DTOs: Diretório contendo os DTOs (Data transfer objects) do sistema. São objetos que encapsulam dados que serão utilizados pela aplicação.
• Pages: Diretório contendo as páginas do sistema
• Providers: Diretório contendo a lógica de providers do sistema, permitindo assim o acesso de dados de estados em diversos componentes da aplicação
• Router: Diretório contendo a camada de rotas da aplicação. É aqui onde as definições de navegação entre telas do sistema estão declaradas.
• Sass: Diretório contendo as definições de variáveis, constantes e temas de estilização utilizadas por toda a aplicação.
• Services: Diretório contendo a lógica de acesso à serviços da API
• Utils: Diretório contendo métodos, constantes e funções utilitárias que podem ser chamadas por todas as camadas da aplicação.