Skip to content

GitLab

Last edited by Gabriel Grellert Spiandorello
Page history

Arquitetura

Home Escopo Git Workflow Design/Mockups Configuração Arquitetura Gerência BD Qualidade

Sumário

Definições Arquitetura

Descrição

  • Esta seção irá abordar a arquitetura da aplicação.

Sumário

Arquitetura do Sistema

A arquitetura utilizada no projeto é baseada no padrão Modular, com inspiração na arquitetura em camadas (Layered Architecture). No NestJS, os componentes são organizados em DTOs (Data Transfer Objects), Controllers, Services e Modules. Cada módulo encapsula a lógica relacionada a um domínio específico da aplicação, facilitando a manutenção e a escalabilidade. Os DTOs são responsáveis pela definição dos dados de entrada e saída, garantindo validações consistentes. Os Controllers lidam com as requisições HTTP, enquanto os Services contêm a lógica de negócios e manipulam a comunicação com outras partes da aplicação.

Essa abordagem modular e bem estruturada permite separar responsabilidades e promover um código limpo e reutilizável. A injeção de dependências é um ponto forte dessa arquitetura, possibilitando testes mais simples e maior flexibilidade na substituição de implementações conforme necessário.

Deploy

No processo de deploy descrito no diagrama, o backend e o banco de dados são configurados em containers Docker. Inicialmente, as imagens Docker desses serviços são buildadas a partir do repositório do GitLab. Após a build, a instância EC2 as executa em containers Docker, garantindo que a versão mais recente da aplicação esteja rodando.

Para o frontend, o deploy é gerenciado pelo AWS Amplify, que está integrado ao repositório GitLab. Toda vez que um push é feito na branch main, o AWS Amplify automaticamente detecta as mudanças e inicia o processo de build e deploy da aplicação frontend. Isso automatiza o ciclo de deploy contínuo, garantindo que as atualizações sejam rapidamente disponibilizadas tanto para o backend quanto para o frontend.

Diagrama de Deploy

  • O diagrama apresenta o processo de deploy da aplicação Cosmos utilizando a nuvem AWS.

Cosmos_-_Diagrama_de_Arquitetura

Diagrama de Componentes

Um diagrama de componentes eficiente para a aplicação "Cosmos" pode ser organizado conforme as funções específicas de cada parte do sistema:

Componentes de Infraestrutura

  1. Amazon Elastic Compute Cloud (EC2): Responsável pela execução dos containers Docker que rodam tanto o backend quanto o banco de dados. A EC2 é configurada para executar os containers, oferecendo uma infraestrutura flexível e escalável para o deploy.

Componentes de Backend

  1. NestJS: Framework utilizado para o desenvolvimento do backend, que está dentro de um container Docker.
  2. PostgreSQL: Banco de dados relacional que também é gerenciado via containers.

Componentes de Frontend

  1. React: Biblioteca JavaScript utilizada para o desenvolvimento do frontend, hospedada no AWS Amplify.
  2. AWS Amplify: Plataforma para hospedagem e deploy de aplicações frontend, com integração direta ao repositório GitLab.

Definições de Tecnologias

  • Logo abaixo todas as tecnologias e linguagens de programação utilizadas no projeto.

Frontend

  • Repositório: https://tools.ages.pucrs.br/cosmos/cosmos-frontend

  • React: Biblioteca JavaScript usada para construir interfaces de usuário dinâmicas e interativas. Ela permite criar componentes reutilizáveis, o que facilita a manutenção e o desenvolvimento de grandes aplicações web. Referência

  • TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. Referência

  • JavaScript: Uma linguagem de programação versátil usada principalmente para criar interatividade em sites e aplicações web. Referência

  • HTML/CSS: HTML é usado para estruturar o conteúdo na web, e CSS é usado para controlar a apresentação, formatação e layout. Referência

  • SASS: Pré-processador CSS que adiciona recursos como variáveis, aninhamento e mixins ao CSS, tornando o código mais organizado e fácil de manter. Referência

  • Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. Referência

Backend

  • Repositório: https://tools.ages.pucrs.br/

  • TDB: Texto. Referência

  • TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. É amplamente usada em projetos que exigem maior escalabilidade e manutenção. Referência

  • Postgres (PostgreSQL): Sistema de gerenciamento de banco de dados relacional robusto e de código aberto, conhecido por sua confiabilidade, flexibilidade e suporte a recursos avançados, como consultas complexas e transações atômicas. Referência

  • Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. É essencial para a criação de ambientes isolados e portáteis. Referência

Módulos do Sistema

  • Frontend:

    • Estrutura Principal

      • .vscode: Configurações para o editor VS Code, como extensões recomendadas e configurações específicas do projeto.
      • node_modules: Bibliotecas e dependências do projeto instaladas via npm ou yarn.
      • public: Pasta com arquivos estáticos, como index.html e imagens, servidos diretamente pelo servidor.
      • src: Diretório principal onde o código-fonte do front-end está organizado.

    • Dentro do diretório src

      • components: Contém componentes reutilizáveis usados em várias partes do aplicativo.
      • context: Armazena e gerencia os contextos do React, fornecendo estados globais e lógica compartilhada para a aplicação.
      • hooks: Reúne hooks personalizados do React utilizados no projeto.
      • models: Define as interfaces e tipos que descrevem as estruturas de dados usadas na aplicação.
      • pages: Contém as páginas principais da aplicação, geralmente representando rotas únicas.
      • routes: Gerencia as rotas e a navegação dentro da aplicação.
      • services: Serviços que lidam com a lógica de negócios e as interações com APIs externas.
      • styles: Define os estilos globais e componentes de estilo utilizados em toda a aplicação.
      • index.tsx: Arquivo de entrada principal do projeto React, onde a aplicação é inicializada.
      • theme.ts: Define e gerencia temas de estilo globais, como cores e tipografia.

    • Arquivos de Configuração e Scripts

      • .eslintrc.js: Arquivo de configuração para o ESLint, que define regras e padrões de código a serem seguidos no projeto, ajudando a manter a qualidade e consistência do código.
      • .gitignore: Arquivo que especifica quais arquivos e diretórios devem ser ignorados pelo Git, evitando que informações sensíveis ou desnecessárias sejam versionadas.
      • .prettierrc: Arquivo de configuração para o Prettier, que define regras de formatação de código, como indentação, uso de aspas, e comprimento máximo de linhas, para manter um estilo de código consistente.
      • package-lock.json & package.json: Arquivos que gerenciam as dependências do projeto e garantem uma instalação consistente das mesmas.
      • README.md: Arquivo de documentação do projeto, geralmente contendo instruções de instalação, uso e outras informações importantes sobre o projeto.
      • tsconfig.json: Configurações do TypeScript para o projeto, definindo como o código TypeScript deve ser compilado.

  • Backend:

    • Estrutura Principal

      • Texto: Texto.

    • Dentro do diretório APP:

      • controllers: Texto.
      • models: Texto.
      • routes: Texto.

    • Outros Diretórios e Arquivos

      • docker-compose.yml: Define e configura serviços relacionados, volumes e redes utilizando o Docker Compose.
      • Dockerfile: Script para criar uma imagem Docker do projeto.