Definições Arquitetura

Descrição

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

Sumário

• Arquitetura do Sistema
• Deploy
  • Diagrama de Deploy
  • Diagrama de Componentes
• Definições de Tecnologias
  • Frontend
  • Backend
• Módulos do Sistema

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 no GitLab. Após a build, essas imagens são enviadas para o Elastic Container Registry (ECR) da AWS. A instância EC2, responsável por executar os serviços, recupera essas imagens diretamente do ECR e 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.

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 puxar as imagens mais recentes do ECR e executar os containers, oferecendo uma infraestrutura flexível e escalável para o deploy.
2. Amazon Elastic Container Registry (ECR): Repositório onde as imagens Docker do backend e banco de dados são armazenadas. As imagens são buildadas e enviadas para o ECR a partir do repositório GitLab.
3. GitLab CI/CD: Pipeline de CI/CD que automatiza o build das imagens Docker e o envio para o ECR. O GitLab CI/CD é responsável por garantir que o código mais recente seja transformado em uma imagem Docker pronta para ser executada na EC2.

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.