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

• Explicação da Arquitetura e porque da escolha.

Deploy

• O deploy é o processo de disponibilizar uma aplicação concluída para uso. Esse processo pode ser realizado em diversas fases do projeto, assim como após sua finalização. Utilizamos a plataforma de computação em nuvem TDB.

Diagrama de Deploy

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

Diagrama de Componentes

• Para criar um diagrama de componentes eficiente para a aplicação "Cosmos", que ilustre claramente, podemos seguir a descrição a seguir, organizando os elementos conforme suas funções específicas:

• Componentes de Infraestrutura

  • Docker Containers
    • Função: Isolamento e gerenciamento de dependências.
    • Responsabilidades: Cada componente do servidor (FastAPI, Gitlab Runner, Postgres) é implantado em um contêiner separado.
  • Gitlab Runner
    • Função: Automação de CI/CD.
    • Responsabilidades: Automatizar atualizações e testes do código.
  • AWS EC2
    • Função: Hospedagem dos contêineres Docker.
    • Responsabilidades: Fornecer recursos computacionais.
  • AWS S3
    • Função: Armazenamento para dados estáticos ou backups.
    • Responsabilidades: Integrar-se com a aplicação para armazenamento de dados não-relacionais.

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.